/* ==========================================================================
   CIRQ design system · light, warm and friendly
   Flat gold on black, white type, charcoal cards, no gradients or glows. Reels, stories and camera stay dark (they sit on media).
   Sections: 1 Tokens · 2 Base · 3 Layout & navigation · 4 Surfaces · 5 Buttons · 6 Forms · 7 People & badges
             8 Feedback · 9 Feed · 10 Profile · 11 Lists · 12 Chat · 13 Reels · 14 Games & cards · 15 Admin
             16 Dialogs · 17 Auth & landing · 18 Utilities · 19+ Component polish (the layer that makes it look like Pipel)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;
  /* brand: one flat gold on black, like the reference banking UI. No gradients, no glows. */
  --brand: #f7b500; --brand-300: #ffd04d; --brand-600: #d99a00; --brand-700: #a87400; --on-lime: #0b0b0c;
  --orange: #f2641a; --blue: #2f6bff; --yellow: #ffc933; --red: #ff5a5f;
  --pink: #f2641a; --teal: #8a8a93;                        /* the old pink/teal accents now map to the orange / grey of the reference */
  --accent: #f7b500; --accent-600: #ffc933;                /* links, liked hearts, small highlights */
  /* kept for the dark surfaces that sit on photos/video (reels, stories, camera, collectible cards) */
  --navy-950: #070708; --navy-900: #0b0b0c; --navy-800: #141416; --navy-700: #1e1e21;
  --purple: #f7b500; --purple-600: #d99a00; --purple-400: #ffd04d; --magenta: #f2641a; --cyan: #f7b500; --cyan-600: #d99a00;
  --gold: #f7b500; --gold-600: #d99a00; --gold-ink: #f7b500; --green: #3fcb8a; --danger: #ff5a5f; --danger-ink: #ff7b7f; --warn: #f2a31b;
  --presence-active: #3fcb8a; --presence-active-glow: rgba(63, 203, 138, 0); --presence-offline: #55555c; --presence-ring: #141416;
  --presence-text: #8a8a93; --presence-text-active: #3fcb8a;
  /* text */
  --text: #ffffff; --text-2: #d2d2d7; --muted: #9a9aa3; --dim: #6c6c75;
  /* surfaces & borders: black page, charcoal cards */
  --bg: #0b0b0c; --bg-2: #111113; --surface: #151517; --surface-2: #1d1d20; --surface-3: #2a2a2e;
  --card-bg: #151517; --card-flat: rgba(255, 255, 255, .04);
  --border: rgba(255, 255, 255, .10); --border-soft: rgba(255, 255, 255, .06); --border-cyan: rgba(247, 181, 0, .8);
  /* "gradient" tokens are solid colours now */
  --grad-primary: #f7b500; --grad-cyan: #f7b500; --grad-text: #f7b500; --grad-gold: #f7b500; --grad-ring: #f7b500;
  /* no glows or soft coloured shadows: a zero shadow keeps `box-shadow: var(--x), ...` lists valid */
  --glow-purple: 0 0 0 0 transparent; --glow-cyan: 0 0 0 0 transparent; --glow-gold: 0 0 0 0 transparent;
  --shadow-card: 0 0 0 0 transparent; --shadow-btn: 0 0 0 0 transparent;
  /* shape & spacing */
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --nav-h: 76px;
  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-brand: "Fredoka", "Lato", system-ui, sans-serif;
  --ease: cubic-bezier(.3, .8, .3, 1);
}


/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth}
body {
  margin: 0; min-height: 100vh; font-family: var(--font); font-size: 15.5px; line-height: 1.55; color: var(--text); overflow-x: hidden;
  background: var(--bg); -webkit-font-smoothing: antialiased}
img, video, svg { max-width: 100%} img, video { display: block}
a { color: inherit; text-decoration: none}
[hidden] { display: none !important}
h1, h2, h3, h4 { margin: 0 0 .45em; line-height: 1.15; letter-spacing: -.02em; font-weight: 800}
h1 { font-size: clamp(1.85rem, 5vw, 2.7rem)} h2 { font-size: 1.3rem} h3 { font-size: 1.05rem}
p { margin: 0 0 .8em} small, .small { font-size: .85rem} .muted { color: var(--muted)} .dim { color: var(--dim)}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px}
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #02101f; padding: 8px 14px; border-radius: var(--r-pill); z-index: 999; font-weight: 800}
.skip:focus { left: 8px}
.i { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none}
.i-sm { width: 18px; height: 18px} .i-lg { width: 28px; height: 28px} .i.fill { fill: currentColor}
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent}

/* ---------- 3. Layout & navigation ---------- */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh}
.sidebar, .rail { display: none}
.main { width: 100%; max-width: 700px; margin: 0 auto; padding: 14px 16px calc(var(--nav-h) + 40px); min-width: 0}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 4px 0 14px}
.topbar .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; letter-spacing: .02em}
.topbar .logo img { width: 38px; height: 38px; border-radius: 12px; box-shadow: var(--glow-purple)}
.topbar .actions { display: flex; align-items: center; gap: 10px}
.round-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s}
.round-btn:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--glow-cyan)}
.dot { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--grad-primary); color: var(--on-lime); font-size: .7rem; font-weight: 800; display: grid; place-items: center; box-shadow: var(--glow-purple)}

/* mobile bottom bar (poster style: Home · Reels · + · Chats · Play) */
.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 50; width: min(94vw, 470px)}
.pill { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; border-radius: var(--r-pill); background: var(--surface); backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: var(--shadow-card), 0 0 30px rgba(217, 154, 0, 0.14)}
.pill a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 52px; height: 50px; padding: 0 8px; border-radius: 18px; color: var(--muted); font-size: .66rem; font-weight: 700; transition: color .15s, background .15s}
.pill a span.lbl { display: block}
.pill a:hover { color: var(--text)}
.pill a.active { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(217, 154, 0, 0.44)}
.pill a.active .i { color: var(--accent); filter: none}
.fab { width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; border: 3px solid var(--surface); display: grid; place-items: center; background: var(--grad-primary); color: var(--on-lime); cursor: pointer; box-shadow: var(--shadow-btn), var(--glow-purple); transition: transform .25s var(--ease); flex: none}
.fab:hover { transform: scale(1.07) rotate(90deg)}
.pill .badge-n { position: absolute; top: 2px; right: 8px; min-width: 18px; height: 18px; border-radius: var(--r-pill); padding: 0 4px; background: var(--pink); color: var(--text); font-size: .66rem; display: grid; place-items: center}
.mobile-menu-trigger { display: none}
.pill button.mobile-menu-trigger { position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 52px; height: 50px; padding: 0 8px; border: 0; border-radius: 18px; background: transparent; color: var(--muted); font: 700 .66rem var(--font); cursor: pointer}
.pill button.mobile-menu-trigger:hover, .pill button.mobile-menu-trigger[aria-expanded="true"] { color: var(--text); background: rgba(247, 181, 0, 0.12)}
.mobile-menu-backdrop { position: fixed; inset: 0; z-index: 79; border: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px)}
.mobile-page-menu { position: fixed; z-index: 80; left: 50%; width: min(94vw, 520px); max-height: min(76dvh, 640px); overflow-y: auto; overscroll-behavior: contain; padding: 14px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card), var(--glow-purple); opacity: 0; transform: translate(-50%, 14px); transition: opacity .2s ease, transform .2s var(--ease)}
.mobile-page-menu.is-open { opacity: 1; transform: translate(-50%, 0)}
.mobile-page-menu-head { position: sticky; z-index: 1; top: -14px; padding: 12px 4px 10px; background: var(--surface)}
.mobile-page-menu-head h2 { margin: 0}
.mobile-page-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px}
.mobile-page-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 14px; background: rgba(255, 255, 255, 0.035); color: var(--text-2); font: 600 .88rem var(--font); text-align: left}
.mobile-page-link > span:not(.mobile-page-badge) { overflow-wrap: anywhere}
.mobile-page-link:hover, .mobile-page-link.active { border-color: var(--border-cyan); background: rgba(247, 181, 0, 0.10); color: var(--text)}
.mobile-page-link.active .i { color: var(--accent)}
.mobile-page-badge { margin-left: auto; flex: none; min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--grad-primary); color: var(--on-lime); font-size: .7rem; font-weight: 800; text-align: center}
.mobile-page-section { margin: 18px 2px 8px; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase}
.mobile-page-logout { margin-top: 8px}
.mobile-page-logout button { width: 100%; background: rgba(255, 77, 122, .06); color: var(--danger-ink); cursor: pointer}
body.mobile-menu-open { overflow: hidden; overscroll-behavior: none}
html[data-mobile-menu-direction="up"] .mobile-page-menu { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); transform: translate(-50%, 14px)}
html[data-mobile-menu-direction="up"] .mobile-page-menu.is-open { transform: translate(-50%, 0)}
html[data-mobile-menu-direction="up"] .pill .mobile-menu-trigger { display: flex}
html[data-mobile-menu-direction="down"] .mobile-page-menu { top: max(10px, env(safe-area-inset-top)); transform: translate(-50%, -14px)}
html[data-mobile-menu-direction="down"] .mobile-page-menu.is-open { transform: translate(-50%, 0)}
html[data-mobile-menu-direction="down"] .topbar .mobile-menu-trigger { display: grid}
html[data-mobile-menu-direction="down"] .pill .mobile-menu-trigger { display: none}

@media (min-width: 1024px) {
  .shell { grid-template-columns: 270px minmax(0, 1fr) 320px; max-width: 1380px; margin: 0 auto}
  .sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; padding: 26px 16px; border-right: 1px solid var(--border-soft); overflow-y: auto}
  .sidebar .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.6rem; letter-spacing: .03em; margin: 0 0 20px 10px}
  .sidebar .brand img { width: 46px; height: 46px; border-radius: 14px; box-shadow: var(--glow-purple)}
  .sidebar a.nav, .sidebar button.nav { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-md); color: var(--text-2); font-weight: 600; transition: background .18s, color .18s, transform .18s}
  .sidebar a.nav:hover { background: rgba(247, 181, 0, 0.09); color: var(--text); transform: translateX(3px)}
  .sidebar a.nav.active { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(217, 154, 0, 0.40)}
  .sidebar a.nav.active::before { content: ""; position: absolute; left: -16px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 6px 6px 0; background: var(--accent); box-shadow: var(--glow-cyan)}
  .sidebar a.nav.active .i { color: var(--accent)}
  .sidebar .n-badge { margin-left: auto; background: var(--grad-primary); color: var(--on-lime); font-size: .7rem; font-weight: 800; border-radius: var(--r-pill); padding: 1px 9px}
  .sidebar .grow { flex: 1}
  .rail { display: block; padding: 26px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto}
  .main { padding-bottom: 60px}
  .bottom-nav, .topbar .logo { display: none}
  .mobile-menu-trigger, .mobile-page-menu, .mobile-menu-backdrop { display: none !important}
  .topbar { justify-content: flex-end}
}
@media (max-width: 360px) {
  .mobile-page-menu { padding: 10px; border-radius: 18px}
  .mobile-page-links { gap: 6px}
  .mobile-page-link { gap: 7px; padding: 9px; font-size: .8rem}
}

/* ---------- 4. Surfaces ---------- */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; backdrop-filter: blur(12px); box-shadow: var(--shadow-card)}
.card + .card, .stack > * + * { margin-top: 14px}
a.card { transition: transform .2s var(--ease), box-shadow .2s, border-color .2s}
a.card:hover { transform: translateY(-2px); border-color: var(--border-cyan); box-shadow: var(--shadow-card), var(--glow-cyan)}
.card.flat { background: var(--card-flat); border-color: var(--border-soft); box-shadow: none}
.card.lime { background: var(--grad-primary); color: var(--on-lime); border: 0; box-shadow: var(--shadow-btn), var(--glow-purple)}
.card.violet { background: var(--surface-2); border: 0; box-shadow: var(--glow-purple); color: var(--on-lime)}
.row { display: flex; align-items: center; gap: var(--s-3)} .row.wrap { flex-wrap: wrap} .between { justify-content: space-between} .grow { flex: 1; min-width: 0}
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3)}
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3)}
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 26px 2px 12px}
.section-title h2 { margin: 0; display: flex; align-items: center; gap: 10px}
.section-title h2::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: var(--grad-ring)}
.page-title { margin: 6px 0 16px}
.empty { text-align: center; padding: 38px 18px; color: var(--muted)}
.empty .i { width: 42px; height: 42px; color: var(--accent); margin-bottom: 8px; filter: none}
.empty h3 { color: var(--text)}
.divider { height: 1px; background: var(--border-soft); margin: 14px 0; border: 0}

/* ---------- 5. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--r-pill); background: var(--grad-primary); color: var(--on-lime); font: 700 .98rem var(--font); cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s, filter .18s; box-shadow: var(--shadow-btn); white-space: nowrap}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 32px rgba(217, 154, 0, 0.48), var(--glow-purple)}
.btn:active { transform: translateY(0) scale(.99); filter: brightness(.96)}
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none}
.btn.loading { pointer-events: none; color: transparent; position: relative}
.btn.loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: var(--surface); animation: spin .8s linear infinite}
.btn.block { width: 100%} .btn.sm { min-height: 38px; padding: 0 16px; font-size: .85rem}
.btn.ghost { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border)}
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent), var(--glow-cyan); background: rgba(247, 181, 0, 0.07)}
.btn.violet { background: var(--surface-2)}
.btn.danger { background: rgba(255, 77, 122, .1); color: var(--danger-ink); box-shadow: inset 0 0 0 1.5px rgba(255, 77, 122, .5)}
.btn.danger:hover { box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 18px rgba(255, 77, 122, .35)}
.btn.following { background: rgba(255, 255, 255, 0.06); color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--border-soft)}
.btn.gold { background: var(--grad-gold); color: #2a1a00; box-shadow: var(--glow-gold)}
.link { color: var(--accent); font-weight: 700} .link:hover { text-decoration: underline}
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: .15s}
.icon-btn:hover { background: rgba(247, 181, 0, 0.12); color: var(--text)}
.act { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 0; background: transparent; color: var(--muted); font: 700 .9rem var(--font); border-radius: var(--r-pill); cursor: pointer; transition: .15s}
.act:hover { background: rgba(247, 181, 0, 0.11); color: var(--text)}
.act.liked { color: #ff4fa0} .act.liked .i { fill: #ff4fa0; filter: none}

/* ---------- 6. Forms ---------- */
label { display: block; font-weight: 600; font-size: .86rem; margin: 14px 0 6px; color: var(--text-2)}
.input, select.input, textarea.input { width: 100%; min-height: 50px; padding: 0 18px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); font: 500 .98rem var(--font); transition: border-color .15s, box-shadow .15s, background .15s}
textarea.input { padding: 14px 18px; min-height: 96px; resize: vertical}
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a6cb' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px}
select.input option { background: var(--surface); color: var(--text)}
.input::placeholder { color: var(--dim)}
.input:hover { border-color: rgba(255, 255, 255, 0.16)}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.09), var(--glow-cyan); background: var(--surface-2)}
.input:user-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255, 77, 122, .12)}
.input:user-valid:not(:placeholder-shown):not(select) { border-color: rgba(46, 229, 157, .55)}
.field-wrap { position: relative} .field-wrap .toggle-pw { position: absolute; right: 6px; top: 5px}
.field-icon { position: relative} .field-icon > .i { position: absolute; left: 16px; top: 15px; color: var(--accent); pointer-events: none} .field-icon .input { padding-left: 48px}
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: .9rem; color: var(--text-2); margin: 12px 0; cursor: pointer}
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 1px}
.hint { font-size: .8rem; color: var(--dim); margin-top: 6px}
.file-drop { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border: 1.5px dashed rgba(255, 255, 255, 0.16); border-radius: var(--r-md); cursor: pointer; color: var(--text-2); font-weight: 600; transition: .15s}
.file-drop:hover { background: rgba(247, 181, 0, 0.08); border-color: var(--accent); color: var(--text)}
.file-drop input { display: none}
.secure-note { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border-cyan); background: var(--surface-2); color: var(--text-2); font-size: .88rem; margin-top: 14px}
.secure-note .i { width: 34px; height: 34px; color: var(--accent); filter: none}

/* ---------- 7. People & badges ---------- */
.av { --s: 44px; width: var(--s); height: var(--s); flex: none; position: relative; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(217, 154, 0, 0.36); color: var(--accent); font-weight: 800; font-size: calc(var(--s) * .4); overflow: hidden; text-transform: uppercase}
.av img { width: 100%; height: 100%; object-fit: cover}
.av.ring { padding: 3px; background: var(--grad-ring); border: 0; box-shadow: var(--glow-purple)}
.av.ring > span:first-child { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--surface); object-fit: cover; display: grid; place-items: center; background: var(--surface); color: var(--accent)}
.avatar-wrap { --avatar-size: 44px; --dot-size: 12px; --dot-ring: 2px; position: relative; display: inline-block; width: var(--avatar-size); height: var(--avatar-size); flex-shrink: 0; line-height: 0; vertical-align: middle; overflow: visible}
.avatar-wrap > .av { width: 100%; height: 100%}
.presence-dot { position: absolute; z-index: 2; right: 0; bottom: 0; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: var(--presence-offline); box-shadow: 0 0 0 var(--dot-ring) var(--presence-ring); transform: translate(8%, 8%); transition: background-color .3s ease, transform .2s ease; pointer-events: none}
.presence-dot.is-active { background: var(--presence-active)}
.presence-dot.is-active::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--presence-active-glow); animation: presence-pulse 2s ease-out infinite; z-index: -1}
@keyframes presence-pulse { 0% { transform: scale(1); opacity: .8} 70%, 100% { transform: scale(2.2); opacity: 0} }
.presence-dot.is-hidden { display: none}
.presence-text { margin-left: 4px; color: var(--presence-text); font-size: .75rem; line-height: 1.3; white-space: nowrap}
.presence-text.is-active { color: var(--presence-text-active); font-weight: 600}
.presence-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--presence-text); background: rgba(128, 128, 128, .12)}
.presence-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--presence-offline)}
.presence-pill.is-active { color: var(--presence-text-active); background: rgba(49, 162, 76, .12)}
.presence-pill.is-active::before { background: var(--presence-active)}
.avatar-wrap--xs { --avatar-size: 28px; --dot-size: 8px; --dot-ring: 1.5px}
.avatar-wrap--sm { --avatar-size: 36px; --dot-size: 10px; --dot-ring: 2px}
.avatar-wrap--md { --avatar-size: 44px; --dot-size: 12px; --dot-ring: 2px}
.avatar-wrap--lg { --avatar-size: 56px; --dot-size: 14px; --dot-ring: 2.5px}
.avatar-wrap--xl { --avatar-size: 96px; --dot-size: 20px; --dot-ring: 3px}
@media (prefers-reduced-motion: reduce) { .presence-dot, .presence-dot.is-active::after { animation: none; transition: none} }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; background: rgba(255, 255, 255, 0.06); color: var(--text-2); border: 1px solid var(--border-soft); white-space: nowrap}
.chip.green { background: rgba(46, 229, 157, .1); color: var(--green); border-color: rgba(46, 229, 157, .4)}
.chip.lime { background: var(--grad-primary); color: var(--on-lime); border: 0; box-shadow: var(--glow-purple)}
.chip.violet { background: rgba(247, 181, 0, 0.12); color: var(--accent-600); border-color: rgba(255, 255, 255, 0.16)}
.chip.red { background: rgba(255, 77, 122, .1); color: var(--danger-ink); border-color: rgba(255, 77, 122, .4)}
.chip.warn { background: rgba(255, 181, 71, .1); color: var(--warn); border-color: rgba(255, 181, 71, .4)}
.verified { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--grad-cyan); color: #02101f; vertical-align: -3px; margin-left: 4px; box-shadow: var(--glow-cyan)}
.verified .i { width: 11px; height: 11px; stroke-width: 3.2}
.coin { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--gold-ink)}
.coin::before { content: "$"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); color: #6a3d00; font-size: .68rem; font-weight: 900; box-shadow: 0 0 10px rgba(255, 197, 66, .5)}
.score { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--accent); white-space: nowrap}
.score .i { width: 16px; height: 16px}
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--surface), 0 0 10px rgba(46, 229, 157, .8)}

