/* EasyClippers 13.8: a professional, solid look. Light is the default: white pages on a soft grey ground with the navy
   sidebar; dark is the same layout in navy. No photo backdrop, no glass, no glow: depth comes from hairline borders and
   soft shadows. Every colour is a token (tokens block below), so the sidebar, the phone tab bar and everything that sits
   on video always wear the navy tokens, in both themes.
   Type is Inter, tight tracking, medium weights. Colour is information: navy (light) or aqua (dark) for the main action,
   the brand teal for what is on, tally red only for what is live, green, amber and rose for state. Motion is quick and
   all of it stops for people who ask for reduced motion. */
@font-face { font-family: 'Inter'; src: url('/static/assets/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* the caption fonts the renderer burns in (assets/fonts, served by app.py at /fonts), for the font picker and preview */
@font-face { font-family: 'cf-anton'; src: url('/fonts/Anton-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-montserrat'; src: url('/fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'cf-poppins'; src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'cf-bebas'; src: url('/fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-bangers'; src: url('/fonts/Bangers-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-luckiest'; src: url('/fonts/LuckiestGuy-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-lilita'; src: url('/fonts/LilitaOne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-marker'; src: url('/fonts/PermanentMarker-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-playfair'; src: url('/fonts/PlayfairDisplay-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
/* 13.12: the 14 caption fonts of 13.10, so the font picker shows each name in its own face (they fell back to Inter) */
@font-face { font-family: 'cf-montserrat_black'; src: url('/fonts/Montserrat-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-poppins_black'; src: url('/fonts/Poppins-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-tiktok'; src: url('/fonts/TikTokSans-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-archivo'; src: url('/fonts/ArchivoBlack-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-inter'; src: url('/fonts/Inter-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-atkinson'; src: url('/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-oswald'; src: url('/fonts/Oswald-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-barlow'; src: url('/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-jost'; src: url('/fonts/Jost-800-Heavy.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-chakra'; src: url('/fonts/ChakraPetch-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-plexmono'; src: url('/fonts/IBMPlexMono-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-dmserif'; src: url('/fonts/DMSerifDisplay-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-jakarta'; src: url('/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'cf-instrument'; src: url('/fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  color-scheme: light;
  /* ground, surfaces and what sits on video */
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f6fa; --surface-3: #e9eef5; --raised: #ffffff; --well: #ffffff;
  --topbar-bg: #ffffff; --side-bg: #071226; --media-bg: #dfe5ee; --scrim: rgba(7, 18, 38, .45);
  --tip-bg: #0b1426; --tip-text: #f3f7fc; --hover: #eef2f7; --active: rgba(13, 148, 136, .08); --nav-on: rgba(148, 197, 255, .1);
  /* text */
  --text: #071226; --text-2: #1f2d44; --text-3: #3a4760; --text-hi: #071226; --text-soft: #13203a;
  /* hairlines */
  --border: #e2e8f0; --border-2: #d6dee8; --border-3: #bfcad8;
  /* actions and brand */
  --accent: #22d6c8; --accent-hover: #52e4d8; --accent-2: #52e4d8; --on-accent: #03141a;
  --accent-text: #0b6e86; --accent-text-hover: #074f61; --focus-ring: #0891b2; --focus: rgba(8, 145, 178, .22);
  --brand-ink: #0d9488; --on-brand: #ffffff; --bar: #14b8a6; --switch-on: #0d9488; --tab-on: #071226; --knob: #ffffff;
  --brand: linear-gradient(100deg, #0e7490 0%, #0891b2 30%, #2563eb 68%, #7c3aed 100%);
  --aqua: #0d9488; --aqua-2: #14b8a6; --cyan: #0891b2; --blue: #2563eb; --violet: #7c3aed; --mint: #059669;
  --amber: #d97706; --rose: #e11d48; --tally: #e11d48; --tally-ink: #e11d48;
  /* colour channels for tints and borders: rgb(var(--aq) / .1) */
  --ov: 15 40 80; --aq: 13 148 136; --aq2: 13 148 136; --cy: 8 145 178; --bl: 37 99 235; --vi: 124 58 237;
  --mi: 5 150 105; --ro: 225 29 72; --am: 217 119 6; --ta: 225 29 72; --sh: 16 24 40; --shk: .22;
  /* state words */
  --t-chip: #4a5a71; --t-blue: #1d4ed8; --t-violet: #6d28d9; --t-amber: #b45309; --t-green: #047857; --t-red: #be123c;
  --t-cyan: #0e7490; --t-aqua: #0f766e; --t-live: #be123c; --t-gold: #a16207;
  --code-bg: #f3f6fa; --code-text: #0b1426;
  /* depth */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lift: 0 1px 3px rgba(16, 24, 40, .05), 0 12px 28px -10px rgba(16, 24, 40, .16);
  --shadow-pop: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 52px -14px rgba(16, 24, 40, .26);
}
/* dark: solid navy. Also worn by the sidebar, the phone tab bar and everything over video, in both themes */
:root[data-theme="dark"],
.sidebar, .tabbar, .on-dark, .hv, .lp-screen, .rv-card .media, .ccard .media, .poster, .monitor .screen, .rc-media,
.queue .q, .review .stage-video, .phone-prev, .lf-thumb, .watch-stage, .mk-phone, .mk-caps,
.card.glass, .glass.card, .feat, .lp-plan, .lp-pain, .lp-final, .lp-tablewrap, .lp-specs-cta, .tiles, .ob-line,
.monitor, .post-list, .auth-card {
  color-scheme: dark;
  --bg: #071226; --surface: #0a172c; --surface-2: #0d1c36; --surface-3: #122543; --raised: #0e1d38; --well: #08142a;
  --topbar-bg: #071226; --side-bg: #061024; --media-bg: #0c1a33; --scrim: rgba(2, 6, 14, .62);
  --tip-bg: #0b1730; --tip-text: #eaf4ff; --hover: rgba(148, 210, 255, .06); --active: rgba(46, 230, 214, .1); --nav-on: rgba(148, 197, 255, .1);
  --text: #ffffff; --text-2: #dae4f2; --text-3: #b8c6da; --text-hi: #ffffff; --text-soft: #eef3fa;
  --border: #182a47; --border-2: #213658; --border-3: #2f4772;
  --accent: #22d6c8; --accent-hover: #52e4d8; --accent-2: #52e4d8; --on-accent: #03141a;
  --accent-text: #7ff3ea; --accent-text-hover: #c6fbf6; --focus-ring: #7ff3ea; --focus: rgba(46, 230, 214, .2);
  --brand-ink: #2ee6d6; --on-brand: #04201e; --bar: #2ee6d6; --switch-on: #2ee6d6; --tab-on: #2ee6d6; --knob: #eef5ff;
  --brand: linear-gradient(100deg, #2ee6d6 0%, #22d3ee 32%, #3b82f6 70%, #8b5cf6 100%);
  --aqua: #2ee6d6; --aqua-2: #7ff3ea; --cyan: #22d3ee; --blue: #3b82f6; --violet: #8b5cf6; --mint: #34d399;
  --amber: #fbbf24; --rose: #fb7185; --tally: #ff3b5c; --tally-ink: #e11d48;
  --ov: 148 197 255; --aq: 46 230 214; --aq2: 127 243 234; --cy: 34 211 238; --bl: 59 130 246; --vi: 139 92 246;
  --mi: 52 211 153; --ro: 251 113 133; --am: 251 191 36; --ta: 255 59 92; --sh: 0 0 0; --shk: 1;
  --t-chip: #c4d2e6; --t-blue: #a9c8ff; --t-violet: #cdbcff; --t-amber: #fcd97e; --t-green: #8ef0c8; --t-red: #feb4c1;
  --t-cyan: #9cecfa; --t-aqua: #c6fbf6; --t-live: #ffd3dc; --t-gold: #f4d47c;
  --code-bg: rgba(2, 6, 16, .72); --code-text: #cfe7ff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -2px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 6px -1px rgba(0, 0, 0, .45), 0 16px 36px -16px rgba(0, 0, 0, .7);
  --shadow-pop: 0 4px 12px -2px rgba(0, 0, 0, .5), 0 30px 70px -20px rgba(0, 0, 0, .8);
}
/* the cards of the navy theme are white (13.8) */
:root[data-theme="dark"] .card.glass, :root[data-theme="dark"] .glass.card, :root[data-theme="dark"] .feat,
:root[data-theme="dark"] .lp-plan, :root[data-theme="dark"] .lp-pain, :root[data-theme="dark"] .lp-final,
:root[data-theme="dark"] .lp-tablewrap, :root[data-theme="dark"] .lp-specs-cta, :root[data-theme="dark"] .tiles,
:root[data-theme="dark"] .ob-line, :root[data-theme="dark"] .monitor, :root[data-theme="dark"] .post-list,
:root[data-theme="dark"] .auth-card {
  color-scheme: light;
  /* ground, surfaces and what sits on video */
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f6fa; --surface-3: #e9eef5; --raised: #ffffff; --well: #ffffff;
  --topbar-bg: #ffffff; --side-bg: #071226; --media-bg: #dfe5ee; --scrim: rgba(7, 18, 38, .45);
  --tip-bg: #0b1426; --tip-text: #f3f7fc; --hover: #eef2f7; --active: rgba(13, 148, 136, .08); --nav-on: rgba(148, 197, 255, .1);
  /* text */
  --text: #071226; --text-2: #1f2d44; --text-3: #3a4760; --text-hi: #071226; --text-soft: #13203a;
  /* hairlines */
  --border: #e2e8f0; --border-2: #d6dee8; --border-3: #bfcad8;
  /* actions and brand */
  --accent: #22d6c8; --accent-hover: #52e4d8; --accent-2: #52e4d8; --on-accent: #03141a;
  --accent-text: #0b6e86; --accent-text-hover: #074f61; --focus-ring: #0891b2; --focus: rgba(8, 145, 178, .22);
  --brand-ink: #0d9488; --on-brand: #ffffff; --bar: #14b8a6; --switch-on: #0d9488; --tab-on: #071226; --knob: #ffffff;
  --brand: linear-gradient(100deg, #0e7490 0%, #0891b2 30%, #2563eb 68%, #7c3aed 100%);
  --aqua: #0d9488; --aqua-2: #14b8a6; --cyan: #0891b2; --blue: #2563eb; --violet: #7c3aed; --mint: #059669;
  --amber: #d97706; --rose: #e11d48; --tally: #e11d48; --tally-ink: #e11d48;
  /* colour channels for tints and borders: rgb(var(--aq) / .1) */
  --ov: 15 40 80; --aq: 13 148 136; --aq2: 13 148 136; --cy: 8 145 178; --bl: 37 99 235; --vi: 124 58 237;
  --mi: 5 150 105; --ro: 225 29 72; --am: 217 119 6; --ta: 225 29 72; --sh: 16 24 40; --shk: .22;
  /* state words */
  --t-chip: #4a5a71; --t-blue: #1d4ed8; --t-violet: #6d28d9; --t-amber: #b45309; --t-green: #047857; --t-red: #be123c;
  --t-cyan: #0e7490; --t-aqua: #0f766e; --t-live: #be123c; --t-gold: #a16207;
  --code-bg: #f3f6fa; --code-text: #0b1426;
  /* depth */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lift: 0 1px 3px rgba(16, 24, 40, .05), 0 12px 28px -10px rgba(16, 24, 40, .16);
  --shadow-pop: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 52px -14px rgba(16, 24, 40, .26);
}
/* dialogs, drawers and menus keep the page's colours, and so do the cards inside them */
:root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .card.glass, :root:not([data-theme="dark"]) :is(.modal,
.drawer, .popover) .glass.card, :root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .feat,
:root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .lp-plan, :root:not([data-theme="dark"]) :is(.modal,
.drawer, .popover) .lp-pain, :root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .lp-final,
:root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .lp-tablewrap, :root:not([data-theme="dark"]) :is(.modal,
.drawer, .popover) .lp-specs-cta, :root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .tiles,
:root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .ob-line, :root:not([data-theme="dark"]) :is(.modal,
.drawer, .popover) .monitor, :root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .post-list,
:root:not([data-theme="dark"]) :is(.modal, .drawer, .popover) .auth-card {
  color-scheme: light;
  /* ground, surfaces and what sits on video */
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f6fa; --surface-3: #e9eef5; --raised: #ffffff; --well: #ffffff;
  --topbar-bg: #ffffff; --side-bg: #071226; --media-bg: #dfe5ee; --scrim: rgba(7, 18, 38, .45);
  --tip-bg: #0b1426; --tip-text: #f3f7fc; --hover: #eef2f7; --active: rgba(13, 148, 136, .08); --nav-on: rgba(148, 197, 255, .1);
  /* text */
  --text: #071226; --text-2: #1f2d44; --text-3: #3a4760; --text-hi: #071226; --text-soft: #13203a;
  /* hairlines */
  --border: #e2e8f0; --border-2: #d6dee8; --border-3: #bfcad8;
  /* actions and brand */
  --accent: #22d6c8; --accent-hover: #52e4d8; --accent-2: #52e4d8; --on-accent: #03141a;
  --accent-text: #0b6e86; --accent-text-hover: #074f61; --focus-ring: #0891b2; --focus: rgba(8, 145, 178, .22);
  --brand-ink: #0d9488; --on-brand: #ffffff; --bar: #14b8a6; --switch-on: #0d9488; --tab-on: #071226; --knob: #ffffff;
  --brand: linear-gradient(100deg, #0e7490 0%, #0891b2 30%, #2563eb 68%, #7c3aed 100%);
  --aqua: #0d9488; --aqua-2: #14b8a6; --cyan: #0891b2; --blue: #2563eb; --violet: #7c3aed; --mint: #059669;
  --amber: #d97706; --rose: #e11d48; --tally: #e11d48; --tally-ink: #e11d48;
  /* colour channels for tints and borders: rgb(var(--aq) / .1) */
  --ov: 15 40 80; --aq: 13 148 136; --aq2: 13 148 136; --cy: 8 145 178; --bl: 37 99 235; --vi: 124 58 237;
  --mi: 5 150 105; --ro: 225 29 72; --am: 217 119 6; --ta: 225 29 72; --sh: 16 24 40; --shk: .22;
  /* state words */
  --t-chip: #4a5a71; --t-blue: #1d4ed8; --t-violet: #6d28d9; --t-amber: #b45309; --t-green: #047857; --t-red: #be123c;
  --t-cyan: #0e7490; --t-aqua: #0f766e; --t-live: #be123c; --t-gold: #a16207;
  --code-bg: #f3f6fa; --code-text: #0b1426;
  /* depth */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lift: 0 1px 3px rgba(16, 24, 40, .05), 0 12px 28px -10px rgba(16, 24, 40, .16);
  --shadow-pop: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 52px -14px rgba(16, 24, 40, .26);
}
:root[data-theme="dark"] :is(.modal, .drawer, .popover) .card.glass, :root[data-theme="dark"] :is(.modal, .drawer,
.popover) .glass.card, :root[data-theme="dark"] :is(.modal, .drawer, .popover) .feat,
:root[data-theme="dark"] :is(.modal, .drawer, .popover) .lp-plan, :root[data-theme="dark"] :is(.modal, .drawer,
.popover) .lp-pain, :root[data-theme="dark"] :is(.modal, .drawer, .popover) .lp-final,
:root[data-theme="dark"] :is(.modal, .drawer, .popover) .lp-tablewrap, :root[data-theme="dark"] :is(.modal, .drawer,
.popover) .lp-specs-cta, :root[data-theme="dark"] :is(.modal, .drawer, .popover) .tiles,
:root[data-theme="dark"] :is(.modal, .drawer, .popover) .ob-line, :root[data-theme="dark"] :is(.modal, .drawer,
.popover) .monitor, :root[data-theme="dark"] :is(.modal, .drawer, .popover) .post-list,
:root[data-theme="dark"] :is(.modal, .drawer, .popover) .auth-card {
  color-scheme: dark;
  --bg: #071226; --surface: #0a172c; --surface-2: #0d1c36; --surface-3: #122543; --raised: #0e1d38; --well: #08142a;
  --topbar-bg: #071226; --side-bg: #061024; --media-bg: #0c1a33; --scrim: rgba(2, 6, 14, .62);
  --tip-bg: #0b1730; --tip-text: #eaf4ff; --hover: rgba(148, 210, 255, .06); --active: rgba(46, 230, 214, .1); --nav-on: rgba(148, 197, 255, .1);
  --text: #ffffff; --text-2: #dae4f2; --text-3: #b8c6da; --text-hi: #ffffff; --text-soft: #eef3fa;
  --border: #182a47; --border-2: #213658; --border-3: #2f4772;
  --accent: #22d6c8; --accent-hover: #52e4d8; --accent-2: #52e4d8; --on-accent: #03141a;
  --accent-text: #7ff3ea; --accent-text-hover: #c6fbf6; --focus-ring: #7ff3ea; --focus: rgba(46, 230, 214, .2);
  --brand-ink: #2ee6d6; --on-brand: #04201e; --bar: #2ee6d6; --switch-on: #2ee6d6; --tab-on: #2ee6d6; --knob: #eef5ff;
  --brand: linear-gradient(100deg, #2ee6d6 0%, #22d3ee 32%, #3b82f6 70%, #8b5cf6 100%);
  --aqua: #2ee6d6; --aqua-2: #7ff3ea; --cyan: #22d3ee; --blue: #3b82f6; --violet: #8b5cf6; --mint: #34d399;
  --amber: #fbbf24; --rose: #fb7185; --tally: #ff3b5c; --tally-ink: #e11d48;
  --ov: 148 197 255; --aq: 46 230 214; --aq2: 127 243 234; --cy: 34 211 238; --bl: 59 130 246; --vi: 139 92 246;
  --mi: 52 211 153; --ro: 251 113 133; --am: 251 191 36; --ta: 255 59 92; --sh: 0 0 0; --shk: 1;
  --t-chip: #c4d2e6; --t-blue: #a9c8ff; --t-violet: #cdbcff; --t-amber: #fcd97e; --t-green: #8ef0c8; --t-red: #feb4c1;
  --t-cyan: #9cecfa; --t-aqua: #c6fbf6; --t-live: #ffd3dc; --t-gold: #f4d47c;
  --code-bg: rgba(2, 6, 16, .72); --code-text: #cfe7ff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -2px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 6px -1px rgba(0, 0, 0, .45), 0 16px 36px -16px rgba(0, 0, 0, .7);
  --shadow-pop: 0 4px 12px -2px rgba(0, 0, 0, .5), 0 30px 70px -20px rgba(0, 0, 0, .8);
}
:root:not([data-theme="dark"]) .kpis:has(.kpi.glass) {
  color-scheme: dark;
  --bg: #071226; --surface: #0a172c; --surface-2: #0d1c36; --surface-3: #122543; --raised: #0e1d38; --well: #08142a;
  --topbar-bg: #071226; --side-bg: #061024; --media-bg: #0c1a33; --scrim: rgba(2, 6, 14, .62);
  --tip-bg: #0b1730; --tip-text: #eaf4ff; --hover: rgba(148, 210, 255, .06); --active: rgba(46, 230, 214, .1); --nav-on: rgba(148, 197, 255, .1);
  --text: #ffffff; --text-2: #dae4f2; --text-3: #b8c6da; --text-hi: #ffffff; --text-soft: #eef3fa;
  --border: #182a47; --border-2: #213658; --border-3: #2f4772;
  --accent: #22d6c8; --accent-hover: #52e4d8; --accent-2: #52e4d8; --on-accent: #03141a;
  --accent-text: #7ff3ea; --accent-text-hover: #c6fbf6; --focus-ring: #7ff3ea; --focus: rgba(46, 230, 214, .2);
  --brand-ink: #2ee6d6; --on-brand: #04201e; --bar: #2ee6d6; --switch-on: #2ee6d6; --tab-on: #2ee6d6; --knob: #eef5ff;
  --brand: linear-gradient(100deg, #2ee6d6 0%, #22d3ee 32%, #3b82f6 70%, #8b5cf6 100%);
  --aqua: #2ee6d6; --aqua-2: #7ff3ea; --cyan: #22d3ee; --blue: #3b82f6; --violet: #8b5cf6; --mint: #34d399;
  --amber: #fbbf24; --rose: #fb7185; --tally: #ff3b5c; --tally-ink: #e11d48;
  --ov: 148 197 255; --aq: 46 230 214; --aq2: 127 243 234; --cy: 34 211 238; --bl: 59 130 246; --vi: 139 92 246;
  --mi: 52 211 153; --ro: 251 113 133; --am: 251 191 36; --ta: 255 59 92; --sh: 0 0 0; --shk: 1;
  --t-chip: #c4d2e6; --t-blue: #a9c8ff; --t-violet: #cdbcff; --t-amber: #fcd97e; --t-green: #8ef0c8; --t-red: #feb4c1;
  --t-cyan: #9cecfa; --t-aqua: #c6fbf6; --t-live: #ffd3dc; --t-gold: #f4d47c;
  --code-bg: rgba(2, 6, 16, .72); --code-text: #cfe7ff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -2px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 6px -1px rgba(0, 0, 0, .45), 0 16px 36px -16px rgba(0, 0, 0, .7);
  --shadow-pop: 0 4px 12px -2px rgba(0, 0, 0, .5), 0 30px 70px -20px rgba(0, 0, 0, .8);
}
:root[data-theme="dark"] .kpis:has(.kpi.glass) {
  color-scheme: light;
  /* ground, surfaces and what sits on video */
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f6fa; --surface-3: #e9eef5; --raised: #ffffff; --well: #ffffff;
  --topbar-bg: #ffffff; --side-bg: #071226; --media-bg: #dfe5ee; --scrim: rgba(7, 18, 38, .45);
  --tip-bg: #0b1426; --tip-text: #f3f7fc; --hover: #eef2f7; --active: rgba(13, 148, 136, .08); --nav-on: rgba(148, 197, 255, .1);
  /* text */
  --text: #071226; --text-2: #1f2d44; --text-3: #3a4760; --text-hi: #071226; --text-soft: #13203a;
  /* hairlines */
  --border: #e2e8f0; --border-2: #d6dee8; --border-3: #bfcad8;
  /* actions and brand */
  --accent: #22d6c8; --accent-hover: #52e4d8; --accent-2: #52e4d8; --on-accent: #03141a;
  --accent-text: #0b6e86; --accent-text-hover: #074f61; --focus-ring: #0891b2; --focus: rgba(8, 145, 178, .22);
  --brand-ink: #0d9488; --on-brand: #ffffff; --bar: #14b8a6; --switch-on: #0d9488; --tab-on: #071226; --knob: #ffffff;
  --brand: linear-gradient(100deg, #0e7490 0%, #0891b2 30%, #2563eb 68%, #7c3aed 100%);
  --aqua: #0d9488; --aqua-2: #14b8a6; --cyan: #0891b2; --blue: #2563eb; --violet: #7c3aed; --mint: #059669;
  --amber: #d97706; --rose: #e11d48; --tally: #e11d48; --tally-ink: #e11d48;
  /* colour channels for tints and borders: rgb(var(--aq) / .1) */
  --ov: 15 40 80; --aq: 13 148 136; --aq2: 13 148 136; --cy: 8 145 178; --bl: 37 99 235; --vi: 124 58 237;
  --mi: 5 150 105; --ro: 225 29 72; --am: 217 119 6; --ta: 225 29 72; --sh: 16 24 40; --shk: .22;
  /* state words */
  --t-chip: #4a5a71; --t-blue: #1d4ed8; --t-violet: #6d28d9; --t-amber: #b45309; --t-green: #047857; --t-red: #be123c;
  --t-cyan: #0e7490; --t-aqua: #0f766e; --t-live: #be123c; --t-gold: #a16207;
  --code-bg: #f3f6fa; --code-text: #0b1426;
  /* depth */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lift: 0 1px 3px rgba(16, 24, 40, .05), 0 12px 28px -10px rgba(16, 24, 40, .16);
  --shadow-pop: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 52px -14px rgba(16, 24, 40, .26);
}
/* names the stylesheet used before 13.8, and every token built from others: declared wherever the tokens above are, so
   a navy island (the sidebar, a card) works them out from its own values */
:root, :root[data-theme="dark"],
.sidebar, .tabbar, .on-dark, .hv, .lp-screen, .rv-card .media, .ccard .media, .poster, .monitor .screen, .rc-media,
.queue .q, .review .stage-video, .phone-prev, .lf-thumb, .watch-stage, .mk-phone, .mk-caps,
.card.glass, .glass.card, .feat, .lp-plan, .lp-pain, .lp-final, .lp-tablewrap, .lp-specs-cta, .tiles, .ob-line,
.monitor, .post-list, .auth-card, .kpis:has(.kpi.glass) {
  --ink: var(--bg); --ocean: var(--bg); --deck: var(--surface); --deck-2: var(--surface); --deck-3: var(--surface-2);
  --glass: var(--surface); --glass-2: var(--raised); --glass-3: var(--surface-2); --panel: var(--surface); --panel-solid: var(--surface);
  --rule: var(--border); --rule-2: var(--border-2); --rule-3: var(--border-3); --line: var(--border); --line-2: var(--border-2);
  --green: var(--mint); --red: var(--rose); --liquid: var(--accent); --signal: var(--brand); --grad: var(--brand); --grad-btn: var(--accent);
  --signal-soft: linear-gradient(100deg, rgb(var(--aq) / .12), rgb(var(--bl) / .12) 55%, rgb(var(--vi) / .12));
  --rainbow: var(--brand);
  --glow: 0 0 0 3px var(--focus);
  --blur: none;
  --ok: var(--mint);
}
/* every card and navy island sets its own text colour, so text that only inherits it reads on the card's own ground */
.card.glass, .glass.card, .feat, .lp-plan, .lp-pain, .lp-final, .lp-tablewrap, .lp-specs-cta, .tiles, .ob-line, .monitor, .post-list,
.auth-card { color: var(--text); }
.kpis:has(.kpi.glass) { color: var(--text); }
:root {
  --gold: linear-gradient(140deg, #fff3c4, #d9a441 28%, #8a6420 48%, #f4d47c 66%, #b07a26 86%, #ffe9a8);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --brandface: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: var(--brandface);
  --r-xl: 16px; --r-lg: 12px; --r: 10px; --r-sm: 8px; --r-xs: 6px;
  --spring: cubic-bezier(.2, .8, .2, 1); --ease: var(--spring);
  --t-fast: 120ms; --t: 180ms; --t-slow: 240ms;
  --side-w: 240px; --rail-w: 72px;
  /* type scale: 12, 13, 14, 16, 20, 28, 36, 48 */
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--text); background: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs); line-height: 1.45; letter-spacing: -0.006em; overflow: hidden; font-feature-settings: 'cv01', 'ss03'; font-optical-sizing: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--accent-text); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-text-hover); }
::selection { background: rgb(var(--aq) / .22); color: var(--text-hi); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } }

/* ---------- the ground: one solid colour ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; background: var(--bg); overflow: hidden; }
.backdrop::before, .backdrop::after { content: none; }
#app { position: relative; z-index: 1; height: 100%; }

/* ---------- panels: a solid surface, a hairline and a soft shadow (the class keeps its old name) ---------- */
.glass { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.glass::before, .glass::after { content: none; }
.glass .glass { background: var(--surface-2); box-shadow: none; }
/* panels people can click: a firmer edge and a little lift */
.lift { transition: transform var(--t) var(--spring), box-shadow var(--t) var(--spring), border-color var(--t); cursor: pointer; }
.lift:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: var(--border-3); }
.lift:active { transform: none; }
.grad-text { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.row { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 24px; height: 24px; }
code { font-size: .92em; padding: 1px 5px; border-radius: 5px; background: rgb(var(--ov) / .1); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 16px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--brandface); font-weight: 660; font-size: 20px; letter-spacing: -0.025em; color: var(--text-hi); white-space: nowrap; }
.wordmark { color: var(--text-hi); }
.wordmark .clip { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-link { display: inline-flex; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; border-radius: 10px; }
.logo { width: 30px; height: 30px; flex: none; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; font-weight: 560; font-size: var(--fs-sm); white-space: nowrap; color: var(--text);
  box-shadow: var(--shadow-xs); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); text-decoration: none; }
.btn:hover { border-color: var(--border-3); background: var(--surface-2); color: var(--text-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .icon { width: 15px; height: 15px; }
/* one main-button colour on every page, card and theme (13.9, the owner's decision: EC-126) */
.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 650; box-shadow: inset 0 0 0 1px rgba(3, 20, 26, .07); }
.btn.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--on-accent); }
.btn.primary .icon { stroke-width: 2.1; }
.btn.outline { background: transparent; border-color: rgb(var(--aq) / .55); color: var(--accent-text); box-shadow: none; }
.btn.outline:hover { background: rgb(var(--aq) / .08); color: var(--accent-text); }
.btn.danger { border-color: rgb(var(--ro) / .35); background: rgb(var(--ro) / .07); color: var(--t-red); box-shadow: none; }
.btn.danger:hover { background: rgb(var(--ro) / .13); border-color: rgb(var(--ro) / .55); color: var(--t-red); }
.btn.success { border-color: rgb(var(--mi) / .35); background: rgb(var(--mi) / .09); color: var(--t-green); box-shadow: none; }
.btn.success:hover { background: rgb(var(--mi) / .15); color: var(--t-green); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn.ghost:hover { background: var(--hover); color: var(--text); border-color: transparent; }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; }
.btn.lg { height: 42px; padding: 0 18px; font-size: var(--fs); border-radius: 9px; }
.btn.xl { height: 48px; padding: 0 22px; font-size: var(--fs-md); border-radius: 10px; }
.btn.block { width: 100%; }
.icon-btn { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; display: grid;
  place-items: center; cursor: pointer; color: var(--text-2); position: relative; flex: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.icon-btn:hover { background: var(--hover); color: var(--text); border-color: var(--rule); }
.link { color: var(--accent-text); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); display: inline-flex; gap: 4px; align-items: center; background: none; border: 0; padding: 0; transition: color var(--t-fast), gap var(--t) var(--spring); }
.link:hover { color: var(--accent-text-hover); gap: 7px; }
.link .icon { width: 14px; height: 14px; }

/* ---------- tags and status dots ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 550;
  color: var(--t-chip); white-space: nowrap; line-height: 1; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; opacity: .5; }
.chip:has(> .icon)::before, .chip:has(> .dot)::before { display: none; }
.chip .icon { width: 12px; height: 12px; }
.chip.blue { color: var(--t-blue); } .chip.violet { color: var(--t-violet); } .chip.amber { color: var(--t-amber); }
.chip.green { color: var(--t-green); } .chip.red { color: var(--t-red); } .chip.cyan { color: var(--t-cyan); }
.chip:is(.blue, .violet, .amber, .green, .red, .cyan)::before { opacity: 1; }
.chip.live { background: var(--tally-ink); border: 1px solid rgb(var(--ro) / .5); color: #fff; font-size: 10.5px; font-weight: 750; letter-spacing: .07em; padding: 0 6px; height: 19px; border-radius: 5px; gap: 5px;
  box-shadow: 0 0 0 0 rgb(var(--ta) / .55); animation: tallyGlow 2s var(--spring) infinite; }
.chip.live::before { width: 5px; height: 5px; background: #fff; opacity: 1; animation: tally 1.6s infinite; }
:is(.rv-top, .ccard .top, .poster .top, .monitor .tally, .rc-media) .chip:not(.live) { height: 21px; padding: 0 7px; border-radius: 6px; background: rgba(4, 10, 24, .74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes tallyGlow { 0% { box-shadow: 0 0 0 0 rgb(var(--ta) / .5); } 70% { box-shadow: 0 0 0 7px rgb(var(--ta) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--ta) / 0); } }
.pill-rec { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 9px; border-radius: 8px;
  background: rgb(var(--ta) / .08); border: 1px solid rgb(var(--ta) / .3); font-weight: 600; font-size: 12px; color: var(--t-live); }
.pill-rec .t { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 650; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; display: inline-block; }
.dot.live { background: var(--tally); box-shadow: 0 0 0 3px rgb(var(--ta) / .18); animation: tally 1.6s infinite; }
.dot.ok { background: var(--mint); box-shadow: 0 0 0 3px rgb(var(--mi) / .14); }
.dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgb(var(--am) / .14); }
.dot.bad { background: var(--rose); box-shadow: 0 0 0 3px rgb(var(--ro) / .14); }
@keyframes tally { 50% { opacity: .4; } }
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: 12.5px; color: var(--text-2); font-weight: 560; }
.input, select.input, textarea.input { height: 36px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid var(--rule-2);
  background: var(--well); outline: none; transition: border-color var(--t-fast), box-shadow var(--t) var(--spring), background var(--t-fast); width: 100%; font-size: var(--fs);
  box-shadow: var(--shadow-xs); }
.input::placeholder { color: var(--text-3); }
select.input { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8bad3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
select.input option { background: var(--deck-2); color: var(--text); }
textarea.input { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
.input:hover { border-color: var(--rule-3); }
.input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus); background-color: var(--well); }   /* a colour only: the shorthand took a dropdown's arrow away (13.14.5) */
.input:disabled { opacity: .6; }
.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; width: 16px; height: 16px; transition: color var(--t-fast); }
.input-icon:focus-within > .icon { color: var(--accent-text); }
.input-icon > .input { padding-left: 40px; height: 44px; font-size: var(--fs); border-radius: 12px; }
.input-icon > .trail { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); user-select: none; }
.check input { appearance: none; width: 17px; height: 17px; border-radius: 5px; border: 1px solid var(--rule-3); background: var(--well);
  display: grid; place-items: center; cursor: pointer; flex: none; margin: 0; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t); }
.check input[type=radio] { border-radius: 50%; }
.check input:checked { background: var(--aqua); border-color: var(--aqua); box-shadow: none; }
.check input:checked::after { content: ''; width: 8px; height: 4px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg) translate(1px, -1px); }
.switch { position: relative; width: 36px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 10px; background: rgb(var(--ov) / .16); cursor: pointer; transition: background var(--t), box-shadow var(--t); box-shadow: inset 0 1px 2px rgb(var(--sh) / calc(.35 * var(--shk))); }
.switch span::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; left: 2px; top: 2px; background: var(--knob); transition: transform var(--t) var(--spring), background var(--t); box-shadow: 0 1px 2px rgb(var(--sh) / calc(.45 * var(--shk))), 0 0 0 .5px rgb(var(--sh) / .06); }
.switch input:checked + span { background: var(--switch-on); box-shadow: none; }
.switch input:checked + span::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; height: 28px; padding: 0 11px; border-radius: 8px; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t); }
.seg button:hover { color: var(--text); background: var(--hover); }
.seg button.on { background: var(--surface); color: var(--text-hi); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border-2); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua), var(--cyan)) 0 / var(--fill, 0%) 100% no-repeat, rgb(var(--ov) / .18); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; margin-top: -6px;
  box-shadow: 0 1px 3px rgb(var(--sh) / calc(.5 * var(--shk))), 0 0 0 0 rgb(var(--aq) / .3); transition: box-shadow var(--t); }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 3px rgb(var(--sh) / calc(.5 * var(--shk))), 0 0 0 5px rgb(var(--aq) / .25); }
input[type=range]:focus-visible { outline: none; }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(var(--ov) / .18); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--aqua); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }

/* ---------- skeletons: shimmering placeholders while data loads ---------- */
.skel { display: block; border-radius: 8px; background: linear-gradient(100deg, rgb(var(--ov) / .06) 30%, rgb(var(--ov) / .14) 50%, rgb(var(--ov) / .06) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel.s-line { height: 12px; width: 100%; margin: 7px 0; }
.skel.s-line.short { width: 58%; }
.skel.s-big { height: 30px; width: 46%; margin: 12px 0 8px; border-radius: 9px; }
.skel.s-chip { height: 22px; width: 38%; border-radius: 7px; }
.skel.s-thumb { width: 64px; height: 40px; flex: none; border-radius: 8px; }
.skel.s-poster { aspect-ratio: 9 / 16; width: 100%; border-radius: 14px; }
.skel-lines { padding: 4px 0; }
.skel-tile { padding: 16px; min-height: 140px; }
.skel-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 176px); gap: 14px; overflow: hidden; }
.skel-item { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.thinking { display: flex; align-items: center; gap: 5px; color: var(--text-3); font-size: var(--fs-sm); margin-top: 6px; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); animation: think 1.2s var(--spring) infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
.thinking span { margin-left: 6px; }
@keyframes think { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* staggered entrances */
.rise { animation: rise .52s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ======================================================================= HERO VISUAL (landing and sign-in)
   A nine-second loop: a live stream with chat and audio, a spike, the moment pinned, light travelling to a phone,
   and the short playing with word-by-word captions. Pure CSS; it rests on its finished frame with reduced motion. */
.hv { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1.22; margin: 0 auto; --hv: 9s; }
.hv-stream { position: absolute; left: 0; top: 4%; width: 80%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid rgba(148, 210, 255, .22);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1); transform: perspective(1400px) rotateY(8deg) rotateX(2deg); transform-origin: left center; }
.hv-stream > .chip.live { position: absolute; left: 12px; top: 12px; z-index: 2; }
.hv-tc { position: absolute; left: 62px; top: 12px; z-index: 2; height: 19px; line-height: 19px; padding: 0 6px; border-radius: 5px; background: rgba(0, 0, 0, .55); font: 650 11px/19px var(--font); font-variant-numeric: tabular-nums; color: #fff; }
.hv-chat { position: absolute; right: 10px; top: 12px; bottom: 44px; width: 30%; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; z-index: 2;
  -webkit-mask: linear-gradient(180deg, transparent, #000 35%); mask: linear-gradient(180deg, transparent, #000 35%); }
.hv-chat span { align-self: flex-start; font: 600 10.5px/1.2 var(--font); color: #e4f1ff; padding: 4px 7px; border-radius: 7px; background: rgba(4, 10, 24, .62); border: 1px solid rgba(148, 210, 255, .14);
  animation: hvChat var(--hv) var(--spring) infinite; opacity: 0; }
.hv-chat span:nth-child(1) { animation-delay: 0s; } .hv-chat span:nth-child(2) { animation-delay: .35s; color: #9ff3d2; } .hv-chat span:nth-child(3) { animation-delay: .7s; }
.hv-chat span:nth-child(4) { animation-delay: 1s; color: #9ff3d2; } .hv-chat span:nth-child(5) { animation-delay: 1.25s; } .hv-chat span:nth-child(6) { animation-delay: 1.5s; }
.hv-wave { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 30px; display: flex; align-items: flex-end; gap: 3px; z-index: 2; transform-origin: bottom; animation: hvSpike var(--hv) var(--spring) infinite; }
.hv-wave i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #7ff3ea, rgba(34, 211, 238, .35)); transform-origin: bottom; animation: hvBar 1.15s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -83ms); }
.hv-pin { position: absolute; left: 30%; top: 40%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; font: 650 12px/1 var(--font); color: var(--on-accent);
  background: var(--liquid); box-shadow: var(--glow); transform: translate(-50%, -50%) scale(.6); opacity: 0; animation: hvPin var(--hv) var(--spring) infinite; white-space: nowrap; }
.hv-pin .icon { stroke-width: 2.2; }
.hv-beam { position: absolute; left: 30%; top: 44%; width: 30%; height: 30%; pointer-events: none; }
.hv-beam i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #c6fbf6; box-shadow: 0 0 14px 4px rgba(46, 230, 214, .8); opacity: 0;
  animation: hvBeam var(--hv) var(--spring) infinite; }
.hv-beam i:nth-child(2) { animation-delay: .12s; width: 6px; height: 6px; } .hv-beam i:nth-child(3) { animation-delay: .24s; width: 4px; height: 4px; }
.hv-phone { position: absolute; right: 2%; bottom: 0; width: 34%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 3px solid rgba(10, 22, 44, .95);
  box-shadow: 0 0 0 1px rgba(148, 210, 255, .3), 0 40px 80px -24px rgba(0, 0, 0, .95), 0 0 50px -10px rgba(34, 211, 238, .35); animation: hvPhone var(--hv) var(--spring) infinite; transform-origin: 50% 80%; }
.hv-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-stream::after, .hv-phone::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 7, 15, .38), transparent 28%, transparent 62%, rgba(4, 7, 15, .6)); }
.hv-hook { position: absolute; left: 9%; right: 9%; top: 9%; z-index: 2; text-align: center; padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .94); color: #071226; font: 800 clamp(9px, 1.25vw, 13px)/1.15 var(--brandface); }
.hv-cap { position: absolute; left: 6%; right: 6%; top: 62%; z-index: 2; text-align: center; font: 900 clamp(13px, 1.9vw, 21px)/1.05 var(--brandface); letter-spacing: -.01em; color: #fff;
  text-shadow: 0 3px 0 #000, 0 0 2px #000; -webkit-text-stroke: 1px #000; }
.hv-cap span { display: inline-block; animation: hvWord var(--hv) linear infinite; }
.hv-cap span:nth-child(1) { animation-delay: 0s; } .hv-cap span:nth-child(2) { animation-delay: .32s; } .hv-cap span:nth-child(3) { animation-delay: .64s; }
.hv-cap span:nth-child(4) { animation-delay: .96s; } .hv-cap span:nth-child(5) { animation-delay: 1.28s; }
.hv-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .15); z-index: 2; }
.hv-bar i { display: block; height: 100%; width: 0; background: var(--liquid); animation: hvProg var(--hv) linear infinite; }
.hv-ready { position: absolute; left: 50%; bottom: 7%; z-index: 3; transform: translateX(-50%); display: inline-flex; gap: 5px; align-items: center; padding: 5px 9px; border-radius: 8px; white-space: nowrap;
  font: 650 11px/1 var(--font); color: #c7f9e4; background: rgba(4, 20, 18, .8); border: 1px solid rgba(52, 211, 153, .5); opacity: 0; animation: hvReady var(--hv) var(--spring) infinite; }
@keyframes hvBar { from { transform: scaleY(.18); } to { transform: scaleY(.62); } }
@keyframes hvSpike { 0%, 24% { transform: scaleY(1); filter: none; } 30% { transform: scaleY(1.9); } 40%, 100% { transform: scaleY(1); filter: none; } }
@keyframes hvChat { 0% { opacity: 0; transform: translateY(10px); } 4% { opacity: 1; transform: none; } 30% { opacity: 1; } 31% { opacity: 1; background: rgb(var(--aq) / .3); } 40% { background: rgba(4, 10, 24, .62); } 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hvPin { 0%, 29% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 33% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 36%, 47% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 52%, 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
@keyframes hvBeam { 0%, 42% { opacity: 0; transform: translate(0, 0); } 44% { opacity: 1; } 54% { opacity: 1; transform: translate(220%, 150%); } 58%, 100% { opacity: 0; transform: translate(260%, 170%); } }
@keyframes hvPhone { 0%, 50% { transform: scale(.94); filter: saturate(.6) brightness(.7); } 56% { transform: scale(1.03); filter: none; } 60%, 96% { transform: scale(1); filter: none; } 100% { transform: scale(.94); filter: saturate(.6) brightness(.7); } }
@keyframes hvWord { 0%, 59% { color: #fff; transform: none; } 61% { color: #2ee6d6; transform: scale(1.14) translateY(-1px); } 65%, 100% { color: #fff; transform: none; } }
@keyframes hvProg { 0%, 56% { width: 0; } 96% { width: 100%; } 100% { width: 100%; } }
@keyframes hvReady { 0%, 84% { opacity: 0; transform: translate(-50%, 6px); } 88%, 96% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hv-pin { opacity: 1; transform: translate(-50%, -50%); } .hv-ready { opacity: 1; transform: translateX(-50%); } .hv-chat span { opacity: 1; } .hv-bar i { width: 70%; }
  .hv-phone { transform: none; filter: none; } .hv-beam { display: none; }
}

/* ======================================================================= LANDING (signed-out home) */
.landing { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgb(var(--ov) / .22) transparent; }
.lp-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 14px max(20px, calc((100% - 1200px) / 2)); border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), backdrop-filter var(--t); }
.landing.scrolled .lp-nav { background: color-mix(in srgb, var(--bg) 86%, transparent); border-bottom-color: var(--rule); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.lp-nav .spacer { flex: 1; }
.lp-links { display: flex; gap: 2px; margin-left: 24px; }
.lp-links button { background: none; border: 0; color: var(--text-2); font-weight: 550; font-size: var(--fs); padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.lp-links button:hover { color: var(--text-hi); background: var(--hover); }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 48px 20px 64px; min-height: min(760px, calc(100vh - 70px)); }
.kicker { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 9px; font-size: var(--fs-sm); font-weight: 650; color: var(--accent-text);
  background: rgb(var(--aq) / .09); border: 1px solid rgb(var(--aq) / .26); box-shadow: none; }
.kicker .icon { width: 14px; height: 14px; }
.lp-copy h1 { font-family: var(--brandface); font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 640; margin: 0 0 20px; text-wrap: balance; }
.lp-lead { font-size: 18px; line-height: 1.6; color: var(--text-soft); max-width: 560px; margin: 0; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.lp-fine { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; color: var(--text-2); font-size: var(--fs-sm); }
.lp-fine .icon { width: 14px; height: 14px; color: var(--mint); stroke-width: 2.2; }
.lp-fine .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.lp-fine .lp-trust { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lp-visual { position: relative; }
.lp-visual::before { content: none; }
.lp-sec { max-width: 1200px; margin: 0 auto; padding: 72px 20px; scroll-margin-top: 64px; }
.lp-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.eyebrow { color: var(--accent-text); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.lp-head h2, .lp-final h2 { font-family: var(--brandface); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 620; margin: 10px 0 0; text-wrap: balance; }
.lp-head p { color: var(--text-2); font-size: var(--fs-md); margin: 12px 0 0; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.lp-steps li { padding: 22px 6px 0 0; border-top: 1px solid var(--rule-2); position: relative; }
.lp-steps li::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--liquid); box-shadow: none; }
.step-n { display: block; font: 600 13px/1 var(--font); color: var(--accent-text); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lp-steps h3 { margin-top: 14px; }
.step-ic, .feat-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-text);
  background: linear-gradient(140deg, rgb(var(--aq) / .22), rgb(var(--bl) / .18) 60%, rgb(var(--vi) / .2)); border: 1px solid rgb(var(--aq2) / .28); box-shadow: none; }
.lp-steps h3, .feat h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 680; letter-spacing: -0.015em; }
.lp-steps p, .feat p { margin: 0; color: var(--text-2); line-height: 1.6; font-size: var(--fs); }
.lp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feat { padding: 24px; overflow: hidden; cursor: default; min-height: 210px; }
.feat.wide { grid-column: span 2; }
.feat.full { grid-column: 1 / -1; min-height: 240px; padding-right: 46%; }
.feat-wave { position: absolute; left: 24px; right: 24px; bottom: 22px; height: 54px; display: flex; align-items: flex-end; gap: 4px; opacity: .9; }
.feat.wide p { max-width: 520px; }
.feat.wide { padding-bottom: 96px; }
.feat-wave i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, rgb(var(--aq2) / .9), rgb(var(--bl) / .2)); height: 100%; transform-origin: bottom; animation: hvBar 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -97ms); }
.feat-wave i:nth-child(17), .feat-wave i:nth-child(18), .feat-wave i:nth-child(19) { background: linear-gradient(180deg, #fbbf24, rgb(var(--ro) / .3)); }
.feat-orbit { position: absolute; right: 8%; top: 50%; width: 220px; height: 220px; margin-top: -110px; }
.feat-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgb(var(--aq2) / .35); animation: spin 18s linear infinite; }
.feat-orbit i:nth-child(2) { inset: 26px; border-color: rgb(var(--vi) / .45); animation-duration: 12s; animation-direction: reverse; }
.feat-orbit i:nth-child(3) { inset: 58px; border-style: solid; border-color: rgb(var(--bl) / .4); animation-duration: 9s; }
.feat-orbit i::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #7ff3ea; box-shadow: none; }
.feat-orbit i:nth-child(2)::after { background: #c4b5fd; box-shadow: none; }
.feat-orbit b { position: absolute; inset: 92px; border-radius: 50%; background: radial-gradient(circle, #fff, #7ff3ea 40%, rgb(var(--cy) / 0) 72%); animation: breathe 3s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.18); opacity: .8; } }
.lp-bill { margin-top: 22px; }
.lp-bill button { height: 32px; padding: 0 14px; font-size: var(--fs-sm); }
.lp-bill .save { font-size: 11px; font-weight: 700; color: var(--t-green); padding: 2px 6px; border-radius: 5px; background: rgb(var(--mi) / .13); }
.lp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; max-width: 900px; margin: 0 auto; }
/* the three plans (12.9.0): side by side, with the extra-hours card across under them */
.lp-plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; }
.lp-plans.three .lp-extra { grid-column: 1 / -1; min-height: 0; }
.lp-extra .lp-packs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.lp-yearly { display: block; margin: 10px auto 0; font-size: 12.5px; text-align: center; color: var(--text-2); }
.bp-plans-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bp-extra { margin-top: 14px; min-height: 0; }
.bp-yearly { display: block; margin: 10px auto 0; font-size: 12.5px; text-align: center; }
.lp-plan { padding: 24px 20px 20px; display: flex; flex-direction: column; min-height: 420px; }
.lp-plan.rec { border-color: var(--brand-ink); background: var(--surface); box-shadow: 0 0 0 1px var(--brand-ink), var(--shadow-lift); }
.lp-flag { position: absolute; top: 14px; right: 14px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; font-size: 11px; font-weight: 750; letter-spacing: .03em;
  color: var(--on-accent); background: var(--liquid); }
.lp-plan h3 { margin: 0; font-family: var(--brandface); font-size: 22px; font-weight: 620; letter-spacing: -0.02em; }
.lp-pline { margin: 6px 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; min-height: 40px; }
.lp-price { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; }
.lp-price .amt { font-family: var(--brandface); font-size: 42px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-price .per { color: var(--text-2); font-weight: 600; }
.lp-psub { color: var(--text-3); font-size: 12.5px; margin-top: 6px; }
.lp-phours { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: rgb(var(--ov) / .05); border: 1px solid var(--rule); font-size: 12.5px; }
.lp-phours b { display: block; font-size: 11.5px; color: var(--text-2); font-weight: 650; margin-bottom: 4px; }
.lp-phours div { display: flex; justify-content: space-between; padding: 2px 0; color: var(--text); }
.lp-pfeats { list-style: none; margin: 16px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.lp-pfeats li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-soft); }
.lp-pfeats .icon { width: 15px; height: 15px; color: var(--mint); margin-top: 1px; stroke-width: 2.2; }
.lp-plan .skel.s-big { width: 60%; height: 40px; }
.lp-note { text-align: center; color: var(--text-3); font-size: 12.5px; margin: 22px auto 0; max-width: 640px; line-height: 1.55; }
/* credit packs: tiles on the home page, buttons on Plan & usage */
.lp-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.lp-pack, .bp-pack { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; text-align: left; min-width: 0;
  background: rgb(var(--ov) / .05); border: 1px solid var(--rule); }
.lp-pack b, .bp-pack b { font-family: var(--brandface); font-size: 20px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.lp-pack span, .bp-pack span { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lp-pack i, .bp-pack i { position: absolute; top: 9px; right: 10px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--t-green); padding: 1px 6px; border-radius: 5px; background: rgb(var(--mi) / .13); }
.lp-tline { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-3); text-align: center; }
.lp-pnote { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
/* the gallery under the hero: phone-shaped shorts in a row (a swipeable strip on smaller screens), then the YouTube video */
.lp-show { padding-top: 16px; }
.lp-reel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.lp-phone { margin: 0; min-width: 0; }
.lp-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #050b16; border: 1px solid var(--rule-2);
  box-shadow: 0 24px 60px -28px rgb(var(--sh) / calc(.9 * var(--shk))); }
.lp-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-sound { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(5, 11, 22, .62); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--t), border-color var(--t); }
.lp-sound:hover, .lp-sound.on { background: rgba(46, 230, 214, .28); border-color: rgba(127, 243, 234, .6); }
.lp-sound:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lp-phone figcaption { padding: 10px 4px 0; display: flex; flex-direction: column; gap: 2px; }
.lp-phone figcaption b { font-size: 13.5px; line-height: 1.35; color: var(--text); font-weight: 650; }
.lp-phone figcaption span { font-size: 12px; color: var(--text-3); }
.lp-yt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 40px; }
.lp-yt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #050b16; border: 1px solid var(--rule-2);
  box-shadow: 0 24px 60px -28px rgb(var(--sh) / calc(.9 * var(--shk))); }
.lp-yt-frame iframe, .lp-yt-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-yt-btn { padding: 0; cursor: pointer; background: none; display: block; }
.lp-yt-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(5, 11, 22, .7); border: 1px solid rgba(255, 255, 255, .2); transition: transform var(--t) var(--spring), background var(--t); }
.lp-yt-play .icon { width: 28px; height: 28px; }
.lp-yt-btn:hover .lp-yt-play { transform: translate(-50%, -50%) scale(1.06); background: rgb(var(--aq) / .35); }
.lp-yt-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }
.lp-yt-copy h3 { margin: 6px 0 8px; font-size: 22px; line-height: 1.25; }
.lp-yt-copy p { margin: 0 0 16px; color: var(--text-2); line-height: 1.55; }
@media (max-width: 1023px) {
  .lp-reel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 42%); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px; scrollbar-width: none; }
  .lp-reel::-webkit-scrollbar { display: none; }
  .lp-phone { scroll-snap-align: start; }
  .lp-yt { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 767px) { .lp-reel { grid-auto-columns: 70%; gap: 12px; } .lp-show { padding-top: 8px; } }
.lp-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; border-top: 1px solid var(--rule-2); }
.lp-faq details { padding: 0; border-bottom: 1px solid var(--rule-2); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 2px; font-weight: 590; font-size: 15px; position: relative; z-index: 1; transition: color var(--t-fast); }
.lp-faq summary:hover { color: var(--text-hi); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary .icon { color: var(--text-3); transition: transform var(--t) var(--spring); }
.lp-faq details[open] summary .icon { transform: rotate(180deg); color: var(--accent-text); }
.lp-faq details p { margin: 0; padding: 0 2px 18px; color: var(--text-2); line-height: 1.65; position: relative; z-index: 1; }
.lp-final { max-width: 1160px; margin: 24px auto 0; padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 22px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-2); box-shadow: var(--shadow); }
.lp-final h2 { margin: 0; text-align: left; }
.lp-final p { margin: 8px 0 0; color: var(--text-2); font-size: var(--fs-md); }
.lp-foot { max-width: 1200px; margin: 0 auto; padding: 48px 20px 40px; display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: center; color: var(--text-3); font-size: var(--fs-sm); }
.lp-foot-brand p { margin: 8px 0 0; }
.lp-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.lp-foot nav a { color: var(--text-2); }
.lp-foot nav a:hover { color: var(--text-hi); }
.lp-foot small { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--rule); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--spring), transform .6s var(--spring); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }
.reveal.lift.in:hover { transform: translateY(-3px); transition-delay: 0s; }

/* ======================================================================= LANDING FUNNEL
   Under the hero the page walks a visitor down: hard numbers, the problem, how it works, the features shown as small
   mock-ups, everything the membership includes (the spec table), doing it yourself against EasyClippers, then pricing,
   questions and the last call, with a next step at the end of each. Mock-ups are pure CSS: no real people, names or
   logos. All motion stops for reduced motion. */
.lp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp-next { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.lp-next .btn.ghost { color: var(--accent-text); }
.lp-next .btn.ghost .icon { transition: transform var(--t) var(--spring); }
.lp-next .btn.ghost:hover .icon { transform: translateY(2px); }

/* the proof strip: hard numbers between hairlines, right under the hero */
.lp-proof { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.lp-proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.lp-proof li { padding: 22px 18px 20px; min-width: 0; }
.lp-proof li + li { border-left: 1px solid var(--rule); }
.lp-proof b { display: block; font-family: var(--brandface); font-size: 36px; font-weight: 640; letter-spacing: -0.04em; line-height: 1; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.lp-proof li:first-child b { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-proof span { display: block; margin-top: 9px; font-size: 13px; line-height: 1.4; color: var(--text-2); }

/* the problem: what posting clips by hand costs, in rose, then the turn */
.lp-pains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-pain { padding: 24px 22px 26px; border-radius: var(--r-lg); border: 1px solid rgb(var(--ro) / .18); box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgb(var(--ro) / .1), transparent 62%), var(--surface); }
.pain-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--t-red); background: rgb(var(--ro) / .08); border: 1px solid rgb(var(--ro) / .22); }
.lp-pain h3 { margin: 16px 0 8px; font-size: 17px; font-weight: 660; letter-spacing: -0.015em; }
.lp-pain p { margin: 0; color: var(--text-2); line-height: 1.6; }
.lp-turn { margin: 34px auto 0; max-width: 760px; text-align: center; font-family: var(--brandface); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.lp-turn + .lp-next { margin-top: 18px; }

/* feature mock-ups: small, pure CSS pictures of what EasyClippers makes */
.feat .mk { margin-top: 22px; position: relative; z-index: 1; }
.feat.wide:has(.feat-pins) { padding-bottom: 132px; }
.feat-pins { position: absolute; left: 24px; right: 24px; bottom: 84px; height: 24px; }
.feat-pins span { position: absolute; left: var(--x); bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; white-space: nowrap;
  font-size: 11px; font-weight: 650; color: var(--on-accent); background: var(--liquid); box-shadow: none; animation: mkPin 4.8s var(--spring) infinite; animation-delay: calc(var(--i) * 1.2s); }
.feat-pins span::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: rgb(var(--aq2) / .7); }
.feat-pins .icon { width: 12px; height: 12px; stroke-width: 2.3; }
@keyframes mkPin { 0%, 6% { opacity: 0; transform: translate(-50%, 6px); } 12%, 70% { opacity: 1; transform: translate(-50%, 0); } 80%, 100% { opacity: 0; transform: translate(-50%, -4px); } }
/* a reaction stack: the main person on top, two reactors below, the frame cutting to whoever reacts */
.mk-stack { display: flex; gap: 18px; align-items: center; }
.mk-phone { position: relative; flex: none; width: 104px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: 1.2fr 1fr; grid-template-columns: 1fr 1fr; gap: 2px;
  background: #050b18; border: 2px solid rgba(10, 22, 44, .95); box-shadow: 0 0 0 1px rgba(148, 210, 255, .28), 0 18px 40px -18px rgba(0, 0, 0, .95); }
.mk-p { position: relative; --sk: #8fa9cf; --bg: #18304f;
  background: radial-gradient(circle at 50% 40%, var(--sk) 0 15%, transparent 16%), radial-gradient(ellipse 36% 30% at 50% 100%, var(--sk) 0 97%, transparent 100%), linear-gradient(160deg, var(--bg), #0a1628); }
.mk-p:first-child { grid-column: 1 / -1; --sk: #9fd8e6; --bg: #1a3b52; background-size: 100% 100%; }
.mk-p:nth-child(2) { --sk: #c5b4f4; --bg: #2a2452; }
.mk-p:nth-child(3) { --sk: #f3c6a0; --bg: #3a2a28; }
.mk-p::after { content: ''; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color .2s; animation: mkTalk 4.5s steps(1) infinite; }
.mk-p:nth-child(2)::after { animation-delay: -3s; } .mk-p:nth-child(3)::after { animation-delay: -1.5s; }
@keyframes mkTalk { 0% { border-color: rgb(var(--aq2) / .95); box-shadow: none; } 33.3%, 100% { border-color: transparent; box-shadow: none; } }
.mk-cap1 { position: absolute; left: 6px; right: 6px; top: 54.5%; z-index: 2; transform: translateY(-50%); text-align: center; font: 900 9.5px/1.05 var(--brandface); text-transform: uppercase; color: #fff; -webkit-text-stroke: .5px #000; text-shadow: 0 1.5px 0 #000; }
.mk-cap1 em { font-style: normal; color: #fde047; }
.mk-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.mk-notes li { display: flex; gap: 8px; align-items: center; }
.mk-notes .icon { width: 14px; height: 14px; color: var(--accent-text); }
/* word-by-word captions: one word lights up at a time, like the burned-in ones */
.mk-caps { padding: 16px 12px 14px; border-radius: 12px; text-align: center; background: linear-gradient(160deg, #1b2f4d, #0b1629 70%); border: 1px solid var(--rule); }
.mk-cap { font: 900 23px/1.1 var(--brandface); text-transform: uppercase; letter-spacing: -0.01em; color: #fff; -webkit-text-stroke: 1px #000; text-shadow: 0 3px 0 #000; }
.mk-cap span { display: inline-block; margin: 0 .06em; animation: mkWord 3.6s linear infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes mkWord { 0% { color: #fde047; transform: scale(1.07) translateY(-1px); } 11% { color: #fde047; transform: scale(1.07) translateY(-1px); } 12.5%, 100% { color: #fff; transform: none; } }
.mk-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.mk-tags i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-2); padding: 3px 8px; border-radius: 6px; background: rgb(var(--ov) / .07); border: 1px solid var(--rule); }
/* the review queue: a short waiting for a yes, with where it will go and when */
.mk-post { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 12px; background: rgba(148, 197, 255, .05); border: 1px solid var(--rule); }
.mk-thumb { aspect-ratio: 9 / 16; border-radius: 8px; background: radial-gradient(circle at 50% 38%, #9fd8e6 0 14%, transparent 15%), radial-gradient(ellipse 40% 26% at 50% 100%, #9fd8e6 0 97%, transparent 100%), linear-gradient(160deg, #1a3b52, #0a1628); position: relative; }
.mk-thumb::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--liquid); width: 64%; }
.mk-post b { display: block; font-size: 13px; font-weight: 640; color: var(--text-hi); }
.mk-post small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--t-green); }
.mk-dest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.mk-dest i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px 3px 6px; border-radius: 7px; color: var(--t-aqua); background: rgb(var(--aq) / .1); border: 1px solid rgb(var(--aq2) / .3); }
.mk-dest i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px rgb(var(--mi) / .8); }
.mk-acts { display: flex; gap: 6px; margin-top: 10px; }
.mk-acts span { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; font-size: 11.5px; font-weight: 650; border: 1px solid var(--rule-2); color: var(--text-2); }
.mk-acts span.go { color: var(--on-accent); background: var(--liquid); border-color: transparent; }
.mk-acts .icon { width: 12px; height: 12px; stroke-width: 2.3; }
/* a plain-language request and the editor at work */
.mk-ask { display: flex; flex-direction: column; gap: 8px; }
.mk-msg { align-self: flex-end; max-width: 92%; padding: 9px 12px; border-radius: 12px 12px 4px 12px; font-size: 12.5px; line-height: 1.4; color: var(--text); background: rgb(var(--bl) / .1); border: 1px solid rgb(var(--bl) / .25); }
.mk-reply { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px 12px 12px 4px; font-size: 12.5px; color: var(--text-2); background: rgb(var(--ov) / .06); border: 1px solid var(--rule); }
.mk-reply i { width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); animation: think 1.2s var(--spring) infinite; }
.mk-reply i:nth-child(2) { animation-delay: .15s; } .mk-reply i:nth-child(3) { animation-delay: .3s; margin-right: 2px; }
@media (prefers-reduced-motion: reduce) { .feat-pins span { animation: none; opacity: 1; } .mk-p::after { animation: none; } .mk-p:first-child::after { border-color: rgba(127, 243, 234, .95); } .mk-cap span { animation: none; } }

/* everything you get: the spec table. Tier columns stay in view under the nav while it scrolls; a row that is the same
   on every tier is one cell across the tier columns with a check. Phones get a stacked list instead. */
.lp-specs { max-width: 1100px; margin: 0 auto; }
.lp-legend { display: flex; justify-content: center; gap: 8px 22px; flex-wrap: wrap; margin: -14px 0 24px; font-size: 13px; color: var(--text-2); }
.lp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lp-legend .icon { width: 15px; height: 15px; color: var(--mint); stroke-width: 2.4; }
.lp-legend i { width: 18px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--aq) / .55), rgb(var(--vi) / .55)); }
.lp-tablewrap { position: relative; border: 1px solid var(--rule-2); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow); overflow: clip; }
.lp-tablewrap:not(.open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; background: linear-gradient(180deg, transparent, var(--surface)); }
.lp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; }
.lp-table [hidden] { display: none !important; }
.lp-table thead th { position: sticky; top: var(--lp-nav, 64px); z-index: 5; padding: 16px 14px 14px; text-align: center; vertical-align: bottom; font-weight: 400;
  background: var(--surface); border-bottom: 1px solid var(--rule-2); box-shadow: 0 8px 16px -14px rgb(var(--sh) / calc(.9 * var(--shk))); }
.lp-table thead th:first-child { text-align: left; width: 36%; }
.lp-table thead .lp-hl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tier-n { display: block; font-family: var(--brandface); font-size: 19px; font-weight: 660; letter-spacing: -0.02em; color: var(--text-hi); }
.tier-n.ultra { background-image: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tier-c { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lp-table .lp-cat th { padding: 26px 14px 10px; text-align: left; border-top: 1px solid var(--rule-2); }
.lp-table tbody:first-of-type .lp-cat th { border-top: 0; padding-top: 18px; }
.lp-cat .cat { display: flex; align-items: center; gap: 10px; }
.lp-cat .cat b { font-size: 15px; font-weight: 680; letter-spacing: -0.01em; color: var(--text-hi); }
.lp-cat .cat-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--accent-text);
  background: linear-gradient(140deg, rgb(var(--aq) / .2), rgb(var(--bl) / .16) 60%, rgb(var(--vi) / .18)); border: 1px solid rgb(var(--aq2) / .25); }
.lp-cat .cat-ic .icon { width: 16px; height: 16px; }
.lp-cat .cat-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--t-green); white-space: nowrap; }
.lp-cat .cat-all.diff { color: var(--accent-text); }
.lp-cat .cat-all .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.lp-table .lp-row > * { padding: 12px 14px; border-top: 1px solid var(--rule); vertical-align: middle; transition: background-color var(--t-fast); }
.lp-table .lp-row:nth-child(even) > * { background-color: rgb(var(--ov) / .022); }
.lp-table .lp-row:hover > * { background-color: rgb(var(--ov) / .05); }
.lp-table .lp-row th { text-align: left; font-weight: 560; color: var(--text); line-height: 1.4; }
.lp-table .lp-row th small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 450; color: var(--text-3); line-height: 1.45; }
.lp-table td.tv { text-align: center; color: var(--text-hi); font-weight: 560; line-height: 1.4; font-variant-numeric: tabular-nums; }
.lp-table td.tv small { display: block; font-size: 12px; font-weight: 450; color: var(--text-3); }
.lp-table td.all { text-align: center; color: var(--text); line-height: 1.45;
  background-image: linear-gradient(90deg, rgb(var(--aq) / .05), rgb(var(--bl) / .04) 50%, rgb(var(--vi) / .05)); }
.lp-table td.all .icon { width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; color: var(--mint); stroke-width: 2.4; }
.lp-more { display: flex; justify-content: center; margin-top: 18px; }
.lp-more .btn .icon { transition: transform var(--t) var(--spring); }
.lp-more .btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lp-specs-cta { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; padding: 22px 26px; border-radius: 18px;
  border: 1px solid var(--border-2); background: var(--surface); box-shadow: var(--shadow); }
.lp-specs-cta b { display: block; font-family: var(--brandface); font-size: 20px; font-weight: 640; letter-spacing: -0.02em; }
.lp-specs-cta p { margin: 4px 0 0; color: var(--text-2); }
.lp-specs-cta .row { gap: 10px; flex-wrap: wrap; }

/* doing it yourself against EasyClippers: honest, and no numbers */
.lp-vs { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; }
.lp-vs th, .lp-vs td { padding: 15px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); line-height: 1.5; }
.lp-vs thead th { border-top: 0; padding-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.lp-vs thead th:first-child { width: 22%; }
.lp-vs thead th.us { color: var(--accent-text); }
.lp-vs tbody th { font-weight: 640; color: var(--text-hi); }
.lp-vs td { color: var(--text-2); }
.lp-vs td.us { color: var(--text); background: linear-gradient(90deg, rgb(var(--aq) / .06), rgb(var(--aq) / .015)); }
.lp-vs td .icon { width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; stroke-width: 2.3; }
.lp-vs td:not(.us) .icon { color: var(--text-3); }
.lp-vs td.us .icon { color: var(--mint); }
.lp-vs tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }

/* the slim trial bar on phones: up once the hero's button has scrolled away, gone again near the last call */
.lp-sticky { display: none; }

@media (max-width: 1080px) {
  .lp-proof ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-proof li:nth-child(3n+1) { border-left: 0; }
  .lp-proof li:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .lp-pains { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .landing { --lp-nav: 54px; }
  .lp-proof { padding: 0 16px; }
  .lp-proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-proof li { padding: 18px 14px 16px; }
  .lp-proof li:nth-child(n) { border-left: 0; border-top: 0; }
  .lp-proof li:nth-child(2n) { border-left: 1px solid var(--rule); }
  .lp-proof li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .lp-proof b { font-size: 30px; }
  .lp-turn { margin-top: 26px; }
  .feat-pins { bottom: 82px; }
  .feat-pins span:nth-child(3) { display: none; }
  .lp-legend { margin-top: -18px; gap: 8px 16px; }
  /* the spec table as a stacked list: a category, then each row's label with its value under it (tier values side by side) */
  .lp-tablewrap { border-radius: 16px; }
  .lp-table, .lp-table tbody, .lp-table tr, .lp-table th, .lp-table td { display: block; width: auto; }
  .lp-table thead { display: none; }
  .lp-table .lp-cat th { padding: 20px 14px 8px; }
  .lp-cat .cat { flex-wrap: wrap; row-gap: 4px; }
  .lp-cat .cat-all { margin-left: 40px; flex-basis: 100%; }
  .lp-table .lp-row { padding: 12px 14px 13px; border-top: 1px solid var(--rule); }
  .lp-table .lp-row:nth-child(even) { background-color: rgb(var(--ov) / .022); }
  .lp-table .lp-row > *, .lp-table .lp-row:nth-child(even) > *, .lp-table .lp-row:hover > * { padding: 0; border: 0; background-color: transparent; text-align: left; }
  .lp-table .lp-row.tiered { display: grid; grid-template-columns: repeat(var(--tiers, 3), minmax(0, 1fr)); gap: 6px; }
  .lp-table .lp-row.tiered th { grid-column: 1 / -1; margin-bottom: 2px; }
  .lp-table .lp-row td.tv { padding: 7px 8px; border-radius: 8px; background-color: rgb(var(--ov) / .06); font-size: 12.5px; text-align: left; }
  .lp-table td.tv::before { content: attr(data-tier); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .lp-table .lp-row td.all { margin-top: 5px; background-image: none; color: var(--text-2); font-size: 13.5px; text-align: left; }
  .lp-specs-cta { padding: 20px 18px; }
  .lp-specs-cta .row, .lp-specs-cta .btn { width: 100%; }
  .lp-vs, .lp-vs tbody, .lp-vs tr, .lp-vs th, .lp-vs td { display: block; width: auto; }
  .lp-vs thead { display: none; }
  .lp-vs tbody tr { padding: 14px 0 16px; border-top: 1px solid var(--rule); }
  .lp-vs tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .lp-vs th, .lp-vs td, .lp-vs tbody tr:last-child > * { padding: 0; border: 0; }
  .lp-vs tbody th { margin-bottom: 8px; }
  .lp-vs td + td { margin-top: 6px; }
  .lp-vs td.us { padding: 8px 10px; border-radius: 9px; }
  .lp-vs td::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
  .lp-vs td.us::before { color: var(--accent-text); }
  .lp-sticky { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 16px;
    border-radius: 16px; background: var(--raised); border: 1px solid var(--rule-2); box-shadow: var(--shadow-pop);
    transform: translateY(calc(100% + 30px)); visibility: hidden; transition: transform .34s var(--spring), visibility 0s linear .34s; }
  .lp-sticky.on { transform: none; visibility: visible; transition: transform .34s var(--spring), visibility 0s; }
  .lp-sticky span { flex: 1; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--text-2); }
  .lp-sticky b { display: block; font-size: 14px; font-weight: 650; color: var(--text-hi); }
  .lp-sticky .btn { height: 42px; flex: none; }
}
@media (max-width: 560px) {
  .mk-stack { gap: 14px; }
  .lp-table .lp-row td.tv { font-size: 12px; padding: 6px 7px; }
}
@media (prefers-reduced-motion: reduce) { .tier-n.ultra { animation: none; } }

/* ======================================================================= LOGIN */
.login { height: 100%; overflow: auto; display: flex; flex-direction: column; }
.login-nav { display: flex; align-items: center; padding: 18px max(20px, calc((100% - 1200px) / 2)); gap: 14px; }
.login-nav .spacer { flex: 1; }
.login-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 430px); gap: 56px; padding: 12px max(20px, calc((100% - 1200px) / 2)) 32px; align-items: center; }
.login-pitch .hero-title { font-family: var(--brandface); font-size: clamp(34px, 3.8vw, 52px); line-height: 1.04; margin: 0 0 14px; font-weight: 620; letter-spacing: -0.04em; }
.hero-copy { font-size: var(--fs-md); line-height: 1.6; color: var(--text-soft); max-width: 520px; margin: 0 0 22px; }
.login-hv { max-width: 520px; margin: 8px 0 0; }
.auth-card { padding: 30px 30px 26px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-lift); z-index: 2; }
.auth-card .head { text-align: center; margin-bottom: 22px; }
.auth-card .head .logo.big { width: 52px; height: 52px; margin: 0 auto 4px; display: block; }
.auth-card h2 { font-size: var(--fs-lg); margin: 14px 0 4px; font-weight: 680; letter-spacing: -0.02em; }
.auth-card .lead { color: var(--text-2); margin: 0; line-height: 1.5; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.auth-card .btn.google { background: var(--surface); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12.5px; margin: 4px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--rule-2); }
.form-error { color: var(--t-red); background: rgb(var(--ro) / .07); border: 1px solid rgb(var(--ro) / .3); padding: 10px 12px; border-radius: 10px; font-size: var(--fs-sm); line-height: 1.45; }
.auth-foot { text-align: center; color: var(--text-2); margin-top: 16px; font-size: var(--fs-sm); position: relative; z-index: 1; }
.form-ok { color: var(--t-green); background: rgb(var(--mi) / .08); border: 1px solid rgb(var(--mi) / .3); padding: 10px 12px; border-radius: 10px; font-size: var(--fs-sm); line-height: 1.45; }
.terms-note { margin: 2px 0 0; text-align: center; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.login-foot { display: flex; gap: 18px; justify-content: center; padding: 14px 20px 22px; color: var(--text-3); font-size: 12.5px; }
.login-foot a { color: var(--text-2); }
.auth-solo { min-height: calc(100% - 92px); display: grid; place-items: center; padding: 12px 16px 48px; flex: 1; }
.auth-card.solo { width: min(440px, 100%); text-align: center; }
.auth-card.solo > * { position: relative; z-index: 1; }
.auth-card.solo h2 { margin-top: 14px; font-size: 22px; }
.auth-card.solo .lead { margin: 8px 0 18px; line-height: 1.55; }
.auth-card.solo form { margin-top: 4px; }
.auth-card.solo .form-error { margin-bottom: 12px; text-align: left; }
.mail-badge { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; border-radius: 16px; color: var(--t-aqua);
  background: linear-gradient(140deg, rgb(var(--aq) / .24), rgb(var(--bl) / .22) 55%, rgb(var(--vi) / .26)); border: 1px solid rgb(var(--aq2) / .3); }
.code-input { height: 58px !important; text-align: center; font-size: 28px !important; font-weight: 700; letter-spacing: .42em; padding-left: .42em !important;
  font-variant-numeric: tabular-nums; font-family: 'SF Mono', Menlo, Consolas, monospace; }
.verify-links { margin-top: 14px; }
.verify-foot { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; }

/* ======================================================================= SHELL */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100%; transition: grid-template-columns var(--t-slow) var(--spring); }
.shell.rail { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; padding: 12px 12px 10px; min-height: 0; min-width: 0; overflow: hidden;
  background: var(--side-bg); color: var(--text); border-right: 1px solid var(--rule); }
