/* Wartip public channel | midnight grid skin.
   Presentation only. Payment handling, routes, and public-navigation logic stay intact. */
:root {
  color-scheme: dark;
  --bg: #0c0b13;
  --card: #191522;
  --field: #221d2e;
  --line: #392f4e;
  --primary: #a36cff;
  --primary2: #c3a0ff;
  --muted: #b8afc8;
  --text: #f7f4ff;
  --shadow: 0 14px 35px rgba(0, 0, 0, .18);
  --public-shadow: 0 14px 35px rgba(0, 0, 0, .18);
  --wt-polish-violet: #b58bff;
  --wt-polish-border: #393049;
  --wt-polish-shadow: 0 12px 32px rgba(0,0,0,.16);
  --wt-dark-surface: #191622;
  --wt-dark-raised: #211b2e;
  --wt-dark-soft: #262037;
  --wt-dark-border: #393047;
  --wt-dark-ink: #f6f2ff;
  --wt-dark-accent: #b68bff;
}
html { background:#0c0b13; color-scheme:dark; }
body {
  color-scheme: dark;
  color: var(--wt-dark-ink);
  background-color: #0c0b13 !important;
  background-image:
    radial-gradient(ellipse 850px 420px at 50% -145px, rgba(109,58,176,.16), transparent 85%),
    linear-gradient(rgba(162,139,201,.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(162,139,201,.052) 1px, transparent 1px) !important;
  background-size: auto, 36px 36px, 36px 36px !important;
  background-position: center top, 0 0, 0 0;
  font-synthesis: none;
}
/* A flat persistent bar, with a small light logo tile for the original logo's dark wordmark. */
body > .container > header.top {
  background: #15111e !important;
  border-bottom: 1px solid #392d4c !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.2) !important;
  backdrop-filter: none !important;
}
body > .container > header.top .logo {
  display: inline-flex; align-items:center; justify-content:center;
  min-height: 45px; padding: 4px 10px; flex: none;
  background: #f4f0fb; border: 1px solid #d9c9f1;
  border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,.13);
}
body > .container > header.top .logo img {
  display:block; width: 66px !important; height:auto !important;
  max-height: 36px !important; object-fit: contain;
}
body > .container > header.top .home-link {
  background: #221a31 !important; color: #e9dbff !important;
  border-color: #48345f !important; box-shadow: none !important;
}
body > .container > header.top .home-link:hover {
  background: #322442 !important; border-color: #8958c8 !important;
  color: #fff !important;
}
body > .container > .cover {
  border-color: #49345f !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.22) !important;
}
body > .container > .cover .live {
  background: rgba(26,17,41,.84); color:#e5d6ff;
  border: 1px solid rgba(223,201,255,.35);
}
/* Public-channel section tabs: subtle active state; stay in position on hover. */
body > .container > .tabs {
  background: rgba(24,20,32,.98) !important;
  border-color: #3b304b !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.12) !important;
}
body > .container > .tabs a {
  color:#bcb1cd !important; border-color: transparent;
}
body > .container > .tabs a small { color:inherit; }
body > .container > .tabs a:hover {
  background: #2b203d !important; color:#f2e8ff !important;
}
body > .container > .tabs a.active,
body > .container > .tabs a[aria-current="page"] {
  color:#fff !important;
  background: linear-gradient(115deg,#4d297b,#39204f) !important;
  border-color:#7f51ba !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075) !important;
}
/* Each panel is a readable floating surface over the stationary background grid. */
body > .container .card,
body > .container .support-card,
body > .container .goal-card,
body > .container .recent-card,
body > .container .about,
body > .container .product {
  background: var(--wt-dark-surface) !important;
  border: 1px solid var(--wt-dark-border) !important;
  color: var(--wt-dark-ink) !important;
  box-shadow: var(--wt-polish-shadow) !important;
}
body > .container .goal-card {
  background: linear-gradient(142deg,#231a32 0%,#191522 70%) !important;
}
body > .container .card h2,
body > .container .card h3,
body > .container .about h2,
body > .container .buyer-lock h3 { color:#f6f2ff !important; }
body > .container .kicker,
body > .container .goal-card .kicker,
body > .container .recent .kicker,
body > .container .product-foot,
body > .container .order-layout .card>h2.kicker {color:#b993ff !important;}
body > .container .muted,
body > .container .hint,
body > .container .recent small,
body > .container .product-foot small,
body > .container .secure-hint,
body > .container .buyer-lock p {color:#b8afc8 !important;}
body > .container .support-intro {border-bottom-color:#382e49 !important;}
body > .container .support-intro>.muted {color:#c3b9d2 !important;}
body > .container .support-heading .icon,
body > .container .gratitude-icon,
body > .container .recent-heading-icon,
body > .container .unavailable-icon,
body > .container .slip-picker-icon,
body > .container .bank-emoji {
  background:#332344 !important; color:#c59dff !important;
}
body > .container .checkout-progress-item {color:#a99cbc !important;}
body > .container .checkout-progress-item.active {color:#d9c2ff !important;}
body > .container .checkout-progress-item span {
  background:#30273e; color:#beb0d1;
}
body > .container .checkout-progress-item.active span {
  background:linear-gradient(135deg,#7839d8,#9b63f0);
  color:#fff; box-shadow:0 4px 15px rgba(128,60,213,.28);
}
body > .container .checkout-progress-item.done span {background:#193b33; color:#a2e2ce;}
body > .container .checkout-progress>i {background:#4b3a60;}
body > .container .step-label {
  background:#352349 !important; color:#d6bbff !important;
  border:1px solid #65418b !important;
}
/* Inputs and amount presets must remain crisp even with browser autofill. */
body > .container .field label {color:#ede4fa !important;}
body > .container .input,
body > .container textarea,
body > .container select {
  color:#f6f2ff !important;
  background:#211b2e !important;
  border-color:#493a60 !important;
  box-shadow:none !important;
  caret-color:#d6b5ff;
}
body > .container .input:hover,
body > .container textarea:hover,
body > .container select:hover {border-color:#8862b2 !important;}
body > .container .input:focus,
body > .container textarea:focus,
body > .container select:focus {
  background:#272033 !important; border-color:#b08bff !important;
  box-shadow:0 0 0 3px rgba(157,102,241,.2) !important;
}
body > .container input::placeholder,
body > .container textarea::placeholder {color:#a99cb9 !important;opacity:1;}
body > .container input:-webkit-autofill,
body > .container input:-webkit-autofill:hover,
body > .container input:-webkit-autofill:focus {
  -webkit-text-fill-color:#f6f2ff !important;
  box-shadow:0 0 0 1000px #211b2e inset !important;
  transition:background-color 9999s ease-out;
}
body > .container .amounts button {
  background:#251c34 !important; border-color:#4b385f !important;
  color:#d6beff !important; box-shadow:none !important;
}
body > .container .amounts button:hover,
body > .container .amounts button.chosen {
  background:#462c67 !important; color:#fff !important;
  border-color:#aa7af2 !important;
  box-shadow:inset 0 0 0 1px rgba(215,188,255,.12) !important;
}
body > .container .btn {
  background:#2c203d; color:#e5d4ff;
  border-color:#573e75;
}
body > .container .btn:hover {
  background:#3a2850; color:#fff; border-color:#986bd4;
}
body > .container .btn-primary {
  background:linear-gradient(115deg,#7032d0,#9554ed) !important;
  border-color:#a070f3 !important; color:#fff !important;
  box-shadow:0 8px 20px rgba(63,24,130,.27) !important;
}
body > .container .btn-primary:hover {
  background:linear-gradient(115deg,#7837dc,#a464fa) !important;
  box-shadow:0 9px 22px rgba(98,49,170,.34) !important;
}
body > .container .btn-back {background:transparent !important;color:#cab9e1 !important;border-color:#4b3a61 !important;}
body > .container .btn-back:hover {background:#2b2238 !important;}
/* Donation checkout / bank / upload picker. */
body > .container .payment-option,
body > .container .payment-summary,
body > .container .bank,
body > .container .slip-picker,
body > .container .support-unavailable {
  background:#231c30 !important;
  border-color:#544068 !important;
  color:#efe7ff !important;
}
body > .container .payment-option span,
body > .container .payment-summary span,
body > .container .bank-head b,
body > .container .account-number {color:#f1e6ff !important;}
body > .container .payment-option small,
body > .container .payment-summary small,
body > .container .account-owner,
body > .container .slip-picker small {color:#baaccc !important;}
body > .container .payment-summary strong,
body > .container .slip-picker strong {color:#d6b7ff !important;}
body > .container .slip-picker:hover,
body > .container .slip-picker.is-selected {background:#332542 !important;border-color:#ac7beb !important;}
body > .container .bank-copy {background:#352544 !important;color:#e2ccff !important;border-color:#60417c !important;}
body > .container .note {
  background:#30213f !important; color:#decaf7 !important;
  border-color:#62467d !important;
}
body > .container .note.success {background:#17382d !important;color:#baf4d9 !important;border-color:#3f8368 !important;}
body > .container .note.error {background:#43212e !important;color:#ffd3df !important;border-color:#96546d !important;}
body > .container .goalbar {background:#322842 !important;}
body > .container .recent,
body > .container .recent-heading {border-color:#3d304f !important;}
body > .container .product-art {background:#292139 !important;color:#c6a1ff !important;}
body > .container .product-art img {background:#201b2b !important;}
body > .container .product-body {background:var(--wt-dark-surface) !important;}
body > .container .wfc-about-social {border-top-color:#40334f !important;}
body > .container .wfc-about-link {
  color:#e9d9ff !important;background:#292037 !important;
  border-color:#4b385e !important;box-shadow:none !important;
}
body > .container .wfc-about-link:hover {background:#392949 !important;border-color:#9069c8 !important;}
body > .container .wfc-about-link span:last-child{color:#c8a4ff !important;}
/* Skeleton and dialogs are rendered outside of, or dynamically inside, the view. */
body > .container .wt-skeleton-card {
  background:#191521 !important;border-color:#383048 !important;
}
body > .container .wt-skeleton-line,
body > .container .wt-skeleton-block {background:#30263e !important;}
body > .container .wt-skeleton-line::after,
body > .container .wt-skeleton-block::after {
  background:linear-gradient(90deg,transparent,rgba(209,178,255,.12),transparent);
}
.buyer-dialog {color:#f6f1ff !important;border:1px solid #645077 !important;background:#1c1726 !important;}
.buyer-dialog-inner {background:#1c1726 !important;color:#f6f1ff !important;}
.buyer-dialog-inner h2 {color:#f6f1ff !important;}
.buyer-dialog-inner p {color:#c0b3d0 !important;}
.buyer-dialog-icon {background:#3b2851 !important;color:#d7afff !important;}
.buyer-dialog::backdrop {background:rgba(4,3,9,.78);}
.buyer-dialog .btn {background:#312440;color:#e5d6ff;border-color:#61477b;}
.buyer-dialog .btn-primary {background:linear-gradient(115deg,#7739d5,#9959ee);color:#fff;}
.ws-toast {background:#271d35 !important;border-color:#66458b !important;color:#fff !important;}
body > .container footer {color:#a89aba !important;}
/* Keep cover branding high-contrast and uncropped; no change to saved channel art. */
body > .container > .cover .channel h1,
body > .container > .cover .channel p {color:#fff !important;}
@media(max-width:620px) {
  body > .container > header.top {background:#15111e !important;border-radius:0 !important;}
  body > .container > header.top .logo {min-height:41px;padding:3px 7px;border-radius:8px;}
  body > .container > header.top .logo img {width:58px !important;max-height:32px !important;}
  body > .container .card {box-shadow:0 8px 24px rgba(0,0,0,.13) !important;}
  body > .container .tabs a {color:#c9bbd8 !important;}
}
@media(prefers-reduced-motion:reduce) {
  body > .container .tabs a,
  body > .container .btn,
  body > .container .amounts button {transition:none !important;}
}


/* 2026-09-24 refinement: transparent logo tile + circular avatar without stroke */
body > .container > header.top .logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
body > .container > header.top .logo img {
  width: 78px !important;
  max-height: 46px !important;
  height: auto !important;
  object-fit: contain !important;
}
body > .container > .cover .channel .avatar {
  width: 76px !important;
  height: 76px !important;
  border-radius: 999px !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  background: #15111e !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
  overflow: hidden !important;
}
body > .container > .cover .channel .avatar img,
body > .container > .cover .channel img.avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  border: 0 !important;
  object-fit: cover !important;
  display: block !important;
}
@media (max-width: 620px) {
  body > .container > header.top .logo img {
    width: 64px !important;
    max-height: 38px !important;
  }
  body > .container > .cover .channel .avatar {
    width: 62px !important;
    height: 62px !important;
  }
}