/* ---------- 8. Feedback ---------- */
.flashes { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 300; width: min(92vw, 460px); display: grid; gap: 8px; pointer-events: none}
.flash { pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 13px 16px; border-radius: var(--r-md); font-weight: 600; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); backdrop-filter: blur(14px); animation: slideIn .3s ease}
.flash.success { border-color: rgba(46, 229, 157, .6)} .flash.success .i { color: var(--green)}
.flash.error { border-color: rgba(255, 77, 122, .6)} .flash.error .i { color: var(--danger)}
.flash.info .i { color: var(--accent)}
.flash button { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer}
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px)} to { opacity: 1; transform: none} }
@keyframes spin { to { transform: rotate(360deg)} }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 20px auto}
.skeleton { background: var(--surface-2); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-md); height: 120px} @keyframes shimmer { to { background-position: -200% 0} }

/* ---------- 9. Stories & feed ---------- */
.tray { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none}
.tray::-webkit-scrollbar { display: none}
.tray-item { display: grid; justify-items: center; gap: 6px; width: 74px; flex: none; background: none; border: 0; color: var(--text-2); font: 600 .74rem var(--font); cursor: pointer; transition: transform .18s}
.tray-item:hover { transform: translateY(-2px)}
.tray-item .avatar-wrap { --avatar-size: 64px} .tray-item.seen .av.ring { background: rgba(148, 166, 203, .35); box-shadow: none}
.tray-item .name { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.tray-add .av { background: rgba(247, 181, 0, 0.09); box-shadow: 0 0 0 2px var(--accent) inset; border: 2px dashed var(--accent)}
.story-viewer { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .96); display: none; align-items: center; justify-content: center}
.story-viewer.open { display: flex}
.story-box { position: relative; width: min(100vw, 440px); height: min(100vh, 780px); background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-purple)}
@media (min-width: 600px) { .story-box { border-radius: var(--r-xl)} }
.story-box img, .story-box video { width: 100%; height: 100%; object-fit: contain}
.story-bars { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 5px; z-index: 3}
.story-bars i { flex: 1; height: 3.5px; border-radius: 9px; background: rgba(255, 255, 255, .28); overflow: hidden}
.story-bars i b { display: block; height: 100%; width: 0; background: var(--grad-cyan)}
.story-head { position: absolute; top: 26px; left: 14px; right: 14px; z-index: 3; display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 6px #000}
.story-cap { position: absolute; bottom: 24px; left: 18px; right: 18px; z-index: 3; text-align: center; font-weight: 600; text-shadow: 0 2px 10px #000}
.story-hit { position: absolute; top: 80px; bottom: 80px; width: 40%; z-index: 2; background: none; border: 0; cursor: pointer}
.story-hit.prev { left: 0} .story-hit.next { right: 0}

.post { padding: 16px 16px 8px}
.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px}
.post-head .who { min-width: 0; flex: 1} .post-head .who b { font-size: .98rem} .post-head .who small { display: block; color: var(--muted); overflow-wrap: anywhere}
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 10px; color: var(--text)}
.post-media { margin: 0 -4px 8px; border-radius: var(--r-lg); overflow: hidden; background: #000; border: 1px solid var(--border-soft)}
.post-media img, .post-media video { width: 100%; max-height: 560px; object-fit: cover}
.post-actions { display: flex; align-items: center; gap: 2px; margin: 0 -8px}
.post-actions .sp { flex: 1}
.menu { position: relative} .menu-list { position: absolute; right: 0; top: 44px; min-width: 190px; z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; display: none; box-shadow: var(--shadow-card), var(--glow-purple)}
.menu.open .menu-list { display: block}
.menu-list button, .menu-list a { display: flex; gap: 10px; align-items: center; width: 100%; padding: 11px 14px; border: 0; background: none; color: var(--text); font: 600 .9rem var(--font); border-radius: var(--r-sm); cursor: pointer; text-align: left}
.menu-list button:hover, .menu-list a:hover { background: rgba(247, 181, 0, 0.12)} .menu-list .danger { color: var(--danger-ink)}
.comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-soft)}
.comment .bubble { background: rgba(255, 255, 255, 0.05); padding: 9px 14px; border-radius: var(--r-md); flex: 1; min-width: 0; overflow-wrap: anywhere}
.composer textarea { background: transparent; border: 0; color: var(--text); width: 100%; font: 500 1.02rem var(--font); resize: none; min-height: 70px; outline: none}
.composer textarea::placeholder { color: var(--dim)}

/* ---------- 10. Profile & status ---------- */
.hero { text-align: center; padding: 26px 18px 20px; position: relative; overflow: hidden}
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110px; background: var(--surface-2); opacity: .7}
.hero > * { position: relative}
.hero .avatar-wrap { margin: 0 auto 12px}
.hero .av { box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px rgba(217, 154, 0, 0.16), var(--glow-purple)}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0}
.stat { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 6px; text-align: center}
.stat b { display: block; font-size: 1.3rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent} .stat small { color: var(--muted); font-weight: 600}
.tabs { display: flex; gap: 6px; padding: 5px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-pill); margin: 14px 0; overflow-x: auto; scrollbar-width: none}
.tabs a, .tabs button { flex: 1; padding: 10px 16px; border-radius: var(--r-pill); text-align: center; color: var(--muted); font: 700 .86rem var(--font); white-space: nowrap; border: 0; background: none; cursor: pointer; transition: .15s}
.tabs a:hover { color: var(--text)} .tabs .active { background: var(--grad-primary); color: var(--on-lime); box-shadow: var(--glow-purple)}
.progress { height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: var(--r-pill); overflow: hidden} .progress b { display: block; height: 100%; background: var(--grad-cyan); border-radius: var(--r-pill); box-shadow: var(--glow-cyan)}
.tier-list { display: grid; gap: 8px} .tier-row { display: flex; justify-content: space-between; padding: 12px 16px; border-radius: var(--r-md); background: var(--card-flat); border: 1px solid var(--border-soft); font-weight: 600}
.tier-row.cur { background: rgba(247, 181, 0, 0.14); border-color: var(--accent); color: var(--text); box-shadow: var(--glow-purple)}
.ach { text-align: center; padding: 14px 8px; border-radius: var(--r-md); background: var(--card-flat); border: 1px solid var(--border-soft)} .ach.earned { border-color: var(--border-cyan); background: var(--surface-2)} .ach:not(.earned) { opacity: .42; filter: grayscale(1)}
.ach .i { width: 30px; height: 30px; color: var(--accent); margin-bottom: 6px} .ach b { display: block; font-size: .84rem} .ach small { color: var(--muted); font-size: .72rem}
.big-num { font-size: 3rem; font-weight: 800; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent}
.card.lime .big-num { background: none; color: var(--text); -webkit-text-fill-color: var(--text)}

/* ---------- 11. Lists, events, discover ---------- */
.person { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft)} .person:last-child { border-bottom: 0}
.event-card { display: grid; gap: 0; overflow: hidden; padding: 0}
.event-cover { aspect-ratio: 16/8; background: var(--surface-2); display: grid; place-items: center; color: var(--accent)}
.event-cover img { width: 100%; height: 100%; object-fit: cover}
.event-body { padding: 16px}
.event-card--compact { grid-template-columns: minmax(104px, 30%) minmax(0, 1fr); margin-bottom: 14px; transition: border-color .18s, transform .18s, box-shadow .18s}
.event-card--compact:hover { transform: translateY(-2px); border-color: var(--border-cyan); box-shadow: var(--shadow-card), 0 0 18px rgba(0, 0, 0, 0.09)}
.event-card--compact .event-cover { aspect-ratio: auto; min-height: 132px; overflow: hidden}
.event-card--compact .event-body { min-width: 0; gap: 12px}
.event-card--compact .grow { min-width: 0}
.event-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem}
.event-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
@media (max-width: 480px) {
  .event-card--compact { grid-template-columns: 92px minmax(0, 1fr)}
  .event-card--compact .event-cover { min-height: 112px}
  .event-card--compact .event-body { padding: 12px; gap: 9px}
  .event-card--compact .date-pill { min-width: 46px; padding: 7px 5px}
  .event-title { font-size: .96rem}
}
.date-pill { display: inline-grid; place-items: center; min-width: 58px; padding: 8px; border-radius: var(--r-md); background: var(--grad-primary); color: var(--on-lime); font-weight: 800; line-height: 1.05; text-align: center; box-shadow: var(--glow-purple)} .date-pill small { font-weight: 700; letter-spacing: .08em; font-size: .66rem; opacity: .9}
.convo { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--border-soft); transition: .18s} .convo:hover { border-color: var(--border-cyan); transform: translateY(-1px); box-shadow: var(--glow-cyan)} .convo + .convo { margin-top: 10px}
.convo .snip { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem} .convo.unread { border-color: var(--border)} .convo.unread .snip { color: var(--text); font-weight: 700}
.opt { width: 100%; text-align: left; padding: 15px 20px; margin-top: 10px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text); font: 600 .98rem var(--font); cursor: pointer; transition: .15s}
.opt:hover:not([disabled]) { border-color: var(--accent); background: rgba(247, 181, 0, 0.08); transform: translateX(3px); box-shadow: var(--glow-cyan)}
.opt.good { background: rgba(46, 229, 157, .16); border-color: var(--green)} .opt.bad { background: rgba(255, 77, 122, .12); border-color: var(--danger)}
.timer { height: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); overflow: hidden} .timer b { display: block; height: 100%; width: 100%; background: var(--grad-cyan); transform-origin: left}
.timer.low b { background: var(--surface-2)}
.lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); background: var(--card-flat); border: 1px solid var(--border-soft); margin-top: 8px}
.lb-row:nth-child(1) { background: var(--surface-2); border-color: rgba(255, 197, 66, .45)}
.lb-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .82rem; background: rgba(247, 181, 0, 0.19); color: var(--text)} .lb-row:nth-child(1) .lb-rank { background: var(--grad-gold); color: #3a2400}

/* ---------- 12. Chat ---------- */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 120px); height: calc(100dvh - 120px); min-height: 360px}
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft)}
.bubbles { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 2px 14px}
.msg { max-width: 82%; padding: 11px 16px; border-radius: 20px 20px 20px 6px; background: var(--surface); border: 1px solid var(--border-soft); overflow-wrap: anywhere; align-self: flex-start}
.msg.mine { align-self: flex-end; background: var(--grad-primary); color: var(--on-lime); border: 0; border-radius: 20px 20px 6px 20px; box-shadow: 0 6px 20px rgba(217, 154, 0, 0.28)}
.msg .meta { display: block; font-size: .68rem; opacity: .7; margin-top: 3px; font-weight: 600} .msg .sender { font-size: .72rem; font-weight: 700; color: var(--accent); display: block; margin-bottom: 2px} .msg.mine .sender { display: none}
.msg img, .msg video { border-radius: var(--r-sm); margin-bottom: 6px; max-height: 260px}
.chat-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: min(100%, 360px); margin: 4px 0 8px}
.chat-image-grid.count-1 { grid-template-columns: minmax(0, 1fr); width: min(100%, 260px)}
.chat-image-thumb { display: block; min-width: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: rgba(0, 0, 0, .2); overflow: hidden; cursor: zoom-in}
.chat-image-thumb img { width: 100%; height: 150px; margin: 0; object-fit: cover}
.chat-image-grid.count-1 .chat-image-thumb img { height: auto; max-height: 260px; object-fit: contain}
.chat-video-attachment { width: min(100%, 380px)}
.chat-video-attachment video { width: 100%; max-height: 320px; background: #000}
.chat-audio-attachment { display: block; width: min(100%, 340px); margin: 6px 0}
.chat-download { display: inline-block; font-size: .78rem; font-weight: 700; text-decoration: underline; margin: 2px 0 8px}
.chat-document-card { display: flex; align-items: center; gap: 8px; max-width: min(100%, 440px); margin: 5px 0; padding: 9px; border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--surface-2)}
.chat-file-type { display: grid; place-items: center; flex: none; width: 42px; height: 46px; border-radius: 9px; background: rgba(247, 181, 0, 0.18); color: var(--accent); font-size: .64rem; font-weight: 900}
.chat-document-info { display: flex; flex-direction: column; flex: 1; min-width: 0}
.chat-document-info b { overflow-wrap: anywhere; font-size: .82rem}
.chat-document-info small { color: var(--muted); font-size: .7rem}
.chat-composer { flex: none}
.chat-form { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border)}
.chat-form:focus-within { border-color: var(--accent); box-shadow: var(--glow-cyan)}
.chat-form input[type=text] { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 500 1rem var(--font); padding: 8px 10px; outline: none}
.chat-attach-btn { flex: none; font-size: 1.3rem; line-height: 1}
.chat-file-previews { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px}
.chat-file-preview { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; max-width: min(78vw, 260px); padding: 7px 30px 7px 7px; border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--surface)}
.chat-file-preview img, .chat-file-preview video { width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 8px; background: #000}
.chat-file-preview-text { display: flex; flex-direction: column; min-width: 0; font-size: .75rem}
.chat-file-preview-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.chat-file-preview-text small { color: var(--muted)}
.chat-file-preview-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255, 77, 122, .22); color: var(--text); cursor: pointer}
.chat-upload-status { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: .78rem; color: var(--text-2)}
.chat-upload-status progress { flex: 1; min-width: 60px; height: 8px; accent-color: var(--accent)}
.chat-wrap.dragging { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: var(--r-md)}
.chat-modal { width: min(96vw, 1100px); max-width: none; height: min(92dvh, 900px); max-height: none; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--navy-950); color: var(--text); box-shadow: var(--shadow-card)}
.chat-modal::backdrop { background: rgba(0, 0, 0, .86)}
.chat-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 8px}
.chat-lightbox-image-wrap { display: grid; place-items: center; width: 100%; height: calc(100% - 54px); overflow: auto}
.chat-lightbox-image-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; transition: transform .12s}
.chat-pdf-modal iframe { display: block; width: 100%; height: calc(100% - 54px); border: 0; border-radius: var(--r-sm); background: #fff}
.send { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; background: var(--grad-primary); color: var(--on-lime); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-btn); transition: transform .15s} .send:hover { transform: scale(1.06)}
@media (max-width: 520px) {
  .chat-wrap { height: calc(100dvh - var(--nav-h) - 48px); min-height: 300px}
  .msg { max-width: 94%; padding: 10px 12px}
  .chat-image-grid.count-1 { width: min(100%, 220px)}
  .chat-image-thumb img { height: 118px}
  .chat-document-card { gap: 5px; padding: 7px}
  .chat-document-card .btn { min-height: 34px; padding: 0 9px; font-size: .72rem}
  .chat-document-info b { font-size: .75rem}
  .chat-upload-status { flex-wrap: wrap}
  .chat-upload-status progress { flex-basis: 100%; order: 2}
  .chat-modal { width: 100vw; height: 100dvh; border-radius: 0; padding: 8px}
}

/* ---------- 13. Reels ---------- */
.reel-wrap { position: relative; width: min(100%, 440px); margin: 0 auto}
.reel-wrap > .reels { width: 100%; margin: 0}
.reels { height: min(78vh, 880px); height: min(78dvh, 880px); min-height: 420px; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; border-radius: var(--r-xl); margin: 0 auto; width: min(100%, 440px); scrollbar-width: none; background: #000; border: 1px solid var(--border); box-shadow: var(--glow-purple)}
.reels::-webkit-scrollbar { display: none}
.reel { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden}
.reel video { width: 100%; height: 100%; object-fit: cover}
.reel .shade { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, rgba(0, 0, 0, .92)); pointer-events: none}
/* Each reel measures itself (container query units) so the whole action column (like, comments, views, share, save, more)
   always fits, from a 420px-tall phone window up to a tall desktop monitor. */
.reel { container-type: size; container-name: reel}
.reel .info { position: absolute; left: 16px; right: 84px; bottom: 18px; z-index: 2; max-height: 46%; overflow: hidden}
.reel .info > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere}
.reel .side { position: absolute; right: 8px; bottom: 18px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; gap: clamp(4px, 1.4cqh, 12px)}
.reel .side .act { flex-direction: column; justify-content: center; gap: 2px; min-width: 52px; padding: 4px 6px; line-height: 1.1; color: #fff; font-size: .74rem; text-shadow: 0 1px 6px #000}
.reel .side .act:hover { background: rgba(255, 255, 255, .12)}
.reel .side .act .i { width: 28px; height: 28px; width: clamp(24px, 4.6cqh, 30px); height: clamp(24px, 4.6cqh, 30px); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6))}
.reel .side .reel-view-count { min-width: 52px; white-space: nowrap; cursor: default}
.reel .side .reel-view-count:hover { background: transparent}
.reel .side .act span { min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums}
.post-actions .reel-view-count { white-space: nowrap; cursor: default}
.post-actions .reel-view-count span { min-width: 3.2em; font-variant-numeric: tabular-nums}
.act.saved { color: var(--accent)} .act.saved .i { fill: currentColor}
.reel .side .act.saved { color: var(--cyan)}
.reel-options { z-index: 4}
.reel-options .menu-list { top: auto; right: 0; bottom: 46px}
.reel-options .menu-list form { margin: 0}
.reel-options .menu-list button { white-space: nowrap; text-shadow: none}
.reel .mute { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(0, 0, 0, .6); color: #fff}
.reel .tap { position: absolute; inset: 0; display: grid; place-items: center; background: none; border: 0; z-index: 1; cursor: pointer}
.reel-play-hint { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .62); opacity: 0; transform: scale(.85); transition: opacity .18s, transform .18s}
.reel:not(.playing) .reel-play-hint { opacity: 1; transform: scale(1)}
.reel-play-hint .i { width: 30px; height: 30px; fill: #fff}
.reel-feed-status { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; color: var(--text-2); background: var(--navy-900); font-size: .88rem; scroll-snap-align: none}
.reel-feed-status[hidden] { display: none}
.reel-feed-status .i { color: var(--cyan); animation: reelspin .9s linear infinite}
.reel-feed-status [data-reels-retry] { margin-left: 8px}
.reel-loading-banner { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto 10px; padding: 7px 14px; border: 1px solid var(--border-cyan); border-radius: var(--r-pill); background: rgba(7, 19, 41, .92); color: var(--text-2); font-size: .82rem; font-weight: 700; box-shadow: var(--glow-cyan)}
.reel-loading-banner[hidden] { display: none}
.reel-loading-banner .i { width: 17px; height: 17px; color: var(--cyan); animation: reelspin .9s linear infinite}
.reel-feed-sentinel { height: 1px; scroll-snap-align: none}
.reel-empty { height: 100%}
.sponsored-reel { isolation: isolate; background: #080f24}
.sponsored-reel-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover}
.sponsored-reel-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .92))}
.sponsored-reel-copy { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 34px; display: grid; justify-items: start; gap: 10px; text-shadow: 0 2px 12px rgba(0, 0, 0, .8)}
.sponsored-reel-copy h2 { margin: 0; font-size: clamp(1.5rem, 7vw, 2.2rem)}
.sponsored-reel-copy p { margin: 0; color: rgba(255,255,255,.92)}
.sponsored-post { display: grid; gap: 10px; border-color: rgba(255, 197, 66, .35)}
.sponsored-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--gold-ink); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase}
.sponsored-post-owner { display: grid; line-height: 1.25}
.sponsored-post-owner small { color: var(--muted)}
.sponsored-post-image { width: 100%; max-height: 420px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md)}
.sponsored-post-copy h3 { margin: 0 0 4px}
.sponsored-post-copy p { margin: 0; color: var(--text-2); white-space: pre-line}
.boost-ad-preview { display: grid; grid-template-columns: minmax(90px, 150px) 1fr; gap: 12px; align-items: center; margin: 12px 0}
.boost-ad-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md)}
.boost-ad-preview h3 { margin: 8px 0 2px}
.boost-ad-preview p { margin: 0; white-space: pre-line}
@media (max-width: 700px) {
  .reels { height: max(420px, calc(100dvh - 270px)); min-height: 0; border-radius: var(--r-lg)}
}