.side-head { display: flex; align-items: center; gap: 6px; padding: 2px 2px 14px 6px; min-height: 48px; }
.side-head .brand-link { flex: 1; min-width: 0; overflow: hidden; }
.sidebar .brand { font-size: 18px; gap: 9px; }
.sidebar .logo { width: 28px; height: 28px; }
.side-toggle { color: var(--text-3); width: 32px; height: 32px; }
.side-toggle .icon { transition: transform var(--t-slow) var(--spring); }
.nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 11px; border-radius: 11px; border: 1px solid transparent; white-space: nowrap; overflow: hidden;
  background: transparent; cursor: pointer; color: var(--text-2); font-size: var(--fs); font-weight: 510; text-align: left; position: relative;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), padding var(--t-slow) var(--spring); }
.nav button .icon { width: 18px; height: 18px; color: var(--text-3); transition: color var(--t-fast), transform var(--t) var(--spring); }
.nav button .lbl { transition: opacity var(--t) var(--spring); }
.nav button:hover { background: var(--hover); color: var(--text); }
.nav button:hover .icon { color: var(--text-2); transform: scale(1.06); }
.nav button.on { color: var(--text-hi); font-weight: 590; background: var(--nav-on); border-color: transparent; box-shadow: none; }
.nav button.on::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-ink); }
.nav button.on .icon { color: var(--accent-text); }
.nav .badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-2); background: rgb(var(--ov) / .1);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.nav button.on .badge { color: var(--on-accent); background: var(--aqua); }
.nav .badge.live { color: var(--t-live); background: rgb(var(--ta) / .16); }
.nav .badge.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tally); box-shadow: none; }
.nav .grp { font-size: 11px; color: var(--text-3); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; padding: 18px 12px 6px; white-space: nowrap; overflow: hidden; height: 41px; }
.nav .sep { height: 1px; background: var(--rule); margin: 8px 6px; }
.side-card { margin-top: 10px; padding: 12px; border-radius: 14px; position: relative; overflow: hidden; flex: none; cursor: pointer;
  background: rgb(var(--ov) / .045); border: 1px solid var(--rule-2); transition: border-color var(--t), background var(--t), transform var(--t) var(--spring); }
