/* ============================================================
   YIGOOR — platform shell (browse / watch)
   Topbar + collapsible sidebar + chip row + content grid.
   ============================================================ */

:root{
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --rail-w: 72px;
  --shell-gutter: 24px;
}

/* ---------- topbar ---------- */
.tb{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  background: var(--bg);
}
.tb-left{ display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.tb-logo{ display: flex; align-items: center; gap: .55rem; font-weight: 650; font-size: 1.15rem; letter-spacing: -.02em; }
.tb-logo .tb-mark{ width: 28px; height: 28px; border-radius: var(--radius); }
/* Wordmark artwork carries the name, so the text version stands down beside it. */
/* Hidden by default so that with no data-theme (JavaScript off) the page shows the
   mark-plus-text lockup rather than both at once. */
.tb-wordmark{ display: none; height: 36px; width: auto; }
.tb-suffix:empty{ display: none; }
:root[data-theme="dark"] .tb-wordmark{ display: block; }
:root[data-theme="dark"] .tb-mark,
:root[data-theme="dark"] .tb-word{ display: none; }
.tb-logo .beta{
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line-strong); padding: 2px 5px; border-radius: var(--radius);
  margin-left: .1rem;
}

.icon-btn{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: none; background: none; color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s ease;
  flex: 0 0 auto;
}
.icon-btn:hover{ background: var(--surface-2); }
.icon-btn svg{ width: 22px; height: 22px; }

/* search */
.tb-search{ flex: 1; display: flex; justify-content: center; min-width: 0; }
.search-form{
  display: flex;
  width: min(640px, 100%);
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--input-bg);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-form:focus-within{ border-color: var(--red); box-shadow: 0 0 0 3px rgba(240,67,58,.14); }
.search-form input{
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  padding: 0 1rem; font-size: .95rem;
}
.search-form input::placeholder{ color: var(--faint); }
.search-form button{
  width: 62px;
  border: none; border-left: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
  transition: background .2s ease, color .2s ease;
}
.search-form button:hover{ background: var(--surface); color: var(--text); }
.search-form button svg{ width: 19px; height: 19px; }
/* Phone-only controls (see the 760px block): the topbar search icon and the
   takeover's back button. Present in the markup at every width, shown at phone. */
.tb-search-btn, .search-back{ display: none; }

/* margin-left:auto anchors the cluster to the right edge even when the search
   area between is hidden (phone width) — otherwise the icons huddle by the logo. */
.tb-right{ display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin-left: auto; }
/* One button, two icons: show the theme you would switch *to*. */
.theme-toggle svg{ width: 20px; height: 20px; }
.theme-toggle .ico-sun{ display: block; }
.theme-toggle .ico-moon{ display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun{ display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon{ display: block; }
.btn-signin{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: .9rem; font-weight: 550;
  color: var(--text);
  transition: background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-signin:hover{ background: var(--surface-2); border-color: var(--text); }
.btn-signin svg{ width: 18px; height: 18px; }

/* Native select popups derive their paint from the control, and our inputs use
   a translucent background — which composites into a murky grey panel there.
   Options get an opaque platform surface instead. The popup's font and row
   height stay browser-native; only a fully custom widget changes those. */
select option{ background-color: var(--bg-elev); color: var(--text); }

/* ---------- sidebar ---------- */
.sb{
  position: fixed;
  top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 200;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .75rem .6rem 2rem;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.sb::-webkit-scrollbar{ width: 8px; }
.sb::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius: 99px; }

.sb-item{
  display: flex; align-items: center; gap: 1.5rem;
  padding: .62rem .75rem;
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--text);
  transition: background .18s ease;
  white-space: nowrap;
}
.sb-item:hover{ background: var(--surface-2); }
/* Accent bar rather than a filled pill, which is the platform's most copied tell. */
.sb-item.active{ background: none; font-weight: 600; position: relative; }
.sb-item.active::before{
  content: "";
  position: absolute; left: -.6rem; top: .45rem; bottom: .45rem;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--red);
}
.sb-item.active .sb-ico{ color: var(--red); }
.sb-ico{ width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted); }
.sb-ico svg{ width: 100%; height: 100%; }
.sb-dot{ width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin: 0 6px; }

.sb-sep{ height: 1px; background: var(--line); margin: .8rem .75rem; }
.sb-head{
  font-size: .78rem; font-weight: 600; color: var(--faint);
  padding: .6rem .75rem .35rem; white-space: nowrap;
}
.sb-note{ padding: .8rem .85rem; font-size: .76rem; line-height: 1.5; color: var(--faint); }

/* rail (collapsed) */
body.rail .sb{ width: var(--rail-w); padding-inline: .35rem; }
body.rail .sb-item{ flex-direction: column; gap: .35rem; padding: .85rem .2rem; font-size: .6rem; letter-spacing: .01em; white-space: normal; }
body.rail .sb-head, body.rail .sb-note, body.rail .sb-item .sb-label-long{ display: none; }
body.rail .sb-dot{ margin: 0; }
/* A rail is 72px wide and labels like "Become a creator" do not fit on one line.
   Wrap to at most two centred lines and ellipsis anything still too long, rather
   than letting the text run under the edge of the sidebar. */
