/* ==========================================================================
   Bold. Design system v0
   Layers: reset → base → layout → components → utilities
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  /* always reserve the scrollbar gutter so vw-based centring doesn't jump
     when moving between short (no scrollbar) and tall pages. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
  body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { padding: 0; list-style: none; }
  table { border-collapse: collapse; }
  :focus-visible { outline: none; }
  [x-cloak] { display: none !important; }
}

/* ------------------------------------------------------------------- base */
@layer base {
  :root {
    /* brand */
    --brand-50: #EEF3FF; --brand-100: #DDE7FF; --brand-200: #BCD0FF;
    --brand-300: #8FB0FF; --brand-400: #5E8BFF; --brand-500: #2F6BFF;
    --brand-600: #1F56E6; --brand-700: #1943B8;
    --brand-solid: var(--brand-500);
    --brand-ink: var(--brand-700);
    --accent-500: #FF4F8B; --accent-50: #FFF0F5;
    --gold-500: #F5A524; --gold-50: #FFF7E6;
    --mint-500: #12B76A; --mint-50: #E9FBF2;
    --danger-500: #E5484D; --danger-50: #FFF0F0;
    --grad-brand: linear-gradient(135deg, #2F6BFF 0%, #7C5CFF 55%, #FF4F8B 100%);
    /* ink & surfaces */
    --ink-900: #0C0E14; --ink-800: #1B1F29; --ink-700: #2E3440;
    --ink-500: #5D6472; --ink-400: #8A919E; --ink-300: #B7BDC8;
    --line: #E9EBF0; --line-strong: #D8DCE3;
    --surface: #FFFFFF; --surface-2: #F5F6F8; --surface-3: #ECEEF2;
    --scrim: rgba(12, 14, 20, .48);
    /* radii */
    --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
    --r-2xl: 28px; --r-full: 999px;
    /* spacing. 4px scale */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
    /* elevation & motion */
    --shadow-sm: 0 1px 2px rgba(12, 14, 20, .06);
    --shadow-md: 0 6px 20px -6px rgba(12, 14, 20, .14);
    --shadow-lg: 0 20px 48px -12px rgba(12, 14, 20, .24);
    --ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 28%, transparent);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
    /* metrics */
    --header-h: 64px;
    --rail-w: 256px; --rail-w-compact: 84px;
    --feed-w: 640px; --aside-w: 340px; --page-max: 1320px;
    --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", Roboto, Arial, sans-serif;
  }
  @media (max-width: 767px) {
    :root { --header-h: 56px; --rail-w-compact: 64px; }
  }

  @font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/plus-jakarta-sans-var-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
  }

  body {
    font-family: var(--font);
    font-size: 15px; line-height: 23px; font-weight: 450;
    color: var(--ink-900); background: var(--surface);
    font-optical-sizing: auto;
  }

  /* never let the document pan horizontally. Wide children (topbar end
     cluster, tables, bleed rows) clip instead of dragging the whole page.
     `clip` (not hidden) creates no scrollport, so sticky keeps working. */
  html, body { overflow-x: clip; }

  h1, .display { text-wrap: balance; }
  a { color: var(--brand-ink); font-weight: 600; }
  a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }
  .post__meta a, .comment__time a { color: inherit; font-weight: inherit; }

  ::selection { background: var(--brand-200); }
  :focus-visible { box-shadow: var(--ring); border-radius: var(--r-sm); }

  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  /* -- topbar ---------------------------------------------------------- */
  .topbar {
    position: sticky; top: 0; z-index: 60;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .topbar__inner {
    max-width: var(--page-max); margin-inline: auto; height: 100%;
    display: flex; align-items: center; gap: var(--s-2);
    padding-inline: var(--s-4);
  }
  @media (min-width: 768px) { .topbar__inner { padding-inline: var(--s-6); gap: var(--s-3); } }
  .topbar__start { display: flex; align-items: center; gap: var(--s-2); flex: none; }
  .topbar__center { flex: 1; display: flex; justify-content: center; min-width: 0; }
  .topbar__end { display: flex; align-items: center; gap: var(--s-2); flex: none; }

  .wordmark {
    display: inline-flex; align-items: baseline; gap: 5px;
    font-size: 23px; font-weight: 800; letter-spacing: -.04em;
    line-height: 1; color: var(--ink-900);
  }
  .wordmark:hover { text-decoration: none; }
  .wordmark__tag {
    position: relative; top: -7px;
    font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1;
    color: #fff; background: var(--grad-brand);
    padding: 3px 5px; border-radius: var(--r-xs);
  }

  /* search pill */
  .search {
    display: flex; align-items: center; gap: var(--s-2);
    width: 100%; max-width: 520px; height: 42px;
    background: var(--surface-2); border-radius: var(--r-full);
    padding-inline: 16px 8px; color: var(--ink-500);
    border: 1px solid transparent;
    transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .search:focus-within { background: var(--surface); border-color: var(--brand-300); box-shadow: var(--ring); }
  .search .icon { width: 18px; height: 18px; }
  .search input {
    flex: 1; min-width: 0; border: 0; background: none; outline: none;
    font-size: 14px; font-weight: 500; color: var(--ink-900);
  }
  .search input::placeholder { color: var(--ink-400); }
  .search__kbd {
    flex: none; display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; color: var(--ink-400);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xs); padding: 3px 6px;
  }
  @media (max-width: 767px) {
    .search { display: none; }
  }

  /* -- app shell -------------------------------------------------------- */
  .app {
    max-width: var(--page-max); margin-inline: auto;
    display: grid;
    grid-template-columns: var(--rail-cur, var(--rail-w)) minmax(0, 1fr);
    transition: grid-template-columns var(--dur-3) var(--ease);
  }
  html[data-nav="compact"] .app { --rail-cur: var(--rail-w-compact); }
  html[data-nav="hidden"] .app { grid-template-columns: minmax(0, 1fr); }
  .app__body {
    min-width: 0; display: flex; justify-content: center;
    align-items: stretch;
  }
  /* keep the content group centered in the space remaining after the rail. The body box extends to the viewport edge when the .app container is
     narrower than the viewport (page-max capped) */
  @media (min-width: 768px) {
    html[data-nav="expanded"] .app__body,
    html[data-nav="compact"] .app__body,
    html[data-nav="overlay"] .app__body {
      margin-right: calc(-1 * max(0px, (100vw - var(--page-max)) / 2));
    }
  }
  .app__body--wide .main { max-width: 1040px; }
  /* one shared 1040px content box on every page. Wide pages fill it,
     feed pages pin the column left + aside right. Edges never move when
     navigating, and the aside slot exists before the element parses (was
     a ~170px jump on feed pages). */
  @media (min-width: 1200px) {
    .app__body:not(.app__body--wide):not(.app__body--clip) {
      display: grid; column-gap: 60px;
      grid-template-columns: minmax(0, var(--feed-w)) var(--aside-w);
    }
  }
  /* expanded rail (256px) + 1040px content = aside only truly fits at
     ~1296px viewport. In the 1200-1296 band it hangs off the right edge,
     so collapse to one column until it fits (compact/hidden rails still
     fit at 1200). */
  @media (min-width: 1200px) and (max-width: 1295.98px) {
    html[data-nav="expanded"] .app__body:not(.app__body--wide):not(.app__body--clip) {
      grid-template-columns: minmax(0, var(--feed-w));
    }
    html[data-nav="expanded"] .aside { display: none; }
  }
  .main { width: 100%; max-width: var(--feed-w); min-width: 0; }
  @media (min-width: 768px) {
    .main { border-inline: 1px solid var(--line); }
  }
  .aside {
    display: none; width: var(--aside-w); flex: none;
    padding: var(--s-5) var(--s-4) var(--s-8) var(--s-5);
  }
  @media (min-width: 1200px) { .aside { display: block; } }
  .aside > * + * { margin-top: var(--s-4); }
  .aside .widget { position: sticky; }
  .aside-stack { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .aside-stack > * + * { margin-top: var(--s-4); }

  /* -- rail ------------------------------------------------------------- */
  .rail {
    position: sticky; top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-3) var(--s-3) var(--s-4);
    display: flex; flex-direction: column; gap: 2px;
    scrollbar-width: thin;
    background: var(--surface);
    z-index: 50;
  }
  html[data-nav="hidden"] .rail { display: none; }
  .rail__section {
    margin: var(--s-4) var(--s-3) var(--s-1);
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-400);
  }
  .rail__item {
    position: relative;
    display: flex; align-items: center; gap: var(--s-3);
    height: 44px; padding-inline: var(--s-3);
    border-radius: var(--r-md);
    font-size: 15px; font-weight: 600; color: var(--ink-700);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .rail__item .icon { width: 22px; height: 22px; }
  .rail__item:hover { background: var(--surface-2); }
  .rail__item.is-active { background: var(--brand-50); color: var(--brand-ink); }
  .rail__item.is-active .icon { stroke-width: 2.2; }
  .rail__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail__badge {
    margin-left: auto; min-width: 20px; height: 20px; padding-inline: 6px;
    display: inline-grid; place-items: center;
    border-radius: var(--r-full); background: var(--accent-500); color: #fff;
    font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  }

  /* compact state. Icon over tiny label */
  html[data-nav="compact"] .rail {
    padding-inline: var(--s-2); align-items: center;
    /* the rail is a scroll container (overflow-y:auto). Any child wider than
       the rail would open a sideways scroll range and drag the centered icon
       column (create button) off-center. Clip x; a scrollbar would do the same. */
    overflow-x: clip; scrollbar-width: none;
  }
  html[data-nav="compact"] .rail::-webkit-scrollbar { display: none; }
  html[data-nav="compact"] .rail__section { display: none; }
  html[data-nav="compact"] .rail__item {
    flex-direction: column; justify-content: center; gap: 3px;
    width: 100%; max-width: 68px; height: auto; min-height: 56px;
    padding: 6px 2px; text-align: center;
  }
  html[data-nav="compact"] .rail__item .icon { width: 24px; height: 24px; }
  html[data-nav="compact"] .rail__label {
    flex: none; width: 100%; font-size: 10.5px; font-weight: 600; line-height: 1.2;
  }
  html[data-nav="compact"] .rail__badge {
    position: absolute; top: 4px; left: 50%; margin-left: 6px;
    min-width: 17px; height: 17px; padding-inline: 4px; font-size: 10px;
    border: 2px solid var(--surface);
  }
  @media (max-width: 767px) {
    html[data-nav="compact"] .rail__item { max-width: 56px; min-height: 54px; }
  }

  /* mobile overlay state */
  .scrim {
    position: fixed; inset: 0; z-index: 70;
    background: var(--scrim);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-2) var(--ease);
  }
  .rail__head { display: none; }
  @media (max-width: 767px) {
    /* mobile uses the same joined 3-state rail as desktop. The fixed
       drawer only exists if data-nav="overlay" gets set manually */
    html[data-nav="overlay"] .app { grid-template-columns: minmax(0, 1fr); }
    html[data-nav="overlay"] .rail {
      position: fixed; left: 0; top: 0; bottom: 0; z-index: 80;
      width: min(300px, 85vw); align-items: stretch;
      padding-inline: var(--s-3);
      box-shadow: var(--shadow-lg);
      animation: rail-in var(--dur-3) var(--ease);
    }
    html[data-nav="overlay"] .rail__head {
      display: flex; align-items: center; justify-content: space-between;
      padding-block: var(--s-1) var(--s-3);
      border-bottom: 1px solid var(--line); margin-bottom: var(--s-2);
    }
    html[data-nav="overlay"] .rail__section { display: block; }
    html[data-nav="overlay"] .rail__item {
      flex-direction: row; justify-content: flex-start; gap: var(--s-3);
      max-width: none; height: 44px; min-height: 0; padding: 0 var(--s-3); text-align: left;
    }
    html[data-nav="overlay"] .rail__item .icon { width: 22px; height: 22px; }
    html[data-nav="overlay"] .rail__label { flex: 1; font-size: 15px; line-height: inherit; }
    html[data-nav="overlay"] .rail__badge {
      position: static; margin-left: auto; border: 0;
      min-width: 20px; height: 20px; padding-inline: 6px; font-size: 11px;
    }
    html[data-nav="overlay"] .rail-join { display: block; }
    html[data-nav="overlay"] .rail-account { display: flex; }
    html[data-nav="overlay"] .scrim { opacity: 1; pointer-events: auto; }
  }
  @keyframes rail-in { from { transform: translateX(-100%); } }

  /* rail join panel (guest, expanded only) */
  .rail-join {
    margin-top: var(--s-4); padding: var(--s-4);
    background: var(--surface-2); border-radius: var(--r-lg);
  }
  .rail-join .icon--logo { width: 30px; height: 30px; }
  .rail-join__title { margin-top: var(--s-3); font-size: 15px; font-weight: 800; }
  .rail-join__text { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-500); }
  .rail-join .button { margin-top: var(--s-3); width: 100%; }
  html[data-nav="compact"] .rail-join { display: none; }
  html[data-nav="compact"] .rail__item--join {
    display: flex; background: var(--grad-brand); color: #fff;
  }
  .rail__item--join { display: none; }

  /* member create CTA + account chip */
  .rail__create {
    margin: var(--s-2) 0 var(--s-3);
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    height: 46px; border-radius: var(--r-full);
    background: var(--grad-brand); color: #fff;
    font-size: 15px; font-weight: 800;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .rail__create:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
  .rail__create .icon { width: 20px; height: 20px; flex: none; }
  /* generic .rail__label is flex:1 (fills nav-item rows). Inside the
     centered CTA that stretch shoved icon+text left; keep it hugging
     its content so justify-content centers the pair as one unit. */
  .rail__create .rail__label { flex: none; line-height: 1; }
  html[data-nav="compact"] .rail__create {
    width: 48px; height: 48px; padding: 0; border-radius: 50%;
    align-self: center; margin-inline: auto;
  }
  html[data-nav="compact"] .rail__create .rail__label { display: none; }
  .rail__spacer { flex: 1; }
  .rail-account {
    margin-top: var(--s-3);
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2); border-radius: var(--r-md);
    position: relative;
  }
  .rail-account:hover { background: var(--surface-2); }
  .rail-account__who { flex: 1; min-width: 0; text-align: left; }
  .rail-account__name { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-account__handle { display: block; font-size: 12px; color: var(--ink-500); }
  .rail-account .icon { color: var(--ink-400); }
  html[data-nav="compact"] .rail-account { justify-content: center; padding: var(--s-1); }
  /* !important. .icon-button's display:grid lives in the later components
     layer and would otherwise win, keeping the chip wider than the rail */
  html[data-nav="compact"] .rail-account__who,
  html[data-nav="compact"] .rail-account > .icon-button { display: none !important; }

  /* page wrapper for full-width pages (landing etc.) */
  .page { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--s-4); }
  @media (min-width: 768px) { .page { padding-inline: var(--s-6); } }
}