/* ---------- 14. Games: CIRQ FLIP collectible cards, hub, trivia ---------- */
.game-hero { position: relative; text-align: center; padding: 8px 0 4px}
.neon-title { font-size: clamp(2rem, 8.5vw, 3.6rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; margin: 0; background: var(--surface-2); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none}
.neon-title small { display: block; font-size: .32em; letter-spacing: .24em; color: var(--accent); -webkit-text-fill-color: var(--accent); margin-top: 10px; font-weight: 700}
.reward-badge { display: inline-flex; align-items: center; gap: 12px; margin: 14px auto 0; padding: 10px 22px 10px 12px; border-radius: var(--r-lg); border: 2px solid var(--accent); background: var(--surface-2); box-shadow: var(--glow-purple), inset 0 0 20px rgba(217, 154, 0, 0.20); text-align: left; transform: rotate(-2deg)}
.reward-badge .coin-big { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: #6a3d00; font-size: 1.7rem; font-weight: 900; box-shadow: var(--glow-gold)}
.reward-badge b { display: block; font-size: 2rem; line-height: 1; color: var(--text); text-shadow: 0 0 14px rgba(217, 154, 0, 0.50)} .reward-badge small { display: block; font-weight: 700; letter-spacing: .08em; color: var(--text-2); font-size: .7rem}
.clues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0}
.clue { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--surface); display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--text-2)}
.clue .i { color: var(--accent); width: 22px; height: 22px; margin-top: 1px; filter: none} .clue b { display: block; color: var(--accent); font-size: .72rem; letter-spacing: .1em; margin-bottom: 2px}
.stage { display: grid; justify-items: center; gap: 10px; margin: 8px 0 4px}
.stage-label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 20px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-weight: 800; letter-spacing: .12em; font-size: .8rem; box-shadow: var(--glow-purple)}
.deck-title { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; font-weight: 800; letter-spacing: .1em; font-size: .9rem; text-transform: uppercase; justify-content: center}
.deck-title::before, .deck-title::after { content: ""; flex: 1; height: 2px; background: var(--surface-2)} .deck-title::after { transform: scaleX(-1)}
.hearts { display: flex; gap: 6px} .hearts i { width: 14px; height: 20px; border-radius: 4px; background: var(--grad-primary); box-shadow: var(--glow-purple); transform: skewX(-8deg)} .hearts i.off { background: rgba(255, 255, 255, .12); box-shadow: none}

/* the collectible player card. Shape + glow come from the rarity colours --c1/--c2 */
.deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: 14px 12px; max-width: 1080px; margin-inline: auto; perspective: 1100px}
.pcard { --c1: #f7b500; --c2: #2a5bff; --ink: #fff; position: relative; display: block; width: 100%; aspect-ratio: 5/7.2; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1100px; transition: transform .25s var(--ease), filter .2s; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); font-family: var(--font); color: #fff; text-align: left}
/* the flip happens on an inner layer: a CSS filter on the same element would flatten the 3D transform */
.pcard .flipper { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--ease)}
.pcard.flipped .flipper { transform: rotateY(180deg)}
.pcard:hover:not(.flipped):not([disabled]) { transform: translateY(-6px) scale(1.03); filter: drop-shadow(0 10px 22px var(--c1))}
.pcard.flipped { filter: drop-shadow(0 8px 20px var(--c1))}
.pcard[disabled]:not(.flipped) { cursor: default; opacity: .8}
.pcard:focus-visible { outline: none; filter: none}
.pcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  clip-path: polygon(0 5%, 10% 0, 90% 0, 100% 5%, 100% 95%, 90% 100%, 10% 100%, 0 95%); background: var(--surface-2); padding: 2px}
.pcard .face > .in { position: absolute; inset: 2px; clip-path: polygon(0 5%, 10% 0, 90% 0, 100% 5%, 100% 95%, 90% 100%, 10% 100%, 0 95%); background: var(--surface-2); display: grid}
/* card back (face down) */
.pcard .front .in { place-items: center; background: var(--surface-2)}
.pcard .front img { width: 50%; mix-blend-mode: screen; border-radius: 18px; filter: none}
.pcard .front .num { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; font-weight: 800; font-size: .82rem; letter-spacing: .2em; color: var(--cyan)}
.pcard .front .shine, .pcard .back .shine { position: absolute; inset: 0; background: var(--surface-2); background-size: 250% 100%; animation: sheen 5s ease-in-out infinite; pointer-events: none}
@keyframes sheen { 0% { background-position: 150% 0} 55%, 100% { background-position: -80% 0} }
/* card front (the student) */
.pcard .back { transform: rotateY(180deg)}
.pcard .back .in { display: block; padding: 0; background: #080f24}
.pcard .rating { position: absolute; top: 8%; left: 9%; z-index: 3; min-width: 2.35em; line-height: .92; text-shadow: 0 2px 10px #000}
.pcard .rating b { display: block; font-size: clamp(1.15rem, 5vw, 1.8rem); font-weight: 900; color: var(--c1)} .pcard .rating small { display: block; font-size: .55rem; font-weight: 800; letter-spacing: .08em; color: #fff; opacity: .92}
.pcard .crown { position: absolute; top: 8%; right: 9%; z-index: 3; color: var(--gold); filter: none} .pcard .crown .i { width: 20px; height: 20px}
.pcard .portrait { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; font-size: 3rem; font-weight: 900; color: var(--c1); background: var(--surface-2); text-transform: uppercase}
.pcard .portrait::after { content: ""; position: absolute; inset: 30% 0 0; background: var(--surface-2); pointer-events: none}
.pcard .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%}
.pcard .nameplate { position: absolute; z-index: 2; inset: auto 0 0; display: grid; justify-items: center; gap: 2px; padding: 24% 8% 10%; text-align: center; background: var(--surface-2)}
.pcard .nameplate b { display: block; width: 100%; font-size: clamp(.7rem, 2.8vw, .94rem); font-weight: 900; letter-spacing: .025em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.pcard .nameplate small { display: block; max-width: 100%; font-size: clamp(.52rem, 1.8vw, .65rem); line-height: 1.2; color: rgba(255, 255, 255, .76); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.pcard .tierbar { display: block; max-width: 100%; margin-top: 3px; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-pill); font-size: clamp(.48rem, 1.65vw, .58rem); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: var(--surface-2); color: #07101f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
/* rarity by CIRQ STATUS tier (real follower data) */
.pcard.r0 { --c1: #f7b500; --c2: #2a5bff} .pcard.r1 { --c1: #2ee59d; --c2: #00a58e} .pcard.r2 { --c1: #ffd04d; --c2: #6d28d9}
.pcard.r3 { --c1: #ff4fd8; --c2: #f7b500} .pcard.r4, .pcard.r5, .pcard.r6 { --c1: #ffc542; --c2: #e0820a}
/* the developer: unmistakable once revealed */
.pcard.dev { --c1: #ffc542; --c2: #f7b500; filter: none}
.pcard.dev .face { background: var(--surface-2); animation: spinborder 4s linear infinite}
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @keyframes spinborder { to { --spin: 360deg} }
.pcard.dev .back .in { background: #100d25}
.pcard.dev .rating b { color: var(--gold); font-size: clamp(1.1rem, 5vw, 1.6rem)}
.pcard.win { animation: winpop .9s var(--ease)} @keyframes winpop { 0% { transform: scale(.92)} 50% { transform: scale(1.1)} 100% { transform: scale(1)} }
.pcard.reveal { animation: none; filter: none}
.pcard.miss .back .in { filter: saturate(.7) brightness(.85)}
.pcard.selected { filter: none; transform: translateY(-4px)}
.dev-avatar-preview { width: 84px; height: 84px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--card-flat); border: 2px solid var(--gold); color: var(--gold); font-size: 2rem; font-weight: 800}
.dev-avatar-preview img { width: 100%; height: 100%; object-fit: cover}
/* the large mystery card in the middle of the stage */
.mystery { width: min(62vw, 230px)}
.mystery .in { place-items: center; background: var(--surface-2)}
.mystery .sil { width: 66%; color: #05091d; filter: none}
.mystery .sil .q { fill: #fff; stroke: none; font: 800 38px var(--font)}
.mystery .label { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; font-weight: 800; letter-spacing: .16em; font-size: .7rem; color: var(--cyan)}
.mystery { aspect-ratio: 5/7.2; position: relative; display: block; filter: none} .mystery .face { backface-visibility: visible}
.reward-pop { text-align: center; padding: 22px 18px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--glow-purple); animation: slideIn .5s ease}
.reward-pop .amount { font-size: 3.2rem; font-weight: 800; line-height: 1; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none}
.game-bar { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px}
.game-bar .cell { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--surface)}
.game-bar .cell .i { width: 30px; height: 30px; color: var(--gold-ink); filter: none}
@media (min-width: 700px) { .clues { grid-template-columns: repeat(4, 1fr)} .game-bar { grid-template-columns: 1fr 1fr} }
.game-card { position: relative; overflow: hidden; display: block; padding: 18px; border-radius: var(--r-lg); border: 1.5px solid var(--border-cyan); background: var(--surface-2); box-shadow: var(--shadow-card), inset 0 0 30px rgba(217, 154, 0, 0.11); transition: transform .22s var(--ease), box-shadow .22s, border-color .22s}
.game-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; top: -60px; background: var(--surface-2); pointer-events: none}
.game-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-card), var(--glow-purple)}
.game-card .icon-tile { width: 54px; height: 54px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--on-lime); background: var(--grad-primary); box-shadow: var(--glow-purple); flex: none}
.game-card + .game-card { margin-top: 14px}

/* ---------- 15. Admin ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border-soft)}
table { width: 100%; border-collapse: collapse; font-size: .9rem} th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top} th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; background: var(--surface-2)} tr:last-child td { border-bottom: 0}
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px} .admin-nav a { padding: 8px 15px; border-radius: var(--r-pill); background: var(--card-flat); border: 1px solid var(--border-soft); font-weight: 600; font-size: .82rem; color: var(--muted); transition: .15s} .admin-nav a:hover { color: var(--text); border-color: var(--border)} .admin-nav a.active { background: var(--grad-primary); color: var(--on-lime); border-color: transparent; box-shadow: var(--glow-purple)}
.kpi { padding: 16px; border-radius: var(--r-md); background: var(--card-flat); border: 1px solid var(--border-soft); transition: .18s; display: block} a.kpi:hover { border-color: var(--border-cyan); box-shadow: var(--glow-cyan)} .kpi b { font-size: 1.8rem; display: block; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent} .kpi small { color: var(--muted); font-weight: 600}
form.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap}
form.inline .input { min-height: 38px; font-size: .84rem; padding: 0 14px; width: 150px; border-radius: var(--r-pill)}

/* ---------- 16. Dialogs ---------- */
dialog { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px; width: min(92vw, 440px); box-shadow: 0 30px 80px rgba(0, 0, 0, .75), var(--glow-purple)}
dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(5px)}
.reel-create-dialog { width: min(94vw, 760px); max-height: 92dvh; overflow-y: auto}
.reel-create-dialog .rc { margin: 0}
.reel-empty { min-height: 100%; display: grid; align-content: center; justify-items: center}
.sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px}
.sheet-grid a, .sheet-grid label { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 18px 10px; border-radius: var(--r-lg); background: var(--card-flat); border: 1px solid var(--border-soft); font-weight: 700; cursor: pointer; color: var(--text); transition: .18s; font-size: .92rem}
.sheet-grid a:hover, .sheet-grid label:hover { border-color: var(--accent); background: rgba(247, 181, 0, 0.11); transform: translateY(-2px); box-shadow: var(--glow-purple)} .sheet-grid .i { color: var(--accent); width: 28px; height: 28px}

/* ---------- 17. Auth & landing ---------- */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 22px 16px 40px}
.auth-split { width: min(100%, 980px); display: grid; gap: 0; align-items: stretch}
.auth-art { display: none; position: relative; border-radius: var(--r-xl) 0 0 var(--r-xl); overflow: hidden; border: 1px solid var(--border); border-right: 0; background: var(--navy-900)}
.auth-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%}
.auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .85)), linear-gradient(90deg, transparent 60%, rgba(0, 0, 0, .8))}
.auth-art .tag { position: absolute; left: 22px; bottom: 22px; z-index: 2; font-weight: 700; letter-spacing: .08em; font-size: .78rem; color: var(--text-2)}
@media (min-width: 900px) { .auth-split { grid-template-columns: 1fr 1.1fr} .auth-art { display: block} .auth-split .auth-card { border-radius: 0 var(--r-xl) var(--r-xl) 0} }
.auth-card { width: min(100%, 460px); margin: 0 auto} .auth-split .auth-card { width: 100%; max-width: none}
.auth-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px} .auth-logo img { width: 88px; height: 88px; border-radius: 26px; box-shadow: var(--glow-purple), 0 14px 40px rgba(217, 154, 0, 0.36)}
.landing { min-height: 100vh; position: relative; overflow: hidden; padding: 20px 20px 40px}
.landing .orb { position: absolute; width: 640px; height: 640px; border-radius: 50%; right: -200px; top: -160px; background: var(--surface-2); filter: blur(8px); animation: float 9s ease-in-out infinite; pointer-events: none}
@keyframes float { 50% { transform: translateY(26px) scale(1.04)} }
.landing .inner { position: relative; width: min(100%, 1100px); margin: 0 auto}
.land-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 18px} .land-nav img { height: 48px; width: auto; border-radius: 12px}
.land-hero { display: grid; gap: 22px; align-items: center}
.land-hero h1 { font-size: clamp(2.5rem, 9.5vw, 4.4rem); line-height: 1; margin-bottom: 14px}
.land-hero h1 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent}
.land-art { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--glow-purple)}
.land-art img { width: 100%; aspect-ratio: 5/4; object-fit: cover; object-position: 50% 30%}
.land-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .75))}
@media (min-width: 900px) { .land-hero { grid-template-columns: 1.05fr 1fr; gap: 40px} .land-art img { aspect-ratio: 1.2} }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0} .features div { padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border-soft); font-weight: 600; font-size: .9rem} .features .i { color: var(--accent); margin-bottom: 6px; display: block}
@media (min-width: 700px) { .features { grid-template-columns: repeat(4, 1fr)} }
.land-cards { display: grid; gap: 14px; margin-top: 28px} @media (min-width: 800px) { .land-cards { grid-template-columns: repeat(3, 1fr)} }
.tagline { text-align: center; margin-top: 34px; font-weight: 800; letter-spacing: .04em} .tagline span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent}
.errpage { text-align: center; padding: 14vh 20px} .errpage .code { font-size: 6rem; font-weight: 800; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none}
.legal h2 { margin-top: 1.4em} .legal li { margin: .3em 0; color: var(--text-2)}

/* ---------- 18. Utilities & responsive ---------- */
@media (max-width: 380px) { .deck { gap: 9px 7px} .pill a { min-width: 46px; padding: 0 5px} .main { padding-inline: 12px} .clues { grid-template-columns: 1fr} }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important} }

/* ---------- 13b. Reels: Instagram-style playback polish ---------- */
.reel video { background: #000; transition: opacity .25s} .reel video.failed { opacity: .25}
.reel-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255, 255, 255, .22); pointer-events: none}
.reel-progress i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0)}
.reel-spin { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 2; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; opacity: 0; pointer-events: none; animation: reelspin .8s linear infinite; transition: opacity .2s}
.reel.buffering .reel-spin { opacity: 1}
@keyframes reelspin { to { transform: rotate(360deg)} }
.reel-flash { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; z-index: 2; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; pointer-events: none}
.reel-flash .i { width: 40px; height: 40px; fill: #fff; stroke: #fff}
.reel-flash.go { animation: reelflash .6s ease-out}
@keyframes reelflash { 0% { opacity: 0; transform: scale(.7)} 25% { opacity: 1; transform: scale(1)} 100% { opacity: 0; transform: scale(1.15)} }
.reel-burst { position: absolute; z-index: 4; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; color: #ff3b6b; animation: reelburst .8s ease-out forwards}
.reel-burst .i { width: 96px; height: 96px; fill: #ff3b6b; stroke: #ff3b6b; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5))}
@keyframes reelburst { 0% { opacity: 0; transform: scale(.4) rotate(-12deg)} 20% { opacity: 1; transform: scale(1.15) rotate(6deg)} 70% { opacity: 1; transform: scale(1) rotate(0)} 100% { opacity: 0; transform: scale(1.3) translateY(-30px)} }
.reel-retry { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; padding: 12px 18px; border: 0; border-radius: var(--r-pill); background: rgba(0, 0, 0, .75); color: #fff; font: 700 .9rem var(--font); cursor: pointer}
.reel-retry[hidden] { display: none}

/* ---------- 13c. Reel composer ---------- */
.rc-pick { min-height: 190px; flex-direction: column; justify-content: center; text-align: center; gap: 10px}
.rc-pick .i { width: 40px; height: 40px; color: var(--accent)}
.rc-pick[hidden], .rc-edit[hidden], .rc-overlay[hidden], .rc-nopreview[hidden], .rc-error[hidden] { display: none}
.rc-edit { display: grid; gap: 18px; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start}
@media (max-width: 560px) { .rc-edit { grid-template-columns: 1fr} .rc-frame { max-width: 240px; margin: 0 auto} }
.rc-frame { position: relative; aspect-ratio: 9 / 16; width: 100%; border-radius: var(--r-md); overflow: hidden; background: #000; border: 1px solid var(--border); box-shadow: var(--glow-purple)}
.rc-frame video { width: 100%; height: 100%; object-fit: cover; cursor: pointer}
.rc-nopreview { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; text-align: center; font-size: .8rem; color: var(--text-2); background: #050b1a}
.rc-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px)}
.rc-overlay p { margin: 0; font-weight: 700}
.rc-ring { position: relative; width: 84px; height: 84px} .rc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg)}
.rc-ring circle { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 3.5}
.rc-ring circle.v { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .2s linear}
.rc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1rem}
.rc-meta { display: grid; gap: 2px; margin-bottom: 8px} .rc-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.rc-count { text-align: right; margin-top: 4px}
.rc-error { margin: 8px 0; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255, 70, 110, .14); border: 1px solid rgba(255, 70, 110, .5); color: var(--danger-ink); font-weight: 600; font-size: .9rem}