body.rail .sb-item > span:last-child{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  text-align: center;
  line-height: 1.2;
  /* Hyphenate rather than snapping mid-word: "Entertain-ment", not "Entertainm ent". */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ---------- collapsible sidebar group ----------
   Expanded, the section is a plain list. In the rail it becomes one entry that
   opens the list as a flyout, so nothing has to survive at rail width. */
.sb-group-btn{ display: none; width: 100%; text-align: left; border: none; background: none; font: inherit; cursor: pointer; }
.sb-group-title{ display: none; }

body.rail .sb-group-btn{ display: flex; }
body.rail .sb-group .sb-group-items{ display: none; }
body.rail .sb-group.open .sb-group-items{
  display: block;
  position: fixed;
  z-index: 260;
  min-width: 230px;
  padding: .45rem;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
/* Inside the flyout the items are full width again, not rail-sized. */
body.rail .sb-group.open .sb-group-items .sb-item{
  flex-direction: row; gap: 1.5rem; padding: .62rem .75rem; font-size: .875rem;
}
body.rail .sb-group.open .sb-group-items .sb-label-long{ display: inline; }
body.rail .sb-group.open .sb-group-items .sb-dot{ margin: 0 6px; }
/* The flyout is a normal menu, so undo the rail's centred two-line label treatment. */
body.rail .sb-group.open .sb-group-items .sb-item > span:last-child{
  display: block;
  -webkit-line-clamp: none;
  width: auto;
  text-align: left;
  line-height: 1.4;
  overflow: visible;
  hyphens: manual;
}
body.rail .sb-group.open .sb-group-title{
  display: block;
  font-size: .78rem; font-weight: 600; color: var(--faint);
  padding: .5rem .75rem .45rem;
}
/* The rail entry shows the section holds the current page. */
.sb-group-btn.active{ font-weight: 600; position: relative; }
.sb-group-btn.active::before{
  content: "";
  position: absolute; left: -.35rem; top: .45rem; bottom: .45rem;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--red);
}
.sb-group-btn.active .sb-ico{ color: var(--red); }

/* ---------- main ---------- */
.shell-main{
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
  min-height: 100vh;
  transition: margin-left .18s ease;
}
body.rail .shell-main{ margin-left: var(--rail-w); }
.shell-inner{ padding: 0 var(--shell-gutter) 4rem; max-width: 2200px; }

/* chips */
.chips{
  position: sticky;
  top: var(--topbar-h);
  z-index: 120;
  display: flex; gap: .6rem;
  padding: .9rem 0 1rem;
  overflow-x: auto;
  background: var(--bg);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar{ display: none; }
.chip{
  padding: .46rem .95rem;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: .875rem; font-weight: 500;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}
.chip:hover{ border-color: var(--text); color: var(--text); }
.chip.active{ border-color: var(--red); color: var(--text); font-weight: 600; }

/* ---------- video grid ---------- */
/* Deliberately low density: a curated catalogue shows fewer titles with more air
   around them. Dense grids read as free and infinite. */
.v-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 3.4rem 1.8rem;
}
.v-grid.dense{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2.2rem 1.4rem; }

.v-card{ display: block; }
.v-thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--a, var(--red)) 20%, var(--surface-2)),
      var(--bg-elev));
  display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.v-card:hover .v-thumb{ transform: translateY(-2px); }
.v-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.v-thumb-art{
  font-size: 1.1rem; font-weight: 600;
  color: var(--placeholder-ink);
  letter-spacing: .02em;
}
.v-badge{
  position: absolute; z-index: 2;
  font-size: .72rem; font-weight: 550;
  padding: .22rem .45rem;
  border-radius: var(--radius);
  background: rgba(0,0,0,.82);
  color: #fff;
  letter-spacing: .02em;
}
.v-dur{ bottom: .5rem; right: .5rem; }
.v-when{ bottom: .5rem; left: .5rem; }   /* event start or premiere date; duration keeps the right */
.v-live{ top: .6rem; left: .6rem; background: rgba(240,67,58,.95); display: flex; align-items: center; gap: .3rem; }
.v-live::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
/* Already bought: a check in the top-right corner of the art, and the price
   line says so instead of quoting a price. The live badge keeps the left. */
.v-owned{ top: .6rem; right: .6rem; display: flex; align-items: center; gap: .3rem; background: rgba(13,13,17,.88); border: 1px solid rgba(255,255,255,.14); }
.v-owned svg{ width: 12px; height: 12px; color: var(--ok-ink); }
.v-price-line.owned .amt{ color: var(--ok-ink); }

.v-meta{ display: flex; gap: .75rem; margin-top: .8rem; }
.v-card .v-txt{ margin-top: .95rem; }

/* Price sits under the title as a price tag, not as a sticker in the corner of the art. */
.v-price-line{
  display: flex; align-items: baseline; gap: .4rem;
  margin-top: .55rem;
  font-size: .92rem; font-weight: 600;
  color: var(--text);
}
.v-price-line .sep{ color: var(--faint); font-weight: 400; }
.v-price-line .acc{ color: var(--muted); font-weight: 450; font-size: .86rem; }
.v-price-line.free .amt{ color: var(--ok-ink); }
.v-av{
  width: 36px; height: 36px; border-radius: 50%;
  flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: .9rem; font-weight: 700; color: #fff;
  background: var(--a, var(--red));
}
.v-txt{ min-width: 0; }
.v-title{
  font-size: .95rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v-chan{ font-size: .83rem; color: var(--muted); margin-top: .3rem; display: flex; align-items: center; gap: .3rem; }
.v-chan:hover{ color: var(--text); }
.v-chan svg{ width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.v-chan .sep{ color: var(--faint); }
.v-stats{ font-size: .83rem; color: var(--faint); margin-top: .1rem; }

/* section heading inside browse */
.row-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 2.4rem 0 1.1rem;
}
.row-head h2{ font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; font-family: var(--font-body); }
/* Not .btn: this styles the quiet "see all" link, and it was also repainting the
   primary button's label muted, which made it unreadable on the red fill. */
.row-head a:not(.btn){ font-size: .85rem; color: var(--muted); }
.row-head a:not(.btn):hover{ color: var(--text); }

/* ---------- featured billboard ----------
   Full bleed and cinematic: the title sits on the artwork rather than in a card. */
.feat{
  position: relative;
  /* Full bleed sideways and flush to the top bar. */
  margin: 0 calc(-1 * var(--shell-gutter));
  padding: clamp(5rem, 17vh, 9rem) var(--shell-gutter) clamp(2.4rem, 4.5vw, 3.6rem);
  min-height: min(62vh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--a, var(--red)) 22%, var(--feat-base)) 0%, var(--feat-base) 58%, var(--bg) 100%);
}
.feat::after{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}
/* The identity mark ships on a black field rather than transparency, so screen blend
   is what drops the black out. It sits above the video but under the scrim, which
   knocks it back to a watermark instead of a sticker on top of the artwork. */
.feat-motif{
  position: absolute;
  right: 2%; top: 50%;
  transform: translateY(-50%);
  width: min(34%, 380px);
  opacity: .3;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 860px){ .feat-motif{ opacity: .18; width: min(46%, 300px); } }

/* Billboard video background. The poster frame is painted by the video element
   itself, so the panel is never empty while the stream loads or if it fails. */