.side-card:hover { border-color: rgb(var(--aq2) / .3); transform: translateY(-1px); }
.side-card .top { display: flex; gap: 10px; align-items: center; position: relative; }
.side-card .bolt { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--accent-text);
  background: linear-gradient(140deg, rgb(var(--aq) / .24), rgb(var(--bl) / .2)); border: 1px solid rgb(var(--aq2) / .25); }
.side-card .bolt .icon { width: 16px; height: 16px; }
.side-card b { font-size: 11.5px; display: block; }
.side-card .tier-name { font-size: var(--fs); font-weight: 650; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-card .tier-name .skel { margin: 4px 0; width: 70%; }
.side-card p { margin: 9px 0 0; font-size: 12px; color: var(--text-2); line-height: 1.45; position: relative; }
.side-card .meter { height: 4px; border-radius: 2px; background: rgb(var(--ov) / .14); margin-top: 10px; overflow: hidden; position: relative; }
.side-card .meter i { display: block; height: 100%; background: var(--bar); border-radius: 2px; }
.side-card .btn { margin-top: 11px; position: relative; height: 30px; font-size: 12.5px; }
.side-credits b { color: var(--text); font-weight: 650; font-size: 12px; display: inline; }
.side-card p.side-credits.low, .side-credits.low b { color: var(--amber); }
.side-card .side-plan { margin-top: 8px; position: relative; }
.side-card .side-plan .pm-l { font-size: 11.5px; }
.side-card .side-plan:not(.hidden) + .side-credits { margin-top: 5px; }
.side-foot { display: flex; gap: 14px; padding: 10px 8px 2px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.side-foot a { color: var(--text-3); }
.side-foot a:hover { color: var(--text-2); }
/* the icon rail: icons only, labels as tooltips, the AI card as one button */
.shell.rail .sidebar { padding-left: 10px; padding-right: 10px; }
.shell.rail .side-head { flex-direction: column; padding: 2px 0 10px; gap: 8px; min-height: 0; }
.shell.rail .side-head .brand-link { flex: none; justify-content: center; }
.shell.rail .wordmark, .shell.rail .nav .lbl, .shell.rail .side-foot, .shell.rail .side-card :is(p, .meter, .btn, .grow) { display: none; }
.shell.rail .side-toggle .icon { transform: scaleX(-1); }
.shell.rail .nav button { justify-content: center; padding: 0; gap: 0; width: 46px; margin: 0 auto; }
.shell.rail .nav button.on::before { left: -6px; }
.shell.rail .nav .badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 15px; font-size: 9.5px; padding: 0 3px; margin: 0; }
.shell.rail .nav .badge.live { width: 9px; min-width: 0; height: 9px; padding: 0; font-size: 0; top: 7px; right: 8px; background: none; }
.shell.rail .nav .badge.live::before { width: 8px; height: 8px; }
.shell.rail .nav .grp { height: 17px; padding: 8px 0; font-size: 0; }
.shell.rail .nav .grp::after { content: ''; display: block; height: 1px; margin: 0 10px; background: var(--rule-2); }
.shell.rail .side-card { padding: 8px; width: 48px; margin: 10px auto 4px; display: grid; place-items: center; }
.shell.rail .side-card .top { gap: 0; }
/* the plan meter folds to its bar under the AI icon; its words are in the floating label and the bar's aria-label */
.shell.rail .side-card .side-plan { width: 30px; margin: 6px auto 0; }
.shell.rail .side-plan .plan-meter { padding: 3px 0; }
.shell.rail .side-plan .pm-l { display: none; }
.shell.rail .side-plan .pm-bar { margin-top: 0; }
.shell.rail-forced .side-toggle { display: none; }
.sf-tip { position: fixed; z-index: 90; left: 0; top: 0; transform: translate(-4px, -50%); opacity: 0; pointer-events: none; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--tip-text); background: var(--tip-bg); border: 1px solid rgb(var(--ov) / .14); box-shadow: var(--shadow-pop);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--spring); }
.sf-tip.on { opacity: 1; transform: translate(0, -50%); }
@media (max-height: 760px) { .side-card p:not(.side-credits), .side-card .meter { display: none; } .nav button { height: 34px; } .side-head { padding-bottom: 10px; } }
/* 13-inch laptops (about 650-700 px of browser height): the AI card shrinks to one tappable row so every nav item,
   Admin included, stays visible without a hidden scroll */