/* ---------- 13d. Suggested for you ---------- */
.post.suggested { border-color: rgba(255, 255, 255, 0.16)}
.sugg-tag { display: flex; align-items: center; gap: 10px; margin: -4px -4px 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2)}
.sugg-tag .i { color: var(--accent); flex: none}
.sugg-tag span { flex: 1; min-width: 0; display: grid; line-height: 1.25}
.sugg-tag small { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.post.gone, .reel.gone, .saved-tile.gone { opacity: 0; transform: scale(.97); transition: opacity .3s, transform .3s}

/* ---------- 19. Story likes / replies / insights, follow requests, private accounts ---------- */
.story-foot { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 4; display: flex; align-items: center; gap: 10px; padding-bottom: env(safe-area-inset-bottom)}
.story-cap { bottom: 78px}
.story-reply { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 16px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .55); border: 1.5px solid rgba(255, 255, 255, .55); backdrop-filter: blur(8px)}
.story-reply:focus-within { border-color: #fff; background: rgba(0, 0, 0, .78)}
.story-reply input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: 500 .95rem var(--font); padding: 9px 0}
.story-reply input::placeholder { color: rgba(255, 255, 255, .75)}
.story-reply .icon-btn { color: #fff}
.story-like { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: transform .15s var(--ease)}
.story-like .i { width: 26px; height: 26px}
.story-like:active { transform: scale(.88)}
.story-like.on { color: #ff4fa0} .story-like.on .i { fill: #ff4fa0; filter: none; animation: pop .35s var(--ease)}
@keyframes pop { 0% { transform: scale(.6)} 60% { transform: scale(1.3)} 100% { transform: scale(1)} }
.story-stats { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: var(--r-pill); background: rgba(0, 0, 0, .65); color: #fff; font: 700 .9rem var(--font); cursor: pointer; backdrop-filter: blur(8px)}
.story-stats .i { width: 18px; height: 18px} .story-stats b + .i { margin-left: 8px}
.story-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 68%; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 20px; background: var(--navy-900); border-top: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .6); animation: sheetUp .22s var(--ease)}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0} }
.story-sheet .sheet-list { overflow-y: auto; flex: 1}
.story-sheet .tabs.mini { margin: 0} .story-sheet .tabs.mini button.active { background: var(--grad-primary); color: #fff; box-shadow: var(--glow-purple)}
.story-sheet .person { color: #fff} .liked-heart { color: #ff4fa0; display: grid} .liked-heart .i { width: 20px; height: 20px; fill: #ff4fa0}

.btn.following[data-state="requested"] { color: var(--muted)}
.check.switch { align-items: center; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-soft)}
.person-link { padding: 12px 4px; margin-top: 6px; border-top: 1px solid var(--border-soft); color: var(--text-2); font-weight: 700}
.person-link .i { vertical-align: -3px; margin-right: 6px}
.person-link span:last-child .i { transform: rotate(180deg); margin: 0}

.req-row { border-color: var(--border); margin-bottom: 10px}
.av-stack { display: inline-flex; flex: none} .av-stack .avatar-wrap { margin-left: -14px} .av-stack .avatar-wrap:first-child { margin-left: 0} .av-stack .av { border: 2px solid var(--surface)}

.msg .story-ref { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; padding: 6px 10px 6px 6px; border-radius: var(--r-sm); background: var(--surface-2); border-left: 3px solid var(--accent); font-size: .78rem; font-weight: 700}
.msg.mine .story-ref { background: rgba(255, 255, 255, 0.16); border-left-color: var(--surface)}
.msg .story-ref img { width: 34px; height: 48px; margin: 0; border-radius: 8px; object-fit: cover; max-height: none}
.msg .story-ref .ph { width: 34px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, 0.1)}
.msg .story-ref small { font-weight: 500; opacity: .75}
.chat-locked { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.045); border: 1px dashed var(--border-soft); color: var(--muted); font-size: .9rem}
.chat-locked .i { flex: none; color: var(--accent)}

/* =====================================================================================
   v2: school logos, music, camera, story comments, comment likes
   ===================================================================================== */

/* ---------- school logos (fall back to the cap icon) ---------- */
.school-logo { --s: 48px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 24%; background: var(--surface); border: 2px solid rgba(255, 255, 255, 0.16); box-shadow: 0 0 14px rgba(217, 154, 0, 0.28)}
.school-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7%; display: block}
.school-logo > .i { width: 55%; height: 55%; color: var(--accent-600)}
.school-logo.center { display: grid; margin: 0 auto 12px}
.hero .school-logo.center { box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px rgba(217, 154, 0, 0.16), var(--glow-purple)}
.school-row .school-logo { box-shadow: none}

/* ---------- file pickers rendered as buttons ---------- */
button.file-drop { background: none; font: inherit; color: var(--text-2)}
.rc-pick-group { display: grid; gap: 10px}
.rc-pick-group[hidden] { display: none}
.rc-cam { justify-content: center}
.story-preview { border-radius: var(--r-lg); overflow: hidden; background: #000; border: 1px solid var(--border-soft); max-height: 300px; display: grid; place-items: center}
.story-preview[hidden] { display: none}
.story-preview img, .story-preview video { width: 100%; max-height: 300px; object-fit: contain; display: block}
#story-sheet { width: min(94vw, 460px); max-height: 92vh; overflow-y: auto}

/* ---------- music on posts ---------- */
.music { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; padding: 10px 14px; border-radius: var(--r-md); background: rgba(247, 181, 0, 0.09); border: 1px solid var(--border)}
.music-play { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--grad-primary); color: var(--on-lime); cursor: pointer; box-shadow: var(--shadow-btn)}
.music-play .i { width: 18px; height: 18px; fill: currentColor}
.music-meta { min-width: 0; flex: 1; display: grid; gap: 2px}
.music-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.music-meta small { color: var(--muted); display: inline-flex; align-items: center; gap: 5px}
.music-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; flex: none}
.music-bars i { width: 3px; height: 30%; border-radius: 2px; background: var(--accent); opacity: .55}
.music.playing .music-bars i { opacity: 1; animation: eq .9s ease-in-out infinite}
.music.playing .music-bars i:nth-child(2) { animation-delay: .15s} .music.playing .music-bars i:nth-child(3) { animation-delay: .3s} .music.playing .music-bars i:nth-child(4) { animation-delay: .45s}
.music.playing .music-meta small { color: var(--accent)}
@keyframes eq { 0%, 100% { height: 25%} 50% { height: 100%} }

/* ---------- live camera ---------- */
dialog.cam { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; color: #fff; overflow: hidden; box-shadow: none}
dialog.cam[open] { display: block}
dialog.cam [hidden] { display: none !important}
.cam-view, .cam-review, .cam-review > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000}
.cam-review > * { object-fit: contain}
.cam-view.mirror { transform: scaleX(-1)}
.cam-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; background: linear-gradient(rgba(0, 0, 0, .55), transparent)}
.cam-ic { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; backdrop-filter: blur(8px)}
.cam-ic .i { width: 24px; height: 24px}
.cam-timer { padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255, 77, 122, .9); font-weight: 800; font-variant-numeric: tabular-nums}
.cam-msg { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(76px + env(safe-area-inset-top)); margin: 0; padding: 8px 14px; border-radius: var(--r-md); background: rgba(0, 0, 0, .75); font-size: .86rem; text-align: center}
.cam-bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: 14px; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .65))}
.cam-modes { display: flex; justify-content: center; gap: 6px}
.cam-modes button { padding: 7px 18px; border: 0; border-radius: var(--r-pill); background: rgba(0, 0, 0, .55); color: #fff; font: 700 .88rem var(--font); cursor: pointer}
.cam-modes button.on { background: #fff; color: #000}
.cam-live { display: flex; align-items: center; justify-content: space-between}
.cam-spacer { width: 60px}
.cam-shutter { width: 76px; height: 76px; display: grid; place-items: center; padding: 0; border: 4px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .15s var(--ease)}
.cam-shutter i { width: 58px; height: 58px; border-radius: 50%; background: #fff; transition: .2s var(--ease)}
.cam-shutter.video i { background: #ff3b5c}
.cam-shutter.rec i { width: 30px; height: 30px; border-radius: 8px}
.cam-shutter:active { transform: scale(.92)}
.cam-confirm { display: flex; gap: 12px; justify-content: center}
.cam-confirm .btn { flex: 1; max-width: 220px}

/* ---------- story: music chip, comments button, comments sheet ---------- */
.story-music { position: absolute; z-index: 3; top: 74px; left: 14px; max-width: calc(100% - 28px); display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border: 0; border-radius: var(--r-pill); background: rgba(0, 0, 0, .6); color: #fff; font: 700 .8rem var(--font); cursor: pointer; backdrop-filter: blur(8px)}
.story-music[hidden] { display: none}
.story-music span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.story-music.off { opacity: .65; text-decoration: line-through}
.story-cbtn { width: auto; min-width: 46px; gap: 6px; padding: 0 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font: 700 .85rem var(--font)}
.story-cbtn .i { width: 22px; height: 22px}
.scomment { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-soft)}
.scomment:first-child { border-top: 0}
.scomment .scbody { overflow-wrap: anywhere; color: var(--text-2)}
.scl { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font: 700 .8rem var(--font); cursor: pointer}
.scl:hover { color: #fff}
.scl.on { color: #ff4fa0} .scl.on .i { fill: #ff4fa0}
.story-sheet .cform { margin-top: 4px}

/* ---------- likes on post comments ---------- */
.comment .clike { flex: none; align-self: center; padding: 6px 8px; gap: 4px; font-size: .8rem}
.comment .clike .i { width: 18px; height: 18px}


/* ---------- 15. Comment panel (side / sheet), saved grid ---------- */
.cpanel { position: fixed; z-index: 90; display: flex; flex-direction: column; min-height: 0; overflow: hidden; outline: none;
  background: var(--surface); backdrop-filter: blur(18px); border: 1px solid var(--border); box-shadow: var(--shadow-card), var(--glow-purple);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease), opacity .22s ease, visibility 0s linear .3s}
.cpanel.open[data-mode] { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s}
.cpanel.dragging { transition: none}
.cpanel[data-mode="sheet"] { left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(100%, 560px); height: min(70vh, 640px); height: min(70dvh, 640px);
  border-radius: 22px 22px 0 0; border-bottom: 0; transform: translateY(105%); padding-bottom: env(safe-area-inset-bottom)}
.cpanel[data-mode="side"] { top: 16px; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); border-radius: var(--r-lg); transform: translateX(28px)}
.cpanel[data-mode="dock"] { position: absolute; top: 0; bottom: 0; left: calc(100% + 12px); width: var(--cp-w, 340px); border-radius: var(--r-lg); transform: translateX(-18px)}
.cpanel-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(0, 0, 0, .7); opacity: 0; transition: opacity .25s ease}
.cpanel-backdrop.show { opacity: 1}
.cpanel-backdrop[hidden] { display: none}
html.cpanel-lock, html.cpanel-lock body { overflow: hidden; overscroll-behavior: none}

.cpanel-grip { display: none; flex: none; padding: 10px 0 0; touch-action: none; cursor: grab}
.cpanel-grip i { display: block; width: 42px; height: 4px; margin: 0 auto; border-radius: 4px; background: rgba(255, 255, 255, .28)}
.cpanel[data-mode="sheet"] .cpanel-grip { display: block}
.cpanel[data-mode="sheet"] .cpanel-head { touch-action: none}
.cpanel-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 18px; border-bottom: 1px solid var(--border-soft)}
.cpanel-head h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 1.05rem}
.cpanel-count { color: var(--muted); font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums}
.cpanel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 10px; scrollbar-width: thin; scrollbar-color: rgba(247, 181, 0, 0.30) transparent}
.cpanel-sentinel { height: 1px}

.crow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-radius: 12px; transition: opacity .22s, transform .22s}
.crow.fresh { animation: crowfresh 1.6s ease-out}
@keyframes crowfresh { from { background: rgba(247, 181, 0, 0.19)} to { background: transparent} }
.crow.pending { opacity: .55}
.crow.removing { opacity: .5; pointer-events: none}
.crow.gone { opacity: 0; transform: translateX(12px)}
.crow-av { flex: none; line-height: 0}
.crow-main { flex: 1; min-width: 0}
.crow-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; line-height: 1.3}
.crow-top .verified { margin-left: 0}
.crow-name { font-weight: 800; color: var(--text)}
.crow-name:hover { text-decoration: underline}
.crow-tag { padding: 1px 8px; border-radius: var(--r-pill); font-size: .64rem; font-weight: 800; letter-spacing: .03em; color: var(--accent-600); background: rgba(247, 181, 0, 0.24); border: 1px solid rgba(255, 255, 255, 0.16)}
.crow-time { color: var(--dim); font-size: .76rem}
.crow-text { margin: 3px 0 0; font-size: .93rem; line-height: 1.45; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere}
.crow-actions { display: flex; gap: 14px; margin-top: 3px}
.crow-actions button { padding: 2px 0; border: 0; background: none; color: var(--dim); font: 700 .76rem var(--font); cursor: pointer}
.crow-actions button:hover { color: var(--text)}
.crow-like { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 36px; padding: 4px 2px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 700 .72rem var(--font); cursor: pointer; transition: color .15s, transform .15s}
.crow-like:hover { color: var(--text)}
.crow-like:active { transform: scale(.9)}
.crow-like .i { width: 18px; height: 18px}
.crow-like.liked { color: #ff4fa0}
.crow-like.liked .i { fill: #ff4fa0}
.crow-like [data-count]:empty { display: none}

.cskel { display: flex; gap: 10px; padding: 12px 0}
.cskel > div { flex: 1; display: grid; gap: 8px; align-content: start}
.cskel i { display: block; border-radius: 8px; background: var(--surface-2); background-size: 200% 100%; animation: shimmer 1.4s infinite}
.cskel .a { width: 36px; height: 36px; border-radius: 50%; flex: none}
.cskel .l1 { height: 10px; width: 34%} .cskel .l2 { height: 10px; width: 82%}
.cpanel-empty { display: grid; justify-items: center; gap: 6px; padding: 44px 20px; text-align: center; color: var(--muted)}
.cpanel-empty .i { width: 44px; height: 44px; color: var(--accent); filter: none}
.cpanel-empty h3 { margin: 6px 0 0; font-size: 1.05rem; color: var(--text)}
.cpanel-empty p { margin: 0}
.cpanel-more { display: grid; place-items: center; padding: 12px}
.cpanel-more .i { color: var(--accent); animation: reelspin .9s linear infinite}

.cpanel-foot { flex: none; padding: 8px 12px 12px; border-top: 1px solid var(--border-soft); background: var(--surface-2)}
.cpanel-emoji { display: flex; justify-content: space-between; gap: 2px; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none}
.cpanel-emoji button { flex: none; width: 36px; height: 34px; border: 0; border-radius: 10px; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: transform .12s, background .12s}
.cpanel-emoji button:hover { background: rgba(255, 255, 255, 0.08)}
.cpanel-emoji button:active { transform: scale(.85)}
.cpanel-form { display: flex; align-items: flex-end; gap: 10px}
.cpanel-me { flex: none; padding-bottom: 2px; line-height: 0}
.cpanel-field { flex: 1; min-width: 0}
.cpanel-field textarea { display: block; width: 100%; min-height: 40px; max-height: 112px; padding: 9px 16px; resize: none; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: 22px; background: var(--surface-2); color: var(--text); font: 500 .95rem/1.4 var(--font); outline: none; transition: border-color .15s, box-shadow .15s}
.cpanel-field textarea::placeholder { color: var(--dim)}
.cpanel-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.09)}
.cpanel-chars { display: block; margin: 3px 8px 0; text-align: right; font-size: .68rem; color: var(--dim); font-variant-numeric: tabular-nums}
.cpanel-chars[hidden] { display: none}
.cpanel-chars.warn { color: var(--danger)}
.cpanel-send { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--grad-primary); color: var(--on-lime); font: 800 .88rem var(--font); cursor: pointer; box-shadow: var(--shadow-btn); transition: filter .15s, transform .15s, opacity .15s}
.cpanel-send:hover:not(:disabled) { filter: brightness(1.1)}
.cpanel-send:active:not(:disabled) { transform: scale(.96)}
.cpanel-send:disabled { background: rgba(255, 255, 255, 0.08); color: var(--dim); box-shadow: none; cursor: default}
@media (prefers-reduced-motion: reduce) { .cpanel, .cpanel-backdrop, .crow { transition-duration: .01s} .crow.fresh { animation: none} }

.tabs a .i { vertical-align: -3px; margin-right: 4px}
.saved-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 2px 12px}
.saved-head h2 { margin: 0; font-size: 1.15rem}
.saved-head p { margin: 2px 0 0}
.saved-filter { display: flex; gap: 6px}
.saved-filter a { padding: 6px 14px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); color: var(--muted); font: 700 .8rem var(--font); transition: .15s}
.saved-filter a:hover { color: var(--text)}
.saved-filter a.active { border-color: transparent; background: var(--grad-primary); color: var(--on-lime); box-shadow: var(--glow-purple)}
.saved-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px}
.saved-grid[hidden], .saved-empty[hidden] { display: none}
.saved-tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: var(--surface); transition: opacity .25s, transform .25s}
.saved-link { position: absolute; inset: 0; display: block; color: var(--text)}
.saved-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease)}
.saved-link:hover img { transform: scale(1.04)}
.saved-text { display: grid; place-items: center; height: 100%; padding: 14px; overflow: hidden; text-align: center; font-size: .82rem; font-weight: 600; color: var(--text-2); background: var(--surface-2)}
.saved-shade { position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); pointer-events: none}
.saved-meta { position: absolute; left: 8px; right: 8px; bottom: 7px; display: flex; justify-content: space-between; gap: 6px; font: 700 .72rem var(--font); text-shadow: 0 1px 4px #000}
.saved-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0}
.saved-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9}
.saved-kind { position: absolute; top: 7px; left: 7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; pointer-events: none}
.saved-unsave { position: absolute; top: 5px; right: 5px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .62); color: var(--cyan); cursor: pointer; backdrop-filter: blur(6px); transition: transform .15s, background .15s}
.saved-unsave:hover { background: rgba(0, 0, 0, .85); transform: scale(1.08)}
.saved-unsave .i { fill: currentColor}
@media (min-width: 560px) { .saved-grid { gap: 8px} .saved-tile { border-radius: 14px} }

/* ---------- 16. Discover: account discovery ---------- */
.page-wide .main { max-width: 1100px}
.dsc-search { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 6px 6px 18px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); backdrop-filter: blur(14px); box-shadow: var(--shadow-card); transition: border-color .18s, box-shadow .18s}
.dsc-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.09), var(--glow-cyan)}
.dsc-search-ic { display: grid; place-items: center; color: var(--accent)}
.dsc-input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; outline: none; background: none; color: var(--text); font: 500 1rem var(--font)}
.dsc-input::placeholder { color: var(--dim)}
.dsc-input::-webkit-search-cancel-button { display: none}
.dsc-clear { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--text-2); cursor: pointer; transition: background .15s, color .15s}
.dsc-clear:hover { background: rgba(255, 255, 255, 0.16); color: var(--text)}
.dsc-clear[hidden] { display: none}
.dsc-clear .i { width: 16px; height: 16px}
.dsc-go { flex: none; min-height: 42px}
@media (max-width: 420px) { .dsc-go { display: none} .dsc-search { padding-right: 10px} }

