/* Wartip public channel · stationary cover + tabs / quiet, unboxed payment states.
   This file is loaded AFTER the existing page skins and premium tabs.
   It contains display-only changes: payment states, timers, navigation and API are unchanged. */

/* 01. Cover sits directly under the sticky site navbar. Both the cover and tabs
   stay at fixed viewport positions when the page content scrolls underneath. */
html.wt-donate-night {
  --wt-public-header-h:82px;
  --wt-public-cover-h:clamp(184px,23vh,248px);
  --wt-public-cover-nav-gap:9px;
  --wt-public-tabs-h:76px;
}
html.wt-donate-night body > .container > header.top {
  position:sticky!important;
  top:0!important;
  z-index:140!important;
  height:var(--wt-public-header-h)!important;
  min-height:var(--wt-public-header-h)!important;
  margin-bottom:0!important;
  border-radius:0!important;
  transform:none!important;
}
html.wt-donate-night body > .container > section.cover {
  position:sticky!important;
  top:var(--wt-public-header-h)!important;
  z-index:129!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:var(--wt-public-cover-h)!important;
  min-height:var(--wt-public-cover-h)!important;
  margin:0!important;
  border:1px solid rgba(180,128,242,.36)!important;
  border-top:0!important;
  border-radius:0 0 21px 21px!important;
  background-color:#121016!important;
  background-attachment:scroll!important;
  background-position:center center!important;
  overflow:hidden!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24),0 0 0 1px rgba(155,90,233,.06) inset!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
  will-change:auto!important;
}
/* A faint lighting treatment stays within the cover; no moving/scroll effect. */
html.wt-donate-night body > .container > section.cover::after {
  background:linear-gradient(90deg,rgba(9,7,13,.35),transparent 70%),
    linear-gradient(180deg,rgba(12,8,18,.12) 0%,rgba(8,7,12,.20) 37%,rgba(7,5,11,.88) 100%)!important;
}
html.wt-donate-night body > .container > section.cover::before {
  content:"";
  display:block!important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(155,83,238,.10) 0%,transparent 35%,transparent 72%,rgba(138,91,211,.06) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 0 rgba(169,99,242,.23);
}
html.wt-donate-night body > .container > section.cover > .channel {
  z-index:2!important;
  transform:none!important;
  animation:none!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  position:sticky!important;
  top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-cover-nav-gap))!important;
  z-index:130!important;
  min-height:var(--wt-public-tabs-h)!important;
  margin:var(--wt-public-cover-nav-gap) 0 18px!important;
  background:linear-gradient(115deg,#221c2b,#1b1921 55%,#211b2a)!important;
  border-color:#46394e!important;
  box-shadow:0 10px 30px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.045) inset!important;
  transform:none!important;
  animation:none!important;
}
/* Avoid scrolling content to positions hidden behind the persistent stack. */
html.wt-donate-night #wtPublicView,
html.wt-donate-night #detailsStep,
html.wt-donate-night #paymentStep,
html.wt-donate-night #wpayMethodStep,
html.wt-donate-night #wpayPaymentDialog,
html.wt-donate-night #donationForm .wi-confirm,
html.wt-donate-night #donationForm .wi-finish {
  scroll-margin-top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-tabs-h) + var(--wt-public-cover-nav-gap) + 16px)!important;
}

/* 02. A small reveal for checkout alerts; only their cards animate, never the
   cover/navbar or payment form. No surrounding tile/frame behind any state icon. */
html.wt-donate-night #wtPublicView #donationForm .wi-confirm,
html.wt-donate-night #wtPublicView #donationForm .wi-finish {
  --wt-alert-rgb:167 122 246;
  position:relative!important;
  isolation:isolate;
  box-sizing:border-box;
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  gap:11px!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  min-height:265px!important;
  margin:16px auto 0!important;
  padding:31px clamp(20px,4vw,37px) 27px!important;
  overflow:hidden;
  text-align:center;
  color:#fbf7ff!important;
  background:linear-gradient(150deg,#27202e 0%,#221d28 58%,#211a29 100%)!important;
  border:1px solid rgb(var(--wt-alert-rgb) / .32)!important;
  border-radius:22px!important;
  box-shadow:0 16px 46px rgba(0,0,0,.20),0 1px 0 rgba(255,255,255,.04) inset!important;
  animation:wt-alert-arrive .3s cubic-bezier(.2,.8,.2,1) both!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm[hidden],
html.wt-donate-night #wtPublicView #donationForm .wi-finish[hidden] {
  display:none!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm {
  --wt-alert-rgb:248 185 91;
}
html.wt-donate-night #wtPublicView #donationForm .wi-finish[data-status="verified"] {
  --wt-alert-rgb:66 217 162;
}
html.wt-donate-night #wtPublicView #donationForm .wi-finish[data-status="pending"],
html.wt-donate-night #wtPublicView #donationForm .wi-finish[data-status="expired"] {
  --wt-alert-rgb:248 185 91;
}
html.wt-donate-night #wtPublicView #donationForm .wi-finish[data-status="cancelled"] {
  --wt-alert-rgb:246 109 144;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm::before,