.feat.has-video{ background: #0c0c11; }
.feat-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
/* Copy has to stay readable over whatever frame is on screen, so the scrim is a
   fixed floor rather than something tuned to one video. */
.feat-scrim{
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(12,12,17,.72) 38%, rgba(12,12,17,.28) 72%),
    linear-gradient(to right, rgba(12,12,17,.88) 0%, rgba(12,12,17,.45) 45%, rgba(12,12,17,.15) 100%);
}
/* On the light palette that bottom stop is the page background, so the scrim washed
   the footage out with white. The scrim exists to keep light copy readable, so it
   stays dark in both themes and simply ends at the panel edge. */
:root[data-theme="light"] .feat-scrim{
  background:
    linear-gradient(to top, rgba(12,12,17,.88) 2%, rgba(12,12,17,.66) 38%, rgba(12,12,17,.24) 72%),
    linear-gradient(to right, rgba(12,12,17,.86) 0%, rgba(12,12,17,.42) 45%, rgba(12,12,17,.12) 100%);
}
.feat.has-video::after{ display: none; }

/* Brand statement variant: the billboard carries the line and nothing else, so the
   heading is centred in the panel instead of anchored to the bottom edge. */
/* Sits on the bottom edge like the featured variant, so switching between the two
   does not move the copy around. */
/* The line has to hold on one row, so it is sized against the panel width rather than
   the viewport: the sidebar takes 240px out of the viewport and vw would not know. */
.feat-statement .feat-inner{ max-width: none; width: 100%; container-type: inline-size; }
.feat-statement h1{
  margin-top: 0;
  white-space: nowrap;
  font-size: min(4.2rem, 5.6cqw);
}
.feat-tagline{
  color: rgba(255,255,255,.82);
  font-size: clamp(.98rem, 1.35cqw, 1.22rem);
  margin-top: .7rem;
  max-width: 52ch;
}
/* Below the sidebar breakpoint there is not enough room for one row at a readable
   size, so it wraps rather than shrinking into illegibility. */
@media (max-width: 700px){
  .feat-statement h1{ white-space: normal; font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .feat-tagline{ font-size: 1rem; }
}
.feat-inner{ position: relative; z-index: 3; max-width: min(60ch, 740px); }
.feat-kicker{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); font-weight: 500;
}
.feat h1{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.7rem); font-weight: 480; line-height: 1.04;
  letter-spacing: -.025em; margin-top: .8rem;
}
.feat p{ color: var(--muted); margin-top: .9rem; font-size: 1rem; line-height: 1.6; max-width: 52ch; }
.feat-actions{ display: flex; gap: .8rem; margin-top: 1.6rem; flex-wrap: wrap; align-items: center; }
.feat-meta{ font-size: .85rem; color: var(--faint); display: flex; gap: .55rem; align-items: center; }

/* When a video is playing, the billboard is a dark context in *both* themes: the
   scrim over the footage is dark by design. So its copy stays light rather than
   following the palette, which in light mode would put near-black text on footage. */