.dsc-chips { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 -2px; padding: 2px 2px 12px; overflow-x: auto; scrollbar-width: none}
.dsc-chips::-webkit-scrollbar { display: none}
.dsc-school-pick { flex: none; margin: 0}
.dsc-chip, .dsc-select { flex: none; padding: 8px 16px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); color: var(--text-2); font: 700 .84rem var(--font); white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s, background .15s, box-shadow .15s}
.dsc-chip:hover, .dsc-select:hover { border-color: var(--border-cyan); color: var(--text)}
.dsc-chip.active, .dsc-select.active { border-color: transparent; background: var(--grad-primary); color: var(--on-lime); box-shadow: var(--glow-purple)}
.dsc-select { appearance: none; -webkit-appearance: none; padding-right: 34px; max-width: 210px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2394a6cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center}
.dsc-select option { background: var(--surface); color: var(--text)}

#dsc-body { transition: opacity .18s}
#dsc-body.is-busy { opacity: .55}
.dsc-section { margin-top: 26px}
.dsc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px}
.dsc-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.22rem}
.dsc-head h2::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: var(--grad-ring)}
.dsc-head p { margin: 3px 0 0; color: var(--muted); font-size: .86rem}
.dsc-head-tools { display: flex; align-items: center; gap: 10px; flex: none}
.dsc-more { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--accent); font-size: .86rem; font-weight: 700; white-space: nowrap}
.dsc-more:hover { text-decoration: underline}
.dsc-more .i { width: 16px; height: 16px; transform: rotate(180deg)}
.dsc-arrows { display: flex; gap: 6px}
.dsc-arrows .icon-btn { width: 34px; height: 34px; border: 1px solid var(--border-soft); color: var(--text-2)}
.dsc-arrows .icon-btn:hover { border-color: var(--border-cyan); color: var(--text)}
.dsc-arrows .icon-btn.flip .i { transform: rotate(180deg)}
@media (hover: none) { .dsc-arrows { display: none} }

.dsc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px}
@media (min-width: 600px) { .dsc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px} }
@media (min-width: 900px) { .dsc-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr))} }

.dsc-card { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; overflow: hidden; text-align: center;
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--card-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s; animation: dscIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms)}
.dsc-card:hover, .dsc-card:focus-within { transform: translateY(-4px); border-color: var(--border-cyan); box-shadow: var(--shadow-card), 0 0 24px rgba(0, 0, 0, 0.09)}
@keyframes dscIn { from { opacity: 0; transform: translateY(12px)} to { opacity: 1; transform: none} }
.dsc-cover { position: absolute; inset: 0 0 auto 0; height: 88px; overflow: hidden; background: var(--surface-2)}
.dsc-cover img { position: absolute; left: -30%; top: -60%; width: 160%; height: 260%; object-fit: cover; opacity: .55; filter: blur(16px) saturate(1.5); transition: transform .5s var(--ease)}
.dsc-cover::after { content: ""; position: absolute; inset: 0; background: var(--surface-2)}
.dsc-card:hover .dsc-cover img { transform: scale(1.08)}
.dsc-flags { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; pointer-events: none}
.dsc-flag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font: 800 .68rem var(--font)}
.dsc-flag.trend { color: var(--gold-ink); background: var(--surface); border: 1px solid rgba(255, 197, 66, .5); backdrop-filter: blur(6px)}
.dsc-flags .chip { font-size: .66rem; padding: 3px 9px}
.dsc-avatar { position: relative; z-index: 1; margin-top: 46px; line-height: 0}
.dsc-avatar .av { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent), var(--glow-purple)}
.dsc-card.is-trending .dsc-avatar .av { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--gold), 0 0 18px rgba(255, 197, 66, .4)}
.dsc-body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-width: 0; padding: 12px 12px 4px}
.dsc-name { display: flex; align-items: center; justify-content: center; max-width: 100%; margin: 0; font-size: 1rem; line-height: 1.25}
.dsc-link { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap}
.dsc-link::after { content: ""; position: absolute; inset: 0; z-index: 2}
.dsc-name .verified { flex: none; margin-left: 5px}
.dsc-user { max-width: 100%; margin: 0; overflow: hidden; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap}
.dsc-bio { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--text-2); font-size: .84rem; line-height: 1.4; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
.dsc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 100%; margin-top: 10px}
.dsc-stat { color: var(--muted); font-size: .8rem; white-space: nowrap}
.dsc-stat b { color: var(--text); font-size: .95rem; font-variant-numeric: tabular-nums}
.dsc-meta .chip { max-width: 100%; padding: 3px 10px; font-size: .7rem}
.dsc-school { overflow: hidden; max-width: 120px; text-overflow: ellipsis}
.dsc-reason { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 9px 0 0; color: var(--accent); font-size: .76rem; font-weight: 700; line-height: 1.3}
.dsc-reason .i { flex: none; width: 15px; height: 15px}
.dsc-action { position: relative; z-index: 3; width: 100%; padding: 12px 12px 14px}
.dsc-action .btn { width: 100%}

.dsc-rail { position: relative; display: flex; gap: 12px; margin: 0 -2px; padding: 4px 2px 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none}
.dsc-rail::-webkit-scrollbar { display: none}
.dsc-card.in-rail { flex: 0 0 188px; scroll-snap-align: start}
@media (max-width: 599px) { .dsc-card.in-rail { flex-basis: 164px} }
.dsc-loadmore { display: flex; justify-content: center; margin-top: 18px}
.dsc-loadmore[hidden] { display: none}
.dsc-empty .btn { margin-top: 12px}

.dsc-skel-card { display: grid; justify-items: center; gap: 10px; padding: 46px 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--card-flat)}
.dsc-skel-card i { display: block; border-radius: 8px; background: var(--surface-2); background-size: 200% 100%; animation: shimmer 1.4s infinite}
.dsc-skel-card .c { width: 76px; height: 76px; border-radius: 50%}
.dsc-skel-card .l { width: 70%; height: 11px} .dsc-skel-card .l.s { width: 44%}
.dsc-skel-card .b { width: 100%; height: 40px; margin-top: 8px; border-radius: var(--r-pill)}
.dsc-error { text-align: center; padding: 38px 18px; color: var(--muted)}
.dsc-error .btn { margin-top: 12px}
@media (prefers-reduced-motion: reduce) { .dsc-card { animation: none; transition: none} .dsc-card:hover { transform: none} .dsc-cover img { transition: none} }

/* ---------- 17. Text stories ---------- */
.bg-violet, .bg-ocean, .bg-sunset, .bg-forest, .bg-rose, .bg-midnight, .bg-gold, .bg-mono { background: var(--sbg)}
.bg-violet   { --sbg: #6d28d9}
.bg-ocean    { --sbg: #0e7490}
.bg-sunset   { --sbg: #ea580c}
.bg-forest   { --sbg: #047857}
.bg-rose     { --sbg: #e11d48}
.bg-midnight { --sbg: #1d2147}
.bg-gold     { --sbg: #d99a00}
.bg-mono     { --sbg: #2a2a2e}

.story-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); background: var(--surface-2)}
.story-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font: 700 .86rem var(--font); cursor: pointer; transition: background .18s, color .18s, box-shadow .18s}
.story-modes button:hover { color: var(--text)}
.story-modes button[aria-selected="true"] { background: var(--grad-primary); color: var(--on-lime); box-shadow: var(--glow-purple)}
[data-story-panel][hidden] { display: none}

.story-compose { display: grid; place-items: center; aspect-ratio: 4 / 5; max-height: 330px; width: 100%; padding: 22px; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border-soft); transition: background .3s}
.story-compose textarea { display: block; width: 100%; max-height: 270px; padding: 0; margin: 0; resize: none; overflow-y: auto; border: 0; outline: none; background: none; color: #fff; text-align: center;
  font: 800 1.85rem/1.25 var(--font); text-shadow: 0 2px 14px rgba(0, 0, 0, .35); overflow-wrap: anywhere; scrollbar-width: none}
.story-compose textarea::placeholder { color: rgba(255, 255, 255, .62)}
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px}
.bg-picker { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0}
.bg-swatch { position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .15s, box-shadow .15s}
.bg-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer}
.bg-swatch:hover { transform: scale(1.1)}
.bg-swatch:has(input:checked) { transform: scale(1.14); box-shadow: 0 0 0 2px var(--navy-900), 0 0 0 4px #fff}
.bg-swatch:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 4px}
.compose-count { flex: none; color: var(--dim); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums}
.compose-count.warn { color: var(--danger)}

.story-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 88px 30px 130px; text-align: center; animation: storyTextIn .45s var(--ease) both}
.story-text p { max-height: 100%; margin: 0; overflow: hidden; color: #fff; font-weight: 800; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 2px 14px rgba(0, 0, 0, .35)}
@keyframes storyTextIn { from { opacity: 0; transform: scale(.97)} to { opacity: 1; transform: none} }
.msg .story-ref .ph.story-mini { background: var(--sbg); color: var(--text); font-size: .78rem; font-weight: 800}
@media (prefers-reduced-motion: reduce) { .story-text { animation: none} }


/* ==========================================================================
   19. Component polish: the layer that gives CIRQ its Pipel-style look
   (lime + ink, big radii, white cards, floating nav, ringed stories)
   ========================================================================== */

/* ---------- 19.1 Corrections to the converted base ---------- */
.skip { background: var(--text); color: var(--bg)}
.link { color: var(--accent-600); font-weight: 800} .link:hover { text-decoration: underline; text-underline-offset: 3px}
.btn.loading::after { border-color: rgba(255, 255, 255, 0.2); border-top-color: var(--on-lime)}
.verified { background: var(--text); color: var(--brand); box-shadow: none}
.coin { color: var(--text)}
.coin::before { color: #6a3d00; box-shadow: 0 2px 6px rgba(255, 197, 66, .55)}
.score { color: var(--accent-600)}
.progress { background: var(--surface-3)} .progress b { box-shadow: none}
.timer { background: var(--surface-3)} .timer b { box-shadow: none}
.empty .i { color: var(--text); filter: none; width: 46px; height: 46px; padding: 11px; border-radius: 16px; background: var(--grad-primary); stroke-width: 2}
.skeleton, .cskel i, .dsc-skel-card i { background: var(--surface-2); background-size: 200% 100%}
.card.violet { background: var(--surface-2); color: var(--text); box-shadow: 0 12px 28px rgba(86, 70, 214, .3)}
.btn.violet { background: var(--surface-2); color: var(--text); box-shadow: 0 10px 22px rgba(86, 70, 214, .3)}
.hearts i.off { background: rgba(27, 31, 59, .12)}
.msg.mine .story-ref { background: rgba(255, 255, 255, 0.1); border-left-color: var(--text)}
.cpanel-grip i { background: rgba(255, 255, 255, 0.2)}
.story-sheet .tabs.mini button.active { color: var(--on-lime)}
.story-sheet .tabs.mini button.active::after { display: none}
.story-sheet .tabs.mini { border: 0}

/* ---------- 19.2 Brand ---------- */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--text)}
.brand-tile { --bt: 40px; display: inline-grid; place-items: center; flex: none; width: var(--bt); height: var(--bt); border-radius: calc(var(--bt) * .32);
  background: var(--grad-primary); color: var(--on-lime); font: 700 calc(var(--bt) * .66)/1 var(--font-brand); letter-spacing: -.02em; padding-bottom: calc(var(--bt) * .04);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.13), 0 6px 14px rgba(217, 154, 0, .36); user-select: none}
.brand-tile.lg { --bt: 64px} .brand-tile.xl { --bt: 84px}
.brand-word { font: 700 1.6rem/1 var(--font-brand); letter-spacing: .005em; color: var(--text)}
.brand-lockup.stack { flex-direction: column; gap: 14px}

/* ---------- 19.3 Header ---------- */
.topbar { padding: 6px 0 16px}
.topbar .logo { gap: 10px; font-size: 1.45rem}
.topbar .logo .brand-tile { --bt: 38px}
.topbar .actions { gap: 10px}
.round-btn { width: 44px; height: 44px; border: 0; background: var(--surface); color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.09)}
.round-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(0, 0, 0, 0.11)}
.round-btn .i { width: 21px; height: 21px}
.dot { top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; background: var(--red); color: var(--text); font-size: .64rem; box-shadow: 0 0 0 2px var(--bg)}
.topbar .coin-pill { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--surface); font-size: .92rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.09)}
@media (max-width: 370px) { .topbar .coin-pill { display: none} }

/* ---------- 19.4 Bottom navigation: a white bar with a raised lime + ---------- */
.bottom-nav { left: 0; right: 0; bottom: 0; width: 100%; transform: none; pointer-events: none}
.pill { pointer-events: auto; max-width: 560px; margin: 0 auto; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; border: 0; border-radius: 30px 30px 0 0;
  background: var(--surface); backdrop-filter: none; box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.20), 0 -1px 0 rgba(0, 0, 0, 0.09)}
.pill a { min-width: 56px; height: 52px; gap: 0; color: #8a90a2; background: none; border-radius: 16px}
.pill a .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}
.pill a .i { width: 26px; height: 26px; stroke-width: 1.9}
.pill a:hover { color: var(--text)}
.pill a.active { color: var(--text); background: none; box-shadow: none}
.pill a.active .i { color: var(--text); filter: none; fill: currentColor; fill-opacity: .12; stroke-width: 2.2}
.pill a.active::after { content: ""; position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-600)}
.fab { width: 60px; height: 60px; margin-top: -34px; border: 5px solid var(--surface); background: var(--grad-primary); color: var(--on-lime);
  box-shadow: 0 12px 24px rgba(217, 154, 0, .45), 0 0 0 1px rgba(0, 0, 0, 0.09)}
.fab .i { stroke-width: 2.6}
.fab:hover { transform: scale(1.06) rotate(90deg)}
.pill .badge-n { top: 4px; right: 10px; background: var(--red); color: var(--text); box-shadow: 0 0 0 2px var(--surface)}
html[data-mobile-menu-direction="down"] .mobile-page-menu { top: calc(max(10px, env(safe-area-inset-top)) + 6px)}

/* the all-pages sheet */
.mobile-page-menu { border: 0; border-radius: 28px; background: var(--surface); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.48)}
.mobile-page-menu-head { background: var(--surface)}
.mobile-page-link { border: 0; background: var(--surface-2); border-radius: 16px; color: var(--text); font-weight: 700}
.mobile-page-link:hover, .mobile-page-link.active { background: var(--grad-primary); color: var(--on-lime)}
.mobile-page-link.active .i { color: inherit}
.mobile-page-badge { background: var(--red); color: var(--text)}
.mobile-menu-backdrop { background: rgba(0, 0, 0, .7)}
.mobile-page-logout button { background: rgba(255, 77, 122, .1); color: var(--danger-ink)}

/* ---------- 19.5 Desktop sidebar + rail ---------- */
@media (min-width: 1024px) {
  .sidebar { padding: 28px 18px; border-right: 0}
  .sidebar .brand { margin: 0 0 22px 8px; gap: 12px; font-size: 1.7rem}
  .sidebar a.nav, .sidebar button.nav { border-radius: 18px; padding: 12px 16px; color: var(--text-2); font-weight: 700}
  .sidebar a.nav:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); transform: none}
  .sidebar a.nav.active { color: var(--on-lime); background: var(--grad-primary); box-shadow: var(--shadow-btn)}
  .sidebar a.nav.active::before { display: none}
  .sidebar a.nav.active .i { color: inherit}
  .sidebar .n-badge { background: var(--red); color: var(--text)}
  .rail { padding: 28px 18px}
}

/* ---------- 19.6 Surfaces ---------- */
.card { background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--r-lg); padding: 18px; backdrop-filter: none; box-shadow: var(--shadow-card)}
a.card:hover { border-color: transparent; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24)}
.card.flat { background: var(--surface-2); border-color: transparent; box-shadow: none}
.card.lime { background: var(--grad-primary); color: var(--on-lime); box-shadow: var(--shadow-btn)}
.page-title { font-size: 1.7rem; font-weight: 900}
.section-title h2::before { width: 5px; height: 18px; background: var(--grad-ring)}
.divider { background: var(--border-soft)}

/* ---------- 19.7 Buttons ---------- */
.btn { min-height: 50px; color: var(--on-lime); font-weight: 800; letter-spacing: .005em; box-shadow: var(--shadow-btn)}
.btn:hover { filter: none; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(217, 154, 0, .45)}
.btn:active { transform: translateY(0) scale(.985); filter: none}
.btn.sm { min-height: 38px; padding: 0 18px; font-size: .86rem}
.btn.lg { min-height: 58px; font-size: 1.08rem; padding: 0 30px}
.btn.ghost { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.26)}
.btn.ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--text)}
.btn.dark { background: var(--text); color: var(--bg); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55)}
.btn.danger { background: rgba(255, 77, 122, .1); color: var(--danger-ink); box-shadow: inset 0 0 0 1.5px rgba(255, 77, 122, .4)}
.btn.danger:hover { box-shadow: inset 0 0 0 1.5px var(--danger)}
.btn.following { background: var(--surface-2); color: var(--text-2); box-shadow: none}
.btn.following:hover { background: var(--surface-3); box-shadow: none}
.btn.gold { color: #2a1a00}
.icon-btn { color: var(--text-2)} .icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text)}
.act { color: var(--text-2); font-weight: 800} .act:hover { background: rgba(255, 255, 255, 0.06); color: var(--text)}
.act.liked, .act.liked .i { color: var(--accent)} .act.liked .i { fill: var(--accent); filter: none}
.act.saved, .act.saved .i { color: var(--text)} .act.saved .i { fill: var(--text)}

/* ---------- 19.8 Forms ---------- */
label { color: var(--text-2); font-weight: 700}
.input, select.input, textarea.input { min-height: 52px; color: var(--text); background: var(--surface); border: 1.5px solid rgba(255, 255, 255, 0.11); border-radius: 16px; font-weight: 600}
.input:hover { border-color: rgba(255, 255, 255, 0.22)}
.input:focus { border-color: var(--brand-600); background: var(--surface); box-shadow: 0 0 0 4px rgba(247, 181, 0, .38)}
.input:user-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255, 77, 122, .12)}
.input:user-valid:not(:placeholder-shown):not(select) { border-color: rgba(14, 159, 110, .5)}
.input::placeholder { color: var(--dim); font-weight: 500}
select.input option { background: var(--surface); color: var(--text)}
.field-icon > .i { color: var(--muted)}
.check input { accent-color: var(--text)}
.file-drop { border: 1.5px dashed rgba(255, 255, 255, 0.2); border-radius: 16px; color: var(--text-2)}
.file-drop:hover { background: rgba(247, 181, 0, .18); border-color: var(--brand-600); color: var(--text)}
.file-drop.chip-btn { border: 0; background: var(--surface-2); border-radius: var(--r-pill); padding: 9px 15px; margin: 0; font-size: .86rem; font-weight: 800}
.file-drop.chip-btn:hover { background: rgba(247, 181, 0, .35)}
.file-drop.chip-btn .i { width: 19px; height: 19px}
.secure-note { background: rgba(247, 181, 0, .2); border: 0; color: var(--text-2)}
.secure-note .i { color: var(--text); filter: none}
.dsc-search, .chat-form { background: var(--surface); border: 1.5px solid rgba(255, 255, 255, 0.09); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13)}
.dsc-search:focus-within, .chat-form:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(247, 181, 0, .35)}
.dsc-search-ic { color: var(--muted)}
.dsc-input, .chat-form input[type=text] { color: var(--text); font-weight: 600}
.check.switch { background: var(--surface-2); border: 0}

