/* REZO212 design layer (2.9). Loaded after site.css + studio.css (+ hub.css) on every page except the editor.
   It changes the look only, never the placements: tokens for a dark theme (the default, owner 2026-11-04) and a light one (header toggle, kept in localStorage "rz-theme"), the new type,
   pill buttons, layered shadows, colour-blocked cards, and the wireframe background (app.js draws it).
   The guide's own cover and steps keep their original look: they sit inside `.legacy`, which restores the old tokens. */

/* ---------- tokens ---------- */
:root {
  --bg: #e8e6e1;        /* ground: a shade under white, so real white reads as white */
  --bg-2: #dfddd7;
  --surface: #ffffff;   /* cards, buttons, inputs */
  --surface-2: #f4f3f0;
  --card: var(--surface);
  --card-2: var(--surface-2);
  --panel: rgba(255, 255, 255, .92);
  --line: rgba(15, 16, 19, .1);
  --line-2: rgba(15, 16, 19, .16);
  --fg: #0f1013;
  --muted: #565b66;
  --dim: #62666f;
  --amber: #2e4bff;     /* the accent (old name kept so every rule follows it) */
  --amber-2: #4a63ff;
  --ink: #ffffff;       /* text on the accent */
  --acc: 46, 75, 255;   /* the accent as r, g, b */
  --ov: 15, 16, 19;     /* "a little of the opposite colour" overlays */
  --warn: #c2410c;
  --solid: #0f1013; --on-solid: #ffffff;
  --dark: #0f1013;      /* text on the bright colours, both themes */
  --lime: #d6ff3d; --blue: #2e4bff; --pink: #ff3d8b; --orange: #ff7a2f; --violet: #7b5cff; --mint: #b9f5d8; --blurple: #5865f2;
  --nav-bg: rgba(232, 230, 225, .82);
  --fx: 15, 16, 19;
  --sh: 15, 16, 19;
  --edge: 0 0 #0000;
  --shadow-1: var(--edge), 0 1px 1px rgba(var(--sh), .06), 0 2px 6px -1px rgba(var(--sh), .08), 0 10px 24px -12px rgba(var(--sh), .16);
  --shadow-2: var(--edge), 0 1px 2px rgba(var(--sh), .08), 0 10px 24px -8px rgba(var(--sh), .18), 0 32px 64px -28px rgba(var(--sh), .32);
  --display: "Bricolage Grotesque", "Bricolage Fallback", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
:root:not([data-theme="light"]) {
  --bg: #0b0c0f; --bg-2: #111318; --surface: #1a1c23; --surface-2: #262a33; --panel: rgba(26, 28, 35, .94);
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .15); --fg: #f1f2f4; --muted: #a4a9b4; --dim: #8a909b;
  --amber: #d6ff3d; --amber-2: #e4ff7a; --ink: #0f1013; --acc: 214, 255, 61; --ov: 255, 255, 255; --warn: #ffb84c;
  --solid: #f1f2f4; --on-solid: #0e0f13; --nav-bg: rgba(14, 15, 19, .78); --fx: 214, 220, 255; --sh: 0, 0, 0;
  --edge: inset 0 0 0 1px rgba(255, 255, 255, .055), inset 0 1px 0 rgba(255, 255, 255, .07); color-scheme: dark; }

/* the guide's own cover and steps: the original look, in both themes */
.legacy {
  --bg: #0b0a09; --bg-2: #12100e; --panel: rgba(17, 15, 13, .88); --line: #2a2622; --line-2: #3a342e; --fg: #f2efe8;
  --muted: #9b938a; --dim: #6a645d; --amber: #ffb84c; --amber-2: #ffcf85; --ink: #1a1206; --card: #15120f; --card-2: #1b1714;
  --acc: 255, 184, 76; --ov: 255, 255, 255; --warn: #ffb84c; --surface: #15120f;
  --display: "Rajdhani", "Rajdhani Fallback", "Arial Narrow", sans-serif; --body: "Barlow", "Barlow Fallback", system-ui, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
  color-scheme: dark; background: var(--bg); color: var(--fg); font-family: var(--body);
}

/* ---------- base ---------- */
html, body { background: var(--bg); }
body { color: var(--fg); font-family: var(--body); font-size: 16px; }
body::before { background: var(--bg); }
body::after, .fx-glow, .fx-spark { display: none !important; } /* the old drifting glow and click sparks */
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline-color: var(--amber); }
#fx { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
main, .app-foot, #app-footer { position: relative; z-index: 1; }

:is(h1, h2, h3, h4):not(.legacy *) { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: -.03em; line-height: .95; }
h1:not(.legacy *) { font-size: clamp(42px, 6.2vw, 96px); }
h2:not(.legacy *) { font-size: clamp(32px, 4.2vw, 60px); }
h3:not(.legacy *) { letter-spacing: -.02em; }
:is(h1, h2, h3) em:not(.legacy *) { font-style: normal; color: inherit; }
.eyebrow:not(.legacy *) { font-family: var(--mono); letter-spacing: .06em; }
.eyebrow:not(.legacy *) b { color: var(--fg); font-weight: 600; }
.lede:not(.legacy *) { font-size: clamp(16px, 1.3vw, 18px); }
.k:not(.legacy *) { font-family: var(--mono); letter-spacing: .06em; }
.k.amber:not(.legacy *) { color: var(--fg); animation: none; background: none; -webkit-text-fill-color: currentColor; }
.crumbs:not(.legacy *) { font-family: var(--mono); letter-spacing: .06em; }
.c-amber:not(.legacy *) { color: var(--amber); }
a:not(.legacy *) { text-underline-offset: 3px; }

/* ---------- buttons: pills; solid ink for the main one; no metal, no shine ---------- */
.btn:not(.legacy *) { min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--surface); color: var(--fg); font: 600 15px/1 var(--body); letter-spacing: 0; text-transform: none; box-shadow: var(--shadow-1); transition: transform .2s, box-shadow .2s, background .2s; }
.btn:not(.legacy *):hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: transparent; }
.btn.primary:not(.legacy *) { background: var(--solid); color: var(--on-solid); }
.btn.primary:not(.legacy *)::after { display: none; }
.btn.ghost:not(.legacy *) { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:not(.legacy *):hover { box-shadow: inset 0 0 0 1px var(--muted); }
:is(.btn.small, .btn.sm):not(.legacy *) { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn.ok:not(.legacy *) { color: #15803d; } .btn.danger:not(.legacy *) { color: #dc2626; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .35); background: transparent; }
:root:not([data-theme="light"]) .btn.ok { color: #4ade80; } :root:not([data-theme="light"]) .btn.danger { color: #f87171; }
.btn[aria-disabled="true"]:not(.legacy *) { box-shadow: inset 0 0 0 1px var(--line-2); background: transparent; color: var(--muted); }
.linkbtn:not(.legacy *) { color: var(--fg); }

/* ---------- header, menu, footer ---------- */
.app-top { background: var(--nav-bg); border-bottom: 1px solid var(--line); }
.logo { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
.logo .wm { letter-spacing: -.01em; } .logo .wm b { color: inherit; }
.rzm { fill: var(--fg) !important; }
.logo:hover .rzm { fill: var(--amber) !important; }
.navlinks a { font: 500 15px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); padding: 9px 14px; border-radius: 999px; }
.navlinks a::after { display: none; }
.navlinks a:hover, .navlinks a.on { color: var(--fg); background: rgba(var(--ov), .06); }
.who { border: 0; background: var(--surface); box-shadow: var(--shadow-1); }
.who:hover { box-shadow: var(--shadow-2); }
.who .av { background: var(--solid); color: var(--on-solid); font-family: var(--display); }
.who-t b { font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: 0; }
.who-t small { font-family: var(--mono); letter-spacing: 0; }
.theme-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-1); cursor: pointer; }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .sun { display: none; }
:root:not([data-theme="light"]) .theme-btn .sun { display: block; } :root:not([data-theme="light"]) .theme-btn .moon { display: none; }
.menu-btn { border: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); }
.mmenu { background: var(--bg); }
.mmenu nav a { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: -.03em; }
.mmenu nav a:hover { color: var(--amber); }
.app-foot { border-top: 1px solid var(--line); }
.app-foot a { color: var(--muted); }
.app-foot a:hover { color: var(--fg); }

/* ---------- surfaces: white cards with layered shadows ---------- */
:where(.panel, .plan, .tile, .scon, .gd-card, .pc, .tz-box, .tbl-wrap, .status, .qa details, .lcard, .notice, .demand, .cm-notif, .rl-me, .hb-stats, .rl-rules, .hb-admin, .tp-pack, .tool, .proj, .done-box, .form-block, .cmp-open, .cmp, .cm-nudge, .soon-box, .gd-sb, .modal .box, .drawer, .kpi, .cg, .buybox):not(.legacy *):not(.rz-x) {
  border-color: transparent; background: var(--surface); box-shadow: var(--shadow-1);
}
:where(.panel, .plan, .tile, .scon, .tz-box, .status, .soon-box, .gd-sb, .modal .box, .form-block, .done-box):not(.legacy *):not(.rz-x) { border-radius: 26px; }
:where(.gd-card, .pc, .tbl-wrap, .qa details, .lcard, .notice, .demand, .cm-notif, .rl-me, .hb-stats, .rl-rules, .hb-admin, .tp-pack, .cmp-open, .cmp, .cm-nudge, .kpi, .cg):not(.legacy *):not(.rz-x) { border-radius: 20px; }
:where(.tile, .pc, .lcard, .gd-card, .proj):not(.legacy *):hover { box-shadow: var(--shadow-2); }
.panel.hl:not(.legacy *) { background: var(--surface); box-shadow: inset 0 0 0 2px rgba(var(--acc), .5), var(--shadow-1); }
.notice:not(.legacy *) { border: 0; }
.notice.bad:not(.legacy *) { box-shadow: inset 0 0 0 2px rgba(220, 38, 38, .35), var(--shadow-1); }
.scon:not(.legacy *)::before, .gd-top::before { display: none; }
.badge:not(.legacy *), .pill:not(.legacy *), .chip:not(.legacy *) { border-radius: 999px; }
.chip:not(.legacy *) { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-1); font-family: var(--body); letter-spacing: 0; text-transform: none; }
.pill:not(.legacy *) { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.tile .tags span:not(.legacy *) { border-color: rgba(var(--ov), .18); }
.tbl th:not(.legacy *) { font-family: var(--mono); letter-spacing: .04em; }
.qa summary:not(.legacy *) { font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: -.01em; }

/* forms */
.fld label:not(.legacy *) { font-family: var(--mono); letter-spacing: .04em; }
:is(.fld input, .fld select, .fld textarea, .hub-q, .cm-search input):not(.legacy *) { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; color: var(--fg); }
#q { background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg); }
:is(.fld input, .fld select, .fld textarea):focus:not(.legacy *) { border-color: var(--fg); box-shadow: 0 0 0 4px rgba(var(--ov), .08); }
.pick label:not(.legacy *) { background: var(--surface); border-color: transparent; border-radius: 18px; box-shadow: var(--shadow-1); }
.pick label:has(input:checked):not(.legacy *) { box-shadow: inset 0 0 0 2px var(--fg), var(--shadow-1); background: var(--surface); }
.pick .rd:not(.legacy *) { border-color: var(--line-2); }
.chips label:not(.legacy *) { border-radius: 999px; background: var(--surface); border-color: transparent; box-shadow: var(--shadow-1); }
.chips label:has(input:checked):not(.legacy *) { background: var(--solid); color: var(--on-solid); }

/* tabs and segmented controls: the open one is solid */
:is(.sc-tabs-in, .gd-tabs-in, .bill-seg, .seg, .cm-sort):not(.legacy *) { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-1); }
.sc-tabs:not(.legacy *) { background: linear-gradient(var(--bg) 70%, transparent); }
.sc-glide, .gd-glide, .hb-glide { background: var(--solid) !important; box-shadow: none !important; }
.sc-tab[aria-selected="true"], .gd-tab.on { color: var(--on-solid) !important; }
.sc-tab, .gd-tab { font-family: var(--body) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
.gd-tab.on { background: var(--solid) !important; box-shadow: none !important; }
.gd-tab.on .gd-ic { stroke: var(--on-solid); }
.sc-tab[aria-selected="true"] .n { color: var(--on-solid); opacity: .7; }
.bill-seg label { font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: 0; }
.bill-seg label:has(input:checked) { background: var(--solid); color: var(--on-solid); }
.bill-seg em { background: var(--lime); color: var(--dark); }
.cm-sort button[aria-pressed="true"] { background: var(--solid) !important; color: var(--on-solid) !important; }

/* ---------- colour cards ---------- */
.tile.c-lime, .tile.c-blue, .tile.c-hub { border: 0; color: var(--dark); overflow: hidden; }
.tile.c-lime { --sh: 112, 140, 0; background: var(--lime); }
.tile.c-blue { --sh: 20, 34, 170; background: var(--blue); color: #fff; }
.tile.c-hub { --sh: 190, 30, 90; background: var(--pink); color: var(--dark); }
:is(.tile.c-lime, .tile.c-blue, .tile.c-hub) :is(p, .k, .go) { color: inherit; }
:is(.tile.c-lime, .tile.c-blue, .tile.c-hub) .go { font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none; }
:is(.tile.c-lime, .tile.c-blue, .tile.c-hub)::before, :is(.tile.c-lime, .tile.c-blue, .tile.c-hub)::after { display: none; }
.tile.locked.c-blue { filter: none; }
.tile .obj { position: relative; height: 210px; margin: -24px -22px 4px; }
.tile .obj canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile .obj .ph3 { position: absolute; left: 50%; top: 52%; width: 96px; height: 96px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 45%, rgba(0, 0, 0, .12) 75%); filter: blur(.5px); transition: opacity .6s; }
.tile .obj.on .ph3 { opacity: 0; }
:not(.c-lime):not(.c-blue):not(.c-hub).tile::before, :not(.c-lime):not(.c-blue):not(.c-hub).tile::after { border-color: var(--line-2); opacity: .5; }
.tile .go:not(.legacy *) { font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); }