@media (max-height: 700px) { .side-card { padding: 8px 10px; } .side-card .btn { display: none; }
  .side-card .bolt { width: 26px; height: 26px; } .nav button { height: 31px; } .nav .grp { padding: 10px 12px 4px; height: 29px; }
  .nav .sep { margin: 6px 6px; } .sidebar { padding-top: 10px; } .side-head { padding-bottom: 8px; } .side-foot { display: none; } }
/* with the plan meter the AI card gives the bar the room its button took on short screens (the bar opens Plan & usage) */
@media (max-height: 760px) { .side-card.with-plan .btn { display: none; } }
@media (max-height: 700px) { .side-card .side-plan { margin-top: 6px; } .side-card .side-plan:not(.hidden) + .side-credits { margin-top: 4px; } }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 18px 0 26px; flex: none; position: relative; z-index: 5;
  border-bottom: 1px solid var(--rule); background: var(--topbar-bg); }
.top-logo { display: none; }
.search { width: min(420px, 42vw); height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 6px 0 12px; cursor: text; color: var(--text-3); border-radius: 12px; }
.shell .search.glass { background: var(--surface-2); border: 1px solid var(--border); box-shadow: none;
  transition: border-color var(--t-fast), box-shadow var(--t), background var(--t-fast); }
.shell .search.glass::before, .shell .search.glass::after { display: none; }
.shell .search.glass:hover { border-color: var(--border-3); background: var(--surface); box-shadow: var(--shadow-xs); }
.search .icon { width: 16px; height: 16px; color: var(--text-3); }
.search > span:not(.kbd) { flex: 1; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbd { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--rule-2); font-size: 11px; color: var(--text-2); background: rgb(var(--ov) / .06); flex: none; font-weight: 600; line-height: 1.6; }
.topbar .spacer { flex: 1; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 10px; cursor: pointer; font-weight: 650; font-size: 12.5px;
  background: rgb(var(--ta) / .08); border: 1px solid rgb(var(--ta) / .32); color: var(--t-live); transition: background var(--t-fast); }
.live-pill:hover { background: rgb(var(--ta) / .14); }
.notif-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 2px var(--topbar-bg); }
.user-btn { display: flex; align-items: center; gap: 8px; padding: 3px 9px 3px 3px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: var(--fs-sm); transition: background var(--t-fast), border-color var(--t-fast); }
.user-btn:hover { background: var(--hover); border-color: var(--rule); }
.user-btn > span:not(.avatar) { font-weight: 600 !important; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: #fff; flex: none; }
.role-pill { padding: 3px 7px; border-radius: 6px; font-weight: 650; font-size: 11px; background: rgb(var(--vi) / .1); border: 1px solid rgb(var(--vi) / .25); color: var(--t-violet); }
.content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 28px 56px; scrollbar-width: thin; scrollbar-color: rgb(var(--ov) / .22) transparent; }
.content::-webkit-scrollbar { width: 10px; }
.content::-webkit-scrollbar-thumb { background: rgb(var(--ov) / .18); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.content > .view { max-width: 1520px; margin: 0 auto; }
.view { animation: viewIn .32s var(--spring); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; display: flex; gap: 10px; align-items: center; border: 1px solid; font-size: var(--fs-sm);
  position: relative; }
.banner.closable { padding-right: 46px; }
.banner-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 9px; background: transparent; color: var(--text-3); cursor: pointer; transition: background .15s, color .15s; }
.banner-x:hover, .banner-x:focus-visible { background: var(--hover); color: var(--text); }
.banner-x .icon { width: 15px; height: 15px; }
.monitor .why, .stop-note { position: relative; display: flex; align-items: center; min-width: 0; padding-right: 28px; font-size: 12px; color: var(--text-3); }
.monitor .why.bad { color: var(--t-red); }
.stop-note { margin-top: 6px; }
.monitor .why .banner-x, .stop-note .banner-x { top: 50%; right: -4px; width: 26px; height: 26px; transform: translateY(-50%); }
.banner > .icon { width: 17px; height: 17px; }
.banner.info { background: rgb(var(--bl) / .12); border-color: rgb(var(--bl) / .34); }
.banner.info > .icon { color: var(--t-blue); }
.banner.warning { background: rgb(var(--am) / .09); border-color: rgb(var(--am) / .36); }
.banner.warning > .icon { color: var(--amber); }
.banner.success { background: rgb(var(--mi) / .09); border-color: rgb(var(--mi) / .34); }
.banner.success > .icon { color: var(--mint); }
.banner.danger { background: rgb(var(--ro) / .1); border-color: rgb(var(--ro) / .38); }
.banner.danger > .icon { color: var(--rose); }
.main > #sysBanner, .main > #payBanner { padding: 14px 28px 0; }
.main > #sysBanner .banner, .main > #payBanner .banner { margin: 0; max-width: 1520px; margin-inline: auto; }
.main > #sysBanner .banner + .banner { margin-top: 8px; }

/* phone tab bar */
.tabbar { display: none; }

/* ---------- page heads ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-family: var(--brandface); font-size: var(--fs-xl); font-weight: 620; letter-spacing: -0.022em; line-height: 1.15; }
.page-head p { margin: 5px 0 0; color: var(--text-2); font-size: var(--fs); max-width: 74ch; line-height: 1.55; }
.page-head > .row { flex-wrap: wrap; }
.studio-title { font-family: var(--brandface); font-size: var(--fs-xl); font-weight: 620; letter-spacing: -0.022em; margin: 0; line-height: 1.15; }
.studio-sub { font-size: var(--fs); color: var(--text-2); margin-top: 4px; }
.studio-tag { font-size: var(--fs); color: var(--text-2); margin-top: 4px; }

/* ---------- cards ---------- */
.card { padding: 18px; min-width: 0; position: relative; }
.card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; min-height: 26px; position: relative; z-index: 1; }
.card-head > .icon { width: 17px; height: 17px; color: var(--accent-text); }
.card-head h3 { margin: 0; font-size: var(--fs); font-weight: 590; letter-spacing: -0.011em; }
.card-head .sub { color: var(--text-3); font-size: 12.5px; }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card .empty, .empty { color: var(--text-3); font-size: var(--fs-sm); padding: 14px 0; line-height: 1.6; }
.tile { padding: 11px 13px; border-radius: 12px; background: rgb(var(--ov) / .04); border: 1px solid var(--rule); min-width: 0; }
.tile .k { display: flex; gap: 8px; align-items: center; }
.tile .k > .icon { width: 16px; height: 16px; color: var(--text-3); }
.tile b { font-size: var(--fs); display: block; font-weight: 620; }
.tile small { font-size: 12px; color: var(--text-3); display: block; }
.section-title { font-size: 12px; color: var(--text-2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 20px 0 9px; }
.panel { padding: 18px; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.two-col.cap-cols { grid-template-columns: minmax(0, 1fr) 340px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { padding: 14px 16px; min-width: 0; border-radius: 14px; background: rgb(var(--ov) / .045); border: 1px solid var(--rule); position: relative; }
.kpi .icon { width: 17px; height: 17px; color: var(--accent-text); }
.kpi .v { font-size: 26px; font-weight: 620; letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.1; font-family: var(--brandface); }
.kpi .l { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.kpi .d { font-size: 12px; margin-top: 6px; font-weight: 650; color: var(--t-green); }
.kpi .d.down { color: var(--t-red); }
.kpi .d.flat { color: var(--text-3); font-weight: 500; }
.chart { position: relative; height: 150px; margin-top: 12px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .tip { position: absolute; padding: 6px 9px; border-radius: 8px; color: var(--tip-text); background: var(--tip-bg); border: 1px solid rgb(var(--ov) / .14); font-size: 12px; pointer-events: none; transform: translate(-50%, -125%); white-space: nowrap; z-index: 3; box-shadow: 0 10px 28px rgb(var(--sh) / calc(.55 * var(--shk))); }
.axis { fill: var(--text-3); font-size: 10.5px; font-family: var(--font); }
.big-number { display: flex; align-items: center; gap: 14px; margin: -2px 0 12px; }
.big-number .n { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.big-number .lbl { color: var(--text-2); font-size: 12.5px; line-height: 1.35; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-left: auto; flex: 1; max-width: 140px; }
.bars i { flex: 1; border-radius: 2px 2px 1px 1px; background: linear-gradient(180deg, var(--aqua-2), rgb(var(--cy) / .3)); min-height: 2px; transition: height .5s var(--spring); }
.spark { position: relative; display: block; width: 100%; height: 36px; }
.spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spark i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--surface); }
.ring { width: 100%; height: 100%; display: block; }
.ring text { fill: var(--text); font-size: 8.4px; font-weight: 620; font-family: var(--brandface); }
.ring .ring-v { transition: stroke-dasharray .9s var(--spring); }

/* lists */
.mlist { display: flex; flex-direction: column; gap: 2px; }
.mrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 11px; align-items: center; padding: 7px; border-radius: 11px; cursor: pointer; transition: background var(--t-fast); margin: 0 -7px; }
.mrow:hover { background: var(--hover); }
.thumb { width: 64px; height: 36px; border-radius: 7px; object-fit: cover; background: var(--media-bg); display: block; }
.mrow .t { font-weight: 600; font-size: var(--fs-sm); display: flex; gap: 6px; align-items: center; }
.mrow .meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; color: var(--text-2); font-size: 12px; flex-wrap: wrap; row-gap: 4px; }
.mrow .ago { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.mrow .icon-btn { width: 26px; height: 26px; color: var(--text-3); }
.plist { display: flex; flex-direction: column; gap: 2px; }
.prow { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; cursor: pointer; padding: 7px; border-radius: 12px; margin: 0 -7px; transition: background var(--t-fast); }
.prow:hover { background: var(--hover); }
.prow .icon-btn { width: 26px; height: 26px; color: var(--text-3); transition: transform var(--t) var(--spring), color var(--t-fast); }
.prow:hover .icon-btn { transform: translateX(3px); color: var(--accent-text); }
.pthumb { position: relative; width: 76px; height: 43px; border-radius: 8px; overflow: hidden; background: var(--media-bg); box-shadow: 0 0 0 1px var(--rule); }
.pthumb img { width: 100%; height: 100%; object-fit: cover; }
.pthumb .d { position: absolute; bottom: 3px; right: 3px; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font-variant-numeric: tabular-nums; line-height: 15px; }
.prow b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.prow small { color: var(--text-3); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.prow small .plat { width: 15px; height: 15px; font-size: 8.5px; }

/* ======================================================================= DASHBOARD */
.dash { display: flex; flex-direction: column; gap: 18px; }
.dash-hero { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(290px, 1fr); gap: 18px; align-items: stretch; }
.hero-main { position: relative; padding: 10px 0 6px; }
.hero-date { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); position: relative; z-index: 1; }
.hero-greet { font-family: var(--brandface); font-size: clamp(28px, 2.9vw, 40px); font-weight: 620; letter-spacing: -0.035em; line-height: 1.08; margin: 8px 0 10px; position: relative; z-index: 1; }
.hero-status { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--text-2); font-size: var(--fs); min-height: 22px; position: relative; z-index: 1; }
.hero-status .hs { display: inline-flex; align-items: center; gap: 8px; }
.hero-status .hs.on { color: var(--t-live); }
.hero-status .icon { width: 15px; height: 15px; color: var(--text-3); }
.ask-liquid { margin-top: 22px; display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 16px; position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--border-2); box-shadow: var(--shadow);
  transition: border-color var(--t), box-shadow var(--t) var(--spring); }
.ask-liquid:hover { border-color: var(--border-3); }
.ask-liquid:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus); }
.ask-orb { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--on-accent); background: var(--liquid); position: relative;
  }