/* ---------- 19.9 People ---------- */
.av { background: var(--surface-2); border: 0; box-shadow: 0 0 0 2px var(--surface), 0 3px 10px rgba(0, 0, 0, 0.26); color: var(--accent-600)}
.av.ring { padding: 3px; background: var(--grad-ring); box-shadow: none}
.av.ring > span:first-child { border: 3px solid var(--surface); background: #f3f4ee; color: var(--accent-600)}
.chip { background: var(--surface-2); color: var(--text-2); border: 0; font-weight: 800}
.chip.green { background: rgba(14, 159, 110, .12); color: var(--green)}
.chip.lime { background: var(--grad-primary); color: var(--on-lime); box-shadow: none}
.chip.violet { background: rgba(108, 92, 231, .12); color: var(--accent-600)}
.chip.red { background: rgba(255, 77, 122, .12); color: var(--danger-ink)}
.chip.warn { background: rgba(224, 138, 0, .13); color: #9a5b00}
.presence-pill { background: var(--surface-2)}

/* ---------- 19.10 Stories tray ---------- */
.tray { gap: 14px; padding: 2px 2px 14px; margin: 0 -2px}
.tray-item { width: 72px; color: var(--text); font-weight: 700; font-size: .74rem}
.tray-item .avatar-wrap { --avatar-size: 66px; --dot-size: 14px}
.tray-item .name { max-width: 72px}
.tray-item.seen .av.ring { background: var(--surface-3); box-shadow: none}
.tray-me { position: relative; display: block; line-height: 0}
.tray-plus { position: absolute; right: -1px; bottom: 1px; z-index: 3; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--grad-primary); color: var(--on-lime); border: 2.5px solid var(--surface); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.40)}
.tray-plus .i { width: 12px; height: 12px; stroke-width: 3.4}

/* ---------- 19.11 Feed tabs + composer ---------- */
.feed-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 2px 0 16px; border-bottom: 1.5px solid rgba(255, 255, 255, 0.08)}
.feed-tabs a { position: relative; padding: 12px 0 14px; text-align: center; color: var(--muted); font-weight: 800; font-size: .98rem; transition: color .15s}
.feed-tabs a:hover { color: var(--text)}
.feed-tabs a.active { color: var(--text)}
.feed-tabs a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2.5px; border-radius: 3px; background: var(--text)}
.composer { padding: 16px}
.composer textarea { color: var(--text); font-weight: 600; min-height: 64px}
.composer textarea::placeholder { color: var(--dim); font-weight: 500}

/* ---------- 19.12 Post card (the hero of the feed) ---------- */
.post { padding: 16px 16px 12px; border-radius: 28px}
.post + .post, .post + .sponsored-post, .sponsored-post + .post { margin-top: 16px}
.post-head { gap: 12px; margin-bottom: 0}
.post-head .who b { font-size: .98rem; font-weight: 900; color: var(--text)}
.post-head .who small { font-size: .78rem; font-weight: 600; color: var(--muted)}
.post-head .who small a:hover { text-decoration: underline}
.post-head .who small .i { width: 13px; height: 13px; vertical-align: -2px; color: var(--accent)}
.post-media { margin: 14px 0 12px; border: 0; border-radius: 22px; background: var(--surface-2)}
.post-media img, .post-media video { max-height: 520px}
.post-caption { position: relative; margin: 12px 0 4px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden}
.post:has(.post-media) .post-caption { -webkit-line-clamp: 2}
.post-caption .post-author { color: var(--text); font-weight: 900; margin-right: 2px}
.post-caption .more { display: none; position: absolute; right: 0; bottom: 0; padding: 0 0 0 34px; border: 0; cursor: pointer; font: 800 .92rem/1.5 var(--font); color: var(--muted);
  background: var(--surface-2)}
.post-caption.is-clamped:not(.is-open) .more { display: block}
.post-caption.is-open { display: block; -webkit-line-clamp: unset; overflow: visible}
.post-actions { margin: 6px -6px 0; padding-top: 8px; gap: 4px}
.post-actions .act { padding: 8px 10px; font-size: .88rem; gap: 7px}
.post-actions .act .i { width: 23px; height: 23px}
.post-actions .act .act-lbl { font-weight: 700; color: var(--text-2)}
.post-actions .act.liked .act-lbl { color: var(--accent-600)}
.post.suggested { border-color: rgba(247, 181, 0, .7)}
.sugg-tag { background: rgba(247, 181, 0, .22); border-radius: 18px}
.sugg-tag .i { color: var(--text)} .sugg-tag small { color: var(--text-2)}
.menu-list { background: var(--surface); border: 0; border-radius: 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.40)}
.menu-list button:hover, .menu-list a:hover { background: var(--surface-2)}
.menu-list .danger { color: var(--danger-ink)}
.comment .bubble { background: var(--surface-2)}
.music { background: var(--surface-2); border: 0; border-radius: 18px}
.music-play { color: var(--on-lime)} .music-bars i { background: var(--text)}
.music.playing .music-meta small { color: var(--accent-600)}

/* ---------- 19.13 Profile ---------- */
.profile { padding: 0; overflow: hidden; border-radius: 30px}
.profile-cover { position: relative; height: 128px; overflow: hidden;
  background: var(--surface-2)}
.profile-cover::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -34px; height: 78px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: rgba(255, 255, 255, .6); filter: blur(5px)}
.profile-cover::after { content: ""; position: absolute; width: 150px; height: 150px; right: -34px; top: -56px; border-radius: 50%; border: 22px solid rgba(25, 211, 197, .16)}
.profile-body { padding: 0 18px 18px}
.profile-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -42px}
.profile-av .avatar-wrap { --avatar-size: 92px; --dot-size: 18px; --dot-ring: 3px}
.profile-av .av { box-shadow: 0 0 0 4px var(--surface), 0 8px 22px rgba(0, 0, 0, 0.35)}
.profile-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 6px}
.profile-cta form { margin: 0}
.profile-cta .btn { min-height: 46px; padding: 0 26px}
.round-ghost { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.26); transition: box-shadow .15s, transform .15s}
.round-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); transform: translateY(-1px)}
.round-ghost[disabled] { opacity: .45; cursor: not-allowed; transform: none}
.profile-name { display: flex; align-items: center; margin: 14px 0 0; font-size: 1.45rem; font-weight: 900; letter-spacing: -.025em}
.profile-handle { color: var(--muted); font-weight: 600; font-size: .92rem}
.profile-info { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: .93rem; font-weight: 600}
.profile-info li { display: flex; gap: 9px; align-items: flex-start}
.profile-info .i { width: 17px; height: 17px; margin-top: 3px; color: var(--accent-600)}
.profile-info a:hover { text-decoration: underline}
.profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px}
.stats { gap: 10px; margin: 16px 0 0}
.stat { background: var(--surface); border: 1.5px solid rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 13px 6px 11px; transition: transform .15s, box-shadow .15s, border-color .15s}
a.stat:hover { transform: translateY(-2px); border-color: var(--brand-600); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15)}
.stat b { font-size: 1.28rem; font-weight: 900; background: none; color: var(--text); -webkit-text-fill-color: var(--text)}
.stat small { font-weight: 700; font-size: .78rem}
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px}
.tabs { gap: 0; padding: 0; margin: 4px 0 16px; background: none; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, 0.08); border-radius: 0}
.tabs a, .tabs button { position: relative; padding: 13px 14px 14px; border-radius: 0; color: var(--muted); font-weight: 800}
.tabs a:hover { color: var(--text)}
.tabs .active { background: none; color: var(--text); box-shadow: none}
.tabs .active::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1.5px; height: 2.5px; border-radius: 3px; background: var(--text)}
.tabs.icons a { padding: 12px 0 13px} .tabs.icons a .i { width: 24px; height: 24px; margin: 0; vertical-align: middle}
.tabs.icons .active::after { left: 22%; right: 22%}
.tier-row { background: var(--surface-2); border: 0} .tier-row.cur { background: var(--grad-primary); color: var(--on-lime); box-shadow: var(--shadow-btn)}
.ach { background: var(--surface-2); border: 0} .ach.earned { background: rgba(247, 181, 0, .24)} .ach .i { color: var(--text)}
.big-num { background: none; -webkit-text-fill-color: var(--text); color: var(--text)}
.card.lime .big-num { -webkit-text-fill-color: var(--on-lime); color: var(--on-lime)}
.saved-filter a { background: var(--surface-2); border: 0; color: var(--text-2)}
.saved-filter a.active { background: var(--grad-primary); color: var(--on-lime); box-shadow: none}
.saved-tile { background: var(--surface-3)}
.saved-text { color: var(--text); background: var(--surface-2)}

/* ---------- 19.14 Lists, events, chat, discover ---------- */
.event-cover { background: var(--surface-2); color: var(--on-lime)}
.date-pill { color: var(--on-lime); box-shadow: 0 8px 16px rgba(217, 154, 0, .35)}
.convo { background: var(--surface); border: 0; box-shadow: var(--shadow-card)}
.convo:hover { border: 0; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22)}
.convo.unread .snip { color: var(--text); font-weight: 800}
.opt { background: var(--surface); border: 1.5px solid rgba(255, 255, 255, 0.1); color: var(--text)}
.opt:hover:not([disabled]) { border-color: var(--brand-600); background: rgba(247, 181, 0, .14); box-shadow: none}
.opt.good { background: rgba(14, 159, 110, .12); border-color: var(--green)}
.lb-row { background: var(--surface-2); border: 0}
.lb-row:nth-child(1) { background: var(--surface-2)}
.lb-rank { background: var(--surface-3); color: var(--text)}
.msg { background: var(--surface); border: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13); color: var(--text)}
.msg.mine { color: var(--on-lime); box-shadow: 0 8px 18px rgba(217, 154, 0, .3)}
.msg .sender { color: var(--accent-600)}
.send { color: var(--on-lime)}
.chat-document-card { background: var(--surface-2)}
.chat-file-type { background: rgba(247, 181, 0, .4); color: var(--text)}
.chat-file-preview { background: var(--surface)}
.chat-locked { background: var(--surface-2); border-color: var(--border)}
.chat-locked .i { color: var(--text)}
.chat-upload-status progress { accent-color: var(--brand-600)}
.dsc-chip, .dsc-select { background: var(--surface); border: 1.5px solid rgba(255, 255, 255, 0.09); color: var(--text-2)}
.dsc-chip:hover, .dsc-select:hover { border-color: var(--text); color: var(--text)}
.dsc-chip.active, .dsc-select.active { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: none}
.dsc-select option { background: var(--surface); color: var(--text)}
.dsc-card { border: 0; box-shadow: var(--shadow-card); border-radius: 26px}
.dsc-card:hover, .dsc-card:focus-within { border: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26)}
.dsc-cover { background: var(--surface-2)}
.dsc-cover img { opacity: .5}
.dsc-avatar .av { box-shadow: 0 0 0 4px var(--surface), 0 6px 16px rgba(0, 0, 0, 0.31)}
.dsc-card.is-trending .dsc-avatar .av { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--yellow)}
.dsc-link { color: var(--text)} .dsc-stat b { color: var(--text)}
.dsc-flag.trend { color: #9a6400; background: var(--surface); border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22)}
.dsc-reason { color: var(--accent-600)} .dsc-more { color: var(--accent-600)}
.dsc-clear { background: var(--surface-2)} .dsc-clear:hover { background: var(--surface-3)}
.dsc-arrows .icon-btn { border: 0; background: var(--surface); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18)}
.dsc-head h2::before { background: var(--grad-ring); width: 5px}
.table-wrap { border: 0; box-shadow: var(--shadow-card); background: var(--surface)}
th { background: var(--surface-2); color: var(--muted)}
.admin-nav a { background: var(--surface); border: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13); color: var(--text-2)}
.admin-nav a:hover { color: var(--text); border: 0}
.admin-nav a.active { background: var(--grad-primary); color: var(--on-lime)}
.kpi { background: var(--surface); border: 0; box-shadow: var(--shadow-card); border-radius: 22px}
.kpi b { background: none; -webkit-text-fill-color: var(--text); color: var(--text)}
a.kpi:hover { border: 0; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24)}
.req-row { border-color: var(--border)}
.av-stack .av { border: 2px solid var(--surface)}
.person-link { color: var(--text-2)}
.school-logo { border: 2px solid var(--surface); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26)}
.school-logo > .i { color: var(--accent-600)}

/* ---------- 19.15 Dialogs and the comments panel ---------- */
dialog { color: var(--text); background: var(--surface); border: 0; border-radius: 30px; box-shadow: 0 34px 90px rgba(0, 0, 0, 0.60)}
dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px)}
.sheet-grid a, .sheet-grid label, .sheet-grid button { background: var(--surface-2); border: 0; color: var(--text); border-radius: 22px}
.sheet-grid button { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 18px 10px; font: 800 .92rem var(--font); cursor: pointer; transition: .18s}
.sheet-grid a:hover, .sheet-grid label:hover, .sheet-grid button:hover { background: var(--grad-primary); color: var(--on-lime); border: 0; box-shadow: var(--shadow-btn); transform: translateY(-2px)}
.sheet-grid .i { color: inherit}
.story-modes { background: var(--surface-2); border: 0}
.story-modes button { color: var(--text-2)}
.story-modes button[aria-selected="true"] { background: var(--text); color: var(--bg); box-shadow: none}
.cpanel { background: var(--surface); border: 0; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55)}
.cpanel-backdrop { background: rgba(0, 0, 0, .7)}
.cpanel-foot { background: var(--surface-2)}
.cpanel-field textarea { background: var(--surface); color: var(--text); border: 1.5px solid rgba(255, 255, 255, 0.1)}
.cpanel-field textarea:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(247, 181, 0, .38)}
.cpanel-send:disabled { background: var(--surface-3); color: var(--dim)}
.cpanel-send { color: var(--on-lime)}
.cpanel-emoji button:hover { background: rgba(255, 255, 255, 0.06)}
.crow-name { color: var(--text)} .crow-text { color: var(--text-2)}
.crow-tag { color: var(--accent-600); background: rgba(108, 92, 231, .12); border-color: transparent}
.crow-actions button:hover { color: var(--text)}
.crow-like.liked, .crow-like.liked .i { color: var(--accent)} .crow-like.liked .i { fill: var(--accent)}
.crow-like:hover { color: var(--text)}
.cpanel-empty .i, .cpanel-more .i { color: var(--text); filter: none}
.cpanel-empty h3 { color: var(--text)}
@keyframes crowfresh { from { background: rgba(247, 181, 0, .3)} to { background: transparent} }
.flash { background: var(--surface); border: 0; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40); backdrop-filter: none}
.flash.success .i { color: var(--green)} .flash.info .i { color: var(--accent)}