/* ------------------------------------------------------------- components */
@layer components {
  /* -- icons ------------------------------------------------------------ */
  .icon {
    width: 1.25em; height: 1.25em; flex: none;
    stroke: currentColor; fill: none; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -.18em;
  }
  .icon--sm { width: 16px; height: 16px; }
  .icon--md { width: 20px; height: 20px; }
  .icon--lg { width: 24px; height: 24px; }
  .icon--xl { width: 30px; height: 30px; }
  .icon--fill { fill: currentColor; stroke: none; }

  /* -- buttons ---------------------------------------------------------- */
  .button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2); height: 40px; padding-inline: 18px;
    border-radius: var(--r-full); border: 1px solid transparent;
    font-size: 15px; font-weight: 700; line-height: 1;
    color: var(--ink-800); background: var(--surface-2);
    white-space: nowrap; user-select: none;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
      border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
      box-shadow var(--dur-1) var(--ease);
  }
  .button:hover { text-decoration: none; background: var(--surface-3); }
  .button:active { transform: scale(.97); }
  .button--primary { background: var(--brand-solid); color: #fff; }
  .button--primary:hover { background: var(--brand-600); }
  .button--gradient { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-sm); }
  /* redeclare the gradient on :hover. The generic .button:hover above sets
     background: var(--surface-3), and at equal specificity the later rule
     wins; without this the CTA washes out to near-white on hover */
  .button--gradient:hover { background: var(--grad-brand); box-shadow: var(--shadow-md); transform: translateY(-1px); filter: brightness(1.06); }
  .button--secondary { background: var(--brand-50); color: var(--brand-ink); }
  .button--secondary:hover { background: var(--brand-100); }
  .button--outline { background: var(--surface); border-color: var(--line-strong); color: var(--ink-800); }
  .button--outline:hover { border-color: var(--ink-300); background: var(--surface-2); }
  .button--ghost { background: transparent; color: var(--brand-ink); }
  .button--ghost:hover { background: var(--brand-50); }
  .button--danger { background: var(--danger-500); color: #fff; }
  .button--danger:hover { background: #D13438; }
  .button--sm { height: 32px; padding-inline: 14px; font-size: 13.5px; }
  .button--lg { height: 48px; padding-inline: 26px; font-size: 16px; }
  .button--block { width: 100%; }
  .button[disabled] { opacity: .55; pointer-events: none; }
  .button .icon { width: 18px; height: 18px; }

  .icon-button {
    position: relative; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-grid; place-items: center;
    color: var(--ink-700); background: transparent;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .icon-button:hover { background: var(--surface-2); text-decoration: none; }
  .icon-button .icon { width: 21px; height: 21px; }
  .icon-button--sm { width: 34px; height: 34px; }
  .icon-button--sm .icon { width: 18px; height: 18px; }
  .icon-button--outline { border: 1px solid var(--line-strong); background: var(--surface); }
  .icon-button__badge {
    position: absolute; top: 2px; right: 0;
    min-width: 17px; height: 17px; padding-inline: 4px;
    display: grid; place-items: center;
    border-radius: var(--r-full); background: var(--accent-500); color: #fff;
    border: 2px solid var(--surface);
    font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  @media (max-width: 767px) {
    .icon-button { width: 44px; height: 44px; }
    /* language stays in the topbar on small screens (it replaced the mobile
       search shortcut); the pass pill still lives in the footer/rail menu */
    .topbar__end .pass-pill { display: none; }
  }

  /* -- chips & badges ---------------------------------------------------- */
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding-inline: 14px; flex: none;
    border-radius: var(--r-full); background: var(--surface-2);
    font-size: 14px; font-weight: 600; color: var(--ink-800);
    border: 1px solid transparent;
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .chip:hover { background: var(--surface-3); text-decoration: none; }
  .chip--tag { background: var(--brand-50); color: var(--brand-ink); }
  .chip--tag:hover { background: var(--brand-100); }
  .chip--tag::before { content: "#"; font-weight: 800; opacity: .7; }
  .chip--active { background: var(--ink-900); color: #fff; }
  .chip--active:hover { background: var(--ink-800); }
  .chip .icon { width: 15px; height: 15px; }
  .chip__count { font-size: 12px; color: var(--ink-400); font-weight: 600; font-variant-numeric: tabular-nums; }
  .chip--tag .chip__count { color: var(--brand-300); }

  /* -- categories system (doc/bold/categories.md) ----------------------------- */
  /* .catchip. Category directory chip: bordered pill, name + creator count.
     Used on /categories group sections and "More in this category" rows. */
  .catchip {
    height: auto; min-height: 40px; padding-block: 6px; gap: 9px;
    background: var(--surface); border-color: var(--line);
  }
  .catchip:hover { border-color: var(--brand-300); background: var(--brand-50); }
  /* .chip--custom. Creator-defined niche label on profiles (links to a tag
     page, not a hub). Accent tint + the small "custom" tag set it apart from
     curated categories. */
  .chip--custom { background: var(--accent-50); }
  .chip--custom:hover { background: color-mix(in srgb, var(--accent-500) 15%, #fff); }
  .chip__custom {
    font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--accent-500);
  }

  .badge {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding-inline: 5px;
    border-radius: var(--r-full); background: var(--accent-500); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .badge--mint { background: var(--mint-500); }
  .badge--gold { background: var(--gold-500); }
  .badge--ink { background: var(--ink-500); }

  /* -- avatar ------------------------------------------------------------- */
  .avatar {
    border-radius: 50%; object-fit: cover; flex: none;
    background: var(--surface-3); color: var(--ink-400);
    width: 44px; height: 44px;
  }
  .avatar--xs { width: 24px; height: 24px; }
  .avatar--sm { width: 32px; height: 32px; }
  .avatar--md { width: 44px; height: 44px; }
  .avatar--lg { width: 64px; height: 64px; }
  .avatar--xl { width: 96px; height: 96px; }
  .avatar--2xl { width: 132px; height: 132px; }
  .avatar--ring {
    padding: 2px; border: 3px solid transparent;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      var(--grad-brand) border-box;
  }
  .avatar--ring.avatar--xs, .avatar--ring.avatar--sm { border-width: 2px; padding: 1.5px; }
  .avatar-wrap { position: relative; display: inline-flex; flex: none; }
  .avatar-wrap__dot {
    position: absolute; right: 1px; bottom: 1px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--mint-500); border: 2.5px solid var(--surface);
  }
  .avatar-wrap--lg .avatar-wrap__dot { width: 18px; height: 18px; right: 5px; bottom: 5px; border-width: 3px; }

  .verified { width: 16px; height: 16px; color: var(--brand-500); flex: none; align-self: center; }

  /* -- post --------------------------------------------------------------- */
  .post { padding: var(--s-4); }
  @media (min-width: 768px) { .post { padding: var(--s-5) var(--s-6); } }
  .post + .post, .post-sep { border-top: 1px solid var(--line); }
  .post__head { display: flex; gap: var(--s-3); align-items: flex-start; }
  .post__who { flex: 1; min-width: 0; }
  .post__name {
    display: flex; align-items: center; gap: 5px;
    font-size: 15px; font-weight: 700; color: var(--ink-900);
  }
  .post__name a { color: inherit; }
  .post__meta { font-size: 13px; color: var(--ink-500); font-weight: 500; }
  .post__menu { margin-inline-start: auto; }
  .post__text {
    margin-top: var(--s-3); font-size: 15px; line-height: 23px;
    overflow-wrap: break-word;
  }
  .post__text a { color: var(--brand-ink); font-weight: 600; }
  .post__more { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--brand-ink); }
  .post__media { margin-top: var(--s-3); }
  @media (min-width: 640px) {
    .post__media .media, .post__media .media-grid, .post__media .pcarousel { border-radius: var(--r-lg); overflow: hidden; }
  }
  @media (max-width: 639px) {
    .post__media { margin-inline: calc(var(--s-4) * -1); }
  }
  .post__actions {
    margin-top: var(--s-2); margin-inline-start: -10px;
    display: flex; align-items: center; gap: 2px;
  }
  .action {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding-inline: 10px; border-radius: var(--r-full);
    font-size: 14px; font-weight: 600; color: var(--ink-500);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .action .icon { width: 20px; height: 20px; }
  .action:hover { text-decoration: none; }
  .action--like:hover { color: var(--accent-500); background: var(--accent-50); }
  .action--comment:hover { color: var(--brand-500); background: var(--brand-50); }
  .action--tip:hover { color: var(--gold-500); background: var(--gold-50); }
  .action--share:hover { color: var(--mint-500); background: var(--mint-50); }
  .action--save:hover { color: var(--brand-500); background: var(--brand-50); }
  .action--like.is-active { color: var(--accent-500); }
  .action--like.is-active .icon { fill: currentColor; animation: pop var(--dur-3) var(--ease); }
  .action--save.is-active { color: var(--brand-500); }
  .action--save.is-active .icon { fill: currentColor; }
  .action--repost:hover { color: var(--mint-500); background: var(--mint-50); }
  .action--repost.is-active { color: var(--mint-500); }
  .action--repost.is-active .icon { animation: pop var(--dur-3) var(--ease); }
  .post__views {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; color: var(--ink-400);
    font-variant-numeric: tabular-nums;
  }
  .post__views .icon { width: 17px; height: 17px; }
  @keyframes pop { 40% { transform: scale(1.28); } }
  .post--detail .post__name { font-size: 16px; }
  .post--detail .post__text { font-size: 16px; line-height: 25px; }
  .post__tagrow { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

  /* -- media --------------------------------------------------------------- */
  .media { position: relative; background: var(--surface-3); }
  .media > img, .media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .media-grid { display: grid; gap: 3px; background: var(--surface-3); }
  .media-grid .media { aspect-ratio: 1; }
  .media-grid--2 { grid-template-columns: 1fr 1fr; }
  .media-grid--3 { grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
  .media-grid--3 .media { aspect-ratio: auto; }
  .media-grid--3 .media:first-child { grid-row: 1 / -1; }
  .media-grid--4 { grid-template-columns: 1fr 1fr; }
  .media-grid--5 { grid-template-columns: 1fr 1fr; }
  .media__count {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(12, 14, 20, .52); color: #fff;
    font-size: 28px; font-weight: 800;
  }
  .media--video .media__play {
    position: absolute; inset: 0; margin: auto;
    width: 64px; height: 64px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .94); color: var(--ink-900);
    box-shadow: var(--shadow-md);
  }
  .media--video .media__play .icon { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 3px; }
  .media__dur {
    position: absolute; right: 10px; bottom: 10px;
    padding: 3px 8px; border-radius: var(--r-xs);
    background: rgba(12, 14, 20, .72); color: #fff;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .media--locked { display: grid; place-items: center; overflow: hidden; background: var(--grad-brand); }
  .media--locked > img { position: absolute; inset: 0; filter: blur(26px) saturate(1.15); transform: scale(1.15); }
  .media--locked::after { content: ""; position: absolute; inset: 0; background: rgba(12, 14, 20, .28); }
  .media--locked .media__lock { position: relative; z-index: 1; text-align: center; color: #fff; padding: var(--s-6); }
  .media__lock-ic {
    width: 56px; height: 56px; margin-inline: auto;
    border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--ink-900);
    display: grid; place-items: center; box-shadow: var(--shadow-md);
  }
  .media__lock-ic .icon { width: 24px; height: 24px; }
  .media__lock-title { margin-top: var(--s-3); font-size: 17px; font-weight: 800; }
  .media__lock-meta { margin-top: 3px; font-size: 13.5px; font-weight: 500; opacity: .88; }
  .media__lock .button { margin-top: var(--s-4); }

  /* -- stories -------------------------------------------------------------- */
  .stories {
    display: flex; gap: var(--s-3); overflow-x: auto;
    padding: var(--s-4) var(--s-4) var(--s-3);
    scrollbar-width: none;
  }
  .stories::-webkit-scrollbar { display: none; }
  .story { flex: none; width: 72px; display: grid; justify-items: center; gap: 6px; }
  .story__name {
    font-size: 11.5px; font-weight: 600; color: var(--ink-700);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .story--add .avatar-wrap { position: relative; }
  .story--add .avatar-wrap::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--brand-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/11px no-repeat;
    border: 2.5px solid var(--surface);
  }
  .story .avatar--ring { width: 64px; height: 64px; }

  /* -- composer --------------------------------------------------------------- */
  .composer { padding: var(--s-4); display: flex; gap: var(--s-3); border-bottom: 1px solid var(--line); }
  .composer__box { flex: 1; min-width: 0; }
  .composer textarea {
    width: 100%; border: 0; outline: none; resize: none;
    font-size: 16px; line-height: 24px; font-weight: 450;
    padding-top: 8px; background: transparent; color: var(--ink-900);
  }
  .composer textarea::placeholder { color: var(--ink-400); }
  .composer__bar { display: flex; align-items: center; gap: 2px; margin-top: var(--s-2); }
  .composer__bar .icon-button { color: var(--brand-500); width: 36px; height: 36px; }
  .composer__bar .icon-button .icon { width: 19px; height: 19px; }
  .composer__bar .button { margin-left: auto; }

  /* -- comments ----------------------------------------------------------------- */
  .comment { display: flex; gap: var(--s-3); padding: var(--s-4); }
  .comment + .comment { border-top: 1px solid var(--line); }
  .comment__bubble { flex: 1; min-width: 0; }
  .comment__head { display: flex; align-items: baseline; gap: 7px; }
  .comment__name { font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .comment__head .verified, .comment__head .badge { flex: none; }
  .comment__time { flex: none; white-space: nowrap; font-size: 12.5px; color: var(--ink-400); }
  .comment__text { margin-top: 2px; font-size: 14.5px; line-height: 21px; overflow-wrap: anywhere; }
  .comment__edit { margin-top: 8px; }
  .comment__edit .textarea { min-height: 64px; font-size: 14.5px; line-height: 21px; padding: 10px 12px; }
  .comment__foot { display: flex; flex-wrap: wrap; column-gap: var(--s-4); row-gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-500); }
  .comment__foot button, .comment__foot > a { display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; text-decoration: none; }
  .comment__foot .icon { width: 15px; height: 15px; }
  .comment__replies { margin-top: var(--s-3); padding-left: var(--s-3); border-left: 2px solid var(--line); display: grid; gap: var(--s-4); }
  .comment__replies .comment { padding: 0; border: 0; }
  .comment__replies .avatar { width: 32px; height: 32px; }
  .comment__replies .comment__replies { margin-left: -44px; padding-left: 44px; }
  .comment-login { padding: var(--s-5) var(--s-4); text-align: center; border-bottom: 1px solid var(--line); }
  .comment-login p { font-size: 14px; color: var(--ink-500); }
  .comment-login .cluster { justify-content: center; margin-top: var(--s-3); }

  /* -- tabs ----------------------------------------------------------------------- */
  .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding-inline: var(--s-2); }
  .tabs__item {
    position: relative; padding: 13px 14px 12px;
    font-size: 15px; font-weight: 600; color: var(--ink-500);
    display: inline-flex; align-items: center; gap: 6px;
    transition: color var(--dur-1) var(--ease);
  }
  .tabs__item:hover { color: var(--ink-800); text-decoration: none; }
  .tabs__item.is-active { color: var(--ink-900); font-weight: 700; }
  .tabs__item.is-active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
    height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-500);
  }
  .tabs__count { font-size: 12.5px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
  .tabs--sticky {
    position: sticky; top: var(--header-h); z-index: 40;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }

  /* -- section head / widgets -------------------------------------------------- */
  .section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
    margin-bottom: var(--s-3);
  }
  .section-head__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 7px; }
  .section-head__title .icon { width: 17px; height: 17px; color: var(--gold-500); }
  .section-head__more { font-size: 13.5px; font-weight: 700; color: var(--brand-ink); flex: none; }

  .widget { background: var(--surface-2); border-radius: var(--r-xl); padding: var(--s-5); }
  .widget .section-head__title { font-size: 17px; }
  .widget > * + * { margin-top: var(--s-3); }
  .widget__list { display: grid; }
  .widget__list > * + * { margin-top: var(--s-3); }
  .widget--flat { background: var(--surface); border: 1px solid var(--line); }

  .tag-rank { display: grid; }
  .tag-rank__item {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 7px 8px; margin-inline: -8px; border-radius: var(--r-md);
  }
  .tag-rank__item:hover { background: var(--surface-3); text-decoration: none; }
  .tag-rank__n { width: 22px; font-size: 13px; font-weight: 800; color: var(--ink-300); font-variant-numeric: tabular-nums; }
  .tag-rank__item:nth-child(-n+3) .tag-rank__n { color: var(--accent-500); }
  .tag-rank__who { flex: 1; min-width: 0; }
  .tag-rank__tag { display: block; font-size: 14px; font-weight: 700; color: var(--ink-900); }
  .tag-rank__count { font-size: 12.5px; color: var(--ink-500); }
  .tag-rank__item > .icon { color: var(--ink-300); }

  /* -- creators ------------------------------------------------------------------- */
  .creator-row {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 6px 8px; margin-inline: -8px; border-radius: var(--r-md);
  }
  .creator-row:hover { background: var(--surface-3); text-decoration: none; }
  .creator-row__who { flex: 1; min-width: 0; }
  .creator-row__name {
    display: flex; align-items: center; gap: 4px; min-width: 0;
    font-size: 14px; font-weight: 700; color: var(--ink-900);
    white-space: nowrap; overflow: hidden;
  }
  .creator-row__name:hover { text-decoration: underline; }
  .creator-row__name > .truncate { min-width: 0; flex: 0 1 auto; }
  .creator-row__name .verified { flex: none; }
  .creator-row__handle { display: block; font-size: 12.5px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .creator-row .button { flex: none; }

  .creator-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .creator-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .creator-card__cover { height: 88px; background: var(--grad-brand); position: relative; }
  .creator-card__cover img { width: 100%; height: 100%; object-fit: cover; }
  .creator-card__body { padding: 0 var(--s-4) var(--s-4); display: flex; flex-direction: column; flex: 1; }
  .creator-card__avatar {
    position: relative; z-index: 1;
    margin-top: -24px; width: 64px; height: 64px;
    border: 3px solid var(--surface); border-radius: 50%;
  }
  .creator-card__name { margin-top: var(--s-2); font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 5px; color: var(--ink-900); min-width: 0; }
  .creator-card__name:hover { text-decoration: underline; }
  .creator-card__handle { font-size: 13px; color: var(--ink-500); }
  .creator-card__bio { margin-top: var(--s-2); font-size: 13.5px; line-height: 19px; color: var(--ink-700); }
  .creator-card__stats { margin-top: var(--s-3); display: flex; gap: var(--s-4); font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
  .creator-card__stats b { color: var(--ink-900); font-weight: 800; font-variant-numeric: tabular-nums; }
  .creator-card__body .button { margin-top: var(--s-4); }

  /* -- tag hero ------------------------------------------------------------------- */
  .tag-hero { padding: var(--s-6) var(--s-4) var(--s-5); }
  .tag-hero__title {
    font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em;
    display: flex; align-items: center; gap: var(--s-3);
  }
  .tag-hero__title .icon { width: 26px; height: 26px; color: var(--gold-500); }
  .tag-hero__meta { margin-top: var(--s-2); font-size: 14px; font-weight: 500; color: var(--ink-500); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .tag-hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
  .tag-hero__actions { margin-left: auto; align-self: flex-start; display: flex; gap: var(--s-2); }
  .tag-hero__row { display: flex; align-items: flex-start; gap: var(--s-3); }
  .tag-cloud { display: flex; gap: var(--s-2); overflow-x: auto; padding-block: var(--s-3) var(--s-1); scrollbar-width: none; }
  .tag-cloud::-webkit-scrollbar { display: none; }

  /* -- profile --------------------------------------------------------------------- */
  .profile-hero__cover { aspect-ratio: 3 / 1; background: var(--grad-brand); position: relative; }
  .profile-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 767px) { .profile-hero__cover { aspect-ratio: 5 / 2; } }
  .profile-hero__avatar-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding-inline: var(--s-4); margin-top: calc(var(--s-16) * -1);
    position: relative;
  }
  .profile-hero__avatar-row .avatar { border: 4px solid var(--surface); width: 132px; height: 132px; }
  @media (max-width: 767px) {
    .profile-hero__avatar-row { margin-top: -48px; }
    .profile-hero__avatar-row .avatar { width: 96px; height: 96px; }
  }
  .profile-hero__actions { display: flex; gap: var(--s-2); padding-bottom: var(--s-2); }
  .profile-hero__info { padding: var(--s-3) var(--s-4) var(--s-4); }
  .profile-hero__name { font-size: 26px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 7px; }
  .profile-hero__name .verified { width: 21px; height: 21px; }
  .profile-hero__handle { margin-top: 3px; font-size: 14px; color: var(--ink-500); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .status-dot { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
  .status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-500); }
  .status-dot--off::before { background: var(--ink-300); }
  .profile-hero__stats { display: flex; gap: var(--s-5); margin-top: var(--s-3); font-size: 14px; color: var(--ink-500); font-weight: 500; flex-wrap: wrap; }
  .profile-hero__stats span { display: inline-flex; align-items: center; gap: 6px; }
  .profile-hero__stats b { color: var(--ink-900); font-weight: 800; font-variant-numeric: tabular-nums; }
  .profile-hero__stats .icon { width: 16px; height: 16px; color: var(--ink-400); }
  .profile-hero__bio { margin-top: var(--s-3); font-size: 15px; line-height: 23px; }
  .profile-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: 13.5px; color: var(--ink-500); font-weight: 500; }
  .profile-hero__meta span, .profile-hero__meta a { display: inline-flex; align-items: center; gap: 6px; }
  .profile-hero__meta .icon { width: 15px; height: 15px; color: var(--ink-400); }
  .profile-hero__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
  /* categories row under bio/also-on: primary (chip--active + star), up to two
     secondary .chip hubs, then .chip--custom niche labels with "custom" tags. */
  .profile-hero__cats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }

  /* -- subscription card -------------------------------------------------------------- */
  .sub-card {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  }
  .sub-card__ribbon {
    padding: 9px var(--s-5);
    background: var(--grad-brand); color: #fff;
    font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
    display: flex; align-items: center; gap: 7px;
  }
  .sub-card__ribbon .icon { width: 15px; height: 15px; }
  .sub-card__body { padding: var(--s-5); }
  .sub-card__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
  .sub-card__price-row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
  .sub-card__cta {
    flex: 1; height: 52px; border-radius: var(--r-full);
    background: var(--grad-brand); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    font-size: 15px; font-weight: 800; letter-spacing: .04em;
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .sub-card__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; }
  .sub-card__price { text-align: right; line-height: 1.25; }
  .sub-card__price b { display: block; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .sub-card__price s { font-size: 12.5px; color: var(--ink-400); font-weight: 600; }
  .sub-card__perks { margin-top: var(--s-4); display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-700); font-weight: 500; }
  .sub-card__perks li { display: flex; gap: 9px; align-items: flex-start; }
  .sub-card__perks .icon { width: 16px; height: 16px; color: var(--mint-500); margin-top: 2px; }
  .sub-card__bundles { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
  .bundle {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .bundle:hover { border-color: var(--brand-300); background: var(--brand-50); text-decoration: none; }
  .bundle__term { flex: 1; font-size: 14px; font-weight: 700; }
  .bundle__save { font-size: 11.5px; font-weight: 800; color: var(--mint-500); background: var(--mint-50); padding: 3px 7px; border-radius: var(--r-full); }
  .bundle__total { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .sub-card__fine { margin-top: var(--s-4); font-size: 12px; line-height: 17px; color: var(--ink-400); text-align: center; }
  @media (min-width: 1200px) { .sub-card--inline { display: none; } }

  /* -- grid tiles (4:5 media tiles. Tag hubs, explore, profiles, related grids) --------- */
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4) var(--s-3); }
  @media (max-width: 639px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); } }
  /* creator pages: Instagram density. Always 3 cols, 2px gaps */
  .tiles--dense { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  @media (max-width: 639px) { .tiles--dense { grid-template-columns: repeat(3, 1fr); gap: 2px; } }
  .tile {
    position: relative; aspect-ratio: 4 / 5;
    background: var(--surface-3); overflow: hidden; display: block;
  }
  .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
  .tile:hover img { transform: scale(1.04); }
  .tile__flags { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; gap: 5px; flex-wrap: wrap; }
  .tile__type {
    position: absolute; right: 8px; bottom: 8px; z-index: 1;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 7px; border-radius: var(--r-xs);
    background: rgba(12, 14, 20, .72); color: #fff;
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .tile__type .icon { width: 12px; height: 12px; }
  .tile__stats {
    position: absolute; inset: auto 0 0 0; z-index: 1;
    display: flex; gap: var(--s-3); padding: 22px 10px 8px;
    background: linear-gradient(transparent, rgba(12, 14, 20, .72));
    color: #fff; font-size: 12px; font-weight: 700;
    opacity: 0; transition: opacity var(--dur-2) var(--ease);
    font-variant-numeric: tabular-nums;
  }
  .tile__stats span { display: inline-flex; align-items: center; gap: 5px; }
  .tile__stats .icon { width: 14px; height: 14px; }
  .tile:hover .tile__stats, .tile:focus-visible .tile__stats { opacity: 1; }
  .tile--text { background: var(--ink-900); color: #fff; padding: var(--s-3); display: flex; flex-direction: column; }
  .tile--text .icon { width: 16px; height: 16px; color: rgba(255, 255, 255, .55); }
  .tile__quote {
    margin-top: var(--s-2); font-size: 13.5px; line-height: 19px; font-weight: 600;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
  }
  .tile--locked::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(14px); background: rgba(12,14,20,.2); }
  .tile--locked img { filter: blur(2px); }
  .tile__lock {
    position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff;
  }
  .tile__lock .icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
  .tile__dur {
    position: absolute; right: 6px; bottom: 6px; z-index: 1;
    padding: 2px 6px; border-radius: 5px; background: rgba(12,14,20,.72);
    color: #fff; font-size: 11px; font-weight: 700;
  }

  /* -- crumbs ------------------------------------------------------------------------- */
  .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-500); }
  .crumbs a { color: var(--ink-500); font-weight: 600; }
  .crumbs a:hover { color: var(--brand-ink); }
  .crumbs__sep { color: var(--ink-300); display: inline-flex; }
  .crumbs__sep .icon { width: 13px; height: 13px; }
  .crumbs [aria-current] { color: var(--ink-800); font-weight: 700; }
  /* in-app back arrow leading the crumb trail. Detail pages return to
     wherever the user came from (reel position, feed scroll) instead of
     always dumping them on Home. */
  .crumbs__back {
    display: inline-grid; place-items: center; flex: none;
    width: 30px; height: 30px; margin-left: -7px; border-radius: 50%;
  }
  .crumbs__back:hover { background: var(--surface-2); color: var(--ink-900); text-decoration: none; }
  .crumbs__back .icon { width: 17px; height: 17px; }

  /* -- pager ---------------------------------------------------------------------------- */
  .pager { display: flex; align-items: center; justify-content: center; gap: 4px; padding: var(--s-5) var(--s-4); }
  .pager__item {
    min-width: 38px; height: 38px; padding-inline: 10px;
    display: inline-grid; place-items: center;
    border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink-700);
  }
  .pager__item:hover { background: var(--surface-2); text-decoration: none; }
  .pager__item.is-active { background: var(--brand-solid); color: #fff; }
  .pager__item--nav { gap: 5px; }
  .pager__item--nav .icon { width: 16px; height: 16px; }
  .pager__gap { color: var(--ink-300); padding-inline: 3px; }
  .load-more { display: block; margin: 0 auto var(--s-5); }

  /* -- forms ------------------------------------------------------------------------------ */
  .field { display: grid; gap: 6px; }
  .field__label { font-size: 13.5px; font-weight: 700; color: var(--ink-800); }
  .field__label .req { color: var(--danger-500); }
  .input, .textarea, .select {
    width: 100%; height: 46px; padding-inline: 15px;
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink-900);
    font-size: 15px; font-weight: 500; outline: none;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .input::placeholder, .textarea::placeholder { color: var(--ink-400); font-weight: 450; }
  .input:focus, .textarea:focus, .select:focus { border-color: var(--brand-400); box-shadow: var(--ring); }
  .input:hover:not(:focus), .textarea:hover:not(:focus) { border-color: var(--ink-300); }
  .textarea { height: auto; min-height: 110px; padding-block: 12px; resize: vertical; line-height: 22px; }
  .select {
    appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  }
  .input-wrap { position: relative; }
  .input-wrap .icon-button { position: absolute; right: 5px; top: 50%; translate: 0 -50%; }
  .input-wrap > .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-400); pointer-events: none; }
  .input-wrap > .icon + .input { padding-left: 42px; }
  .field__help { font-size: 12.5px; color: var(--ink-500); }
  .field__error { font-size: 12.5px; font-weight: 600; color: var(--danger-500); display: none; align-items: center; gap: 5px; }
  .field__error .icon { width: 14px; height: 14px; }
  .field--error .input, .field--error .textarea, .field--error .select { border-color: var(--danger-500); }
  .field--error .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-500) 22%, transparent); }
  .field--error .field__error { display: flex; }

  .checkbox { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 20px; }
  .checkbox input { position: absolute; opacity: 0; pointer-events: none; }
  .checkbox__box {
    flex: none; width: 20px; height: 20px; margin-top: 1px;
    border: 1.5px solid var(--line-strong); border-radius: 6px;
    display: grid; place-items: center; background: var(--surface);
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .checkbox__box .icon { width: 13px; height: 13px; color: #fff; stroke-width: 3; opacity: 0; transform: scale(.6); transition: all var(--dur-1) var(--ease); }
  .checkbox input:checked + .checkbox__box { background: var(--brand-solid); border-color: var(--brand-solid); }
  .checkbox input:checked + .checkbox__box .icon { opacity: 1; transform: none; }
  .checkbox input:focus-visible + .checkbox__box { box-shadow: var(--ring); }

  .switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; cursor: pointer; }
  .switch input { position: absolute; opacity: 0; }
  .switch__track {
    position: absolute; inset: 0; border-radius: var(--r-full);
    background: var(--surface-3); transition: background var(--dur-2) var(--ease);
  }
  .switch__track::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: var(--shadow-sm); transition: translate var(--dur-2) var(--ease);
  }
  .switch input:checked + .switch__track { background: var(--brand-solid); }
  .switch input:checked + .switch__track::after { translate: 18px 0; }
  .switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

  /* -- menu (popover) ----------------------------------------------------------------------- */
  .menu-wrap { position: relative; display: inline-flex; }
  .menu--br { top: calc(100% + 6px); right: 0; }
  .menu--bl { top: calc(100% + 6px); left: 0; }
  .menu--up { bottom: calc(100% + 8px); left: 0; }
  .menu {
    position: absolute; z-index: 90; min-width: 210px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    padding: 6px;
  }
  .menu__item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    height: 40px; padding-inline: 12px; border-radius: 10px;
    font-size: 14.5px; font-weight: 600; color: var(--ink-800); text-align: left;
  }
  .menu__item:hover { background: var(--surface-2); text-decoration: none; }
  .menu__item .icon { width: 18px; height: 18px; color: var(--ink-500); }
  .menu__item--danger { color: var(--danger-500); }
  .menu__item--danger .icon { color: var(--danger-500); }
  .menu__item--danger:hover { background: var(--danger-50); }
  .menu__sep { height: 1px; background: var(--line); margin: 6px 8px; }
  .menu__head { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .menu__head b { display: block; font-size: 15px; font-weight: 800; }
  .menu__head span { font-size: 13px; color: var(--ink-500); }

  /* account popover. Bound to the viewport so it can't clip at the rail's
     scrollport top on short screens */
  .rail-account .menu { max-height: calc(100dvh - var(--header-h) - 88px); overflow-y: auto; }
  /* compact rail (icon strip, 64. 84px): the rail is a scroll container, so an
     absolute popover clips at its right edge and creates a sideways scroll
     range that drags the centered create button off. Fixed to the viewport
     instead. Floats over the rail + main content like collapsed-nav menus. */
  html[data-nav="compact"] .rail-account .menu {
    position: fixed;
    bottom: calc(var(--s-4) + 48px);   /* just above the avatar chip */
    left: calc(var(--rail-w-compact) + var(--s-2));
  }
  @media (max-width: 767px) {
    html[data-nav="compact"] .rail-account .menu {
      left: var(--s-3); right: var(--s-3);
      min-width: 0; max-width: 340px;
    }
  }

  /* -- dialog / sheets ------------------------------------------------------------------------ */
  .dialog { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-4); }
  .dialog__scrim { position: absolute; inset: 0; background: var(--scrim); }
  .dialog__panel {
    position: relative; width: 100%; max-width: 480px;
    background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-lg);
    padding: var(--s-6);
  }
  .dialog__close { position: absolute; top: 14px; right: 14px; }
  @media (max-width: 639px) {
    .dialog { place-items: end center; padding: 0; }
    .dialog__panel { max-width: none; border-radius: 24px 24px 0 0; padding-bottom: max(var(--s-6), env(safe-area-inset-bottom)); }
    .dialog__panel::before {
      content: ""; display: block; width: 40px; height: 4px; margin: 0 auto var(--s-4);
      border-radius: 4px; background: var(--line-strong);
    }
  }
  .dialog__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .dialog__text { margin-top: 6px; font-size: 14.5px; color: var(--ink-500); }

  .share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-top: var(--s-4); }
  .share-grid__btn { display: grid; justify-items: center; gap: 7px; padding: var(--s-3) 4px; border-radius: var(--r-md); font-size: 12px; font-weight: 600; color: var(--ink-700); }
  .share-grid__btn:hover { background: var(--surface-2); text-decoration: none; }
  .share-grid__btn .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-800); }
  .share-grid__btn:hover .ic { background: var(--surface-3); }
  .share-grid__btn .ic .icon { width: 20px; height: 20px; }
  .share-copy {
    margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-2);
    border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px 5px 5px 14px;
  }
  .share-copy input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 13.5px; color: var(--ink-500); background: none; }

  /* -- repost row inside the share dialog (members) ----------------------------------------------- */
  .share-repost {
    width: 100%; margin-top: var(--s-3);
    display: flex; align-items: center; gap: var(--s-3); text-align: left;
    padding: var(--s-3); border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--surface-1);
  }
  .share-repost:hover { background: var(--surface-2); }
  .share-repost__ic {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--mint-50); color: var(--mint-500);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .share-repost__ic .icon { width: 19px; height: 19px; }
  .share-repost.is-on .share-repost__ic { background: var(--mint-500); color: #fff; }
  .share-repost__body { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .share-repost__body b { font-size: 14px; font-weight: 700; color: var(--ink-800); }
  .share-repost__body small { font-size: 12px; color: var(--ink-500); }
  .share-repost__state {
    width: 40px; height: 22px; flex: none; border-radius: 999px;
    background: var(--surface-3); position: relative;
    transition: background var(--dur-2) var(--ease);
  }
  .share-repost__state::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.22);
    transition: translate var(--dur-2) var(--ease);
  }
  .share-repost__state.is-on { background: var(--mint-500); }
  .share-repost__state.is-on::after { translate: 18px 0; }

  /* -- toast ------------------------------------------------------------------------------------- */
  .toast {
    position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 110;
    display: flex; align-items: center; gap: 9px;
    background: var(--ink-900); color: #fff;
    padding: 12px 18px; border-radius: var(--r-full);
    font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
  }
  .toast .icon { width: 17px; height: 17px; color: var(--mint-500); }

  /* -- empty & skeleton --------------------------------------------------------------------------- */
  .empty { padding: var(--s-12) var(--s-6); text-align: center; }
  .empty__ic {
    width: 60px; height: 60px; margin-inline: auto; border-radius: 50%;
    background: var(--surface-2); color: var(--ink-400);
    display: grid; place-items: center;
  }
  .empty__ic .icon { width: 26px; height: 26px; }
  .empty__title { margin-top: var(--s-4); font-size: 17px; font-weight: 800; }
  .empty__text { margin-top: 4px; font-size: 14px; color: var(--ink-500); }
  .empty .button { margin-top: var(--s-4); }

  .skeleton {
    border-radius: var(--r-sm);
    background: linear-gradient(100deg, var(--surface-2) 40%, var(--surface-3) 50%, var(--surface-2) 60%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
  }
  @keyframes shimmer { to { background-position: -120% 0; } }

  /* -- media load engine ----------------------------------------------------------------------------
     Under html.js every covered media surface starts opacity:0 from FIRST
     PAINT (bold.css is render-blocking — nothing can pop white→sharp).
     initMedia() adds .mok once bytes decode → a single fade-in. Boxes get
     a surface-3 tint (and .mwait's shimmer) behind the transparent media.
     Two lists must stay in sync: this selector + MEDIA_SEL in bold.js. */
  .js .tile img, .js .tile video, .js .clip > img, .js .clip > video,
  .js .clipset__slide img, .js .clipset__slide video,
  .js .pcarousel__slide img, .js .pcarousel__slide video,
  .js .media > img, .js .media > video,
  .js .catcard img, .js .vcard__thumb img, .js .vrow__thumb img,
  .js .unext__img img, .js .nitem__thumb img, .js .mosaic img,
  .js .clipstrip__item img, .js .embed__stage img, .js .embed__stage video,
  .js .player > img, .js .player > video,
  .js .viewer__thumb img, .js .viewer__media > img, .js .viewer__media > video,
  .js .creator-card__cover img, .js .profile-hero__cover img,
  .js .bub--media img, .js .bub--media video,
  .js img.avatar {
    opacity: 0;
    transition: opacity .35s ease, transform var(--dur-3) var(--ease);
  }
  .js .mok { opacity: 1; }

  .tile, .catcard, .vcard__thumb, .vrow__thumb, .unext__img, .nitem__thumb,
  .mosaic, .clipstrip__item, .embed__stage, .player, .creator-card__cover,
  .bub--media, .avatar, .viewer__thumb {
    background: var(--surface-3);
  }
  .mwait { position: relative; }
  .clipset__slide { position: relative; }
  .mwait::before {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    background: linear-gradient(100deg, var(--surface-2) 40%, var(--surface-3) 50%, var(--surface-2) 60%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
  }

  /* -- footer --------------------------------------------------------------------------------------- */
  .site-footer { border-top: 1px solid var(--line); margin-top: var(--s-10); }
  .site-footer__inner {
    max-width: var(--page-max); margin-inline: auto;
    padding: var(--s-10) var(--s-4) var(--s-8);
  }
  @media (min-width: 768px) { .site-footer__inner { padding-inline: var(--s-6); } }
  .site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s-6); }
  @media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
  @media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
  .site-footer__brand p { margin-top: var(--s-3); font-size: 13.5px; line-height: 20px; color: var(--ink-500); max-width: 260px; }
  .site-footer__col h4 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--s-3); }
  .site-footer__col ul { display: grid; gap: 9px; font-size: 14px; }
  .site-footer__col a { color: var(--ink-700); font-weight: 550; }
  .site-footer__col a:hover { color: var(--brand-ink); }
  .site-footer__legal {
    margin-top: var(--s-8); padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center;
    font-size: 12.5px; color: var(--ink-400);
  }
  .site-footer__legal .badge18 {
    font-weight: 800; color: #fff; background: var(--grad-brand);
    border-radius: var(--r-xs); padding: 3px 7px; font-size: 11px;
  }
  .site-footer__legal a { color: var(--ink-500); font-weight: 600; }
  .site-footer__legal .spacer { flex: 1; }

  /* -- auth split layout ------------------------------------------------------------------------ */
  .auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .auth__brand {
    position: relative; overflow: hidden;
    background: var(--grad-brand); color: #fff;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--s-10) var(--s-12);
  }
  .auth__brand::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 80% 0%, rgba(255,255,255,.18), transparent 55%);
    pointer-events: none;
  }
  .auth__brand .wordmark { color: #fff; }
  .auth__brand .wordmark__tag { background: rgba(255,255,255,.22); backdrop-filter: blur(4px); }
  .auth__pitch { position: relative; z-index: 1; }
  .auth__pitch h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; }
  .auth__pitch ul { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
  .auth__pitch li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 15.5px; font-weight: 500; }
  .auth__pitch li .ic {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255,255,255,.16); display: grid; place-items: center;
  }
  .auth__pitch li .ic .icon { width: 17px; height: 17px; }
  .auth__pitch li b { display: block; font-weight: 800; }
  .auth__pitch li span { opacity: .82; font-size: 13.5px; }
  .auth__cards { position: absolute; inset: 0; pointer-events: none; }
  .auth__cards .mini {
    position: absolute; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); opacity: .5; filter: blur(1px);
    border: 3px solid rgba(255,255,255,.5);
  }
  .auth__cards .mini img { width: 100%; height: 100%; object-fit: cover; }
  .auth__main { display: grid; place-items: center; padding: var(--s-8) var(--s-4); background: var(--surface); }
  .auth__form { width: 100%; max-width: 400px; }
  .auth__form > * + * { margin-top: var(--s-4); }
  /* fixed top-right language switcher. .auth is a grid, so position it out
     of flow over the brand panel (desktop) / above the form (mobile) */
  .auth__lang { position: fixed; top: var(--s-4); inset-inline-end: var(--s-4); z-index: 95; }
  .auth__title { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
  .auth__sub { margin-top: 6px; font-size: 14.5px; color: var(--ink-500); }
  .auth__socials { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .auth__socials .button { border: 1px solid var(--line-strong); background: var(--surface); }
  .auth__socials .button:hover { background: var(--surface-2); }
  .auth__divider { display: flex; align-items: center; gap: var(--s-3); font-size: 12.5px; font-weight: 600; color: var(--ink-400); }
  .auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .auth__row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
  .auth__row a { font-weight: 700; }
  .auth__alt { text-align: center; font-size: 14px; color: var(--ink-500); }
  .auth__fine { font-size: 12px; line-height: 17px; color: var(--ink-400); text-align: center; }
  .auth__fine a { font-weight: 600; }
  .auth__legal {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 5px 14px; margin-top: var(--s-4); font-size: 12px;
  }
  .auth__legal a { color: var(--ink-400); display: inline-flex; align-items: center; gap: 4px; }
  .auth__legal a:hover { color: var(--ink-700); text-decoration: none; }
  .auth__legal .icon { width: 11px; height: 11px; }
  .auth__band { display: none; }
  @media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth__brand { padding: var(--s-4) var(--s-4) var(--s-5); display: block; }
    .auth__pitch, .auth__cards { display: none; }
  }

  /* -- join sheet (guest prompt) ------------------------------------------------------------------ */
  .join-sheet__row { display: flex; gap: var(--s-4); align-items: center; margin-top: var(--s-5); }
  .join-sheet__avatars { display: flex; }
  .join-sheet__avatars .avatar { border: 2px solid var(--surface); margin-left: -8px; }
  .join-sheet__avatars .avatar:first-child { margin-left: 0; }
  .join-sheet__row p { font-size: 13.5px; color: var(--ink-500); line-height: 19px; }

  /* -- video card (tube grid) ------------------------------------------------------ */
  .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--s-5) var(--s-4); }
  @media (max-width: 767px) { .vgrid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); } }
  @media (max-width: 359px) { .vgrid { grid-template-columns: 1fr; } }
  .vcard { display: block; min-width: 0; }
  .vcard:hover { text-decoration: none; }
  .vcard__thumb {
    position: relative; display: block; aspect-ratio: 16 / 9;
    border-radius: var(--r-md); overflow: hidden; background: var(--surface-3);
  }
  .vcard__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-3) var(--ease); }
  .vcard:hover .vcard__thumb > img { transform: scale(1.05); }
  .vcard__flags { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
  .vflag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 7px; border-radius: var(--r-xs);
    background: rgba(12, 14, 20, .72); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .vflag .icon { width: 11px; height: 11px; }
  .vflag--free { background: var(--mint-500); }
  .vflag--pass { background: var(--grad-brand); }
  .vcard__dur {
    position: absolute; right: 8px; bottom: 8px; padding: 2px 7px;
    border-radius: var(--r-xs); background: rgba(12, 14, 20, .78); color: #fff;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .vcard__preview {
    position: absolute; left: 8px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding-inline: 11px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .94); color: var(--ink-900);
    font-size: 12px; font-weight: 800;
    opacity: 0; transform: translateY(4px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .vcard__preview .icon { width: 12px; height: 12px; fill: currentColor; stroke: none; }
  .vcard:hover .vcard__preview, .vcard:focus-visible .vcard__preview { opacity: 1; transform: none; }
  .vcard--locked .vcard__thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(12, 14, 20, .38));
  }
  .vcard__title {
    margin-top: 9px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-900);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .vcard__meta { margin-top: 6px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-500); min-width: 0; }
  .vcard__meta .avatar { width: 24px; height: 24px; }
  .vcard__by { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink-700); min-width: 0; }
  .vcard__by > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vcard__by:hover { text-decoration: underline; }
  .vcard__by .verified { width: 13px; height: 13px; }
  .vcard__stats { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* -- vrow (up next, compact horizontal) ----------------------------------------- */
  .vlist { display: grid; gap: 2px; }
  .vrow {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: 8px; margin-inline: -8px; border-radius: var(--r-md);
  }
  .vrow:hover { background: var(--surface-2); text-decoration: none; }
  .vrow__thumb {
    position: relative; flex: none; width: 168px; aspect-ratio: 16 / 9;
    border-radius: 10px; overflow: hidden; background: var(--surface-3);
  }
  .vrow__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* posterless-video placeholder (no image asset exists) */
  .vthumb-ph {
    display: grid; place-items: center; width: 100%; height: 100%;
    background: var(--ink-900); color: #fff;
  }
  .vthumb-ph .icon { width: 22px; height: 22px; }
  .vrow__dur {
    position: absolute; right: 6px; bottom: 6px; padding: 1px 6px;
    border-radius: 5px; background: rgba(12, 14, 20, .78); color: #fff;
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .vrow__body { flex: 1; min-width: 0; }
  .vrow__title {
    font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink-900);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .vrow__meta { margin-top: 5px; font-size: 12.5px; color: var(--ink-500); }
  .vrow__meta a { font-weight: 600; color: var(--ink-700); }
  .vrow__meta a:hover { text-decoration: underline; }

  /* -- clip feed (For You) ---------------------------------------------------------- */
  .clipstage { position: relative; flex: 1; min-width: 0; }
  .clipbox { position: relative; }
  .clipfeed {
    height: calc(100dvh - var(--header-h));
    overflow-y: auto; scroll-snap-type: y mandatory;
    scrollbar-width: none;
  }
  .clipfeed::-webkit-scrollbar { display: none; }
  .clip {
    position: relative; height: 100%;
    scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; align-items: flex-end;
    background: var(--ink-900); overflow: hidden;
  }
  .clip > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .clip__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 14, 20, .3) 0, transparent 24%, transparent 55%, rgba(12, 14, 20, .74) 100%);
  }
  .clip__flag { position: absolute; top: 12px; left: 12px; z-index: 2; }
  .clip__info { position: relative; z-index: 1; flex: 1; min-width: 0; padding: var(--s-4); padding-right: 78px; color: #fff; }
  .clip__creator { display: flex; align-items: center; gap: 9px; }
  .clip__creator .avatar { width: 36px; height: 36px; border: 1.5px solid rgba(255, 255, 255, .85); }
  .clip__creator a { color: #fff; font-size: 14.5px; font-weight: 800; }
  .clip__creator .verified { color: #fff; width: 14px; height: 14px; }
  .clip__follow {
    flex: none; height: 30px; padding-inline: 13px; border-radius: var(--r-full);
    background: #fff; color: var(--ink-900); font-size: 12.5px; font-weight: 800;
  }
  .clip__caption { margin-top: 9px; font-size: 13.5px; line-height: 19px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .clip__caption a { color: #fff; font-weight: 700; }
  .clip__unlock {
    margin-top: 11px; display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding-inline: 14px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .95); color: var(--ink-900);
    font-size: 13px; font-weight: 800; box-shadow: var(--shadow-md);
  }
  .clip__unlock .icon { width: 15px; height: 15px; }
  .clip__acts { position: absolute; right: 8px; bottom: 84px; z-index: 2; display: grid; gap: 15px; justify-items: center; color: #fff; }
  .clip__act { display: grid; justify-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
  .clip__act .ic {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .clip__act:hover .ic { background: rgba(255, 255, 255, .28); }
  .clip__act:active .ic { transform: scale(.92); }
  .clip__act .icon { width: 21px; height: 21px; }
  .clip__act.is-on { color: var(--accent-500); }
  .clip__act.is-on .icon { fill: currentColor; }
  .clip__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .22); z-index: 2; }
  .clip__prog i { display: block; height: 100%; background: #fff; border-radius: 0 3px 3px 0; }
  .cliptabs {
    position: absolute; top: 0; left: 0; right: 0; z-index: 6;
    display: flex; justify-content: center; gap: var(--s-6);
    padding-top: 13px;
    background: linear-gradient(rgba(12, 14, 20, .32), transparent);
  }
  .cliptabs button { padding: 6px 2px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .65); }
  .cliptabs button.is-active { color: #fff; box-shadow: inset 0 -2.5px 0 #fff; }
  .clipnav { display: none; }
  @media (min-width: 768px) {
    .clipstage { display: flex; align-items: center; justify-content: center; gap: var(--s-5); padding-block: var(--s-4); }
    /* clipbox owns the corner radius. .cliptabs is a square-cornered
       absolute bar painted over the feed, so without this its gradient
       + the page background bled past the card's corner arcs. */
    .clipbox { position: relative; width: min(420px, 100%); flex: none; border-radius: var(--r-xl); overflow: hidden; }
    .clipfeed {
      width: 100%;
      height: calc(100dvh - var(--header-h) - var(--s-8));
      /* ink bg kills subpixel seams where the rounded mask meets clips;
         overflow-x clip so nothing ever pans the stage sideways. */
      border-radius: var(--r-xl); overflow-y: auto; overflow-x: clip;
      background: var(--ink-900);
    }
    .clipnav { display: grid; gap: var(--s-3); }
    .clipnav button {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--surface-2); color: var(--ink-700);
      display: grid; place-items: center;
      transition: background var(--dur-1) var(--ease);
    }
    .clipnav button:hover { background: var(--surface-3); }
  }

  /* /foryou. The clip stage owns the whole column; .main's article chrome
     (max-width, side borders) belongs to card lists, not this surface. */
  .app__body--clip .main { max-width: none; border: 0; display: flex; }
  /* the infinite-scroll tail inside the snap feed needs enough height to
     intersect (and a dark plate so the pill reads on the clip backdrop). */
  .clipfeed > .loadmore-wrap { min-height: 42%; display: grid; place-items: center; background: var(--ink-900); }

  /* -- Bold Pass badge & pills -------------------------------------------------------- */
  .pass-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--r-full);
    border: 1.5px solid transparent;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      var(--grad-brand) border-box;
    font-size: 12.5px; font-weight: 800; color: var(--brand-ink);
    white-space: nowrap;
  }
  .pass-badge .icon { width: 14px; height: 14px; color: var(--brand-500); }
  .pass-badge--sm { padding: 3px 9px; font-size: 11px; gap: 4px; }
  .pass-badge--sm .icon { width: 12px; height: 12px; }
  .pass-badge--dark {
    border-color: transparent;
    background:
      linear-gradient(rgba(12, 14, 20, .55), rgba(12, 14, 20, .55)) padding-box,
      var(--grad-brand) border-box;
    color: #fff; backdrop-filter: blur(6px);
  }
  .pass-badge--dark .icon { color: #fff; }
  .pass-pill {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding-inline: 14px; border-radius: var(--r-full);
    font-size: 13.5px; font-weight: 800; white-space: nowrap;
  }
  .pass-pill .icon { width: 15px; height: 15px; }
  .pass-pill--get {
    border: 1.5px solid transparent; color: var(--brand-ink);
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      var(--grad-brand) border-box;
  }
  .pass-pill--get:hover {
    text-decoration: none;
    background:
      linear-gradient(var(--brand-50), var(--brand-50)) padding-box,
      var(--grad-brand) border-box;
  }
  .pass-pill--active { background: var(--mint-50); color: var(--ink-800); }
  .pass-pill--active .icon { color: var(--mint-500); }
  .rail-account__pass {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 800; color: var(--mint-500);
  }
  .rail-account__pass .icon { width: 12px; height: 12px; }

  /* -- also-on (external creator links) ---------------------------------------------- */
  .also-on { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .also-on__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
  .also-on__link {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding-inline: 11px;
    border: 1px solid var(--line); border-radius: var(--r-full);
    font-size: 12.5px; font-weight: 700; color: var(--ink-700);
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .also-on__link:hover { border-color: var(--ink-300); background: var(--surface-2); text-decoration: none; }
  .also-on__link .icon { width: 14px; height: 14px; }

  /* -- related searches / categories --------------------------------------------------- */
  .relblock h3 { font-size: 15px; font-weight: 800; }
  .relblock__chips { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: 8px; }

  /* -- filterbar ------------------------------------------------------------------------- */
  .filterbar {
    display: flex; align-items: center; gap: 8px;
    padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  .filterbar::-webkit-scrollbar { display: none; }
  .filterbar .chip { flex: none; }
  .filterbar__sort { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
  .select--sm {
    height: 36px; font-size: 13.5px; font-weight: 600;
    padding-inline: 13px 32px; border-radius: var(--r-full);
    background-color: var(--surface-2); border-color: transparent;
    background-position: right 12px center;
  }
  .view-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-full); flex: none; }
  .view-toggle button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-500); }
  .view-toggle button:hover { background: var(--surface-2); }
  .view-toggle button.is-active { background: var(--ink-900); color: #fff; }
  .view-toggle .icon { width: 16px; height: 16px; }
  .vfeed { display: grid; }

  /* -- tube pager -------------------------------------------------------------------------- */
  .pager--tube .pager__item { min-width: 44px; height: 44px; }

  /* -- stat cards / chart / sources / table ------------------------------------------------- */
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-3); }
  .stat-card { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--s-4); }
  .stat-card__label {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-400);
  }
  .stat-card__label .icon { width: 14px; height: 14px; }
  .stat-card__value { margin-top: 9px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .stat-card__sub { margin-top: 3px; font-size: 12.5px; line-height: 17px; color: var(--ink-500); }
  .stat-card__delta { color: var(--mint-500); font-weight: 800; }
  .chart { background: var(--surface-2); border-radius: var(--r-xl); padding: var(--s-5); }
  .chart svg { width: 100%; height: 190px; display: block; }
  .src { display: grid; gap: 12px; }
  .src__row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
  .src__label { width: 134px; flex: none; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-700); }
  .src__label .icon { width: 15px; height: 15px; color: var(--ink-400); }
  .src__bar { flex: 1; height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
  .src__bar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--grad-brand); }
  .src__pct { width: 42px; flex: none; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
  .dtable { display: grid; overflow-x: auto; scrollbar-width: none; }
  .dtable__row {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 10px 8px; margin-inline: -8px; border-radius: var(--r-md);
    font-size: 14px;
  }
  .dtable__row:hover { background: var(--surface-2); }
  .dtable__row > .icon { width: 16px; height: 16px; color: var(--ink-400); flex: none; }
  .dtable__title { flex: 1; min-width: 0; font-weight: 600; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dtable__num { width: 86px; flex: none; text-align: right; font-size: 13px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
  .dtable__num--strong { color: var(--ink-900); font-weight: 800; }
  @media (max-width: 560px) { .dtable__num--opt { display: none; } }
  .qrbox {
    width: 96px; height: 96px; flex: none;
    border-radius: var(--r-md); background: var(--surface);
    border: 1px solid var(--line); display: grid; place-items: center;
    color: var(--ink-300);
  }
  .qrbox .icon { width: 44px; height: 44px; }
  .setting-card {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg);
  }
  .setting-card__txt { flex: 1; min-width: 0; }
  .setting-card__txt b { display: block; font-size: 15px; font-weight: 800; }
  .setting-card__txt p { margin-top: 3px; font-size: 13px; line-height: 18px; color: var(--ink-500); }

  /* -- faq / steps / calc / comparison / misc landing ---------------------------------------- */
  .faq { border-top: 1px solid var(--line); }
  .faq__item { border-bottom: 1px solid var(--line); }
  .faq__q {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 17px 4px; font-size: 15.5px; font-weight: 700;
    text-align: left; color: var(--ink-900);
  }
  .faq__q .icon { margin-left: auto; width: 18px; height: 18px; color: var(--ink-400); flex: none; transition: transform var(--dur-2) var(--ease); }
  .faq__item.is-open .faq__q .icon { transform: rotate(180deg); }
  .faq__a { padding: 0 4px 18px; font-size: 14.5px; line-height: 22px; color: var(--ink-500); }
  .faq__a a { font-weight: 600; }

  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  @media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }
  .step { background: var(--surface-2); border-radius: var(--r-xl); padding: var(--s-5); }
  .step__n {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--grad-brand); color: #fff;
    display: grid; place-items: center; font-size: 14px; font-weight: 800;
  }
  .step__title { margin-top: var(--s-3); font-size: 16px; font-weight: 800; }
  .step__text { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-500); }

  .calc {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-2xl); padding: var(--s-6); box-shadow: var(--shadow-sm);
  }
  .calc__row { margin-top: var(--s-5); display: grid; gap: 9px; }
  .calc__label { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-700); }
  .calc__label output { font-weight: 800; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
  .range { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border-radius: var(--r-full); background: var(--surface-3); outline: none; }
  .range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2.5px solid var(--brand-500); box-shadow: var(--shadow-sm); cursor: pointer; }
  .range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid var(--brand-500); cursor: pointer; }
  .calc__out { margin-top: var(--s-6); border-radius: var(--r-lg); background: var(--surface-2); padding: var(--s-5); text-align: center; }
  .calc__out b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .calc__out span { font-size: 12.5px; color: var(--ink-500); }

  .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  @media (max-width: 639px) { .cmp { grid-template-columns: 1fr; } }
  .cmp__col { border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); }
  .cmp__col--win {
    border: 2px solid transparent;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      var(--grad-brand) border-box;
  }
  .cmp__head { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; }
  .cmp__list { margin-top: var(--s-3); display: grid; gap: 9px; font-size: 14px; color: var(--ink-700); }
  .cmp__list li { display: flex; gap: 9px; align-items: flex-start; }
  .cmp__list .icon { width: 16px; height: 16px; margin-top: 3px; flex: none; }
  .cmp__list .yes { color: var(--mint-500); }
  .cmp__list .no { color: var(--ink-300); }

  .linklist { display: grid; }
  .linklist a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 8px; margin-inline: -8px; border-radius: var(--r-md);
    font-size: 14.5px; font-weight: 600; color: var(--ink-800);
  }
  .linklist a:hover { background: var(--surface-2); text-decoration: none; }
  .linklist a > .icon:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--ink-300); }

  .banner {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: 13px var(--s-4); border-bottom: 1px solid var(--line);
  }
  .banner > .icon { width: 18px; height: 18px; color: var(--brand-500); flex: none; }
  .banner p { flex: 1; min-width: 200px; font-size: 13.5px; font-weight: 600; color: var(--ink-700); }
  .banner .cluster { flex: none; }
  /* Enforcement notice (monetization suspension). Danger tint. */
  .banner--danger { background: var(--danger-50); border-bottom-color: var(--danger-500); }
  .banner--danger > .icon { color: var(--danger-500); }
  .banner--danger p { color: var(--danger-500); }

  .bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); }
  .bcard { background: var(--surface-2); border-radius: var(--r-xl); padding: var(--s-5); }
  .bcard .ic {
    width: 40px; height: 40px; border-radius: var(--r-md);
    background: var(--grad-brand); color: #fff;
    display: grid; place-items: center;
  }
  .bcard .ic .icon { width: 20px; height: 20px; }
  .bcard h4 { margin-top: var(--s-3); font-size: 15.5px; font-weight: 800; }
  .bcard p { margin-top: 4px; font-size: 13.5px; line-height: 20px; color: var(--ink-500); }

  .band {
    background: var(--grad-brand); color: #fff;
    border-radius: var(--r-2xl); padding: var(--s-10) var(--s-6);
    text-align: center;
  }
  .band h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; }
  .band p { margin-top: 8px; font-size: 15px; opacity: .88; max-width: 460px; margin-inline: auto; }
  .band .button { margin-top: var(--s-5); background: #fff; color: var(--ink-900); }
  .band .button:hover { background: rgba(255, 255, 255, .9); }

  .avatar-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .avatar-wall .avatar { width: 54px; height: 54px; border: 3px solid var(--surface); box-shadow: var(--shadow-sm); }
  @media (max-width: 560px) { .avatar-wall .avatar { width: 44px; height: 44px; } }

  /* -- clip strip (For You preview on home) --------------------------------------------------- */
  .clipstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .clipstrip::-webkit-scrollbar { display: none; }
  .clipstrip__item { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; background: var(--surface-3); display: block; }
  .clipstrip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
  .clipstrip__item:hover img { transform: scale(1.05); }
  .clipstrip__item::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(transparent 60%, rgba(12, 14, 20, .6));
  }
  .clipstrip__name {
    position: absolute; left: 9px; bottom: 8px; z-index: 1;
    font-size: 12px; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 5px;
  }
  .clipstrip__name .avatar { width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, .8); }
  .clipstrip__dur { position: absolute; top: 8px; left: 8px; z-index: 1; }

  /* -- creator card grid / horizontal row ------------------------------------------------------ */
  .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
  @media (max-width: 560px) { .cgrid { grid-template-columns: 1fr; } }
  .crow {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(238px, 1fr); gap: var(--s-3);
    overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  }
  .crow::-webkit-scrollbar { display: none; }

  /* -- watch page -------------------------------------------------------------------------------- */
  .watch { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: var(--s-6); padding: var(--s-4); }
  @media (min-width: 768px) { .watch { padding: var(--s-5) var(--s-6); } }
  @media (max-width: 1199px) { .watch { grid-template-columns: 1fr; } }
  .player {
    position: relative; aspect-ratio: 16 / 9;
    background: var(--ink-900); overflow: hidden; border-radius: var(--r-lg);
  }
  @media (max-width: 639px) { .player { border-radius: 0; margin-inline: calc(var(--s-4) * -1); } }
  .player > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .player__flag { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
  .player__play {
    position: absolute; inset: 0; margin: auto; z-index: 1;
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(255, 255, 255, .95); color: var(--ink-900);
    display: grid; place-items: center; box-shadow: var(--shadow-md);
    transition: transform var(--dur-1) var(--ease);
  }
  .player__play:hover { transform: scale(1.05); }
  .player__play .icon { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 4px; }
  .player__bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(transparent, rgba(12, 14, 20, .82));
    color: #fff; font-size: 12.5px; font-weight: 600;
  }
  .player__bar .icon { width: 16px; height: 16px; }
  .player__track { flex: 1; height: 4px; border-radius: var(--r-full); background: rgba(255, 255, 255, .28); overflow: hidden; }
  .player__track i { display: block; height: 100%; background: #fff; border-radius: var(--r-full); }
  /* quality menu. Top-right over the video */
  .vq { position: absolute; top: 12px; right: 12px; z-index: 4; }
  .vq__btn {
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 50%; background: rgba(12, 14, 20, .62); color: #fff;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .vq__btn:hover { background: rgba(12, 14, 20, .85); }
  .vq__btn .icon { width: 20px; height: 20px; }
  .vq .menu { top: calc(100% + 6px); min-width: 150px; }
  .player__end {
    position: absolute; inset: 0; z-index: 3;
    display: grid; place-items: center; align-content: center;
    background: rgba(12, 14, 20, .62);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    text-align: center; color: #fff; padding: var(--s-5);
  }
  .player__end h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .player__end p { margin-top: 5px; font-size: 13.5px; opacity: .85; }
  .player__end .cluster { justify-content: center; margin-top: var(--s-4); }
  .player__end .button--ghost { color: #fff; }
  .watch__title {
    margin-top: var(--s-4); font-size: 21px; line-height: 27px; font-weight: 800; letter-spacing: -.01em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .watch__stats { margin-top: 7px; font-size: 13.5px; color: var(--ink-500); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-variant-numeric: tabular-nums; }
  .watch__acts {
    margin-top: var(--s-3); padding-block: var(--s-1);
    border-block: 1px solid var(--line);
    display: flex; align-items: center; gap: 2px;
    overflow-x: auto; scrollbar-width: none;
  }
  .watch-panel { margin-top: var(--s-4); padding: var(--s-4); background: var(--surface-2); border-radius: var(--r-xl); }
  .watch-panel__row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  .watch-panel__who { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; }
  .watch-panel__who .avatar { width: 52px; height: 52px; }
  .watch-panel__name { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 800; color: var(--ink-900); }
  .watch-panel__name:hover { text-decoration: underline; }
  .watch-panel__sub { font-size: 13px; color: var(--ink-500); margin-top: 2px; }
  .watch-panel .also-on { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .watch__desc { margin-top: var(--s-4); font-size: 14.5px; line-height: 22px; }
  .watch__desc a { color: var(--brand-ink); font-weight: 600; }
  .upnext { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
  .upnext .vlist { margin-top: var(--s-3); }

  /* -- post photo carousel (several photos → swipeable, counter + dots) ---------------- */
  .pcarousel { position: relative; background: var(--surface-3); }
  .pcarousel__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; border-radius: inherit;
  }
  .pcarousel__track::-webkit-scrollbar { display: none; }
  .pcarousel__slide {
    position: relative; flex: 0 0 100%; scroll-snap-align: start;
    aspect-ratio: 4 / 5; background: var(--surface-3); display: block;
  }
  .pcarousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pcarousel__pos {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    padding: 3px 9px; border-radius: var(--r-full);
    background: rgba(12, 14, 20, .72); color: #fff;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .pcarousel__dots {
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
    display: flex; justify-content: center; gap: 5px; pointer-events: none;
  }
  .pcarousel__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
  .pcarousel__dots i.is-on { background: #fff; }
  .pcarousel__nav {
    position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--ink-900);
    display: grid; place-items: center; box-shadow: var(--shadow-sm);
    opacity: 0; transition: opacity var(--dur-2) var(--ease);
  }
  .pcarousel__nav .icon { width: 17px; height: 17px; }
  .pcarousel__nav--prev { left: 10px; }
  .pcarousel__nav--next { right: 10px; }
  .pcarousel:hover .pcarousel__nav { opacity: 1; }
  @media (hover: none) { .pcarousel__nav { display: none; } }

  /* -- feed list + interleaved modules (the wheel) ------------------------------------- */
  .feedlist > * + * { border-top: 1px solid var(--line); }
  .feedmod { border-top: 1px solid var(--line); padding: var(--s-5) var(--s-4); }
  @media (min-width: 768px) { .feedmod { padding: var(--s-5) var(--s-6); } }
  .feedmod .section-head { margin-bottom: var(--s-3); }
  .feedmod--pass {
    background: var(--grad-brand); color: #fff; text-align: center;
    border-top: 0; padding: var(--s-8) var(--s-4);
  }
  .feedmod--pass h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
  .feedmod--pass p { margin-top: 5px; font-size: 14px; opacity: .9; }
  .feedmod--pass .button { margin-top: var(--s-4); background: #fff; color: var(--ink-900); }
  .feedmod__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  /* creators-to-follow carousel (module) */
  .folrow {
    display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 10px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  }
  .folrow::-webkit-scrollbar { display: none; }
  .folcard {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-3) var(--s-3);
    display: grid; justify-items: center; text-align: center;
  }
  .folcard__name {
    margin-top: 8px; font-size: 13.5px; font-weight: 800; color: var(--ink-900);
    display: flex; align-items: center; gap: 4px; max-width: 100%;
  }
  .folcard__name .verified { width: 13px; height: 13px; }
  .folcard__meta { margin-top: 1px; font-size: 11.5px; color: var(--ink-500); }
  .folcard .button { margin-top: 10px; width: 100%; }

  /* infinite scroll machinery */
  .loadmore {
    margin: var(--s-4) auto var(--s-3);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding-inline: 22px; border-radius: var(--r-full);
    border: 1px solid var(--line-strong); background: var(--surface);
    font-size: 14px; font-weight: 700; color: var(--ink-800);
  }
  .loadmore:hover { border-color: var(--ink-300); text-decoration: none; }
  .loadmore .icon { width: 17px; height: 17px; }
  .loadmore-wrap { text-align: center; }
  .infskel { display: contents; }
  .loadmore-wrap { grid-column: 1 / -1; }
  .skel-post { height: 300px; margin: var(--s-5) var(--s-4); border-radius: var(--r-lg); }
  .skel-tile { aspect-ratio: 4 / 5; }
  .caughtup { padding: var(--s-6) var(--s-4) var(--s-4); text-align: center; }
  .caughtup__title { font-size: 16px; font-weight: 800; }
  .caughtup__text { margin-top: 3px; font-size: 13.5px; color: var(--ink-500); }

  /* interleaved module row inside a tile grid. Spans all columns */
  .tiles > .feedmod { grid-column: 1 / -1; border-top: 0; padding: var(--s-4) 0 var(--s-2); }

  /* tag-page media filter. Data-f bound by Alpine (All / Photos / Videos) */
  .tiles[data-f="photos"] > .tile[data-kind="videos"],
  .tiles[data-f="photos"] > .tile[data-kind="text"],
  .tiles[data-f="videos"] > .tile:not([data-kind="videos"]) { display: none; }

  /* guest composer state inside the viewer side panel */
  .viewer__side > .comment-login { border-bottom: 0; border-top: 1px solid var(--line); }

  /* -- viewer (one viewer, three media modes; overlay + full page) ---------------------- */
  .viewer { display: grid; grid-template-columns: minmax(0, 1fr) 384px; min-height: 0; }
  .viewer--overlay { position: fixed; inset: 0; z-index: 150; background: var(--surface); }
  .viewer--page {
    height: calc(100dvh - var(--header-h) - var(--s-10));
    min-height: 480px; max-height: 860px;
    border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
    margin: var(--s-4);
  }
  @media (min-width: 900px) { .viewer--page { margin: var(--s-5) var(--s-6); } }
  .viewer__stage {
    position: relative; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; background: var(--ink-900);
  }
  .viewer__media {
    position: relative; flex: 1; min-height: 0;
    display: grid; place-items: center; overflow: hidden;
    /* implicit auto row would make child % heights cyclic->auto;
       pin the single row to the container so 100%x100% resolves */
    grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  }
  /* Box fills the stage; scale-down letterboxes large media and shows
     small media at natural size (never upscales past intrinsic px).
     contain fallback for engines without scale-down. */
  .viewer__media > img {
    width: 100%; height: 100%;
    object-fit: contain; object-fit: scale-down; display: block;
  }
  /* Locked items ship NO media URL at all. The stage renders a pure
     veil (lock icon + CTA), so there is nothing to blur and nothing
     an unauthorized viewer could deobfuscate. */
  .viewer__media > .viewer__veil,
  .viewer__veil {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center; color: #fff; padding: var(--s-6);
  }
  .viewer__veil .media__lock-ic .icon { width: 26px; height: 26px; }
  .viewer__vid {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; background: #000;
  }
  .viewer__vembed, .viewer__vembed iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }
  .viewer__text {
    max-width: 420px; padding: var(--s-6); color: #fff; text-align: center;
    font-size: 19px; line-height: 28px; font-weight: 600;
  }
  .viewer__video {
    position: relative; width: 100%; height: 100%;
    display: grid; place-items: center; color: #fff;
  }
  .viewer__video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .viewer__video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
  .viewer__video .player__play { z-index: 1; }
  .viewer__top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; align-items: flex-start; gap: 8px; padding: 12px;
    pointer-events: none;
  }
  .viewer__top > * { pointer-events: auto; }
  .viewer__count {
    padding: 4px 10px; border-radius: var(--r-full);
    background: rgba(12, 14, 20, .66); color: #fff;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .viewer__top .vflag { position: static; }
  .viewer__topend { margin-left: auto; display: flex; gap: 6px; }
  .viewer__btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(12, 14, 20, .55); color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background var(--dur-1) var(--ease);
  }
  .viewer__btn:hover { background: rgba(12, 14, 20, .8); }
  .viewer__btn .icon { width: 19px; height: 19px; }
  .viewer__nav {
    position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .93); color: var(--ink-900);
    display: grid; place-items: center; box-shadow: var(--shadow-md);
    transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .viewer__nav:hover { background: #fff; transform: scale(1.06); }
  .viewer__nav .icon { width: 20px; height: 20px; }
  .viewer__nav--prev { left: 14px; }
  .viewer__nav--next { right: 14px; }
  .viewer__thumbs {
    position: relative; z-index: 2; flex: none;
    display: flex; gap: 6px; padding: 10px 12px;
    overflow-x: auto; scrollbar-width: none;
    background: var(--ink-900);
  }
  .viewer__thumbs::-webkit-scrollbar { display: none; }
  .viewer__thumb {
    flex: none; width: 54px; height: 54px; border-radius: 8px;
    overflow: hidden; opacity: .5; padding: 0; border: 2px solid transparent;
    transition: opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .viewer__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .viewer__thumb.is-on { opacity: 1; border-color: #fff; }
  .viewer__side {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--surface); border-left: 1px solid var(--line);
  }
  .viewer__creator {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
  }
  .viewer__creator .avatar-wrap { flex: none; }
  .viewer__cwho { flex: 1; min-width: 0; }
  .viewer__cname {
    display: flex; align-items: center; gap: 5px;
    font-size: 14.5px; font-weight: 800; color: var(--ink-900);
  }
  .viewer__cname:hover { text-decoration: underline; }
  .viewer__cname .verified { width: 14px; height: 14px; }
  .viewer__cmeta { font-size: 12.5px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .viewer__cap { padding: var(--s-3) var(--s-4); font-size: 14.5px; line-height: 21px; border-bottom: 1px solid var(--line); }
  .viewer__cap a { color: var(--brand-ink); font-weight: 600; }
  .viewer__tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
  .viewer__act {
    display: flex; align-items: center; gap: 2px;
    padding: 4px var(--s-2); border-bottom: 1px solid var(--line);
  }
  /* comment lists pan horizontally when a long name/mention overflows. Clip kills the sideways scroll on the sheet and the post page alike. */
  .viewer__comments { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-x: clip; overscroll-behavior: contain; }
  #postComments, #viewerComments { overflow-x: hidden; overflow-x: clip; }
  .viewer__comments .comment { padding: var(--s-3) var(--s-4); }
  .viewer__send {
    flex: none; display: flex; flex-direction: column; gap: 6px;
    padding: 10px var(--s-3); border-top: 1px solid var(--line);
  }
  .viewer__sendrow { display: flex; align-items: flex-end; gap: 8px; }
  .viewer__sendrow > .avatar { flex: none; margin-bottom: 6px; }
  .viewer__replyline {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12.5px; color: var(--ink-500);
  }
  .viewer__replyline b { color: var(--brand-500); font-weight: 600; }
  .viewer__replyline button {
    display: grid; place-items: center; flex: none;
    width: 22px; height: 22px; border-radius: 50%; color: var(--ink-400);
  }
  .viewer__replyline button:hover { background: var(--surface-2); color: var(--ink-700); }
  .viewer__replyline .icon { width: 12px; height: 12px; }
  .viewer__send input, .viewer__send textarea {
    flex: 1; min-width: 0; min-height: 40px; border: 0; outline: none;
    background: var(--surface-2); border-radius: var(--r-xl); padding: 10px 15px;
    font-size: 16px; line-height: 1.35; color: var(--ink-900);
    font-family: inherit; resize: none; field-sizing: content;
    max-height: 132px; overflow-y: auto;
  }
  .viewer__send .button--sm { flex: none; margin-bottom: 4px; }
  .viewer__send .icon-button { color: var(--ink-500); width: 36px; height: 36px; }
  .viewer__scrim { display: none; position: fixed; inset: 0; z-index: 4; background: var(--scrim); }
  /* overlay on phones: stage is full-screen, panel becomes a bottom sheet */
  @media (max-width: 899px) {
    .viewer--overlay { grid-template-columns: 1fr; }
    .viewer--overlay .viewer__side { display: none; }
    .viewer--overlay.viewer--sheet .viewer__scrim { display: block; }
    .viewer--overlay .viewer__scrim { display: none; }
    .viewer--overlay.viewer--sheet .viewer__side {
      display: flex; position: fixed; inset: auto 0 0 0; z-index: 5;
      max-height: 76dvh; border-radius: 24px 24px 0 0; border-left: 0;
      box-shadow: var(--shadow-lg); padding-bottom: env(safe-area-inset-bottom);
    }
    .viewer--overlay .viewer__nav { display: none; }
    .viewer--overlay .viewer__thumbs { display: none; }
  }
  /* gallery page on phones: stage then panel stacked in normal flow */
  @media (max-width: 899px) {
    .viewer--page { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; border: 0; border-radius: 0; margin: 0; }
    .viewer--page .viewer__stage { aspect-ratio: 4 / 5; }
    .viewer--page .viewer__comments { overflow: visible; }
    .viewer--page .viewer__side { border-left: 0; }
  }
  /* viewer UI auto-hide state (phone tap toggles) */
  .viewer__top, .viewer__nav { transition: opacity var(--dur-2) var(--ease); }
  @media (max-width: 899px) {
    .viewer--quiet .viewer__top, .viewer--quiet .viewer__nav { opacity: 0; pointer-events: none; }
  }

  /* -- up-next auto-advance card (video viewer) ------------------------------------------ */
  .unext {
    position: relative; display: flex; gap: 10px; align-items: center;
    padding: 10px; border-radius: var(--r-lg); overflow: hidden;
    background: var(--ink-900); color: #fff;
  }
  .unext__img { flex: none; width: 118px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; position: relative; }
  .unext__img img { width: 100%; height: 100%; object-fit: cover; }
  .unext__body { flex: 1; min-width: 0; }
  .unext__label {
    display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums;
  }
  .unext__label .icon { width: 12px; height: 12px; }
  .unext__title {
    margin-top: 3px; font-size: 13px; line-height: 17px; font-weight: 700;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .unext__cancel { flex: none; color: rgba(255,255,255,.7); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
  .unext__cancel:hover { background: rgba(255,255,255,.14); color: #fff; }
  .unext__cancel .icon { width: 16px; height: 16px; }
  .unext__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .2); }
  .unext__bar i { display: block; height: 100%; width: 0; background: #fff; animation: unext-run 9s linear infinite; }
  @keyframes unext-run { from { width: 0; } to { width: 100%; } }

  /* -- explore hub ------------------------------------------------------------------------ */
  .xhero { padding: var(--s-10) var(--s-4) var(--s-4); text-align: center; }
  .xhero .display { font-size: clamp(30px, 4vw, 42px); }
  .xhero__sub { margin-top: 8px; color: var(--ink-500); }
  .xsearch {
    margin: var(--s-5) auto 0; max-width: 580px;
    display: flex; align-items: center; gap: var(--s-2);
    height: 54px; padding-inline: 20px 10px;
    background: var(--surface); border: 1.5px solid var(--line-strong);
    border-radius: var(--r-full); color: var(--ink-500);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  .xsearch:focus-within { border-color: var(--brand-400); box-shadow: var(--ring); }
  .xsearch .icon { width: 20px; height: 20px; }
  .xsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; font-weight: 500; color: var(--ink-900); }
  .xsearch input::placeholder { color: var(--ink-400); }
  .xsearch .button { flex: none; }
  .xtags { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
  .catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  @media (max-width: 480px) { .catgrid { grid-template-columns: repeat(2, 1fr); } }
  .catcard {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
    display: flex; align-items: flex-end; padding: 12px; color: #fff;
    background: var(--grad-brand);
  }
  .catcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
  .catcard:hover img { transform: scale(1.05); }
  .catcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,14,20,.05) 30%, rgba(12,14,20,.72)); }
  .catcard:hover { text-decoration: none; }
  .catcard__who { position: relative; z-index: 1; min-width: 0; }
  .catcard__name { font-size: 14.5px; font-weight: 800; display: block; }
  .catcard__count { font-size: 11.5px; font-weight: 600; opacity: .85; }

  /* -- messages ---------------------------------------------------------------------------- */
  .msg { display: grid; grid-template-columns: 372px minmax(0, 1fr); height: calc(100dvh - var(--header-h)); min-height: 0; }
  .msg__inbox { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
  .msg__inhead { display: flex; align-items: center; gap: 8px; padding: var(--s-4) var(--s-4) var(--s-2); }
  .msg__inhead h1 { flex: 1; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
  .msg__insearch { padding: 0 var(--s-4) var(--s-3); }
  .msgsearch {
    display: flex; align-items: center; gap: 8px; height: 38px;
    padding-inline: 13px; border-radius: var(--r-full); background: var(--surface-2);
    color: var(--ink-500); border: 1px solid transparent;
  }
  .msgsearch:focus-within { background: var(--surface); border-color: var(--brand-300); }
  .msgsearch .icon { width: 16px; height: 16px; }
  .msgsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13.5px; font-weight: 500; }
  .msg__inscroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .msgrow { display: flex; gap: 11px; padding: 11px 14px; position: relative; cursor: pointer; }
  .msgrow:hover { background: var(--surface-2); }
  .msgrow.is-active { background: var(--brand-50); }
  .msgrow__main { flex: 1; min-width: 0; }
  .msgrow__name { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--ink-900); }
  .msgrow__name .verified { width: 14px; height: 14px; }
  .msgrow__prev {
    margin-top: 1px; font-size: 13px; color: var(--ink-500);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .msgrow__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
  .msgrow__time { font-size: 11.5px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
  .msgrow.is-unread .msgrow__name { font-weight: 800; }
  .msgrow.is-unread .msgrow__prev { color: var(--ink-800); font-weight: 600; }
  .msgrow__tick .icon { width: 15px; height: 15px; color: var(--brand-500); }

  .msg__thread { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
  .msg__th {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 9px 14px; border-bottom: 1px solid var(--line);
  }
  .msg__th-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  .msg__th-name { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; color: var(--ink-900); }
  .msg__th-name .verified { width: 15px; height: 15px; }
  .msg__th-status { font-size: 12.5px; color: var(--ink-500); }
  .msg__th-status.is-on { color: var(--mint-500); font-weight: 600; }
  .msg__scroll {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-4) var(--s-4) var(--s-2);
    display: flex; flex-direction: column; gap: 2px;
  }
  .msgday {
    align-self: center; margin: var(--s-3) 0 var(--s-2);
    padding: 4px 11px; border-radius: var(--r-full); background: var(--surface-2);
    font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ink-400);
  }
  .bub {
    align-self: flex-start; max-width: min(74%, 460px);
    padding: 9px 13px; border-radius: 18px 18px 18px 6px;
    background: var(--surface-2); color: var(--ink-900);
    font-size: 14.5px; line-height: 20px;
  }
  .bub--mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--brand-solid); color: #fff; }
  .bubgap { height: 8px; flex: none; }
  .bub--media { padding: 4px; overflow: hidden; }
  .bub--media img { display: block; width: 240px; max-width: 100%; border-radius: 14px; }
  .bub--media .bub__cap { padding: 7px 9px 5px; font-size: 14px; }
  .bub--locked { padding: 0; overflow: hidden; width: 240px; max-width: 100%; }
  .bub__lock { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; color: #fff; }
  .bub__lock > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.15); transform: scale(1.12); }
  .bub__lock::after { content: ""; position: absolute; inset: 0; background: rgba(12, 14, 20, .34); }
  .bub__lockin { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding: var(--s-4); }
  .bub__lockin .icon { width: 22px; height: 22px; }
  .bub__lockin b { font-size: 14px; font-weight: 800; }
  .bub__lockin span { font-size: 12px; opacity: .85; }
  .bub__lockbtn {
    margin-top: 6px; height: 32px; padding-inline: 15px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .95); color: var(--ink-900);
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800;
  }
  .bub__lockbtn .icon { width: 14px; height: 14px; }
  .msgtip {
    align-self: center; display: flex; align-items: center; gap: 8px;
    margin: var(--s-2) 0; padding: 8px 15px; border-radius: var(--r-full);
    background: var(--gold-50); color: var(--ink-800);
    font-size: 13px; font-weight: 700;
  }
  .msgtip .icon { width: 15px; height: 15px; color: var(--gold-500); }
  .msgread { align-self: flex-end; display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: var(--ink-400); }
  .msgread .icon { width: 14px; height: 14px; color: var(--brand-500); }
  .msgtyping { display: inline-flex; gap: 4px; padding: 12px 15px; }
  .msgtyping i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); animation: typing 1.2s ease-in-out infinite; }
  .msgtyping i:nth-child(2) { animation-delay: .15s; }
  .msgtyping i:nth-child(3) { animation-delay: .3s; }
  @keyframes typing { 40% { transform: translateY(-4px); background: var(--ink-400); } }
  .msg__send {
    flex: none; display: flex; align-items: center; gap: 2px;
    padding: 9px 12px; border-top: 1px solid var(--line);
  }
  .msg__send .icon-button { width: 38px; height: 38px; color: var(--brand-500); }
  .msg__send input {
    flex: 1; min-width: 0; height: 40px; margin-inline: 4px;
    border: 0; outline: none; background: var(--surface-2);
    border-radius: var(--r-full); padding-inline: 15px; font-size: 14px;
  }
  .msg__sendbtn {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: var(--brand-solid); color: #fff; display: grid; place-items: center;
    transition: background var(--dur-1) var(--ease);
  }
  .msg__sendbtn:hover { background: var(--brand-600); }
  .msg__sendbtn .icon { width: 18px; height: 18px; }
  @media (max-width: 767px) {
    .msg { grid-template-columns: 1fr; }
    .msg__inbox { border-right: 0; }
    .msg__thread { display: none; }
    .msg--open .msg__inbox { display: none; }
    .msg--open .msg__thread { display: flex; }
  }

  /* -- notifications ------------------------------------------------------------------------ */
  .ngroup { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); padding: var(--s-4) var(--s-4) var(--s-1); }
  .nitem { display: flex; gap: 12px; padding: 12px var(--s-4); align-items: flex-start; position: relative; }
  @media (min-width: 768px) { .nitem { padding-inline: var(--s-6); } .ngroup { padding-inline: var(--s-6); } }
  .nitem:hover { background: var(--surface-2); }
  .nitem.is-unread { background: var(--brand-50); }
  .nitem.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-solid); }
  .nitem__ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ink-800); }
  .nitem__ic .icon { width: 17px; height: 17px; }
  .nitem__ic--heart { background: var(--accent-500); }
  .nitem__ic--message-circle { background: var(--brand-500); }
  .nitem__ic--user-plus { background: var(--ink-800); }
  .nitem__ic--hand-coins { background: var(--gold-500); }
  .nitem__ic--ticket { background: var(--mint-500); }
  .nitem__ic--image { background: var(--grad-brand); }
  .nitem__ic--repeat-2 { background: var(--mint-500); }
  .nitem__main { flex: 1; min-width: 0; }
  .nitem__text { font-size: 14px; line-height: 20px; color: var(--ink-800); }
  .nitem__text b { font-weight: 800; }
  .nitem__text a { font-weight: 800; }
  .nitem__time { margin-top: 3px; font-size: 12px; color: var(--ink-400); }
  .nitem__faces { display: flex; margin-top: 7px; }
  .nitem__faces .avatar { width: 28px; height: 28px; border: 2px solid var(--surface); margin-left: -8px; }
  .nitem__faces .avatar:first-child { margin-left: 0; }
  .nitem__thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; position: relative; background: var(--surface-3); }
  .nitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .nitem__thumb .nitem__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(12, 14, 20, .35); color: #fff;
  }
  .nitem__thumb .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }
  .nitem .button { flex: none; align-self: center; }

  /* -- clip photo sets (For You: horizontal paging inside a vertical snap item) ------------- */
  .clipset { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .clipset::-webkit-scrollbar { display: none; }
  .clipset__slide { flex: 0 0 100%; scroll-snap-align: start; }
  .clipset__slide img, .clipset__slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .clip > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .clipset__pos {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    padding: 4px 10px; border-radius: var(--r-full);
    background: rgba(12, 14, 20, .6); color: #fff;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
  }
  .clipset__dots {
    position: absolute; left: 0; right: 0; bottom: 148px; z-index: 3;
    display: flex; justify-content: center; gap: 5px; pointer-events: none;
  }
  .clipset__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
  .clipset__dots i.is-on { background: #fff; }

  /* -- verification flow (18+ ID stepper. Spec §9a, automated via Didit) --------------- */
  .vflow {
    display: grid; grid-template-columns: 236px minmax(0, 1fr);
    gap: var(--s-6); padding: var(--s-4) var(--s-4) var(--s-8);
  }
  @media (min-width: 768px) { .vflow { padding: var(--s-5) var(--s-6) var(--s-10); } }
  @media (max-width: 899px) { .vflow { grid-template-columns: 1fr; gap: var(--s-3); } }

  /* sticky step rail. Progress + anchors; horizontal strip on phones */
  .vsteps { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; display: grid; gap: 2px; }
  .vstep {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: var(--r-md); color: var(--ink-500);
  }
  .vstep:hover { background: var(--surface-2); text-decoration: none; }
  .vstep__n, .vstep__ok, .vstep__warn {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .vstep__n { background: var(--surface-3); color: var(--ink-500); }
  .vstep__ok { display: none; background: var(--mint-500); color: #fff; }
  .vstep__warn { display: none; background: var(--danger-500); color: #fff; }
  .vstep__ok .icon, .vstep__warn .icon { width: 14px; height: 14px; }
  .vstep__txt { flex: 1; min-width: 0; }
  .vstep__txt b { display: block; font-size: 14px; font-weight: 700; color: var(--ink-800); white-space: nowrap; }
  .vstep__txt span { display: block; font-size: 12px; color: var(--ink-400); white-space: nowrap; }
  .vstep.is-active { background: var(--brand-50); }
  .vstep.is-active .vstep__n { background: var(--brand-solid); color: #fff; }
  .vstep.is-active .vstep__txt b { color: var(--brand-ink); }
  .vstep.is-done .vstep__n { display: none; }
  .vstep.is-done .vstep__ok { display: grid; }
  .vstep.is-warn .vstep__n { display: none; }
  .vstep.is-warn .vstep__warn { display: grid; }
  .vstep.is-warn .vstep__txt b { color: var(--danger-500); }
  .vsteps__note { padding: var(--s-3) 12px 0; font-size: 12px; line-height: 17px; color: var(--ink-400); }
  .vsteps__note .icon { width: 13px; height: 13px; vertical-align: -2px; color: var(--ink-300); }
  @media (max-width: 899px) {
    .vsteps {
      position: static; display: flex; gap: 6px;
      overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    }
    .vsteps::-webkit-scrollbar { display: none; }
    .vstep { flex-direction: column; align-items: center; gap: 5px; padding: 7px 10px; flex: none; }
    .vstep__txt b { font-size: 11.5px; }
    .vstep__txt span { display: none; }
    .vsteps__note { display: none; }
  }

  /* step section cards. All rendered (no hidden-step state loss) */
  .vsec { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
  .vsec + .vsec, .vstate + .vsec { margin-top: var(--s-4); }
  .vsec__head {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  }
  .vsec__num {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    background: var(--grad-brand); color: #fff;
    display: grid; place-items: center; font-size: 13.5px; font-weight: 800;
  }
  .vsec__head > div { flex: 1; min-width: 0; }
  .vsec__head h2 { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
  .vsec__head p { margin-top: 1px; font-size: 13px; color: var(--ink-500); }
  .vsec__tag {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 800; color: var(--ink-400);
    padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-2);
  }
  .vsec__tag--ok { background: var(--mint-50); color: var(--mint-500); }
  .vsec__tag .icon { width: 12px; height: 12px; }
  .vsec__body { padding: var(--s-5); }
  .vsec__body > * + * { margin-top: var(--s-4); }

  /* completeness checklist rows (step 1) */
  .vcheck { display: grid; gap: var(--s-2); }
  .vcheck__row {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  }
  .vcheck__ic {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: var(--surface-2); color: var(--ink-400);
  }
  .vcheck__ic .icon { width: 15px; height: 15px; }
  .vcheck__row.is-ok .vcheck__ic { background: var(--mint-50); color: var(--mint-500); }
  .vcheck__row.is-miss { border-color: var(--danger-500); }
  .vcheck__row.is-miss .vcheck__ic { background: var(--danger-50); color: var(--danger-500); }
  .vcheck__txt { flex: 1; min-width: 0; }
  .vcheck__txt b { display: block; font-size: 14px; font-weight: 700; color: var(--ink-900); }
  .vcheck__txt span { display: block; font-size: 12.5px; color: var(--ink-500); }
  .vcheck__fix { flex: none; font-size: 13px; font-weight: 700; color: var(--brand-ink); }

  /* Didit provider badge row (verify step 2. Hosted identity session) */
  .vdidit {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface-2);
  }
  .vdidit__ic {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    background: var(--grad-brand); color: #fff;
    display: grid; place-items: center;
  }
  .vdidit__ic .icon { width: 19px; height: 19px; }
  .vdidit__txt { flex: 1; min-width: 0; }
  .vdidit__txt b { display: block; font-size: 14px; font-weight: 800; color: var(--ink-900); }
  .vdidit__txt span { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-400); }

  /* radio-card picker. Compose access options (.docpick--4 = 4-up) */
  .docpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
  @media (max-width: 560px) { .docpick { grid-template-columns: 1fr; } }
  .docpick__opt {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 12px 13px; cursor: pointer;
    border: 1.5px solid var(--line); border-radius: var(--r-lg);
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .docpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
  .docpick__ic {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    background: var(--surface-2); color: var(--ink-500);
    display: grid; place-items: center;
  }
  .docpick__ic .icon { width: 19px; height: 19px; }
  .docpick__txt b { display: block; font-size: 14px; font-weight: 700; color: var(--ink-900); }
  .docpick__txt span { font-size: 12px; color: var(--ink-400); display: block; margin-top: 1px; }
  .docpick__opt:hover { border-color: var(--ink-300); }
  .docpick__opt:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
  .docpick__opt:has(input:checked) .docpick__ic { background: var(--brand-solid); color: #fff; }
  .docpick__opt:has(input:focus-visible) { box-shadow: var(--ring); }

  /* dropzone cards (dashed → filled with preview). Composer media picker */
  .dzrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  @media (max-width: 560px) { .dzrow { grid-template-columns: 1fr; } }
  .dz { min-width: 0; }
  .dz__drop {
    width: 100%; min-height: 168px; padding: var(--s-4);
    display: grid; place-content: center; justify-items: center; gap: 4px;
    border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
    text-align: center; color: var(--ink-500);
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .dz__drop:hover { border-color: var(--brand-400); background: var(--brand-50); }
  .dz__ic {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface-2); color: var(--brand-500);
    display: grid; place-items: center; margin-bottom: 3px;
  }
  .dz__ic .icon { width: 20px; height: 20px; }
  .dz__drop b { font-size: 14px; font-weight: 800; color: var(--ink-800); }
  .dz__cap { font-size: 13px; }
  .dz__cap u { text-decoration-color: var(--brand-400); }
  .dz__hint { font-size: 11.5px; color: var(--ink-400); }
  .dz__prev { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
  .dz__prev > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--surface-3); }
  .dz__meta { display: flex; align-items: center; gap: 8px; padding: 9px 12px 4px; }
  .dz__meta .icon { width: 15px; height: 15px; color: var(--mint-500); flex: none; }
  .dz__meta b { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dz__meta span { flex: none; font-size: 12px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
  .dz__tools { display: flex; align-items: center; gap: 4px; padding: 6px 8px 9px; }
  .dz__tools .icon-button { color: var(--ink-500); }

  /* status panels. In-review / declined / verified (previewed via .seg) */
  .vstate { border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-8) var(--s-5); text-align: center; }
  .vstate__ic {
    width: 64px; height: 64px; margin-inline: auto; border-radius: 50%;
    display: grid; place-items: center;
  }
  .vstate__ic .icon { width: 29px; height: 29px; }
  .vstate--review .vstate__ic { background: var(--gold-50); color: var(--gold-500); }
  .vstate--declined .vstate__ic { background: var(--danger-50); color: var(--danger-500); }
  .vstate--verified .vstate__ic { background: var(--mint-50); color: var(--mint-500); }
  .vstate h2 { margin-top: var(--s-4); font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
  .vstate > p { margin: 6px auto 0; max-width: 460px; font-size: 14.5px; line-height: 21px; color: var(--ink-500); }
  .vstate__reason {
    margin: var(--s-4) auto 0; max-width: 480px; text-align: left;
    background: var(--surface-2); border-left: 3px solid var(--danger-500);
    border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
    font-size: 13.5px; line-height: 19px; color: var(--ink-700);
  }
  .vstate__reason b { display: block; font-size: 13px; font-weight: 800; color: var(--ink-900); }
  .vstate .cluster { justify-content: center; margin-top: var(--s-5); }
  .vstate .sub-card__perks { max-width: 380px; margin-inline: auto; text-align: left; }

  /* review timeline (pending state) */
  .vtl { display: grid; max-width: 400px; margin: var(--s-6) auto 0; text-align: left; }
  .vtl__item { position: relative; display: flex; gap: 12px; padding-bottom: var(--s-5); }
  .vtl__item:last-child { padding-bottom: 0; }
  .vtl__item::before {
    content: ""; position: absolute; left: 11px; top: 25px; bottom: 1px;
    width: 2px; background: var(--line); border-radius: 2px;
  }
  .vtl__item:last-child::before { display: none; }
  .vtl__dot {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; background: var(--surface-3); color: var(--ink-400);
  }
  .vtl__dot .icon { width: 12px; height: 12px; }
  .vtl__item.is-done .vtl__dot { background: var(--mint-500); color: #fff; }
  .vtl__item.is-now .vtl__dot { background: var(--brand-solid); color: #fff; }
  .vtl__item.is-now .vtl__dot .icon { animation: vspin 1.15s linear infinite; }
  @keyframes vspin { to { transform: rotate(1turn); } }
  .vtl__txt b { display: block; font-size: 14px; font-weight: 700; color: var(--ink-900); }
  .vtl__txt span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 17px; color: var(--ink-500); }
  .vtl__item.is-now .vtl__txt b { color: var(--brand-ink); }

  /* segmented control. Used for demo state switching (and reusable) */
  .segbar {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: 10px var(--s-4); border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .segbar__label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-400);
  }
  .segbar__label .icon { width: 13px; height: 13px; }
  .seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  }
  .seg button, .seg a {
    height: 30px; padding-inline: 13px; border-radius: var(--r-full);
    display: inline-flex; align-items: center;
    font-size: 13px; font-weight: 700; color: var(--ink-500); white-space: nowrap;
  }
  .seg button:hover, .seg a:hover { background: var(--surface-2); }
  .seg button.is-active, .seg a.is-active { background: var(--ink-900); color: #fff; }

  /* trust panel (why we verify / storage & deletion) */
  .vtrust { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
  .vtrust__card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); }
  .vtrust__ic {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--brand-50); color: var(--brand-ink);
    display: grid; place-items: center;
  }
  .vtrust__ic .icon { width: 18px; height: 18px; }
  .vtrust__card b { display: block; margin-top: 10px; font-size: 14px; font-weight: 800; }
  .vtrust__card p { margin-top: 3px; font-size: 12.5px; line-height: 18px; color: var(--ink-500); }

  /* mass-message row (creator inbox) */
  .msgmass {
    display: flex; align-items: center; gap: 11px;
    margin: 6px 8px 8px; padding: 10px 12px; width: calc(100% - 16px);
    border: 1px dashed var(--line-strong); border-radius: var(--r-md);
    color: var(--ink-700); text-align: left;
  }
  .msgmass:hover { border-color: var(--brand-300); background: var(--brand-50); }
  .msgmass > .icon { width: 18px; height: 18px; color: var(--brand-500); flex: none; }
  .msgmass > span { flex: 1; min-width: 0; }
  .msgmass b { display: block; font-size: 13.5px; font-weight: 800; }
  .msgmass small { display: block; font-size: 12px; color: var(--ink-500); }
  .msgmass .icon--chev { color: var(--ink-300); }
  .menu__item .badge { margin-left: auto; }

  /* ==========================================================================
     growth additions (v3.1). Rank badges, free-today shelf, milestone card,
     share-sheet referral line, collections, onboarding pick tiles, embed chrome,
     composer access picker + discoverability, rising creators, ranked chips
     ========================================================================== */

  /* -- rank badge on grid tiles (trending) ----------------------------------- */
  .tile__rank {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    min-width: 34px; height: 30px; padding-inline: 8px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: rgba(12, 14, 20, .74); color: #fff;
    font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .tile__rank--top { background: var(--grad-brand); font-size: 17px; }
  .tile:has(.tile__rank) .tile__flags { top: 46px; }

  /* -- repost ribbon (shared-to-profile posts on the profile feed) ---------- */
  .tile__repost {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: var(--r-sm);
    background: rgba(12, 14, 20, .74); color: #fff;
    font-size: 11px; font-weight: 700;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .tile__repost .icon { width: 13px; height: 13px; color: var(--mint-500); }
  .tile:has(.tile__repost) .tile__flags { top: 44px; }

  /* -- free-today shelf (daily check-in module) ------------------------------ */
  .feedmod--free { background: var(--mint-50); }
  .feedmod--free .section-head__title .icon { color: var(--mint-500); }
  .freetoday__ends {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 5px 11px; border-radius: var(--r-full);
    background: var(--mint-500); color: #fff;
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .freetoday__ends .icon { width: 13px; height: 13px; }
  .freerow {
    display: grid; grid-auto-flow: column; grid-auto-columns: 148px;
    gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  }
  .freerow::-webkit-scrollbar { display: none; }
  .freerow .tile { border-radius: var(--r-md); }
  .vflag--was { background: rgba(12, 14, 20, .55); text-decoration: line-through; }

  /* -- milestone celebration card -------------------------------------------- */
  .feedmod--milestone {
    background: var(--grad-brand); color: #fff; text-align: center;
    border-top: 0; padding: var(--s-6) var(--s-4);
  }
  .milestone__icon { display: inline-flex; color: rgba(255, 255, 255, .92); }
  .milestone__avatar { width: 76px; height: 76px; border: 3px solid rgba(255, 255, 255, .85); margin-top: var(--s-2); }
  .milestone__title { margin-top: var(--s-3); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
  .milestone__text { margin-top: 4px; font-size: 13.5px; opacity: .9; }
  .feedmod--milestone .cluster { justify-content: center; margin-top: var(--s-4); }
  .feedmod--milestone .button { background: #fff; color: var(--ink-900); }
  .feedmod--milestone .button--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }

  /* -- share-sheet referral line ---------------------------------------------- */
  .share-ref {
    margin-top: var(--s-3); display: flex; align-items: flex-start; gap: 8px;
    font-size: 12.5px; line-height: 18px; color: var(--ink-500);
  }
  .share-ref .icon { width: 15px; height: 15px; color: var(--gold-500); flex: none; margin-top: 1px; }
  .share-ref b { color: var(--ink-800); }

  /* -- collections: mosaic covers, page hero, cards ---------------------------- */
  .mosaic {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
    aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden;
    background: var(--surface-3);
  }
  .mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .colhero { display: flex; gap: var(--s-5); align-items: flex-start; }
  .colhero__mosaic { flex: none; width: 208px; }
  .colhero__info { flex: 1; min-width: 0; }
  .colhero__desc { margin-top: var(--s-3); font-size: 14.5px; line-height: 22px; color: var(--ink-700); }
  .colhero__cur {
    display: flex; align-items: center; gap: 9px;
    margin-top: var(--s-3); font-size: 13.5px; color: var(--ink-500);
  }
  .colhero__cur a { font-weight: 700; }
  .colhero__cur .verified { width: 14px; height: 14px; }
  .colhero__meta {
    margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-500);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .colhero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
  @media (max-width: 639px) {
    .colhero { flex-direction: column; gap: var(--s-4); }
    .colhero__mosaic { width: min(100%, 300px); }
  }
  .colrow {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
    gap: var(--s-3); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  }
  .colrow::-webkit-scrollbar { display: none; }
  .colcard {
    display: block; border: 1px solid var(--line); border-radius: var(--r-xl);
    overflow: hidden;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .colcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
  .colcard .mosaic { border-radius: 0; }
  .colcard__body { display: block; padding: var(--s-3) var(--s-4) var(--s-4); }
  .colcard__title { display: block; font-size: 15px; font-weight: 800; color: var(--ink-900); }
  .colcard__meta { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-500); }
  .colcard__meta .icon { width: 14px; height: 14px; color: var(--ink-400); }

  /* -- onboarding: distraction-free card + interest pick tiles ----------------- */
  .oboard {
    min-height: calc(100dvh - var(--header-h));
    display: grid; place-items: center;
    padding: var(--s-8) var(--s-4) var(--s-12);
  }
  .oboard__card { width: 100%; max-width: 640px; }
  .oboard__steps { display: flex; gap: 6px; margin-bottom: var(--s-5); }
  .oboard__steps i {
    flex: 1; height: 4px; border-radius: 4px; background: var(--surface-3);
    transition: background var(--dur-2) var(--ease);
  }
  .oboard__steps i.is-done { background: var(--grad-brand); }
  .pickgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: var(--s-5); }
  @media (max-width: 639px) { .pickgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
  .picktile {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
    display: flex; align-items: flex-end; padding: 10px; color: #fff;
    background: var(--grad-brand); text-align: left;
  }
  .picktile img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform var(--dur-3) var(--ease);
  }
  .picktile:hover img { transform: scale(1.05); }
  .picktile::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12, 14, 20, .05) 30%, rgba(12, 14, 20, .72));
  }
  .picktile__name { position: relative; z-index: 1; font-size: 13.5px; font-weight: 800; }
  .picktile__check {
    position: absolute; top: 8px; right: 8px; z-index: 1;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: rgba(12, 14, 20, .3); border: 1.5px solid rgba(255, 255, 255, .75);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  .picktile__check .icon { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: all var(--dur-1) var(--ease); }
  .picktile.is-on { outline: 3px solid var(--brand-500); outline-offset: -3px; }
  .picktile.is-on .picktile__check { background: var(--brand-solid); border-color: var(--brand-solid); }
  .picktile.is-on .picktile__check .icon { opacity: 1; transform: none; }
  .oboard__done { text-align: center; }
  .oboard__done .empty__ic { background: var(--grad-brand); color: #fff; width: 72px; height: 72px; }
  .oboard__done .empty__ic .icon { width: 34px; height: 34px; }

  /* -- embed: bare player chrome, no app shell --------------------------------- */
  .embed { height: 100dvh; display: flex; flex-direction: column; background: #000; }
  .embed__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
  .embed__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .embed__flag { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px; }
  .embed__dur {
    position: absolute; right: 10px; bottom: 10px; z-index: 2;
    padding: 2px 7px; border-radius: var(--r-xs);
    background: rgba(12, 14, 20, .78); color: #fff;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .embed__bar {
    flex: none; display: flex; align-items: center; gap: var(--s-3);
    min-height: 52px; padding: 8px 12px; background: var(--surface);
  }
  .embed__brand {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 16px; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900);
  }
  .embed__brand:hover { text-decoration: none; }
  .embed__brand .icon--logo { width: 22px; height: 22px; }
  .embed__tag {
    font-weight: 800; color: #fff; background: var(--grad-brand);
    border-radius: var(--r-xs); padding: 2px 5px; font-size: 10px;
  }
  .embed__creator {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    color: var(--ink-700); font-size: 13px; font-weight: 600;
  }
  .embed__creator:hover { text-decoration: none; }
  .embed__creator:hover .truncate { text-decoration: underline; }
  .embed__creator .avatar { width: 26px; height: 26px; }
  .embed__creator .verified { width: 13px; height: 13px; flex: none; }
  .embed__watch { margin-left: auto; }

  /* -- composer: 4-up access picker + discoverability score -------------------- */
  .docpick--4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 767px) { .docpick--4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 400px) { .docpick--4 { grid-template-columns: 1fr; } }
  .disco { display: flex; gap: var(--s-4); align-items: center; }
  .dscore { position: relative; flex: none; width: 76px; height: 76px; }
  .dscore svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
  .dscore circle { fill: none; stroke-width: 7; }
  .dscore__track { stroke: var(--surface-3); }
  .dscore__bar { stroke: url(#dgrad); stroke-linecap: round; transition: stroke-dashoffset var(--dur-3) var(--ease); }
  .dscore__num {
    position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
    font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .dscore__num small { font-size: 10.5px; font-weight: 700; color: var(--ink-400); letter-spacing: .02em; }

  /* -- rising creators strip (trending). Bordered .creator-row + .delta -------- */
  .rise {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr);
    justify-content: start; gap: 8px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  }
  .rise::-webkit-scrollbar { display: none; }
  .rise .creator-row {
    margin: 0; padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line); border-radius: var(--r-lg);
  }
  .rise .creator-row:hover { background: var(--surface-2); }

  /* -- rank system (ranking.md): delta chips, rank numerals, medal chips -------- */
  .delta {
    display: inline-flex; align-items: center; gap: 3px; flex: none;
    padding: 2px 7px; border-radius: var(--r-full);
    font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .delta--up { color: var(--mint-500); background: var(--mint-50); }
  .delta--down { color: var(--danger-500); background: var(--danger-50); }
  .delta--new { color: var(--brand-500); background: var(--brand-50); }

  .creator-row__rank {
    flex: none; width: 24px; text-align: center;
    font-size: 14px; font-weight: 800; color: var(--ink-300); font-variant-numeric: tabular-nums;
  }
  .creator-row__rank--top { color: var(--gold-500); }

  .creator-card__rank {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    min-width: 30px; height: 26px; padding-inline: 8px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: rgba(12, 14, 20, .74); color: #fff;
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .creator-card__rank--top { background: var(--grad-brand); }

  .folcard { position: relative; }
  .folcard__rank {
    position: absolute; top: 8px; left: 8px;
    padding: 2px 8px; border-radius: var(--r-full);
    background: var(--surface-2); color: var(--ink-400);
    font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .folcard__rank--top { background: var(--gold-50); color: var(--gold-500); }

  /* suggestion dismiss ×. Members-only "not interested" (signal type 6).
     Sits top-right on folcards/creator-cards; on list rows it inlines
     before the follow button. */
  .folcard__dismiss {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 26px; height: 26px; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: var(--r-full);
    background: var(--surface-2); color: var(--ink-400);
    cursor: pointer; opacity: .65; transition: opacity var(--dur-1) var(--ease);
  }
  .folcard__dismiss:hover { opacity: 1; color: var(--ink); }
  .folcard__dismiss .icon { width: 14px; height: 14px; }
  .creator-card { position: relative; }
  .creator-card__reason {
    display: block; margin-top: 2px;
    font-size: 12px; line-height: 16px; color: var(--ink-400);
  }
  .creator-row__dismiss { flex: none; opacity: .55; }
  .creator-row__dismiss:hover { opacity: 1; }
  .creator-row__dismiss .icon { width: 14px; height: 14px; }

  /* creators directory."Rising this week" rows grid */
  .rrows { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px var(--s-5); }
  .rrows .creator-row { margin-inline: 0; }

  /* profile rank badge. Opt-in public flex, never earnings */
  .rankbadge {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--s-3); padding: 5px 12px; border-radius: var(--r-full);
    background: var(--gold-50); color: var(--gold-500);
    box-shadow: inset 0 0 0 1px rgba(245, 165, 36, .3);
    font-size: 12.5px; font-weight: 800;
  }
  .rankbadge .icon { width: 14px; height: 14px; }

  /* dashboard "Your ranks" cards + 12-week sparkline */
  .rankgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
  .rankcard { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--s-4); }
  .rankcard__label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-400);
  }
  .rankcard__label .icon { width: 14px; height: 14px; }
  .rankcard__value { margin-top: 9px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .rankcard__in { font-size: 14px; font-weight: 700; color: var(--ink-500); }
  .rankcard__sub {
    margin-top: 3px; font-size: 12.5px; line-height: 17px; color: var(--ink-500);
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  }
  .rankcard__sub .icon--sm { width: 13px; height: 13px; flex: none; }
  .rankcard--private { background: var(--gold-50); box-shadow: inset 0 0 0 1px rgba(245, 165, 36, .28); }
  .rankcard--private .rankcard__label { color: var(--gold-500); }
  .rankcard--spark { grid-column: 1 / -1; }
  .spark { display: block; width: 100%; height: 52px; margin-top: var(--s-2); }

  /* -- trending searches: ranked query chips ------------------------------------- */
  .chiprank { font-size: 11.5px; font-weight: 800; color: var(--accent-500); font-variant-numeric: tabular-nums; }

  /* -- leaderboard (ranking.md §2): podium, pinned self-rank, ranked rows ------ */
  .podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  @media (max-width: 700px) { .podium { grid-template-columns: 1fr; } }
  .podium__card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: var(--s-6) var(--s-4) var(--s-5);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .podium__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .podium__card--win {
    border-color: transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-brand) border-box;
    box-shadow: var(--shadow-md);
  }
  .podium__crown { width: 24px; height: 24px; color: var(--gold-500); margin-bottom: var(--s-2); }
  .podium__medal {
    position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1;
    min-width: 34px; height: 34px; padding-inline: 7px;
    display: grid; place-items: center; border-radius: var(--r-full);
    color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-sm);
  }
  .podium__medal--1 { background: linear-gradient(135deg, #F5A524, #F7CE46); }
  .podium__medal--2 { background: linear-gradient(135deg, #98A2B5, #CBD3E0); }
  .podium__medal--3 { background: linear-gradient(135deg, #AF794B, #D29B68); }
  .podium__ava .avatar { width: 88px; height: 88px; }
  .podium__card--win .podium__ava .avatar { width: 108px; height: 108px; }
  .podium__name {
    margin-top: var(--s-3); display: flex; align-items: center; gap: 5px; min-width: 0;
    font-size: 17px; font-weight: 800; color: var(--ink-900);
  }
  .podium__name:hover .truncate { text-decoration: underline; }
  .podium__name .verified { flex: none; }
  .podium__handle { font-size: 12.5px; color: var(--ink-500); }
  .podium__niche {
    margin-top: var(--s-2); padding: 3px 10px; border-radius: var(--r-full);
    background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink-700);
  }
  .podium__niche:hover { background: var(--surface-3); text-decoration: none; }
  .podium__stat {
    margin-top: var(--s-3); display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--ink-500);
  }
  .podium__stat .icon { width: 15px; height: 15px; }
  .podium__stat b { color: var(--ink-900); font-weight: 800; font-variant-numeric: tabular-nums; }
  .podium__foot { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-2); }

  /* pinned "Your rank" module. Member-facing self card on the board */
  .lbself {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
    border: 1.5px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-brand) border-box;
  }
  .lbself__pin {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--brand-ink);
  }
  .lbself__pin .icon { width: 13px; height: 13px; }
  .lbself__who { flex: 1; min-width: 140px; }
  .lbself__name { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--ink-900); }
  .lbself__name:hover .truncate { text-decoration: underline; }
  .lbself__sub { display: block; font-size: 12.5px; color: var(--ink-500); }
  .lbself__rank { flex: none; font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

  /* weekly-reset countdown chip (gold tint, live minutes via x-text) */
  .lblock { background: var(--gold-50); border-color: rgba(245, 165, 36, .32); color: var(--ink-800); }
  .lblock .icon { color: var(--gold-500); }
  .lblock b { font-weight: 800; }

  /* ranked rows list + per-row extras (niche pill, weekly views) */
  .lbrows { margin-top: var(--s-4); }
  .lbrows .creator-row { margin-inline: 0; padding-block: 10px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .lbrows .creator-row:hover { background: var(--surface-2); }
  .lbrows > .creator-row:last-child { border-bottom: 0; }
  .creator-row__niche {
    flex: none; padding: 3px 9px; border-radius: var(--r-full);
    background: var(--surface-2); font-size: 11.5px; font-weight: 700; color: var(--ink-700);
  }
  .creator-row__niche:hover { background: var(--surface-3); text-decoration: none; }
  .creator-row__views {
    flex: none; min-width: 64px; text-align: right;
    display: flex; flex-direction: column; line-height: 15px;
    font-size: 11.5px; color: var(--ink-500);
  }
  .creator-row__views b { font-size: 14px; font-weight: 800; color: var(--ink-900); font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) {
    .creator-row__niche { display: none; }
    .creator-row__views { min-width: 0; }
  }
  /* trailing rows dim into the "keep scrolling" hint */
  .lb-fade {
    -webkit-mask-image: linear-gradient(#000 8%, transparent 92%);
    mask-image: linear-gradient(#000 8%, transparent 92%);
    pointer-events: none;
  }

  /* ==========================================================================
     settings area (spec §9b). .settings grid + .snav sub-nav shared by
     settings / subscription / payouts / privacy / security
     ========================================================================== */
  .settings {
    display: grid; grid-template-columns: 228px minmax(0, 1fr);
    gap: var(--s-6); padding: var(--s-4) var(--s-4) var(--s-8);
  }
  @media (min-width: 768px) { .settings { padding: var(--s-5) var(--s-6) var(--s-10); } }
  @media (max-width: 859px) { .settings { grid-template-columns: 1fr; gap: var(--s-3); } }
  .settings__main { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }

  /* left sub-nav. Sticky on desktop, horizontal scroll strip ≤859px */
  .snav { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; display: grid; gap: 2px; }
  .snav__link {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 700; color: var(--ink-500); white-space: nowrap;
  }
  .snav__link:hover { background: var(--surface-2); text-decoration: none; }
  .snav__link .icon { width: 19px; height: 19px; color: var(--ink-400); flex: none; }
  .snav__link.is-active { background: var(--brand-50); color: var(--brand-ink); }
  .snav__link.is-active .icon { color: var(--brand-500); }
  .snav__foot { margin-top: var(--s-3); padding: var(--s-3) 12px 0; border-top: 1px solid var(--line); }
  .snav__verify {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--mint-500);
  }
  .snav__verify:hover { text-decoration: underline; }
  .snav__verify .icon { width: 15px; height: 15px; }
  @media (max-width: 859px) {
    .snav {
      position: static; display: flex; gap: 6px; align-items: center;
      overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    }
    .snav::-webkit-scrollbar { display: none; }
    .snav__link { flex: none; padding: 8px 13px; }
    .snav__foot { margin: 0; padding: 0 0 0 4px; border-top: 0; flex: none; display: flex; align-items: center; }
  }

  /* Google SERP preview. Literal Google colors by design (external mimic) */
  .gsnip {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-5); background: var(--surface);
  }
  .gsnip__title {
    display: inline-block; font-size: 19px; line-height: 26px; font-weight: 450;
    color: #1a0dab;
  }
  .gsnip__title:hover { text-decoration: underline; }
  .gsnip__url { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: #0d652d; }
  .gsnip__desc {
    margin-top: 4px; font-size: 13.5px; line-height: 20px; color: #4d5156;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* payout balance card */
  .paybal {
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: var(--s-5); background: var(--surface);
  }
  .paybal__main { flex: 1; min-width: 210px; }
  .paybal__label {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-400);
  }
  .paybal__label .icon { width: 14px; height: 14px; }
  .paybal__num { margin-top: 6px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .paybal__pend { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-500); }
  .paybal__pend .icon { width: 14px; height: 14px; color: var(--gold-500); }

  /* device/session + connected-account rows */
  .sessrow {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  }
  .sessrow__ic {
    flex: none; width: 36px; height: 36px; border-radius: 10px;
    background: var(--surface-2); color: var(--ink-500);
    display: grid; place-items: center;
  }
  .sessrow__ic .icon { width: 17px; height: 17px; }
  .sessrow--now .sessrow__ic { background: var(--mint-50); color: var(--mint-500); }
  .sessrow__txt { flex: 1; min-width: 0; }
  .sessrow__txt b { display: block; font-size: 14px; font-weight: 700; color: var(--ink-900); }
  .sessrow__txt span { display: block; font-size: 12.5px; color: var(--ink-500); }
  .sessrow .button, .sessrow .badge { flex: none; }

  /* bundle editor rows (subscription settings) */
  .bunrow {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  }
  .bunrow__term { flex: none; width: 86px; font-size: 14px; font-weight: 700; color: var(--ink-900); }
  .bunrow__in { width: 118px; flex: none; }
  .bunrow__in .input { text-align: right; }
  .bunrow__ex { flex: 1; min-width: 170px; text-align: right; font-size: 12.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) { .bunrow__ex { min-width: 0; } }

  /* danger zone (delete account) */
  .dangerzone {
    border: 1px solid color-mix(in srgb, var(--danger-500) 38%, transparent);
    border-radius: var(--r-xl);
    background: color-mix(in srgb, var(--danger-50) 55%, var(--surface));
  }
  .dangerzone__head {
    display: flex; align-items: center; gap: 10px;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid color-mix(in srgb, var(--danger-500) 22%, transparent);
  }
  .dangerzone__head .icon { width: 18px; height: 18px; color: var(--danger-500); }
  .dangerzone__head h2 { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--danger-500); }
  .dangerzone__body { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5); }
  .dangerzone__body .setting-card__txt p { max-width: 460px; }
  .button--danger-outline { background: var(--surface); border-color: color-mix(in srgb, var(--danger-500) 45%, transparent); color: var(--danger-500); }
  .button--danger-outline:hover { background: var(--danger-50); border-color: var(--danger-500); }

  /* password strength meter stub (security settings) */
  .pwmeter { display: flex; gap: 5px; }
  .pwmeter i { flex: 1; height: 5px; border-radius: var(--r-full); background: var(--surface-3); }
  .pwmeter i.is-on { background: var(--mint-500); }

  /* removable chip (geo-restrict selected countries) */
  .chip__x {
    display: inline-grid; place-items: center; flex: none;
    width: 18px; height: 18px; margin-right: -6px; border-radius: 50%;
    color: inherit; opacity: .75;
  }
  .chip__x:hover { opacity: 1; background: rgba(12, 14, 20, .08); }
  .chip--active .chip__x:hover { background: rgba(255, 255, 255, .16); }
  .chip__x .icon { width: 11px; height: 11px; stroke-width: 2.6; }

  /* boxed banner variant (info cards inside settings stacks) */
  .banner--card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }

  /* input suffix ("/month", "% off"). Mirrors .input-wrap > .icon */
  .input-wrap__sfx {
    position: absolute; right: 14px; top: 50%; translate: 0 -50%;
    font-size: 13px; font-weight: 600; color: var(--ink-400);
    pointer-events: none; white-space: nowrap;
  }
  .input-wrap:has(.input-wrap__sfx) .input { padding-right: 58px; }

  /* two-up radio-card picker + mint field hint */
  .docpick--2 { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 560px) { .docpick--2 { grid-template-columns: 1fr; } }
  .field__help--ok { color: var(--mint-500); display: flex; align-items: center; gap: 5px; }

  /* -- categories: directory + pickers (doc/bold/categories.md) --------------- */
  /* .catdir. Flex-wrap grid of .catchip directory chips inside each
     /categories group section. */
  .catdir { display: flex; flex-wrap: wrap; gap: 8px; }

  /* /tags A. Z index. .tabs--sticky letter bar over .vsec letter cards
     (the categories-page grouping pattern). Alpine dims letters and hides
     cards/chips while the hero xsearch filter runs. */
  .tabs--az { overflow-x: auto; scrollbar-width: none; border-bottom: 0; }
  .tabs--az::-webkit-scrollbar { display: none; }
  .tabs--az .tabs__item { flex: none; min-width: 34px; justify-content: center; padding-inline: 10px; }
  .tabs--az .tabs__item.is-dim { opacity: .35; }
  .tabs--az .tabs__item.is-empty { opacity: .28; cursor: default; }
  /* .tagdelta. Rank-movement pill inside catchips + tag-rank rows:
     last-30d volume rank vs prior-30d rank. Tinted pill so the green/red
     signal reads at a glance even at chip scale. */
  .tagdelta { display: inline-flex; align-items: center; gap: 3px; font-style: normal;
    font-size: 11px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
    line-height: 1; padding: 3px 7px; border-radius: var(--r-full); vertical-align: middle; }
  .tagdelta .icon { width: 12px; height: 12px; stroke-width: 2.4; color: currentColor; }
  .tagdelta--up { color: var(--mint-500); background: var(--mint-50); }
  .tagdelta--down { color: var(--danger-500); background: var(--danger-50); }
  .tagdelta--new { color: var(--gold-500); background: var(--gold-50);
    text-transform: uppercase; font-size: 9.5px; letter-spacing: .06em; }
  .tagsdir .vsec { scroll-margin-top: calc(var(--header-h) + 52px); }
  .tagcols { display: grid; gap: 0 var(--s-6); }
  @media (min-width: 720px) { .tagcols { grid-template-columns: 1fr 1fr; } }
  .xhero .display .icon { width: .85em; height: .85em; color: var(--brand-500); vertical-align: -0.08em; }

  /* .catpick. Categories multi-select (settings Profile & page, composer).
     Grid of toggle cells; Alpine keeps ≤3 picks, the star marks primary. */
  .catpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .catpick--mini { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .catpick__opt {
    position: relative; display: flex; align-items: center; gap: 7px;
    min-height: 42px; padding: 8px 10px; text-align: left;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-800);
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .catpick__opt:hover { border-color: var(--line-strong); }
  .catpick__opt.is-on { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-ink); }
  .catpick__opt.is-primary { box-shadow: inset 0 0 0 1px var(--brand-500); }
  .catpick__opt.is-capped { opacity: .45; }
  .catpick__opt.is-capped:hover { border-color: var(--line); cursor: not-allowed; }
  .catpick__name { flex: 1; min-width: 0; }
  .catpick__pri {
    flex: none; font-size: 9px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--brand-ink);
  }
  .catpick__star {
    flex: none; display: grid; place-items: center;
    width: 22px; height: 22px; margin-right: -4px; border-radius: 50%;
    color: var(--ink-400);
  }
  .catpick__star:hover { color: var(--gold-500); background: var(--surface); }
  .catpick__star.is-primary { color: var(--brand-solid); }
  .catpick__star .icon { width: 14px; height: 14px; }
  .catpick--mini .catpick__opt {
    min-height: 34px; padding: 6px 8px; justify-content: center;
    text-align: center; font-size: 12.5px;
  }
  /* Grouped picker (composer aside): labeled sections + a scroll cap so
     100+ categories stay browsable without ballooning the sidebar. */
  .catpick--scroll { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
  .catpick__group {
    grid-column: 1 / -1; margin: 10px 0 0; padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
  }
  .catpick__group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

  /* ==========================================================================
     i18n (doc/bold/i18n.md). Language switcher, suggestion strip,
     language pick rows, language-aware empty state
     ========================================================================== */

  /* .langsel. Globe icon-button + .menu of the launch languages in native
     names. Reuses .menu-wrap for positioning; entries are plain links to the
     same page under the locale prefix (/ja/... , /es/.... EN stays unprefixed).
     Topbar uses the icon-button variant, footer the .langsel--foot text button. */
  .langsel .menu { min-width: 190px; }
  .langsel .menu__item[aria-current] { color: var(--brand-ink); }
  .langsel__cur { margin-left: auto; width: 15px; height: 15px; color: var(--brand-500); }
  .langsel__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--r-full);
    font-size: 13px; font-weight: 600; color: var(--ink-500);
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .langsel__btn:hover { color: var(--ink-800); background: var(--surface-2); text-decoration: none; }
  .langsel__btn .icon { width: 15px; height: 15px; }
  .langsel__btn .langsel__car { width: 13px; height: 13px; color: var(--ink-400); }
  /* footer variant: the .menu--up popover right-aligns to the legal row */
  .langsel--foot .menu { left: auto; right: 0; }

  /* .langstrip. Thin dismissable suggestion banner under the topbar
     (guest first visit, e.g."日本語で表示しますか？"). Quiet by design. Sunken surface + hairline, not a promo. */
  .langstrip { background: var(--surface-2); border-bottom: 1px solid var(--line); }
  .langstrip__in {
    max-width: var(--page-max); margin-inline: auto;
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: 9px var(--s-4); font-size: 13px;
  }
  @media (min-width: 768px) { .langstrip__in { padding-inline: var(--s-6); } }
  .langstrip__in > .icon { width: 16px; height: 16px; color: var(--ink-400); flex: none; }
  .langstrip__in p { flex: 1; min-width: 170px; font-weight: 600; color: var(--ink-700); }
  .langstrip__in .cluster { flex: none; --gap: 6px; }

  /* .langpick. Checkable tile rows for language questions (onboarding step 0,
     settings-language). role="radio" for single pick, role="checkbox" for
     multi; .is-on marks selection, the circle .langpick__check fills brand. */
  .langpick { display: grid; gap: 8px; }
  .langpick--grid { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 767px) { .langpick--grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .langpick--grid { grid-template-columns: 1fr; } }
  .langpick__opt {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; text-align: left;
    font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink-800);
    border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface);
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .langpick__opt:hover { border-color: var(--ink-300); }
  .langpick__opt.is-on { border-color: var(--brand-500); background: var(--brand-50); }
  .langpick__name { flex: 1; min-width: 0; }
  .langpick__sub { font-size: 12px; font-weight: 500; color: var(--ink-400); }
  .langpick__check {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--line-strong); color: #fff;
    display: grid; place-items: center;
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .langpick__check .icon { width: 13px; height: 13px; stroke-width: 2.6; opacity: 0; transform: scale(.6); transition: all var(--dur-1) var(--ease); }
  .langpick__opt.is-on .langpick__check { background: var(--brand-solid); border-color: var(--brand-solid); }
  .langpick__opt.is-on .langpick__check .icon { opacity: 1; transform: none; }

  /* .empty-state. Language-aware empty surface (strict content filtering
     yields nothing): circular icon badge, bold line, sub-line, directory CTA.
     Distinct from .empty (generic). Brand-tinted badge + ghost button. */
  .empty-state { padding: var(--s-12) var(--s-6); text-align: center; }
  .empty-state__ic {
    width: 60px; height: 60px; margin-inline: auto; border-radius: 50%;
    background: var(--brand-50); color: var(--brand-500);
    display: grid; place-items: center;
  }
  .empty-state__ic .icon { width: 26px; height: 26px; }
  .empty-state__title { margin-top: var(--s-4); font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
  .empty-state__text { margin-top: 4px; font-size: 13.5px; color: var(--ink-500); }
  .empty-state .button { margin-top: var(--s-4); }

  /* .langdemo. Dashed wrapper marking an in-settings component preview
     (e.g. the empty-state card on settings-language) */
  .langdemo { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); }
  .langdemo .empty-state { padding: var(--s-8) var(--s-5); }
}
@layer utilities {
  .display { font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -.03em; }
  .h1 { font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -.02em; }
  .h2 { font-size: 20px; line-height: 26px; font-weight: 750; letter-spacing: -.01em; }
  .h3 { font-size: 17px; line-height: 24px; font-weight: 700; }
  .body-lg { font-size: 16px; line-height: 25px; }
  .small { font-size: 13px; line-height: 18px; font-weight: 500; }
  .micro { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .block { padding: var(--s-5) var(--s-4); }
  @media (min-width: 768px) { .block { padding: var(--s-6); } }
  .block--sep { border-top: 1px solid var(--line); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap, var(--s-3)); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap, var(--s-3)); }
  @media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
  .text-brand { color: var(--brand-ink); }
  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-3)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s-2)); }
  .split { display: flex; align-items: center; justify-content: space-between; gap: var(--gap, var(--s-3)); }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .clamp-2, .clamp-3, .clamp-5 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
  .clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
  .clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; }
  .muted { color: var(--ink-500); }
  /* must live in THIS layer: utilities outranks components regardless of
     specificity, so a .band override in components never applies. */
  .band .muted, .band .text-brand, .band .micro { color: #fff; }
  .tabular { font-variant-numeric: tabular-nums; }
  @media (max-width: 767px) { .hide-mobile { display: none !important; } }
  @media (min-width: 768px) { .hide-desktop { display: none !important; } }
  @media (min-width: 1200px) { .hide-wide { display: none !important; } }
}

  /* -- SFW browsing mode (bold_sfw cookie -> html.sfw) --------------------
     Media on discovery surfaces renders blurred behind a tap-to-view veil.
     Videos always veil; images auto-unblur only when the client-side
     classifier (nsfwjs, lazy-loaded) proves them Neutral/Drawing. Related-
     search blocks are hidden outright. Avatars/chrome stay normal. --*/
  html.sfw .post__media, html.sfw .media, html.sfw .clipset__slide,
  html.sfw .catcard, html.sfw .mosaic, html.sfw .vrow__thumb,
  html.sfw .nitem__thumb, html.sfw .creator-card__cover,
  html.sfw .profile-hero__cover, html.sfw .viewer__media,
  html.sfw .tile, html.sfw .player, html.sfw .unext__img,
  html.sfw .viewer__thumb, html.sfw .bub--media, html.sfw .clip,
  html.sfw .colcard .mosaic { position: relative; }
  html.sfw .post__media img, html.sfw .media img, html.sfw .clipset__slide img,
  html.sfw .catcard img, html.sfw .mosaic img, html.sfw .vrow__thumb img,
  html.sfw .nitem__thumb img, html.sfw .creator-card__cover img,
  html.sfw .profile-hero__cover img, html.sfw .viewer__media img,
  html.sfw .tile img, html.sfw .player img, html.sfw .unext__img img,
  html.sfw .viewer__thumb img, html.sfw .bub--media img, html.sfw .clip > img,
  html.sfw .clip video, html.sfw .media video, html.sfw .player video {
    filter: blur(26px) saturate(.85); transform: scale(1.06);
    transition: filter .25s ease;
  }
  html.sfw .clip video, html.sfw .player video { visibility: hidden; }
  html.sfw .sfw-show img, html.sfw .sfw-show video,
  html.sfw img.sfw-show, html.sfw video.sfw-show { filter: none !important; transform: none; visibility: visible !important; }
  html.sfw .player .sfwveil { z-index: 5; }
  html.sfw .relblock { display: none; }
  .sfwveil {
    position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
    background: color-mix(in srgb, #0b0d12 38%, transparent); border: 0;
    border-radius: inherit; cursor: pointer; color: #fff;
    font: 700 12.5px/1 inherit; letter-spacing: .02em;
  }
  .sfwveil .icon { width: 22px; height: 22px; display: block; margin-bottom: 6px; }
  .sfwveil span { display: block; text-align: center; padding: 0 12px; }
  .sfwtoggle.is-on { color: var(--mint-500); background: var(--mint-50); }


/* SPA-nav progress bar (bold.js Bold.navigate) */
.navprog{position:fixed;top:0;left:0;z-index:99999;height:2px;width:0;background:var(--grad-brand);opacity:0;pointer-events:none;transition:width .35s ease,opacity .2s ease}
.navprog.on{width:82%;opacity:1;transition:width .8s cubic-bezier(.2,.6,.3,1),opacity .1s}