html.wt-donate-night #wtPublicView #donationForm .wi-finish::before {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgb(var(--wt-alert-rgb) / .80),transparent);
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm::after,
html.wt-donate-night #wtPublicView #donationForm .wi-finish::after {
  content:"";
  pointer-events:none;
  position:absolute;
  z-index:-1;
  width:88%;
  height:145px;
  top:-92px;
  left:6%;
  background:radial-gradient(ellipse,rgb(var(--wt-alert-rgb) / .10),transparent 72%);
}
html.wt-donate-night #wtPublicView #donationForm .wi-state-icon,
html.wt-donate-night #wtPublicView #donationForm .wi-confirm .wi-state-icon,
html.wt-donate-night #wtPublicView #donationForm .wi-finish .wi-state-icon {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0 0 2px!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:rgb(var(--wt-alert-rgb))!important;
  font-size:43px!important;
  line-height:1.15!important;
  filter:drop-shadow(0 5px 15px rgb(var(--wt-alert-rgb) / .17));
  animation:wt-alert-icon-in .39s cubic-bezier(.2,.9,.2,1) both!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-state-icon i {
  font-size:inherit!important;
  color:inherit!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm h3,
html.wt-donate-night #wtPublicView #donationForm .wi-finish h3 {
  margin:0!important;
  color:#fff!important;
  font-size:clamp(21px,2vw,24px)!important;
  font-weight:750!important;
  line-height:1.35!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm p,
html.wt-donate-night #wtPublicView #donationForm .wi-finish p {
  margin:0!important;
  max-width:43ch!important;
  font-size:14px!important;
  line-height:1.65!important;
  color:#c8bdcf!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm-actions {
  display:flex!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:7px 0 0!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm-actions button,
html.wt-donate-night #wtPublicView #donationForm .wi-finish button {
  min-height:44px!important;
  margin:7px 0 0!important;
  padding:10px 20px!important;
  border-radius:12px!important;
  font-size:14px!important;
  font-weight:650!important;
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm-actions button:hover,
html.wt-donate-night #wtPublicView #donationForm .wi-finish button:hover {
  transform:translateY(-1px);
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm .wi-danger-btn {
  background:#973c59!important;
  border-color:#a64869!important;
  color:#fff!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-confirm .wi-danger-btn:hover {
  background:#af476a!important;
}
html.wt-donate-night #wtPublicView #donationForm .wi-finish small {
  margin-top:0!important;
  color:#9e93a9!important;
  font-size:12px!important;
}
/* For the legacy slip-success acknowledgement, keep the same frameless icon treatment. */
html.wt-donate-night .wpay-success-card {
  border-radius:22px!important;
  border:1px solid rgba(72,217,162,.30)!important;
  background:linear-gradient(145deg,#27202d,#211b27)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.24)!important;
  animation:wt-alert-arrive .3s ease-out both;
}
html.wt-donate-night .wpay-success-card > i {
  width:auto!important;height:auto!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  font-size:42px!important;color:#42d9a2!important;
  animation:wt-alert-icon-in .38s ease-out both;
}
@keyframes wt-alert-arrive {
  from {opacity:0;transform:translateY(9px) scale(.985);}
  to {opacity:1;transform:translateY(0) scale(1);}
}
@keyframes wt-alert-icon-in {
  from {opacity:0;transform:scale(.84);}
  to {opacity:1;transform:scale(1);}
}

@media (max-width:980px) {
  html.wt-donate-night { --wt-public-cover-h:clamp(150px,21vh,205px); }
}
@media (max-width:640px) {
  html.wt-donate-night {
    --wt-public-header-h:72px;
    --wt-public-cover-h:clamp(132px,20vh,156px);
    --wt-public-cover-nav-gap:6px;
    --wt-public-tabs-h:70px;
  }
  html.wt-donate-night body > .container > section.cover {
    border-radius:0 0 15px 15px!important;
  }
  html.wt-donate-night body > .container > section.cover .channel {
    left:12px!important;right:12px!important;bottom:10px!important;
  }
  html.wt-donate-night body > .container > section.cover .channel .avatar {
    width:48px!important;height:48px!important;flex-basis:48px!important;
  }
  html.wt-donate-night body > .container > section.cover .channel h1 {
    font-size:clamp(16px,4.6vw,21px)!important;
    line-height:1.24!important;
  }
  html.wt-donate-night body > .container > section.cover .channel p {
    font-size:11px!important;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
  }
  html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
    min-height:var(--wt-public-tabs-h)!important;
    margin-bottom:12px!important;
  }
  html.wt-donate-night #wtPublicView #donationForm .wi-confirm,
  html.wt-donate-night #wtPublicView #donationForm .wi-finish {
    width:100%!important;
    min-height:230px!important;
    padding:26px 17px 24px!important;
  }
  html.wt-donate-night #wtPublicView #donationForm .wi-state-icon,
  html.wt-donate-night #wtPublicView #donationForm .wi-confirm .wi-state-icon,
  html.wt-donate-night #wtPublicView #donationForm .wi-finish .wi-state-icon {
    font-size:37px!important;
  }
}
/* Keep the readable content on very short screens: compact but still stationary. */
@media (max-height:640px) {
  html.wt-donate-night {--wt-public-cover-h:120px;--wt-public-tabs-h:68px;}
}
@media (prefers-reduced-motion:reduce) {
  html.wt-donate-night #wtPublicView #donationForm .wi-confirm,
  html.wt-donate-night #wtPublicView #donationForm .wi-finish,
  html.wt-donate-night #wtPublicView #donationForm .wi-state-icon,
  html.wt-donate-night .wpay-success-card,
  html.wt-donate-night .wpay-success-card > i {
    animation:none!important;
    transition:none!important;
  }
}