.ask-orb::after { content: none; }
.ask-orb .icon { stroke-width: 2.1; }
.ask-liquid input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; outline: none; font-size: var(--fs-md); color: var(--text); }
.ask-liquid input::placeholder { color: var(--text-3); }
.ask-liquid .btn { height: 40px; border-radius: 11px; }
.ask-liquid .btn.primary { padding: 0 16px; }
.pulse-card { display: flex; flex-direction: column; padding: 10px 0 4px 26px; color: var(--text); border-left: 1px solid var(--rule-2); transition: border-color var(--t); }
.pulse-card:hover { color: var(--text); border-left-color: rgb(var(--aq2) / .4); }
.pc-head { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.pc-head b { font-size: var(--fs); font-weight: 650; }
.pc-sub { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-open { font-size: 12px; font-weight: 650; color: var(--accent-text); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; transition: gap var(--t) var(--spring); }
.pulse-card:hover .pc-open { gap: 7px; }
.pc-orb { width: 34px; height: 34px; border-radius: 50%; position: relative; flex: none; background: radial-gradient(circle at 35% 30%, #d9fffb, #2ee6d6 34%, #3b82f6 74%, #1e1b4b);
  transition: filter var(--t-slow); }
.pc-orb i { position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgb(var(--aq2) / .6); opacity: 0; }
.pc-orb.on i { animation: orbPing 2.2s var(--spring) infinite; }
.pc-orb:not(.on) { filter: saturate(.35) brightness(.75); box-shadow: none; }
@keyframes orbPing { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.pc-chart { margin: 16px -2px 0; height: 64px; flex: 1; min-height: 56px; position: relative; z-index: 1; }
.pc-chart .spark { height: 100%; }
.pc-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-top: 5px; position: relative; z-index: 1; }
.pc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); position: relative; z-index: 1; }
.pc-stats b { display: block; font-family: var(--brandface); font-size: 20px; font-weight: 620; letter-spacing: -.02em; line-height: 1.15; }
.pc-stats span { font-size: 11.5px; color: var(--text-3); }
.onboard { padding: 0; }
.ob-line { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 12px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); font-size: var(--fs-sm); }
.ob-k { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.ob-n { color: var(--text-2); font-weight: 560; }
.ob-bar { width: 110px; height: 3px; border-radius: 2px; background: rgb(var(--ov) / .14); overflow: hidden; flex: none; }
.ob-bar i { display: block; height: 100%; border-radius: 2px; background: var(--bar); transition: width .8s var(--spring); }
.ob-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; flex: 1 1 340px; min-width: 0; }
.ob-step { display: inline-flex; gap: 7px; align-items: center; padding: 2px 0; border: 0; background: none; font-size: var(--fs-sm); font-weight: 510; color: var(--text-2); cursor: pointer; max-width: 100%; text-align: left; transition: color var(--t-fast); }
.ob-step:hover { color: var(--text-hi); }
.ob-step .tick { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--rule-3); flex: none; }
.ob-step .tick .icon { width: 9px; height: 9px; stroke-width: 3.4; }
.ob-step.done { color: var(--text-3); }
.ob-step.done .tick { background: var(--mint); border-color: var(--mint); color: #04261a; }
.ob-step.next { color: var(--text-hi); }
.ob-step.next .tick { border-color: var(--aqua); box-shadow: 0 0 0 3px rgb(var(--aq) / .16); }
.ob-go { margin-left: auto; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.tile-stat { padding: 16px 18px 14px; min-width: 0; display: flex; flex-direction: column; min-height: 132px; cursor: pointer; transition: background var(--t-fast);
  animation: rise .5s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
.tile-stat + .tile-stat { border-left: 1px solid var(--rule); }
.tile-stat:hover { background: linear-gradient(180deg, rgb(var(--ov) / .05), rgb(var(--ov) / 0)); }
.tile-stat > * { position: relative; z-index: 1; }
.ts-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ts-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--accent-text); background: rgb(var(--aq) / .1); border: 1px solid rgb(var(--aq2) / .18); }
.ts-ic .icon { width: 16px; height: 16px; }
.ts-l { font-size: 12.5px; color: var(--text-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-v { font-family: var(--brandface); font-size: 28px; font-weight: 620; letter-spacing: -0.03em; line-height: 1.05; margin-top: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-v small { font-size: var(--fs); font-weight: 600; color: var(--text-3); margin-left: 3px; letter-spacing: 0; font-family: var(--font); }
.ts-d .d { font-size: 12px; font-weight: 650; color: var(--t-green); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-d .d.down { color: var(--t-red); }
.ts-d .d.flat { color: var(--text-3); font-weight: 500; }
.ts-viz { margin-top: auto; padding-top: 12px; }
.split { display: flex; gap: 3px; height: 8px; }
.split i { border-radius: 4px; min-width: 4px; }
.split .ready { background: var(--mint); }
.split .draft { background: var(--amber); }
.split.empty i { flex: 1; background: rgb(var(--ov) / .12); }
.ts-viz .meter { height: 8px; border-radius: 4px; background: rgb(var(--ov) / .12); overflow: hidden; }
.ts-viz .meter i { display: block; height: 100%; background: var(--bar); border-radius: 4px; transition: width .8s var(--spring); }
.cols { display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.cols i { flex: 1; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, var(--violet), rgb(var(--bl) / .3)); min-height: 3px; }
.cols.empty i { height: 22%; background: rgb(var(--ov) / .12); }
.ts-plan { flex-direction: row; align-items: center; gap: 14px; }
.ts-ring { width: 74px; height: 74px; flex: none; position: relative; }
.ts-ring.tier { display: grid; place-items: center; border-radius: 50%; color: var(--accent-text); background: radial-gradient(circle, rgb(var(--aq) / .18), transparent 70%); border: 1px solid rgb(var(--aq2) / .2); }
.ts-plan .ts-v { margin-top: 4px; font-size: 26px; }
.ts-ring.tier.low { color: var(--amber); border-color: rgb(var(--am) / .35); background: radial-gradient(circle, rgb(var(--am) / .16), transparent 70%); }
/* with the plan meter: the credits on top, the meter along the bottom like the other tiles' pictures */
.ts-plan.with-meter { flex-wrap: wrap; align-content: space-between; row-gap: 10px; }
.ts-plan .plan-meter { flex: 1 0 100%; }
.sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; font-family: var(--brandface); font-size: var(--fs-lg); font-weight: 620; letter-spacing: -0.016em; display: inline-flex; align-items: center; gap: 10px; }
.sec-head .count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: rgb(var(--aq) / .12); color: var(--accent-text); border: 1px solid rgb(var(--aq2) / .22); }
.sec-head .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.live-wall { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 178px); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 6px 6px 16px; margin: -6px -6px 0; scrollbar-width: thin; scrollbar-color: rgb(var(--ov) / .2) transparent; }
.rv-card { scroll-snap-align: start; cursor: pointer; min-width: 0; animation: rise .5s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.rv-card .media { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--media-bg); border: 1px solid var(--rule-2); box-shadow: 0 18px 40px -22px rgb(var(--sh) / calc(.95 * var(--shk)));
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--spring), border-color var(--t); }
.rv-card .media img, .rv-card .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-card .media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 7, 15, .5), transparent 24%, transparent 64%, rgba(4, 7, 15, .72)); }
.rv-card:hover .media { transform: translateY(-4px) scale(1.015); border-color: rgb(var(--aq2) / .45); box-shadow: var(--shadow-lift); }
.rv-top { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.rv-top .chip { background: rgba(4, 10, 24, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rv-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; z-index: 2; color: #fff;
  background: rgba(4, 10, 24, .42); border: 1px solid rgba(255, 255, 255, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: scale(.85); transition: opacity var(--t), transform var(--t) var(--spring); }
.rv-play .icon { margin-left: 2px; fill: currentColor; }
.rv-card:hover .rv-play { opacity: 1; transform: none; }
.rv-card .media:has(video) .rv-play { opacity: 0; }
.rv-dur { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-size: 11px; font-weight: 700; padding: 0 6px; line-height: 19px; border-radius: 5px; background: rgba(0, 0, 0, .66); color: #fff; }
.rv-title { margin-top: 10px; font-size: var(--fs-sm); font-weight: 620; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-nav { display: flex; gap: 4px; }
.car-nav .icon-btn { border: 1px solid var(--rule-2); background: rgb(var(--ov) / .05); width: 32px; height: 32px; }
.rv-empty { display: flex; gap: 14px; align-items: center; padding: 22px; border-radius: 16px; color: var(--text-2); }
.rv-empty > * { position: relative; z-index: 1; }
.rv-empty > .icon { color: var(--accent-text); }
.rv-empty b { color: var(--text); }
.rv-empty p { margin: 4px 0 0; font-size: var(--fs-sm); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.dash-grid + .dash-grid { margin-top: 18px; }
.dash-grid.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgb(var(--aq) / .55), rgb(var(--vi) / .3) 60%, rgb(var(--vi) / 0)); }
.tl-item { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) 72px; gap: 12px; align-items: center; padding: 8px 8px 8px 0; cursor: pointer; border-radius: 12px; transition: background var(--t-fast); }
.tl-item:hover { background: var(--hover); }
.tl-dot { width: 12px; height: 12px; margin-left: 2px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 3px var(--surface); position: relative; z-index: 1; }
.tl-dot.blue { background: var(--blue); }
.tl-dot.amber { background: var(--amber); }
.tl-dot.red { background: var(--rose); }
.tl-dot.violet { background: var(--violet); }
.tl-dot.green { background: var(--mint); }
.tl-dot.cyan { background: var(--cyan); }
.tl-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tl-t b { font-size: var(--fs-sm); font-weight: 620; }
.tl-t .ago { margin-left: auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.tl-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 12px; flex-wrap: wrap; }
.tl-thumb { width: 72px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--media-bg); display: block; box-shadow: 0 0 0 1px var(--rule); }
/* kept for pages that still use the strip and checklist styles */
.dropbar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 13px; margin-bottom: 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--rule-2); box-shadow: var(--shadow); transition: border-color var(--t), box-shadow var(--t); }
.dropbar:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus); }
.dropbar > .icon { color: var(--accent-text); width: 17px; height: 17px; }
.dropbar input { flex: 1; min-width: 0; height: 36px; border: 0; background: transparent; outline: none; font-size: var(--fs); }
.dropbar input::placeholder { color: var(--text-3); }
.dropbar .sep { width: 1px; height: 20px; background: var(--rule-2); margin: 0 2px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-strip.six { grid-template-columns: repeat(6, 1fr); }
.stat-strip.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1180px) { .stat-strip.six { grid-template-columns: repeat(3, 1fr); } }
.stat-strip > div { background: rgb(var(--ov) / .045); border: 1px solid var(--rule); border-radius: 14px; padding: 13px 15px; min-width: 0; position: relative; }
.stat-strip > div[data-act] { cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.stat-strip > div[data-act]:hover { background: var(--hover); border-color: var(--rule-2); }
.stat-strip .v { font-family: var(--brandface); font-size: 24px; font-weight: 620; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-strip .v small { font-size: 12px; font-weight: 550; color: var(--text-3); letter-spacing: 0; margin-left: 3px; }
.stat-strip .l { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.stat-strip .d { font-size: 12px; font-weight: 650; color: var(--t-green); margin-top: 4px; }
.stat-strip .d.down { color: var(--t-red); }
.stat-strip .d.flat { color: var(--text-3); font-weight: 500; }
.stat-strip .meter { height: 4px; border-radius: 2px; background: rgb(var(--ov) / .14); margin-top: 8px; overflow: hidden; }
.stat-strip .meter i { display: block; height: 100%; background: var(--bar); }
.stat-strip .meter i.over { background: linear-gradient(90deg, #fbbf24, #fb7185); }
.dash-stats { margin-bottom: 16px; }
.setup { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; margin-bottom: 16px; flex-wrap: wrap; }
.setup .count { font-size: 12.5px; color: var(--text-2); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.setup .count b { color: var(--text); font-weight: 600; }
.checklist { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.card > .checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.check-step { display: flex; gap: 8px; align-items: center; text-align: left; line-height: 1.3; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text); }
.check-step:hover { background: var(--hover); border-color: var(--rule); }
.check-step .tick { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rule-3); display: grid; place-items: center; flex: none; }
.check-step .tick .icon { width: 10px; height: 10px; stroke-width: 3.2; }
.check-step.done { color: var(--text-3); text-decoration: line-through; text-decoration-color: rgb(var(--ov) / .3); }
.check-step.done .tick { background: var(--mint); border-color: var(--mint); color: #04261a; }
.progress-ring { width: 22px; height: 22px; flex: none; }
.poster-row { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgb(var(--ov) / .2) transparent; }
.poster { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--media-bg); border: 1px solid var(--rule); transition: border-color var(--t), transform var(--t) var(--spring); }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--spring); }
.poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 7, 15, .4) 0%, transparent 24%, transparent 60%, rgba(4, 7, 15, .7)); pointer-events: none; }
.pcard { min-width: 0; cursor: pointer; }
.pcard .ptitle { font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .pmeta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard:hover .poster { border-color: rgb(var(--aq2) / .45); }
.pcard:hover .poster img { transform: scale(1.04); }
.poster .cap { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; font-size: 12px; font-weight: 650; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.poster .top { position: absolute; left: 6px; top: 6px; right: 6px; display: flex; justify-content: space-between; z-index: 1; }
.poster .top .chip { background: rgba(4, 10, 24, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.poster:hover { border-color: rgb(var(--aq2) / .45); transform: translateY(-2px); }
.poster:hover img { transform: scale(1.04); }
.usage-meter { height: 8px; border-radius: 4px; background: rgb(var(--ov) / .13); overflow: hidden; }
.usage-meter i { display: block; height: 100%; border-radius: 4px; background: var(--bar); transition: width .6s var(--spring); }
.usage-meter i.over { background: linear-gradient(90deg, #fbbf24, #fb7185); }

/* ======================================================================= CONTROL ROOM (multi-stream) */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wall.compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.wall.compact .monitor .bar { padding: 9px 11px 10px; gap: 4px; }
.wall.compact .add-monitor { min-height: 0; }
.stack .stat-strip { grid-template-columns: 1fr 1fr; }
.monitor { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--rule-2); cursor: pointer; box-shadow: var(--shadow);
  transition: border-color var(--t), box-shadow var(--t) var(--spring), transform var(--t) var(--spring); display: flex; flex-direction: column; }
.monitor:hover { border-color: var(--rule-3); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.monitor.rec { border-color: rgb(var(--ta) / .55); box-shadow: 0 0 0 1px rgb(var(--ta) / .18), var(--shadow); }
.monitor.sel { border-color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-ink), var(--shadow); }
.monitor .screen { position: relative; aspect-ratio: 16 / 9; background: #06101f; overflow: hidden; }
.monitor .screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 7, 15, .35), transparent 30%, transparent 70%, rgba(4, 7, 15, .5)); }
.monitor .screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.monitor .screen .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: 12px; text-align: center; padding: 12px; }
.monitor .tally { position: absolute; top: 9px; left: 9px; display: flex; gap: 6px; align-items: center; z-index: 1; }
.monitor .tally .chip:not(.live) { background: rgba(4, 10, 24, .75); }
.monitor .tc { position: absolute; top: 9px; right: 9px; z-index: 1; padding: 0 6px; border-radius: 5px; background: rgba(0, 0, 0, .62); color: #fff; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11.5px; line-height: 19px; }
.monitor .scan { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 30px; display: flex; align-items: flex-end; gap: 2px; padding: 0 10px 6px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55)); }
.monitor .scan i { flex: 1; background: linear-gradient(180deg, #a5f9f1, rgb(var(--cy) / .4)); border-radius: 2px 2px 1px 1px; min-height: 2px; transition: height .5s var(--spring); box-shadow: none; }
.monitor:not(.rec) .scan i { background: rgb(var(--ov) / .35); box-shadow: none; }
.monitor .bar { padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-top: 1px solid var(--rule); }
.monitor .name { display: flex; gap: 8px; align-items: center; font-weight: 650; font-size: var(--fs-sm); }
.monitor .stats { display: flex; gap: 10px; color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.monitor .stats b { color: var(--text-2); font-weight: 650; }
.monitor .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.monitor .acts .btn { flex: 1 1 auto; white-space: nowrap; }
.plat { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 800; color: #fff; flex: none; }
.plat.twitch { background: #9146ff; } .plat.youtube { background: #ff0033; } .plat.kick { background: #53fc18; color: #05210a; } .plat.obs { background: #3a3f55; } .plat.upload { background: #0e7490; }
.add-monitor { border: 1px dashed rgb(var(--aq2) / .3); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 200px; cursor: pointer; color: var(--text-2); background: rgb(var(--aq) / .03); transition: border-color var(--t), background var(--t), color var(--t), transform var(--t) var(--spring); text-align: center; padding: 18px; }
.add-monitor:hover { border-color: rgb(var(--aq2) / .7); background: rgb(var(--aq) / .07); color: var(--text-hi); transform: translateY(-1px); }
.add-monitor .plus { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--liquid); color: var(--on-accent); box-shadow: none; }
.add-monitor .plus .icon { width: 19px; height: 19px; stroke-width: 2.4; }
.add-monitor b { font-size: var(--fs); color: var(--text); font-weight: 650; }
.add-monitor small { font-size: 12px; color: var(--text-3); max-width: 250px; line-height: 1.45; }
.detect { display: flex; gap: 8px; align-items: center; padding: 9px 11px; border-radius: 10px; background: var(--well); border: 1px solid var(--rule); font-size: 12.5px; min-height: 40px; }
.focus-panel { margin-top: 16px; }
.watch-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--rule); }
.watch-row:last-child { border-bottom: 0; }

.room-empty { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 16px; flex-wrap: wrap; }
.room-empty:not(.glass) { border: 1px dashed var(--rule-2); }
.room-empty > * { position: relative; z-index: 1; }
.room-empty > .icon { color: var(--accent-text); width: 20px; height: 20px; }
.room-empty b { font-size: var(--fs); font-weight: 650; }
.room-empty .dim { font-size: 12.5px; margin-top: 2px; }
.empty-room { display: grid; grid-template-columns: minmax(200px, .9fr) 1.3fr; gap: 16px; align-items: stretch; }
.how { margin: 0; padding: 18px; list-style: none; counter-reset: how; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.how li { counter-increment: how; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; position: relative; z-index: 1; }
.how li::before { content: counter(how); grid-row: span 2; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 12px;
  background: rgb(var(--aq) / .12); color: var(--accent-text); border: 1px solid rgb(var(--aq2) / .25); margin-top: 1px; }
.how b { font-size: var(--fs); font-weight: 650; }
.how span { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 700px) { .empty-room { grid-template-columns: 1fr; } }

/* live page blocks */
.live-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.preview { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #06101f; border: 1px solid var(--rule); }
.preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview .live-tag { position: absolute; top: 8px; left: 8px; background: var(--tally-ink); color: #fff; font-weight: 750; font-size: 10.5px; letter-spacing: .06em; padding: 3px 6px; border-radius: 5px; display: flex; gap: 5px; align-items: center; }
.preview .placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--text-2); padding: 20px; font-size: var(--fs-sm); }
.capture-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: stretch; }
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative; z-index: 1; }
.stage { padding: 13px 14px; background: rgb(var(--ov) / .045); border: 1px solid var(--rule); border-radius: 13px; position: relative; overflow: hidden; }
.stage .h { display: flex; gap: 7px; align-items: center; font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.stage .h .icon { width: 15px; height: 15px; }
.stage .v { font-family: var(--brandface); font-size: 22px; font-weight: 620; margin: 6px 0 2px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stage .s { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.stage.ok { box-shadow: inset 0 2px 0 rgb(var(--mi) / .75); }
.stage.warn { box-shadow: inset 0 2px 0 rgb(var(--am) / .85); }
.stage.bad { box-shadow: inset 0 2px 0 rgb(var(--ro) / .9); }
.signal-chart { height: 200px; margin-top: 4px; }
.wave { display: flex; align-items: center; gap: 2px; height: 44px; }
.wave i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, var(--aqua-2), rgb(var(--cy) / .4)); min-height: 3px; transition: height .4s var(--spring); }
.feed { display: flex; flex-direction: column; gap: 0; max-height: 320px; overflow: auto; }
.feed .item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.feed .item:last-child { border-bottom: 0; }

/* ======================================================================= REVIEW */
.review { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 22px; align-items: start; }
.review .stage-video { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #000; border: 1px solid var(--rule-2);
  box-shadow: 0 0 0 1px rgb(var(--sh) / calc(.4 * var(--shk))), 0 30px 70px -30px rgb(var(--sh) / calc(.95 * var(--shk))); }
.review .stage-video video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
/* the player fits the window, so Approve and Reject stay on screen on a laptop, a banner included (13.8.1) */
.review .stage-video { height: clamp(360px, calc(100vh - 290px), 676px); width: auto; max-width: 100%; margin-inline: auto; }
/* Approve and Reject stay on screen while the short is in view, whatever the window and its banners (13.8.1);
   on a phone they sit above the tab bar */
.review .decide { position: sticky; bottom: 12px; z-index: 6; padding: 8px; margin-inline: -8px; border-radius: 16px;
  background: var(--bg); box-shadow: 0 10px 30px -14px rgb(var(--sh) / calc(.6 * var(--shk))); }
@media (max-width: 767px) { .review .decide { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } }
.review .decide { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.review .decide .btn { height: 44px; font-size: var(--fs); border-radius: 12px; }
.review h2 { font-family: var(--brandface); font-size: 22px; font-weight: 620; letter-spacing: -.02em; margin: 6px 0 8px; line-height: 1.25; }
.queue { display: grid; grid-auto-flow: column; grid-auto-columns: 62px; gap: 7px; overflow-x: auto; padding: 3px 3px 8px; }
.queue .q { aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--media-bg); position: relative; transition: border-color var(--t-fast), transform var(--t) var(--spring); }
.queue .q:hover { transform: translateY(-2px); }
.queue .q img { width: 100%; height: 100%; object-fit: cover; }
.queue .q.on { border-color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-ink); }
.queue .q.done { opacity: .35; }
.keys { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-3); font-size: 12px; }
.keys .kbd { margin-right: 4px; }

/* ======================================================================= TIERS */
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }
.tier { position: relative; padding: 20px 18px 18px; border-radius: 16px; border: 1px solid var(--rule-2); background: rgb(var(--ov) / .04); display: flex; flex-direction: column; gap: 11px; }
.tier.ultra { border-color: rgb(var(--vi) / .45); background: linear-gradient(180deg, rgb(var(--vi) / .12), rgb(var(--vi) / 0) 45%), rgb(var(--ov) / .04); }
.tier.current { border-color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-ink); }
.tier h3 { margin: 0; font-family: var(--brandface); font-size: 19px; font-weight: 620; letter-spacing: -.02em; }
.tier .tag { font-size: 12.5px; color: var(--text-2); line-height: 1.5; min-height: 38px; }
.tier .big { font-family: var(--brandface); font-size: 30px; font-weight: 620; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier .big small { font-size: 12.5px; font-weight: 550; color: var(--text-2); letter-spacing: 0; margin-left: 4px; font-family: var(--font); }
.tier dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12.5px; }
.tier dt { color: var(--text-2); }
.tier dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.tier .models { font-size: 11.5px; color: var(--text-3); line-height: 1.5; border-top: 1px solid var(--rule); padding-top: 10px; word-break: break-word; }
.tier .rel { height: 4px; border-radius: 2px; background: rgb(var(--ov) / .14); overflow: hidden; }
.tier .rel i { display: block; height: 100%; background: var(--bar); }

