/* AINE closed-alpha client — clean dark cinematic theme. */
:root {
  --bg: #0c0d12;
  --bg-2: #14161f;
  --panel: #181a25;
  --panel-2: #1f2231;
  --line: #2b2f42;
  --ink: #f3f4f8;
  --muted: #9aa0b4;
  --accent: #b01d2a;
  --accent-2: #2dd4bf;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 14px;
  /* Cinematic display face, all system fonts (CSP-safe, zero downloads):
     Bahnschrift = DIN-style engineered sans on Windows (film-poster DNA);
     Avenir Next / Futura cover iPhone, iPad, and Mac. */
  --font-display: Bahnschrift, "Avenir Next", Avenir, Futura,
                  "Trebuchet MS", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
/* No long-press image callouts or accidental text selection on touch —
   cards should scroll under the finger, not get "grabbed". */
img, .thumb, .card, .xcell { -webkit-touch-callout: none; user-select: none; }
/* Native-app feel on iOS: the page can NOT zoom or slide side-to-side.
   - overflow-x:hidden + width:100% : nothing can push wider than the screen.
   - touch-action:pan-y : only vertical scrolling is a page gesture, so a
     sideways drag or pinch can't pan/zoom the whole webview (horizontal rails
     opt back in with pan-x below).
   - overscroll-behavior:none : no rubber-band bounce.
   - text-size-adjust:100% : Safari/WebKit won't auto-inflate text and reflow. */
html, body {
  margin: 0; padding: 0;
  width: 100%; max-width: 100%; overflow-x: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* The root itself is brand-dark so nothing (overscroll, load, screenshots)
   ever exposes a white strip behind the app. */
html { background: #08090e; }
body {
  /* Flat black, not the old red radial wash: Todd's preference (2026-08-23),
     and what every screen in the three-pane / profile / analytics designs
     sits on. #08090e is those designs' ground, a touch deeper than --bg so
     panels and cards still read as raised against it. */
  background: #08090e;
  color: var(--ink);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
  min-height: 100vh;
  min-height: 100dvh; /* dvh matches the real visible area on iOS (no "too tall/zoomed" feel) */
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
  margin: 0 0 .4em; line-height: 1.2;
  font-family: var(--font-display); letter-spacing: .015em;
}
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 .6em; }

/* layout */
.app-shell { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }
.topnav {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  text-transform: uppercase; letter-spacing: .22em;
  /* The wordmark is a link home. text-decoration/cursor are set explicitly so
     the global `a` rule can't underline or recolour it — the gradient fill
     below depends on -webkit-text-fill-color winning over `color`. */
  text-decoration: none; cursor: pointer;
  /* Holographic wordmark: mostly-white gradient with red + teal accents; a
     shimmer sweeps across it and the glow pulses once every ~9s. */
  background: linear-gradient(105deg,
    #ffffff 0%, #ffffff 34%, #ffc9cd 44%, #7ff5e8 52%,
    #ffffff 62%, #ffffff 100%);
  background-size: 320% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brandShimmer 9s ease-in-out infinite;
}
@keyframes brandShimmer {
  0%, 74% { background-position: 0% 0;
            filter: drop-shadow(0 0 0 rgba(176, 29, 42, 0)); }
  84%     { filter: drop-shadow(0 0 10px rgba(255, 92, 108, .65)); }
  100%    { background-position: 100% 0;
            filter: drop-shadow(0 0 0 rgba(176, 29, 42, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .brand { animation: none; background-position: 0% 0; }
}
/* Back arrow on inner pages — the "normal back button spot" (top-left). */
.nav-back {
  background: transparent; border: 0; color: var(--ink);
  font-size: 21px; line-height: 1; padding: 4px 10px 6px 2px; cursor: pointer;
}
.nav-back:hover { color: var(--accent-2); }
.brand .dot { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.navlinks { display: flex; gap: 6px; flex-wrap: wrap; }
.navlinks a {
  color: var(--muted); padding: 6px 12px; border-radius: 999px; font-weight: 600;
}
.navlinks a:hover { color: var(--ink); text-decoration: none; background: var(--panel); }
.navlinks a.active { color: var(--ink); background: var(--panel-2); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.who { color: var(--muted); font-size: 13px; }
.who b { color: var(--ink); }
.tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 8px; border-radius: 999px; background: var(--panel-2);
  color: var(--accent-2); border: 1px solid var(--line);
}

/* sections */
.section { margin: 28px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* cards grid */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .32s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
/* A fixed pixel height let posters of different source ratios letterbox by
   different amounts, so a rail of cards had visibly uneven artwork. A ratio
   plus a floor keeps every poster the same shape at every viewport width. */
.thumb {
  aspect-ratio: 16 / 9; min-height: 124px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: rgba(255,255,255,.85);
}
.card-body { padding: 12px 14px; }
.card-title { font-weight: 700; }
.card-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.card-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
/* .score is deliberately gone. The raw ranking_score used to print on every
   card; to a viewer it read as debug output, and it turned the catalog into a
   visible scoreboard, which is exactly what discovery must not be while rank
   and revenue share are separate systems. The number still orders the feed --
   it just never reaches a viewer. */

/* The canonical earnings disclosure. Quiet, but never hidden: it carries the
   same wording as the enrollment script and every outreach email. */
.earn-truth {
  margin-top: 10px; padding: 10px 12px;
  border-left: 2px solid var(--line); border-radius: 0 6px 6px 0;
  background: rgba(255,255,255,.02); line-height: 1.5;
}

/* panels */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin: 16px 0;
}
.panel-2 { background: var(--panel-2); }

/* forms */
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 9px; padding: 9px 11px; font: inherit;
  /* 16px min: iOS auto-zooms the whole page when you focus a field smaller
     than 16px — the base font is 15px, which was triggering that zoom. */
  font-size: 16px;
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 160px; }

/* buttons */
button, .btn {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--accent); color: #fff; border: 0;
  border-radius: 9px; padding: 9px 16px;
}
button:hover { filter: brightness(1.12); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ghost { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
button.good { background: var(--good); color: #04130c; }
button.bad { background: var(--bad); color: #1b0606; }
button.small { padding: 5px 10px; font-size: 13px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* video */
video { width: 100%; border-radius: var(--radius); background: #000; max-height: 460px; }

/* tables / lists */
.list { display: flex; flex-direction: column; gap: 10px; }
.listrow {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px;
}
.listrow .meta { color: var(--muted); font-size: 13px; }
/* ---- rankings: view-based Top Producers leaderboard ---- */
.producer-row { gap: 18px; }
.producer-row.top-producer {
  border-color: rgba(255,209,102,.62);
  background: linear-gradient(100deg, rgba(255,209,102,.09), var(--panel-2));
}
.producer-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.producer-identity > span:last-child { min-width: 0; }
.producer-identity .meta { display: block; margin-top: 3px; }
.producer-rank {
  width: 34px; flex: 0 0 34px; text-align: center;
  color: #ffd166; font-weight: 800;
}
.producer-crown {
  display: inline-block; margin-left: 7px; padding: 2px 7px;
  border-radius: 999px; background: rgba(255,209,102,.15);
  color: #ffd166; font-size: 10px; font-style: normal; text-transform: uppercase;
  letter-spacing: .06em;
}
.producer-views { text-align: right; color: var(--accent-2); white-space: nowrap; }
.producer-views b { display: block; font-size: 18px; }
.producer-views small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.pill { font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); }
.pill.draft { color: var(--muted); }
.pill.submitted, .pill.in_review { color: var(--warn); }
.pill.published { color: var(--good); }
.pill.rejected, .pill.removed { color: var(--bad); }
.pill.open { color: var(--warn); }

/* explain breakdown */
.explain { display: grid; gap: 6px; }
.explain .ln { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 4px 0; }
.explain .ln b { color: var(--ink); }

/* misc */
.center { text-align: center; }
.empty { color: var(--muted); padding: 28px; text-align: center; }
.toast {
  /* Top banner on #toast (body sibling), never inside .cpf / .cpf-bio.
     Above everything (tab bar is z-index 60, nav 40) so it never collides
     with the bottom bar, the bio, or the Scroll feed's action rail. */
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 12px);
  bottom: auto; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--accent);
  color: var(--ink); padding: 11px 18px; border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5); z-index: 200; max-width: 90vw;
}
.toast.err { border-color: var(--bad); }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.tabs button.active { background: var(--accent); color: #fff; }
.admin-screen .tabs { overflow-x: auto; padding-bottom: 2px; }
.admin-screen button { min-height: 44px; }
.admin-row { align-items: flex-start; }
.admin-row > div:first-child { min-width: 0; flex: 1; }
.admin-evidence {
  margin-top: 7px; padding: 8px 10px; border-radius: 7px;
  background: rgba(255,255,255,.04); border-left: 3px solid var(--accent);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px;
}
.auth-wrap { max-width: 400px; margin: 60px auto; }
.kv { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.kv span { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-size: 12.5px; }

/* ---- ambient sky: the app's ground while you use it (sky-engine.js) ----
   z-index -1 puts it above the body's own background but under every piece
   of page content, so nothing in the app needs a stacking context of its
   own. It never takes a pointer event. */
.sky-canvas {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}
/* Suspended (a film is playing). display:none also makes the engine's
   IntersectionObserver mark it off-screen, which stops the loop drawing it. */
.sky-canvas.sky-hidden { display: none; }
/* While the sky is showing, the body's gradient has to go: a block child's
   background paints after negative-z-index descendants, so it would cover
   the canvas outright. html keeps the brand dark behind everything. */
body.sky-on { background: none; }

/* ---- cinematic intro overlay (warp-speed starfield) ---- */
.intro {
  position: fixed; inset: 0; z-index: 200; cursor: pointer;
  background: #050509; overflow: hidden;
  transition: opacity 3.2s ease, transform 3.2s cubic-bezier(.4, 0, .6, 1);
}
/* Dismiss: the scene eases forward and the wordmark rushes past the viewer. */
.intro.intro-out { opacity: 0; transform: scale(1.18); pointer-events: none; }
.intro.intro-out .intro-mark {
  animation: markPast 3.2s cubic-bezier(.4, 0, .6, 1) forwards;
}
/* The canvas is a replaced element: with only `inset:0` its `width:auto`
   resolves to the intrinsic (attribute) pixel size and ignores the insets,
   so it renders at W*dpr x H*dpr anchored top-left and the warp's vanishing
   point falls in the bottom-right corner. Pin it to the overlay explicitly
   so the starfield always zooms from the true screen centre. */
.intro-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.intro-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(46px, 9vw, 118px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .28em;
  text-indent: .28em; /* visually recenters the tracked-out caps */
  background: linear-gradient(180deg, #ffffff 0%, #ffc9cd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0; will-change: transform, filter, opacity;
}
.intro-mark.show { animation: markIgnite 2s cubic-bezier(.2,.7,.2,1) forwards; }
.intro-mark .dot { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.intro-skip {
  position: absolute; right: 26px; bottom: 20px;
  min-width: 44px; min-height: 44px; padding: 10px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.intro-skip:hover { color: rgba(255, 255, 255, .78); filter: none; }
.intro-skip:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
  color: #fff;
}
/* Tagline under the wordmark: "Your favorite AI videos". */
.intro-tagline {
  position: absolute; left: 50%; top: calc(50% + clamp(38px, 8vw, 92px));
  transform: translateX(-50%) translateY(10px);
  font-size: clamp(12px, 2.6vw, 17px); white-space: nowrap;
  letter-spacing: .32em; text-indent: .32em; text-transform: uppercase;
  color: rgba(255, 201, 205, .9); opacity: 0;
}
.intro-tagline.show { animation: tagIn 1.7s cubic-bezier(.2,.7,.2,1) .5s forwards; }
@keyframes tagIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: .95; transform: translateX(-50%) translateY(0); }
}
@keyframes markIgnite {
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(.9);
         filter: blur(18px) drop-shadow(0 0 0 rgba(176, 29, 42, 0)); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.03);
         filter: blur(0) drop-shadow(0 0 44px rgba(176, 29, 42, .8)); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1);
         filter: blur(0) drop-shadow(0 0 22px rgba(176, 29, 42, .42)); }
}
/* The camera moves past the wordmark into the home page. */
@keyframes markPast {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1);
         filter: blur(0) drop-shadow(0 0 22px rgba(176, 29, 42, .42)); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2);
         filter: blur(10px) drop-shadow(0 0 60px rgba(176, 29, 42, .55)); }
}

@media (prefers-reduced-motion: reduce) {
  .intro { transition: opacity .16s linear; transform: none; }
  .intro.intro-out { opacity: 0; transform: none; }
  .intro-mark.show,
  .intro.intro-out .intro-mark {
    animation: none; opacity: 1;
    transform: translate(-50%, -50%); filter: none;
  }
  .intro-tagline.show {
    animation: none; opacity: .95;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---- landing / request-invite ---- */
.hero { text-align: center; padding: 56px 16px 30px; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6.5vw, 66px); line-height: 1.04; letter-spacing: .01em;
  background: linear-gradient(180deg, #ffffff 0%, #ffc9cd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  font-size: clamp(15px, 2.3vw, 20px); color: var(--muted);
  max-width: 580px; margin: 16px auto 0;
}
.hero .scarcity {
  display: inline-block; margin-top: 22px; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
}
.join-card { max-width: 470px; margin: 6px auto 48px; }
.join-done { text-align: center; padding: 26px 16px; }
.join-done .big {
  font-size: 42px; color: var(--good);
  width: 80px; height: 80px; line-height: 76px; margin: 0 auto 10px;
  border: 2px solid var(--good); border-radius: 50%;
}
.joinbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: linear-gradient(100deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 22px;
}
.joinbar b { color: var(--ink); }

/* ---- home: hero spotlight ---- */
.hero-spot {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 360px; display: flex; align-items: flex-end;
  margin: 4px 0 14px; cursor: pointer;
}
.hero-spot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(8,9,14,.94) 0%,
              rgba(8,9,14,.6) 46%, rgba(8,9,14,.12) 100%);
}
.hero-spot-inner { position: relative; z-index: 1; padding: 34px; max-width: 640px; }
.hero-badge {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 12px;
}
.hero-spot-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 54px); font-weight: 700;
  line-height: 1.05; margin-bottom: 10px; letter-spacing: .02em;
}
.hero-spot-syn { color: #d8dae6; max-width: 500px; }
.hero-watch { font-size: 15px; padding: 12px 24px; }
.hero-enter { animation: heroFade 1.1s ease; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- home: horizontal rails (scroll sideways) ---- */
.rail-row { margin: 30px 0; }
.rail-row h2 { margin-bottom: 14px; }
.rail {
  display: flex; gap: 16px; overflow-x: auto;
  padding: 6px 2px 16px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  /* Horizontal drags scroll the rail; vertical drags starting on a rail must
     still scroll the PAGE (pan-x alone trapped the page when a scroll gesture
     began on a card — pan-x pan-y lets the browser route by direction). */
  touch-action: pan-x pan-y; overscroll-behavior-x: contain;
  -webkit-touch-callout: none; user-select: none;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.rail-card { flex: 0 0 232px; scroll-snap-align: start; }

/* ---- title-page prev / next navigation ---- */
.title-nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 0 0 18px;
}
.title-nav-btn {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; font-size: 13px;
  text-decoration: none; max-width: 46%; min-width: 0;
  transition: border-color .2s ease, color .2s ease;
}
.title-nav-btn:hover { border-color: var(--accent); text-decoration: none; }
.title-nav-btn.disabled { color: var(--muted); opacity: .55; cursor: default; }
.title-nav-btn.disabled:hover { border-color: var(--line); }
.title-nav-btn.next { text-align: right; }
.title-nav-dir { font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.title-nav-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- film room: Home / player / conversation ------------------------- */
.three-pane { min-width: 0; }
.three-home { display: none; }
.three-player { min-width: 0; }
.three-room-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.three-room-head h2 { margin: 0; }

@media (min-width: 1100px) {
  body.in-three-pane .app-shell { max-width: 1500px; padding-left: 16px; padding-right: 16px; }
  body.in-three-pane .page { animation: none; }
  .three-pane {
    display: grid; grid-template-columns: 270px minmax(500px, 1fr) 330px;
    min-height: calc(100vh - 88px); border: 1px solid var(--line);
    border-radius: 14px; overflow: clip; background: rgba(12, 13, 18, .78);
  }
  .three-home {
    display: block; min-width: 0; padding: 18px 14px;
    border-right: 1px solid var(--line); background: rgba(12, 13, 18, .92);
  }
  .three-home h2 { margin: 0 0 14px; }
  .three-home .show-picker { margin: 0 0 18px; padding: 3px; gap: 2px; }
  .three-home .show-pill { min-height: 36px; padding: 7px 5px; font-size: 11px; }
  .three-pane-label {
    margin: 16px 2px 8px; color: var(--muted); font-size: 10px;
    font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  }
  .three-home-item {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center;
    width: 100%; min-height: 62px; gap: 10px; padding: 7px; margin: 0 0 5px;
    text-align: left; color: var(--ink); background: transparent;
    border: 1px solid transparent; border-radius: 10px; box-shadow: none;
  }
  .three-home-item:hover,
  .three-home-item.active { background: var(--panel); border-color: var(--line); filter: none; }
  .three-home-item.active { box-shadow: inset 2px 0 0 var(--accent); }
  .three-home-item > span:last-child { min-width: 0; }
  .three-home-item b,
  .three-home-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .three-home-item b { font-size: 12px; }
  .three-home-item small { margin-top: 4px; color: var(--muted); font-size: 10px; }
  .three-home-thumb {
    display: grid; place-items: center; width: 76px; aspect-ratio: 16/9;
    border-radius: 7px; overflow: hidden; color: rgba(255,255,255,.65); font-weight: 800;
  }
  .three-short-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .three-short-grid .three-home-item {
    display: block; padding: 0; overflow: hidden; min-height: 0; margin: 0;
  }
  .three-short-grid .three-home-thumb { width: 100%; aspect-ratio: 9/13; border-radius: 7px; }
  .three-short-grid .three-home-item > span:last-child { display: none; }
  .three-player { padding: 0 18px 24px; background: rgba(8, 9, 13, .62); }
  .three-player .title-nav { margin: 12px 0; }
  .three-player .title-panel { margin: 0; padding: 0 0 18px; border: 0; background: transparent; }
  .three-player .title-panel video,
  .three-player .title-panel .title-media { border-radius: 0; max-height: 58vh; }
  .three-room {
    display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 18px 14px;
    border-left: 1px solid var(--line); background: rgba(12, 13, 18, .92);
  }
  .three-comment-list { flex: 1; overflow: auto; max-height: calc(100vh - 250px); }
  .three-room .listrow { display: block; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); }
  .three-room .listrow button { margin-top: 7px; }
  .three-room .comment-box { position: sticky; bottom: 0; margin-top: auto; padding-top: 12px; background: #0c0d12; }
  .three-room .comment-box textarea { min-height: 68px; }
}

/* ---- shorts: vertical full-viewport snap-scroll feed ---- */
.scroll-feed {
  position: relative;
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
/* Hands-free viewing toggles ("tabs to turn it off"). Float over the top of
   the feed so they never shrink the video area. */
.scroll-controls {
  position: absolute; top: 10px; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: center; gap: 8px;
  pointer-events: none; padding: 0 10px;
}
.sc-toggle {
  pointer-events: auto;
  font: 600 12px/1 "Segoe UI", system-ui, sans-serif;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(12,13,18,.62); color: var(--ink);
  border: 1px solid var(--line); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; gap: 6px;
}
.sc-toggle b { color: var(--accent-2); font-weight: 700; }
.sc-toggle.off { color: var(--muted); }
.sc-toggle.off b { color: var(--muted); }
.sc-chip { pointer-events: none; color: #ffd166; border-color: rgba(255,209,102,.5); }
.scroll-feed::-webkit-scrollbar { display: none; }
.scroll-item {
  height: 100%; scroll-snap-align: start;
  display: flex; justify-content: center; align-items: center;
  position: relative; background: #000; overflow: hidden;
}
.scroll-item video {
  max-height: 100%; max-width: 460px; width: 100%;
  border-radius: var(--radius); background: #000; cursor: pointer;
}
.scroll-overlay {
  /* Sits ABOVE the action pill (which occupies roughly 34px–90px), matching
     the design's 104px. It also no longer needs a 110px right inset: the
     vertical rail that used to live there is gone, so the title and synopsis
     get the full width back. */
  position: absolute; left: 22px; right: 22px; bottom: 104px; z-index: 2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .85); cursor: pointer;
}
.scroll-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.scroll-by { color: #e8c8cb; font-size: 14px; margin-bottom: 8px; cursor: pointer; }
.scroll-syn { font-size: 14px; color: #d8dae6; max-width: 420px; margin: 0; }
/* ---- Scroll feed: one floating action pill, in the thumb zone ----
   Replaces the old vertical rail of five TEXT buttons down the right edge,
   which was ~95px wide and sat over the middle-right of every 9:16 short —
   exactly where the subject is. */
.scroll-bar {
  position: absolute; z-index: 6;
  left: 50%; transform: translateX(-50%);
  /* 34px, not the design's 26px: the design has no scrubber, and this app's
     .scroll-progress owns bottom 7px through 29px. */
  bottom: 34px;
  max-width: calc(100% - 28px);
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: rgba(20, 22, 31, .86);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.scroll-bar button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit;
  min-height: 44px; background: transparent; color: var(--ink);
  white-space: nowrap; flex: 0 0 auto;
}
.scroll-bar button:hover { filter: brightness(1.15); }
.scroll-bar .sb-exit {
  gap: 6px; padding: 11px 15px; font-size: 13px; font-weight: 700;
  background: var(--accent); color: #fff;
}
.scroll-bar .sb-btn { gap: 5px; padding: 11px 12px; font-size: 12.5px; font-weight: 600; }
.scroll-bar svg {
  width: 19px; height: 19px; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.scroll-bar .sb-exit svg { width: 15px; height: 15px; stroke-width: 2.3; }
/* The More glyph is three filled dots; the shared rule above would blank it. */
.scroll-bar svg [fill="currentColor"] { fill: currentColor; }
.scroll-bar .sb-btn.liked { color: #ff3b3b; }
.scroll-bar .sb-btn.liked svg { fill: currentColor; }
/* Mute lives in .scroll-bar with Exit / like / comment / share / more.
   Same quiet glass speaker; bar SVG size must not override the glyph. */
.scroll-bar .sound-toggle {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; gap: 0; flex: 0 0 auto;
  color: rgba(255, 255, 255, .78);
}
.scroll-bar .sound-toggle:hover { filter: none; color: rgba(255, 255, 255, .94); }
.scroll-bar .sound-toggle svg {
  width: 14px; height: 14px;
  stroke-width: 1.7;
  fill: none;
}
/* Quiet mute: a 44px hit target around a small glass glyph, not a system
   pill with a Mute/Unmute label. Default stays muted until an explicit tap. */
.sound-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; margin: 0; gap: 0;
  background: transparent; border: 0; border-radius: 0;
  color: rgba(255, 255, 255, .78);
  box-shadow: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.sound-toggle:hover { filter: none; color: rgba(255, 255, 255, .94); }
.sound-toggle .sound-icon {
  display: grid; place-items: center;
  width: 26px; height: 26px; pointer-events: none;
  border-radius: 999px;
  background: rgba(8, 9, 13, .28);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sound-toggle svg {
  width: 14px; height: 14px; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sound-toggle.sound-on { color: rgba(255, 255, 255, .92); }
.sound-toggle.sound-on .sound-icon {
  background: rgba(8, 9, 13, .34);
  border-color: rgba(255, 255, 255, .24);
}
.sound-label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Scroll feed: draggable video progress bar (scrubber) ---- */
.scroll-progress {
  position: absolute; left: 12px; right: 12px; bottom: 7px; height: 22px;
  z-index: 4; touch-action: none; cursor: pointer;
}
.scroll-progress::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 3px; background: rgba(255, 255, 255, .28);
}
.scroll-progress-fill {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  border-radius: 3px; background: #ff3b3b;
  box-shadow: 0 0 6px rgba(255, 59, 59, .55);
}
.scroll-progress-knob {
  position: absolute; bottom: -3px; left: 0; width: 9px; height: 9px;
  margin-left: -4px; border-radius: 50%; background: #fff;
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 0 6px rgba(0, 0, 0, .55);
}
.scroll-progress.dragging::before,
.scroll-progress.dragging .scroll-progress-fill { height: 5px; }
.scroll-progress.dragging .scroll-progress-knob {
  opacity: 1; transform: scale(1.4); bottom: -4px;
}

/* ---- profile header, shared by #/u/<id> and #/profile ----
   One family for both surfaces. The public page used a wrapping flex row, so
   the button row wrapped away from the name and Block ended up a sibling of
   Follow; your own page used a centred column that matched nothing else. Both
   are now: avatar left, identity beside it, one action row underneath. */
.cpf { position: relative; max-width: 640px; margin: 0 auto; }
.cpf-head {
  display: grid; grid-template-columns: 86px minmax(0, 1fr);
  align-items: center; gap: 12px; padding: 8px 0 0;
}
.cpf-avatar {
  width: 86px; height: 86px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; color: #fff;
}
.cpf-id { min-width: 0; }
.cpf-name {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  line-height: 1.2; margin: 0; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.cpf-handle { color: var(--muted); font-size: 13px; margin-top: 2px; }
/* One row of counts, not a stat block: at 1 follower a three-column pedestal
   reads as an empty dashboard. */
.cpf-stats {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  color: var(--muted); font-size: 13px;
}
.cpf-stats b { color: var(--ink); }
.cpf-stats a { color: var(--muted); }
.cpf-stats a:hover { color: var(--ink); text-decoration: none; }
/* One filled primary and an overflow. Fewer, larger targets beat a row of
   equal ghost buttons where nothing is the obvious thing to press. */
.cpf-actions {
  display: flex; gap: 8px; align-items: stretch; margin: 10px 0 20px;
}
.cpf-actions button { min-height: 36px; width: 100%; font-size: 13px; }
.cpf-primary, .cpf-secondary { flex: 1 1 0; min-width: 0; }
.cpf-more {
  flex: 0 0 36px; display: flex; align-items: center; justify-content: center;
  padding: 0; width: 36px;
}
.cpf-more svg {
  width: 20px; height: 20px; display: block; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round;
}
.cpf-more svg [fill="currentColor"] { fill: currentColor; }
/* Own-profile Edit/Share: dark panel + line, ink text -- not accent-red.
   Public Follow is <button class="cpf-primary"> and keeps the filled accent.
   Edit is <a class="cpf-primary"><button>, so this does not touch Follow. */
.cpf-actions a.cpf-primary button,
.pf .cpf-actions .cpf-secondary {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
}
.cpf-actions a.cpf-primary { text-decoration: none; }
.cpf-about { margin: -6px 0 14px; }
.cpf-bio {
  color: var(--ink); font-size: 14px; line-height: 1.45;
  margin: 0 0 6px; white-space: pre-wrap; position: static;
}
.cpf-bio-add { color: var(--muted); text-decoration: none; font-size: 13px; }
.cpf-bio-add:hover { color: var(--ink); text-decoration: none; }
.cpf-link {
  display: inline-block; color: var(--accent-2); font-size: 13px;
  text-decoration: none; margin: 0;
}
.cpf-link:hover { text-decoration: underline; }
.cpf-picker { margin: 0 0 10px; }
.cpf-picker .show-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; text-decoration: none;
}
.cpf-picker .show-pill:hover { text-decoration: none; }

.pf-activity {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 14px 0 18px;
}
.pf-activity a {
  min-width: 0; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(31, 34, 49, .82); color: var(--ink);
  text-decoration: none;
}
.pf-activity a:hover { border-color: var(--accent-2); }
.pf-activity b,
.pf-activity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-activity b { font-size: 12px; }
.pf-activity span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.pf-private-stats {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 8px;
  color: var(--muted); font-size: 12px;
}
.pf-private-stats b { color: var(--muted); font-weight: 600; }
.pf-private-stats small { flex-basis: auto; color: var(--muted); }

/* ---- own profile page (the "Me" tab) ---- */
.pf { position: relative; max-width: 640px; margin: 0 auto; }
.pf-gear { display: none; }
.pf-tabs { display: flex; margin-top: 0; border-bottom: 1px solid var(--line); }
.pf-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 0; padding: 8px 0 6px; color: var(--muted); font-size: 11.5px;
  font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.pf-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-tab span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.pf-tab:hover { color: var(--ink); text-decoration: none; }
.pf-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.pf-notifs { margin-top: 8px; }
.pf-notifs .notif-head h1 { font-size: 18px; margin: 0 0 2px; }
.pf-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-row-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 15px; }

/* double-tap heart burst + shockwave ring (Scroll feed) */
.heart-burst { position: absolute; z-index: 6; pointer-events: none;
  font-size: 96px; color: #ff4d5e; transform: translate(-50%, -50%) scale(0);
  text-shadow: 0 0 34px rgba(255,77,94,.95), 0 2px 10px rgba(0,0,0,.6);
  animation: heartPop .85s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes heartPop {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(-14deg); opacity: 0; }
  28%  { transform: translate(-50%,-50%) scale(1.3) rotate(4deg); opacity: 1; }
  55%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-135%) scale(.85); opacity: 0; }
}
.heart-ring { position: absolute; z-index: 5; pointer-events: none;
  width: 34px; height: 34px; border: 3px solid rgba(255,77,94,.85);
  border-radius: 50%; transform: translate(-50%, -50%);
  animation: ringOut .65s ease-out forwards; }
@keyframes ringOut {
  to { width: 190px; height: 190px; opacity: 0; border-width: 1px; }
}

/* liked / saved button states + feedback pulse */
[data-react].liked, [data-act="react"].liked {
  color: #ff5c6c; border-color: rgba(255,92,108,.6); }
button.liked { background: rgba(255,77,94,.16); }
[data-save].saved, [data-act="save"].saved {
  color: var(--accent-2); border-color: rgba(45,212,191,.5); }
.pulse { animation: likePulse .45s cubic-bezier(.2,.8,.3,1); }
@keyframes likePulse {
  0% { transform: scale(1); } 40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ---- media rendering (animated-image titles alongside video) ---- */
.title-media {
  width: 100%; max-height: 460px; object-fit: contain;
  border-radius: var(--radius); background: #000; display: block;
}
.scroll-media {
  max-height: 86%; max-width: 460px; width: 100%;
  object-fit: cover; border-radius: var(--radius); background: #000;
}

/* ---- motion polish: page + element entrances, press feedback ---- */
.page { animation: pageEnter .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
/* Tap feedback: interactive surfaces gently depress under the finger. */
button, .card, .xcell, .gchip, .pf-tab, .listrow, .rail-card {
  transition: transform .16s cubic-bezier(.2, .7, .2, 1),
              filter .16s ease, border-color .2s ease, background .2s ease,
              box-shadow .2s ease, opacity .2s ease;
}
button:active, .card:active, .xcell:active,
.gchip:active, .listrow:active, .rail-card:active {
  transform: scale(.965);
}

/* ---- Explore grid (Instagram-style wall of short covers) ---- */
.xgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; gap: 4px;
}
.xcell {
  position: relative; aspect-ratio: 3 / 4; border-radius: 8px;
  overflow: hidden; cursor: pointer;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  animation: cellIn .42s cubic-bezier(.2, .7, .2, 1) both;
}
/* A few tiles span two rows for an editorial, non-uniform rhythm. */
.xcell.tall { grid-row: span 2; aspect-ratio: auto; }
/* Films are landscape. A portrait tile centre-cropped both sides off every
   frame, so the Videos wall keeps 16:9 and stays uniform. */
.xgrid-wide { grid-auto-rows: auto; }
.xgrid-wide .xcell { aspect-ratio: 16 / 9; }
.xcell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
}
.xcell:hover { filter: brightness(1.08); }
.xviews {
  position: relative; z-index: 1; margin: 0 0 7px 8px;
  font-size: 11px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
@keyframes cellIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* Stagger the first dozen tiles so the wall cascades into place. */
.xgrid .xcell:nth-child(1)  { animation-delay: .02s; }
.xgrid .xcell:nth-child(2)  { animation-delay: .05s; }
.xgrid .xcell:nth-child(3)  { animation-delay: .08s; }
.xgrid .xcell:nth-child(4)  { animation-delay: .11s; }
.xgrid .xcell:nth-child(5)  { animation-delay: .14s; }
.xgrid .xcell:nth-child(6)  { animation-delay: .17s; }
.xgrid .xcell:nth-child(7)  { animation-delay: .20s; }
.xgrid .xcell:nth-child(8)  { animation-delay: .23s; }
.xgrid .xcell:nth-child(9)  { animation-delay: .26s; }
.xgrid .xcell:nth-child(10) { animation-delay: .29s; }
.xgrid .xcell:nth-child(11) { animation-delay: .32s; }
.xgrid .xcell:nth-child(12) { animation-delay: .35s; }

/* Profile walls only: IG-density edge-to-edge. Home/Search keep 4px gap + 8px radius. */
.cpf .xgrid, .pf .xgrid {
  gap: 1px;
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}
.cpf .xcell, .pf .xcell { border-radius: 0; }

/* ---- premium post flow: drop-zone, genre chips, progress ---- */
.upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 52px 18px; min-height: 168px;
  cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); color: var(--muted); margin: 10px 0 8px;
}
.upload-zone:hover { border-color: rgba(243,244,248,.22); color: var(--ink); }
.upload-zone.has-file {
  border-style: solid; border-color: var(--line);
  background: var(--panel); color: var(--ink);
}
.upload-zone svg {
  width: 26px; height: 26px; stroke: var(--muted); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Post composer: film first. Extra tools stay folded. Cash OFF. */
.studio-composer .btn-premium {
  box-shadow: 0 1px 0 rgba(176,29,42,.16);
}
.studio-composer .btn-premium:hover {
  filter: brightness(1.05); box-shadow: 0 2px 8px rgba(176,29,42,.18);
}
.studio-composer select#nf,
.studio-composer select#ng-list { white-space: normal; height: auto; min-height: 42px; }
.studio-composer input#ng { margin-top: 6px; }
.studio-screen { margin: 4px 0 0; }
.studio-honest { margin: 14px 0 0; }
.studio-more {
  margin: 4px 0 0; padding: 0; border: 0; background: transparent;
}
.studio-more summary {
  cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 500;
  padding: 10px 2px; list-style: none;
}
.studio-more summary::-webkit-details-marker { display: none; }
.studio-more summary::marker { content: ""; }
.studio-more summary:hover { color: var(--ink); }
.studio-more[open] {
  margin-top: 10px; padding: 0 16px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.studio-more[open] summary { color: var(--ink); }
.genre-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 10px; }
.gchip {
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; text-transform: capitalize;
}
.gchip:hover { color: var(--ink); border-color: var(--accent-2); }
.gchip.sel {
  background: rgba(45,212,191,.14); color: var(--accent-2);
  border-color: rgba(45,212,191,.55);
}
.upbar {
  height: 8px; border-radius: 999px; background: var(--bg-2);
  overflow: hidden; margin: 10px 0 6px;
}
.upfill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .25s ease;
}
.btn-premium {
  background: linear-gradient(100deg, var(--accent) 0%, #d63a5f 55%,
              var(--accent-2) 140%);
  box-shadow: 0 6px 20px rgba(176,29,42,.32);
  letter-spacing: .01em;
}
.btn-premium:hover { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(176,29,42,.4); }

/* Leftover callout class. Post no longer uses it. Earnings uses earn-head. */
.earn-callout {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 14px; padding: 13px 15px; border-radius: 13px;
  text-decoration: none; color: var(--ink);
  border: 1px solid rgba(255, 209, 102, .4);
  background:
    linear-gradient(100deg, rgba(255,209,102,.12), rgba(45,212,191,.08));
  font-size: 14px; line-height: 1.35;
  transition: transform .16s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}
a.earn-callout:hover { border-color: rgba(255,209,102,.75); text-decoration: none; }
a.earn-callout:active { transform: scale(.985); }
.earn-callout.is-plus {
  border-color: rgba(45,212,191,.45);
  background: linear-gradient(100deg, rgba(45,212,191,.12), transparent);
}
.earn-ico { font-size: 22px; flex-shrink: 0; }
.earn-cta { color: #ffd166; font-weight: 700; white-space: nowrap; }

/* ---- post-flow cover picker ---- */
.cover-frames { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cover-frames img {
  width: 104px; border-radius: 8px; cursor: pointer; display: block;
  border: 2px solid transparent; opacity: .8;
  transition: opacity .2s ease, border-color .2s ease, transform .16s ease;
}
.cover-frames img:active { transform: scale(.95); }
.cover-frames img.sel {
  border-color: var(--accent-2); opacity: 1;
  box-shadow: 0 0 12px rgba(45, 212, 191, .35);
}

/* Respect users who ask for less motion — kill entrances + transforms. */
@media (prefers-reduced-motion: reduce) {
  .page, .xcell, .xgrid .xcell { animation: none !important; }
  button:active, .card:active, .xcell:active,
  .gchip:active, .listrow:active, .rail-card:active,
  .cover-frames img:active { transform: none; }
}

/* ---- free-preview paywall (full-length films) ---- */
.preview-note { margin-top: 10px; font-size: 13px; color: var(--warn); }
.preview-note a { color: var(--accent-2); font-weight: 600; }
.gate-card { margin-top: 14px; text-align: center;
  border-color: rgba(255, 209, 102, .45); }
.gate-card .plus-badge-lg { margin: 0 auto 8px; }

/* ---- Dream+ paywall ---- */
.plus-tag { color: #ffd166; border-color: rgba(255,209,102,.5); }
.plus-upsell { color: var(--accent-2); cursor: pointer; }
.plus-card { max-width: 520px; margin: 24px auto; }
.plus-badge-lg {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
  color: #ffd166; border: 1px solid rgba(255,209,102,.5);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.plus-perks { color: #d8dae6; margin: 12px 0; padding-left: 20px; }
.plus-perks li { margin: 6px 0; }
.plus-price {
  font-family: var(--font-display); font-size: 30px; font-weight: 800;
  margin: 14px 0 4px;
}
.plus-legal { line-height: 1.5; margin-top: 14px;
  border-top: 1px solid var(--line); padding-top: 12px; }
.plus-shell {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr);
  gap: 34px; max-width: 1080px; margin: 24px auto; padding: clamp(24px, 4vw, 48px);
}
.plus-copy h1 { max-width: 600px; font-size: clamp(34px, 5vw, 58px); line-height: .98; }
.plus-lede { max-width: 620px; font-size: 17px; line-height: 1.6; }
.plus-benefit-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 22px; margin-top: 22px;
}
.plus-benefit-grid > div { padding: 16px 0; border-top: 1px solid var(--line); }
.plus-benefit-grid b,
.plus-benefit-grid span { display: block; }
.plus-benefit-grid b { margin-bottom: 7px; color: var(--ink); }
.plus-benefit-grid span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.plus-truth { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.plus-truth > b { color: #ffd166; }
.plus-truth .earn-truth { margin-bottom: 0; }
.plus-purchase {
  align-self: start; padding: 22px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel);
}
.plus-purchase h2 { margin-top: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--muted); }
.plus-purchase .plan-row { min-height: 78px; }
.plus-restore { width: 100%; margin-top: 10px; }
@media (max-width: 800px) {
  .plus-shell { display: block; padding: 20px; }
  .plus-purchase { margin-top: 24px; padding: 16px; }
  .plus-benefit-grid { display: block; }
}
.badge-plus {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #1a1400; background: #ffd166;
  border-radius: 999px; padding: 2px 7px; margin-left: 6px;
}

/* ---- bottom tab bar (mobile) ---- */
.tabbar { display: none; }
@media (max-width: 768px) {
  /* Docked tab bar (~56px content + home-indicator) plus breathing room so
     the last row never sits under the bar or peeks in a gap below it. */
  .app-shell { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* Super-simple top bar: the bottom tab bar is the navigation on phones, so
     the top row is just the wordmark. Signed-in account actions (Log out,
     Dream+, Rankings, Studio, Admin) live in the Profile tab instead. It's
     sticky (pinned) with safe-area padding so the wordmark clears the notch
     and doesn't scroll away or jiggle. Negative side margins cancel
     .app-shell's 20px padding so Dream + search run edge to edge. */
  .topnav {
    position: sticky; top: 0; z-index: 40;
    background: rgba(12,13,18,.96); backdrop-filter: blur(8px);
    justify-content: space-between; gap: 0;
    margin-left: -20px;
    margin-right: -20px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    margin-bottom: 16px;
  }
  .topnav .navlinks { display: none; }
  /* .nav-right used to be display:none here, which is why the Dream+ chip
     was built on every render and then never seen on a phone -- the only
     device that matters. Now the cluster survives, and only .nav-wide items
     (Log out, the "Go" in "Go Dream+") drop, all of which are one tap away
     in Settings.

     Three columns rather than justify-content:center + an absolute cluster:
     centring the wordmark in the FULL width ran it straight underneath the
     search icon at 375px. With 1fr auto 1fr the side columns match each
     other, so the wordmark is still exactly centred, but the middle column
     shrinks before anything can overlap. */
  .topnav .nav-wide { display: none; }
  .topnav.signed {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; justify-content: initial;
  }
  .topnav.signed .brand { grid-column: 2; justify-self: center; }
  .topnav.signed .nav-right {
    grid-column: 3; justify-self: end; margin-left: 0; gap: 6px;
  }
  .topnav .brand { font-size: 19px; }
  /* Signed in, the wordmark is centered, so the back arrow floats in the
     left corner. Logged OUT the wordmark sits left — an absolute arrow would
     land right on top of it — so the arrow stays in flow, small, just before
     the wordmark. */
  .topnav.signed .nav-back {
    position: absolute; left: 4px; bottom: 5px; padding: 8px 12px;
    font-size: 22px;
  }
  .topnav:not(.signed) .nav-back { padding: 4px 8px 4px 0; font-size: 20px; }
  /* Welded to the true bottom edge. The previous floating pill sat
     18px + safe-area above the screen bottom, so scrolled content peeked
     in the gap below the bar. Full-width, home-indicator padding inside
     the bar, still three 44px destinations. */
  .tabbar {
    position: fixed; z-index: 60;
    left: 0; right: 0;
    bottom: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    background: rgba(20, 22, 31, .92);
    border: 1px solid rgba(243, 244, 248, .12);
    border-bottom: 0;
    box-shadow: 0 -12px 38px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
  .tabbar .tab-item {
    position: relative; color: var(--muted); text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 44px; padding: 8px 2px; border-radius: 999px;
    font-size: 10px; font-weight: 600;
    transition: color .18s ease, background .18s ease;
  }
  .tabbar .tab-item svg {
    width: 21px; height: 21px; display: block;
    stroke: currentColor; fill: none; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* The filled Home and You glyphs carry their own fill="currentColor"; this
     stops the shared rule above from blanking them out. */
  .tabbar .tab-item svg [fill="currentColor"] { fill: currentColor; }
  .tabbar .tab-item.active { color: var(--ink); background: rgba(243, 244, 248, .08); }
  .tabbar .tab-item:hover { text-decoration: none; }
  .tabbar .tab-badge { top: 4px; right: calc(50% - 18px); }
  /* Fullscreen shorts get no bottom bar — that is the whole reason the feed's
     action pill carries an Exit button. */
  body.in-scroll .tabbar { display: none; }
  .footer { margin-bottom: 20px; }
}
.tab-badge {
  position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 10px; line-height: 16px; text-align: center; padding: 0 3px;
}

/* ---- edit profile: picture ---- */
.avatar-edit {
  display: flex; align-items: center; gap: 16px;
  margin: 6px 0 18px; flex-wrap: wrap;
}
.avatar-preview {
  width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
  color: #fff; box-shadow: 0 0 0 1px var(--line);
}
.avatar-edit-main { flex: 1; min-width: 200px; }
.avatar-edit-main .btn-row { margin-top: 8px; }
.avatar-edit-main button { min-height: 44px; }

/* ---- notifications: header bell + a dismissable, scannable inbox ---- */
.nav-bell { position: relative; }
.nav-bell .tab-badge { top: -3px; right: -5px; }

.notif-page { max-width: 640px; }
.notif-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.notif-head h1 { margin: 0; }
.notif-actions { display: flex; gap: 8px; margin: 10px 0 14px; }
.notif-list { display: flex; flex-direction: column; gap: 8px; }

/* Each row is a two-layer sandwich: the Dismiss button sits underneath and is
   revealed as the foreground slides left on --sw. */
.notif-row {
  --sw: 0px;
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--bad);
}
.notif-main {
  position: relative; z-index: 1;
  transform: translateX(var(--sw));
  transition: transform .18s cubic-bezier(.2, .7, .2, 1);
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  touch-action: pan-y;   /* let the page scroll; we only read horizontal drag */
}
.notif-row.swiping .notif-main { transition: none; }
.notif-main:hover { text-decoration: none; border-color: var(--accent-2); }
/* Unread is a tint plus a dot, not a red border -- a red border on a panel
   reads as an error, not as news. */
.notif-row.unread .notif-main {
  background: linear-gradient(100deg, rgba(45, 212, 191, .07), var(--panel) 60%);
}
.notif-icon {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--accent-2);
}
.notif-icon svg {
  width: 18px; height: 18px; display: block; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-text { font-size: 14px; line-height: 1.45; }
.notif-time { font-size: 12px; color: var(--muted); }
.notif-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2); margin-top: 6px;
}
.notif-dismiss {
  position: absolute; top: 0; right: 0; bottom: 0; width: 96px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: #fff; cursor: pointer;
}
.notif-dismiss svg {
  width: 20px; height: 20px; display: block; stroke: currentColor; fill: none;
  stroke-width: 2.2; stroke-linecap: round;
}
.notif-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 48px 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.notif-empty-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.notif-empty-icon svg {
  width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.notif-empty p { margin: 0; max-width: 40ch; }

/* ---- analytics sparkline ---- */
.analytics-layout {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 270px;
  min-height: calc(100vh - 110px); border: 1px solid var(--line);
  border-radius: 14px; overflow: clip; background: rgba(12,13,18,.78);
}
.analytics-nav,
.analytics-insights { padding: 20px 14px; background: rgba(12,13,18,.92); }
.analytics-nav { border-right: 1px solid var(--line); }
.analytics-insights { border-left: 1px solid var(--line); }
.analytics-nav h2,
.analytics-insights h2 { margin: 0 0 16px; }
.analytics-nav > a {
  display: block; padding: 11px 12px; margin: 4px 0; border-radius: 9px;
  color: var(--muted); text-decoration: none; font-weight: 700;
}
.analytics-nav > a:hover,
.analytics-nav > a.active { color: var(--ink); background: var(--panel-2); }
.analytics-nav > a.active { box-shadow: inset 2px 0 0 var(--accent); }
.analytics-plan {
  display: grid; gap: 8px; margin-top: 28px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  font-size: 12px;
}
.analytics-plan span { color: var(--muted); line-height: 1.5; }
.analytics-main { min-width: 0; padding: 22px; }
.analytics-title-row,
.analytics-card-head,
.section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.analytics-title-row h1,
.analytics-card-head h2,
.section-title-row h2 { margin: 0; }
.analytics-range { margin: 0; min-width: 260px; }
.analytics-range button:disabled { cursor: default; opacity: .55; }
.analytics-range button.active:disabled { opacity: 1; }
.analytics-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin: 20px 0 14px;
}
.analytics-kpi,
.analytics-card,
.analytics-insight,
.analytics-accrual {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
}
.analytics-kpi { display: grid; gap: 7px; padding: 15px; }
.analytics-kpi span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.analytics-kpi b { font-size: clamp(22px, 2.5vw, 32px); }
.analytics-kpi small { color: var(--muted); line-height: 1.35; }
.analytics-kpi.money b { color: #ffd166; }
.analytics-card { padding: 17px; }
.analytics-chart-card { min-height: 270px; }
.analytics-chart {
  display: flex; align-items: end; gap: 4px; height: 180px; margin-top: 20px;
  border-bottom: 1px solid var(--line);
}
.analytics-bar {
  flex: 1 1 12px; min-width: 5px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
.analytics-chart-empty { margin: auto; color: var(--muted); }
.analytics-axis { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 10px; }
.analytics-lower { display: grid; grid-template-columns: 1.35fr .8fr; gap: 12px; margin-top: 12px; }
.analytics-film {
  display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center;
  gap: 10px; padding: 9px 0; color: var(--ink); border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.analytics-film:last-child { border-bottom: 0; }
.analytics-film-thumb { display: grid; place-items: center; width: 56px; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; }
.analytics-film b,
.analytics-film small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.analytics-film small { color: var(--muted); margin-top: 3px; }
.analytics-film strong { color: var(--accent-2); }
.analytics-source .earn-notice { margin-top: 14px; }
.analytics-insight { display: grid; gap: 7px; padding: 13px; margin-bottom: 9px; }
.analytics-insight span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.analytics-accrual { display: grid; gap: 8px; padding: 14px; margin-top: 16px; }
.analytics-accrual > span { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; }
.analytics-accrual > b { color: #ffd166; font-size: 27px; }
.analytics-accrual small { color: var(--muted); line-height: 1.45; }

@media (max-width: 1050px) {
  .analytics-layout { grid-template-columns: 180px minmax(0,1fr); }
  .analytics-insights { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .analytics-insights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .analytics-insights h2 { grid-column: 1/-1; }
  .analytics-accrual { margin-top: 0; }
}

@media (max-width: 768px) {
  .analytics-layout { display: block; border: 0; background: transparent; }
  .analytics-nav,
  .analytics-insights { border: 0; padding: 0; background: transparent; }
  .analytics-nav { display: none; }
  .analytics-main { padding: 0; }
  .analytics-title-row { align-items: flex-start; flex-direction: column; }
  .analytics-range { width: 100%; min-width: 0; }
  .analytics-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-lower { display: block; }
  .analytics-lower .analytics-card { margin-top: 12px; }
  .analytics-insights { display: block; margin-top: 14px; }
  .analytics-insight,
  .analytics-accrual { margin-bottom: 9px; }
}
.spark-row { display: flex; align-items: flex-end; gap: 3px; height: 42px;
  margin-top: 8px; }
.spark { width: 8px; background: var(--accent-2); border-radius: 2px 2px 0 0;
  display: inline-block; }

/* ---- comments + settings ---- */
.comment-box textarea { min-height: 60px; }
.listrow.unread { border-color: var(--accent); }
label.chk { display: flex; align-items: center; gap: 8px; color: var(--ink);
  margin: 8px 0; font-size: 14px; }
label.chk input { width: auto; }
/* ---- consent row on the auth screens (guideline 1.2) ---- */
.agree-row {
  align-items: flex-start; gap: 10px; margin: 16px 0 4px;
  font-size: 14px; line-height: 1.45;
}
.agree-row input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 20px; }
button[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- in-app sheets: report / block / terms (guideline 1.2) ---- */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.62); backdrop-filter: blur(3px);
}
.sheet-card {
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 16px 16px 0 0; padding: 20px 18px
    calc(18px + env(safe-area-inset-bottom));
}
.sheet-card h3 { margin: 0 0 10px; font-size: 19px; }
.sheet-body p { margin: 0 0 10px; }
.sheet-choices { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.sheet-choice { width: 100%; text-align: left; min-height: 46px; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
@media (min-width: 700px) {
  .sheet-wrap { align-items: center; }
  .sheet-card { border-radius: 16px; }
}

/* ---- rewards ---- */
.lvl-bar { height: 10px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; margin: 10px 0 4px; }
.lvl-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ffd166); }

/* ---- settings: danger zone (account deletion) ---- */
.danger-zone { border-color: rgba(176, 29, 42, .55); }
.danger-zone h3 { color: var(--bad); }
button.bad { background: var(--accent); color: #fff; }

/* ---- fullscreen Scroll feed (top bar hidden for an immersive view) ----
   Only on phones, where the bottom tab bar replaces it. On wider screens the
   tab bar is display:none, so hiding the top nav here too left the Scroll
   feed with no navigation of any kind and the browser back button as the only
   exit — a dead end on the surface most worth showing a visitor. */
@media (max-width: 768px) {
  body.in-scroll .topnav { display: none; }
}
body.in-scroll .app-shell { padding: 0; }
body.in-scroll .scroll-feed { height: 100dvh; }
@media (max-width: 768px) {
  /* Full-page shorts on phone: the tab bar is already display:none in this
     view, so reserving its height left a leftover gutter under every film.
     The snap item is the viewport; the film covers it edge-to-edge.
     Chrome (overlay, pill, scrubber) insets for the notch / home
     indicator. Desktop three-pane and the 9:16 card above 768px stay put. */
  body.in-scroll .scroll-feed { height: 100dvh; }
  .scroll-item {
    display: block;
  }
  .scroll-item video,
  .scroll-item .scroll-media {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    object-fit: cover; border-radius: 0;
  }
  .scroll-controls {
    top: calc(10px + env(safe-area-inset-top));
  }
  .scroll-overlay {
    bottom: calc(104px + env(safe-area-inset-bottom));
  }
  .scroll-bar {
    bottom: calc(34px + env(safe-area-inset-bottom));
  }
  .scroll-progress {
    bottom: calc(7px + env(safe-area-inset-bottom));
  }
}

/* ---- pull-to-refresh indicator ---- */
.ptr {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 0; right: 0;
  z-index: 80; display: flex; justify-content: center; pointer-events: none;
  transform: translateY(calc(var(--ptr, 0px) - 50px));
  opacity: calc(var(--ptr, 0px) / 44);
}
.ptr.snap { transition: transform .26s ease, opacity .26s ease; }
.ptr-spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.6px solid var(--line); border-top-color: var(--accent-2);
  background: var(--panel); box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.ptr.ready .ptr-spin { border-top-color: var(--accent); }
.ptr.spin .ptr-spin { animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ---- redesigned Settings: clean, formal, card-based ---- */
.settings { max-width: 600px; margin: 4px auto 0; }
.set-title { font-size: 24px; margin: 6px 2px 14px; }
.set-id {
  display: flex; align-items: center; gap: 13px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 15px 16px; margin-bottom: 16px;
}
.set-id-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: #fff; background: linear-gradient(135deg, var(--accent), #d63a5f);
}
.set-id-name { font-weight: 700; font-size: 16px; }
.set-id-sub { color: var(--muted); font-size: 13px; }

.set-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 4px 16px; margin: 12px 0;
}
.set-card-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  padding: 14px 0 6px;
}
.set-card.set-danger { border-color: rgba(176, 29, 42, .45); }
.set-card.set-danger .set-card-h { color: var(--bad); }

.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 0; border-top: 1px solid var(--line);
}
.set-card-h + .set-row, .set-card-h + .set-link { border-top: 0; }
.set-row-main { min-width: 0; }
.set-row-label { font-weight: 600; font-size: 14.5px; }
.set-row-sub { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.set-row-action { justify-content: flex-end; }
.set-link { text-decoration: none; color: var(--ink); cursor: pointer; }
.set-link:hover { text-decoration: none; }
.set-link:hover .set-row-label { color: var(--accent-2); }
.set-chevron { color: var(--muted); font-size: 20px; flex-shrink: 0; }
.set-field-label {
  display: block; font-size: 13px; color: var(--muted);
  margin: 12px 0 5px;
}

/* A settings row whose control is too wide to sit beside its label on a
   phone: the control drops underneath and takes the full width. */
.set-row-stack { display: block; }
/* An author `display` beats the UA stylesheet's [hidden] rule whatever the
   specificity, so a stacked row that sets display:block would ignore the
   hidden attribute entirely. */
.set-row-stack[hidden] { display: none; }
.set-row-stack .set-row-main { margin-bottom: 10px; }
.set-row-stack .set-field-label { display: flex; justify-content: space-between; }

/* Segmented control (Settings -> Ambient sky). */
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
}
.seg-btn {
  flex: 1; min-height: 44px; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--muted); font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: color .18s ease, background .18s ease;
}
.seg-btn:hover { color: var(--ink); filter: none; }
.seg-btn.active { color: #fff; background: var(--accent); }
.seg-btn:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

/* Range sliders. Restyled from scratch: the platform default is a light-mode
   control and reads as a foreign object on a dark panel. */
.set-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0 0 2px;
  border-radius: 999px;
  background: linear-gradient(var(--line), var(--line)) center / 100% 4px no-repeat;
  outline: 0; cursor: pointer;
}
.set-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: var(--accent-2); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.set-range::-moz-range-thumb {
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: var(--accent-2); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.set-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* referral code display */
.refer-code {
  font-family: var(--font-display); font-weight: 800;
  font-size: 30px; letter-spacing: .28em; text-align: center;
  padding: 18px 12px; border-radius: 12px;
  color: #ffd166;
  border: 1px dashed rgba(255, 209, 102, .5);
  background: linear-gradient(100deg, rgba(255,209,102,.10), rgba(45,212,191,.06));
  text-indent: .28em; /* center despite letter-spacing */
}

/* iOS-style toggle switch */
.switch { position: relative; width: 46px; height: 28px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0;
  cursor: pointer; z-index: 2; }
.switch .track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--line); transition: background .22s ease;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform .22s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.switch input:checked ~ .track { background: var(--accent-2); }
.switch input:checked ~ .knob { transform: translateX(18px); }
.switch input:focus-visible ~ .track { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---- site footer (legal / support) ---- */
.footer {
  margin-top: 46px; padding: 18px 0 6px;
  border-top: 1px solid var(--line);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  color: var(--muted); font-size: 12.5px;
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }

/* ---- quiet Get the app (web marketing; not on every feed) ---- */
.get-app {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .01em;
}
.get-app a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.get-app a:hover { color: var(--ink); }
.get-app-hero { margin-top: 18px; }
.get-app-auth { max-width: 400px; margin: 18px auto 0; }
.footer-apps { display: inline; }
.footer-apps a { color: var(--muted); }

.legal { max-width: 720px; margin: 0 auto; }
.legal h2 { margin-top: 26px; }
.legal li { margin: 6px 0; color: #cfd2df; }

/* ---- top-bar icon button (Search lives up here now, not in the tab bar) -- */
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; color: var(--muted);
  transition: color .18s ease, background .18s ease;
}
.nav-icon svg {
  width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.nav-icon:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.nav-icon.active { color: var(--ink); background: var(--panel-2); }
/* Wide screens keep the full .navlinks row, which already has a Search link.
   Showing the icon too would put Search in the top bar twice. */
@media (max-width: 768px) { .topnav .nav-bell { display: none; } }
@media (min-width: 769px) {
  .topnav .nav-icon { display: none; }
  .topnav .nav-bell { display: inline-flex; }
}

/* ---- Home: pick what shows, or leave it on All (= everything posted) ---- */
.show-picker {
  display: flex; gap: 6px; margin: 0 0 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; width: fit-content;
}
.show-pill {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-weight: 700; font-size: 13px;
  padding: 7px 18px; border-radius: 999px; font-family: inherit;
  transition: color .18s ease, background .18s ease;
}
.show-pill:hover { color: var(--ink); }
.show-pill.active { color: var(--ink); background: var(--panel-2); }

/* ---- Dream+ screen tabs (Overview / Monetization) ---- */
.plus-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.plus-tabs a {
  padding: 9px 16px 8px; color: var(--muted); font-weight: 700;
  font-size: 14px; border-bottom: 2px solid transparent;
  text-decoration: none;
}
.plus-tabs a:hover { color: var(--ink); text-decoration: none; }
.plus-tabs a.active { color: var(--ink); border-bottom-color: var(--accent-2); }

/* ---- Monetization screen ---- */
.earn-head h1, .earn-head h2 { margin-bottom: 4px; }
.earn-figures { display: flex; gap: 12px; margin: 16px 0 14px; }
.earn-fig {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 12px; text-align: center;
}
.earn-fig b {
  display: block; font-family: var(--font-display); font-size: 26px;
  line-height: 1.1; color: var(--ink);
}
.earn-fig span {
  display: block; margin-top: 4px; color: var(--muted);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
}
/* Amber, not green: this is a recorded accrual, not money you can take out,
   and the colour should not suggest otherwise. */
.earn-notice {
  border: 1px solid rgba(251, 191, 36, .42);
  background: linear-gradient(100deg, rgba(251,191,36,.11), transparent);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px;
  line-height: 1.45; color: var(--ink);
}
.earn-rules { margin: 8px 0 0; padding-left: 20px; }
.earn-rules li {
  color: var(--ink); font-size: 13.5px; line-height: 1.5; margin-bottom: 8px;
}
.earn-rules li::marker { color: var(--accent-2); }

/* ---- Post tab ---- */
@media (max-width: 768px) {
  /* Post is now an OUTLINE plus-circle, matching the design's ph-plus-circle,
     so it must keep its stroke and sit at the same 21px as its neighbours.
     The previous rule here (30px, stroke:none) was written for the old filled
     rectangle glyph and rendered the outline icon completely invisible. */
  .tabbar .tab-post svg {
    width: 21px; height: 21px; stroke: currentColor; fill: none;
  }
  .tabbar .tab-post.active { color: var(--ink); }
  .pf-activity { display: flex; overflow-x: auto; scrollbar-width: none; }
  .pf-activity::-webkit-scrollbar { display: none; }
  .pf-activity a { flex: 0 0 auto; max-width: 210px; }
}

/* ---- Dream+ plan list (one row per purchasable term) ---- */
.plan-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.plan-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  padding: 14px 16px; border-radius: 13px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .18s ease, transform .16s cubic-bezier(.2,.7,.2,1);
}
.plan-row:hover { border-color: var(--accent-2); }
.plan-row:active { transform: scale(.99); }
.plan-row[disabled] { opacity: .55; cursor: wait; }
.plan-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plan-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 700; font-size: 15px;
}
.plan-term { color: var(--muted); font-size: 12.5px; }
.plan-badge {
  background: var(--accent-2); color: #06231f; border-radius: 999px;
  padding: 2px 8px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.plan-price {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  white-space: nowrap;
}
.plan-note { margin: 2px 0 0; }