/* Scroll refinement v2: make the sticky stack feel unified and cleaner while scrolling. */
html.wt-donate-night {
  --wt-public-header-h:80px;
  --wt-public-cover-h:clamp(170px,21vh,222px);
  --wt-public-cover-nav-gap:0px;
  --wt-public-tabs-h:72px;
}
html.wt-donate-night body > .container > header.top {
  background:linear-gradient(180deg,rgba(8,7,13,.97),rgba(8,7,13,.94))!important;
  border-bottom:1px solid rgba(108,84,150,.20)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
html.wt-donate-night body > .container > header.top .top-inner {
  position:relative;z-index:2;
}
html.wt-donate-night body > .container > section.cover {
  top:calc(var(--wt-public-header-h) - 1px)!important;
  border-top:1px solid rgba(198,164,255,.10)!important;
  border-right:1px solid rgba(180,128,242,.30)!important;
  border-bottom:0!important;
  border-left:1px solid rgba(180,128,242,.30)!important;
  border-radius:0 0 20px 20px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.24),0 0 0 1px rgba(155,90,233,.05) inset!important;
}
html.wt-donate-night body > .container > section.cover::before {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(255,255,255,.03)!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) - 1px)!important;
  margin:0 0 14px!important;
  min-height:var(--wt-public-tabs-h)!important;
  border-top:1px solid rgba(255,255,255,.04)!important;
  border-radius:0 0 20px 20px!important;
  background:linear-gradient(115deg,rgba(34,28,43,.97),rgba(27,25,33,.96) 55%,rgba(33,27,42,.97))!important;
  box-shadow:0 12px 28px rgba(0,0,0,.26),0 1px 0 rgba(255,255,255,.04) inset!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs::before {
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(214,170,255,.24),transparent);
}
html.wt-donate-night #wtPublicView > .layout.wt-clean-layout,
html.wt-donate-night #wtPublicView > .order-layout {
  padding-top:10px;
}
html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card {
  margin-top:10px!important;
}
@media (min-width:851px) {
  html.wt-donate-night #wtPublicView .layout.wt-clean-layout > .wt-support-info {
    position:sticky!important;
    top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-tabs-h) + 14px)!important;
    margin-top:10px!important;
    align-self:start!important;
  }
}
html.wt-donate-night #donationForm .wi-summary.wi-payment-overview,
html.wt-donate-night #donationForm .wi-payment-grid,
html.wt-donate-night #donationForm .wi-confirm,
html.wt-donate-night #donationForm .wi-finish {
  scroll-margin-top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-tabs-h) + 22px)!important;
}
@media (max-width:980px) {
  html.wt-donate-night {
    --wt-public-cover-h:clamp(150px,19vh,188px);
    --wt-public-tabs-h:70px;
  }
  html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
    margin-bottom:12px!important;
  }
}
@media (max-width:640px) {
  html.wt-donate-night {
    --wt-public-header-h:72px;
    --wt-public-cover-h:132px;
    --wt-public-tabs-h:68px;
  }
  html.wt-donate-night body > .container > header.top {
    box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
  }
  html.wt-donate-night body > .container > section.cover {
    border-radius:0 0 16px 16px!important;
  }
  html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
    border-radius:0 0 16px 16px!important;
    margin-bottom:10px!important;
  }
  html.wt-donate-night #wtPublicView > .layout.wt-clean-layout,
  html.wt-donate-night #wtPublicView > .order-layout {
    padding-top:6px;
  }
  html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card {
    margin-top:6px!important;
  }
  html.wt-donate-night #wtPublicView .layout.wt-clean-layout > .wt-support-info {
    position:static!important;
    margin-top:10px!important;
  }
}