/* ---------- 19.16 Games ---------- */
.neon-title { background: var(--surface-2); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none}
.neon-title small { color: var(--accent-600); -webkit-text-fill-color: var(--accent-600)}
.reward-badge { border: 0; background: var(--grad-primary); box-shadow: var(--shadow-btn)}
.reward-badge b { color: var(--on-lime); text-shadow: none} .reward-badge small { color: rgba(255, 255, 255, 0.7)}
.clue { background: var(--surface); border: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.13)}
.clue b { color: var(--accent-600)} .clue .i { color: var(--text); filter: none}
.stage-label { background: var(--surface); border: 0; box-shadow: var(--shadow-card)}
.deck-title::before, .deck-title::after { background: var(--surface-2)}
.game-card { background: var(--surface); border: 0; box-shadow: var(--shadow-card)}
.game-card::after { background: var(--surface-2)}
.game-card:hover { border: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26)}
.game-card .icon-tile { color: var(--on-lime); box-shadow: var(--shadow-btn)}
.game-bar .cell { background: var(--surface); border: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.13)}
.game-bar .cell .i { color: var(--gold-600); filter: none}
.reward-pop { background: var(--surface-2); border: 0; box-shadow: var(--shadow-card)}
.rc-pick .i { color: var(--text)}
.rc-error { color: var(--danger-ink)}
.reel-loading-banner { background: #fff; border: 0; color: var(--text)}
.reel-feed-status { background: var(--surface-2); color: var(--text-2)} .reel-feed-status .i { color: var(--text)}
.reel-loading-banner .i { color: var(--text)}
.reels { border: 0; box-shadow: 0 24px 60px rgba(27, 31, 59, .22)}

/* ---------- 19.17 Auth ---------- */
.auth-shell { padding: 22px 16px 44px}
.auth-split { width: min(100%, 1020px); border-radius: 36px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.31); background: var(--surface)}
.auth-art { border: 0; border-radius: 36px 0 0 36px; background: var(--text)}
.auth-art .tag { color: #fff; font-weight: 800; letter-spacing: .06em}
@media (min-width: 900px) { .auth-split .auth-card { border-radius: 0 36px 36px 0; box-shadow: none; padding: 40px 38px !important} }
.auth-card { margin: 0 auto}
.auth-logo { margin-bottom: 20px; text-align: center}
.auth-logo h1 { font-weight: 900; letter-spacing: -.03em}
.auth-logo .brand-tile { --bt: 70px; margin: 0 auto}
.auth-logo img { width: 70px; height: 70px; border-radius: 22px; box-shadow: none}
.errpage .code { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none}

/* ---------- 19.18 Landing / onboarding ---------- */
.landing { padding: 0; background: var(--bg)}
.landing .orb { display: none}
.landing .inner { width: min(100%, 1120px); padding: 18px 20px 40px}
.land-nav { padding: 6px 0 4px}
.land-nav .skip-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-weight: 800; font-size: .9rem; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.22); transition: box-shadow .15s}
.land-nav .skip-btn:hover { box-shadow: inset 0 0 0 1.5px var(--text)}
.land-hero { display: grid; gap: 8px; align-items: center; padding: 6px 0 4px}
.land-copy { text-align: center; max-width: 560px; margin: 0 auto}
.land-copy h1 { font-size: clamp(2.05rem, 8.2vw, 3.5rem); font-weight: 900; line-height: 1.06; letter-spacing: -.035em; margin: 6px 0 14px; color: var(--text)}
.land-copy h1 em { font-style: normal; position: relative; white-space: nowrap}
.land-copy h1 em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .36em; z-index: -1; border-radius: 99px; background: var(--grad-primary); opacity: .85}
.land-copy .lede { color: var(--muted); font-size: 1.04rem; font-weight: 600; max-width: 430px; margin: 0 auto 22px}
.land-dots { display: flex; justify-content: center; gap: 7px; margin: 4px 0 22px}
.land-dots i { width: 8px; height: 8px; border-radius: 99px; background: #d4d7df} .land-dots i:first-child { width: 28px; background: var(--text)}
.land-cta { display: grid; gap: 12px; max-width: 420px; margin: 0 auto}
.land-cta .btn { min-height: 58px; font-size: 1.05rem}
.land-cta .btn.ghost { border-radius: var(--r-pill)}
.land-note { margin-top: 16px; font-size: .82rem}

.collage { position: relative; width: min(100%, 360px); aspect-ratio: 1 / 1; margin: 0 auto}
.collage > * { position: absolute}
.collage .zig { left: 6%; top: 24%; width: 92%; z-index: 1; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.60))}
.collage .rings { left: -2%; top: 8%; width: 30%; z-index: 0}
.collage .orbit { left: 15%; top: 18%; width: 78%; aspect-ratio: 1; border: 2px dashed rgba(255, 255, 255, 0.55); border-radius: 50%; z-index: 2}
.collage .face { z-index: 3; border-radius: 50%; overflow: hidden; background: #dfe3d3; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.48), 0 0 0 4px rgba(255, 255, 255, .9)}
.collage .face img { width: 100%; height: 100%; object-fit: cover}
.collage .f1 { left: 8%; top: 4%; width: 43%; aspect-ratio: 1}
.collage .f2 { left: 52%; top: 30%; width: 36%; aspect-ratio: 1}
.collage .f3 { left: 18%; top: 63%; width: 27%; aspect-ratio: 1}
.collage .follow { z-index: 4; display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border-radius: 99px; background: var(--grad-primary); color: var(--on-lime); font: 900 .74rem var(--font); box-shadow: 0 6px 14px rgba(217, 154, 0, .45)}
.collage .fw1 { left: 22%; top: 38%} .collage .fw2 { left: 56%; top: 54%} .collage .fw3 { left: 31%; top: 83%}
.collage .globe { z-index: 4; right: 5%; bottom: 14%; width: 17%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #7c6cf2; color: var(--text); box-shadow: 0 10px 20px rgba(108, 92, 231, .4), 0 0 0 5px rgba(124, 108, 242, .2)}
.collage .globe .i { width: 52%; height: 52%; stroke-width: 1.8}
.collage .dot1, .collage .dot2, .collage .dot3 { z-index: 4; border-radius: 50%}
.collage .dot1 { left: 3%; top: 2%; width: 3.6%; aspect-ratio: 1; background: var(--pink)}
.collage .dot2 { left: 8%; bottom: 16%; width: 6%; aspect-ratio: 1; border: 4px solid #8f7bff}
.collage .dot3 { right: 6%; top: 40%; width: 3%; aspect-ratio: 1; background: var(--yellow)}
.collage .spark { z-index: 4; color: var(--text)} .collage .spark .i { width: 100%; height: 100%; stroke-width: 1.6}
.collage .sp1 { right: 12%; top: 9%; width: 9%; aspect-ratio: 1} .collage .sp2 { right: 3%; top: 17%; width: 6%; aspect-ratio: 1} .collage .sp3 { left: 4%; top: 60%; width: 5%; aspect-ratio: 1; color: var(--pink)}
.collage .gem { z-index: 4; right: 13%; top: 21%; width: 7%; aspect-ratio: 1; background: var(--yellow); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)}

@media (min-width: 900px) {
  .landing .inner { padding-top: 26px}
  .land-hero { grid-template-columns: 1fr 1fr; gap: 40px; padding: 28px 0 10px}
  .land-copy { text-align: left; margin: 0; max-width: 520px; order: 1}
  .land-copy .lede { margin-left: 0; max-width: 460px; font-size: 1.12rem}
  .land-dots { justify-content: flex-start}
  .land-cta { margin: 0; grid-template-columns: 1fr 1fr; max-width: 460px}
  .collage { width: min(100%, 470px); order: 2}
}
.land-features { margin-top: 44px}
.land-features h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; letter-spacing: -.03em; text-align: center; margin-bottom: 22px}
.features { gap: 12px; margin: 0 0 8px}
.features div { background: var(--surface); border: 0; border-radius: 22px; box-shadow: var(--shadow-card); padding: 16px; font-weight: 800}
.features .i { color: var(--text); width: 38px; height: 38px; padding: 8px; border-radius: 13px; background: var(--grad-primary); margin-bottom: 10px}
.land-cards { margin-top: 18px}
.tagline { color: var(--text)} .tagline span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent}

/* ---------- 19.19 Small screens ---------- */
@media (max-width: 380px) {
  .tray-item { width: 66px} .tray-item .avatar-wrap { --avatar-size: 60px}
  .post { padding: 14px 14px 10px} .post-actions .act { padding: 8px 7px; font-size: .82rem}
  .profile-cta .btn { padding: 0 20px}
}
@media (min-width: 1024px) { .pill, .bottom-nav { display: none} }

.only-desktop { display: none}
@media (min-width: 1024px) { .only-desktop { display: inline-grid} }

/* ---------- 19.20 Fix-ups found while checking against the reference ---------- */
.tray-add .av { border: 0; box-shadow: none; background: var(--grad-ring)}
.tray-item .presence-dot { display: none}
.composer .row.between { gap: 10px}
.composer .file-drop.chip-btn { padding: 8px 12px; font-size: .82rem; gap: 7px}
.composer .row.wrap { gap: 8px}
.composer select.input { min-height: 38px !important; padding: 0 30px 0 14px; border-radius: 99px; font-size: .82rem !important}
.composer .btn.sm { margin-left: auto; min-width: 84px}
.profile-body { position: relative; z-index: 1}
.profile-av .avatar-wrap { --avatar-size: 88px !important; --dot-size: 18px}
.profile-cover { height: 112px}
.profile-cta { flex-wrap: nowrap; gap: 8px}
.profile-cta .btn { padding: 0 20px; white-space: nowrap}
.profile-cta .menu .icon-btn { width: 36px; height: 36px}
.game-card::after { display: none}

/* ---------- 19.21 Reels: readable overlay text on top of video ---------- */
.reel .shade { height: 62%; background: linear-gradient(to top, rgba(15, 18, 38, .94) 0%, rgba(15, 18, 38, .6) 55%, transparent 100%)}
.reel .info, .reel .info a, .reel .info b, .reel .info p, .reel .info small { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 12px rgba(0, 0, 0, .55)}
.reel .info > a.row b { font-size: 1.02rem; font-weight: 900; letter-spacing: .005em}
.reel .info > a.row:hover b { text-decoration: underline; text-underline-offset: 3px}
.reel .info p { font-weight: 600; line-height: 1.45}
.reel .info .btn, .reel .info .btn * { text-shadow: none}
.reel .info .btn.following { background: rgba(255, 255, 255, .92); color: var(--text)}
.reel .info .av { box-shadow: 0 0 0 2px #fff}
.reel .info .music, .reel .info .music * { text-shadow: none}
.reel .side .act, .reel .side .act span { color: #fff}
.reel .side .act.liked, .reel .side .act.liked .i { color: #ff4d7a} .reel .side .act.liked .i { fill: #ff4d7a}
.reel .side .act.saved, .reel .side .act.saved .i { color: var(--brand)} .reel .side .act.saved .i { fill: var(--brand)}

/* ---------- 19.22 Gifts & loans ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--muted); font-weight: 800; font-size: .9rem}
.back-link:hover { color: var(--text)}
.eyebrow { font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; opacity: .65}
.big { font-size: 2.9rem; font-weight: 900; line-height: 1.05; letter-spacing: -.03em} .big small { font-size: 1rem; font-weight: 800; letter-spacing: 0; opacity: .7}
.lend-balance p { margin: 8px 0 0; font-weight: 700; max-width: 46ch}
.friend-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none}
.friend { display: grid; justify-items: center; gap: 6px; min-width: 66px; color: var(--text); font-weight: 800; font-size: .78rem; transition: transform .15s}
.friend:hover { transform: translateY(-3px)}
.loan-card { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px 16px; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-card); color: var(--text); transition: transform .15s, box-shadow .15s}
.loan-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24)}
.loan-card.overdue { box-shadow: inset 0 0 0 2px rgba(255, 77, 122, .45), var(--shadow-card)}
.loan-card .grow { min-width: 0; display: grid; gap: 3px}
.loan-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap}
.loan-card .progress { margin: 4px 0 0}
.loan-left { font-weight: 700; color: var(--text-2)} .loan-left.late { color: var(--danger-ink)}
.loan-card .chev, .lend-link .chev { width: 18px; height: 18px; transform: rotate(180deg); color: var(--dim); flex: none}
.lend-empty { display: flex; gap: 14px; align-items: center} .lend-empty .i { width: 40px; height: 40px; padding: 9px; border-radius: 14px; background: var(--grad-primary); color: var(--on-lime); flex: none}
.coin-in { color: var(--green)} .coin-out { color: var(--danger-ink)}
.how-it-works summary { cursor: pointer; font-weight: 900; display: flex; align-items: center; gap: 8px; list-style: none}
.how-it-works summary::-webkit-details-marker { display: none}
.how-it-works ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 10px; color: var(--text-2); font-size: .92rem}
.lend-link { display: flex; align-items: center; gap: 14px; color: var(--text)}
.lend-link .icon-tile { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: var(--grad-primary); color: var(--on-lime); box-shadow: var(--shadow-btn); flex: none}
.send-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px} .send-head h1 { font-size: 1.25rem; margin: 0 0 2px; font-weight: 900; letter-spacing: -.02em}
.amount-input { font-size: 1.5rem; font-weight: 900; min-height: 62px; letter-spacing: -.02em}
.quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -4px} .quick-amounts .chip { cursor: pointer; border: 0; font-size: .9rem; padding: 7px 14px} .quick-amounts .chip:hover { background: var(--grad-primary); color: var(--on-lime)}
.fee-row { position: relative} .fee-row .input { padding-right: 70px} .fee-unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 800; pointer-events: none}
.agreement-preview { background: rgba(247, 181, 0, .2); border-radius: 20px; padding: 14px 16px; font-size: .9rem; color: var(--text-2)}
.agreement-preview b { display: flex; align-items: center; gap: 6px; color: var(--text); margin-bottom: 6px}
.agreement-preview ul { margin: 0; padding-left: 18px; display: grid; gap: 6px}
.agreement-preview [data-due-text], .agreement-preview [data-amount-text], .agreement-preview [data-fee-text] { font-weight: 900; color: var(--text)}
/* the agreement itself: a calm paper-like document */
.agreement { padding: 0; overflow: hidden; background: var(--surface)}
.agr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1.5px dashed rgba(255, 255, 255, 0.14)}
.agr-title { display: flex; align-items: center; gap: 12px} .agr-title .brand-tile { --bt: 38px} .agr-title small { display: block; font-size: .66rem; font-weight: 900; letter-spacing: .14em; color: var(--muted)} .agr-title b { font-size: 1.02rem; font-weight: 900; letter-spacing: -.01em}
.agr-parties { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 20px 14px 8px; text-align: center}
.agr-parties a { display: grid; justify-items: center; gap: 2px; color: var(--text)} .agr-parties a small { color: var(--muted); font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px} .agr-parties a b { font-weight: 900; font-size: .95rem; overflow-wrap: anywhere}
.agr-arrow { display: grid; justify-items: center; gap: 0} .agr-arrow .i { width: 20px; height: 20px; color: var(--muted)} .agr-arrow b { font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1} .agr-arrow small { color: var(--muted); font-weight: 800}
.agr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 16px 0} .agr-facts div { background: var(--surface-2); border-radius: 16px; padding: 10px 14px} .agr-facts dt { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--muted)} .agr-facts dd { margin: 2px 0 0; font-weight: 900}
.agr-note { margin: 14px 16px 0; padding: 10px 14px; border-left: 4px solid var(--brand-600); background: rgba(247, 181, 0, .14); border-radius: 0 14px 14px 0; font-style: italic; color: var(--text-2)}
.agr-clauses { margin: 16px 18px 0 38px; padding: 0; display: grid; gap: 10px; color: var(--text-2); font-size: .93rem; line-height: 1.5} .agr-clauses li::marker { font-weight: 900; color: var(--text)}
.agr-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 18px 0} .agr-sign > div { display: grid; gap: 2px; border-top: 2px solid var(--text); padding-top: 8px} .agr-sign small { color: var(--muted); font-weight: 700; font-size: .72rem}
.sig { font: italic 700 1.25rem/1.2 Georgia, "Times New Roman", serif; color: var(--text)} .sig.pending { color: var(--dim); font-weight: 400}
.agr-ref { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding: 12px 18px; background: var(--surface-2); font: 700 .72rem ui-monospace, Menlo, monospace; color: var(--muted)}
.owe-card { margin-top: 14px} .owe-card.overdue { box-shadow: inset 0 0 0 2px rgba(255, 77, 122, .45), var(--shadow-card)} .owe-card .progress { margin: 8px 0}
.timeline { display: grid; gap: 0}
.tl-item { display: flex; gap: 14px; padding: 10px 0; position: relative} .tl-item + .tl-item::before { content: ""; position: absolute; left: 6px; top: -10px; height: 20px; width: 2px; background: var(--border)}
.tl-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--surface-3); box-shadow: 0 0 0 4px var(--surface-2); flex: none}
.tl-item.accepted .tl-dot, .tl-item.repaid .tl-dot, .tl-item.payment .tl-dot { background: var(--brand-600)} .tl-item.overdue .tl-dot, .tl-item.fee_applied .tl-dot { background: var(--danger)}
.tl-item.forgiven .tl-dot { background: var(--accent)}
@media (max-width: 380px) { .agr-parties { grid-template-columns: 1fr} .agr-arrow { grid-auto-flow: column; gap: 6px; align-items: baseline} }
.card.stack > b, .card.stack > small { display: block}

/* ---------- 19.23 Who liked: count buttons + the shared sheet ---------- */
.post-actions .likers-btn { margin-left: -10px; padding-left: 2px}
.post-actions .likers-btn:hover .act-lbl, .post-actions .likers-btn:hover [data-likes-of] { text-decoration: underline; text-underline-offset: 3px}
.reel .side .act.likers-count { min-width: 52px; margin-top: -6px; padding-top: 0; font-weight: 800; font-size: .78rem}
.reel .side .act.likers-count:hover { background: rgba(255, 255, 255, .12)}
.crow-likecol { display: grid; justify-items: center; align-content: start; gap: 0; flex: none}
.crow-likers { min-width: 28px; padding: 0 4px 2px; border: 0; background: none; cursor: pointer; font: 800 .74rem var(--font); color: var(--muted); line-height: 1.2}
.crow-likers:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px}
.crow-likers[hidden], .act.likers-btn[hidden] { display: none}
.act.likers-btn[data-clikes-of] { margin-left: -8px; padding-left: 0; font-size: .82rem}
dialog.likers { width: min(100%, 440px); max-height: min(82vh, 640px); padding: 18px 18px 14px; display: none; flex-direction: column; gap: 10px}
dialog.likers[open] { display: flex}
.likers-list { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; overscroll-behavior: contain}
.likers-list .liker { border-radius: 16px; padding: 8px 8px; transition: background .15s}
.likers-list .liker:hover { background: var(--surface-2)}
.likers-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 10px; text-align: center}
.likers-empty .i { width: 40px; height: 40px; padding: 9px; border-radius: 14px; background: var(--grad-primary); color: var(--on-lime)}
.likers-loading { display: grid; gap: 10px; padding: 6px 0}
.likers-loading i { display: block; height: 52px; border-radius: 16px; background: var(--surface-2); background-size: 200% 100%; animation: shimmer 1.2s linear infinite}
@media (max-width: 560px) { dialog.likers { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 28px 28px 0 0; max-height: 78vh} }

/* ---------- 19.24 Account recovery code ---------- */
.recovery-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 20px; background: rgba(247, 181, 0, .28); color: var(--text); font-size: .9rem; box-shadow: inset 0 0 0 1.5px rgba(217, 154, 0, .55); transition: background .15s}
.recovery-banner:hover { background: rgba(247, 181, 0, .42)}
.recovery-banner .i { width: 22px; height: 22px; flex: none}
.recovery-banner span:nth-of-type(1) { flex: 1; line-height: 1.35}
.recovery-banner .rb-go { padding: 6px 14px; border-radius: 99px; background: var(--text); color: var(--bg); font-weight: 800; font-size: .8rem}
.code-box { margin: 14px 0; padding: 20px 16px 16px; text-align: center; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-card), inset 0 0 0 2px rgba(217, 154, 0, .7)}
.code-chars { margin: 10px 0 14px; font: 900 clamp(1.5rem, 7.2vw, 2.1rem)/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--text); user-select: all; word-break: keep-all}
.code-chars.masked { color: var(--dim); user-select: none; margin: 4px 0}
.code-actions { display: flex; justify-content: center; gap: 10px}
.code-input { font: 800 1.25rem ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase}
.rc-warn ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: .9rem; color: var(--text-2)}
.rc-warn b { display: flex; align-items: center; gap: 6px}
.rc-renew summary { cursor: pointer; font-weight: 800; color: var(--accent-600); font-size: .9rem; list-style: none}
.rc-renew summary::-webkit-details-marker { display: none}
.rc-renew[open] summary { margin-bottom: 10px}
.recover-promo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--text); background: rgba(247, 181, 0, .22); box-shadow: inset 0 0 0 1.5px rgba(217, 154, 0, .6)}
.recover-promo > .i { width: 26px; height: 26px; flex: none} .recover-promo > div { flex: 1}

/* ---------- 19.25 Theme switch (profile + settings) ---------- */
.theme-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); max-width: 100%}
.theme-switch form { margin: 0; display: contents}
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font: 800 .9rem var(--font); cursor: pointer; transition: background .15s, color .15s}
.theme-switch button:hover { color: var(--text)}
.theme-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); cursor: default}
.theme-switch .i { width: 18px; height: 18px}
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px}
.theme-row b { font-weight: 900} .theme-row small { display: block; color: var(--muted); font-weight: 600}


/* ==========================================================================
   20. Flat black & gold
   Matches the reference banking UI: pure-black screens, charcoal cards, white type, one flat gold accent.
   Rules: solid colours only (no gradients, no glows, no coloured shadows). The only fades left are the dark scrims
   behind text on top of photos and video, where text would otherwise be unreadable.
   ========================================================================== */