.feat.has-video, .feat.has-video h1{ color: #f7f5f2; }
.feat.has-video p, .feat.has-video .feat-tagline{ color: rgba(255,255,255,.84); }
.feat.has-video .feat-meta{ color: rgba(255,255,255,.66); }
.feat.has-video .btn-ghost{ color: #f7f5f2; border-color: rgba(255,255,255,.38); }
.feat.has-video .btn-ghost:hover{ background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------- watch page ---------- */
.player-video{ width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

.watch{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 1.6rem;
  padding-top: 1.4rem;
}
@media (max-width: 1200px){ .watch{ grid-template-columns: 1fr; } }

/* Like the billboard (see .feat.has-video), the player is a media stage: dark in
   *both* themes, so its copy is pinned light instead of following the palette.
   Before this, light mode mixed the accent with a light surface and painted
   near-black text over it — unreadable on pale accents. */
.player{
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--a, var(--red)) 18%, #17161c), #08080b);
  display: grid; place-items: center;
}
.player-lock{ position: relative; z-index: 2; text-align: center; display: grid; gap: 1rem; justify-items: center; padding: 1.5rem; }
.player-lock .lock-ico{
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
}
.player-lock .lock-ico svg{ width: 24px; height: 24px; color: #f7f5f2; }
.player-lock h3{ font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: #f7f5f2; }
.player-lock p{ color: rgba(255,255,255,.78); font-size: .88rem; max-width: 40ch; }

/* Audio titles: the cover art IS the stage, with the control bar under it —
   a podcast look on the same dark player, same endpoint, same tokens. */
.player-audio{
  /* Absolute, like the overlay: as a grid child of .player its percentage
     height resolves against an auto row and the cover blows the stage open,
     pushing the control bar off it. inset:0 pins it to the real stage box. */
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 1rem;
  padding: 1.4rem;
}
.player-cover{
  height: 100%; width: auto;
  max-width: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.player-audio audio{ width: min(640px, 100%); }
/* Square podcast art in a 16:9 thumb: contain on a dark field, never crop.
   Fully self-sufficient sizing — pinned to the thumb box — rather than
   relying on the base card img rule to supply width/height. */
.v-thumb-audio img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #0d0c10;
}

/* Preview mode: a quiet corner badge while playing, and an end-of-preview
   overlay that reuses the lock panel's look on a solid stage scrim. */
.player-badge-preview{
  position: absolute; top: .8rem; left: .8rem; z-index: 3;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  padding: .28rem .6rem; border-radius: var(--radius);
  background: rgba(0,0,0,.62); color: #f7f5f2;
  pointer-events: none;
}
.player-overlay{
  position: absolute; inset: 0; z-index: 4;
  place-content: center;
  background: rgba(8,8,11,.92);
}
/* .player-lock's display:grid would defeat the hidden attribute (author rules
   beat the UA's [hidden]{display:none}), leaving the overlay up DURING the
   preview. Hidden must actually mean hidden. */
.player-overlay[hidden]{ display: none; }
.overlay-actions{ display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: .2rem; }
.player-overlay .btn-ghost{ color: #f7f5f2; border-color: rgba(255,255,255,.38); }
.player-overlay .btn-ghost:hover{ background: rgba(255,255,255,.14); border-color: #fff; }
.overlay-actions form{ margin: 0; }

.watch h1{
  font-family: var(--font-body);
  font-size: 1.32rem; font-weight: 650; line-height: 1.35; letter-spacing: -.01em;
  margin-top: 1.1rem;
}
.watch-bar{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-top: 1rem;
}
.chan-block{ display: flex; align-items: center; gap: 1rem; min-width: 0; }
.chan-row{ display: flex; align-items: center; gap: .8rem; min-width: 0; }
.chan-row .v-av{ width: 42px; height: 42px; font-size: 1rem; }
.chan-name{ font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .35rem; }
.chan-name svg{ width: 14px; height: 14px; color: var(--faint); }
.chan-sub{ font-size: .8rem; color: var(--faint); }
/* Buying a title should feel like buying a ticket, not hitting subscribe. */
.buy-group{
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .5rem .5rem .5rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.buy-price{ display: grid; gap: .1rem; }
.buy-price .amt{ font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.buy-price .amt.free{ color: #7fe3a8; }
.access-note{ font-size: .82rem; color: var(--faint); }

.desc{
  margin-top: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-size: .92rem; line-height: 1.6; color: var(--muted);
}
.desc .desc-stats{ color: var(--text); font-weight: 600; font-size: .87rem; margin-bottom: .5rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* up next list */
.upnext{ display: grid; gap: .8rem; align-content: start; }
.un{ display: grid; grid-template-columns: 168px 1fr; gap: .7rem; }
.un .v-thumb{ aspect-ratio: 16/9; }
.un .v-thumb-art{ font-size: 1.4rem; }
.un-title{
  font-size: .88rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.un-sub{ font-size: .78rem; color: var(--faint); margin-top: .25rem; }

/* ---------- channel header ---------- */
.chan-head{
  display: flex; align-items: center; gap: 1.4rem;
  padding: 2rem 0 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
}
.chan-head .v-av{ width: 88px; height: 88px; font-size: 2rem; }
.chan-head h1{ font-family: var(--font-body); font-size: 1.7rem; font-weight: 650; letter-spacing: -.01em; }
.chan-head .meta{ color: var(--muted); font-size: .88rem; margin-top: .3rem; }
.chan-head .bio{ color: var(--faint); font-size: .88rem; margin-top: .5rem; max-width: 60ch; }

/* ---------- empty state ---------- */
.empty{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3.5rem 2rem;
  text-align: center;
  display: grid; gap: .7rem; justify-items: center;
  margin-top: 1rem;
}
.empty svg{ width: 34px; height: 34px; color: var(--faint); }
.empty h3{ font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; }
.empty p{ color: var(--muted); font-size: .92rem; max-width: 48ch; }

/* ---------- page title (listing pages) ---------- */
.listing-head{ padding: 1.6rem 0 .4rem; }
.listing-head h1{ font-family: var(--font-body); font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
.listing-head p{ color: var(--muted); font-size: .93rem; margin-top: .4rem; }

/* ---------- marketing pages inside the shell ---------- */
.shell-main .page-hero{ padding-top: 2.6rem; }
.shell-main .container{ width: 100%; padding: 0; margin: 0; }
/* Must come after the rule above: same specificity, so source order decides.
   Text pages need clearance from the top bar. */
.shell-main .legal-head{ padding-top: 2.6rem; }
.shell-main .section{ padding-block: 2.5rem; }
.shell-main .site-footer{ margin-top: 3rem; }
.shell-main .hero{ min-height: 62vh; border-radius: var(--radius); overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .sb{ width: var(--rail-w); padding-inline: .35rem; }
  .sb-item{ flex-direction: column; gap: .35rem; padding: .85rem .2rem; font-size: .6rem; }
  .sb-head, .sb-note, .sb-item .sb-label-long{ display: none; }
  .shell-main{ margin-left: var(--rail-w); }
  body.rail .sb{ width: 0; padding: 0; overflow: hidden; }
  body.rail .shell-main{ margin-left: 0; }
}
@media (max-width: 760px){
  :root{ --shell-gutter: 14px; }
  .sb{ width: 0; padding: 0; overflow: hidden; }
  .shell-main{ margin-left: 0; }
  body.rail .sb{
    width: var(--sidebar-w); padding: .75rem .6rem 2rem; overflow-y: auto;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.6);
  }
  body.rail .sb-item{ flex-direction: row; gap: 1.5rem; padding: .62rem .75rem; font-size: .875rem; }
  body.rail .sb-head, body.rail .sb-note, body.rail .sb-item .sb-label-long{ display: block; }
  body.rail .shell-main{ margin-left: 0; }
  /* In the drawer the collapsible groups render inline, like the expanded desktop
     sidebar. The rail flyout is a fixed panel placed to the right of its trigger,
     and a phone has no room to the right of the drawer — it gets cut off. The
     .open variant must be overridden too, or a group opened at rail width keeps
     its flyout styling after a resize. */
  body.rail .sb-group-btn{ display: none; }
  body.rail .sb-group .sb-group-items,
  body.rail .sb-group.open .sb-group-items{
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  body.rail .sb-group .sb-group-title,
  body.rail .sb-group.open .sb-group-title{ display: none; }
  .tb-logo span.word{ display: none; }
  .btn-signin span{ display: none; }
  .btn-signin{ padding: .5rem; }
  /* Search collapses to a topbar icon; tapping it turns the whole top bar into
     a search bar with a back button, rather than squeezing a box beside the logo. */
  .tb-search{ display: none; }
  .tb-search-btn{ display: grid; }
  body.search-open .tb-search{
    display: flex;
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    z-index: 320;
    align-items: center;
    gap: .35rem;
    padding: 0 .6rem;
    background: var(--bg);
  }
  body.search-open .search-back{ display: grid; }
  /* End-of-media overlays on a phone: the ticket box sits right below the
     player with the same buy button, so the overlay's is a duplicate — it
     keeps the date/countdown and the replay, and slims down to fit the
     small stage. */
  .player-overlay .lock-ico{ display: none; }
  .player-overlay{ gap: .55rem; padding: 1rem; }
  .player-overlay p{ font-size: .84rem; }
  .player-overlay .overlay-actions form,
  .player-overlay .overlay-actions .btn-primary{ display: none; }

  /* Watch page: each block spans the full width instead of clustering left with
     dead space beside it. Subscribe goes to the right edge of the channel row,
     the ticket box spreads price and button apart, and the three action buttons
     share one row equally. */
  .chan-block{ width: 100%; justify-content: space-between; }
  /* The ticket reads as two rows on a phone: price line, then a full-width
     button — no half-empty right side when the label wraps. */
  .buy-group{ width: 100%; display: grid; gap: .8rem; padding: .9rem 1rem; }
  .buy-group .buy-price{ display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
  .buy-group form{ margin: 0; }
  .buy-group .btn{ width: 100%; }
  .action-row > *{ flex: 1 1 0; min-width: 0; }
  .action-row .btn{ width: 100%; }
  .v-grid{ grid-template-columns: 1fr; gap: 1.5rem; }
  .un{ grid-template-columns: 140px 1fr; }
}

/* ============================================================
   AUTH + MEMBER AREA
   ============================================================ */

.auth-shell{ display: grid; place-items: start center; padding: clamp(2rem, 7vh, 5rem) 0 5rem; }
.auth-card{
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(175deg, var(--surface), var(--bg-elev));
  padding: clamp(1.6rem, 4vw, 2.4rem);
  display: grid;
  gap: 1.2rem;
}
.auth-card.wide{ width: min(620px, 100%); }
.auth-title{ font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.auth-sub{ color: var(--muted); font-size: .95rem; margin-top: -.6rem; }
.auth-form{ display: grid; gap: 1rem; }
.auth-actions{ display: grid; gap: .7rem; margin-top: .2rem; }
.auth-actions .btn{ width: 100%; }
.auth-foot{ font-size: .9rem; color: var(--muted); text-align: center; }
.auth-foot a{ color: var(--text); font-weight: 550; }
.auth-foot a:hover{ color: var(--red-ink); }
.auth-links{ display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.auth-links a{ color: var(--muted); }
.auth-links a:hover{ color: var(--text); }

.hint{ font-size: .78rem; color: var(--faint); line-height: 1.45; }
.form-error{
  border: 1px solid rgba(240,67,58,.4);
  background: rgba(240,67,58,.08);
  color: #ffb3ae;
  border-radius: var(--radius);
  padding: .7rem .9rem;
  font-size: .88rem;
}
.form-ok{
  border: 1px solid rgba(88,214,141,.35);
  background: rgba(88,214,141,.07);
  color: #7fe3a8;
  border-radius: var(--radius);
  padding: .7rem .9rem;
  font-size: .88rem;
}

.or{ display: flex; align-items: center; gap: .8rem; color: var(--faint); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.or::before, .or::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

.social-btn{
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .75rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: .92rem; font-weight: 550; color: var(--text);
  transition: background .2s ease, border-color .2s ease;
}
.social-btn:hover{ background: var(--surface-2); border-color: var(--text); }
.social-btn svg{ width: 18px; height: 18px; }

/* member area */
.member-head{ padding: 2rem 0 1.2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.member-head .v-av{ width: 62px; height: 62px; font-size: 1.5rem; }
.member-head h1{ font-family: var(--font-body); font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
.member-head .sub{ color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.member-nav{ display: flex; gap: .5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.8rem; overflow-x: auto; }
.member-nav a{
  padding: .7rem .95rem; font-size: .92rem; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.member-nav a:hover{ color: var(--text); }
.member-nav a.active{ color: var(--text); border-bottom-color: var(--red); font-weight: 600; }

.stat-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-box{ border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.2rem; }
.stat-box b{ font-size: 1.75rem; font-weight: 650; display: block; line-height: 1; letter-spacing: -.02em; }
.stat-box span{ font-size: .8rem; color: var(--muted); margin-top: .45rem; display: block; }

/* account menu in the top bar */
.acct{ position: relative; }
.acct-btn{
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: none; font-weight: 700; font-size: .9rem; color: #fff;
  background: var(--red);
}
.acct-menu{
  position: absolute; right: 0; top: calc(100% + .5rem);
  min-width: 230px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .4rem;
  display: none;
  box-shadow: var(--shadow-pop);
  z-index: 400;
}
.acct-menu.open{ display: block; }
.acct-menu .who{
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem .8rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem;
  border-radius: var(--radius);
}
.acct-menu .who:hover{ background: var(--surface-2); }
.who-av{
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; object-fit: cover;
  background: var(--red); color: #fff; font-weight: 700; font-size: .95rem;
}
.who-txt{ min-width: 0; display: grid; gap: .1rem; }
.acct-menu .who b{ font-size: .92rem; font-weight: 600; }
.who-mail{ font-size: .78rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-link{ font-size: .8rem; color: var(--red-ink); font-weight: 550; margin-top: .2rem; }
.acct-menu a, .acct-menu button{
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .6rem .8rem;
  border: none; background: none; text-align: left;
  font-size: .88rem; color: var(--text); border-radius: var(--radius); cursor: pointer;
}
.acct-menu a:hover, .acct-menu button:hover{ background: var(--surface-2); }
.acct-menu svg{ width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.acct-menu form{ margin: 0; }

/* messages */
.msgs{ display: grid; gap: .6rem; padding-top: 1rem; }
.msg{ border-radius: var(--radius); padding: .7rem 1rem; font-size: .9rem; border: 1px solid var(--line-strong); background: var(--surface); }
.msg.success{ border-color: rgba(88,214,141,.35); background: rgba(88,214,141,.07); color: #7fe3a8; }
.msg.error{ border-color: rgba(240,67,58,.4); background: rgba(240,67,58,.08); color: #ffb3ae; }

.check-inline{ display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; color: var(--muted); }
.check-inline input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.check-inline span{ user-select: none; }

/* ============================================================
   DASHBOARD COMPONENTS
   ============================================================ */

.pill{
  display: inline-block;
  font-size: .74rem; font-weight: 550;
  padding: .1rem .4rem; border-radius: var(--radius);
  background: var(--surface-2); color: var(--muted);
  vertical-align: middle;
}

.btn-sm{ min-height: 32px; padding: 0 .85rem; font-size: .84rem; }
.btn-danger{ background: var(--red-deep); color: #fff; border-color: transparent; }
.btn-danger:hover{ background: var(--red); }
.btn.on{ border-color: var(--red); color: var(--text); }

/* access badge on library cards */
.v-access{
  bottom: .5rem; left: .5rem;
  background: rgba(88,214,141,.92); color: #06231a; font-weight: 600;
}
.v-access.gone{ background: rgba(0,0,0,.82); color: var(--muted); }

/* playlists */
.pl-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.4rem 1.2rem; }
.pl-card{ display: block; }
.pl-cover{
  aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--a, var(--red)) 18%, var(--surface-2)), var(--bg-elev));
  border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.pl-card:hover .pl-cover{ transform: translateY(-2px); }
.pl-cover span{ font-size: 1.4rem; font-weight: 650; color: var(--placeholder-ink); }
.pl-name{ font-weight: 600; font-size: .95rem; margin-top: .7rem; }
.pl-meta{ font-size: .8rem; color: var(--faint); margin-top: .2rem; }
.pl-item{ display: grid; gap: .6rem; }

/* subscriptions list */
.sub-list{ display: grid; gap: .5rem; }
.sub-row{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}

/* settings rows */
.set-grid{ display: grid; gap: .6rem; }
.set-row{
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.set-row b{ font-size: .95rem; font-weight: 600; display: block; }
.set-row p{ color: var(--muted); font-size: .86rem; margin-top: .25rem; max-width: 62ch; }

.form-card.danger{ border-color: rgba(240,67,58,.35); }

/* data table */
.table-wrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data{ width: 100%; border-collapse: collapse; min-width: 640px; }
table.data th{
  text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding: .8rem 1rem;
  background: var(--bg-elev); border-bottom: 1px solid var(--line);
}
table.data td{ padding: .85rem 1rem; font-size: .9rem; border-bottom: 1px solid var(--line); color: var(--muted); }
table.data tr:last-child td{ border-bottom: none; }
table.data td a{ color: var(--text); font-weight: 550; }
/* Numeric columns line up header and cell, which they did not while the cells used
   inline styles and the headers relied on a rule scoped to receipts. */
table.data th.num, table.data td.num{ text-align: right; white-space: nowrap; }
table.data td.num{ font-variant-numeric: tabular-nums; }
table.data td.num.strong{ font-weight: 600; color: var(--text); }
table.data td.num.muted{ color: var(--faint); }
table.data code{ font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }

.tag-paid, .tag-pending, .tag-failed, .tag-refunded, .tag-cancelled{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--muted);
}
.tag-paid::before, .tag-pending::before, .tag-failed::before,
.tag-refunded::before, .tag-cancelled::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.tag-paid{ color: var(--status-ok); }
.tag-pending{ color: var(--status-warn); }
.tag-failed, .tag-cancelled{ color: var(--status-bad); }
.tag-refunded{ color: var(--faint); }

/* progress bar on history cards */
.v-progress{ position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.5); z-index: 3; }
.v-progress span{ display: block; height: 100%; background: var(--red); }

/* ============================================================
   BUTTON LAYOUT REFINEMENTS
   ============================================================ */

/* Secondary actions sit in their own row, below the primary purchase action. */
.action-row{ display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.action-row form{ margin: 0; }

/* Subscribed button: a check plus a label that becomes "Unsubscribe" on hover, so the
   toggle is discoverable without a second competing button. */
.btn.is-sub .lbl-hover{ display: none; }
.btn.is-sub:hover{ border-color: var(--red-ink); color: var(--red-ink); }
.btn.is-sub:hover .lbl-rest{ display: none; }
.btn.is-sub:hover .lbl-hover{ display: inline; }
.btn.is-sub:hover svg{ display: none; }

/* Small square icon toggle (notification bell), so it does not compete with the
   labelled button beside it. */
.icon-toggle{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.icon-toggle:hover{ color: var(--text); border-color: var(--text); }
.icon-toggle.on{ color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.icon-toggle svg{ width: 17px; height: 17px; }
.sub-actions{ display: flex; gap: .5rem; align-items: center; }
.sub-actions form{ margin: 0; display: flex; }

/* ============================================================
   E-RECEIPT
   Modelled on how real payment receipts read: plain type, a summary
   strip of the three facts people look for, no decorative badges.
   ============================================================ */

.receipt-page{ display: grid; justify-items: center; padding: clamp(1.5rem, 5vh, 3rem) 0 4rem; }
.receipt{
  width: min(680px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.receipt-head{
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-bottom: 1.6rem;
}
.receipt-brand{ display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: 1rem; }
.receipt-brand img{ width: 24px; height: 24px; border-radius: var(--radius); }
.receipt-ref{ text-align: right; display: grid; gap: .15rem; }
.receipt-ref span{ font-size: .74rem; color: var(--faint); }
.receipt-ref b{ font-size: .82rem; font-weight: 500; color: var(--muted); }

.receipt h1{
  font-family: var(--font-body);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
}
.receipt-status-note{
  margin-top: .8rem; font-size: .88rem; color: var(--muted);
  border-left: 2px solid var(--line-strong); padding-left: .8rem;
}

.receipt-summary{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  padding: 1.4rem 0 1.5rem; margin-top: 1.2rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.receipt-summary > div{ display: grid; gap: .3rem; }
.receipt-summary span{ font-size: .76rem; color: var(--faint); }
.receipt-summary b{ font-size: .98rem; font-weight: 600; }

.receipt-parties{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.receipt-parties > div{ display: grid; gap: .18rem; align-content: start; }
.rp-label{ font-size: .76rem; color: var(--faint); margin-bottom: .28rem; }
.receipt-parties b{ font-size: .92rem; font-weight: 600; }
.receipt-parties span:not(.rp-label){ font-size: .86rem; color: var(--muted); }

.receipt-items{ width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.receipt-items th{
  font-size: .76rem; color: var(--faint); font-weight: 500; text-align: left;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.receipt-items th.num, .receipt-items td.num{ text-align: right; white-space: nowrap; }
.receipt-items td{ padding: 1rem 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .93rem; }
.receipt-items td b{ display: block; font-weight: 600; }
.receipt-items td span{ display: block; color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.receipt-items td.num{ font-weight: 600; }

.receipt-totals{ display: grid; gap: .6rem; margin-top: 1.2rem; margin-left: auto; width: min(290px, 100%); }
.rt-row{ display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--muted); }
.rt-row.grand{
  border-top: 1px solid var(--line-strong); padding-top: .8rem; margin-top: .3rem;
  color: var(--text); font-weight: 650; font-size: 1rem;
}

.receipt-meta{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem;
  margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.receipt-meta > div{ display: grid; gap: .18rem; align-content: start; }
.receipt-meta b{ font-size: .9rem; font-weight: 600; word-break: break-word; }
.receipt-meta span:not(.rp-label){ font-size: .84rem; color: var(--muted); }

.receipt-foot{ margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.receipt-foot p{ font-size: .82rem; color: var(--muted); line-height: 1.6; }
.receipt-foot p.muted{ color: var(--faint); margin-top: .6rem; }
.receipt-actions{ display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; width: min(680px, 100%); }

@media (max-width: 620px){
  .receipt-summary, .receipt-parties{ grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Printing gives a clean paper document: no shell, no dark background. */
@media print{
  .tb, .sb, .no-print, .msgs{ display: none !important; }
  .shell-main, .shell-inner{ margin: 0 !important; padding: 0 !important; }
  body, .receipt{ background: #fff !important; color: #111 !important; }
  .receipt{ border: none; width: 100%; padding: 0; }
  .receipt h1, .receipt-brand, .receipt-parties b, .receipt-meta b,
  .receipt-items td b, .receipt-summary b, .rt-row.grand{ color: #111 !important; }
  .receipt-ref span, .receipt-ref b, .rp-label, .receipt-summary span,
  .receipt-parties span, .receipt-items td span, .receipt-foot p, .rt-row{ color: #555 !important; }
  .receipt-head, .receipt-summary, .receipt-parties, .receipt-items th,
  .receipt-items td, .rt-row.grand, .receipt-meta, .receipt-foot{ border-color: #ddd !important; }
}

/* ============================================================
   ALLAUTH PAGES WE HAVE NOT HAND WRITTEN
   Generic styling so nothing renders as a stock Django form.
   ============================================================ */

.allauth-raw{ display: block; }
.allauth-raw h1{
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 500;
  letter-spacing: -.02em; line-height: 1.15; margin-bottom: .5rem;
}
.allauth-raw h2{ font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 .6rem; }
.allauth-raw p{ color: var(--muted); font-size: .93rem; line-height: 1.6; margin-bottom: .9rem; }
.allauth-raw a{ color: var(--text); font-weight: 550; }
.allauth-raw a:hover{ color: var(--red-ink); }
.allauth-raw form{ display: grid; gap: 1rem; margin-top: 1.2rem; }
.allauth-raw label{
  display: block; font-size: .85rem; font-weight: 550; color: var(--muted);
  margin-bottom: .4rem;
}
.allauth-raw input[type="text"],
.allauth-raw input[type="email"],
.allauth-raw input[type="password"],
.allauth-raw input[type="tel"],
.allauth-raw input[type="url"],
.allauth-raw input[type="number"],
.allauth-raw select,
.allauth-raw textarea{
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.allauth-raw input:focus, .allauth-raw select:focus, .allauth-raw textarea:focus{
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(240,67,58,.14);
}
.allauth-raw input[type="checkbox"], .allauth-raw input[type="radio"]{ accent-color: var(--red); width: 16px; height: 16px; }
.allauth-raw button,
.allauth-raw input[type="submit"],
.allauth-raw .button{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--red);
  color: #fff; font-size: .95rem; font-weight: 550; cursor: pointer;
}
.allauth-raw button:hover, .allauth-raw input[type="submit"]:hover{ background: var(--red-deep); }
.allauth-raw button[type="button"], .allauth-raw .secondaryAction button{
  background: transparent; border-color: var(--line-strong); color: var(--text); box-shadow: none;
}
.allauth-raw ul{ list-style: none; padding: 0; display: grid; gap: .4rem; margin: .5rem 0 0; }
.allauth-raw ul li{ font-size: .8rem; color: var(--faint); line-height: 1.5; padding-left: 1rem; position: relative; }
.allauth-raw ul li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.allauth-raw table{ width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .9rem; }
.allauth-raw table td, .allauth-raw table th{ padding: .7rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.allauth-raw .helptext{ font-size: .78rem; color: var(--faint); display: block; margin-top: .35rem; }
.allauth-raw hr{ border: none; border-top: 1px solid var(--line); margin: 1.4rem 0; }

.inline-note{
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: .9rem;
}

/* ============================================================
   CREATOR STUDIO
   Its own workspace: separate sidebar, separate header.
   ============================================================ */

.sb-channel{
  display: flex; align-items: center; gap: .7rem;
  padding: .3rem .75rem 1rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.sb-channel .v-av{ width: 36px; height: 36px; font-size: .9rem; }
.sb-channel-txt{ display: grid; gap: .1rem; min-width: 0; }
.sb-channel-txt b{ font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-channel-txt span{ font-size: .75rem; color: var(--faint); }
body.rail .sb-channel{ justify-content: center; padding: .3rem 0 .8rem; }
body.rail .sb-channel-txt{ display: none; }

.studio-head{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding: 2rem 0 1.4rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.studio-head h1{ font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
.studio-head .sub{ color: var(--muted); font-size: .88rem; margin-top: .3rem; }
.studio-head .sub a{ color: var(--muted); }
.studio-head .sub a:hover{ color: var(--text); }

/* studio overview: upload panel beside channel analytics */
.studio-grid{ display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 1000px){ .studio-grid{ grid-template-columns: 1fr; } }

.panel{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.4rem 1.5rem 1.5rem;
}
.panel > h2{ font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; margin-bottom: 1.1rem; }
.panel > .btn{ width: 100%; margin-top: 1.2rem; }

.upload-drop{
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 3.2rem 1.5rem;
  display: grid; justify-items: center; gap: 1rem; text-align: center;
}
.upload-drop svg{ width: 44px; height: 44px; color: var(--faint); }
.upload-drop p{ color: var(--muted); font-size: .93rem; max-width: 34ch; line-height: 1.55; }

.latest{ display: grid; grid-template-columns: 200px 1fr; gap: 1.2rem; }
.latest-body{ display: grid; gap: .55rem; align-content: start; }
.latest-body > b{ font-size: 1rem; font-weight: 650; line-height: 1.35; }
.latest-body .btn{ justify-self: start; margin-top: .3rem; }
@media (max-width: 620px){ .latest{ grid-template-columns: 1fr; } }

.upload-strip{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted);
}

.an-block{ padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.an-block:last-of-type{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.an-title{ display: block; font-size: .95rem; font-weight: 650; }
.an-label{ display: block; font-size: .8rem; color: var(--faint); margin-top: .15rem; }
.an-big{ font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: .35rem; }
.an-rows{ display: grid; gap: .55rem; margin-top: .8rem; }
.an-rows > div{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.an-rows dt{ font-size: .89rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-rows dt a{ color: var(--muted); }
.an-rows dt a:hover{ color: var(--text); }
.an-rows dd{ font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-empty{ font-size: .88rem; color: var(--faint); margin-top: .7rem; }

/* content editor */
.cf-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.content-form .form-card{ display: grid; gap: 1rem; align-content: start; }
.content-form .form-card h3{ font-size: 1rem; font-weight: 650; }
.content-form select[multiple]{ min-height: 8rem; }
.cf-actions{ display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }

td.row-actions{ white-space: nowrap; text-align: right; }
td.row-actions a, td.row-actions button{
  display: inline-block; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .85rem; padding: 0 .45rem;
}
td.row-actions form{ display: inline; margin: 0; }
td.row-actions a:hover, td.row-actions button:hover{ color: var(--text); }
td.row-actions a:last-child:hover{ color: var(--red-ink); }

/* content editor: tabbed so a long form stays scannable */
.tabs{ display: flex; gap: .3rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab{
  background: none; border: none; cursor: pointer;
  padding: .8rem 1rem; font-size: .92rem; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover{ color: var(--text); }
.tab.active{ color: var(--text); font-weight: 600; border-bottom-color: var(--red); }
.tab.has-error::after{
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-left: .45rem; vertical-align: middle;
}
.tab-panel{ display: none; padding-top: 1.6rem; }
.tab-panel.active{ display: block; }
.panel-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem 1.4rem; max-width: 880px;
  align-items: start;   /* rows must not stretch, or paired inputs drift out of line */
}
.panel-grid .field{ align-content: start; }
.panel-grid textarea{ min-height: 7.5rem; }
.panel-grid .span-2{ grid-column: 1 / -1; }
.panel-grid .checks{ grid-column: 1 / -1; display: grid; gap: .7rem; }
@media (max-width: 720px){ .panel-grid{ grid-template-columns: 1fr; } }
.content-form select[multiple]{ min-height: 8rem; }
.cf-actions{
  display: flex; gap: .7rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}

/* Studio direct upload */
.upload-box{
  margin-bottom: 1.4rem;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: grid; gap: .6rem;
}
.upload-box [data-upload-idle]{ display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.upload-bar{
  height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--surface-2);
}
.upload-bar span{ display: block; height: 100%; width: 0; background: var(--red); transition: width .25s ease; }
.upload-done{ font-size: .88rem; color: var(--ok-ink); }
.upload-confirm{ display: grid; gap: .7rem; font-size: .88rem; color: var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */

/* Lives outside .shell-inner (which pads its own bottom), so the footer is the
   true end of the page and carries the shell gutter itself. */
.foot{
  border-top: 1px solid var(--line);
  padding: 3rem var(--shell-gutter) 2rem;
}
/* The signup owns the left half at full size; the four link columns pack
   tighter on the right, which is where the separation comes from. */
.foot-grid{
  display: grid;
  grid-template-columns: minmax(360px, 2.6fr) repeat(4, minmax(120px, .8fr));
  gap: 2.5rem 1.8rem;
}
/* The gulf between the signup and the link columns comes off the signup's
   right edge, so the pill itself keeps its full width. */
.foot-signup{ padding-right: clamp(2rem, 4vw, 5rem); }
.foot-signup h2{ font-size: 1.3rem; font-weight: 650; letter-spacing: -.01em; }
.foot-signup > p{ margin-top: .45rem; font-size: .92rem; color: var(--muted); max-width: 42ch; }
.foot-signup .waitlist-slot{ margin-top: 1.1rem; max-width: 480px; }
.foot-fine{ margin-top: .8rem; font-size: .78rem; color: var(--faint); max-width: 46ch; }
.foot-fine a{ color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.foot-fine a:hover{ color: var(--text); }

.foot-col{ display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
/* Same display face as the signup heading, scaled down and muted a step so
   the headers read as labels rather than competing with the links. */
.foot-col h3{ font-family: var(--font-display); font-size: 1rem; font-weight: 650; letter-spacing: -.01em; color: var(--muted); margin-bottom: .35rem; }
.foot-col a{ font-size: .92rem; color: var(--text); }
.foot-col a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.foot-social a{ display: flex; align-items: center; gap: .6rem; }
.foot-social svg{ width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.foot-social a:hover svg{ color: var(--text); }

/* The signup form reuses the marketing pill bar (.waitlist-form in main.css) —
   including its success pill, error line and honeypot hiding. The marketing
   sheet assumes the dark canvas, so only the paint is corrected for theming. */
.foot .waitlist-form{ background: var(--input-bg); backdrop-filter: none; max-width: none; }
.foot .waitlist-form input[type="email"]{ color: var(--text); }
.foot .waitlist-success{ color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok-ink) 35%, transparent); background: color-mix(in srgb, var(--ok-ink) 8%, transparent); }

.foot-base{
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--faint);
}
.foot-brand{ font-weight: 650; font-size: 1rem; letter-spacing: -.02em; color: var(--text); }
/* Baseline-align with the bar: the badge's baseline must come from its text,
   not the icon, or the whole badge rides high next to its neighbours. */
.foot-ssl{ display: inline-flex; align-items: baseline; gap: .45rem; }
.foot-ssl svg{ width: 14px; height: 14px; align-self: center; }

@media (max-width: 1000px){
  .foot-grid{ grid-template-columns: 1fr 1fr; }
  /* Stacked, the columns need clear separation from the signup block below it. */
  .foot-signup{ grid-column: 1 / -1; padding-right: 0; margin-bottom: 1.4rem; }
}
@media (max-width: 760px){
  .foot{ margin-top: 3rem; padding-top: 2.2rem; }
  .foot-grid{ gap: 2.2rem 1.5rem; }
  .foot-base{
    flex-direction: column; align-items: center; gap: .35rem;
    text-align: center; margin-top: 2.4rem;
  }
}

/* ---------- tag chips (studio form) ----------
   Django renders CheckboxSelectMultiple as nested divs of label+input. The
   checkbox is visually hidden but stays focusable, so keyboard and screen
   reader behaviour is native; the label is the chip. */
.tag-choices{ display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-choices > div{ display: contents; }
.tag-choices label{
  display: inline-flex; align-items: center;
  padding: .42rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: .875rem; font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  user-select: none;
}
.tag-choices label:hover{ border-color: var(--text); color: var(--text); }
.tag-choices input[type="checkbox"]{
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.tag-choices label:has(input:checked){
  border-color: var(--red);
  color: var(--text);
  font-weight: 600;
  background: color-mix(in srgb, var(--red) 10%, transparent);
}
.tag-choices label:focus-within{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Tag pills on the title page — quiet, tappable, never on cards. */
.title-tags{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.title-tag{
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .24rem .7rem;
  font-size: .78rem;
  color: var(--muted);
}
.title-tag:hover{ border-color: var(--text); color: var(--text); }