/* Merge cover + menu into one shared framed card */
html.wt-donate-night body > .container > section.cover {
  border-top:1px solid rgba(198,164,255,.11)!important;
  border-right:1px solid rgba(180,128,242,.32)!important;
  border-bottom:0!important;
  border-left:1px solid rgba(180,128,242,.32)!important;
  border-radius:18px 18px 0 0!important;
  box-shadow:none!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) - 1px)!important;
  margin:-1px 0 14px!important;
  border-top:0!important;
  border-right:1px solid rgba(180,128,242,.32)!important;
  border-bottom:1px solid rgba(180,128,242,.32)!important;
  border-left:1px solid rgba(180,128,242,.32)!important;
  border-radius:0 0 18px 18px!important;
  box-shadow:0 16px 34px rgba(0,0,0,.24),0 0 0 1px rgba(155,90,233,.05) inset!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs::before {
  left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,192,255,.18),transparent)!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs::after {
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
html.wt-donate-night #wtPublicView > .layout.wt-clean-layout,
html.wt-donate-night #wtPublicView > .order-layout {
  padding-top:8px;
}
@media (max-width:640px) {
  html.wt-donate-night body > .container > section.cover {
    border-radius:16px 16px 0 0!important;
  }
  html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
    margin:-1px 0 10px!important;
    border-radius:0 0 16px 16px!important;
  }
}


/* v4 — Stable fixed cover/menu: they never pass through a sticky threshold.
   Reserve their full height in the normal document flow so the donor form is
   visible at load and nothing slips behind the banner during scroll. */
html.wt-donate-night {
  --wt-public-header-h:80px;
  --wt-public-cover-h:220px;
  --wt-public-tabs-h:72px;
  --wt-public-cover-nav-gap:0px;
  --wt-static-shell-width:min(1120px,calc(100% - 40px));
}
/* Fixed elements are removed from normal flow: put back exactly their height. */
html.wt-donate-night body > .container {
  padding-top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-tabs-h) + 12px)!important;
}
html.wt-donate-night body > .container > header.top {
  position:fixed!important;
  inset:0 0 auto 0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  height:var(--wt-public-header-h)!important;
  min-height:var(--wt-public-header-h)!important;
  margin:0!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  z-index:142!important;
}
/* Cover and menu share one continuous border, but remain separate for routing. */
html.wt-donate-night body > .container > section.cover {
  position:fixed!important;
  inset:auto 0 auto 0!important;
  top:var(--wt-public-header-h)!important;
  bottom:auto!important;
  left:0!important;
  right:0!important;
  width:var(--wt-static-shell-width)!important;
  max-width:none!important;
  height:var(--wt-public-cover-h)!important;
  min-height:var(--wt-public-cover-h)!important;
  max-height:var(--wt-public-cover-h)!important;
  margin:0 auto!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  background-attachment:scroll!important;
  z-index:140!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  position:fixed!important;
  inset:auto 0 auto 0!important;
  top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) - 1px)!important;
  bottom:auto!important;
  left:0!important;
  right:0!important;
  width:var(--wt-static-shell-width)!important;
  max-width:none!important;
  height:var(--wt-public-tabs-h)!important;
  min-height:var(--wt-public-tabs-h)!important;
  max-height:var(--wt-public-tabs-h)!important;
  margin:0 auto!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  z-index:141!important;
}
/* The fixed overlay must not affect text positioning when content grows. */
html.wt-donate-night body > .container > header.top,
html.wt-donate-night body > .container > section.cover,
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  overflow-anchor:none;
}
html.wt-donate-night #wtPublicView,
html.wt-donate-night #detailsStep,
html.wt-donate-night #wpayMethodStep,
html.wt-donate-night #wpayPaymentDialog,
html.wt-donate-night #donationForm .wi-confirm,
html.wt-donate-night #donationForm .wi-finish {
  scroll-margin-top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-tabs-h) + 16px)!important;
}
@media (max-width:980px) {
  html.wt-donate-night {
    --wt-public-cover-h:188px;
    --wt-public-tabs-h:70px;
  }
}
@media (max-width:640px) {
  html.wt-donate-night {
    --wt-public-header-h:72px;
    --wt-public-cover-h:140px;
    --wt-public-tabs-h:68px;
    --wt-static-shell-width:calc(100% - 30px);
  }
  html.wt-donate-night body > .container {
    padding-top:calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-tabs-h) + 10px)!important;
  }
  html.wt-donate-night body > .container > header.top {
    width:100%!important;
  }
}
@media (max-width:360px) {
  html.wt-donate-night {--wt-static-shell-width:calc(100% - 24px);}
}
@media (max-height:640px) {
  html.wt-donate-night {--wt-public-cover-h:120px;}
}