/* the plans: Prime lime (the Academy's colour), Ultra ink with the chrome ring */
.plan:not(.legacy *) { border: 0; color: var(--fg); overflow: hidden; }
.plans.two .plan:first-child { --sh: 112, 140, 0; background: var(--lime); color: var(--dark); }
.plans.two .plan:first-child :is(.sub, li.no, .price span) { color: rgba(15, 16, 19, .62); }
.plans.two .plan:first-child .btn { background: var(--dark); color: #fff; }
.plans.two .plan:first-child .k { color: var(--dark); }
.plans.two .plan.best { --sh: 15, 16, 19; background: #0f1013; color: #fff; box-shadow: var(--shadow-2); }
:root:not([data-theme="light"]) .plans.two .plan.best { background: #1d2027; }
.plans.two .plan.best :is(.k, .sub, .price span) { color: rgba(255, 255, 255, .7); }
.plans.two .plan.best .btn { background: var(--lime); color: var(--dark); }
.plans.two .plan.best .flag { background: var(--lime); color: var(--dark); border-radius: 999px; font-family: var(--mono); }
.plan:not(.legacy *) li::before { color: currentColor; opacity: .55; }
.plan h3:not(.legacy *) { font-size: 44px; }
.plan .price b:not(.legacy *) { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; }
.plan .mini { position: absolute; right: 8px; top: 40px; width: 140px; height: 140px; pointer-events: none; }
.plan .mini canvas { width: 100%; height: 100%; display: block; }
.plan > :not(.mini):not(.flag) { position: relative; }

/* how access works: coloured numbers */
.steps:not(.legacy *) { border: 0; gap: 14px; background: none; }
.steps:not(.legacy *) li { border: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1); }
.steps:not(.legacy *) li::before { content: counter(s); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 800 19px/1 var(--display); letter-spacing: 0; color: var(--dark); background: var(--lime); }
.steps:not(.legacy *) li:nth-child(2)::before { background: var(--blue); color: #fff; }
.steps:not(.legacy *) li:nth-child(3)::before { background: var(--pink); color: var(--dark); }
.steps:not(.legacy *) li:nth-child(4)::before { background: var(--solid); color: var(--on-solid); }
.steps:not(.legacy *) b { font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: -.01em; }
.ref-box { padding: clamp(22px, 3vw, 32px); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-1); }

/* Discord */
.dband { --sh: 40, 46, 170; border: 0 !important; border-radius: 26px !important; background: var(--blurple) !important; color: #fff; box-shadow: var(--shadow-1); }
.dband:hover { box-shadow: var(--shadow-2); }
.dband .k, .dband small { color: rgba(255, 255, 255, .94) !important; }
.dband b em { color: #fff !important; font-style: normal; }
.dband-go { background: #fff !important; color: var(--dark) !important; }
.hb-dc { border-radius: 20px; }

/* ---------- home hero: the mark + its three spaces; no lights behind ---------- */
.rz-bg { display: none; }
.rz-hero { border-bottom: 0; }
.rz-fill { fill: var(--fg) !important; }
.rz-line { stroke: var(--fg); }
.rz-halo, .rz-shine { display: none; }
.rz-mono svg { filter: none !important; }
.rz-vis .rz-mk { position: absolute; left: calc(var(--cx) * 1%); top: calc(var(--cy) * 1%); width: 78%; height: 78%; transform: translate(-50%, -50%); z-index: 1; opacity: 0; transition: opacity .9s; pointer-events: none; }
.rz-vis.three .rz-mk { opacity: 1; }
.rz-vis.three .rz-mono { opacity: 0; transition: opacity .6s; }
.rz-net .ln { stroke: rgba(var(--ov), .38) !important; }
.rz-node { border: 0 !important; background: var(--surface) !important; box-shadow: var(--shadow-2) !important; color: var(--fg); }
.rz-node b { font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: -.01em; }
.rz-node em { font-family: var(--mono); color: var(--muted); letter-spacing: .04em; }
.rz-ni { border: 0 !important; background: var(--lime) !important; }
.rz-ni svg { stroke: var(--dark) !important; }
.rz-node.n2 .rz-ni { background: var(--blue) !important; } .rz-node.n2 .rz-ni svg { stroke: #fff !important; }
.rz-node.n3 .rz-ni { background: var(--pink) !important; } .rz-node.n3 .rz-ni svg { stroke: var(--dark) !important; }

/* ---------- Academy, Lab, Hub details ---------- */
.gd-top:not(.legacy *) { background: none; border-bottom: 0; }
.gd-card.on:not(.legacy *) { background: var(--surface); box-shadow: inset 0 0 0 2px var(--fg), var(--shadow-1); }
.gd-ring:not(.legacy *) { background: conic-gradient(var(--fg) calc(var(--p) * 1%), rgba(var(--ov), .1) 0); }
.gd-dot { box-shadow: 0 0 0 2px var(--surface); }
.legacy.phero, .legacy.g-work { border-radius: 28px; margin-inline: max(16px, env(safe-area-inset-left, 0px)); overflow: hidden; }
.legacy.g-work { margin-top: 16px; }
body.g-reading .legacy.g-work { margin-top: 0; }
.lb-top { background: none; }
.vz { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.sc-tools .tile:not(.legacy *) { border-radius: 22px; }
.tile .xtra { border-color: var(--blue) !important; color: var(--blue) !important; }
.tp-pack.open:not(.legacy *) { box-shadow: inset 0 0 0 2px var(--fg), var(--shadow-1); }
.tp-h .n { color: var(--fg) !important; border-color: var(--line-2) !important; }
.tpl:not(.legacy *) { border-color: transparent; background: var(--surface-2); border-radius: 18px; }
.cm-bell:not(.legacy *) { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-1); }
.bdg:not(.legacy *) { border-radius: 999px; }
.av.team { box-shadow: 0 0 0 2px var(--amber); }
.tz-lock { background: var(--solid) !important; color: var(--on-solid) !important; }
.meter i { background: var(--fg); }
.meter { background: rgba(var(--ov), .1); }
.kpi b:not(.legacy *), .status b:not(.legacy *) { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: -.02em; }
.c-go { color: #15803d; }
:root:not([data-theme="light"]) .c-go { color: #4ade80; }
.skel { background: rgba(var(--ov), .06) !important; }

@media (max-width: 760px) {
  .legacy.phero, .legacy.g-work { border-radius: 20px; }
  .tile .obj { height: 180px; }
  .plan .mini { width: 100px; height: 100px; top: 44px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .rz-mono canvas { transition: none; } }
.rz-node:hover { transform: translate(-50%, -50%) translateY(-3px); }
.plans.two .plan.best .flag { top: 18px; right: 18px; padding: 4px 10px; font-size: 10.5px; letter-spacing: .08em; }
.foot nav a { font-family: var(--body); font-weight: 500; letter-spacing: 0; text-transform: none; }
.foot nav a:hover { color: var(--fg); }
.app-foot small { font-family: var(--body); letter-spacing: 0; }
.dband-t b { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: -.02em; }
.sec + .sec { border-top: 0; }
.plans.two .plan.best .flag { display: none; } /* the card's own label already says "Everything" */

/* the old condensed caps titles become sentence case in the new display face */
:is(.status b, .fs-t, .pick b, .rq h4, .cg-t h4, .notice b, .proj b, .tgroup-h h3, .gd-card b, .tp-h b, .rl-me-t b, .rl-all, .rl-gh, .nf-h b, .chp-all, .chp-g, .hb-dc-t b, .hb-admin b, .cmp-top > b, .cm-nudge b, .who-t b, .g-bar-t b, .logo-tag):not(.legacy *) {
  font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: -.01em;
}
:is(.tabs button, .tabs a, .cm-sort button):not(.legacy *) { font-family: var(--body); font-weight: 500; text-transform: none; letter-spacing: 0; }
.tabs :is(button, a)[aria-selected="true"]:not(.legacy *), .tabs .on:not(.legacy *) { color: var(--fg); }
.cmp-go { border-radius: 999px; background: var(--solid); color: var(--on-solid); font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none; }
.hb-stats b { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.sc-tabs:not(.legacy *) { background: linear-gradient(var(--surface) 70%, transparent); }
.tile:not(.legacy *)::before, .tile:not(.legacy *)::after { display: none; }
.tabs button::after, .tabs a::after { background: var(--fg); }
.ph::before, .phx::before { display: none; } /* no colour lights behind page heads */
.ph { border-bottom: 0; }

/* ---------- colour (owner, 2026-11-04: dark is the official look; three colours only, no orange) ----------
   Colour means a space: lime = Academy, blue = Lab, pink = Hub. Blurple only for Discord. Everything else is neutral
   (surfaces, ink). Colour blocks are kept for the cards that ARE a space (home + dashboard cards, plans, the open guide,
   the account plan cards) plus the three "Why the Lab" cards; data, lists and forms stay on neutral surfaces. */
body { --sp: var(--lime); --on-sp: var(--dark); } /* lime is also the brand colour: Home, Account, Join, Log in, Admin */
body[data-page="guide"] { --sp: var(--lime); --on-sp: var(--dark); }
body[data-page="studio"] { --sp: var(--blue); --on-sp: #fff; }
body[data-page="community"] { --sp: var(--pink); --on-sp: var(--dark); }
.navlinks a.on { background: var(--sp); color: var(--on-sp); }
.eyebrow:not(.legacy *) b { padding: 3px 9px; border-radius: 999px; background: var(--sp); color: var(--on-sp); }
:is(.sc-glide, .gd-glide, .hb-glide) { background: var(--sp) !important; }
:is(.sc-tab[aria-selected="true"], .gd-tab.on, .sc-tab[aria-selected="true"] .n) { color: var(--on-sp) !important; }
.gd-tab.on { background: var(--sp) !important; }
.gd-tab.on .gd-ic { stroke: var(--on-sp); }
.cm-sort button[aria-pressed="true"] { background: var(--pink) !important; color: var(--dark) !important; }
.cmp-go { background: var(--pink); color: var(--dark); }
.tabs :is(button, a)::after { background: var(--sp); height: 3px; border-radius: 3px; }
:root { --go: #16a34a; } :root:not([data-theme="light"]) { --go: #4ade80; }

/* dashboard numbers: separate neutral cards */
.status:not(.legacy *) { gap: 12px; border: 0; background: none; box-shadow: none; overflow: visible; }
.status > div { border: 0 !important; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1); }

/* the colour blocks */
body[data-page="guide"] .gd-card.on, #whys > .panel:nth-child(1), #planNow > .panel:nth-child(1)
  { --sh: 112, 140, 0; background: var(--lime) !important; color: var(--dark); }
#whys > .panel:nth-child(2), #planNow > .panel:nth-child(2)
  { --sh: 20, 34, 170; background: var(--blue) !important; color: #fff; }
#whys > .panel:nth-child(3)
  { --sh: 190, 30, 90; background: var(--pink) !important; color: var(--dark); }
/* inside a colour block: the text takes the block's own colour (dark on lime, white on blue / pink) */
:is(body[data-page="guide"] .gd-card.on, #whys > .panel, #planNow > .panel, .tile.c-lime, .tile.c-blue, .tile.c-hub, .plans.two .plan:first-child)
  :is(.k, p, small, .note, .go, .c-go, .c-amber, .c-muted, em, li, b, h3, h4, .gd-meta, .gd-hook, .linkbtn, .tags span) { color: inherit !important; }
:is(body[data-page="guide"] .gd-card.on, #whys > .panel, #planNow > .panel, .tile.c-lime, .tile.c-blue, .tile.c-hub)
  :is(.k, small, .note, .gd-meta) { opacity: .86; }
:is(body[data-page="guide"] .gd-card.on, .tile.c-lime, .tile.c-blue, .tile.c-hub) .tags span { border-color: currentColor !important; opacity: .85; }
#planNow > .panel .meter { background: rgba(0, 0, 0, .16); }
#planNow > .panel .meter i { background: currentColor; }
body[data-page="guide"] .gd-card.on .gd-ring { background: conic-gradient(currentColor calc(var(--p) * 1%), rgba(0, 0, 0, .14) 0) !important; }
body[data-page="guide"] .gd-card.on .gd-ring b { color: inherit; background: transparent; }
.gd-card.on { box-shadow: var(--shadow-2) !important; }
#planNow > .panel .btn:not(.primary) { background: rgba(255, 255, 255, .92); color: var(--dark); box-shadow: none; }
#planNow > .panel .btn.primary { background: var(--dark); color: #fff; box-shadow: none; }
#planNow > .panel.hl { box-shadow: var(--shadow-2) !important; }
.tile .go:is(.c-lime *, .c-blue *, .c-hub *) { color: inherit !important; }

/* Discord: blurple, the only purple */
.hb-dc { --sh: 40, 46, 170; border: 0 !important; background: var(--blurple) !important; color: #fff; box-shadow: var(--shadow-1); }
.hb-dc :is(b, small, span, svg) { color: #fff !important; stroke: currentColor; }
.hb-dc small { opacity: .94; }

/* forms */
.form-block:not(.legacy *) { background: none; box-shadow: none; border-radius: 0; }
:is(.chips label, label.check, .check):not(.legacy *) { font-family: var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; }
#rSum { background: var(--surface) !important; box-shadow: inset 0 0 0 2px var(--fg), var(--shadow-1) !important; }

/* reveal on scroll: quick and small, once (body text is never held back long) */
.rv { transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1) !important; }
.rv.pre { opacity: 0; transform: translateY(14px) !important; }
:root { --ok: #15803d; --bad: #dc2626; --refuse: #e5484d; } :root:not([data-theme="light"]) { --ok: #4ade80; --bad: #ff6b63; --refuse: #ff5a52; }
.rich:not(.legacy *) { color: var(--fg); }
.tile .xtra { border-color: var(--sp) !important; color: var(--fg) !important; }

/* Lab → Templates: compact cards that fit the new (wider) type; toolbar buttons as small pills */
#packChips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#packChips .hub-q { flex: 1 1 240px; display: block; min-height: 42px; background: var(--bg); border: 1px solid var(--line-2); }
#packChips .linkbtn { height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(var(--ov), .06); color: var(--fg); text-decoration: none; font: 500 14px/1 var(--body); }
#packChips .linkbtn:hover { background: rgba(var(--ov), .1); }
.sc-seg { border: 0; background: rgba(var(--ov), .06); }
.sc-seg button { font-family: var(--body); }
.sc-seg button[aria-pressed="true"] { background: var(--sp); color: var(--on-sp); }
.tplgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tpl:not(.legacy *) { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; padding: 12px; }
.tpl:hover { border-color: transparent; box-shadow: var(--shadow-2); }
.tpl-t h3:not(.legacy *) { font-size: 18px; line-height: 1.12; letter-spacing: -.015em; overflow-wrap: anywhere; }
.tpl-t p { font-size: 13.5px; line-height: 1.45; }
.tpl-a .btn:not(.legacy *) { width: 100%; min-height: 36px; padding: 0 12px; font-size: 13.5px; white-space: nowrap; }
.tpl-cv .badge { color: var(--lime); }
@media (max-width: 420px) { .tplgrid { grid-template-columns: minmax(0, 1fr); } .tpl:not(.legacy *) { grid-template-columns: 96px minmax(0, 1fr); } }
#packChips .hub-q { position: static; opacity: 1; pointer-events: auto; }
.tpl-cv .badge { font-size: 8.5px; letter-spacing: .04em; }

/* the guide in the new look (owner, 2026-11-04: "the academy still has old design section") */
.phero .bgimg { display: none; }
:is(.g-mc header b, .upnext .t, .gi-txt b, .g-howto b, .g-beats b, .g-compare b, .g-loop b, .epnav .t, .steps-h li b, .g-formula .ex) {
  font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: -.01em;
}
.g-donebtn { border-radius: 999px; font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: 0; }
.g-next { font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: 0; }
.g-step h2 { letter-spacing: -.03em; }
:is(.g-mc, .g-prompt, .g-story, .g-meta, .g-demo, .demo, .g-remember, .g-tip, .g-warn) { border-radius: 18px; }
.g-prompt { --amber: #d6ff3d; --amber-2: #e4ff7a; --acc: 214, 255, 61; --fg: #f1f2f4; --muted: #a4a9b4; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.15); color: #f1f2f4; }

/* ======================= 2.9.2: fixes from the multi-agent review ======================= */

/* --- each space's accent also drives the small accents (links, numbers, rings); neutral pages use ink --- */
:root[data-theme="light"] body:is([data-page="home"], [data-page="account"], [data-page="join"], [data-page="login"], [data-page="auth"], [data-page="admin"]) { --amber: #0f1013; --amber-2: #2a2d33; --acc: 15, 16, 19; --ink: #fff; }
:root[data-theme="light"] body[data-page="guide"] { --amber: #0f1013; --amber-2: #2a2d33; --acc: 15, 16, 19; --ink: #fff; }
body[data-page="studio"] { --amber: #8c9bff; --amber-2: #a9b4ff; --acc: 46, 75, 255; --ink: #fff; }
:root[data-theme="light"] body[data-page="studio"] { --amber: #2e4bff; --amber-2: #4a63ff; }
body[data-page="community"] { --amber: #ff6fa8; --amber-2: #ff8fbc; --acc: 255, 61, 139; --ink: #0f1013; }
:root[data-theme="light"] body[data-page="community"] { --amber: #c8135f; --amber-2: #a50f4e; --acc: 200, 19, 95; --ink: #fff; }
/* no orange anywhere: "warn" is pink; status badges are neutral with a coloured dot */
:root { --warn: #c8135f; } :root:not([data-theme="light"]) { --warn: #ff6fa8; }
.badge.warn { color: var(--fg); border-color: var(--line-2); } .badge.warn::before { background: var(--pink); }
.status .c-go, .trust li::before, .trust li svg { color: var(--fg) !important; }
.kpi:not(.rz-x) { border: 0 !important; }
.hb-dc::before, .dband::before, .g-locked::before { display: none !important; }
.cg-ic { color: var(--fg) !important; background: rgba(var(--ov), .08) !important; }
.g-locked { background: var(--surface) !important; }
.bb2 .buybox.best { background: var(--surface) !important; box-shadow: inset 0 0 0 2px var(--fg), var(--shadow-1) !important; }
:is(.g-readbar i, .g-bar-m i) { box-shadow: none !important; }
.demo { background: #0b0c10 !important; }

/* --- dark "stages" (demos, prompts, phones, tool pictures) keep dark tokens in both themes, so their text stays readable --- */
:is(.demo, .g-prompt, .sb-phone, .sz-scr, .hb-frame, .vz) {
  --fg: #f1f2f4; --muted: #a4a9b4; --dim: #8a909b; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .15);
  --amber: #d6ff3d; --amber-2: #e4ff7a; --acc: 214, 255, 61; --ink: #0f1013; --ov: 255, 255, 255;
  --surface: #16181d; --surface-2: #1b1d23; --card: #16181d; --bg: #0b0c10; color: var(--fg);
}
.g-prompt { background: #0b0c10 !important; border-color: transparent !important; box-shadow: var(--shadow-1); }

/* --- header: the right group sits at the right edge when the links are hidden --- */
@media (max-width: 1080px) { .app-top .nav-right { margin-left: auto; } }
.mmenu #menuClose, .mmenu .icon-btn { border: 0; background: var(--surface); box-shadow: var(--shadow-1); }

/* --- forms: errors and focus show again --- */
.fld.bad :is(input, select, textarea) { border-color: var(--refuse) !important; }
:is(.fld input, .fld select, .fld textarea, .hub-q, .cm-search input, #q):focus { border-color: var(--fg) !important; box-shadow: 0 0 0 4px rgba(var(--ov), .1); outline: none; }
.hub-q, #q, .cm-search input { font: 400 15px/1.2 var(--body); }
.check input { min-height: 0 !important; height: 20px; width: 20px; }
.pick label:has(input:checked) { border-color: transparent !important; }
.pick label:has(input:checked) .rd { border-color: var(--fg) !important; background: var(--fg) !important; box-shadow: inset 0 0 0 3px var(--surface) !important; }
.panel .form-msg:empty { min-height: 0; margin: 0; }
.reflink input { border-radius: 14px; background: var(--surface-2); }
/* secondary buttons on cards: a visible fill + hairline in both themes */
:is(.panel, .tile, .notice, .rq, .pc, .pv, .scon, .gd-card, .tz-box, .dcomm, .lcard, .proj, .rl-me) .btn:not(.primary):not(.ghost):not(.danger) { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.sm:not(.primary):not(.danger):not(.ghost) { box-shadow: inset 0 0 0 1px var(--line-2); }
.panel.hl:not(.legacy *) { border-color: transparent !important; box-shadow: inset 0 0 0 2px var(--fg), var(--shadow-1) !important; background: var(--surface) !important; }

/* --- heads: smaller, so the content starts higher --- */
.gd-h:not(.legacy *) { font-size: clamp(34px, 4.4vw, 56px); }
.ph h1:not(.legacy *), .ph-row h1:not(.legacy *) { font-size: clamp(38px, 4.8vw, 68px); max-width: none; }
.g-map-h h2:not(.legacy *) { font-size: clamp(26px, 3vw, 36px); }
#aEmail, .eyebrow #aEmail { text-transform: none; letter-spacing: 0; }

/* --- home --- */
#rzH { font-size: clamp(42px, 5.4vw, 80px); }
#rzH .l { display: block; } #rzH em { display: block; white-space: nowrap; }
.rz-node.n2 { --x: 83 !important; }
.plans.two { align-items: stretch; }
.plan li::before { width: 1.1em; flex: none; text-align: center; }
.dband .k, .dband small, .hb-dc small { color: #fff !important; opacity: 1 !important; }
.qa details:not(.legacy *) { border: 0; border-radius: 20px; }
.qa summary::after, .qa summary i { color: var(--fg); }
@media (max-width: 560px) {
  .status:not(.legacy *) { grid-template-columns: 1fr 1fr; }
  .dc-h > .cta-row { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
}
/* dashboard avatars use the three colours with dark letters */
.dc-r .av { background: hsl(var(--h, 72) 92% 62%) !important; color: var(--dark) !important; }
.dc-r:hover { background: rgba(var(--ov), .04) !important; }
/* join: the "What happens next" cards don't nest white in white */
aside .steps.compact li, aside ol.steps li { background: var(--surface-2) !important; box-shadow: none !important; }
ol.steps.compact { overflow: visible !important; }

/* --- Lab --- */
.tp-packs { display: grid; grid-template-columns: minmax(0, 1fr); }
.tp-pack, .tp-h { min-width: 0; }
.tp-pack.open:not(.legacy *) { border-color: transparent !important; box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-1) !important; }
.tp-pack.open .tp-chev, .tp-h:hover b { color: var(--amber); stroke: var(--amber); }
#tools > .tile, .scon .tile:not(.legacy *):not(.rz-x) { background: var(--surface-2) !important; }
.tile.locked .go { color: var(--muted) !important; }
.sc-seg button { white-space: nowrap; height: 34px; padding: 0 12px; }
#packChips .linkbtn { height: 40px; }
#packChips .hub-q { min-height: 40px; }
/* template cards: a compact pill button at the bottom of the text, not a full-width slab */
.tpl-t { grid-template-rows: auto auto 1fr; }
.tpl-a { align-self: end; }
.tpl-a .btn:not(.legacy *) { width: auto; justify-self: start; min-height: 34px; padding: 0 14px; font-size: 13px; white-space: nowrap; background: rgba(var(--ov), .08); color: var(--fg); box-shadow: none; }
.tpl:hover .tpl-a .btn:not(.legacy *) { background: var(--sp); color: var(--on-sp); }
.tpl-cv .badge { font-size: 9.5px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .tpl:not(.legacy *) { grid-template-columns: 80px minmax(0, 1fr); } .tpl-a .btn:not(.legacy *) { white-space: normal; } }

/* --- Academy guide --- */
.g-bar { background: var(--panel) !important; border: 0 !important; border-radius: 18px; box-shadow: var(--shadow-1); }
.g-meta { background: none !important; border: 0 !important; gap: 10px !important; }
.g-meta > div { background: var(--surface) !important; border-radius: 14px; box-shadow: var(--shadow-1); align-content: start; }
.bubble { background: var(--surface) !important; border: 0 !important; border-radius: 16px; box-shadow: var(--shadow-2); }
.bubble .b-arrow { background: var(--surface) !important; border-color: transparent !important; }
.bubble .b-d { color: var(--muted) !important; }
.g-take { border: 0 !important; border-radius: 16px; background: var(--surface) !important; box-shadow: inset 3px 0 0 var(--lime), var(--shadow-1); }
.g-take span { color: var(--fg) !important; }
body[data-page="guide"] .gd-card.on .gd-free { color: var(--dark) !important; border-color: rgba(15, 16, 19, .4) !important; }
body[data-page="guide"] .gd-card.on .gd-ring::before { background: var(--lime) !important; }
:is(.g-bar-back, .g-gloss dt, .verdict, .sz-state) { text-transform: none !important; letter-spacing: -.01em !important; }
.g-bar-back { font-family: var(--body) !important; font-weight: 500 !important; border-radius: 999px !important; }
:is(.g-copy, .demo-pp, .tool .thd button, .tbtn, .cnt .ab button) { border-radius: 999px !important; }
:is(.sfield input, .sfield textarea, .tool textarea, .g-mtoc select) { border-radius: 14px !important; }
:is(.g-shot, .g-howto li, .g-compare > div, .tstats div) { border-radius: 14px !important; }
.g-callout { border-radius: 16px !important; }
.g-toc a { border-radius: 10px !important; }
.demo-k { border-radius: 999px !important; }
body.g-reading .g-chapter h2 { display: none; }
body.g-reading .g-next { display: none; }
body.g-reading .g-toc { top: calc(var(--hdr, 69px) + 76px); max-height: calc(100svh - var(--hdr, 69px) - 96px); }
@media (max-width: 480px) { .dl-n { font-size: 11px; padding: 4px 6px; } }
@media (max-width: 760px) { .g-step > header { display: grid; gap: 4px; } .g-step > header .num { font-size: 14px; } }

/* --- Hub --- */
.mn-p { background: var(--surface) !important; border-color: transparent !important; box-shadow: var(--shadow-2) !important; }
.mn-p button:hover { background: rgba(var(--ov), .06) !important; }
.pc.pinned:not(.rz-y) { box-shadow: inset 0 0 0 1.5px rgba(var(--acc), .45), var(--shadow-1) !important; }
.pv.corners::before, .pv.corners::after { display: none !important; }
.pv:not(.legacy *) { border-radius: 20px; }
.pv-t:not(.legacy *) { font-size: clamp(28px, 3.4vw, 44px) !important; }
.cmts-h:not(.legacy *) { font-size: 24px !important; }
.cmp .fld input[name="title"] { padding: 8px 14px !important; }
.cmp-foot { justify-content: flex-end; }
@media (max-width: 600px), (hover: none) { .cmp-hint { display: none; } }
@media (max-width: 600px) { .cm-head h1 { white-space: normal !important; font-size: clamp(30px, 9vw, 40px) !important; } .cm-desc { -webkit-line-clamp: unset !important; display: block !important; } }
:is(.lcard b, .tz-spaces b) { text-transform: none !important; letter-spacing: -.01em !important; }
body[data-page="community"] .btn.primary { background: var(--pink); color: var(--dark); }
.cm-bell .n { background: var(--pink) !important; color: var(--dark) !important; }
.cc-b { border-radius: 14px; }
.hb-side .rl-rules { border-radius: 20px !important; }

/* --- Admin / Account --- */
.rq:not(.legacy *) { border: 0 !important; border-radius: 20px !important; background: var(--surface); box-shadow: var(--shadow-1); }
.rq.is-new { border-left: 0 !important; box-shadow: inset 0 0 0 1.5px var(--fg), var(--shadow-1) !important; }
.rq + .rq { margin-top: 12px; }
.contact-links a { border-radius: 999px !important; font-family: var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; }
.gcat input, .gcat select { border-radius: 12px !important; }
.tbl td:last-child { white-space: nowrap; }

/* --- the reveal never hides much: content is there when you land on it --- */
/* locked steps: readable, marked by the dashed tick and a lock, not by fading the text away */
:is(.g-mc a.lockd, .g-toc a.lockd) { opacity: .8; }
.g-toc .n { color: var(--muted); }
:is(.g-mc a.done .ck) { background: var(--fg); border-color: var(--fg); } .g-mc a.done .n { color: var(--fg); }

/* ======================= 2.9.3: more character (owner: "plain white and black is boring") ======================= */
/* the logo takes the lime on hover again */
.logo:hover .rzm, .app-foot .logo:hover .rzm { fill: #d6ff3d !important; }
:root[data-theme="light"] .logo:hover .rzm { fill: var(--fg) !important; }
/* main actions wear the space's colour: lime (brand, Academy), blue on the Lab, pink on the Hub */
.btn.primary:not(.legacy *) { background: var(--sp); color: var(--on-sp); }
.btn.primary:not(.legacy *):hover { box-shadow: 0 0 0 4px rgba(var(--acc), .18), var(--shadow-2); }
.sc-seg button[aria-pressed="true"] { background: var(--sp); color: var(--on-sp); }
/* dashboard numbers: a coloured dot says which space each one is about */
.status > div .k::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 0; background: var(--fg); opacity: .5; }
.status > div:nth-child(1) .k::before { background: var(--lime); opacity: 1; }
.status > div:nth-child(2) .k::before { background: var(--lime); opacity: 1; }
.status > div:nth-child(3) .k::before { width: 16px; border-radius: 4px; background: linear-gradient(90deg, var(--blue) 50%, var(--pink) 50%); opacity: 1; }
/* FAQ / toggles: the plus in the brand colour */
.qa summary::after, .qa summary i { color: var(--amber) !important; }
/* the background motif's colour per space and theme (app.js reads --fx-acc) */
body { --fx-acc: 214, 255, 61; }
body[data-page="studio"] { --fx-acc: 140, 155, 255; }
body[data-page="community"] { --fx-acc: 255, 95, 160; }
:root[data-theme="light"] body { --fx-acc: 110, 145, 0; }
:root[data-theme="light"] body[data-page="studio"] { --fx-acc: 46, 75, 255; }
:root[data-theme="light"] body[data-page="community"] { --fx-acc: 215, 30, 105; }
.gd-card.on { box-shadow: var(--shadow-1) !important; }

/* ======================= 2.9.4 (owner: titles too big, account button, card contrast, Lab background) ======================= */
/* calmer title sizes everywhere */
h1:not(.legacy *) { font-size: clamp(36px, 4.4vw, 64px); }
h2:not(.legacy *) { font-size: clamp(28px, 3vw, 44px); }
.sec-t h2:not(.legacy *) { font-size: clamp(28px, 3vw, 42px); }
#rzH { font-size: clamp(40px, 4.8vw, 70px); }
.ph h1:not(.legacy *), .ph-row h1:not(.legacy *) { font-size: clamp(34px, 4vw, 56px); }
.gd-h:not(.legacy *) { font-size: clamp(32px, 3.8vw, 50px); }
.cm-head h1 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: clamp(32px, 3.8vw, 52px) !important; }
.g-step h2:not(.legacy *) { font-size: clamp(30px, 3.4vw, 48px); }
.plan h3:not(.legacy *) { font-size: 36px; }
.pv-t:not(.legacy *) { font-size: clamp(26px, 2.8vw, 38px) !important; }

/* the account button: avatar + chevron, opens a quick menu */
.who-w { position: relative; }
.who { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px 0 4px !important; border: 0 !important; border-radius: 999px !important; background: var(--surface) !important; box-shadow: var(--shadow-1) !important; color: var(--fg); cursor: pointer; min-width: 0 !important; }
.who:hover, .who[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(var(--acc), .25), var(--shadow-1) !important; }
.who .av, .who-h .av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sp) !important; color: var(--on-sp) !important; font: 800 15px/1 var(--display) !important; }
.who-c { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; opacity: .7; }
.who[aria-expanded="true"] .who-c { transform: rotate(180deg); }
.who-t { display: none !important; }
.who-m { position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; width: 268px; display: grid; gap: 2px; padding: 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--edge), 0 0 0 1px var(--line), 0 18px 50px -12px rgba(0, 0, 0, .45); transform-origin: top right; animation: who-in .16s ease-out; }
.who-m[hidden] { display: none; }
@keyframes who-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.who-h { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; min-width: 0; }
.who-h > span:last-child { min-width: 0; }
.who-h b { display: block; font: 700 15px/1.2 var(--display); letter-spacing: -.01em; }
.who-h small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-plan { justify-self: start; margin: 0 8px 6px; padding: 4px 10px; border-radius: 999px; background: rgba(var(--acc), .14); color: var(--fg); font: 500 11.5px/1.2 var(--mono); }
.who-m a, .who-m button { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--fg); text-decoration: none; font: 500 14.5px/1 var(--body); text-align: left; cursor: pointer; width: 100%; }
.who-m a:hover, .who-m button:hover, .who-m a:focus-visible, .who-m button:focus-visible { background: rgba(var(--ov), .07); outline: none; }
.who-m svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.who-m .up { color: var(--fg); background: rgba(var(--acc), .1); }
.who-m .out { color: var(--bad); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: 4px; }
@media (max-width: 760px) { .who-m { position: fixed; top: calc(var(--hdr, 60px) + 6px); right: max(12px, env(safe-area-inset-right, 0px)); } }

/* contrast between cards: nested cards are lighter than their parent, and steps carry their colour */
:is(.panel, .scon, .tz-box, .dcomm, .rl-me, .pv, .form-block) :is(.panel, .kpi, .notice, .tbl-wrap, .lcard, .proj, .cc-b):not(.legacy *) { background: var(--surface-2) !important; box-shadow: var(--edge) !important; }
.steps:not(.legacy *) li { box-shadow: var(--edge), var(--shadow-1); }
.steps:not(.legacy *) li:nth-child(1) { background: linear-gradient(rgba(214, 255, 61, .09), rgba(214, 255, 61, .09)), var(--surface) !important; box-shadow: inset 0 0 0 1px rgba(214, 255, 61, .25), var(--shadow-1) !important; }
.steps:not(.legacy *) li:nth-child(2) { background: linear-gradient(rgba(46, 75, 255, .13), rgba(46, 75, 255, .13)), var(--surface) !important; box-shadow: inset 0 0 0 1px rgba(46, 75, 255, .35), var(--shadow-1) !important; }
.steps:not(.legacy *) li:nth-child(3) { background: linear-gradient(rgba(255, 61, 139, .10), rgba(255, 61, 139, .10)), var(--surface) !important; box-shadow: inset 0 0 0 1px rgba(255, 61, 139, .3), var(--shadow-1) !important; }
.steps:not(.legacy *) li:nth-child(4) { background: var(--surface-2) !important; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1) !important; }
:root[data-theme="light"] .steps:not(.legacy *) li:nth-child(1) { background: linear-gradient(rgba(140, 180, 0, .12), rgba(140, 180, 0, .12)), var(--surface) !important; box-shadow: inset 0 0 0 1px rgba(110, 145, 0, .3), var(--shadow-1) !important; }

/* ======================= 2.10: languages ======================= */
/* the switcher (header, phone menu) */
.lang-w { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--fg); font: 600 13px/1 var(--body); cursor: pointer; }
.lang-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(var(--acc), .25), var(--shadow-1); }
.lang-m { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 80; display: grid; gap: 2px; min-width: 170px; padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: var(--edge), 0 0 0 1px var(--line), 0 18px 50px -12px rgba(0, 0, 0, .45); animation: who-in .16s ease-out; }
.lang-m[hidden] { display: none; }
.lang-m button { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--fg); font: 500 15px/1 var(--body); cursor: pointer; text-align: start; }
.lang-m button[lang="ar"] { font-family: "Readex Pro", var(--body); }
.lang-m button:hover { background: rgba(var(--ov), .07); }
.lang-m button[aria-checked="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sp); }
.mmenu-foot .mm-tools { display: flex; gap: 8px; align-items: center; }
.mmenu-foot .lang-m { top: auto; bottom: calc(100% + 8px); inset-inline-end: auto; inset-inline-start: 0; }
@media (max-width: 560px) { .nav-right > .lang-w { display: none; } } /* on phones it lives in the menu */

/* Arabic: Readex Pro for the Arabic letters (Latin keeps Bricolage / Geist), right-to-left layout */
:root { --display: "Bricolage Grotesque", "Readex Pro", "Bricolage Fallback", "Helvetica Neue", Arial, sans-serif; --body: "Geist", "Readex Pro", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; }
html[lang="ar"] body { line-height: 1.7; }
html[lang="ar"] :is(h1, h2, h3, h4):not(.legacy *) { letter-spacing: 0; line-height: 1.25; }
html[lang="ar"] :is(.eyebrow, .k, .crumbs, .pill, .badge, .who-plan, .tbl th, .fld label) { letter-spacing: 0 !important; text-transform: none !important; }
html[lang="ar"] :is(.eyebrow, .k, .fld label) { font-family: var(--body) !important; }
html[dir="rtl"] .who-m { right: auto; left: 0; transform-origin: top left; }
html[dir="rtl"] .go, html[dir="rtl"] .btn [aria-hidden="true"] { display: inline-block; }
html[dir="rtl"] :is(.tile .go, .dband-go, .btn, .g-next, .rz-node) { direction: rtl; }
html[dir="rtl"] .plan li::before { transform: scaleX(-1); }
html[dir="rtl"] .rz-copy { text-align: right; }
html[dir="rtl"] #rzH em { white-space: normal; }

/* hero intro (2.10): chrome 2 · 1 · 2 merge into the mark (chrome3d.js); the cards and lines wait for it (.go).
   Without 3D the flat mark shows at once (.no3d). The old drawing animation is retired. */
.rz-vis .rz-mono { opacity: 0; }
.rz-vis.no3d .rz-mono { opacity: 1; }
.rz-vis .rz-mono *, .rz-vis .rz-mono { animation: none !important; }
.rz-vis .rz-mono .rz-line { stroke-dashoffset: 0; }
.rz-vis:not(.go) :is(.rz-node, .rz-net .ln) { animation-play-state: paused !important; }
.rz-vis.go .rz-node { animation-delay: calc(var(--d) - 1.75s) !important; }
.rz-vis.go .rz-net .ln1 { animation-delay: 0s !important; } .rz-vis.go .rz-net .ln2 { animation-delay: .12s !important; } .rz-vis.go .rz-net .ln3 { animation-delay: .24s !important; }
.rz-vis .rz-mk { transition: opacity .4s; }
.hp { left: auto !important; inset-inline-start: 0; clip-path: inset(50%); opacity: 0; pointer-events: none; }
/* RTL: the wordmark, the hero scene and code-like bits stay left-to-right */
html[dir="rtl"] :is(.wm, .logo, .rz-vis, .vz, .tpl-cv, .g-prompt pre, .d-beats, .d-voice, .d-edit, .d-mix, input[type="email"], .reflink input) { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .logo { flex-direction: row; }

/* 2.10.1 RTL / Arabic details from the translation pass */
html[lang="ar"] :is(.bdg, .rl-rules summary, .hb-stats small, .cmp-in, .cmp-hint, .cm-lbl, .pa-m, .mono, .pv-back, .cm-nudge b, .nf-h b, .hb-dc-t b, .hb-admin b, .cmp-go, .rl-me-t b, .cmp-top > b, .tbl th, .demo-k, .g-tochead, .gd-meta) { letter-spacing: 0 !important; }
html[dir="rtl"] .rl-me-t b { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] .cm-nudge b { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .mclose { right: auto; left: 14px; }
html[dir="rtl"] .gd-free, html[dir="rtl"] .gd-ring { right: auto; left: 16px; }
html[dir="rtl"] .g-bar-back svg { transform: scaleX(-1); }
.gd-card:has(.gd-free) { padding-right: 150px; }
html[dir="rtl"] .gd-card { padding-right: 16px; padding-left: 92px; }
html[dir="rtl"] .gd-card:has(.gd-free) { padding-left: 150px; }
html[dir="rtl"] .plan .mini { right: auto; left: 8px; }

/* ---------- v2.12 the three lines (owner, 2026-11-04) ----------
   General pages only (Home, Account, Admin, Join, Log in, auth): the three colours stand for the three things we
   offer, so they show up together as three thin lines, like a racing stripe. Main buttons are whitish (dark theme) or
   dark grey (light theme) with the three lines at the start; on hover the lines pass through the button and come back.
   Elsewhere, kept quiet: the eyebrow chip has a small mark, tab underlines are three thin lines, the avatar has a
   three-colour ring, highlight cards a short mark on their top edge. The spaces keep their own colour (Academy lime,
   Lab + editor blue, Hub pink), and on the general pages a main button that leads to a space takes that space's colour. */
:root { --l3: linear-gradient(90deg, var(--lime) 0 33.4%, var(--blue) 0 66.7%, var(--pink) 0); --l3h: linear-gradient(var(--lime) 0 33.4%, var(--blue) 0 66.7%, var(--pink) 0); --b3: #f1f2f4; --on-b3: #0e0f13;
  --l3s-img: linear-gradient(108deg, transparent 0 11px, var(--lime) 11px 15.5px, var(--blue) 15.5px 20px, var(--pink) 20px 24.5px, transparent 24.5px); }
:root[data-theme="light"] { --b3: #2a2d34; --on-b3: #fff; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.btn.primary, .plans.two .plan.best .btn):not(.legacy *):not(#planNow *):not(.plans.two .plan:first-child *):not([href^="/academy"]):not([href*="plan=prime"]):not([href^="/lab"]):not([href^="/editor"]):not([href^="/hub"]) {
  position: relative; isolation: isolate; overflow: hidden; background: var(--b3) !important; color: var(--on-b3) !important; box-shadow: var(--shadow-1) !important;
  padding-left: 46px; padding-right: 22px;
}
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.btn.primary, .plans.two .plan.best .btn):not(.legacy *):not(#planNow *):not(.plans.two .plan:first-child *):not([href^="/academy"]):not([href*="plan=prime"]):not([href^="/lab"]):not([href^="/editor"]):not([href^="/hub"])::before {
  content: ""; display: block !important; position: absolute; z-index: -1; inset: 0; border: 0; opacity: 1;
  background: var(--l3s-img) no-repeat; background-size: 34px 100%; background-position: var(--l3x, 12px) 0;
}
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.btn.primary.small, .btn.primary.sm):not(.legacy *):not([href^="/academy"]):not([href*="plan=prime"]):not([href^="/lab"]):not([href^="/editor"]):not([href^="/hub"]) { padding-left: 38px; padding-right: 16px; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.btn.primary.small, .btn.primary.sm):not(.legacy *)::before { --l3x: 8px; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.btn.primary, .plans.two .plan.best .btn):not(.legacy *):not(#planNow *):not(.plans.two .plan:first-child *):not([href^="/academy"]):not([href*="plan=prime"]):not([href^="/lab"]):not([href^="/editor"]):not([href^="/hub"]):is(:hover, :focus-visible):not(:disabled) { transform: none; box-shadow: var(--shadow-2) !important; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.btn.primary, .plans.two .plan.best .btn):not(.legacy *):not(#planNow *):not(.plans.two .plan:first-child *):not([href^="/academy"]):not([href*="plan=prime"]):not([href^="/lab"]):not([href^="/editor"]):not([href^="/hub"]):is(:hover, :focus-visible):not(:disabled)::before { animation: l3pass .75s cubic-bezier(.65, 0, .35, 1); }
@keyframes l3pass {
  0% { background-position: var(--l3x, 12px) 0; }
  48% { background-position: calc(100% + 40px) 0; }
  48.01% { background-position: -40px 0; }
  100% { background-position: var(--l3x, 12px) 0; }
}

/* quiet marks */
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .navlinks a.on:not(.legacy *) { background: var(--b3) !important; color: var(--on-b3) !important; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .eyebrow:not(.legacy *) b { background: var(--b3) !important; color: var(--on-b3) !important; padding-inline-start: 22px; position: relative; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .eyebrow:not(.legacy *) b::before { content: ""; position: absolute; inset-inline-start: 8px; top: 50%; width: 8px; height: 10px; margin-top: -5px; background: var(--l3); transform: skewX(-18deg); }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .tabs :is(button, a)::after { background: var(--l3h) !important; height: 5px !important; border-radius: 1px !important; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.who .av, .who-h .av):not(.legacy *) { background: var(--b3) !important; color: var(--on-b3) !important; position: relative; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.who .av, .who-h .av):not(.legacy *)::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; padding: 2px; background: conic-gradient(var(--lime) 0 120deg, var(--blue) 0 240deg, var(--pink) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .lang-m button[aria-checked="true"]::after { background: conic-gradient(var(--lime) 0 120deg, var(--blue) 0 240deg, var(--pink) 0); }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.panel.hl, .plans.two .plan.best):not(.legacy *) { position: relative; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) :is(.panel.hl, .plans.two .plan.best):not(.legacy *):not(#planNow > *)::before { content: ""; position: absolute; top: 0; inset-inline-start: 28px; width: 54px; height: 6px; background: var(--l3h); border-radius: 0 0 2px 2px; pointer-events: none; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .sc-seg button[aria-pressed="true"] { background: var(--b3); color: var(--on-b3); }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .plans.two .plan.best .flag { background: var(--b3); color: var(--on-b3); }
/* on the general pages a main button that leads to a space takes that space's colour */
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .btn.primary:is([href^="/academy"], [href*="plan=prime"]):not(.legacy *):not(#planNow *) { background: var(--lime) !important; color: var(--dark) !important; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .btn.primary:is([href^="/lab"], [href^="/editor"]):not(.legacy *):not(#planNow *):not(.c-blue *) { background: var(--blue) !important; color: #fff !important; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .btn.primary[href^="/hub"]:not(.legacy *):not(#planNow *) { background: var(--pink) !important; color: var(--dark) !important; }
@media (prefers-reduced-motion: reduce) { body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .btn.primary::before { animation: none !important; } }

/* Lab: the one launch button (owner): a little 9:16 frame that plays on hover (its timeline fills, the play mark
   nudges), and the arrow moves on. Blue, like everything in the Lab. */
.btn.launch:not(.legacy *) { gap: 12px; padding-inline: 16px 20px; min-height: 52px; font-size: 15.5px; }
.btn.launch .ln-ic { width: 20px; height: 30px; flex: none; overflow: visible; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.btn.launch .ln-f { fill: rgba(255, 255, 255, .14); stroke: currentColor; stroke-width: 1.6; }
.btn.launch .ln-p { fill: currentColor; transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.btn.launch .ln-t { fill: rgba(255, 255, 255, .28); }
.btn.launch .ln-tf { fill: currentColor; transform-box: fill-box; transform-origin: left center; transform: scaleX(.18); transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
.btn.launch .ln-go { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.btn.launch:is(:hover, :focus-visible) .ln-ic { transform: rotate(-8deg) translateY(-1px); }
.btn.launch:is(:hover, :focus-visible) .ln-p { transform: scale(1.18); }
.btn.launch:is(:hover, :focus-visible) .ln-tf { transform: scaleX(1); }
.btn.launch:is(:hover, :focus-visible) .ln-go { transform: translateX(4px); }
html[dir="rtl"] .btn.launch .ln-go { transform: scaleX(-1); }
html[dir="rtl"] .btn.launch:is(:hover, :focus-visible) .ln-go { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .btn.launch .ln-tf { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) { .btn.launch :is(.ln-ic, .ln-p, .ln-tf, .ln-go) { transition: none; } }

/* Dashboard: "Latest in the Hub" wears the Hub's pink (owner), balanced: the pink frames a white list of posts */
#dComm.panel:not(.legacy *) { --sh: 190, 30, 90; background: var(--pink) !important; color: var(--dark) !important; border: 0 !important; box-shadow: var(--shadow-1) !important; }
#dComm :is(.k, h3, h3 em):not(.btn *) { color: inherit !important; }
#dComm .k { opacity: .78; }
#dComm #dCommL { background: #fff; border-radius: 16px; padding: 6px; color: var(--dark); box-shadow: 0 1px 0 rgba(15, 16, 19, .06), 0 8px 24px -12px rgba(120, 10, 60, .45); }
#dComm #dCommL :is(p, .note, small, b, .t, .t *, .m, .m *, .dc-lock, .dc-lock *, a:not(.btn)):not(.btn *) { color: inherit !important; }
#dComm #dCommL :is(small, .note, .t small, .m) { opacity: .62; }
#dComm .dc-r { border: 0 !important; background: transparent !important; border-radius: 12px; }
#dComm .dc-r + .dc-r { box-shadow: 0 -1px 0 rgba(15, 16, 19, .08); }
#dComm .dc-r:hover { background: rgba(255, 61, 139, .1) !important; }
#dComm .dc-r .av { background: var(--pink) !important; color: var(--dark) !important; }
#dComm .dc-lock { padding: 10px 12px; }
#dComm .btn:not(.primary) { background: var(--dark) !important; color: #fff !important; box-shadow: none !important; }
#dComm .btn.primary { background: #fff !important; color: var(--dark) !important; }

/* ---------- v2.13 navbar: the avatar's three-colour ring on the menu buttons (owner) ----------
   Links and round buttons in the header get the ring on hover / keyboard focus; on the general pages the open page's
   pill keeps it. It turns a little as it appears. The phone menu: each link takes its space's colour when touched. */
@property --ra { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:where(.navlinks a, .theme-btn, .lang-btn, .menu-btn, .mmenu-top .icon-btn):not(.legacy *) { position: relative; }
:where(.navlinks a, .theme-btn, .lang-btn, .menu-btn, .mmenu-top .icon-btn):not(.legacy *)::before {
  content: ""; position: absolute; inset: -3px; border-radius: 999px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ra), var(--lime) 0 120deg, var(--blue) 0 240deg, var(--pink) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; --ra: -60deg; transition: opacity .2s, --ra .6s cubic-bezier(.2, .8, .2, 1);
}
:where(.navlinks a, .theme-btn, .lang-btn, .menu-btn, .mmenu-top .icon-btn):not(.legacy *):is(:hover, :focus-visible, [aria-expanded="true"])::before { opacity: 1; --ra: 0deg; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { box-shadow: var(--shadow-1) !important; }
body:is([data-page="home"], [data-page="account"], [data-page="admin"], [data-page="join"], [data-page="login"], [data-page="auth"]) .navlinks a.on:not(.legacy *)::before { opacity: 1; --ra: 0deg; }
/* phone menu: the touched link fills with its space's colour (Home: the three lines) */
.mmenu nav a { border-radius: 18px; padding: 4px 14px; margin-inline: -14px; transition: background-color .2s, color .2s; }
.mmenu nav a:is(:hover, :focus-visible, :active) { color: var(--on-b3) !important; background: var(--b3); }
.mmenu nav a[href^="/academy"]:is(:hover, :focus-visible, :active) { background: var(--lime); color: var(--dark) !important; }
.mmenu nav a[href^="/lab"]:is(:hover, :focus-visible, :active) { background: var(--blue); color: #fff !important; }
.mmenu nav a[href^="/hub"]:is(:hover, :focus-visible, :active) { background: var(--pink); color: var(--dark) !important; }
.mmenu nav a:is(:hover, :focus-visible, :active) small { color: inherit !important; opacity: .7; }
.mmenu nav a[href="/"]:is(:hover, :focus-visible, :active)::after { content: ""; display: block !important; width: 22px; height: .62em; margin-inline-start: auto; background: var(--l3); transform: skewX(-18deg); }
@media (prefers-reduced-motion: reduce) { :where(.navlinks a, .theme-btn, .lang-btn, .menu-btn, .mmenu-top .icon-btn)::before { transition: none; } }

/* Academy: a free category (Fundamentals): open to every account, plan or not */
.gd-soon.gd-free { background: var(--lime) !important; color: var(--dark) !important; }
.gd-soonbox .pill.free { margin-inline-start: 6px; background: var(--lime); color: var(--dark); border-color: transparent; }

/* Admin → Settings: the category "Free" switch and the Badges list (v2.14) */
#gcatList .gcat { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto auto auto auto; }
.gcat-free { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; color: var(--muted); }
#bdgList .gcat.bdg-ed { grid-template-columns: auto auto minmax(0, .8fr) minmax(0, 1.6fr) auto; }
#bdgList .gcat.off :is(input[data-bdf], .bdx) { opacity: .45; }
@media (max-width: 760px) {
  #gcatList .gcat { grid-template-columns: auto minmax(0, 1fr) auto; }
  #bdgList .gcat.bdg-ed { grid-template-columns: auto auto minmax(0, 1fr); } #bdgList input[data-bdf="desc"] { grid-column: 1 / -1; }
}
.bdg-adm { display: flex; flex-wrap: wrap; gap: 6px; }
.bdg-chip { padding: 6px 11px; border: 0; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); font: 500 13px/1.2 var(--body); cursor: pointer; }
.bdg-chip.on { color: var(--fg); background: rgba(var(--acc), .14); box-shadow: inset 0 0 0 1px rgba(var(--acc), .45); }
.bdg-chip small { margin-inline-start: 4px; font: 500 10.5px/1 var(--mono); opacity: .7; text-transform: uppercase; }
.bdg-chip:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.gd-tab .gd-l > * { flex: none; }
.gd-tab .gd-l { flex: none; }
.gd-tab.on .gd-soon.gd-free { background: var(--dark) !important; color: var(--lime) !important; border-color: transparent; }
.gd-tab .gd-soon.gd-free { position: static !important; inset: auto !important; transform: none !important; }
.gd-tab.on .gd-soon:not(.gd-free) { color: var(--dark); border-color: rgba(15, 16, 19, .3); }

/* Toasts ("Saved.", errors, new badge…): the platform's look, the same in both themes. An ink pill with white text and
   a small mark: lime when it worked, pink when it didn't (the old brown box with green/red borders is gone). */
.toast { display: inline-flex; align-items: center; gap: 10px; width: max-content; padding: 11px 18px 11px 14px !important; border: 0 !important; border-radius: 999px !important;
  background: #16181d !important; color: #f1f2f4 !important; font: 500 14.5px/1.35 var(--body) !important; letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 14px 36px -10px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25) !important; }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #a4a9b4; }
.toast.ok::before { width: 18px; height: 18px; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1013' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.toast.err::before { width: 18px; height: 18px; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1013' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E") center / 12px no-repeat; }
:root[data-theme="light"] .toast { box-shadow: 0 14px 36px -10px rgba(15, 16, 19, .35), 0 2px 6px rgba(15, 16, 19, .15) !important; }
.navlinks:not(.legacy *) { gap: 10px; } /* room for the three-colour ring between pills */

/* ---------- v2.15 the logo (owner: "funnily interactive", no more plain lime) ----------
   On hover the monogram throws three coloured echoes (lime, blue, pink: the three spaces) and wiggles, and the
   digits 2·1·2 hop one after the other, each in its colour. A press squashes it a little. */
.logo .rzm { transform-origin: 50% 85%; transition: filter .35s cubic-bezier(.2, .8, .2, 1) !important; }
.logo:hover .rzm, .app-foot .logo:hover .rzm, :root[data-theme="light"] .logo:hover .rzm { fill: var(--fg) !important; transform: none;
  filter: drop-shadow(-2px .5px 0 var(--lime)) drop-shadow(2px .5px 0 var(--blue)) drop-shadow(0 2px 0 var(--pink)); animation: rzm-wig .7s cubic-bezier(.3, 1.4, .4, 1); }
.logo:active .rzm { transform: scale(.92, .86); transition: transform .1s; animation: none; }
@keyframes rzm-wig { 0% { transform: rotate(0); } 25% { transform: rotate(-9deg) translateY(-2px); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.logo .wm b { display: inline-flex; }
.logo .wm b .dg { font-style: normal; display: inline-block; transition: color .25s; }
.logo:hover .wm b .dg { animation: rzm-hop .5s cubic-bezier(.3, 1.6, .4, 1) both; }
.logo:hover .wm b .dg:nth-child(1) { color: var(--lime); animation-delay: .02s; }
.logo:hover .wm b .dg:nth-child(2) { color: var(--blue); animation-delay: .1s; }
.logo:hover .wm b .dg:nth-child(3) { color: var(--pink); animation-delay: .18s; }
:root[data-theme="light"] .logo:hover .wm b .dg:nth-child(1) { color: var(--lime); text-shadow: 0 0 1px rgba(15, 16, 19, .55), 0 1px 0 rgba(15, 16, 19, .35); } /* the real lime in light mode too, with a hairline so it reads on light grounds */
@keyframes rzm-hop { 40% { transform: translateY(-5px) rotate(-6deg); } 70% { transform: translateY(1px); } }
@media (prefers-reduced-motion: reduce) { .logo:hover .rzm, .logo:hover .wm b .dg { animation: none !important; } }
body[data-page="guide"] .gd-card.on .gd-ring i { color: var(--dark) !important; font-weight: 700; } /* the guide card is lime: its count is dark (owner) */

/* ---------- v2.16 Admin → Academy: the guides list and the guide editor (admin-guides.js) ----------
   The list reuses the Settings rows (.gcats/.gcat); the editor is a stack of panels: the guide's settings, a language
   tab bar, the card + cover side by side, chapters, then the steps as collapsible rows with their blocks inside. */
.agd-top { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.agd-top > div:first-child { flex: 1 1 420px; min-width: 0; }
.agd-top .note { margin: 6px 0 0; max-width: 72ch; }
.agd-top .cta-row { margin: 0; }
.agd-new { margin-bottom: 18px; }
.agd-cat { margin: 0 0 18px; }
.agd-cat > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.agd-cat > header h3 { margin: 0; font: 600 17px/1.2 var(--body); letter-spacing: 0; text-transform: none; }
.agd-cat > header .btn { margin-inline-start: auto; }
.agd-n { font: 500 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.agd-empty { margin: 0; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--muted); font-size: 14px; }
.agd-list .gcat.agd-row { grid-template-columns: auto minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .7fr) auto auto; }
.agd-list .gcat.agd-built { grid-template-columns: auto minmax(0, 1fr) auto; }
.agd-row.off input[data-l="title"] { opacity: .6; }
.agd-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.agd-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--lime); color: var(--dark); font-size: 13px; }
.agd-t { display: grid; gap: 2px; min-width: 0; }
.agd-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agd-t small { color: var(--muted); font-size: 12.5px; }
/* the editor */
.agd-ed { display: grid; gap: 14px; }
.agd-ed :is(input, textarea) { unicode-bidi: plaintext; } /* Arabic text reads right to left wherever it's typed */
.agd-bar { position: sticky; top: calc(var(--hdr, 69px) + 6px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.agd-name { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.agd-dirty { padding: 4px 10px; border-radius: 999px; background: rgba(var(--acc), .16); color: var(--fg); font: 500 12px/1.2 var(--body); }
.agd-dirty::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--pink); vertical-align: 1px; }
.agd-bar .agd-acts { margin-inline-start: auto; }
.agd-meta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .5fr) auto; gap: 10px; align-items: start; padding: 14px !important; }
.agd-meta .fld, .agd-ed .fld { margin: 0; min-width: 0; }
.agd-meta input[readonly] { opacity: .7; font-family: var(--mono); font-size: 13px; }
.agd-delf .btn { white-space: nowrap; }
.agd-lt { margin: 4px 0 0 !important; }
.agd-lt small { font: 500 10.5px/1 var(--mono); color: var(--dim); }
.agd-empty-l { display: grid; gap: 8px; }
.agd-empty-l p, .agd-lnote { margin: 0; }
.agd-lnote .btn { margin-inline-start: 6px; }
.agd-warn { margin: 0; }
.agd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.agd-sec { padding: 14px 16px !important; }
.agd-sec > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; margin: -2px 0; }
.agd-sec > summary::-webkit-details-marker, .agd-step > summary::-webkit-details-marker { display: none; }
.agd-sec > summary small { color: var(--muted); font-size: 12.5px; }
.agd-sec[open] > summary { margin-bottom: 12px; }
.agd-sec .fgrid { gap: 10px; }
.agd-sec > .btn { margin-top: 10px; }
.agd-ch { grid-template-columns: auto minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.4fr) auto !important; }
.agd-ed .mono { font-family: var(--mono); font-size: 13px; }
.agd-steps-h { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.agd-steps-h small { color: var(--muted); font-size: 12.5px; }
.agd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.agd-step { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.agd-step[open] { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.agd-step > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.agd-num { display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 6px; border-radius: 10px; background: var(--surface-2); color: var(--fg); font-size: 13px; }
.agd-step.free .agd-num { background: var(--lime); color: var(--dark); }
.agd-st { display: grid; gap: 2px; min-width: 0; }
.agd-st b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agd-st small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agd-sa { display: inline-flex; gap: 6px; align-items: center; }
.agd-sb { display: grid; gap: 12px; padding: 4px 14px 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.agd-sf { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.agd-sf .agd-w2 { grid-column: span 2; }
.agd-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.agd-b { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.agd-b-prompt { box-shadow: inset 3px 0 0 var(--lime), inset 0 0 0 1px var(--line); }
.agd-b-json { box-shadow: inset 3px 0 0 var(--blue), inset 0 0 0 1px var(--line); }
.agd-bh { display: flex; align-items: center; gap: 6px; }
.agd-bt { margin-inline-end: auto; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.agd-b .mv .icon-btn, .agd-b .icon-btn, .agd-sa .icon-btn { width: 30px; height: 30px; border-radius: 8px; }
.agd-b textarea, .agd-b input, .agd-b select { width: 100%; }
.agd-b .hint, .agd-adv .hint { margin: 0; font-size: 12px; color: var(--dim); }
.agd-addb { display: flex; gap: 8px; align-items: center; }
.agd-addb select { width: auto; min-height: 38px; }
.agd-json { width: 100%; font-family: var(--mono) !important; font-size: 12.5px !important; line-height: 1.5; }
.agd-ed .bad { box-shadow: inset 0 0 0 2px var(--pink) !important; }
#agdSave.pulse { animation: agd-pulse 1.8s ease-in-out infinite; }
@keyframes agd-pulse { 50% { box-shadow: 0 0 0 4px rgba(var(--acc), .25); } }
@media (prefers-reduced-motion: reduce) { #agdSave.pulse { animation: none; } }
@media (max-width: 900px) {
  .agd-cols { grid-template-columns: 1fr; }
  .agd-meta { grid-template-columns: 1fr 1fr; }
  .agd-sf { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 760px) {
  /* [↑↓][title ……] / [category ……][status][n] / [Edit · Preview · delete] */
  .agd-list .gcat.agd-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; }
  .agd-list .gcat.agd-row > input[data-l="title"] { grid-column: 2 / -1; }
  .agd-list .gcat.agd-row > select[data-l="cat"] { grid-column: 1 / 3; }
  .agd-list .gcat.agd-row > .agd-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .agd-list .gcat.agd-built { grid-template-columns: auto minmax(0, 1fr); }
  .agd-list .gcat.agd-built > .agd-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .agd-ch { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  .agd-ch input[data-p$=".sub"] { grid-column: 1 / -1; }
  .agd-sf { grid-template-columns: 1fr !important; }
  .agd-sf .agd-w2 { grid-column: auto; }
  .agd-meta { grid-template-columns: 1fr; }
  .agd-bar { top: calc(var(--hdr, 60px) + 4px); }
}
html[dir="rtl"] .agd-bar [data-a="back"] > span { display: inline-block; transform: scaleX(-1); }
/* the editor's fields: compact (the forms elsewhere are roomier) */
.agd-ed .fld :is(input, select, textarea), .agd-new .fld :is(input, select) { min-height: 42px; padding: 9px 12px; font-size: 15px; border-radius: 12px; }
.agd-ed .fld select, .agd-new .fld select { padding-right: 36px; background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; }
.agd-ed .fld textarea { min-height: 0; line-height: 1.5; font-family: var(--body); }
.agd-ed .fld textarea.mono { font-family: var(--mono); font-size: 13px; }
.agd-ed .fld label { margin-bottom: 4px; }
.agd-b > :is(input, select, textarea) { width: 100%; }
.agd-ed > .btn, .agd-ed .agd-sec > .btn { justify-self: start; }
.agd-addb select { flex: 0 1 200px; }
/* the Academy shelf: a guide that isn't live yet (admins only see these) */
.gd-draft { display: inline-block; margin-inline-start: 8px; padding: 2px 7px; border-radius: 999px; background: var(--pink); color: var(--dark); font: 600 10px/1.3 var(--mono); letter-spacing: .06em; vertical-align: 1px; -webkit-text-fill-color: var(--dark); }

/* ---------- v2.16 Admin → Settings layout (owner: "each has window and tabs and is actually flowing") ----------
   A small settings app: the sections on the left (a scrolling chip bar on phones), each opens as a window (a card with a
   three-dot title bar, its title, one line, its form(s) and its own Save). Windows with several forms have pill tabs.
   A dot on a section = changes not saved yet. The open section is in the hash (#settings/<section>[/<pane>]). */
.sx { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.sx-nav { position: sticky; top: calc(var(--hdr, 69px) + 14px); z-index: 2; }
.sx-nav-in { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1); }
.sx-nav [data-sx] { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px; padding-inline: 8px 12px; border: 0; border-radius: 15px; background: transparent; color: var(--fg); font: inherit; text-align: start; cursor: pointer; transition: background-color .2s, color .2s; }
.sx-nav [data-sx]:hover { background: rgba(var(--ov), .06); }
.sx-nav [data-sx]:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sx-i { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--surface-2); color: var(--fg); transition: transform .35s cubic-bezier(.3, 1.5, .4, 1), background-color .2s, color .2s; }
.sx-i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-nav [data-sx]:hover .sx-i { transform: rotate(-8deg) scale(1.06); }
.sx-l { display: grid; gap: 2px; min-width: 0; }
.sx-l b { font: 600 14.5px/1.2 var(--body); letter-spacing: 0; }
.sx-l small { font: 500 11.5px/1.3 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
.sx-nav [data-sx][aria-selected="true"] { padding-inline-end: 40px; background: var(--b3); color: var(--on-b3); box-shadow: var(--shadow-1); }
.sx-nav [data-sx][aria-selected="true"] .sx-i { background: var(--on-b3); color: var(--b3); }
.sx-nav [data-sx][aria-selected="true"] small { color: inherit; opacity: .62; }
.sx-nav [data-sx][aria-selected="true"]::after { content: ""; position: absolute; inset-inline-end: 14px; top: 50%; width: 18px; height: 12px; margin-top: -6px; background: var(--l3); transform: skewX(-18deg); border-radius: 1px; }
.sx-nav [data-sx="academy"] .sx-i, .sx-nav [data-sx="academy"][aria-selected="true"] .sx-i { background: var(--lime); color: var(--dark); }
.sx-nav [data-sx].dirty .sx-i::after { content: ""; position: absolute; top: -3px; inset-inline-end: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--surface); }
.sx-nav [data-sx].dirty[aria-selected="true"] .sx-i::after { box-shadow: 0 0 0 2px var(--b3); }

/* the window */
.sx-main { min-width: 0; }
.sx-win { min-width: 0; padding-bottom: 24px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-1); }
.sx-win.in, .sx-win .in { animation: sx-in .36s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(var(--dy, 0)) scale(.99); } }
.sx-bar { display: flex; align-items: center; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--line); border-radius: 26px 26px 0 0; background: rgba(var(--ov), .025); }
.sx-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.sx-bar i:nth-child(2) { background: var(--blue); } .sx-bar i:nth-child(3) { background: var(--pink); }
.sx-bar span { margin-inline-start: 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--muted); direction: ltr; }
.sx-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 20px 24px 0; }
#sx .sx-h h2 { margin: 0; font: 800 clamp(23px, 2.3vw, 29px)/1.1 var(--display); letter-spacing: -.02em; }
.sx-h p { grid-column: 1; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.sx-dirty { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: none; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(var(--ov), .06); font: 500 12px/1.2 var(--body); white-space: nowrap; }
.sx-dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.sx-win.dirty .sx-dirty { display: inline-flex; }
.sx-tabs { display: flex; gap: 3px; width: max-content; max-width: calc(100% - 48px); margin: 16px 24px 0; padding: 4px; border-radius: 999px; background: rgba(var(--ov), .06); overflow-x: auto; scrollbar-width: none; }
.sx-tabs::-webkit-scrollbar { display: none; }
.sx-tabs button { flex: none; padding: 7px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 13.5px/1.2 var(--body); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.sx-tabs button:hover { color: var(--fg); }
.sx-tabs button[aria-selected="true"] { background: var(--b3); color: var(--on-b3); box-shadow: var(--shadow-1); }
.sx-f { gap: 16px; padding: 20px 24px 0; }
.sx-f .form-actions { margin-top: 2px; }
#fLinks { margin-top: 22px; border-top: 1px dashed var(--line-2); }
.sx-sub, .sx-lab { display: block; font: 500 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sx-sub { color: var(--fg); }
.sx-foot { margin: 0 !important; font-size: 13px; }
.sx-warn { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 61, 139, .1); font-size: 13.5px; line-height: 1.45; }
.sx-warn b { font-weight: 600; }

/* Prices & deals */
.sx-tiers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; gap: 14px; align-items: end; }
.sx-tier { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; margin: 0; padding: 14px; border: 0; border-radius: 18px; background: rgba(var(--ov), .045); }
.sx-tl { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font: 800 16px/1.2 var(--display); letter-spacing: -.01em; }
.sx-tl::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--lime); }
.sx-tier.t-ultra .sx-tl::before { width: 18px; border-radius: 1px; background: var(--l3); transform: skewX(-18deg); }
.sx-cur { align-self: end; }
.sx-deal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-2); }
.sx-seg { display: inline-flex; width: max-content; padding: 4px; gap: 3px; border-radius: 999px; background: rgba(var(--ov), .06); }
.sx-seg label { position: relative; cursor: pointer; }
.sx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.sx-seg span { display: block; padding: 7px 14px; border-radius: 999px; font: 600 13.5px/1.2 var(--body); color: var(--muted); letter-spacing: 0; text-transform: none; transition: background-color .2s, color .2s; }
.sx-seg label:has(input:checked) span { background: var(--b3); color: var(--on-b3); box-shadow: var(--shadow-1); }
.sx-seg label:has(input:focus-visible) span { outline: 2px solid var(--fg); outline-offset: 1px; }
.sx-live { display: grid; gap: 8px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(var(--ov), .05); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.sx-chip b { padding: 4px 11px; border-radius: 999px; background: var(--lime); color: var(--dark); font-weight: 600; }
.sx-chip.t-ultra b { background: var(--b3); color: var(--on-b3); }
.sx-chip em { font-style: normal; font-weight: 600; }
.sx-chip small { color: var(--muted); font-size: 12.5px; }

/* Plans: the fields and a live preview of the card */
.sx-plan { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: start; }
.sx-pf { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.sx-pf .fgrid { width: 100%; }
.sx-pf .linkbtn { font-size: 13.5px; }
.sx-pv { position: sticky; top: calc(var(--hdr, 69px) + 20px); margin: 0; display: grid; gap: 8px; }
.sx-pv figcaption { font: 500 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sx-pvc { position: relative; display: grid; gap: 4px; padding: 20px 18px 18px; border-radius: 22px; background: var(--lime); color: var(--dark); box-shadow: var(--shadow-1); overflow: hidden; }
.pv-studio .sx-pvc { background: #16181d; color: #f1f2f4; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--shadow-1); }
.pv-studio .sx-pvc::before { content: ""; position: absolute; top: 0; inset-inline-start: 20px; width: 46px; height: 5px; background: var(--l3h); border-radius: 0 0 2px 2px; }
.pv-k { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.pv-n { font: 800 28px/1 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.pv-flag { position: absolute; top: 14px; inset-inline-end: 14px; padding: 3px 9px; border-radius: 999px; background: #f1f2f4; color: #0f1013; font: 600 11px/1.3 var(--body); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-pvc ul { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.35; }
.sx-pvc li { display: flex; gap: 8px; }
.sx-pvc li::before { content: "✓"; flex: none; font-weight: 700; }
.sx-pvc li.no { opacity: .5; } .sx-pvc li.no::before { content: "×"; }
.pv-btn { justify-self: start; margin-top: 4px; padding: 8px 14px; border-radius: 999px; background: var(--dark); color: var(--lime); font: 600 13px/1.2 var(--body); }
.pv-studio .pv-btn { background: #f1f2f4; color: #0f1013; }
.pv-note { font-size: 12px; opacity: .72; margin-top: 4px; }

/* Payments → method fees */
.sx-fees { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-fee { display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px minmax(0, 1fr); gap: 12px; align-items: end; padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2); }
.sx-fee > b { align-self: center; font-weight: 600; overflow-wrap: anywhere; }
.sx-fee .fld input { min-height: 42px; padding: 8px 12px; }
.sx-fee-ex { align-self: center; justify-self: end; font: 500 13px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.sx-fee.on .sx-fee-ex b { color: var(--fg); font-weight: 600; }
.sx-fee.on { box-shadow: inset 3px 0 0 var(--pink), inset 0 0 0 1px var(--line-2); }
html[dir="rtl"] .sx-fee.on { box-shadow: inset -3px 0 0 var(--pink), inset 0 0 0 1px var(--line-2); }

/* Promo codes */
.sx-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 20px 24px 0; }
.sx-tool .hint { font-size: 13px; color: var(--muted); }
.sx-promos { display: grid; gap: 10px; padding: 14px 24px 0; }
.sx-empty { display: grid; gap: 4px; padding: 22px; border: 1.5px dashed var(--line-2); border-radius: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.sx-empty b { color: var(--fg); font-weight: 600; }
.pr-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 1.3fr) minmax(100px, .7fr) minmax(120px, .8fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 18px; background: rgba(var(--ov), .035); box-shadow: inset 0 0 0 1px var(--line); }
.pr-code { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-cp { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 6px 11px; border: 1.5px dashed var(--line-2); border-radius: 10px; background: var(--surface); color: var(--fg); font: 600 14px/1.2 var(--mono) !important; letter-spacing: .04em; cursor: copy; white-space: nowrap; }
.pr-cp:hover { border-color: var(--fg); }
.pr-pct { flex: none; font: 800 20px/1 var(--display); letter-spacing: -.02em; direction: ltr; unicode-bidi: isolate; }
.pr-meta { display: grid; gap: 5px; min-width: 0; }
.pr-meta small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pr-tag { padding: 3px 9px; border-radius: 999px; background: rgba(var(--ov), .07); font: 500 12px/1.3 var(--body); }
.pr-tag.t-prime { background: var(--lime); color: var(--dark); }
.pr-tag.t-ultra { background: var(--b3); color: var(--on-b3); }
.pr-uses { display: grid; gap: 6px; font-size: 13.5px; }
.pr-uses b { font: 800 18px/1 var(--display); }
.pr-uses small { color: var(--muted); font-size: 12px; }
.pr-bar { display: block; height: 5px; border-radius: 3px; background: rgba(var(--ov), .1); overflow: hidden; }
.pr-bar i { display: block; height: 100%; border-radius: 3px; background: var(--l3); }
.pr-end { display: grid; gap: 4px; justify-items: start; }
.pr-end small { color: var(--muted); font-size: 12.5px; }
.pr-acts { display: flex; align-items: center; gap: 6px; }
.pr-row:is(.st-off, .st-ended, .st-used) :is(.pr-code, .pr-meta, .pr-uses) { opacity: .55; }
.pr-row.st-ended .pr-cp { text-decoration: line-through; }
/* an on/off switch */
.sx-sw { position: relative; display: inline-flex; cursor: pointer; }
.sx-sw input { position: absolute; z-index: 1; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sx-sw span { width: 40px; height: 24px; border-radius: 999px; background: rgba(var(--ov), .16); position: relative; transition: background-color .2s; }
.sx-sw span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s cubic-bezier(.3, 1.4, .4, 1); }
.sx-sw input:checked + span { background: var(--lime); }
.sx-sw input:checked + span::after { transform: translateX(16px); }
html[dir="rtl"] .sx-sw input:checked + span::after { transform: translateX(-16px); }
.sx-sw input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.sx-sw .sr, .sx .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sx-cks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sx-cks .check { font-size: 14.5px; }

/* Referrals */
.sx-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-ex { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(var(--acc), .1); font-size: 14px; line-height: 1.5; }

/* Arabic: the three lines of the main buttons sit at the start (right) of the button, not over its last word */
html[dir="rtl"] body[data-page="admin"] .btn.primary::before { transform: scaleX(-1); }
/* the Academy and Badges lists get the window's full width */
.sx-win .gcats { margin: 0; }
@media (prefers-reduced-motion: reduce) { .sx-win.in, .sx-win .in { animation: none; } .sx-i, .sx-sw span::after { transition: none; } }

@media (max-width: 1100px) { .sx { grid-template-columns: 210px minmax(0, 1fr); } .sx-plan { grid-template-columns: minmax(0, 1fr) 230px; } .pr-row { grid-template-columns: minmax(150px, 1fr) minmax(0, 1.2fr) minmax(100px, .7fr) auto; } .pr-row .pr-end { display: none; } }
@media (max-width: 860px) {
  /* phones and small tablets: the sections become a chip bar that scrolls (arrows from X.tabScroller) */
  .sx { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sx-nav { position: relative; top: auto; }
  .sx-nav-in { flex-direction: row; gap: 4px; padding: 5px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
  .sx-nav-in::-webkit-scrollbar { display: none; }
  .sx-nav [data-sx] { flex: none; width: auto; gap: 8px; padding: 5px 14px 5px 5px; padding-inline: 5px 14px; border-radius: 999px; }
  .sx-nav [data-sx][aria-selected="true"] { padding-inline-end: 34px; }
  .sx-nav [data-sx][aria-selected="true"]::after { inset-inline-end: 12px; width: 13px; height: 10px; margin-top: -5px; }
  .sx-i { width: 28px; height: 28px; border-radius: 50%; }
  .sx-i svg { width: 15px; height: 15px; }
  .sx-l small { display: none; }
  .sx-l b { font-size: 14px; white-space: nowrap; }
  .sx-plan { grid-template-columns: minmax(0, 1fr); }
  .sx-pv { position: static; }
  .pr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-row .pr-meta { grid-column: 1 / -1; }
  .pr-row .pr-end { display: grid; }
  .pr-row .pr-acts { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .sx-win { border-radius: 22px; padding-bottom: 18px; }
  .sx-bar { padding: 10px 16px; border-radius: 22px 22px 0 0; }
  .sx-h { padding: 16px 16px 0; }
  .sx-dirty { grid-column: 1; grid-row: auto; justify-self: start; }
  .sx-f, .sx-tool { padding-inline: 16px; }
  .sx-promos { padding-inline: 16px; }
  .sx-tabs { margin-inline: 16px; max-width: calc(100% - 32px); }
  .sx-tiers, .sx-deal, .sx-g3 { grid-template-columns: minmax(0, 1fr); }
  .sx-tier { padding: 12px; }
  .sx-fee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-fee > b { grid-column: 1; }
  .sx-fee .sx-fee-ex { grid-column: 2; grid-row: 1; }
  .pr-code { flex-wrap: wrap; }
}

/* v2.16 request forms: the promo code + the price line (promo, method fee, total) */
.quote-line { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 14px; color: var(--muted); }
.quote-line:empty { display: none; }
.quote-line b { color: var(--fg); font-family: var(--display); font-size: 16px; }
.fld .hint.bad { color: var(--pink); }

/* Home: Rank & badges (v2.17). Layout here (the box keeps its size before badges.css arrives); badge looks in badges.css. */
.dbdg { margin-top: 18px; min-height: 236px; }
.dbdg .db-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dbdg .db-h h3 { margin: 4px 0 0; }
.db-b { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.db-b > .skel { height: 150px; border-radius: 14px; }
.db-bdg .gr-bh { margin-top: 0; }
.db-bdg .mc-badges { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
@media (max-width: 760px) { .db-b { grid-template-columns: 1fr; gap: 22px; } .dbdg { min-height: 420px; } }

/* v2.17: round icon buttons sit exactly centred on every browser (owner: "not centered" on phone). iOS Safari gives
   buttons a 1px 6px padding and its own line box; glyph letters (avatar initial, EN, counts) are trimmed to their cap
   height so they sit in the middle whatever the font's metrics. One size in the header row: 40px. */
:where(.theme-btn, .menu-btn, .cm-bell, .icon-btn, .mn-b, .mc-x, .who) { padding: 0; -webkit-appearance: none; appearance: none; box-sizing: border-box; line-height: 0; }
:where(.theme-btn, .menu-btn, .cm-bell, .icon-btn, .mn-b, .mc-x) > svg { display: block; margin: 0; flex: none; }
:where(.theme-btn, .cm-bell, .icon-btn, .mn-b) { place-items: center; place-content: center; }
.who .av, .who-h .av, .lang-btn, .cm-bell .n { text-box: trim-both cap alphabetic; }
.cm-bell .n:not([data-n="0"]) { display: grid; place-items: center; line-height: 1 !important; padding: 0 5px; }
.lang-btn { line-height: 1; }
header .menu-btn { width: 40px; height: 40px; }
header .menu-btn span { left: 12px; right: 12px; top: calc(50% - 5px); }
header .menu-btn span:nth-child(2) { top: calc(50% + 3px); }
.cm-bell { width: 44px; height: 44px; }
.cm-bell svg { width: 20px; height: 20px; translate: 0 -1px; }        /* the bell's drawing sits low in its box */