/* ======================================================================= ADMIN */
.admin-tabs { margin-bottom: 18px; }
.health { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; position: relative; z-index: 1; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 12.5px; position: relative; z-index: 1; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-weight: 600; }
.mini-bars { display: flex; align-items: flex-end; gap: 4px; height: 92px; position: relative; z-index: 1; }
.mini-bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.mini-bars i { width: 100%; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--aqua-2), rgb(var(--bl) / .45)); min-height: 2px; }
.mini-bars span { font-size: 10px; color: var(--text-3); }
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; position: relative; z-index: 1; }

/* clips */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filters { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
.filters::-webkit-scrollbar { display: none; }
.toolbar .filters { flex: 1 1 auto; min-width: min(100%, 340px); }   /* never squeezed to one tab: it takes its own row */
.toolbar .clip-search { width: 300px; }
@media (max-width: 900px) { .toolbar .clip-search { flex: 1 1 200px; width: auto; } .toolbar > .grow { display: none; } }
.filters button { flex: none; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; padding: 8px 11px; border-radius: 0; cursor: pointer; font-weight: 600; color: var(--text-2); font-size: var(--fs-sm); display: inline-flex; align-items: center; transition: color var(--t-fast), border-color var(--t); }
.filters button:hover { color: var(--text); }
.filters button.on { color: var(--text-hi); border-bottom-color: var(--tab-on); }
.filters button .n { margin-left: 6px; color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.ccard { cursor: pointer; position: relative; min-width: 0; }
.ccard .media { position: relative; aspect-ratio: 9 / 14; background: var(--media-bg); overflow: hidden; border-radius: 12px; border: 1px solid var(--rule-2);
  box-shadow: 0 18px 40px -22px rgb(var(--sh) / calc(.95 * var(--shk))); transition: transform var(--t) var(--spring), border-color var(--t), box-shadow var(--t) var(--spring); }
.ccard:hover .media { transform: translateY(-3px); border-color: rgb(var(--aq2) / .45); box-shadow: var(--shadow-lift); }
.ccard .media img, .ccard .media video { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.ccard .media .top { position: absolute; top: 7px; left: 7px; right: 7px; display: flex; justify-content: space-between; z-index: 1; }
.ccard .media .dur { position: absolute; bottom: 7px; right: 7px; z-index: 1; font-size: 11px; font-weight: 700; padding: 0 6px; line-height: 19px; border-radius: 5px; background: rgba(0, 0, 0, .68); color: #fff; font-variant-numeric: tabular-nums; }
.ccard .body { padding: 9px 2px 2px; }
.ccard .body b { font-size: var(--fs-sm); font-weight: 620; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.ccard .body .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; color: var(--text-3); font-size: 11.5px; gap: 6px; }
.ccard .top .chip { background: rgba(4, 10, 24, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ccard .top .chip.green { color: #9ff3d2; } .ccard .top .chip.amber { color: #fcdc8a; } .ccard .top .chip.red { color: #fec0cb; }
.ccard .top .chip.blue { color: #b3d0ff; } .ccard .top .chip.violet { color: #d7c9ff; } .ccard .top .chip.cyan { color: #a5effb; }
.ccard .pick { position: absolute; top: 7px; left: 7px; z-index: 2; width: 21px; height: 21px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .85); background: rgba(4, 10, 24, .6); display: none; place-items: center; }
.selecting .ccard .pick { display: grid; }
.selecting .ccard .media .top { left: 34px; }
.ccard.picked .media { border-color: var(--brand-ink); box-shadow: 0 0 0 2px var(--brand-ink); }
.ccard.picked .pick { background: var(--aqua); border-color: #fff; color: var(--on-accent); }
.bulkbar.glass { position: sticky; }
.bulkbar { position: sticky; bottom: 12px; z-index: 6; margin-top: 16px; padding: 9px 10px 9px 16px; border-radius: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--raised); box-shadow: var(--shadow-pop); }
.bulkbar > * { position: relative; z-index: 1; }
.score { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 21px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 750;
  background: rgba(4, 10, 24, .74); color: #9ff3d2; font-variant-numeric: tabular-nums; position: relative; flex: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(52, 211, 153, .3); }
.score::before { content: none; }
.score span { position: relative; }
.upload-zone { border: 1px dashed rgb(var(--aq2) / .32); border-radius: 16px; padding: 28px; text-align: center; color: var(--text-2); cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t); background: rgb(var(--aq) / .03); }
.upload-zone:hover, .upload-zone.drag { border-color: rgb(var(--aq2) / .75); background: rgb(var(--aq) / .07); color: var(--text-hi); }
.upload-zone > .icon { color: var(--accent-text); }
.progress { height: 6px; border-radius: 3px; background: rgb(var(--ov) / .13); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--bar); width: 0; transition: width .3s var(--spring); border-radius: 3px; }

/* tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); position: relative; z-index: 1; }
.table th { text-align: left; font-weight: 650; color: var(--text-3); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 9px 10px; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
.table th .link { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }   /* a sortable header looks like the rest (13.14.5) */
.table th .link:hover { color: var(--text-hi); gap: 4px; }
.table td { padding: 10px; border-bottom: 1px solid rgb(var(--ov) / .06); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover td { background: rgb(var(--ov) / .045); }
.table tr.click { cursor: pointer; }

/* multi-select toggles (what to look for): square, never underline tabs */
#genres { border-bottom: 0; flex-wrap: wrap; gap: 6px; overflow: visible; }
#genres button { border: 1px solid var(--rule-2); border-radius: 9px; margin: 0; height: 32px; padding: 0 12px; border-image: none; }
#genres button:hover { border-color: var(--rule-3); }
#genres button.on { background: rgb(var(--aq) / .1); border-color: rgb(var(--aq2) / .55); color: var(--text-hi); text-shadow: none; }

/* settings tabs: underlined, never pills */
.tabs { display: flex; gap: 2px; padding: 0; border-radius: 0; background: none; border: 0; border-bottom: 1px solid var(--rule-2); width: auto; max-width: 100%; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 1; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; padding: 9px 11px; border-radius: 0; cursor: pointer; font-weight: 600; color: var(--text-2); display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; font-size: var(--fs-sm); transition: color var(--t-fast); }
.tabs button .icon { width: 15px; height: 15px; color: var(--text-3); transition: color var(--t-fast); }
/* a strip that scrolls shows a soft edge where more tabs wait, and none at its ends (13.8.1) */
@media (max-width: 900px) {
  .filters, .tabs {
    background:
      linear-gradient(to right, var(--bg) 35%, transparent) left center / 36px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 35%, transparent) right center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(var(--sh) / calc(.35 * var(--shk))), transparent) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(var(--sh) / calc(.35 * var(--shk))), transparent) right center / 14px 100% no-repeat scroll;
  }
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text-hi); border-bottom-color: var(--tab-on); background: none; box-shadow: none; }
.tabs button.on .icon { color: var(--accent-text); }
.tabs button .n { font-size: 11.5px; padding: 0; border-radius: 0; background: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* 13.14.5: on a computer a tab row that runs out of room wraps onto a second row. The admin row ran past the edge at
   1440 px with no scrollbar showing, cutting off Errors & support and hiding Audit log (phones keep the scrolling strip) */
@media (min-width: 901px) { .tabs { flex-wrap: wrap; overflow-x: visible; } }
.preset-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative; z-index: 1; }
.preset-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.preset { padding: 13px; border-radius: 13px; border: 1px solid var(--rule); background: rgb(var(--ov) / .035); cursor: pointer; text-align: left; transition: border-color var(--t), background var(--t), transform var(--t) var(--spring), box-shadow var(--t); }
.preset:hover { border-color: var(--rule-2); background: var(--hover); transform: translateY(-2px); }
.preset.on { border-color: var(--brand-ink); background: rgb(var(--aq) / .06); box-shadow: 0 0 0 1px var(--brand-ink); }
.preset b { display: block; margin: 7px 0 3px; font-weight: 650; font-size: var(--fs-sm); }
.preset-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgb(var(--ov) / .1); color: var(--text-2); transition: background var(--t), color var(--t); }
.preset-ic .icon { width: 16px; height: 16px; }
.preset.on .preset-ic { background: var(--liquid); color: var(--on-accent); }
.preset small { color: var(--text-2); font-size: 12px; line-height: 1.4; display: block; }
.preset-grid.fonts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.font-name { display: block; min-height: 30px; margin: 0 0 5px; font-size: 22px; line-height: 1.15; font-weight: 400; font-synthesis: none; color: var(--text); overflow-wrap: anywhere; }
.cap-preview { aspect-ratio: 9 / 16; max-height: 440px; border-radius: 16px; position: relative; overflow: hidden; background: #0b1426 url('/static/assets/hero-short.jpg') 50% 40% / cover; border: 1px solid var(--rule-2); z-index: 1; }
.cap-preview .cap { position: absolute; left: 8%; right: 8%; text-align: center; font-weight: 900; }
.cap-preview .hook { position: absolute; left: 10%; right: 10%; top: 15%; text-align: center; font-weight: 800; padding: 7px 9px; border-radius: 6px; background: rgba(14, 116, 144, .92); font-size: 15px; }
.prov { display: flex; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--rule); background: rgb(var(--ov) / .035); position: relative; z-index: 1; }
.prov .rank { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: rgb(var(--ov) / .12); color: var(--text-2); flex: none; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--code-bg); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; color: var(--code-text); overflow: auto; }

/* ======================================================================= OVERLAYS (glass dialogs, drawers, menus, toasts) */
.overlay { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: grid; place-items: center; padding: 24px; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(1080px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 24px; border-radius: 16px; background: var(--raised);
  border: 1px solid var(--rule); box-shadow: var(--shadow-pop); animation: pop .22s var(--spring); position: relative; scrollbar-width: thin; scrollbar-color: rgb(var(--ov) / .2) transparent; }
.modal.sm { width: min(500px, 100%); }
.modal.md { width: min(740px, 100%); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.975); } }
.modal .close, .drawer > .close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.modal h2, .drawer h2 { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; padding-right: 36px; }
.drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(780px, calc(100% - 20px)); z-index: 51; padding: 22px; overflow: auto;
  border-radius: 16px; background: var(--raised); border: 1px solid var(--rule);
  box-shadow: var(--shadow-pop); animation: slide .28s var(--spring); }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.clip-modal { display: grid; grid-template-columns: 320px 1fr; gap: 24px; }