/* v5: clean cover profile (no streamer badge), balance avatar and channel identity.
   The fixed header, banner and navigation geometry remain unchanged. */
html.wt-donate-night body > .container > section.cover > .channel {
  display:flex!important;
  align-items:center!important;
  gap:15px!important;
  max-width:calc(100% - 44px)!important;
  min-width:0!important;
}
html.wt-donate-night body > .container > section.cover > .channel > .avatar {
  flex:0 0 74px!important;
  width:74px!important;
  height:74px!important;
  object-fit:cover!important;
}
html.wt-donate-night body > .container > section.cover > .channel > .wt-channel-identity {
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:3px!important;
  min-width:0!important;
  max-width:100%!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-identity > h1 {
  margin:0!important;
  font-size:clamp(22px,2.7vw,32px)!important;
  line-height:1.2!important;
  overflow-wrap:anywhere;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-identity > p {
  margin:0!important;
  font-size:13px!important;
  line-height:1.4!important;
  max-width:100%!important;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
@media (max-width:640px) {
  html.wt-donate-night body > .container > section.cover > .channel {
    gap:10px!important;
    max-width:calc(100% - 24px)!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel > .avatar {
    flex:0 0 52px!important;
    width:52px!important;
    height:52px!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel .wt-channel-identity > h1 {
    font-size:clamp(16px,4.7vw,21px)!important;
    line-height:1.22!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel .wt-channel-identity > p {
    font-size:11px!important;
    line-height:1.35!important;
    -webkit-line-clamp:1;
  }
}


/* v6 · Borderless cover with a soft bottom fade, inspired by an overlapping
   profile hero. Keep the existing fixed positions so scrolling never shifts it. */
html.wt-donate-night body > .container > section.cover {
  border:0!important;
  border-radius:20px 20px 0 0!important;
  box-shadow:none!important;
  outline:0!important;
  background-color:#15111d!important;
  background-position:center 42%!important;
  background-repeat:no-repeat!important;
  isolation:isolate;
}
/* Fade the actual cover art into the same dark tone used by the menu.
   This overlays ONLY the photo, not the avatar or the channel name. */
html.wt-donate-night body > .container > section.cover::after {
  content:"";
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,
    rgba(15,12,21,.04) 0%,
    rgba(17,13,24,.13) 24%,
    rgba(18,14,25,.41) 47%,
    rgba(20,16,28,.77) 69%,
    #15111d 94%,
    #15111d 100%)!important;
  box-shadow:none!important;
  border:0!important;
}
html.wt-donate-night body > .container > section.cover::before {
  content:"";
  z-index:1!important;
  display:block!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(94,47,134,.10) 0%,transparent 35%,transparent 74%,rgba(64,37,94,.06) 100%)!important;
  box-shadow:none!important;
  border:0!important;
}
html.wt-donate-night body > .container > section.cover > .channel {
  z-index:3!important;
  left:clamp(16px,2.7vw,32px)!important;
  bottom:16px!important;
  gap:15px!important;
  text-shadow:0 1px 8px rgba(0,0,0,.20);
}
html.wt-donate-night body > .container > section.cover > .channel > .avatar {
  border:2px solid rgba(255,255,255,.14)!important;
  box-shadow:0 9px 24px rgba(0,0,0,.24)!important;
  background:#16111e!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-identity > h1 {
  text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
}
/* The tabs visually continue the banner rather than forming another framed box. */
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  margin:0 auto!important;
  border:0!important;
  border-radius:0 0 19px 19px!important;
  background:linear-gradient(180deg,#15111d 0%,#201b27 100%)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16)!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs::before,
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs::after {
  content:none!important;
  display:none!important;
}
@media (max-width:640px) {
  html.wt-donate-night body > .container > section.cover {
    border-radius:16px 16px 0 0!important;
    background-position:center 38%!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel {
    left:13px!important;
    right:12px!important;
    bottom:12px!important;
    gap:10px!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel > .avatar {
    flex:0 0 54px!important;
    width:54px!important;
    height:54px!important;
  }
  html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
    border-radius:0 0 16px 16px!important;
  }
}


/* v7 · Hero banner/profile inspired by the example: stronger visual banner,
   larger profile image and clean meta pills under the channel name. */
html.wt-donate-night {
  --wt-public-cover-h: 296px;
  --wt-public-tabs-h: 76px;
}
html.wt-donate-night body > .container {
  padding-top: calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-tabs-h) + 18px)!important;
}
html.wt-donate-night body > .container > section.cover {
  width: min(1120px, calc(100% - 40px))!important;
  height: var(--wt-public-cover-h)!important;
  min-height: var(--wt-public-cover-h)!important;
  max-height: var(--wt-public-cover-h)!important;
  border: 0!important;
  border-radius: 26px 26px 0 0!important;
  background-color: #0e0a16!important;
  background-position: center center!important;
  background-size: cover!important;
  box-shadow: 0 18px 44px rgba(0,0,0,.28)!important;
  overflow: hidden!important;
}
html.wt-donate-night body > .container > section.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 14%, rgba(255,145,55,.36), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(56,96,255,.30), transparent 24%),
    linear-gradient(90deg, rgba(4,5,14,.45) 0%, rgba(7,9,22,.25) 35%, rgba(8,10,24,.18) 56%, rgba(3,3,9,.40) 100%)!important;
  box-shadow: none!important;
}
html.wt-donate-night body > .container > section.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,7,15,.04) 0%, rgba(7,8,18,.14) 34%, rgba(7,6,13,.64) 66%, #090711 100%)!important;
  border: 0!important;
  box-shadow:none!important;
}
html.wt-donate-night body > .container > section.cover > .channel {
  left: 28px!important;
  right: 28px!important;
  bottom: 26px!important;
  z-index: 3!important;
  display: flex!important;
  align-items: flex-end!important;
  gap: 20px!important;
  max-width: none!important;
}
html.wt-donate-night body > .container > section.cover > .channel > .avatar {
  width: 122px!important;
  height: 122px!important;
  flex: 0 0 122px!important;
  border-radius: 999px!important;
  border: 3px solid rgba(255,255,255,.18)!important;
  box-shadow: 0 16px 32px rgba(0,0,0,.35)!important;
  background: #13101a!important;
  object-fit: cover!important;
}
html.wt-donate-night body > .container > section.cover > .channel > .wt-channel-identity {
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:flex-start!important;
  gap: 10px!important;
  min-width: 0!important;
  padding-bottom: 10px!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-title-group {
  min-width:0!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-identity > h1 {
  margin: 0!important;
  color: #fff!important;
  font-size: clamp(34px, 4.8vw, 62px)!important;
  font-weight: 900!important;
  line-height: .96!important;
  letter-spacing: -.03em!important;
  text-shadow: 0 2px 18px rgba(0,0,0,.30)!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-link {
  margin: 6px 0 0!important;
  color: rgba(235,231,244,.88)!important;
  font-size: 15px!important;
  line-height: 1.35!important;
  font-weight: 500!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-meta {
  display:flex!important;
  flex-wrap:wrap!important;
  gap: 10px!important;
  align-items:center!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-badge,
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-social {
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height: 34px!important;
  padding: 0 12px!important;
  border-radius: 999px!important;
  font-size: 13px!important;
  line-height: 1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-badge {
  background: rgba(7,11,22,.62)!important;
  color: #fff!important;
  border: 1px solid rgba(255,255,255,.16)!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-badge i {
  color: #8df0b7!important;
  font-size: 10px!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-social {
  background: rgba(7,11,22,.50)!important;
  color: #fff!important;
  border: 1px solid rgba(255,255,255,.14)!important;
}
html.wt-donate-night body > .container > section.cover > .channel .wt-channel-social:hover {
  background: rgba(121,66,221,.28)!important;
  border-color: rgba(182,137,255,.42)!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  top: calc(var(--wt-public-header-h) + var(--wt-public-cover-h) - 1px)!important;
  width: min(1120px, calc(100% - 40px))!important;
  height: var(--wt-public-tabs-h)!important;
  min-height: var(--wt-public-tabs-h)!important;
  max-height: var(--wt-public-tabs-h)!important;
  margin: 0 auto!important;
  border: 0!important;
  border-radius: 0 0 22px 22px!important;
  background: linear-gradient(180deg,#11101a 0%, #1b1723 100%)!important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24)!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs::before,
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs::after {
  display:none!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs > a.wt-tab {
  min-height: 56px!important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs > a.wt-tab.active,
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs > a.wt-tab[aria-current="page"] {
  box-shadow: 0 10px 24px rgba(138,68,244,.22)!important;
}
@media (max-width: 980px) {
  html.wt-donate-night {
    --wt-public-cover-h: 260px;
    --wt-public-tabs-h: 72px;
  }
  html.wt-donate-night body > .container > section.cover > .channel > .avatar {
    width: 102px!important;
    height: 102px!important;
    flex-basis: 102px!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel .wt-channel-identity > h1 {
    font-size: clamp(30px, 5.2vw, 48px)!important;
  }
}
@media (max-width: 640px) {
  html.wt-donate-night {
    --wt-public-header-h: 72px;
    --wt-public-cover-h: 214px;
    --wt-public-tabs-h: 68px;
    --wt-static-shell-width: calc(100% - 28px);
  }
  html.wt-donate-night body > .container {
    padding-top: calc(var(--wt-public-header-h) + var(--wt-public-cover-h) + var(--wt-public-tabs-h) + 12px)!important;
  }
  html.wt-donate-night body > .container > section.cover {
    width: calc(100% - 28px)!important;
    border-radius: 18px 18px 0 0!important;
    background-position: center 28%!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel {
    left: 14px!important;
    right: 14px!important;
    bottom: 14px!important;
    align-items: flex-end!important;
    gap: 12px!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel > .avatar {
    width: 82px!important;
    height: 82px!important;
    flex-basis: 82px!important;
    border-width: 2px!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel > .wt-channel-identity {
    gap: 8px!important;
    padding-bottom: 0!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel .wt-channel-identity > h1 {
    font-size: clamp(22px, 8vw, 36px)!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel .wt-channel-link {
    font-size: 12px!important;
    margin-top: 4px!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel .wt-channel-meta {
    gap: 8px!important;
  }
  html.wt-donate-night body > .container > section.cover > .channel .wt-channel-badge,
  html.wt-donate-night body > .container > section.cover > .channel .wt-channel-social {
    min-height: 30px!important;
    padding: 0 10px!important;
    font-size: 11px!important;
  }
  html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
    width: calc(100% - 28px)!important;
    border-radius: 0 0 16px 16px!important;
  }
}


/* v8 · banner shape adjustment: rounded top, squared bottom with a clearer bottom edge */
html.wt-donate-night body > .container > section.cover {
  border-radius: 30px 30px 0 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.05) !important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  border-top: 0 !important;
  margin-top: 0 !important;
}
@media (max-width: 640px) {
  html.wt-donate-night body > .container > section.cover {
    border-radius: 24px 24px 0 0 !important;
  }
}


/* v9 · banner corners adjustment: square top corners, keep bottom corners rounded */
html.wt-donate-night body > .container > section.cover {
  border-radius: 0 0 30px 30px !important;
}
@media (max-width: 640px) {
  html.wt-donate-night body > .container > section.cover {
    border-radius: 0 0 24px 24px !important;
  }
}


/* v10 — Hero and tabs take part in normal document scrolling.
   Only the site-wide navbar stays fixed. No cover/menu sticky threshold or jump. */
html.wt-donate-night body > .container {
  /* A small gap below the fixed navbar; the hero and tabs keep their own space. */
  padding-top: calc(var(--wt-public-header-h) + 18px) !important;
}
html.wt-donate-night body > .container > section.cover {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--wt-public-cover-h) !important;
  min-height: var(--wt-public-cover-h) !important;
  max-height: var(--wt-public-cover-h) !important;
  margin: 0 !important;
  /* Square at the top, softly rounded at the bottom as requested previously. */
  border-radius: 0 0 30px 30px !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--wt-public-tabs-h) !important;
  min-height: var(--wt-public-tabs-h) !important;
  max-height: none !important;
  margin: 0 0 24px !important;
  border-radius: 0 0 22px 22px !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}
/* Only the persistent navbar needs to be allowed for when the page scrolls. */
html.wt-donate-night #wtPublicView,
html.wt-donate-night #detailsStep,
html.wt-donate-night #wpayMethodStep,
html.wt-donate-night #wpayPaymentDialog,
html.wt-donate-night #donationForm .wi-confirm,
html.wt-donate-night #donationForm .wi-finish,
html.wt-donate-night #donationForm .wi-summary.wi-payment-overview,
html.wt-donate-night #donationForm .wi-payment-grid {
  scroll-margin-top: calc(var(--wt-public-header-h) + 18px) !important;
}
@media (min-width: 851px) {
  html.wt-donate-night #wtPublicView .layout.wt-clean-layout > .wt-support-info {
    top: calc(var(--wt-public-header-h) + 16px) !important;
  }
}
@media (max-width: 640px) {
  html.wt-donate-night body > .container {
    padding-top: calc(var(--wt-public-header-h) + 12px) !important;
  }
  html.wt-donate-night body > .container > section.cover {
    width: 100% !important;
    border-radius: 0 0 24px 24px !important;
  }
  html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
    width: 100% !important;
    border-radius: 0 0 16px 16px !important;
    margin-bottom: 18px !important;
  }
}


/* v11 · restore rounded top on banner and shift glow colors to purple + blue */
html.wt-donate-night body > .container > section.cover {
  border-radius: 30px 30px 0 0 !important;
}
html.wt-donate-night body > .container > section.cover::before {
  background:
    radial-gradient(circle at 12% 14%, rgba(152, 76, 255, .34), transparent 30%),
    radial-gradient(circle at 84% 9%, rgba(56, 96, 255, .30), transparent 24%),
    linear-gradient(90deg, rgba(12, 8, 24, .48) 0%, rgba(11, 9, 28, .28) 35%, rgba(8, 10, 24, .18) 56%, rgba(3, 3, 9, .42) 100%) !important;
}
@media (max-width: 640px) {
  html.wt-donate-night body > .container > section.cover {
    border-radius: 24px 24px 0 0 !important;
  }
}


/* v16 · Purple/blue lighting is a full-bleed layer on the ORIGINAL v12 banner.
   Both overlays have the exact same bounds as the cover (not smaller radial
   "islands"), and the cover itself clips the rounded corners. */
html.wt-donate-night body > .container > section.cover {
  position: relative !important;
  border: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: #110d27 !important;
  background-position: center center !important;
  background-size: cover !important;
  box-shadow: none !important;
  filter: none !important;
}
/* Full-width color wash, with soft highlights that reach both side edges. */
html.wt-donate-night body > .container > section.cover::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  background:
    radial-gradient(ellipse 78% 115% at 0% 14%, rgba(146,64,240,.33), transparent 96%),
    radial-gradient(ellipse 74% 115% at 100% 10%, rgba(55,99,232,.36), transparent 96%),
    linear-gradient(90deg,
      rgba(105,44,183,.53) 0%,
      rgba(104,44,169,.35) 28%,
      rgba(67,45,137,.18) 51%,
      rgba(41,66,169,.36) 76%,
      rgba(35,76,187,.51) 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
/* The dark fade also fills the exact cover box, and meets the menu directly. */
html.wt-donate-night body > .container > section.cover::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  background: linear-gradient(180deg,
      rgba(10,8,20,.02) 0%,
      rgba(10,8,20,.08) 36%,
      rgba(12,10,21,.50) 75%,
      #11101a 100%) !important;
  background-size: 100% 100% !important;
}
html.wt-donate-night body > .container > section.cover > .channel {
  z-index: 3 !important;
}
html.wt-donate-night body > .container > nav.tabs.wt-premium-tabs {
  border-top: 0 !important;
}
@media (max-width: 640px) {
  html.wt-donate-night body > .container > section.cover {
    border-radius: 22px 22px 0 0 !important;
  }
}


/* v17 · Remove the public channel page navbar without disturbing the banner or menu. */
html.wt-donate-night body > .container > header.top {
  display: none !important;
}
html.wt-donate-night body > .container {
  padding-top: 18px !important;
}
html.wt-donate-night #wtPublicView,
html.wt-donate-night #detailsStep,
html.wt-donate-night #wpayMethodStep,
html.wt-donate-night #wpayPaymentDialog,
html.wt-donate-night #donationForm .wi-confirm,
html.wt-donate-night #donationForm .wi-finish,
html.wt-donate-night #donationForm .wi-summary.wi-payment-overview,
html.wt-donate-night #donationForm .wi-payment-grid {
  scroll-margin-top: 16px !important;
}
@media (min-width: 851px) {
  html.wt-donate-night #wtPublicView .layout.wt-clean-layout > .wt-support-info {
    top: 16px !important;
  }
}
@media (max-width: 640px) {
  html.wt-donate-night body > .container {
    padding-top: 12px !important;
  }
}


/* v19 · Align the support title with the right-hand channel card.
   Remove the underline and give the form a clear, even title-to-fields gap. */
html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card {
  margin-top: 0 !important;
}
html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card > .wt-donation-heading {
  display:block;
  margin:0 0 24px !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card > .wt-donation-heading h2 {
  margin:0 !important;
  color:#f8f5ff !important;
  font-family:Kanit,Tahoma,sans-serif;
  font-size:clamp(25px,2.6vw,32px) !important;
  font-weight:750 !important;
  line-height:1.35 !important;
  letter-spacing:-.3px;
}
html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card > .wt-donation-heading p {
  margin:3px 0 0;
  color:#b8aacc !important;
  font-size:13px;
  line-height:1.5;
}
@media (max-width:850px) {
  html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card {
    margin-top:0 !important;
  }
}
@media (max-width:540px) {
  html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card {
    margin-top:0 !important;
  }
  html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card > .wt-donation-heading {
    margin-bottom:20px !important;
    padding-bottom:0 !important;
    border-bottom:0 !important;
  }
  html.wt-donate-night #wtPublicView > .layout.wt-clean-layout > .support-card > .wt-donation-heading h2 {
    font-size:25px !important;
  }
}