html, body { background: var(--bg); color: var(--text); }
::selection { background: var(--brand); color: var(--on-lime); }
* { scrollbar-color: #3a3a3f transparent; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

/* ---------- brand ---------- */
.brand-tile { background: var(--brand); color: var(--on-lime); box-shadow: none; }
.brand-word { color: var(--text); }

/* ---------- buttons ---------- */
.btn { background: var(--brand); color: var(--on-lime); box-shadow: none; }
.btn:hover { background: var(--brand-300); box-shadow: none; transform: translateY(-1px); }
.btn:active { background: var(--brand-600); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.btn.ghost:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px var(--text); }
.btn.dark { background: var(--text); color: var(--bg); box-shadow: none; }
.btn.following { background: var(--surface-3); color: var(--text-2); box-shadow: none; }
.btn.following:hover { background: #34343a; }
.btn.danger { background: rgba(255, 90, 95, .12); color: var(--danger-ink); box-shadow: inset 0 0 0 1.5px rgba(255, 90, 95, .45); }
.btn.violet, .card.violet { background: var(--blue); color: #fff; box-shadow: none; }
.btn.gold { background: var(--brand); color: var(--on-lime); }
.btn[disabled], .btn:disabled { background: var(--surface-3); color: var(--dim); box-shadow: none; }
.btn.loading::after { border-color: rgba(11, 11, 12, .25); border-top-color: var(--on-lime); }
.round-btn, .coin-pill { background: var(--surface-2); color: var(--text); box-shadow: none; border: 1px solid var(--border-soft); }
.round-btn:hover { background: var(--surface-3); box-shadow: none; }
.round-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.round-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); }
.icon-btn { color: var(--text-2); } .icon-btn:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.dot { background: var(--red); color: #fff; box-shadow: 0 0 0 2px var(--bg); }
.coin { color: var(--text); }
.coin::before { background: var(--brand); color: var(--on-lime); box-shadow: none; }

/* ---------- navigation ---------- */
.pill { background: var(--surface); box-shadow: 0 -1px 0 var(--border-soft); }
.pill a { color: #8d8d96; } .pill a:hover { color: var(--text); }
.pill a.active, .pill a.active .i { color: var(--brand); }
.pill a.active::after { background: var(--brand); }
.fab { background: var(--brand); color: var(--on-lime); border: 5px solid var(--surface); box-shadow: none; }
.pill .badge-n { background: var(--red); box-shadow: 0 0 0 2px var(--surface); }
.mobile-page-menu { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.mobile-page-menu-head { background: var(--surface); }
.mobile-page-link { background: var(--surface-2); color: var(--text); }
.mobile-page-link:hover, .mobile-page-link.active { background: var(--brand); color: var(--on-lime); }
.mobile-menu-backdrop, .cpanel-backdrop { background: rgba(0, 0, 0, .7); }
@media (min-width: 1024px) {
  .sidebar a.nav { color: var(--text-2); }
  .sidebar a.nav:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
  .sidebar a.nav.active { background: var(--brand); color: var(--on-lime); box-shadow: none; }
}

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none; }
a.card:hover { border-color: rgba(247, 181, 0, .45); box-shadow: none; }
.card.flat { background: var(--surface-2); border-color: transparent; }
.card.lime { background: var(--brand); color: var(--on-lime); border-color: transparent; box-shadow: none; }
.card.lime .muted, .card.lime small { color: rgba(11, 11, 12, .7); }
.section-title h2::before, .dsc-head h2::before { background: var(--brand); }
.page-title { color: var(--text); }
.divider { background: var(--border-soft); }
.progress, .timer { background: var(--surface-3); } .progress b, .timer b { background: var(--brand); box-shadow: none; }
.timer.low b { background: var(--red); }
.empty .i { background: var(--brand); color: var(--on-lime); }

/* ---------- forms ---------- */
.input, select.input, textarea.input { background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text); }
.input:hover { border-color: rgba(255, 255, 255, .22); }
.input:focus { background: var(--surface-2); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(247, 181, 0, .22); }
.input:user-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 90, 95, .16); }
.input:user-valid:not(:placeholder-shown):not(select) { border-color: rgba(63, 203, 138, .55); }
select.input option { background: var(--surface-2); color: var(--text); }
.check input { accent-color: var(--brand); }
.file-drop { border-color: rgba(255, 255, 255, .22); color: var(--text-2); }
.file-drop:hover { background: rgba(247, 181, 0, .1); border-color: var(--brand); color: var(--text); }
.file-drop.chip-btn { background: var(--surface-3); border: 0; } .file-drop.chip-btn:hover { background: #34343a; }
.secure-note { background: rgba(247, 181, 0, .1); } .secure-note .i { color: var(--brand); }
.dsc-search, .chat-form { background: var(--surface-2); border: 1.5px solid var(--border); box-shadow: none; }
.dsc-search:focus-within, .chat-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(247, 181, 0, .22); }
.check.switch { background: var(--surface-2); }
.link { color: var(--brand); } .link:hover { color: var(--brand-300); }
.skip { background: var(--brand); color: var(--on-lime); }

/* ---------- people, chips ---------- */
.av { background: var(--surface-3); color: var(--brand); box-shadow: 0 0 0 2px var(--surface); }
.av.ring { background: var(--brand); box-shadow: none; }
.av.ring > span:first-child { background: var(--surface-3); border: 3px solid var(--bg); color: var(--brand); }
.tray-item.seen .av.ring { background: #3a3a3f; }
.tray-plus { background: var(--brand); color: var(--on-lime); border: 2.5px solid var(--bg); box-shadow: none; }
.tray-add .av { background: var(--brand); }
.verified { background: var(--brand); color: var(--on-lime); }
.chip { background: var(--surface-3); color: var(--text-2); }
.chip.green { background: rgba(63, 203, 138, .14); color: var(--green); }
.chip.lime { background: var(--brand); color: var(--on-lime); }
.chip.violet { background: rgba(47, 107, 255, .18); color: #86aaff; }
.chip.red { background: rgba(255, 90, 95, .14); color: var(--danger-ink); }
.chip.warn { background: rgba(242, 163, 27, .16); color: #f7b94d; }
.presence-pill { background: var(--surface-2); }
.dsc-chip, .dsc-select { background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text-2); }
.dsc-chip:hover, .dsc-select:hover { border-color: var(--text); color: var(--text); }
.dsc-chip.active, .dsc-select.active { background: var(--brand); border-color: var(--brand); color: var(--on-lime); }

/* ---------- tabs ---------- */
.tabs, .feed-tabs { border-bottom: 1.5px solid var(--border); }
.tabs a, .tabs button, .feed-tabs a { color: var(--muted); }
.tabs a:hover, .feed-tabs a:hover, .tabs .active, .feed-tabs a.active { color: var(--text); }
.tabs .active::after, .feed-tabs a.active::after { background: var(--brand); }

/* ---------- feed + posts ---------- */
.post { background: var(--surface); }
.post-media { background: var(--surface-2); }
.post-head .who small .i { color: var(--muted); }
.act { color: var(--text-2); } .act:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.act.liked, .act.liked .i { color: var(--brand); } .act.liked .i { fill: var(--brand); }
.act.saved, .act.saved .i { color: var(--brand); } .act.saved .i { fill: var(--brand); }
.post-actions .act .act-lbl { color: var(--text-2); } .post-actions .act.liked .act-lbl { color: var(--brand); }
.post-caption { color: var(--text-2); } .post-caption .post-author { color: var(--text); }
.post-caption .more { background: var(--surface); color: var(--muted); padding-left: 10px; }
.post.suggested { border-color: rgba(247, 181, 0, .5); }
.sugg-tag { background: rgba(247, 181, 0, .12); } .sugg-tag .i { color: var(--brand); }
.menu-list { background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.menu-list button:hover, .menu-list a:hover { background: rgba(255, 255, 255, .06); }
.comment .bubble, .music { background: var(--surface-2); }
.music-play { background: var(--brand); color: var(--on-lime); } .music-bars i { background: var(--brand); }
.composer textarea { color: var(--text); }
.crow-likers { color: var(--muted); } .crow-likers:hover { color: var(--text); }
.crow-like.liked, .crow-like.liked .i { color: var(--brand); } .crow-like.liked .i { fill: var(--brand); }
.crow-tag { color: var(--brand); background: rgba(247, 181, 0, .14); }
.cpanel { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.cpanel-foot { background: var(--surface-2); }
.cpanel-field textarea { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.cpanel-field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(247, 181, 0, .22); }
.cpanel-send { background: var(--brand); color: var(--on-lime); } .cpanel-send:disabled { background: var(--surface-3); color: var(--dim); }
.cpanel-grip i { background: #4a4a50; }
.cpanel-emoji button:hover { background: rgba(255, 255, 255, .08); }
.likers-list .liker:hover { background: var(--surface-2); }
.likers-empty .i { background: var(--brand); color: var(--on-lime); }
.skeleton, .cskel i, .dsc-skel-card i, .likers-loading i { background: var(--surface-3); animation: cirq-pulse 1.4s ease-in-out infinite; }
@keyframes cirq-pulse { 50% { opacity: .45; } }

/* ---------- dialogs + toasts ---------- */
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, .65); }
dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: none; }
.sheet-grid a, .sheet-grid label, .sheet-grid button { background: var(--surface-2); color: var(--text); }
.sheet-grid a:hover, .sheet-grid label:hover, .sheet-grid button:hover { background: var(--brand); color: var(--on-lime); box-shadow: none; }
.story-modes { background: var(--surface-2); } .story-modes button[aria-selected="true"] { background: var(--brand); color: var(--on-lime); }
.flash { background: var(--surface-3); border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); color: var(--text); }
.flash.success .i { color: var(--green); } .flash.error .i { color: var(--danger); } .flash.info .i { color: var(--brand); }

/* ---------- profile ---------- */
.profile-cover { background: var(--surface-3); }
.profile-cover::before { display: none; }
.profile-cover::after { border-color: rgba(247, 181, 0, .18); }
.profile-av .av { box-shadow: 0 0 0 4px var(--surface); }
.stat { background: var(--surface-2); border: 1px solid var(--border-soft); }
a.stat:hover { border-color: var(--brand); box-shadow: none; }
.stat b, .big-num { color: var(--text); -webkit-text-fill-color: var(--text); background: none; }
.card.lime .big-num { color: var(--on-lime); -webkit-text-fill-color: var(--on-lime); }
.tier-row, .ach, .lb-row { background: var(--surface-2); }
.tier-row.cur { background: var(--brand); color: var(--on-lime); box-shadow: none; }
.ach.earned { background: rgba(247, 181, 0, .12); } .ach .i { color: var(--brand); }
.lb-row:nth-child(1) { background: rgba(247, 181, 0, .14); } .lb-rank { background: var(--surface-3); color: var(--text); }
.saved-filter a { background: var(--surface-2); color: var(--text-2); } .saved-filter a.active { background: var(--brand); color: var(--on-lime); }
.saved-tile { background: var(--surface-2); } .saved-text { background: var(--surface-3); color: var(--text); }

/* ---------- discover, events, chat, tables, admin ---------- */
.event-cover { background: var(--surface-3); color: var(--brand); }
.date-pill { background: var(--brand); color: var(--on-lime); box-shadow: none; }
.dsc-cover { background: var(--surface-3); } .dsc-cover::after { display: none; } .dsc-cover img { opacity: .55; }
.dsc-card { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none; }
.dsc-card:hover, .dsc-card:focus-within { border-color: rgba(247, 181, 0, .45); box-shadow: none; }
.dsc-avatar .av { box-shadow: 0 0 0 4px var(--surface); }
.dsc-card.is-trending .dsc-avatar .av { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--brand); }
.dsc-flag.trend { background: var(--surface-3); color: var(--brand); box-shadow: none; }
.dsc-reason, .dsc-more { color: var(--brand); } .dsc-clear { background: var(--surface-3); } .dsc-arrows .icon-btn { background: var(--surface-2); box-shadow: none; }
.convo { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none; } .convo:hover { border-color: rgba(247, 181, 0, .45); box-shadow: none; }
.msg { background: var(--surface-2); color: var(--text); box-shadow: none; }
.msg.mine { background: var(--brand); color: var(--on-lime); box-shadow: none; } .msg .sender { color: var(--brand); }
.msg.mine .story-ref { background: rgba(11, 11, 12, .14); border-left-color: var(--on-lime); }
.send { background: var(--brand); color: var(--on-lime); }
.chat-document-card, .chat-locked { background: var(--surface-2); } .chat-file-type { background: rgba(247, 181, 0, .2); color: var(--brand); }
.opt { background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text); }
.opt:hover:not([disabled]) { border-color: var(--brand); background: rgba(247, 181, 0, .1); }
.opt.good { background: rgba(63, 203, 138, .14); border-color: var(--green); }
.table-wrap { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none; } th { background: var(--surface-2); color: var(--muted); }
.admin-nav a { background: var(--surface-2); box-shadow: none; color: var(--text-2); } .admin-nav a.active { background: var(--brand); color: var(--on-lime); }
.kpi { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none; } .kpi b { color: var(--text); -webkit-text-fill-color: var(--text); background: none; }
a.kpi:hover { border-color: rgba(247, 181, 0, .45); box-shadow: none; }
.av-stack .av { border-color: var(--surface); } .school-logo { background: var(--surface-3); border-color: var(--surface); box-shadow: none; }

/* ---------- games + coins ---------- */
.neon-title { background: none; -webkit-text-fill-color: var(--brand); color: var(--brand); filter: none; } .neon-title small { color: var(--text-2); -webkit-text-fill-color: var(--text-2); }
.reward-badge { background: var(--brand); box-shadow: none; } .reward-badge b { color: var(--on-lime); } .reward-badge small { color: rgba(11, 11, 12, .7); }
.reward-badge .coin-big { background: var(--on-lime); color: var(--brand); box-shadow: none; }
.reward-pop { background: var(--surface-2); border: 1px solid rgba(247, 181, 0, .5); box-shadow: none; }
.game-card { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none; } .game-card::after { display: none; }
.game-card:hover { border-color: rgba(247, 181, 0, .45); box-shadow: none; }
.game-card .icon-tile, .lend-link .icon-tile { background: var(--brand); color: var(--on-lime); box-shadow: none; }
.game-bar .cell { background: var(--surface); box-shadow: none; border: 1px solid var(--border-soft); } .game-bar .cell .i { color: var(--brand); }
.clue, .stage-label { background: var(--surface); box-shadow: none; border: 1px solid var(--border-soft); } .clue b { color: var(--brand); }
.deck-title::before, .deck-title::after { background: var(--brand); opacity: .5; }
.hearts i.off { background: rgba(255, 255, 255, .16); }
/* the collectible CIRQ FLIP cards: flat charcoal with a gold or rarity-coloured frame */
.pcard .face { background: var(--c1); }
.pcard .face > .in, .pcard .front .in, .mystery .in { background: #0f0f11; }
.pcard .shine, .pcard .portrait::after { display: none; }
.pcard .portrait { background: #0b0b0c; } .pcard .nameplate { background: #0b0b0c; } .pcard .tierbar { background: var(--c1); }
.pcard.dev .face { background: var(--brand); }
.pcard, .mystery { filter: none; box-shadow: none; }

/* ---------- lending ---------- */
.eyebrow { color: inherit; opacity: .6; }
.loan-card { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none; } .loan-card:hover { border-color: rgba(247, 181, 0, .45); box-shadow: none; }
.loan-card.overdue, .owe-card.overdue { box-shadow: inset 0 0 0 1.5px rgba(255, 90, 95, .6); }
.loan-left.late { color: var(--danger-ink); } .coin-in { color: var(--green); } .coin-out { color: var(--danger-ink); }
.lend-empty .i { background: var(--brand); color: var(--on-lime); }
.friend { color: var(--text); }
.quick-amounts .chip:hover { background: var(--brand); color: var(--on-lime); }
.agreement-preview { background: rgba(247, 181, 0, .1); } .agreement-preview b { color: var(--text); }
.agreement { background: var(--surface); }
.agr-head { border-bottom-color: rgba(255, 255, 255, .16); }
.agr-facts div { background: var(--surface-2); } .agr-note { background: rgba(247, 181, 0, .08); border-left-color: var(--brand); }
.agr-sign > div { border-top-color: var(--text); } .agr-ref { background: var(--surface-2); }
.tl-dot { background: #3a3a3f; box-shadow: 0 0 0 4px var(--surface-2); }
.tl-item.accepted .tl-dot, .tl-item.repaid .tl-dot, .tl-item.payment .tl-dot { background: var(--brand); }
.tl-item.overdue .tl-dot, .tl-item.fee_applied .tl-dot { background: var(--red); } .tl-item.forgiven .tl-dot { background: var(--blue); }

/* ---------- account recovery ---------- */
.recovery-banner { background: rgba(247, 181, 0, .12); box-shadow: inset 0 0 0 1.5px rgba(247, 181, 0, .5); color: var(--text); }
.recovery-banner:hover { background: rgba(247, 181, 0, .2); } .recovery-banner .i { color: var(--brand); }
.recovery-banner .rb-go { background: var(--brand); color: var(--on-lime); }
.code-box { background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand); } .code-chars { color: var(--text); } .code-chars.masked { color: var(--dim); }
.recover-promo { background: rgba(247, 181, 0, .1); box-shadow: inset 0 0 0 1.5px rgba(247, 181, 0, .5); color: var(--text); } .recover-promo > .i { color: var(--brand); }
.rc-renew summary { color: var(--brand); }

/* ---------- auth + landing ---------- */
.auth-split { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.auth-card { background: var(--surface); }
.landing { background: var(--bg); }
.land-nav .skip-btn { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); } .land-nav .skip-btn:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.land-dots i { background: #3a3a3f; } .land-dots i:first-child { background: var(--brand); }
.land-copy h1 { color: var(--text); } .land-copy .lede { color: var(--muted); }
.features div { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none; color: var(--text); }
.features .i { background: var(--brand); color: var(--on-lime); }
.tagline { color: var(--text); } .tagline span, .errpage .code, .grad-text { background: none; -webkit-text-fill-color: var(--brand); color: var(--brand); filter: none; }
/* the hero collage, redrawn in gold, orange and white */
.collage .zig { filter: none; }
.collage .zig path:first-child { stroke: #2a2a2e; }
.collage .zig path:last-child { stroke: var(--brand); }
.collage .rings circle { stroke: #3a3a3f; } .collage .rings circle:last-child { fill: #3a3a3f; stroke: none; }
.collage .orbit { border-color: rgba(255, 255, 255, .35); }
.collage .face { background: var(--surface-3); box-shadow: 0 0 0 4px var(--bg); }
.collage .follow { background: var(--brand); color: var(--on-lime); box-shadow: none; }
.collage .globe { background: var(--text); color: var(--bg); box-shadow: 0 0 0 5px rgba(255, 255, 255, .12); }
.collage .dot1 { background: var(--orange); } .collage .dot2 { border-color: var(--brand); } .collage .dot3 { background: var(--text); }
.collage .gem { background: var(--brand); } .collage .spark { color: var(--text); } .collage .sp3 { color: var(--orange); }

/* ---------- fixes found in the first review ---------- */
/* reels sit on video: the "Following" pill is a light pill with dark text */
.reel .info .btn.following { background: rgba(255, 255, 255, .92); color: var(--on-lime); }
/* the CIRQ FLIP collectibles: rarity is shown by one flat colour, with no neon glow */
.pcard { --c1: #8a8a93; --c2: #8a8a93; }
.pcard.r0 { --c1: #8a8a93; --c2: #8a8a93; } .pcard.r1 { --c1: #d2d2d7; --c2: #d2d2d7; }
.pcard.r2 { --c1: #f7b500; --c2: #f7b500; } .pcard.r3 { --c1: #f2641a; --c2: #f2641a; }
.pcard.dev { --c1: #f7b500; --c2: #f7b500; }
.pcard .front img, .pcard.dev, .mystery { filter: none; }
/* a friend's profile now has Following + message + gift + menu: keep them on one row */
.profile-cta { gap: 6px; } .profile-cta .btn { padding: 0 16px; min-height: 42px; }
.round-ghost { width: 42px; height: 42px; } .profile-cta .menu .icon-btn { width: 34px; height: 34px; }

/* ---------- theme switch (profile + settings) ---------- */
.theme-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); max-width: 100%; }
.theme-switch form { margin: 0; display: contents; }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font: 800 .9rem var(--font); cursor: pointer; transition: background .15s, color .15s; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--brand); color: var(--on-lime); cursor: default; }
.theme-switch .i { width: 18px; height: 18px; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.theme-row b { font-weight: 900; } .theme-row small { display: block; color: var(--muted); font-weight: 600; }