.clip-modal video { width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; background: #000; border: 1px solid var(--rule-2); display: block; box-shadow: 0 24px 60px -30px rgb(var(--sh) / calc(.95 * var(--shk))); }
.trace { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.trace .st { display: grid; grid-template-columns: 16px 96px 1fr auto; gap: 10px; align-items: center; padding: 8px 11px; background: rgb(var(--ov) / .025); font-size: 12px; border-bottom: 1px solid var(--rule); }
.trace .st:last-child { border-bottom: 0; }
.trace .st .ms { color: var(--text-3); font-variant-numeric: tabular-nums; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.quick button { border: 1px solid var(--rule-2); background: var(--surface); height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--text); font-weight: 550; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.quick button:hover { border-color: var(--border-3); color: var(--text-hi); background: var(--surface-2); }
.quick > label { border-radius: 9px !important; }
.popover { position: fixed; z-index: 60; width: 380px; max-height: 520px; overflow: auto; padding: 6px; border-radius: 12px; background: var(--raised);
  border: 1px solid var(--rule); box-shadow: var(--shadow-pop); animation: pop .18s var(--spring); }
.menu button { width: 100%; display: flex; gap: 10px; align-items: center; height: 36px; padding: 0 11px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: var(--fs-sm); color: var(--text); transition: background var(--t-fast); }
.menu button .icon { width: 16px; height: 16px; color: var(--text-3); }
.menu button:hover { background: var(--hover); }
.menu button:hover .icon { color: var(--accent-text); }
.menu-meter { padding: 8px 11px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
.notif { display: flex; gap: 11px; padding: 10px 9px; border-radius: 11px; cursor: pointer; transition: background var(--t-fast); }
.notif:hover { background: var(--hover); }
.notif .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgb(var(--aq) / .12); color: var(--accent-text); }
.notif .ic.success { background: rgb(var(--mi) / .14); color: var(--mint); }
.notif .ic.warning { background: rgb(var(--am) / .14); color: var(--amber); }
.notif b { font-size: var(--fs-sm); display: block; font-weight: 620; }
.notif small { color: var(--text-2); font-size: 12px; }
.notif.unread b::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-ink); margin-left: 7px; vertical-align: middle; }
.palette { width: min(640px, 100%); padding: 0; overflow: hidden; align-self: start; margin-top: 12vh; border-radius: 20px; }
.palette input { width: 100%; height: 56px; border: 0; border-bottom: 1px solid var(--rule-2); background: transparent; padding: 0 20px; font-size: var(--fs-md); outline: none; }
.palette input::placeholder { color: var(--text-3); }
.palette .results { max-height: 440px; overflow: auto; padding: 8px; }
.palette .res { display: flex; gap: 11px; align-items: center; height: 40px; padding: 0 11px; border-radius: 10px; cursor: pointer; font-size: var(--fs-sm); transition: background var(--t-fast); }
.palette .res .icon { width: 16px; height: 16px; color: var(--text-3); }
.palette .res.sel, .palette .res:hover { background: var(--active); box-shadow: inset 0 0 0 1px rgb(var(--aq2) / .14); }
.palette .res.sel .icon { color: var(--accent-text); }
.palette .ask-answer { padding: 14px 16px 10px; line-height: 1.6; font-size: var(--fs); }
.palette .ask-answer p { margin: 8px 0 0; }
.palette .ask-q { display: flex; gap: 8px; align-items: center; color: var(--text-3); font-size: 12.5px; }
.palette .ask-q .icon { width: 14px; height: 14px; color: var(--accent-text); }
.palette .ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.palette .res.hit { height: auto; min-height: 46px; padding: 6px 11px; }
.palette .res.hit img { width: 28px; height: 50px; object-fit: cover; border-radius: 6px; flex: none; }
.palette .res.hit b { font-weight: 620; }
.palette .grp { font-size: 11px; color: var(--text-3); padding: 10px 11px 5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.toast { min-width: 290px; max-width: 440px; padding: 12px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--rule);
  box-shadow: var(--shadow-pop); display: flex; gap: 10px; align-items: flex-start; animation: toastIn .28s var(--spring); font-size: var(--fs-sm); line-height: 1.45; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.toast .icon { width: 17px; height: 17px; margin-top: 1px; color: var(--accent-text); }
.toast.err { border-color: rgb(var(--ro) / .45); }
.toast.err .icon { color: var(--rose); }
.toast.ok { border-color: rgb(var(--mi) / .45); }
.toast.ok .icon { color: var(--mint); }

/* editor page */
.editor { display: grid; grid-template-columns: 320px 1fr 340px; gap: 18px; }
.editor video { width: 100%; border-radius: 12px; background: #000; display: block; position: relative; z-index: 1; }
.editor .row { flex-wrap: wrap; }
.editor .card > * { position: relative; z-index: 1; }
.src-video { aspect-ratio: 16 / 9; }
.out-video { aspect-ratio: 9 / 16; }
.etl { position: relative; height: 88px; margin-top: 14px; user-select: none; touch-action: none; }
.etl .strip { position: absolute; left: 0; right: 0; top: 0; height: 54px; border-radius: 9px; background: #0b1426 center / 100% 100% no-repeat; border: 1px solid var(--rule-2); overflow: hidden; filter: brightness(.45) saturate(.7); }
.etl .wv { position: absolute; left: 0; right: 0; top: 58px; height: 28px; display: flex; align-items: center; gap: 1px; }
.etl .wv i { flex: 1; background: rgb(var(--aq2) / .45); min-height: 2px; border-radius: 1px; }
.etl .cut { position: absolute; top: 0; height: 54px; border: 2px solid #60a5fa; border-radius: 8px; cursor: grab; backdrop-filter: brightness(2.1) saturate(1.3); -webkit-backdrop-filter: brightness(2.1) saturate(1.3); background: rgb(var(--bl) / .1); box-shadow: none; }
.etl .cut.sel { border-color: #a78bfa; background: rgb(var(--vi) / .2); box-shadow: none; }
.etl .cut .h { position: absolute; top: -2px; bottom: -2px; width: 8px; background: #60a5fa; cursor: ew-resize; border-radius: 4px; }
.etl .cut.sel .h { background: #a78bfa; }
.etl .cut .h.l { left: -5px; } .etl .cut .h.r { right: -5px; }
/* fingers need a wider target than the 8 px handle they see */
@media (pointer: coarse) { .etl .cut .h::before { content: ''; position: absolute; top: -8px; bottom: -8px; left: -8px; right: -8px; } }
.etl .ph { position: absolute; top: -6px; height: 96px; width: 2px; background: #fff; pointer-events: none; box-shadow: 0 0 8px rgba(255, 255, 255, .7); }
.etl .pk { position: absolute; top: -10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--amber); transform: translateX(-5px); }
#fcBox { touch-action: none; }
.cap-list { max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.cap-item { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: center; }
.cap-item .tc { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cap-item input { height: 34px; font-size: var(--fs-sm); }
#edTranscript span.now { color: var(--aqua); font-weight: 650; }
.timeline-bar { position: relative; margin-top: 12px; }
.filmstrip { height: 52px; border-radius: 9px; overflow: hidden; background: #0b1426 center / 100% 100% no-repeat; border: 1px solid var(--rule-2); position: relative; }
.wavebar { height: 32px; display: flex; align-items: center; gap: 1px; margin-top: 6px; }
.wavebar i { flex: 1; background: rgb(var(--aq2) / .6); border-radius: 1px; min-height: 2px; }
.playhead { position: absolute; top: -8px; bottom: -4px; width: 2px; background: var(--aqua); }
.cutbox { position: absolute; top: 0; height: 52px; border: 2px solid var(--aqua); border-radius: 8px; background: rgb(var(--aq) / .12); }
.tool-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.se-body { display: grid; grid-template-columns: 140px 1fr; gap: 20px; }
.phone-prev { position: relative; width: 140px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule-2); background: var(--media-bg); cursor: pointer; }
.phone-prev img, .phone-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-prev .dur { position: absolute; bottom: 6px; right: 6px; font-size: 11px; font-weight: 700; padding: 0 5px; line-height: 18px; border-radius: 5px; background: rgba(0, 0, 0, .7); color: #fff; }
.phone-prev .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity var(--t); background: rgba(0, 0, 0, .25); }
.phone-prev:hover .play { opacity: 1; }
#saveBar { border-radius: 12px !important; padding: 11px 12px 11px 18px !important; background: var(--raised); box-shadow: var(--shadow-pop); }
#saveBar > * { position: relative; z-index: 1; }

/* Ask AI results bar in Clips */
.askbar { display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 13px; margin: -4px 0 16px; border: 1px solid rgb(var(--aq2) / .35);
  background: linear-gradient(90deg, rgb(var(--aq) / .1), rgb(var(--bl) / .06)); border-radius: 12px; font-size: var(--fs-sm); }
.askbar > .icon { color: var(--accent-text); }

/* explained score */
.scorebars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; margin: 10px 0 4px; }
.scorebars > div { display: grid; grid-template-columns: 62px 1fr 24px; align-items: center; gap: 8px; font-size: 12px; }
.scorebars i { height: 5px; border-radius: 3px; background: rgba(148, 197, 255, .14); overflow: hidden; display: block; }
.scorebars b { display: block; height: 100%; background: var(--bar); border-radius: 3px; }
.scorebars .num { text-align: right; color: var(--text-2); }

/* AI critic notes */
.critic { border: 1px solid var(--rule); border-radius: 12px; padding: 11px 13px; background: rgb(var(--ov) / .03); }
.critic-issues { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--rule); }
.critic-issues button { display: flex; gap: 8px; align-items: center; padding: 7px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--text); font-size: 12.5px; cursor: pointer; text-align: left; min-width: 0; }
.critic-issues button:last-child { border-bottom: 0; }
.critic-issues button:hover b { text-decoration: underline; }
.critic-issues .num { width: 34px; flex: none; }
.critic-issues b { font-weight: 620; white-space: nowrap; }
.critic-issues .grow { color: var(--text-2); }
.critic-issues .sev { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--amber); }
.critic-issues .sev.high { background: var(--rose); }
.critic-issues .sev.low { background: var(--text-3); }

/* long videos */
.modal.lg { width: min(980px, 100%); }
.lf-rec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 7px 7px 13px; border: 1px solid var(--rule); border-radius: 12px; font-size: 12.5px; position: relative; z-index: 1; }
.lf-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; position: relative; z-index: 1; }
.lf-item { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 12px; }
.lf-item[data-act] { cursor: pointer; transition: background var(--t-fast); }
.lf-item[data-act]:hover { background: var(--hover); }
.lf-item b { font-size: var(--fs-sm); font-weight: 620; }
.lf-thumb { position: relative; width: 112px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--media-bg); display: grid; place-items: center; color: var(--text-3); flex: none; }
.lf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lf-thumb .d { position: absolute; right: 4px; bottom: 4px; font-size: 10.5px; font-weight: 700; padding: 0 4px; line-height: 16px; border-radius: 4px; background: rgba(0, 0, 0, .72); font-variant-numeric: tabular-nums; color: #fff; }
.lf-view { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 20px; }
.lf-view video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; border: 1px solid var(--rule-2); display: block; }
.lf-side { min-width: 0; }
.lf-chapters { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 12px; max-height: 220px; overflow-y: auto; }
.lf-chapters button { display: flex; gap: 10px; align-items: center; padding: 8px 11px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; cursor: pointer; text-align: left; font-size: var(--fs-sm); color: var(--text); min-width: 0; }
.lf-chapters button:last-child { border-bottom: 0; }
.lf-chapters button:hover { background: var(--hover); }
.lf-chapters .num { width: 52px; flex: none; font-size: 12px; }
.lf-copy { display: flex; align-items: center; gap: 8px; padding: 5px 4px 5px 11px; border: 1px solid var(--rule); border-radius: 10px; font-size: var(--fs-sm); margin-bottom: 6px; }
.lf-copy .icon-btn { width: 28px; height: 28px; }
@media (max-width: 1080px) { .lf-view { grid-template-columns: 1fr; } }

/* posts (the post manager) */
.post-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.post-week button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 1px solid var(--rule); border-radius: 8px;
  background: rgb(var(--ov) / .03); color: var(--text-3); font-size: 11.5px; cursor: default; min-width: 0; }
.post-week button b { font-size: 17px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; line-height: 1.3; }
.post-week button small { font-size: 11px; white-space: nowrap; }
.post-week button.has { cursor: pointer; border-color: rgb(var(--bl) / .42); background: rgb(var(--bl) / .09); color: var(--text-2); }
.post-week button.has b { color: var(--text-hi); }
.post-week button.has small { color: var(--accent-text); }
.post-week button.has:hover { background: rgb(var(--bl) / .16); }
.post-list { padding: 2px 14px; }
.post-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.post-row:last-child { border-bottom: 0; }
.post-row .grow b { font-size: 13px; font-weight: 600; }
.post-time { width: 66px; flex: none; font-size: 13px; font-weight: 650; }
.post-thumb { width: 36px; height: 64px; border-radius: 5px; overflow: hidden; background: var(--media-bg); display: grid; place-items: center; color: var(--text-3); flex: none; }
.post-thumb.wide { width: 84px; height: 47px; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-nets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; min-width: 0; }
.post-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; flex: none; }
.post-views { font-size: 12.5px; color: var(--text-2); margin-right: 4px; }
.post-why { margin-top: 5px; color: var(--t-red); font-size: 12.5px; line-height: 1.45; }
.rule-list { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 8px; }
.rule-row { display: grid; grid-template-columns: minmax(80px, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.rule-row:last-child { border-bottom: 0; }
.rule-row b { font-size: 13px; font-weight: 600; }
.rule-row .input { width: auto; height: 30px; font-size: 12.5px; }
@media (max-width: 760px) {
  .post-row { flex-wrap: wrap; }
  .post-acts { width: 100%; justify-content: flex-start; }
  .post-time { width: auto; }
  .post-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rule-row { grid-template-columns: 1fr auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1500px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tile-stat:nth-child(3n+1) { border-left: 0; } .tile-stat:nth-child(n+4) { border-top: 1px solid var(--rule); } .ask-liquid .lbl-long { display: none; } .ask-liquid input { font-size: 15px; } }
@media (max-width: 1380px) {
  .editor { grid-template-columns: 280px 1fr; }
  .editor > :last-child { grid-column: 1 / -1; }
  .preset-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-grid.thirds { grid-template-columns: 1fr 1fr; }
  .dash-grid.thirds > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1180px) {
  .kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; }
  .lp-plans.three { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .lp-hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: 32px; }
  .lp-visual { max-width: 600px; width: 100%; margin: 0 auto; }
  .login-body { grid-template-columns: 1fr; justify-items: center; }
  .login-pitch { display: none; }
  .auth-card { width: min(440px, 100%); }
}
@media (max-width: 1080px) {
  .dash-grid, .dash-grid.thirds, .two-col, .two-col.cap-cols, .three-col, .capture-hero, .clip-modal, .editor, .form-grid, .review, .tier-grid, .live-body { grid-template-columns: 1fr; }
  .dash-grid.thirds > :last-child, .editor > :last-child { grid-column: auto; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .stat-strip, .stat-strip.five, .stat-strip.six { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .preset-grid, .preset-grid.four, .preset-grid.fonts { grid-template-columns: repeat(2, 1fr); }
  .review .stage-video { max-height: 70vh; margin: 0 auto; width: auto; height: 70vh; }
  .modal { padding: 18px; }
  .overlay { padding: 10px; }
  .clip-modal video { max-height: 60vh; width: auto; margin: 0 auto; }
  .tiles3 { grid-template-columns: 1fr; }
  .card-head { flex-wrap: wrap; }
  .card-head .right { flex-wrap: wrap; }
  .dropbar { flex-wrap: wrap; }
  .dropbar .sep { display: none; }
  .content { padding: 20px 20px 48px; }
  .topbar { padding: 0 14px 0 18px; }
  .main > #sysBanner, .main > #payBanner { padding: 12px 20px 0; }
  .lp-links { display: none; }
  .lp-steps { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .lp-feats { grid-template-columns: 1fr 1fr; }
  .feat.wide { grid-column: 1 / -1; }
  .feat.full { padding-right: 24px; padding-bottom: 270px; }
  .feat-orbit { top: auto; bottom: 26px; right: 50%; margin: 0 -110px 0 0; }
}
@media (max-width: 980px) { .dash-hero { grid-template-columns: 1fr; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-stat:nth-child(2n) { border-left: 1px solid var(--rule); } .tile-stat:nth-child(2n+1) { border-left: 0; } .tile-stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .pulse-card { border-left: 0; border-top: 1px solid var(--rule-2); padding: 16px 0 0; } .ob-go { margin-left: 0; }
  .pulse-card.resting .pc-chart { flex: none; height: 26px; min-height: 0; margin-top: 10px; } }
/* phones: no menu column, a floating glass tab bar instead */
@media (max-width: 767px) {
  .shell, .shell.rail { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .top-logo { display: grid; place-items: center; margin-right: 2px; flex: none; }
  .top-logo .logo { width: 28px; height: 28px; }
  .topbar { height: 56px; padding: 0 10px; gap: 4px; }
  .search { width: auto; flex: 1; min-width: 0; }
  .live-pill { padding: 0 9px; }
  .live-pill #livePillT { display: none; }
  .user-btn { padding: 2px; }
  .search .kbd, .user-btn > span:not(.avatar), .user-btn > .icon, .role-pill, .topbar .spacer { display: none; }
  .content { padding: 14px 12px 112px; }
  .main > #sysBanner, .main > #payBanner { padding: 10px 12px 0; }
  .tabbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; height: 64px; padding: 6px; gap: 2px; border-radius: 22px;
    background: var(--side-bg); border: 1px solid var(--rule-2); box-shadow: 0 16px 40px -12px rgba(7, 18, 38, .55); }
  .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; color: var(--text-3); font-size: 10.5px; font-weight: 600;
    border-radius: 16px; cursor: pointer; position: relative; transition: background var(--t-fast), color var(--t-fast); }
  .tabbar button .icon { width: 21px; height: 21px; }
  .tabbar button.on { color: #fff; background: var(--nav-on); box-shadow: none; }
  .tabbar button.on .icon { color: var(--accent-text); }
  .tabbar button .badge { position: absolute; top: 4px; right: calc(50% - 24px); min-width: 17px; height: 17px; border-radius: 6px; background: var(--tally-ink); color: #fff; font-size: 10px; font-weight: 750; display: grid; place-items: center; padding: 0 4px; }
  .toasts { left: 12px; right: 12px; bottom: 92px; }
  /* with a dialog open, toasts go to the top so they never cover its buttons */
  body:has(.overlay) .toasts { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }
  .toast { min-width: 0; max-width: none; }
  /* 16 px stops iOS zooming the page when a field is focused */
  .input, select.input, textarea.input, .ask-liquid input, .palette input, .input-icon > .input { font-size: 16px; }
  .page-head h1, .studio-title { font-size: 24px; }
  .dash { gap: 14px; }
  .hero-main { padding: 4px 0 0; }
  .hero-greet { font-size: 28px; }
  .ask-liquid { flex-wrap: wrap; }
  .ask-liquid input { flex: 1 1 calc(100% - 52px); }
  .ask-liquid .btn.primary { flex: 1; }
  .tile-stat { min-height: 0; padding: 14px 12px 12px; }
  .ts-v { font-size: 26px; }
  .ts-plan, .tile-stat[data-k="hours"] { grid-column: 1 / -1; min-height: 0; border-left: 0 !important; }
  .car-nav { display: none; }
  .live-wall { grid-template-columns: minmax(0, 1fr); }
  .carousel { grid-auto-columns: 140px; gap: 12px; }
  .sec-head .right .link { display: none; }
  .tl-item { grid-template-columns: 16px minmax(0, 1fr) 60px; }
  .tl-thumb { width: 60px; height: 34px; }
  .lp-nav { padding: 10px 14px; gap: 8px; }
  .lp-nav .btn { height: 34px; padding: 0 12px; }
  .lp-nav .brand .wordmark { font-size: 18px; }
  .lp-copy h1 { font-size: 38px; }
  .lp-lead { font-size: var(--fs-md); }
  .lp-sec { padding: 52px 16px; }
  .lp-feats, .lp-plans, .lp-plans.three { grid-template-columns: minmax(0, 1fr); }
  .lp-final { flex-direction: column; align-items: flex-start; padding: 26px 22px; margin: 12px 16px 0; }
  .lp-foot { grid-template-columns: 1fr; }
  .hv-chat { width: 36%; }
  .hide-sm { display: none; }
  .login-nav { padding: 12px 14px; }
}
@media (max-width: 560px) {
  .wall { grid-template-columns: 1fr; }
  .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 15px; }
  .table { font-size: 12.5px; }
  .table th, .table td { padding: 8px 6px; }
  .dash-head .row .btn span.lbl-long, .ask-liquid .btn .lbl-long { display: none; }
  .kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* phones keep a compact Sign in next to a shorter trial button */
  .lp-nav { gap: 6px; }
  .lp-nav .btn.ghost { padding: 0 8px; font-size: 13px; }
  .lp-nav .btn.primary { padding: 0 10px; font-size: 13px; }
  .lp-nav .btn .lbl-long { display: none; }
}
@media (min-width: 561px) { .lp-nav .btn .lbl-short { display: none; } }
@media (max-height: 600px) { .side-card { display: none; } }

/* ======================================================================= WATCH AI (the code the AI is running, on ribbons of gold;
   the ribbons, the code and the metal sheet over them are all drawn in the canvas by watch.js) */
.content.full { padding: 0; overflow: hidden; }
.content.full > .view { max-width: none; height: 100%; margin: 0; animation: none; }
.watch-stage { position: relative; height: 100%; min-height: 420px; overflow: hidden; pointer-events: none; user-select: none;
  background: radial-gradient(120% 90% at 50% 40%, #0d1424 0%, #070b15 52%, #030509 100%); }
.watch-canvas { position: absolute; inset: 0; display: block; }
.watch-hud { position: absolute; z-index: 2; left: 26px; top: 22px; max-width: calc(100% - 52px); }
.watch-title { font-size: 11.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; background-image: var(--gold);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.watch-sub { margin-top: 6px; font-size: 13px; font-weight: 500; color: rgba(246, 230, 198, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { .watch-hud { left: 16px; top: 16px; max-width: calc(100% - 32px); } }

/* ---------------------------------------------------------------- Plan & usage */
.bp-intro { padding: 26px 26px 22px; overflow: hidden; }
.bp-intro::after { background: radial-gradient(600px 220px at 85% -20%, rgb(var(--aq) / .16), transparent 70%), radial-gradient(500px 200px at 10% 120%, rgb(var(--vi) / .12), transparent 70%); }
.bp-intro h2 { margin: 10px 0 6px; font-family: var(--brandface); font-size: clamp(24px, 3vw, 32px); font-weight: 620; letter-spacing: -0.03em; }
.bp-intro p { margin: 0; max-width: 72ch; line-height: 1.55; position: relative; z-index: 1; }
.bp-intro-t { position: relative; z-index: 1; }
.bp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: stretch; }
.bp-name { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.bp-name b { font-family: var(--brandface); font-size: 30px; font-weight: 650; letter-spacing: -0.03em; }
.bp-price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; position: relative; z-index: 1; }
.bp-price .amt { font-family: var(--brandface); font-size: 22px; font-weight: 620; font-variant-numeric: tabular-nums; }
.bp-price .per { color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); }
.bp-when { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.5; position: relative; z-index: 1; }
.bp-next { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 11px; border-radius: 10px; font-size: 13px; background: rgb(var(--aq) / .07); border: 1px solid rgb(var(--aq2) / .16); position: relative; z-index: 1; }
.bp-next .icon { width: 15px; height: 15px; color: var(--accent-text); flex: none; }
.bp-trial { margin-top: 14px; padding: 12px 13px; border-radius: 12px; background: var(--glass-3); border: 1px solid var(--rule); position: relative; z-index: 1; }
.bp-bar { height: 7px; border-radius: 4px; background: rgb(var(--ov) / .12); margin-top: 7px; overflow: hidden; position: relative; z-index: 1; }
.bp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--bar); transition: width .8s var(--spring); }
.bp-bar.warm i { background: var(--amber); }
.bp-bar.hot i { background: var(--rose); }
/* the plan meter (SF.planMeter): this period's plan credits used, compact or with the numbers (detail). Its words say
   the state; amber from 80% and rose at 100% only repeat them */
.plan-meter { display: block; cursor: pointer; }
.plan-meter.detail { cursor: auto; position: relative; z-index: 1; }
.pm-l { display: block; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--text-2); }
.pm-bar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--rule-2); overflow: hidden; }
.pm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--bar); transition: width .8s var(--spring); }
.plan-meter.warn .pm-bar i { background: var(--amber); color: var(--amber); }
.plan-meter.full .pm-bar i { background: var(--rose); color: var(--rose); }
.plan-meter.warn :is(.pm-l, .pm-top b) { color: var(--amber); }
.plan-meter.full :is(.pm-l, .pm-top b) { color: var(--rose); }
.pm-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-sm); }
.pm-top b { font-weight: 650; color: var(--text); }
.pm-top span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.plan-meter.detail .pm-bar { height: 8px; margin-top: 8px; border-radius: 4px; }
.pm-facts { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.plan-meter.detail .btn { margin-top: 10px; }
.bp-actions { margin-top: 16px; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.bp-use-top { display: flex; gap: 18px; align-items: center; position: relative; z-index: 1; }
.bp-ring { width: 96px; height: 96px; flex: none; }
.bp-big { font-family: var(--brandface); font-size: 34px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.bp-big small { font-size: 16px; color: var(--text-2); font-weight: 650; }
.bp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.bp-tiers div { padding: 9px 11px; border-radius: 10px; background: var(--glass-3); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 1px; }
.bp-tiers div.on { border-color: var(--brand-ink); background: rgb(var(--aq) / .06); }
.bp-tiers span { font-size: 11.5px; color: var(--text-2); font-weight: 650; }
.bp-tiers b { font-size: 17px; font-variant-numeric: tabular-nums; }
.bp-tiers small { font-size: 11px; color: var(--text-3); }
.bp-extra { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); position: relative; z-index: 1; }
.bp-lim { position: relative; width: 116px; }
.bp-lim .pre { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 600; pointer-events: none; }
.bp-lim .input { height: 34px; padding-left: 24px; width: 100%; }
.bp-alerts { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--text-2); cursor: pointer; position: relative; z-index: 1; }
.bp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; position: relative; z-index: 1; }
.bp-plans .lp-plan { min-height: 0; padding: 22px 18px 18px; }
.bp-plans .lp-price .amt { font-size: clamp(28px, 2.4vw, 36px); }
.lp-plan.cur { border-color: rgb(var(--mi) / .4); }
.lp-plan.want { box-shadow: 0 0 0 2px rgb(var(--aq2) / .55), var(--shadow-lift); }
.lp-flag.cur { background: var(--mint); color: #fff; }
.lp-phours div.on { color: var(--accent-text); font-weight: 650; }
.bp-save { font-size: 10.5px; font-weight: 750; color: var(--mint); padding: 1px 5px; border-radius: 5px; background: rgb(var(--mi) / .14); }
.bp-fine { margin: 14px 0 0; font-size: 12px; line-height: 1.55; position: relative; z-index: 1; }
.bp-wait { display: flex; gap: 14px; align-items: center; padding: 8px 0; position: relative; z-index: 1; }
.bp-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgb(var(--ov) / .16); border-top-color: var(--aqua); animation: spin .8s linear infinite; flex: none; }
.bp-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; z-index: 1; }
.bp-pack { cursor: pointer; font: inherit; color: inherit; transition: border-color var(--t), background var(--t), transform var(--t) var(--spring), box-shadow var(--t); }
.bp-pack:hover { border-color: var(--border-3); background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.bp-pack:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bp-pack:disabled { opacity: .5; cursor: progress; transform: none; }
.bp-pack small { font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.35; }
.bp-custom { margin-top: 12px; position: relative; z-index: 1; }
.bp-custom > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.bp-custom-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bp-custom-row .bp-lim { width: 140px; }
.bp-custom small { display: block; margin-top: 6px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.bp-topup .bp-lim { width: 100%; }
.bp-topup .bp-lim .input { height: 36px; }
@media (max-width: 1080px) { .bp-top { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1081px) and (max-width: 1280px) { .bp-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bp-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bp-use-top { flex-direction: column; align-items: flex-start; } .bp-intro { padding: 20px 18px; } }

/* ======================================================================= PANELS
   Page sections are white panels on the grey ground (navy on navy in dark): a hairline, a soft shadow, room inside.
   Number strips (KPIs, the dashboard tiles) are one panel cut by hairlines. */
.card.glass, .glass.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 18px 20px; }
.card.glass .glass, .glass.card .glass { background: var(--surface-2); box-shadow: none; }
.modal .card.glass, .drawer .card.glass { padding: 16px 18px; box-shadow: none; }
.two-col, .three-col, .dash-grid { column-gap: 18px; }
.kpi.glass { background: none; border: 0; border-radius: 0; box-shadow: none; }
.kpis:has(.kpi.glass) { gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.kpi.glass { padding: 16px 18px !important; }
.kpi.glass + .kpi.glass { border-left: 1px solid var(--rule); }
.kpi.glass .icon { display: none; }
.kpi.glass .v { margin-top: 0; font-size: 28px; }
.how { padding: 2px 0 2px 22px; border-left: 1px solid var(--rule-2); }
.rv-empty { border: 1px dashed var(--rule-2); }
/* chart legends: a dot and a word, in the series colour */
.legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-2); font-weight: 510; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* moving colour for a few words that should feel special */
/* the words that used to flow in a rainbow now read plainly (a professional product does not shimmer) */
.rainbow, .bp-name b { background: none; color: inherit; -webkit-text-fill-color: currentColor; animation: none; }
@keyframes rainbowFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* video frames: the gold and turning rainbow edges are gone; the best shorts keep a calm amber score badge */
.vframe { position: relative; }
.vframe::before { content: none; }
.score.viral { color: #fde68a; border-color: rgba(251, 191, 36, .55); background: rgba(4, 10, 24, .8); animation: none; }

/* ======================================================================= CLIPS (raw moments, cut straight from the stream) */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px 18px; }
.rc { min-width: 0; animation: rise .5s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.rc-media { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--media-bg); border: 1px solid var(--rule-2);
  box-shadow: 0 18px 40px -24px rgb(var(--sh) / calc(.95 * var(--shk))); transition: transform var(--t) var(--spring), border-color var(--t), box-shadow var(--t) var(--spring); }
.rc-media img, .rc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 7, 15, .45), transparent 30%, transparent 62%, rgba(4, 7, 15, .7)); }
.rc:hover .rc-media { transform: translateY(-3px); border-color: rgb(var(--aq2) / .45); box-shadow: var(--shadow-lift); }
.rc-dur { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-size: 11px; font-weight: 700; padding: 0 6px; line-height: 19px; border-radius: 5px; background: rgba(0, 0, 0, .66); color: #fff; font-variant-numeric: tabular-nums; }
.rc-score { position: absolute; left: 8px; top: 8px; z-index: 2; }
.rc-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; z-index: 2; color: #fff;
  background: rgba(4, 10, 24, .42); border: 1px solid rgba(255, 255, 255, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: scale(.85); transition: opacity var(--t), transform var(--t) var(--spring); }
.rc-play .icon { margin-left: 2px; fill: currentColor; }
.rc:hover .rc-play { opacity: 1; transform: none; }
.rc-media:has(video) .rc-play { opacity: 0; }
.rc-row { display: flex; gap: 8px; align-items: flex-start; padding: 10px 2px 0; }
.rc-body { flex: 1; min-width: 0; }
.rc-title { font-size: var(--fs-sm); font-weight: 590; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-actions { display: flex; gap: 0; flex: none; margin: -4px -6px 0 0; }
.rc-actions .icon-btn { width: 30px; height: 30px; color: var(--text-3); }
.rc-actions .icon-btn .icon { width: 16px; height: 16px; }
.rc-actions .icon-btn.on, .rc-actions .icon-btn.on:hover { color: var(--t-gold); }
.rc-actions .icon-btn.on .icon { fill: currentColor; }
.rc-empty { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; padding: 22px; border: 1px dashed var(--rule-2); border-radius: 14px; color: var(--text-2); }
.rc-empty > .icon { color: var(--accent-text); }
.rc-empty b { color: var(--text); }
.rc-empty p { margin: 4px 0 0; font-size: var(--fs-sm); max-width: 62ch; line-height: 1.5; }
.rc-meter { display: flex; flex-direction: column; gap: 6px; min-width: 200px; font-size: 12px; color: var(--text-2); }
.rc-meter i { display: block; height: 3px; border-radius: 2px; background: rgb(var(--ov) / .14); overflow: hidden; }
.rc-meter b { display: block; height: 100%; border-radius: 2px; background: var(--bar); }
.rc-meter b.hot { background: linear-gradient(90deg, #fbbf24, #fb7185); }
.rc-player video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; display: block; border: 1px solid var(--rule-2); }
/* the free vertical version of a clip (13.4) */
.rc-vchip { position: absolute; left: 8px; bottom: 8px; z-index: 2; font-size: 10.5px; font-weight: 750; letter-spacing: .02em; padding: 0 6px; line-height: 19px; border-radius: 5px; background: var(--brand-ink); color: var(--on-brand); }
.rc-vchip.busy { background: rgba(0, 0, 0, .66); color: #fff; }
.rc-link { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 14px; }
.rc-link .grow { flex: 1 1 320px; min-width: 0; }
.rc-link-rights { gap: 8px; font-size: 12.5px; }
.rc-tw { margin: 0 0 16px; border: 1px solid var(--rule-2); border-radius: 12px; padding: 10px 14px; }
.rc-tw summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-tw-body { display: grid; gap: 12px; margin-top: 12px; }
.rc-tw-list { display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.rc-tw-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; }
.rc-tw-row img, .rc-tw-row > span:first-child { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--rule-2); }
@media (max-width: 560px) { .rc-tw-row { grid-template-columns: 72px 1fr; } .rc-tw-row > :last-child { grid-column: 1 / -1; justify-self: start; } .rc-tw-row img, .rc-tw-row > span:first-child { width: 72px; } }
.rc-player.rc-tall video { aspect-ratio: 9 / 16; width: auto; max-width: 100%; height: min(72vh, 640px); margin: 0 auto; }
.rc-sheet { margin-top: 16px; }
.rc-sheet h2 { padding-right: 0; }
.rc-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--text-2); margin-top: 12px; }
.rc-facts > * { display: inline-flex; align-items: center; gap: 6px; }
.rc-facts .icon { color: var(--text-3); }
@media (max-width: 560px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } .rc-meter { min-width: 0; width: 100%; } }
@media (max-width: 1180px) { .kpis.five .kpi.glass:nth-child(3n+1) { border-left: 0; } .kpis.five .kpi.glass:nth-child(n+4) { border-top: 1px solid var(--rule); } }
@media (max-width: 560px) { .kpis.five .kpi.glass:nth-child(n) { border-left: 1px solid var(--rule); } .kpis.five .kpi.glass:nth-child(2n+1) { border-left: 0; } .kpis.five .kpi.glass:nth-child(n+3) { border-top: 1px solid var(--rule); } }
.tiles > .skel-tile + .skel-tile { border-left: 1px solid var(--rule); }

/* ======================================================================= YOUR AI (settings) and saved setups */
.addrow { display: flex; gap: 8px; flex-wrap: wrap; }
.addrow > .input:first-child { flex: 1 1 100%; min-width: 0; }
.addrow select.input { flex: 1 1 180px; min-width: 0; }
.addrow .btn { flex: none; height: 36px; }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 3px 3px 10px; border-radius: 7px; border: 1px solid var(--rule-2);
  background: rgb(var(--ov) / .045); font-size: 12.5px; font-weight: 510; color: var(--text); max-width: 100%; }
.tag small { color: var(--text-3); font-size: 11.5px; }
.tag.muted { color: var(--text-3); text-decoration: line-through; border-style: dashed; }
.tag button { width: 22px; height: 22px; border: 0; border-radius: 5px; background: none; color: var(--text-3); cursor: pointer; display: grid; place-items: center; flex: none; }
.tag button:hover { background: var(--hover); color: var(--text-hi); }
.tag button .icon { width: 12px; height: 12px; }
.phrase-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 280px; overflow: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: rgb(var(--ov) / .2) transparent; }
.phrase { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--rule); background: none; color: var(--text-2); font-size: 12.5px; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.phrase:hover { border-color: var(--rule-3); color: var(--text-hi); background: var(--hover); }
.phrase.muted { text-decoration: line-through; color: var(--text-3); border-style: dashed; }
.wrow { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.6fr) 110px; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.wrow:last-child { border-bottom: 0; }
.wrow b { display: block; font-size: 13.5px; font-weight: 590; }
.wrow small { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.wrow .wv { text-align: right; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-reset { display: flex; justify-content: flex-end; margin-top: 18px; }
.page-reset .link { color: var(--text-2); font-weight: 510; }
.page-reset .link:hover { color: var(--text-hi); }
.setups-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.setups-row b { display: block; font-size: var(--fs-sm); font-weight: 590; }
.setups-row small { color: var(--text-3); font-size: 12px; }
#setBody > .card.glass + .card.glass, #setBody > .two-col + .card.glass, #setBody > .card.glass + .two-col, #setBody > .two-col + .two-col { margin-top: 20px; }
@media (max-width: 760px) { .wrow { grid-template-columns: minmax(0, 1fr) 90px; } .wrow input[type=range] { grid-column: 1 / -1; grid-row: 2; } }

/* ======================================================================= PRICING: AI watch time on each plan card
   "Watches up to 18 h a day": the hours a day the plan covers on Lite, the month it adds up to, and the other tiers on a
   quiet line (the member's own tier in aqua on Plan & usage). Flat, between hairlines, like the rest of 12.2. */
.lp-watch { margin-top: 16px; padding: 13px 0 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lp-wk { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lp-wv { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.lp-wv b { font-family: var(--brandface); font-size: 38px; font-weight: 640; letter-spacing: -0.04em; line-height: 1; color: var(--text-hi); }
.lp-wv span { font-size: 14px; font-weight: 560; color: var(--text-2); }
.lp-wm { margin-top: 7px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.lp-wt { margin-top: 3px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.lp-wm.on, .lp-wt .on { color: var(--accent-text); font-weight: 560; }
.bp-plans .lp-wv b { font-size: clamp(30px, 2.6vw, 36px); }
/* the marketing headlines keep one still line in the brand gradient */
.lp-copy h1 .rainbow, .login-pitch .hero-title .rainbow { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.learned { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.learned li { position: relative; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.learned li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

/* the AI tier in the menu: Ultra in the brand gradient, Standard in the brand teal, both still (13.8) */
.ultra-word { display: inline-flex; font-weight: 720; letter-spacing: .005em; }
.ultra-word i { font-style: normal; display: inline-block; background-image: var(--brand); background-size: 900% 100%; background-position: calc(var(--k, 0) * 12.5%) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.side-card.ultra { border-color: rgb(var(--vi) / .45); }
.side-card.ultra .bolt { color: #fff; background: linear-gradient(140deg, #3b82f6, #8b5cf6); border-color: transparent; }
.side-card.standard { border-color: rgb(var(--aq) / .38); }
.side-card.standard:hover { border-color: rgb(var(--aq) / .6); }
.side-card.standard .bolt { color: #fff; background: linear-gradient(140deg, #14b8a6, #2563eb); border-color: transparent; }
.std-word { font-weight: 700; color: var(--accent-text); }

/* ======================================================================= STORAGE EXPIRY (the chip, the Keep switch)
   A chip when something expires within a week or the creator was warned, "Kept" once kept, and a switch that looks like
   the settings switches. The chip may wrap: its words are the point. */
.chip.exp { height: auto; min-height: 20px; white-space: normal; line-height: 1.3; align-items: flex-start; text-align: left; }
.chip.exp > .icon { flex: none; margin-top: 1px; }
.chip.exp.green > .icon { color: var(--mint); }
.keep-slot { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 6px 10px; min-width: 0; }
.keep-slot:empty { display: none; }
.keep-slot.v-page { margin-top: 12px; }
.keep-slot.v-card, .keep-slot.v-mini { margin-top: 7px; }
.keep-slot.v-card .chip.exp, .keep-slot.v-mini .chip.exp { font-size: 11.5px; }
.lf-rec .keep-slot.v-page { margin-top: 0; }
.keep-tog { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px 0 7px; border-radius: 9px; border: 1px solid var(--rule-2);
  background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast); }
.keep-tog:hover { background: rgb(var(--ov) / .11); border-color: var(--rule-3); }
.keep-tog:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.keep-tog:disabled { opacity: .5; cursor: progress; }
.keep-tog .kt { position: relative; width: 30px; height: 17px; flex: none; border-radius: 9px; background: rgb(var(--ov) / .16); box-shadow: inset 0 1px 2px rgb(var(--sh) / calc(.35 * var(--shk))); transition: background var(--t), box-shadow var(--t); }
.keep-tog .kt::after { content: ''; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 2px rgb(var(--sh) / calc(.45 * var(--shk))); transition: transform var(--t) var(--spring), background var(--t); }
.keep-tog[aria-checked="true"] .kt { background: var(--switch-on); box-shadow: none; }
.keep-tog[aria-checked="true"] .kt::after { transform: translateX(13px); background: #fff; }
.keep-slot.v-card .keep-tog { height: 26px; font-size: 12px; padding: 0 9px 0 5px; }
.exp-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.exp-note > .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--amber); }
.quick button:disabled { opacity: .45; cursor: not-allowed; }
.quick button:disabled:hover { border-color: var(--rule-2); background: var(--surface); color: var(--text); }
.bp-keep { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.bp-keep > .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--text-3); }
@media (max-width: 560px) { .keep-slot.v-card .exp-more, .keep-slot.v-mini .exp-more { display: none; } }
@media (prefers-reduced-motion: reduce) { .keep-tog .kt, .keep-tog .kt::after { transition: none; } }
/* Admin, Platform: the home page gallery card (showcase.py) */
.sc-wrap { margin-top: 20px; }
.sc-lead { margin: 0 0 14px; line-height: 1.5; }
.sc-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-item, .sc-res { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px;
  border-radius: 12px; border: 1px solid var(--rule); background: var(--glass-3); }
.sc-poster { width: 40px; aspect-ratio: 9 / 16; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: #050b16; color: var(--text-3); }
.sc-poster.sm { width: 30px; }
.sc-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-meta { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sc-meta b { font-size: 13.5px; }
.sc-meta small { font-size: 12px; }
.sc-name { height: 30px; max-width: 260px; font-size: 13px; }
.sc-tools { display: flex; gap: 2px; }
.sc-tools .icon-btn:disabled { opacity: .35; cursor: default; }
.sc-card .flip { transform: rotate(180deg); }
.sc-empty { padding: 14px; border: 1px dashed var(--rule); border-radius: 12px; font-size: 13px; }
.sc-results { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; margin: 8px 0 18px; }
.sc-hint { font-size: 12.5px; padding: 6px 2px; }
.sc-foot { justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.sc-foot small { max-width: 520px; line-height: 1.5; }
@media (max-width: 640px) { .sc-name { max-width: none; } .sc-foot > .row { width: 100%; } .sc-foot .btn { flex: 1; } }

/* the free trial's minutes per AI tier and the recommended settings (Plan & usage) */
.bp-tips { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bp-tips .ok-line { display: inline-flex; gap: 6px; align-items: center; color: var(--t-green); }

/* Ask box commands: what a plan will do, and its result */
.ask-plan { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; }
.ask-step b { display: block; }
.ask-consent { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ask-plan .ok-line { display: inline-flex; gap: 6px; align-items: center; color: var(--t-green); }

/* ======================================================================= 13.8: the theme switch (account menu, More) */
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 2px 6px 8px; padding: 3px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); }
.theme-pick button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.theme-pick button:hover { color: var(--text); }
.theme-pick button.on { background: var(--surface); color: var(--text-hi); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border-2); }
.theme-pick .icon { width: 13px; height: 13px; }

/* ======================================================================= 13.8: the illustrated icons (static/assets/icons)
   Glossy 3D pictures for features, steps, plans, empty states and Refer & earn; line icons stay on controls. */
.art { display: block; flex: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.feat-art { width: 64px; height: 64px; margin: -4px 0 0 -6px; }
.step-art { width: 56px; height: 56px; margin: 0 0 12px -4px; }
.plan-art { width: 52px; height: 52px; margin: -6px 0 10px -4px; }
.empty-art { width: 88px; height: 88px; }
.empty-art.sm { width: 56px; height: 56px; }
.rv-empty:has(.empty-art), .rc-empty:has(.empty-art) { gap: 18px; padding: 22px 26px; }
.card.glass.earn-link { position: relative; padding-right: 140px; min-height: 128px; }
.earn-art { position: absolute; right: 22px; top: 16px; width: 96px; height: 96px; }
@media (max-width: 640px) { .card.glass.earn-link { padding-right: 20px; } .earn-art { display: none; } }

/* ======================================================================= 13.8: the free way in on the home page
   A paste-a-link box under the hero's buttons (a clip goes through a free sign-up to Clips, a VOD to the moment
   finder) and a Free account row under the plans. */
.lp-try { margin-top: 22px; max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.lp-try label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.lp-try-row { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 10px; box-shadow: var(--shadow); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.lp-try-row:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus); }
.lp-try-row > .icon { color: var(--text-3); }
.lp-try-row input { flex: 1; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; }
.lp-try-row input::placeholder { color: var(--text-3); }
.lp-try-hint { font-size: 12.5px; line-height: 1.45; color: var(--t-red); }
.lp-try-hint:empty { display: none; }
.lp-plans.three .lp-free { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.lp-free .lp-free-t { flex: 1 1 420px; min-width: 0; }
.lp-free .lp-pline { min-height: 0; max-width: 760px; }
@media (max-width: 767px) { .lp-try-row { flex-wrap: wrap; padding: 6px; } .lp-try-row input { font-size: 16px; flex-basis: calc(100% - 30px); } .lp-try-row .btn { width: 100%; } }

/* ======================================================================= 13.8: feature pictures on the home page
   Photoreal, fictional streamers made for EasyClippers (static/assets/scenes), with the product's own UI on top. */
.fx-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0b1426;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 18px 36px -20px rgba(7, 18, 38, .6); }
.fx-frame > img, .fx-phone > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 7, 15, .32), transparent 30%, transparent 68%, rgba(4, 7, 15, .5)); }
.fx-frame > .chip.live { position: absolute; left: 12px; top: 12px; z-index: 2; }
.fx-tc { position: absolute; left: 62px; top: 12px; z-index: 2; height: 19px; padding: 0 6px; border-radius: 5px; background: rgba(0, 0, 0, .55); color: #fff;
  font: 650 11px/19px var(--font); font-variant-numeric: tabular-nums; }
.fx-flag { position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px;
  background: #2ee6d6; color: #03121c; font: 700 12px/1 var(--font); animation: fxFlag 4.8s var(--spring) infinite; }
.fx-flag .icon { width: 13px; height: 13px; stroke-width: 2.3; }
@keyframes fxFlag { 0%, 8% { opacity: 0; transform: translateY(-6px); } 14%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-4px); } }
/* the stream's timeline: the moments the AI pinned along it */
.fx-track { position: relative; height: 96px; margin-top: 12px; }
.fx-line { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgb(var(--aq) / .3), rgb(var(--bl) / .3)); }
.fx-mark { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; width: 120px;
  text-align: center; animation: rise .5s var(--spring) backwards; animation-delay: calc(var(--i) * 120ms + 200ms); }
.fx-mark::before { content: ''; width: 12px; height: 12px; border-radius: 50%; margin-top: 7px; background: var(--brand-ink); box-shadow: 0 0 0 3px var(--surface); }
.fx-mark img { width: 34px; height: 46px; border-radius: 6px; object-fit: cover; margin-top: 5px; box-shadow: 0 0 0 1px var(--border-2); }
.fx-mark b { font-size: 11.5px; font-weight: 650; color: var(--text); white-space: nowrap; }
.fx-mark small { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.feat.wide:has(.fx-live) { padding-bottom: 22px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 28px; align-content: start; }
.feat.wide:has(.fx-live) > :not(.fx) { grid-column: 1; }
.feat.wide:has(.fx-live) > .fx { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
/* a vertical frame: the reaction itself, or facecam over gameplay */
.fx-phone { position: relative; flex: none; width: 112px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0b1426;
  border: 2px solid rgba(10, 22, 44, .95); box-shadow: 0 0 0 1px rgb(var(--ov) / .2), 0 16px 34px -16px rgba(7, 18, 38, .6); }
.fx-split { display: flex; flex-direction: column; }
.fx-split > img { position: relative; inset: auto; height: 50%; }
.fx-split > img:first-child { object-position: 50% 28%; border-bottom: 1px solid rgba(0, 0, 0, .5); }
.fx-caps { display: flex; gap: 16px; align-items: center; }
.fx-caps .mk-cap { position: absolute; left: 6px; right: 6px; top: 60%; z-index: 2; text-align: center; font-size: 13px; line-height: 1.1; }
.fx-caps .mk-tags { flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-top: 0; }
.mk-thumb { position: relative; overflow: hidden; background: #0b1426; }
.mk-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-thumb::after { z-index: 1; }
.fx-ask { display: flex; flex-direction: column; gap: 10px; }
.fx-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-style { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #0b1426; }
.fx-style img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-style b { position: absolute; left: 4px; right: 4px; bottom: 10px; text-align: center; color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 2px 0 #000;
  -webkit-text-stroke: .6px #000; }
.fx-style.s1 b { font-family: 'cf-anton', var(--font); letter-spacing: .02em; }
.fx-style.s2 b { font-family: 'cf-bangers', var(--font); color: #fde047; letter-spacing: .04em; }
.fx-style.s3 b { font-family: 'cf-montserrat', var(--font); font-weight: 800; font-size: 12px; left: 10px; right: 10px; padding: 3px 0; border-radius: 5px;
  background: rgba(7, 18, 38, .85); -webkit-text-stroke: 0; text-shadow: none; }
/* Watch AI: what the AI sees and hears, live */
.feat.full:has(.fx-ai) { padding-right: 52%; min-height: 300px; }
.fx-ai { position: absolute; right: 22px; top: 22px; bottom: 22px; width: 47%; z-index: 1; }
.fx-ai .fx-frame { height: 100%; aspect-ratio: auto; }
.fx-box { position: absolute; left: 17%; top: 12%; width: 27%; height: 56%; z-index: 2; border: 2px solid #2ee6d6; border-radius: 10px; animation: fxTrack 6s ease-in-out infinite; }
.fx-box i { position: absolute; left: -2px; top: -22px; padding: 2px 6px; border-radius: 5px 5px 5px 0; background: #2ee6d6; color: #03121c; font: 700 10.5px/1.4 var(--font); font-style: normal; }
@keyframes fxTrack { 0%, 100% { transform: none; } 50% { transform: translate(5%, 3%); } }
.fx-say { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 2; padding: 5px 10px; border-radius: 8px; background: rgba(7, 18, 38, .82); color: #fff;
  font: 650 12.5px/1.3 var(--font); white-space: nowrap; }
.fx-hud { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.fx-hud span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 7px; background: rgba(7, 18, 38, .8); color: #eaf2fc; font: 600 11px/1 var(--font); }
.fx-hud i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.fx-hud i.hot { background: #fbbf24; }
@media (max-width: 1080px) {
  .feat.wide:has(.fx-live) { grid-template-columns: minmax(0, 1fr); }
  .feat.wide:has(.fx-live) > .fx { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .feat.full:has(.fx-ai) { padding-right: 24px; padding-bottom: 24px; }
  .fx-ai { position: relative; right: auto; top: auto; bottom: auto; width: 100%; margin-top: 18px; }
  .fx-ai .fx-frame { height: auto; aspect-ratio: 16 / 9; }
  .feat.full:has(.fx-ai) { min-height: 0; }
}
@media (max-width: 560px) { .fx-mark { width: 90px; } .fx-mark b { font-size: 10.5px; white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .fx-flag, .fx-box { animation: none; } .fx-mark { animation: none; } }

/* 13.9 posting */
/* the networks' own marks (pages.js NET_SVG) inside their colour squares, and small on a post's chips */
.acct-net .net-ico { width: 62%; height: 62%; display: block; }
.chip .acct-net { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; border-radius: 4px; }
/* Coming up as a week or a month (posts.js): a column per day, a post per line, drag a post to another day */
.cal-head { font-size: 13.5px; color: var(--text-2); }
.cal-prev svg { transform: rotate(90deg); }
.cal-next svg { transform: rotate(-90deg); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { font-size: 11.5px; color: var(--text-3); text-align: center; padding: 2px 0; }
.cal-day { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 96px; padding: 6px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--surface); }
.cal-week .cal-day { min-height: 260px; }
.cal-day.today { border-color: rgb(var(--bl) / .55); box-shadow: inset 0 0 0 1px rgb(var(--bl) / .25); }
.cal-day.out { opacity: .55; }
.cal-day.past { background: var(--surface-2); }
.cal-day.drop { border-color: rgb(var(--aq) / .8); background: rgb(var(--aq) / .08); }
.cal-num { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 650; color: var(--text-2);
  font-variant-numeric: tabular-nums; }
.cal-add { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-3); cursor: pointer; }
.cal-add:hover, .cal-add:focus-visible { background: rgb(var(--ov) / .08); color: var(--text); }
.cal-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 4px; width: 100%; min-width: 0;
  padding: 4px 6px; border: 1px solid var(--rule); border-left: 3px solid var(--blue); border-radius: 6px; background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 11.5px; text-align: left; cursor: grab; }
.cal-item small { grid-column: 1 / -1; color: var(--text-3); font-size: 10.5px; }
.cal-item .acct-net { width: 14px; height: 14px; border-radius: 3px; }
.cal-item:disabled { cursor: default; opacity: .7; }
.cal-item.dragging { opacity: .45; }
.cal-more { font-size: 11.5px; text-align: left; }
.cal-aqua { border-left-color: var(--aqua); } .cal-violet { border-left-color: var(--violet); } .cal-blue { border-left-color: var(--blue); }
.cal-amber { border-left-color: var(--amber); } .cal-mint { border-left-color: var(--mint); } .cal-rose { border-left-color: var(--rose); }
.cal-cyan { border-left-color: var(--cyan); }
@media (max-width: 720px) {
  .cal-month .cal-item { grid-template-columns: minmax(0, 1fr); }
  .cal-month .cal-item .acct-net, .cal-month .cal-item .ellipsis, .cal-month .cal-item small { display: none; }
  .cal-week { grid-template-columns: minmax(0, 1fr); }
  .cal-week .cal-dow { display: none; }
  .cal-week .cal-day { min-height: 0; }
}
/* 13.9 clips */
/* select mode on the Clips page (EC-040): a tick on each card, the picked ones outlined; a pasted link being fetched */
.rc .pick { position: absolute; top: 8px; right: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .85);
  background: rgba(4, 10, 24, .6); color: #fff; display: none; place-items: center; }
.selecting .rc .pick { display: grid; }
.rc.picked .rc-media { border-color: var(--brand-ink); box-shadow: 0 0 0 2px var(--brand-ink); }
.rc.picked .pick { background: var(--aqua); border-color: #fff; color: var(--on-accent); }
.rc-wait .rc-media { cursor: default; }
.rc-wait .rc-play { opacity: 1; transform: none; }
.rc-wait .rc-meta { white-space: normal; }
/* 13.9 editing */
/* the Shorts Editor: the timeline zooms and scrolls (EC-109), a removed pause is a hatched gap inside its take's box
   (EC-110), the footage kept around a composed short is shaded (EC-042), the frame of the finished short sits over the
   footage and the live preview draws the edit (EC-043) */
.etl-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.etl .cut .gap { position: absolute; top: 0; bottom: 0; cursor: pointer; background: repeating-linear-gradient(135deg, rgba(4, 10, 24, .72) 0 4px, rgba(4, 10, 24, .38) 4px 8px); }
.etl .cut .gap.off { background: transparent; border-left: 1px dashed rgba(255, 255, 255, .7); border-right: 1px dashed rgba(255, 255, 255, .7); }
.etl .hz { position: absolute; top: 0; height: 54px; border-radius: 9px; background: rgba(4, 10, 24, .45); border: 1px dashed rgba(255, 255, 255, .35); pointer-events: auto; }
.src-wrap { position: relative; overflow: hidden; border-radius: 12px; }
.src-wrap .crop { position: absolute; border: 2px dashed rgba(255, 255, 255, .85); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(4, 10, 24, .42); cursor: ew-resize; touch-action: none; }
.src-wrap .crop.own { border-style: solid; border-color: #fff; }
.cap-preview.ed-prev { background: #000; max-height: none; width: 100%; }
.cap-preview.ed-prev canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 13.12: an example in an empty box reads as an example, not as text already typed. Placeholders used --text-3, nearly
   the text colour, so the Editor's prompt and Settings' "What counts as a moment" looked filled in (seen Nov 4 2026).
   13.14.5: #6b7a90 measured 4.36:1 on white, under the 4.5:1 minimum; #64738a is 4.8:1 and still reads lighter than
   typed text. */
:root { --placeholder: #64738a; }
:root[data-theme="dark"] { --placeholder: #8796ad; }
:root :is(input, textarea)::placeholder { color: var(--placeholder); opacity: 1; }