/* DeskKit design v2 ("neon premium") — shared tokens + components.
   Spec: docs/design-v2-spec.md. Loaded after css/style.css and
   css/deskkit-ui.css on every page that opts in.

   Opt-in:  <body class="theme-v2">. Pages move over one at a time; taking
            the class off a page brings its previous look straight back.
            Pages on v2 so far: index.html, account.html, projects.html,
            account-settings.html, and the content pages of phase 2
            (guides, product pages, about / faq / contact / policies,
            the free tools) — their layout layer is css/pages-v2.css.
   Accent:  --tool (default: the DeskKit teal). A page sets its tool with
            <body class="theme-v2" data-tool="cv">, any element can carry
            data-dk-product="cv"; buttons, focus rings and glows read it.
   Light:   two different hooks.
            html.hv-light switches v2 off (the pre-v2 look comes back), so
            every dark rule below starts with html:not(.hv-light). Nothing
            sets it today; it stays as the escape hatch.
            html.dk-light is the visitor's light theme ("מצב בהיר", the
            switch in the header / phone menu / account settings, stored
            in localStorage "dk_theme", applied before the first paint by
            js/a11y-panel.js). It keeps every v2 rule and re-points the
            tokens (section 1b) plus a few surfaces (section 11 here and
            a "light theme" section at the end of each v2 stylesheet).

   Never styled here: document canvases, iframes, print output and
   published sites — this file only dresses the app's own chrome. Print
   keeps the old look (every rule is screen-only where it matters: the
   chrome itself is .no-print).

   Sections: 1 tokens · 2 page + chrome (header, mobile bar, footer)
   · 3 components (v2-*) · 4 existing classes mapped onto the components
   · 5 workspace sidebar · 6 floating buttons + their popups · 7 shared
   modals, confirms, toasts · 8 accessibility panel · 9 pages
   · 10 motion + accessibility modes. */

/* ============================================================ 1 tokens */
:root {
  --v2-bg: #05070c;
  --v2-bg-2: #080b12;
  --v2-panel: #0a0e16;
  --v2-panel-2: #0f141e;        /* raised surface: inputs, menus, chips */
  --v2-sheet: #121824;          /* "reading sheet" for long guides */
  --v2-line: rgba(255, 255, 255, .08);
  --v2-line-2: rgba(255, 255, 255, .14);
  --v2-line-3: rgba(255, 255, 255, .24);
  --v2-text: #eef2f9;
  --v2-dim: #a6b0c2;            /* body copy on dark: 9:1 */
  --v2-muted: #8b95a8;          /* small meta text: 6:1 */
  --v2-faint: #6f7a8e;          /* decoration / placeholders only */
  --v2-teal: #2dd4bf;
  --v2-teal-hi: #5eead4;
  --v2-on-teal: #03211c;        /* text on a teal button */
  --v2-danger: #ff7a85;
  --v2-danger-bg: rgba(255, 92, 108, .1);
  --v2-ok: #4ade9b;
  --v2-warn: #ffc65c;
  /* One neon per tool — the same colour everywhere a tool appears. */
  --v2-site: #3d8bff;
  --v2-cv: #a970ff;
  --v2-deck: #22d3ee;
  --v2-invoice: #ff4d9d;
  --v2-quote: #ffc933;
  --v2-xlsx: #2ee59d;
  --v2-tax: #ff9147;
  --v2-sign: #b4f05a;
  --v2-schedule: #8b8cff;       /* school timetable (guides only, for now) */
  /* Shape + motion */
  --v2-r: 20px;
  --v2-r-lg: 30px;
  --v2-r-sm: 12px;
  --v2-ease: cubic-bezier(.2, .7, .2, 1);
  --v2-ease-io: cubic-bezier(.66, 0, .16, 1);
  /* Type scale — one calm ramp for every v2 page (clamp() between a
     390px phone and a 1440px desktop). Headings read these instead of
     their own sizes, so the hierarchy stays the same site-wide:
       display  the homepage hero / automate hero        32 → ~52px
       h1       page heroes (products, guides, about…)   30 → ~46px
       title    app screens ("my projects", lists,
                editor intros)                           26 → ~39px
       h2-lg    a featured section heading (AI box,
                the three-steps timeline)                28 → ~46px
       h2       section headings                         24 → ~38px
       h3       card / benefit / step titles             18 → ~23px
       h4       small titles                             17 → ~19px
       prose-h2 headings inside long text                21 → ~27px */
  --v2-fs-display: clamp(2rem, 1.35rem + 2.1vw, 3.5rem);
  --v2-fs-h1: clamp(1.875rem, 1.3rem + 1.75vw, 3rem);
  --v2-fs-title: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem);
  --v2-fs-h2-lg: clamp(1.75rem, 1.2rem + 1.9vw, 3rem);
  --v2-fs-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  --v2-fs-h3: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  --v2-fs-h4: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  --v2-fs-prose-h2: clamp(1.3125rem, 1.15rem + .6vw, 1.75rem);
  --v2-fast: .22s;
  --v2-med: .45s;
  --v2-slow: .9s;
  --v2-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4);
  /* Surfaces and inks the components below use instead of literal colours,
     so the light theme (html.dk-light, end of this section) can re-point
     them. Dark values are the original literals. */
  --v2-card: #090d15;           /* cards: tool cards, project cards, sections */
  --v2-raise: #111723;          /* top of a modal's gradient */
  --v2-field-focus: #111724;    /* a focused field */
  --v2-well: #0b1019;           /* thumbnails, round buttons */
  --v2-void: #03050a;           /* screens, the AI stage */
  --v2-hi: #fff;                /* headings and hovered text */
  --v2-text-2: #e8edf5;
  --v2-text-3: #c6cedb;
  --v2-knob: #cfd6e2;           /* a switch's thumb */
  --v2-teal-top: #6ff0dc;       /* primary button: gradient top */
  --v2-teal-hover: #7af2df;
  --v2-teal-top-hover: #8ff6e6;
  --v2-teal-bottom-hover: #3fe0cb;
  --v2-danger-hi: #ff9aa3;
  --v2-warn-hi: #ffe1a3;
  /* rgb triplets for rgba(): ink washes and lines (fg), the sheen inside
     card gradients (lift), shadows (shade × shade-k), modal backdrops
     (scrim × scrim-k), and every neon (glows are × glow-k). */
  --v2-fg-rgb: 255, 255, 255;
  --v2-lift-rgb: 255, 255, 255;
  --v2-shade-rgb: 0, 0, 0;      --v2-shade-k: 1;
  --v2-scrim-rgb: 2, 4, 8;      --v2-scrim-k: 1;
  --v2-glow-k: 1;
  --v2-bg-rgb: 5, 7, 12;        --v2-bg-2-rgb: 8, 11, 18;
  --v2-panel-rgb: 10, 14, 22;   --v2-panel-2-rgb: 15, 20, 30;
  --v2-raise-rgb: 17, 23, 35;   --v2-card-rgb: 9, 13, 21;
  --v2-teal-rgb: 45, 212, 191;  --v2-teal-hi-rgb: 94, 234, 212;
  --v2-site-rgb: 61, 139, 255;  --v2-cv-rgb: 169, 112, 255;     --v2-deck-rgb: 34, 211, 238;
  --v2-invoice-rgb: 255, 77, 157; --v2-quote-rgb: 255, 201, 51; --v2-xlsx-rgb: 46, 229, 157;
  --v2-tax-rgb: 255, 145, 71;   --v2-sign-rgb: 180, 240, 90;
  --v2-warn-rgb: 255, 198, 92;  --v2-danger-rgb: 255, 122, 133; --v2-danger-2-rgb: 255, 92, 108; --v2-ok-rgb: 74, 222, 155;
}

/* ======================================== 1b light theme ("מצב בהיר")
   "Daylight premium": the same components, layouts and motion; only the
   tokens above and a few surfaces change (section 11). js/a11y-panel.js
   sets html.dk-light before the first paint from localStorage "dk_theme".
   Why a new class and not html.hv-light: hv-light switches v2 off
   altogether (every dark rule is html:not(.hv-light) …) and brings back
   the pre-v2 look; dk-light keeps every v2 rule and re-points its
   colours, so the hierarchy, glows-as-shadows and motion stay the same.
   The accessibility panel's high-contrast modes still win: every light
   rule is html.dk-light:not(.dka-contrast-dark, .dka-contrast-light), so with contrast on
   the page falls back to the dark tokens that those modes were tuned on.
   Tool colours: deeper siblings of the neons, AA (4.5:1) as text on the
   off-white page and on white cards. Documents, canvases and published
   sites never read these tokens. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) {
  --v2-bg: #f6f7fb;
  --v2-bg-2: #fbfcfe;
  --v2-panel: #ffffff;
  --v2-panel-2: #ffffff;
  --v2-sheet: #ffffff;
  --v2-card: #ffffff;
  --v2-raise: #ffffff;
  --v2-field-focus: #ffffff;
  --v2-well: #f1f3f8;
  --v2-void: #eef1f7;
  --v2-line: rgba(11, 16, 32, .09);
  --v2-line-2: rgba(11, 16, 32, .14);
  --v2-line-3: rgba(11, 16, 32, .26);
  --v2-text: #0b1020;
  --v2-hi: #0b1020;
  --v2-text-2: #1c2335;
  --v2-text-3: #384055;
  --v2-dim: #4a5368;            /* 7.4:1 on the page */
  --v2-muted: #5a6377;          /* 5.7:1 */
  --v2-faint: #7a8396;          /* decoration / placeholders only */
  --v2-knob: #ffffff;
  --v2-teal: #0b7a70;
  --v2-teal-hi: #0f766e;        /* teal as text: 5.1:1 */
  --v2-teal-top: #0f8378;
  --v2-teal-hover: #0a6a61;
  --v2-teal-top-hover: #0d7c71;
  --v2-teal-bottom-hover: #08665e;
  --v2-on-teal: #ffffff;
  --v2-danger: #c62a3a;
  --v2-danger-bg: rgba(198, 42, 58, .08);
  --v2-danger-hi: #a51d2c;
  --v2-ok: #067647;
  --v2-warn: #a15c07;
  --v2-warn-hi: #8a4d05;
  --v2-site: #1a66d8;
  --v2-cv: #7c3aed;
  --v2-deck: #0e7490;
  --v2-invoice: #c0246a;
  --v2-quote: #9a6411;
  --v2-xlsx: #047857;
  --v2-tax: #c2410c;
  --v2-sign: #4d7c0f;
  --v2-schedule: #5457e0;
  --v2-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 36px -16px rgba(15, 23, 42, .18);
  --v2-fg-rgb: 11, 16, 32;
  --v2-lift-rgb: 255, 255, 255;
  --v2-shade-rgb: 15, 23, 42;   --v2-shade-k: .17;
  --v2-scrim-rgb: 15, 23, 42;   --v2-scrim-k: .5;
  --v2-glow-k: .42;
  --v2-bg-rgb: 246, 247, 251;   --v2-bg-2-rgb: 251, 252, 254;
  --v2-panel-rgb: 255, 255, 255; --v2-panel-2-rgb: 255, 255, 255;
  --v2-raise-rgb: 255, 255, 255; --v2-card-rgb: 255, 255, 255;
  --v2-teal-rgb: 13, 148, 136;  --v2-teal-hi-rgb: 15, 118, 110;
  --v2-site-rgb: 26, 102, 216;  --v2-cv-rgb: 124, 58, 237;      --v2-deck-rgb: 14, 116, 144;
  --v2-invoice-rgb: 192, 36, 106; --v2-quote-rgb: 154, 100, 17; --v2-xlsx-rgb: 4, 120, 87;
  --v2-tax-rgb: 194, 65, 12;    --v2-sign-rgb: 77, 124, 15;
  --v2-warn-rgb: 161, 92, 7;    --v2-danger-rgb: 198, 42, 58;   --v2-danger-2-rgb: 220, 38, 38; --v2-ok-rgb: 6, 118, 71;
  /* Soft layered elevation for cards and panels (in place of the glow). */
  --v2-lift-1: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px -2px rgba(15, 23, 42, .06);
  --v2-lift-2: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -12px rgba(15, 23, 42, .16);
  --v2-lift-3: 0 2px 6px rgba(15, 23, 42, .06), 0 30px 70px -24px rgba(15, 23, 42, .26);
}

/* Per-tool accent: --c (the homepage's name) and --tool (everything else). */
.theme-v2 { --tool: var(--v2-teal); }
.theme-v2 [data-dk-product="site"], body.theme-v2[data-tool="site"] { --c: var(--v2-site); --tool: var(--v2-site); }
.theme-v2 [data-dk-product="cv"], body.theme-v2[data-tool="cv"] { --c: var(--v2-cv); --tool: var(--v2-cv); }
.theme-v2 [data-dk-product="deck"], body.theme-v2[data-tool="deck"] { --c: var(--v2-deck); --tool: var(--v2-deck); }
.theme-v2 [data-dk-product="invoice"], body.theme-v2[data-tool="invoice"] { --c: var(--v2-invoice); --tool: var(--v2-invoice); }
.theme-v2 [data-dk-product="quote"], body.theme-v2[data-tool="quote"] { --c: var(--v2-quote); --tool: var(--v2-quote); }
.theme-v2 [data-dk-product="xlsx"], body.theme-v2[data-tool="xlsx"] { --c: var(--v2-xlsx); --tool: var(--v2-xlsx); }
.theme-v2 [data-dk-product="tax"], body.theme-v2[data-tool="tax"] { --c: var(--v2-tax); --tool: var(--v2-tax); }
.theme-v2 [data-dk-product="sign"], body.theme-v2[data-tool="sign"] { --c: var(--v2-sign); --tool: var(--v2-sign); }
.theme-v2 [data-dk-product="schedule"], body.theme-v2[data-tool="schedule"] { --c: var(--v2-schedule); --tool: var(--v2-schedule); }

/* ================================================= 2 page + chrome */
html:not(.hv-light):has(body.theme-v2) { background: var(--v2-bg); color-scheme: dark; }
html:not(.hv-light) body.theme-v2 {
  background: var(--v2-bg); color: var(--v2-text);
  /* The older stylesheet's colour names, re-pointed for a dark page, so
     everything that already reads them (and their inline uses) follows.
     --white, --ink-light, --primary and --primary-dark keep their values:
     they double as text-on-colour / button fills. */
  --text: var(--v2-text); --text-main: var(--v2-text);
  --text-secondary: var(--v2-dim); --text-muted: var(--v2-muted);
  --dark: var(--v2-text); --ink: var(--v2-text); --ink-dark: var(--v2-hi);
  --grey: var(--v2-dim); --grey-light: var(--v2-panel-2); --ice: var(--v2-panel-2);
  --bg: var(--v2-bg); --bg-main: var(--v2-bg);
  --surface: var(--v2-panel); --bg-card: var(--v2-panel);
  --border: var(--v2-line-2); --border-color: var(--v2-line-2);
  --primary-light: rgba(var(--v2-teal-rgb), .12); --brand-dark: #14b8a6;
  --shadow: var(--v2-shadow); --shadow-lg: var(--v2-shadow); --shadow-md: var(--v2-shadow);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, .02); --shadow-sm: none;
}

/* Header */
html:not(.hv-light) body.theme-v2 header.site {
  background: rgba(var(--v2-bg-rgb), .72); border-bottom-color: rgba(var(--v2-fg-rgb), .06);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
html:not(.hv-light) body.theme-v2 .brand { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .brand-kit { color: var(--v2-teal-hi); }
/* The DeskKit mark ("Four segments": a D drawn by four tool colours —
   site, CV, invoice, quote; images/brand/README.md). Inline SVG in every
   page's header; the light theme switches to the deeper light-mark set. */
body.theme-v2 .brand { gap: 9px; }
body.theme-v2 .brand-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 34px; }
body.theme-v2 .brand-logo .brand-mark { width: 28px; height: 31px; overflow: visible; }
body.theme-v2 :is(.brand-logo, .hv-boot-mark) svg path { fill: none; stroke-width: 10; stroke-linecap: butt; stroke-linejoin: round; }
html:is(.dk-light:not(.dka-contrast-dark), .dka-contrast-light) body.theme-v2 :is(.brand-logo, .hv-boot-mark) .bm-s1 { stroke: #2f6fec; }
html:is(.dk-light:not(.dka-contrast-dark), .dka-contrast-light) body.theme-v2 :is(.brand-logo, .hv-boot-mark) .bm-s2 { stroke: #8547ee; }
html:is(.dk-light:not(.dka-contrast-dark), .dka-contrast-light) body.theme-v2 :is(.brand-logo, .hv-boot-mark) .bm-s3 { stroke: #e2337f; }
html:is(.dk-light:not(.dka-contrast-dark), .dka-contrast-light) body.theme-v2 :is(.brand-logo, .hv-boot-mark) .bm-s4 { stroke: #eaa400; }
@media (max-width: 480px) { body.theme-v2 .brand-logo { width: 26px; height: 30px; } body.theme-v2 .brand-logo .brand-mark { width: 24px; height: 27px; } }
/* The same mark beside "DeskKit" in the footer and on top of the sign-in card. */
body.theme-v2 footer.site .footer-grid > div:first-child > :is(h4, .footer-h):first-child { display: flex; align-items: center; gap: 10px; }
body.theme-v2 footer.site .footer-grid > div:first-child > :is(h4, .footer-h):first-child::before,
body.theme-v2.v2-auth .qa-gate-box::before {
  content: ""; flex: none; width: 22px; height: 24px; background: url("../images/brand/deskkit-mark-dark.svg") center / 140% no-repeat;
}
body.theme-v2.v2-auth .qa-gate-box::before { display: block; width: 40px; height: 44px; margin: -8px auto 14px; }
html:is(.dk-light:not(.dka-contrast-dark), .dka-contrast-light) body.theme-v2 footer.site .footer-grid > div:first-child > :is(h4, .footer-h):first-child::before,
html:is(.dk-light:not(.dka-contrast-dark), .dka-contrast-light) body.theme-v2.v2-auth .qa-gate-box::before { background-image: url("../images/brand/deskkit-mark-light.svg"); }
html:not(.hv-light) body.theme-v2 .nav-links a { color: var(--v2-dim); opacity: 1; }
html:not(.hv-light) body.theme-v2 .nav-links a:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .06); }
html:not(.hv-light) body.theme-v2 .nav-links a.active::after { background: var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .nav-login { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .nav-login:hover { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .lang-toggle { background: rgba(var(--v2-fg-rgb), .04); border-color: rgba(var(--v2-fg-rgb), .16); color: var(--v2-text-2); }
html:not(.hv-light) body.theme-v2 .lang-toggle:hover { background: rgba(var(--v2-fg-rgb), .09); border-color: rgba(var(--v2-fg-rgb), .3); }
html:not(.hv-light) body.theme-v2 .burger { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-header-cta { background: linear-gradient(180deg, var(--v2-teal-hi), var(--v2-teal)); color: var(--v2-on-teal); box-shadow: 0 0 22px -8px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))); }
html:not(.hv-light) body.theme-v2 .dk-header-cta:hover { background: var(--v2-teal-hover); }
html:not(.hv-light) body.theme-v2 .dk-header-avatar { color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 .dk-header-avatar:hover,
html:not(.hv-light) body.theme-v2 .dk-header-bell:hover { background: rgba(var(--v2-fg-rgb), .06); }
html:not(.hv-light) body.theme-v2 :is(.nav-links a, .nav-login, .lang-toggle, .burger, .brand, .dk-header-cta):focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
@media (max-width: 480px) {
  html:not(.hv-light) body.theme-v2 header.site .nav-login:has(.nav-login-email) { background: rgba(var(--v2-fg-rgb), .05); border-color: rgba(var(--v2-fg-rgb), .16); color: var(--v2-hi); }
}
/* Signed-in account menu (js/nav-auth.js; also opened from the sidebar) */
html:not(.hv-light) body.theme-v2 .nav-account-dropdown {
  background: var(--v2-panel-2); border-color: var(--v2-line-2); color: var(--v2-text);
  box-shadow: 0 24px 60px -20px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))), 0 0 0 1px rgba(var(--v2-shade-rgb), calc(.5 * var(--v2-shade-k)));
}
html:not(.hv-light) body.theme-v2 .nav-account-email { color: var(--v2-muted); }
html:not(.hv-light) body.theme-v2 .nav-account-dropdown :is(button, a.nav-account-settings) { color: var(--v2-text); border-color: var(--v2-line-2); background: transparent; }
html:not(.hv-light) body.theme-v2 .nav-account-dropdown :is(button, a.nav-account-settings):hover { background: rgba(var(--v2-fg-rgb), .06); border-color: var(--v2-line-3); }
html:not(.hv-light) body.theme-v2 .nav-account-dropdown .nav-account-logout { color: var(--v2-danger); border-color: rgba(var(--v2-danger-rgb), .35); }
html:not(.hv-light) body.theme-v2 .nav-account-dropdown .nav-account-logout:hover { background: var(--v2-danger-bg); }
html:not(.hv-light) body.theme-v2 .nav-account-confirm p { color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 .nav-account-unsaved-warn { background: rgba(var(--v2-warn-rgb), .1); color: var(--v2-warn); }
html:not(.hv-light) body.theme-v2 .nav-account-dropdown .nav-confirm-yes { background: #c2414f !important; border-color: #c2414f !important; color: #fff !important; }
html:not(.hv-light) body.theme-v2 .nav-account-dropdown .nav-confirm-no { background: rgba(var(--v2-fg-rgb), .06) !important; color: var(--v2-text); }

/* Mobile bottom bar */
html:not(.hv-light) body.theme-v2 .dk-mobile-nav { background: rgba(8, 11, 17, .94); border-top-color: rgba(var(--v2-fg-rgb), .08); box-shadow: 0 -10px 30px rgba(var(--v2-shade-rgb), calc(.5 * var(--v2-shade-k))); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html:not(.hv-light) body.theme-v2 .dk-mobile-nav-item { color: var(--v2-faint); }
html:not(.hv-light) body.theme-v2 .dk-mobile-nav-item.active { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .dk-mobile-nav-item-create .dk-mobile-nav-create-circle { background: var(--v2-teal); color: var(--v2-on-teal); }
html:not(.hv-light) body.theme-v2 .dk-mobile-nav-item:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: -2px; }

/* Footer */
html:not(.hv-light) body.theme-v2 footer.site { margin-top: 0; border-top: 1px solid rgba(var(--v2-fg-rgb), .06); background: linear-gradient(180deg, #06080d, #000); }

/* Full-page loading splash (signed-in pages) */
html:not(.hv-light) body.theme-v2 .auth-gate-overlay { background: var(--v2-bg); }
html:not(.hv-light) body.theme-v2 .auth-gate-spinner { border-color: rgba(var(--v2-fg-rgb), .1); border-top-color: var(--v2-teal-hi); }

/* ============================================== 3 components (v2-*)
   Markup for new and rebuilt screens. Every one has hover, keyboard
   focus (:focus-visible), pressed (:active / aria-pressed / aria-selected)
   and disabled (:disabled / aria-disabled) states. */

/* Buttons: .v2-btn + one of -primary / -secondary / -tool / -danger;
   sizes -sm / -lg; -block for full width. */
html:not(.hv-light) body.theme-v2 .v2-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 15.5px/1.2 'Heebo', system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .04); box-shadow: inset 0 0 0 1px var(--v2-line-2);
  transition: transform var(--v2-fast) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease), background-color var(--v2-fast) ease, color var(--v2-fast) ease, opacity var(--v2-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
html:not(.hv-light) body.theme-v2 .v2-btn svg { width: 18px; height: 18px; flex: none; }
html:not(.hv-light) body.theme-v2 .v2-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
html:not(.hv-light) body.theme-v2 .v2-btn-lg { min-height: 58px; padding: 0 34px; font-size: 17px; }
html:not(.hv-light) body.theme-v2 .v2-btn-block { display: flex; width: 100%; }
html:not(.hv-light) body.theme-v2 .v2-btn:focus-visible { outline: 2px solid var(--tool, var(--v2-teal-hi)); outline-offset: 3px; }
html:not(.hv-light) body.theme-v2 .v2-btn:active { transform: scale(.98); }
html:not(.hv-light) body.theme-v2 :is(.v2-btn:disabled, .v2-btn[aria-disabled="true"]) { opacity: .45; cursor: not-allowed; transform: none; box-shadow: inset 0 0 0 1px var(--v2-line-2); }

html:not(.hv-light) body.theme-v2 .v2-btn-primary {
  color: var(--v2-on-teal); background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal));
  box-shadow: inset 0 0 0 1px rgba(160, 255, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 32px -12px rgba(var(--v2-teal-rgb), calc(.75 * var(--v2-glow-k))), 0 0 46px -16px rgba(var(--v2-teal-rgb), calc(.8 * var(--v2-glow-k)));
}
html:not(.hv-light) body.theme-v2 .v2-btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(190, 255, 245, .8), inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 40px -12px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))), 0 0 60px -12px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))); }
html:not(.hv-light) body.theme-v2 .v2-btn-primary:active { transform: translateY(0) scale(.98); background: var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .v2-btn-primary:focus-visible { outline-color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 :is(.v2-btn-primary:disabled, .v2-btn-primary[aria-disabled="true"]) { background: #1f5b54; color: #b9d8d3; }

html:not(.hv-light) body.theme-v2 .v2-btn-secondary:hover { background: rgba(var(--v2-fg-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .34); color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .v2-btn-secondary:active { background: rgba(var(--v2-fg-rgb), .12); }

html:not(.hv-light) body.theme-v2 .v2-btn-tool {
  color: var(--v2-hi); background: linear-gradient(180deg, color-mix(in srgb, var(--tool) 16%, transparent), color-mix(in srgb, var(--tool) 5%, transparent)), var(--v2-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool) 60%, transparent), 0 0 26px -10px var(--tool);
}
html:not(.hv-light) body.theme-v2 .v2-btn-tool:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--tool), 0 0 32px -6px var(--tool); }
html:not(.hv-light) body.theme-v2 .v2-btn-tool:active { background: color-mix(in srgb, var(--tool) 26%, var(--v2-panel)); }

html:not(.hv-light) body.theme-v2 .v2-btn-danger { color: var(--v2-danger); background: var(--v2-danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--v2-danger-rgb), .4); }
html:not(.hv-light) body.theme-v2 .v2-btn-danger:hover { background: rgba(var(--v2-danger-2-rgb), .18); box-shadow: inset 0 0 0 1px var(--v2-danger); }
html:not(.hv-light) body.theme-v2 .v2-btn-danger:focus-visible { outline-color: var(--v2-danger); }

/* Card + panel + reading sheet */
html:not(.hv-light) body.theme-v2 .v2-card {
  position: relative; box-sizing: border-box; padding: 24px; border-radius: var(--v2-r); color: var(--v2-text);
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .07), 0 1px 0 rgba(var(--v2-fg-rgb), .03);
  transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease);
}
html:not(.hv-light) body.theme-v2 :is(a.v2-card, button.v2-card, .v2-card-link):hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool) 55%, transparent), 0 26px 50px -30px color-mix(in srgb, var(--tool) 70%, transparent); }
html:not(.hv-light) body.theme-v2 :is(a.v2-card, button.v2-card, .v2-card-link):focus-visible { outline: 2px solid var(--tool); outline-offset: 3px; }
html:not(.hv-light) body.theme-v2 :is(a.v2-card, button.v2-card, .v2-card-link):active { transform: translateY(-1px) scale(.99); }
html:not(.hv-light) body.theme-v2 .v2-panel {
  box-sizing: border-box; padding: clamp(20px, 3vw, 32px); border-radius: var(--v2-r-lg); color: var(--v2-text);
  background: linear-gradient(180deg, rgba(16, 22, 34, .9), rgba(8, 12, 19, .94));
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .1), 0 40px 90px -40px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k)));
}
html:not(.hv-light) body.theme-v2 .v2-sheet { /* long guides: one step lighter than the page */
  box-sizing: border-box; max-width: 70ch; margin-inline: auto; padding: clamp(22px, 4vw, 48px);
  border-radius: var(--v2-r); background: var(--v2-sheet); color: var(--v2-text); line-height: 1.8;
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .07);
}

/* Fields: .v2-input / .v2-select / .v2-textarea; .v2-label, .v2-hint, .v2-error */
html:not(.hv-light) body.theme-v2 .v2-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 .v2-hint { margin: 6px 0 0; font-size: 13px; color: var(--v2-muted); }
html:not(.hv-light) body.theme-v2 .v2-error { margin: 6px 0 0; font-size: 13px; color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 :is(.v2-input, .v2-select, .v2-textarea) {
  display: block; width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 14px; border-radius: var(--v2-r-sm);
  font: 400 15px/1.4 'Heebo', system-ui, sans-serif; color: var(--v2-text); caret-color: var(--v2-teal-hi);
  background: var(--v2-panel-2); border: 1px solid var(--v2-line-2);
  transition: border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .v2-textarea { min-height: 96px; resize: vertical; }
html:not(.hv-light) body.theme-v2 :is(.v2-input, .v2-textarea)::placeholder { color: var(--v2-faint); }
html:not(.hv-light) body.theme-v2 :is(.v2-input, .v2-select, .v2-textarea):hover { border-color: var(--v2-line-3); }
html:not(.hv-light) body.theme-v2 :is(.v2-input, .v2-select, .v2-textarea):focus { outline: none; border-color: color-mix(in srgb, var(--tool) 75%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tool) 16%, transparent); background: var(--v2-field-focus); }
html:not(.hv-light) body.theme-v2 :is(.v2-input, .v2-select, .v2-textarea)[aria-invalid="true"] { border-color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 :is(.v2-input, .v2-select, .v2-textarea):disabled { opacity: .5; cursor: not-allowed; }
html:not(.hv-light) body.theme-v2 .v2-select {
  appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b0c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px; background-position: left 14px center;
}
html:not(.hv-light)[dir="ltr"] body.theme-v2 .v2-select { background-position: right 14px center; }
html:not(.hv-light) body.theme-v2 .v2-select option { background: var(--v2-panel-2); color: var(--v2-text); }

/* Checkbox (.v2-check wraps a real input + its text) and switch (.v2-switch:
   a real checkbox with role="switch"). */
html:not(.hv-light) body.theme-v2 :is(.v2-check, .v2-switch) { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--v2-text); font-size: 15px; min-height: 44px; }
html:not(.hv-light) body.theme-v2 .v2-check input[type="checkbox"],
html:not(.hv-light) body.theme-v2 input[type="checkbox"].v2-check-input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  background: var(--v2-panel-2); border: 1.5px solid var(--v2-line-3); display: inline-grid; place-content: center;
  transition: background-color var(--v2-fast) ease, border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .v2-check input[type="checkbox"]::before,
html:not(.hv-light) body.theme-v2 input[type="checkbox"].v2-check-input::before {
  content: ""; width: 11px; height: 11px; transform: scale(0); transition: transform var(--v2-fast) var(--v2-ease);
  background: var(--v2-on-teal); clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 69%);
}
html:not(.hv-light) body.theme-v2 .v2-check input[type="checkbox"]:checked,
html:not(.hv-light) body.theme-v2 input[type="checkbox"].v2-check-input:checked { background: var(--v2-teal); border-color: var(--v2-teal); box-shadow: 0 0 14px -3px var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .v2-check input[type="checkbox"]:checked::before,
html:not(.hv-light) body.theme-v2 input[type="checkbox"].v2-check-input:checked::before { transform: scale(1); }
html:not(.hv-light) body.theme-v2 .v2-switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative; width: 44px; height: 26px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--v2-fg-rgb), .1); box-shadow: inset 0 0 0 1px var(--v2-line-2);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .v2-switch input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--v2-knob); transition: inset-inline-start var(--v2-fast) var(--v2-ease), background-color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .v2-switch input[type="checkbox"]:checked { background: color-mix(in srgb, var(--tool) 55%, var(--v2-panel)); box-shadow: inset 0 0 0 1px var(--tool), 0 0 16px -4px var(--tool); }
html:not(.hv-light) body.theme-v2 .v2-switch input[type="checkbox"]:checked::after { inset-inline-start: 21px; background: #fff; }
html:not(.hv-light) body.theme-v2 :is(.v2-check, .v2-switch) input:focus-visible { outline: 2px solid var(--tool); outline-offset: 3px; }
html:not(.hv-light) body.theme-v2 :is(.v2-check, .v2-switch) input:disabled { opacity: .45; cursor: not-allowed; }

/* Tabs: .v2-tabs > .v2-tab (aria-selected="true" or .active marks the current one) */
html:not(.hv-light) body.theme-v2 .v2-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(var(--v2-fg-rgb), .03); box-shadow: inset 0 0 0 1px var(--v2-line); width: fit-content; max-width: 100%; box-sizing: border-box; }
html:not(.hv-light) body.theme-v2 .v2-tab {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: transparent;
  font: 600 14px/1.2 'Heebo', system-ui, sans-serif; color: var(--v2-dim);
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .v2-tab:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .05); }
html:not(.hv-light) body.theme-v2 :is(.v2-tab[aria-selected="true"], .v2-tab.active) { color: var(--v2-hi); background: color-mix(in srgb, var(--tool) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool) 55%, transparent), 0 0 18px -8px var(--tool); }
html:not(.hv-light) body.theme-v2 .v2-tab:focus-visible { outline: 2px solid var(--tool); outline-offset: 2px; }
html:not(.hv-light) body.theme-v2 .v2-tab:disabled { opacity: .4; cursor: not-allowed; }

/* Badge: .v2-badge (+ -tool / -ok / -warn / -danger) */
html:not(.hv-light) body.theme-v2 .v2-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .06); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light) body.theme-v2 .v2-badge-tool { color: var(--tool); background: color-mix(in srgb, var(--tool) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool) 40%, transparent); }
html:not(.hv-light) body.theme-v2 .v2-badge-ok { color: var(--v2-ok); background: rgba(var(--v2-ok-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--v2-ok-rgb), .35); }
html:not(.hv-light) body.theme-v2 .v2-badge-warn { color: var(--v2-warn); background: rgba(var(--v2-warn-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .35); }
html:not(.hv-light) body.theme-v2 .v2-badge-danger { color: var(--v2-danger); background: var(--v2-danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--v2-danger-rgb), .35); }

/* Table: .v2-table (wrap in .v2-table-wrap to scroll sideways on phones) */
html:not(.hv-light) body.theme-v2 .v2-table-wrap { max-width: 100%; overflow-x: auto; border-radius: var(--v2-r-sm); box-shadow: inset 0 0 0 1px var(--v2-line); }
html:not(.hv-light) body.theme-v2 .v2-table { width: 100%; border-collapse: collapse; font-size: 14.5px; color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 .v2-table :is(th, td) { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--v2-line); }
html:not(.hv-light) body.theme-v2 .v2-table th { font-size: 13px; font-weight: 700; color: var(--v2-muted); background: rgba(var(--v2-fg-rgb), .025); }
html:not(.hv-light) body.theme-v2 .v2-table tbody tr:hover { background: rgba(var(--v2-fg-rgb), .03); }
html:not(.hv-light) body.theme-v2 .v2-table tbody tr:last-child td { border-bottom: 0; }

/* Modal: .v2-modal-backdrop > .v2-modal (role="dialog"); .v2-modal-actions */
html:not(.hv-light) body.theme-v2 .v2-modal-backdrop {
  position: fixed; inset: 0; z-index: 5500; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(var(--v2-scrim-rgb), calc(.72 * var(--v2-scrim-k))); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html:not(.hv-light) body.theme-v2 .v2-modal {
  position: relative; box-sizing: border-box; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  padding: 28px 26px 22px; border-radius: 24px; color: var(--v2-text); text-align: start;
  background: radial-gradient(120% 80% at 100% 0%, rgba(var(--v2-teal-rgb), .08), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 80px -40px rgba(var(--v2-teal-rgb), calc(.45 * var(--v2-glow-k)));
}
html:not(.hv-light) body.theme-v2 .v2-modal h2 { margin: 0 0 8px; font-size: 20px; color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .v2-modal p { margin: 0 0 18px; color: var(--v2-dim); line-height: 1.65; }
html:not(.hv-light) body.theme-v2 .v2-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Toast: .v2-toast (+ -ok / -error); role="status" */
html:not(.hv-light) body.theme-v2 .v2-toast {
  position: fixed; z-index: 6000; left: 50%; bottom: calc(24px + max(var(--dk-mnav-h, 0px), env(safe-area-inset-bottom, 0px))); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; color: var(--v2-text);
  background: rgba(var(--v2-panel-2-rgb), .96); box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 20px 50px -16px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
  border-inline-start: 3px solid var(--v2-teal);
}
html:not(.hv-light) body.theme-v2 .v2-toast-ok { border-inline-start-color: var(--v2-ok); }
html:not(.hv-light) body.theme-v2 .v2-toast-error { border-inline-start-color: var(--v2-danger); }

/* ======================= 4 existing classes, mapped onto the components
   So pages that move to v2 don't need their markup rewritten. */
html:not(.hv-light) body.theme-v2 :is(.btn-teal, .btn-gold, .dk-btn-primary) {
  color: var(--v2-on-teal); background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal)); border: 0;
  box-shadow: inset 0 0 0 1px rgba(160, 255, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 32px -14px rgba(var(--v2-teal-rgb), calc(.75 * var(--v2-glow-k)));
}
html:not(.hv-light) body.theme-v2 :is(.btn-teal, .btn-gold, .dk-btn-primary):hover { transform: translateY(-1px); background: linear-gradient(180deg, var(--v2-teal-top-hover), var(--v2-teal-bottom-hover)); box-shadow: inset 0 0 0 1px rgba(190, 255, 245, .8), 0 16px 40px -12px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))), 0 0 50px -14px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))); }
html:not(.hv-light) body.theme-v2 :is(.btn-teal, .btn-gold, .dk-btn-primary):active { transform: scale(.98); background: var(--v2-teal); }
html:not(.hv-light) body.theme-v2 :is(.btn-outline, .btn-outline-dark, .dk-btn-ghost) { color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .03); border: 1px solid var(--v2-line-2); }
html:not(.hv-light) body.theme-v2 :is(.btn-outline, .btn-outline-dark, .dk-btn-ghost):hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .08); border-color: rgba(var(--v2-fg-rgb), .34); }
html:not(.hv-light) body.theme-v2 :is(.btn, .dk-btn):focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
html:not(.hv-light) body.theme-v2 :is(.btn, .dk-btn):disabled { opacity: .45; }

/* Text fields inside the app's own forms and popups */
html:not(.hv-light) body.theme-v2 :is(.builder-form, .qa-gate-box, .widget-modal, .chat-input-row, .dk-create-unsure, .dk-credit-key-row, .as-section, .v2-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea) {
  color: var(--v2-text); background-color: var(--v2-panel-2); border: 1px solid var(--v2-line-2); caret-color: var(--v2-teal-hi);
  transition: border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 :is(.builder-form, .qa-gate-box, .widget-modal, .chat-input-row, .dk-create-unsure, .dk-credit-key-row, .as-section, .v2-field) :is(input, select, textarea)::placeholder { color: var(--v2-faint); }
html:not(.hv-light) body.theme-v2 :is(.builder-form, .qa-gate-box, .widget-modal, .chat-input-row, .dk-create-unsure, .dk-credit-key-row, .as-section, .v2-field) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: var(--v2-line-3); }
html:not(.hv-light) body.theme-v2 :is(.builder-form, .qa-gate-box, .widget-modal, .chat-input-row, .dk-create-unsure, .dk-credit-key-row, .as-section, .v2-field) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none; border-color: color-mix(in srgb, var(--tool) 75%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tool) 16%, transparent); }
html:not(.hv-light) body.theme-v2 :is(.builder-form, .as-section, .v2-field) select option { background: var(--v2-panel-2); color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 :is(.builder-form, .qa-gate-box, .as-section, .v2-field) input[type="checkbox"] { accent-color: var(--v2-teal); }

/* =================================================== 5 workspace sidebar
   js/app-sidebar.js — a dark panel, a glowing divider along its inner
   edge, tool icons in soft neon, and the current page marked with a bar
   of light in that item's colour (teal for Home / Projects / Settings). */
html:not(.hv-light) body.theme-v2 .dk-app-sidebar {
  background: linear-gradient(180deg, rgba(var(--v2-teal-rgb), .035), transparent 30%), var(--v2-bg-2);
  border-inline-end-color: transparent;
}
html:not(.hv-light) body.theme-v2 .dk-app-sidebar::after { /* the glowing divider */
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: -1px; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--v2-teal-hi-rgb), .55), rgba(var(--v2-site-rgb), .35) 45%, rgba(var(--v2-cv-rgb), .22) 75%, rgba(var(--v2-lift-rgb), .06));
  box-shadow: 0 0 10px 0 rgba(var(--v2-teal-rgb), calc(.35 * var(--v2-glow-k)));
}
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item {
  --c: var(--v2-teal-hi);
  position: relative; color: var(--v2-dim); min-height: 44px; box-sizing: border-box;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item[data-dk-product] { --c: var(--tool); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .05); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item:active { background: rgba(var(--v2-fg-rgb), .08); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item.active {
  color: var(--v2-hi); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
}
html[dir="rtl"]:not(.hv-light) body.theme-v2 .dk-app-sidebar-item.active { background: linear-gradient(270deg, color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 4%, transparent)); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item.active::before { /* the bar of light */
  content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: var(--c); box-shadow: 0 0 12px 1px var(--c), 0 0 3px var(--c);
}
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-icon {
  color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .04); box-shadow: inset 0 0 0 1px var(--v2-line);
  transition: color var(--v2-fast) ease, background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item[data-dk-product] .dk-app-sidebar-icon {
  color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-item:is(:hover, .active) .dk-app-sidebar-icon {
  color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 0 14px -4px var(--c);
}
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-divider { background: linear-gradient(90deg, transparent, var(--v2-line-2), transparent); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-toggle { background: var(--v2-panel-2); color: var(--v2-dim); border-color: var(--v2-line-2); box-shadow: 0 4px 14px rgba(var(--v2-shade-rgb), calc(.5 * var(--v2-shade-k))); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-toggle:hover { color: var(--v2-teal-hi); border-color: var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-toggle:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-account { border-top-color: var(--v2-line); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-account-toggle { color: var(--v2-dim); min-height: 44px; }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-account-toggle:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .05); }
html:not(.hv-light) body.theme-v2 .dk-app-sidebar-account-toggle:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: -2px; }
/* The floating buttons are pinned to physical corners; on the sidebar's
   side they sat on its items and account row. Start them past the
   sidebar, at the foot of the content area. */
@media (min-width: 901px) {
  html[dir="rtl"]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted :is(.fab-chat, .chat-panel) { right: calc(var(--app-sidebar-w, 216px) + 24px); }
  html[dir="ltr"]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted :is(.fab-feedback, .fab-a11y) { left: calc(var(--app-sidebar-w, 216px) + 24px); }
  /* An editor open beside the sidebar (a Builder Shell covers the rest of
     the page): the three buttons sit in one row at the foot of the
     editor's structure column — the column next to the sidebar — never
     over the sidebar's items; the column ends above that strip, so its
     rows never pass under them, and the assistant's panel opens above
     the row. Same in both themes and both
     directions (logical insets). */
  html[dir]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted:has(.bshell.active) :is(.fab-a11y, .fab-chat, .fab-feedback) {
    left: auto; right: auto; bottom: 14px; width: 44px; height: 44px; font-size: 18px; z-index: 5100;
  }
  html[dir]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted:has(.bshell.active) :is(.fab-a11y, .fab-chat) svg { width: 21px; height: 21px; }
  html[dir]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted:has(.bshell.active) .fab-a11y { inset-inline-start: calc(var(--app-sidebar-w, 216px) + 14px); }
  html[dir]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted:has(.bshell.active) .fab-chat { inset-inline-start: calc(var(--app-sidebar-w, 216px) + 68px); }
  html[dir]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted:has(.bshell.active) .fab-feedback { inset-inline-start: calc(var(--app-sidebar-w, 216px) + 122px); }
  html[dir]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted:has(.bshell.active) .chat-panel { left: auto; right: auto; inset-inline-start: calc(var(--app-sidebar-w, 216px) + 14px); bottom: 70px; }
  html[dir]:not(.hv-light) body.theme-v2.dk-app-sidebar-mounted .bshell.active .bshell-hier {
    border-bottom: 72px solid transparent; background-clip: padding-box; box-sizing: border-box; /* the row's own strip: the list scrolls above it */
  }
}

/* ============================== 6 floating buttons (★, 💬, ♿) + popups
   js/widgets.js. Dark round buttons with a neon ring in their own colour:
   rating = warm gold, assistant = DeskKit teal, accessibility = white. */
html:not(.hv-light) body.theme-v2 .fab {
  --c: var(--v2-teal);
  color: var(--c); border: 0;
  background: radial-gradient(70% 70% at 50% 25%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--v2-well);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 24px -6px color-mix(in srgb, var(--c) 80%, transparent), 0 12px 28px -8px rgba(var(--v2-shade-rgb), calc(.8 * var(--v2-shade-k)));
  transition: transform var(--v2-fast) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease), background-color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .fab:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--c), 0 0 34px -4px var(--c), 0 16px 32px -8px rgba(var(--v2-shade-rgb), calc(.85 * var(--v2-shade-k))); }
html:not(.hv-light) body.theme-v2 .fab:active { transform: translateY(-1px) scale(.96); }
html:not(.hv-light) body.theme-v2 .fab:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
html:not(.hv-light) body.theme-v2 .fab-feedback { --c: #ffd25e; text-shadow: 0 0 10px rgba(255, 210, 94, .7); }
html:not(.hv-light) body.theme-v2 .fab-chat { --c: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .fab-chat svg circle { fill: var(--v2-well); }
html:not(.hv-light) body.theme-v2 .fab-a11y { --c: #e6ebf5; color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .fab-a11y:hover { border-color: transparent; }
html:not(.hv-light) body.theme-v2 .fab.fab-help { --c: var(--v2-teal-hi); color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .fab-help-q { background: var(--v2-teal); color: var(--v2-on-teal); }
html:not(.hv-light) body.theme-v2 .fab-help-menu { background: linear-gradient(180deg, var(--v2-raise), var(--v2-panel)); border: 0; box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 24px 60px -16px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))); }
html:not(.hv-light) body.theme-v2 .fab-help-item { color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 .fab-help-item:is(:hover, :focus-visible) { background: rgba(var(--v2-fg-rgb), .07); color: var(--v2-hi); }

/* Rating popup */
html:not(.hv-light) body.theme-v2 .widget-overlay { background: rgba(var(--v2-scrim-rgb), calc(.72 * var(--v2-scrim-k))); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.hv-light) body.theme-v2 .widget-modal {
  border-radius: 24px; color: var(--v2-text);
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 210, 94, .07), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k)));
}
html:not(.hv-light) body.theme-v2 .widget-modal h3 { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .widget-sub, html:not(.hv-light) body.theme-v2 .widget-note { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .widget-note.ok { color: var(--v2-ok); }
html:not(.hv-light) body.theme-v2 .widget-note.warn { color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 .widget-note a { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .widget-close { background: rgba(var(--v2-fg-rgb), .06); color: var(--v2-dim); box-shadow: inset 0 0 0 1px var(--v2-line); }
html:not(.hv-light) body.theme-v2 .widget-close:hover { background: rgba(var(--v2-fg-rgb), .12); color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .widget-close:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
html:not(.hv-light) body.theme-v2 .star { color: #2a3243; transition: color var(--v2-fast) ease, text-shadow var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease); }
html:not(.hv-light) body.theme-v2 .star:hover { transform: scale(1.12); }
html:not(.hv-light) body.theme-v2 .star.filled { color: #ffd25e; text-shadow: 0 0 12px rgba(255, 210, 94, .65); }
html:not(.hv-light) body.theme-v2 .star:focus-visible { outline: 2px solid #ffd25e; outline-offset: 2px; border-radius: 6px; }

/* Assistant chat */
html:not(.hv-light) body.theme-v2 .chat-panel {
  border-radius: 22px; border: 0; color: var(--v2-text); background: var(--v2-panel);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 90px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 60px -30px rgba(var(--v2-teal-rgb), calc(.5 * var(--v2-glow-k)));
}
html:not(.hv-light) body.theme-v2 .chat-head {
  color: var(--v2-hi); border-bottom: 1px solid var(--v2-line);
  background: radial-gradient(120% 160% at 100% 0%, rgba(var(--v2-teal-rgb), .2), transparent 60%), #0d131d;
}
html[dir="ltr"]:not(.hv-light) body.theme-v2 .chat-head { background: radial-gradient(120% 160% at 0% 0%, rgba(var(--v2-teal-rgb), .2), transparent 60%), #0d131d; }
html:not(.hv-light) body.theme-v2 .chat-head .widget-close { background: rgba(var(--v2-fg-rgb), .08); color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .chat-body { background: var(--v2-bg-2); }
html:not(.hv-light) body.theme-v2 .chat-msg-bot .chat-bubble { background: var(--v2-panel-2); color: var(--v2-text); box-shadow: inset 0 0 0 1px var(--v2-line); }
html:not(.hv-light) body.theme-v2 .chat-msg-user .chat-bubble { background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal)); color: var(--v2-on-teal); }
html:not(.hv-light) body.theme-v2 .chat-link { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .chat-msg-user .chat-link { color: var(--v2-on-teal); }
html:not(.hv-light) body.theme-v2 .chat-quick { background: var(--v2-panel); border-top-color: var(--v2-line); }
html:not(.hv-light) body.theme-v2 :is(.chat-menu-btn, .chat-chip) { background: rgba(var(--v2-fg-rgb), .04); color: var(--v2-text); box-shadow: inset 0 0 0 1px var(--v2-line-2); transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease; }
html:not(.hv-light) body.theme-v2 :is(.chat-menu-btn, .chat-chip):hover { background: rgba(var(--v2-teal-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .55); }
html:not(.hv-light) body.theme-v2 :is(.chat-menu-btn, .chat-chip):focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
html:not(.hv-light) body.theme-v2 .chat-menu-back, html:not(.hv-light) body.theme-v2 .chat-menu-back:hover { background: none; box-shadow: none; color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .chat-menu-back:hover { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .chat-input-row { border-top-color: var(--v2-line); background: var(--v2-panel); }

/* "איך יצא?" prompt after a download / publish (js/widgets.js
   dkAskFeedback). Not gated on body.theme-v2: it can show on any page
   that loads this file, and the tokens live on :root (light theme
   re-points them). Floating = a small card in a free corner; inline = a
   quiet block inside the result it follows (the publish dialog). */
.dk-fbp {
  --fbp-accent: #ffd25e;
  box-sizing: border-box; position: relative; color: var(--v2-text, #eef2f9); font-size: 14px; line-height: 1.45;
  border-radius: var(--v2-r-sm, 12px); padding: 12px 14px 12px; max-width: 100%;
}
.dk-fbp[hidden], .dk-fbp [hidden] { display: none !important; }
.dk-fbp-float {
  /* above the editors' full-screen shell (5000) and its sidebar, below their menus (5100) and every dialog / toast (5500+) */
  position: fixed; z-index: 5050; width: 300px; max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, var(--v2-raise, #121824), var(--v2-panel, #0a0e16));
  box-shadow: inset 0 0 0 1px var(--v2-line-2, rgba(255, 255, 255, .14)), 0 24px 60px -18px rgba(var(--v2-shade-rgb, 0, 0, 0), calc(.9 * var(--v2-shade-k, 1)));
}
@media (max-width: 640px) { .dk-fbp-float { width: auto; max-width: none; } }
.dk-fbp-inline { margin-top: 14px; background: rgba(var(--v2-fg-rgb, 255, 255, 255), .03); box-shadow: inset 0 0 0 1px var(--v2-line, rgba(255, 255, 255, .08)); }
.dk-publish-modal .dk-fbp { --fbp-accent: var(--v2-site, #3d8bff); }
.dk-fbp-q { margin: 0 0 4px; padding-inline-end: 34px; font-weight: 700; font-size: 15px; color: var(--v2-hi, #fff); }
.dk-fbp-x {
  position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--v2-dim, #a6b0c2); background: rgba(var(--v2-fg-rgb, 255, 255, 255), .06);
}
.dk-fbp-x:hover { color: var(--v2-hi, #fff); background: rgba(var(--v2-fg-rgb, 255, 255, 255), .12); }
.dk-fbp-stars { display: flex; gap: 2px; }
.dk-fbp-star {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--v2-line-3, rgba(255, 255, 255, .24));
}
.dk-fbp-star.filled { color: var(--fbp-accent); }
.dk-fbp-star:hover { color: color-mix(in srgb, var(--fbp-accent) 70%, transparent); }
.dk-fbp-star.filled:hover { color: var(--fbp-accent); }
.dk-fbp :is(.dk-fbp-star, .dk-fbp-x, .dk-fbp-send, .dk-fbp-text):focus-visible { outline: 2px solid var(--v2-teal-hi, #5eead4); outline-offset: 2px; }
.dk-fbp-more { margin-top: 8px; }
.dk-fbp-label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--v2-dim, #a6b0c2); }
.dk-fbp-text {
  display: block; width: 100%; box-sizing: border-box; min-height: 56px; resize: vertical; padding: 8px 10px; border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--v2-text, #eef2f9); background: var(--v2-panel-2, #0f141e); border: 1px solid var(--v2-line-2, rgba(255, 255, 255, .14));
}
.dk-fbp-show { margin-top: 8px; }
.dk-fbp-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--v2-text, #eef2f9); cursor: pointer; line-height: 1.4; }
.dk-fbp-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--fbp-accent); }
#dk-fbp-name-wrap { margin-top: 8px; }
.dk-fbp-name {
  display: block; width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 10px; border-radius: 10px;
  font: inherit; font-size: 16px; color: var(--v2-text, #eef2f9); background: var(--v2-panel-2, #0f141e); border: 1px solid var(--v2-line-2, rgba(255, 255, 255, .14));
}
.dk-fbp-name:focus-visible, .dk-fbp-check input:focus-visible { outline: 2px solid var(--v2-teal-hi, #5eead4); outline-offset: 2px; }
.dk-fbp-send { margin-top: 8px; width: 100%; min-height: 44px; }
.dk-fbp-status { margin: 0; font-size: 13px; color: var(--v2-dim, #a6b0c2); }
.dk-fbp-status:not(:empty) { margin-top: 6px; }
.dk-fbp.is-done .dk-fbp-status { margin-top: 0; padding-inline-end: 34px; min-height: 32px; display: flex; align-items: center; }
.dk-fbp-status.ok { color: var(--v2-ok, #4ade9b); font-weight: 600; }
.dk-fbp-status.warn { color: var(--v2-danger, #ff7a85); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .dk-fbp { --fbp-accent: #b07d00; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .dk-publish-modal .dk-fbp { --fbp-accent: var(--v2-site, #2f6fec); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .dk-fbp-float { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .1), var(--v2-lift-3, 0 24px 60px -18px rgba(15, 23, 42, .3)); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .dk-fbp-star { color: #c4cad6; }
/* Light mode: the grey above must not win over a chosen star. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .dk-fbp-star:hover { color: color-mix(in srgb, var(--fbp-accent) 70%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .dk-fbp-star.filled { color: var(--fbp-accent); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.dka-still) .dk-fbp-float { animation: dkFbpIn .28s var(--v2-ease, ease-out) both; }
}
@keyframes dkFbpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media print { .dk-fbp { display: none !important; } }

/* ========================== 7 shared modals, confirms, toasts, notices */
/* The popup frame used by the create chooser, the domain guide and the
   purchase / license-key dialog (js/doc-credit-unlock.js). */
html:not(.hv-light) body.theme-v2 .domain-guide-overlay { background: rgba(var(--v2-scrim-rgb), calc(.72 * var(--v2-scrim-k))); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.hv-light) body.theme-v2 .domain-guide-modal {
  border-radius: 24px; color: var(--v2-text);
  background: radial-gradient(120% 70% at 100% 0%, rgba(var(--v2-teal-rgb), .07), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 80px -40px rgba(var(--v2-teal-rgb), calc(.4 * var(--v2-glow-k)));
}
html:not(.hv-light) body.theme-v2 .domain-guide-modal h2 { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .domain-guide-modal > .lead { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .domain-guide-close { background: rgba(var(--v2-fg-rgb), .06); color: var(--v2-dim); box-shadow: inset 0 0 0 1px var(--v2-line); }
html:not(.hv-light) body.theme-v2 .domain-guide-close:hover { background: rgba(var(--v2-fg-rgb), .12); color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .domain-guide-close:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
html:not(.hv-light) body.theme-v2 .domain-guide-num { background: rgba(var(--v2-teal-rgb), .12); color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .domain-guide-step-body h3 { color: var(--v2-hi); }
/* Create chooser options */
html:not(.hv-light) body.theme-v2 .dk-create-opt { --c: var(--v2-teal-hi); background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line); color: var(--v2-text); transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease; }
html:not(.hv-light) body.theme-v2 .dk-create-opt[data-dk-product] { --c: var(--tool); }
html:not(.hv-light) body.theme-v2 .dk-create-opt:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); box-shadow: 0 0 24px -12px var(--c); }
html:not(.hv-light) body.theme-v2 .dk-create-opt:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
html:not(.hv-light) body.theme-v2 .dk-create-opt-icon { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent); }
html:not(.hv-light) body.theme-v2 .dk-create-opt-sub { color: var(--v2-muted); }
html:not(.hv-light) body.theme-v2 .dk-create-unsure { border-top-color: var(--v2-line); }
/* Purchase / license key (js/doc-credit-unlock.js injects its own light
   rules after this file; these win on specificity). */
html:not(.hv-light) body.theme-v2 .dk-credit-price { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-credit-key-label { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .dk-credit-note.err { color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 .dk-credit-note.ok { color: var(--v2-ok); }
html:not(.hv-light) body.theme-v2 .dk-credit-link { color: var(--v2-muted); }
html:not(.hv-light) body.theme-v2 .dk-credit-link:hover { color: var(--v2-hi); }
/* Project-limit dialog (js/supabase-config.js builds it with inline
   styles so it works on every page; these hooks dress it on v2 pages). */
html:not(.hv-light) body.theme-v2 .dk-limit-modal { background: rgba(var(--v2-scrim-rgb), calc(.72 * var(--v2-scrim-k))) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.hv-light) body.theme-v2 .dk-limit-box {
  color: var(--v2-text) !important; border-radius: 24px !important;
  background: radial-gradient(120% 80% at 100% 0%, rgba(var(--v2-teal-rgb), .08), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel)) !important;
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 80px -40px rgba(var(--v2-teal-rgb), calc(.45 * var(--v2-glow-k))) !important;
}
html:not(.hv-light) body.theme-v2 .dk-limit-title { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-limit-text { color: var(--v2-dim) !important; }
html:not(.hv-light) body.theme-v2 .dk-limit-go {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; border-radius: 999px !important;
  color: var(--v2-on-teal) !important; background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal)) !important;
  box-shadow: inset 0 0 0 1px rgba(160, 255, 240, .55), 0 12px 32px -14px rgba(var(--v2-teal-rgb), calc(.75 * var(--v2-glow-k)));
}
html:not(.hv-light) body.theme-v2 .dk-limit-close { min-height: 44px; border-radius: 999px !important; color: var(--v2-text) !important; background: rgba(var(--v2-fg-rgb), .05) !important; box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light) body.theme-v2 .dk-limit-close:hover { background: rgba(var(--v2-fg-rgb), .1) !important; }
html:not(.hv-light) body.theme-v2 :is(.dk-limit-go, .dk-limit-close):focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
/* Cookie notice + one-off notice bars */
html:not(.hv-light) body.theme-v2 .cookie-notice {
  color: var(--v2-text); background: rgba(var(--v2-panel-rgb), .96); border-top-color: var(--v2-line-2);
  box-shadow: 0 -16px 40px -10px rgba(var(--v2-shade-rgb), calc(.8 * var(--v2-shade-k))); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html:not(.hv-light) body.theme-v2 .cookie-notice p { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .cookie-notice p a { color: var(--v2-teal-hi); }

/* ======================================= 8 accessibility panel (dark)
   js/a11y-panel.js injects its own light <style> in <head>, before this
   file; same selectors with the body.theme-v2 scope win. Every setting
   still works: the page modes are separate rules in that same <style>. */
html:not(.hv-light) body.theme-v2 .dka-root {
  --dka-teal: var(--v2-teal); --dka-teal-d: var(--v2-teal); --dka-teal-dd: var(--v2-teal-hi); --dka-ink: var(--v2-panel-2);
  --dka-text: var(--v2-text); --dka-muted: var(--v2-dim); --dka-line: rgba(255, 255, 255, .1); --dka-bg: var(--v2-panel); --dka-tint: rgba(var(--v2-teal-rgb), .1);
  color: var(--dka-text);
}
html:not(.hv-light) body.theme-v2 .dka-backdrop { background: rgba(var(--v2-scrim-rgb), calc(.62 * var(--v2-scrim-k))); }
html:not(.hv-light) body.theme-v2 .dka-panel { box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .12), 0 30px 80px rgba(var(--v2-shade-rgb), calc(.8 * var(--v2-shade-k))), 0 0 70px -30px rgba(var(--v2-teal-rgb), calc(.45 * var(--v2-glow-k))); }
html:not(.hv-light) body.theme-v2 .dka-head {
  border-bottom: 1px solid rgba(var(--v2-fg-rgb), .08);
  background: radial-gradient(120% 140% at 100% 0, rgba(var(--v2-teal-rgb), .26), transparent 60%), linear-gradient(135deg, #0e1622, var(--v2-panel) 75%);
}
html:not(.hv-light) body.theme-v2 .dka-head-icon { background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal)); color: var(--v2-on-teal); box-shadow: 0 0 0 4px rgba(var(--v2-teal-rgb), .14), 0 0 22px -4px var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .dka-sub { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .dka-hbtn { background: rgba(var(--v2-fg-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .12); }
html:not(.hv-light) body.theme-v2 .dka-hbtn:hover { background: rgba(var(--v2-fg-rgb), .12); }
html:not(.hv-light) body.theme-v2 .dka-hbtn:focus-visible { outline-color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .dka-sec-h { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .dka-card { background: rgba(var(--v2-fg-rgb), .03); color: var(--dka-text); box-shadow: inset 0 0 0 1px var(--dka-line); }
html:not(.hv-light) body.theme-v2 .dka-card:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .6), 0 8px 24px -10px rgba(var(--v2-teal-rgb), calc(.45 * var(--v2-glow-k))); }
html:not(.hv-light) body.theme-v2 .dka-card:focus-visible { outline-color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .dka-ic { background: rgba(var(--v2-fg-rgb), .06); color: #dfe6f1; }
html:not(.hv-light) body.theme-v2 .dka-dots i { background: rgba(var(--v2-fg-rgb), .14); }
html:not(.hv-light) body.theme-v2 .dka-dots i.on { background: var(--v2-teal); box-shadow: 0 0 6px var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .dka-tick { color: var(--v2-on-teal); }
html:not(.hv-light) body.theme-v2 .dka-card[aria-pressed=true] { background: rgba(var(--v2-teal-rgb), .1); box-shadow: inset 0 0 0 1.5px var(--v2-teal), 0 0 24px -10px var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .dka-card[aria-pressed=true] .dka-ic { background: var(--v2-teal); color: var(--v2-on-teal); }
html:not(.hv-light) body.theme-v2 .dka-card[aria-pressed=true] .dka-val { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .dka-foot { background: var(--v2-bg-2); border-top-color: rgba(var(--v2-fg-rgb), .08); }
html:not(.hv-light) body.theme-v2 .dka-foot a { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 :is(.dka-foot a, .dka-sv button):focus-visible { outline-color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .dka-kbd { background: var(--v2-panel-2); }
html:not(.hv-light) body.theme-v2 .dka-back { background: rgba(var(--v2-fg-rgb), .04); }
html:not(.hv-light) body.theme-v2 .dka-tabs { background: rgba(var(--v2-fg-rgb), .05); }
html:not(.hv-light) body.theme-v2 .dka-tab[aria-pressed=true] { background: rgba(var(--v2-teal-rgb), .14); color: var(--v2-teal-hi); box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .4); }
html:not(.hv-light) body.theme-v2 .dka-item { background: rgba(var(--v2-fg-rgb), .03); }
html:not(.hv-light) body.theme-v2 .dka-item:hover { box-shadow: inset 0 0 0 1.5px var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .dka-toast { box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .14), 0 20px 50px -16px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))); border-inline-start: 3px solid var(--v2-teal); }

/* =============================================================== 9 pages */
/* account.html — sign in / sign up: a centred dark card over soft light. */
html:not(.hv-light) body.theme-v2.v2-auth { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; }
html:not(.hv-light) body.theme-v2.v2-auth::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 46% at 50% 38%, rgba(var(--v2-teal-rgb), .13), transparent 70%),
    radial-gradient(36% 40% at 22% 80%, rgba(var(--v2-site-rgb), .11), transparent 70%),
    radial-gradient(34% 36% at 82% 14%, rgba(var(--v2-cv-rgb), .08), transparent 70%);
}
html:not(.hv-light) body.theme-v2.v2-auth::after { /* fine grid, fading out around the card */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(var(--v2-fg-rgb), .03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--v2-fg-rgb), .03) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(46% 52% at 50% 44%, #000, transparent 75%); mask-image: radial-gradient(46% 52% at 50% 44%, #000, transparent 75%);
}
html:not(.hv-light) body.theme-v2 .qa-gate-box {
  border: 0; border-radius: 24px; padding: 36px 32px 30px; max-width: 420px; color: var(--v2-text);
  background: linear-gradient(180deg, rgba(var(--v2-raise-rgb), .94), rgba(var(--v2-card-rgb), .96));
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .1), 0 40px 100px -40px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 90px -40px rgba(var(--v2-teal-rgb), calc(.55 * var(--v2-glow-k)));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html:not(.hv-light) body.theme-v2 .qa-gate-box h1 { font-size: 24px; color: var(--v2-hi); letter-spacing: -.01em; }
html:not(.hv-light) body.theme-v2 .qa-gate-box h2 { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .qa-gate-box p.sub { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .qa-gate-box label { color: var(--v2-text); font-weight: 600; }
html:not(.hv-light) body.theme-v2 .qa-gate-box .field { text-align: start; }
html:not(.hv-light) body.theme-v2 .qa-gate-box :is(input[type="email"], input[type="password"], input[type="text"]) { min-height: 46px; border-radius: 12px; }
html:not(.hv-light) body.theme-v2 .qa-gate-box .btn { min-height: 50px; }
/* "What you get with a free account" (account.html, sign-up form only). */
body.theme-v2 .qa-free-box { text-align: start; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(45, 212, 191, .07); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .28); }
body.theme-v2 .qa-free-box[hidden] { display: none; }
body.theme-v2 .qa-free-h { margin: 0 0 6px; font-weight: 700; font-size: 14.5px; color: var(--v2-hi, inherit); }
body.theme-v2 .qa-free-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
body.theme-v2 .qa-free-list li { position: relative; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.5; color: var(--v2-text, inherit); }
body.theme-v2 .qa-free-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .45em; width: 9px; height: 5px; border-left: 2px solid #2dd4bf; border-bottom: 2px solid #2dd4bf; transform: rotate(-45deg); }
body.theme-v2 .qa-free-paid { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--v2-dim, inherit); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .qa-free-box { background: rgba(13, 148, 136, .06); box-shadow: inset 0 0 0 1px rgba(13, 148, 136, .25); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .qa-free-list li::before { border-color: #0d9488; }
html:not(.hv-light) body.theme-v2 .qa-err { color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 .qa-msg { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .qa-switch { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .qa-switch button { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .qa-forgot button, html:not(.hv-light) body.theme-v2 .qa-legal { color: var(--v2-muted) !important; }
html:not(.hv-light) body.theme-v2 .qa-legal a { color: var(--v2-teal-hi) !important; }
html:not(.hv-light) body.theme-v2 :is(.qa-switch button, .qa-forgot button, .qa-legal a):focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; border-radius: 4px; }
html:not(.hv-light) body.theme-v2 .qa-google-btn { min-height: 48px; border-radius: 999px; color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .04); border-color: var(--v2-line-2); }
html:not(.hv-light) body.theme-v2 .qa-google-btn:hover { background: rgba(var(--v2-fg-rgb), .08); border-color: rgba(var(--v2-fg-rgb), .3); box-shadow: none; }
html:not(.hv-light) body.theme-v2 .qa-google-btn:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
html:not(.hv-light) body.theme-v2 .qa-divider { color: var(--v2-muted); }
html:not(.hv-light) body.theme-v2 .qa-divider::before, html:not(.hv-light) body.theme-v2 .qa-divider::after { background: var(--v2-line-2); }
html:not(.hv-light) body.theme-v2 .qa-pw-hint { color: var(--v2-muted) !important; }

/* projects.html — the grid itself gets its full v2 pass in phase 3;
   until then it is simply legible and on-palette. */
html:not(.hv-light) body.theme-v2 .dk-projects-head h1 { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-tabs { border-bottom-color: var(--v2-line); }
html:not(.hv-light) body.theme-v2 .dk-tab { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .dk-tab:hover { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-tab.active { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-tab.active::after { background: var(--v2-teal); box-shadow: 0 0 10px var(--v2-teal); }
html:not(.hv-light) body.theme-v2 .dk-tab:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
html:not(.hv-light) body.theme-v2 .dk-pcard { --c: var(--v2-teal-hi); border-color: var(--v2-line); background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card); }
html:not(.hv-light) body.theme-v2 .dk-pcard[data-dk-product] { --c: var(--tool); }
html:not(.hv-light) body.theme-v2 .dk-pcard:hover { box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--c) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
html:not(.hv-light) body.theme-v2 .dk-pcard-thumb { background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--v2-well); border-bottom: 1px solid var(--v2-line); }
html:not(.hv-light) body.theme-v2 .dk-pcard-thumb-icon { color: var(--c); opacity: .8; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 60%, transparent)); }
html:not(.hv-light) body.theme-v2 .dk-pcard-name { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-pcard-cta { color: var(--v2-on-teal); background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal)); }
html:not(.hv-light) body.theme-v2 .dk-pcard-cta:hover { background: var(--v2-teal-hover); }
html:not(.hv-light) body.theme-v2 .dk-pcard-more { background: rgba(var(--v2-fg-rgb), .08); color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 .dk-pcard-more:hover { background: rgba(var(--v2-fg-rgb), .16); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu { background: var(--v2-panel-2); border-color: var(--v2-line-2); box-shadow: 0 24px 60px -20px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button:hover { background: rgba(var(--v2-fg-rgb), .06); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button.danger { color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty a { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty.dk-pcard-error { color: var(--v2-warn); background: rgba(var(--v2-warn-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .3); }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty.dk-pcard-error a { color: #ffd98a; }

/* account-settings.html — dark sections (full pass in phase 3). */
html:not(.hv-light) body.theme-v2 .builder-top { background: transparent; border-bottom-color: var(--v2-line); }
html:not(.hv-light) body.theme-v2 .as-section {
  border: 0; border-radius: var(--v2-r); color: var(--v2-text);
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08);
}
@media (max-width: 520px) { html:not(.hv-light) body.theme-v2 .as-section { margin-inline: 16px; padding: 22px 18px; } }
html:not(.hv-light) body.theme-v2 .as-section h3 { color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .as-section p.sub { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .as-danger { box-shadow: inset 0 0 0 1px rgba(var(--v2-danger-rgb), .28); }
html:not(.hv-light) body.theme-v2 .as-danger h3 { color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 :is(.as-err) { color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 .as-msg { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .as-section .builder-form { background: transparent; border: 0; padding: 0; overflow: visible; max-height: none; position: static; }
html:not(.hv-light) body.theme-v2 .as-section .builder-form label { color: var(--v2-text); font-weight: 600; }
html:not(.hv-light) body.theme-v2 .as-logout { color: var(--v2-danger); background: var(--v2-danger-bg); border-color: rgba(var(--v2-danger-rgb), .4); }
html:not(.hv-light) body.theme-v2 .as-logout:hover { background: rgba(var(--v2-danger-2-rgb), .18); }
html:not(.hv-light) body.theme-v2 .as-projects-link { color: var(--v2-teal-hi); }
html:not(.hv-light) body.theme-v2 .as-delete-start { color: var(--v2-danger); border-color: rgba(var(--v2-danger-rgb), .4); }
html:not(.hv-light) body.theme-v2 .as-delete-final { background: #c2414f; color: #fff; }
html:not(.hv-light) body.theme-v2 .as-crm-warning { background: rgba(var(--v2-warn-rgb), .08); border-color: rgba(var(--v2-warn-rgb), .35); color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 .as-divider { border-top-color: var(--v2-line); }
html:not(.hv-light) body.theme-v2 :is(.as-logout, .as-projects-link, .as-delete-start, .as-delete-final):focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }

/* ================================== 10 motion + accessibility modes */
@media (prefers-reduced-motion: reduce) {
  body.theme-v2 :is(.v2-btn, .v2-card, .v2-input, .v2-select, .v2-textarea, .v2-tab, .fab, .star, .dk-app-sidebar-item, .dk-app-sidebar-icon, .dk-create-opt, .dk-pcard, .chat-menu-btn),
  body.theme-v2 :is(.v2-check, .v2-switch) input, body.theme-v2 :is(.v2-check, .v2-switch) input::before, body.theme-v2 :is(.v2-check, .v2-switch) input::after {
    transition-duration: .01ms !important;
  }
  body.theme-v2 :is(.v2-btn, .v2-card, .fab, .star, .dk-pcard, :is(.btn-teal, .btn-gold, .dk-btn-primary)):is(:hover, :active) { transform: none !important; }
}
html.dka-still body.theme-v2 :is(.v2-btn, .v2-card, .fab, .star, .dk-pcard, :is(.btn-teal, .btn-gold, .dk-btn-primary)):is(:hover, :active) { transform: none !important; }
/* The accessibility panel's light high-contrast mode turns the whole page
   white: the form controls, scrollbars and the glows drawn by
   pseudo-elements follow it. Dark high contrast keeps them dark. */
html.dka-contrast-light:has(body.theme-v2) { color-scheme: light; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-app-sidebar::after,
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2.v2-auth::before,
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2.v2-auth::after { display: none; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-app-sidebar-item.active { outline: 2px solid currentColor; outline-offset: -2px; }
html.dka-contrast-light body.theme-v2 .v2-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; }

/* =========================================== 11 theme switch + light theme
   The switch itself (built by js/a11y-panel.js) on both themes, then the
   light theme's surfaces: what the token swap in section 1b cannot reach
   on its own (a soft page backdrop, layered shadows instead of glow, white
   cards with a hairline border). */
html:not(.hv-light) body.theme-v2 .dk-theme-toggle {
  position: relative; display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--v2-text-2); background: rgba(var(--v2-fg-rgb), .04); border: 1px solid rgba(var(--v2-fg-rgb), .16);
  transition: background-color var(--v2-fast) ease, border-color var(--v2-fast) ease, color var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease);
  -webkit-tap-highlight-color: transparent;
}
html:not(.hv-light) body.theme-v2 .dk-theme-toggle:hover { background: rgba(var(--v2-fg-rgb), .09); border-color: rgba(var(--v2-fg-rgb), .3); color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-theme-toggle:active { transform: scale(.94); }
html:not(.hv-light) body.theme-v2 .dk-theme-toggle:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
body.theme-v2 :is(.dk-theme-toggle, .dk-drawer-theme-ic) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.theme-v2 :is(.dk-theme-toggle, .dk-drawer-theme-ic) .dk-theme-moon { display: none; }
html.dk-light body.theme-v2 :is(.dk-theme-toggle, .dk-drawer-theme-ic) .dk-theme-sun { display: none; }
html.dk-light body.theme-v2 :is(.dk-theme-toggle, .dk-drawer-theme-ic) .dk-theme-moon { display: block; }
@media (hover: none) and (pointer: coarse) { html:not(.hv-light) body.theme-v2 .dk-theme-toggle { width: 40px; height: 40px; } }
/* Account settings: "מראה" — three cards (dark / light / match device),
   real radio inputs kept for the keyboard and screen readers. */
html:not(.hv-light) body.theme-v2 .dk-theme-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html:not(.hv-light) body.theme-v2 .dk-theme-choice label {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 44px; padding: 8px 8px 10px; border-radius: 14px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: var(--v2-text); text-align: center;
  background: rgba(var(--v2-fg-rgb), .03); box-shadow: inset 0 0 0 1px var(--v2-line-2);
  transition: box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-theme-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
html:not(.hv-light) body.theme-v2 .dk-theme-choice label:hover { box-shadow: inset 0 0 0 1px var(--v2-line-3); }
html:not(.hv-light) body.theme-v2 .dk-theme-choice label:has(input:checked) { background: rgba(var(--v2-teal-rgb), .08); box-shadow: inset 0 0 0 2px var(--v2-teal); color: var(--v2-hi); }
html:not(.hv-light) body.theme-v2 .dk-theme-choice label:has(input:focus-visible) { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
body.theme-v2 .dk-theme-choice-art { position: relative; display: flex; flex-direction: column; gap: 5px; height: 54px; padding: 9px 10px; box-sizing: border-box; border-radius: 9px; overflow: hidden; text-align: start; }
body.theme-v2 .dk-theme-choice-art i { display: block; height: 6px; border-radius: 99px; }
body.theme-v2 .dk-theme-choice-art i:first-child { width: 46%; height: 8px; }
body.theme-v2 .dk-theme-choice-art i:nth-child(2) { width: 78%; }
body.theme-v2 .dk-theme-choice-art i:nth-child(3) { width: 30%; margin-top: auto; }
body.theme-v2 .dk-theme-choice-art.is-dark { background: #0a0e16; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
body.theme-v2 .dk-theme-choice-art.is-dark i { background: rgba(255, 255, 255, .22); }
body.theme-v2 .dk-theme-choice-art.is-dark i:nth-child(3) { background: #2dd4bf; }
body.theme-v2 .dk-theme-choice-art.is-light { background: #f6f7fb; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .1); }
body.theme-v2 .dk-theme-choice-art.is-light i { background: rgba(11, 16, 32, .16); }
body.theme-v2 .dk-theme-choice-art.is-light i:nth-child(3) { background: #0f766e; }
body.theme-v2 .dk-theme-choice-art.is-system { background: linear-gradient(115deg, #0a0e16 50%, #f6f7fb 50%); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .25); }
body.theme-v2 .dk-theme-choice-art.is-system i { background: linear-gradient(115deg, rgba(255, 255, 255, .25) 50%, rgba(11, 16, 32, .18) 50%); }
body.theme-v2 .dk-theme-choice-art.is-system i:nth-child(3) { background: #14b8a6; }
@media (max-width: 380px) { html:not(.hv-light) body.theme-v2 .dk-theme-choice { gap: 6px; } html:not(.hv-light) body.theme-v2 .dk-theme-choice label { font-size: 13px; padding: 6px 6px 8px; } }
/* A short colour cross-fade while switching (the class lives ~0.4s; never
   with reduced motion or "stop animations" — js/a11y-panel.js checks). */
html.dk-theme-fade body, html.dk-theme-fade body *:not(iframe), html.dk-theme-fade body *::before, html.dk-theme-fade body *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease, box-shadow .35s ease !important;
}

/* ---- light: the page ---- */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light):has(body.theme-v2) { color-scheme: light; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 {
  --shadow-card: var(--v2-lift-1); --brand-dark: #0f766e;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(13, 148, 136, .07), transparent 70%),
    radial-gradient(900px 480px at 0% 0%, rgba(26, 102, 216, .05), transparent 70%),
    var(--v2-bg) no-repeat;
}
/* Header: frosted white glass with a hairline; the brand and links in ink. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 header.site { background: rgba(255, 255, 255, .78); border-bottom-color: rgba(11, 16, 32, .07); box-shadow: 0 8px 24px -18px rgba(15, 23, 42, .18); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .lang-toggle,
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-theme-toggle { background: #fff; border-color: rgba(11, 16, 32, .14); color: var(--v2-text-2); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.lang-toggle, .dk-theme-toggle):hover { background: #f4f6fa; border-color: rgba(11, 16, 32, .26); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-theme-toggle { color: #5b4bd6; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-header-cta { box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 8px 20px -10px rgba(13, 148, 136, .7); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-header-cta:hover { color: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .nav-account-dropdown { box-shadow: 0 0 0 1px rgba(11, 16, 32, .06), 0 24px 60px -20px rgba(15, 23, 42, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-mobile-nav { background: rgba(255, 255, 255, .94); box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, .16); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-mobile-nav-item { color: var(--v2-muted); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 footer.site { background: linear-gradient(180deg, #f1f3f8, #e9ecf3); border-top-color: rgba(11, 16, 32, .08); color: var(--v2-dim); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 footer.site :is(.footer-grid h4, .footer-grid .footer-h, .footer-identity-tagline) { color: var(--v2-hi); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 footer.site :is(.footer-grid ul a, .footer-identity-links a):hover { color: var(--v2-hi); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 footer.site :is(.footer-bottom, .footer-identity-owner, .footer-identity-links, .footer-identity-links a) { color: var(--v2-muted); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 footer.site :is(.footer-bottom, .footer-identity) { border-top-color: rgba(11, 16, 32, .1); }

/* ---- light: cards, panels, modals — white, hairline, layered shadow ---- */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.v2-card, .dk-pcard, .as-section) { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(a.v2-card, button.v2-card, .v2-card-link):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool) 45%, transparent), 0 22px 44px -26px color-mix(in srgb, var(--tool) 55%, transparent), var(--v2-lift-1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .v2-panel { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-2); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .v2-sheet { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .07), var(--v2-lift-1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.v2-modal, .widget-modal, .domain-guide-modal, .chat-panel) { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-limit-box { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-3) !important; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .v2-toast { background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-2); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .chat-head { background: radial-gradient(120% 160% at 100% 0%, rgba(13, 148, 136, .14), transparent 60%), #f7f9fc; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .chat-msg-bot .chat-bubble { background: #f3f5f9; box-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .cookie-notice { background: rgba(255, 255, 255, .96); box-shadow: 0 -12px 32px -16px rgba(15, 23, 42, .2); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .v2-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .v2-switch input[type="checkbox"]::after { box-shadow: 0 1px 3px rgba(15, 23, 42, .25); }
/* Primary buttons: deep teal with white text (4.6:1+), a crisp top light
   and a soft teal shadow in place of the neon halo. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.v2-btn-primary, .btn-teal, .btn-gold, .dk-btn-primary, .dk-limit-go) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 23, 42, .12), 0 10px 24px -12px rgba(13, 148, 136, .75);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.v2-btn-primary, .btn-teal, .btn-gold, .dk-btn-primary):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(15, 23, 42, .12), 0 14px 30px -12px rgba(13, 148, 136, .8);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.v2-btn-primary:disabled, .v2-btn-primary[aria-disabled="true"]) { background: #9fcfc9; color: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.btn-outline, .btn-outline-dark, .dk-btn-ghost, .v2-btn-secondary) { background: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .v2-btn-tool { background: linear-gradient(180deg, color-mix(in srgb, var(--tool) 10%, #fff), color-mix(in srgb, var(--tool) 4%, #fff)); }

/* ---- light: workspace sidebar — a white rail with a quiet tinted edge ---- */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-app-sidebar { background: linear-gradient(180deg, rgba(13, 148, 136, .04), transparent 30%), #fff; box-shadow: 1px 0 0 rgba(11, 16, 32, .07); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-app-sidebar::after { opacity: .55; box-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-app-sidebar-item.active::before { box-shadow: 0 0 8px -1px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-app-sidebar-toggle { background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }

/* ---- light: floating buttons — white discs, coloured ring, soft shadow ---- */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .fab {
  background: radial-gradient(70% 70% at 50% 25%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%), #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 8px 22px -8px rgba(15, 23, 42, .28), 0 0 18px -8px color-mix(in srgb, var(--c) 60%, transparent);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .fab:hover { box-shadow: inset 0 0 0 1px var(--c), 0 12px 26px -8px rgba(15, 23, 42, .3), 0 0 22px -6px color-mix(in srgb, var(--c) 70%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .fab-feedback { --c: #b7791f; text-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .fab-chat svg circle { fill: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .fab-a11y { --c: #1c2335; color: #1c2335; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .star { color: #d5d9e2; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .star.filled { color: #e0a100; text-shadow: none; }

/* ---- light: accessibility panel ---- */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dka-root {
  --dka-ink: #fff; --dka-text: #0b1020; --dka-muted: #4a5368; --dka-line: rgba(11, 16, 32, .1); --dka-bg: #fff; --dka-tint: rgba(13, 148, 136, .08);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dka-panel { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dka-head { background: radial-gradient(120% 140% at 100% 0, rgba(13, 148, 136, .14), transparent 60%), linear-gradient(135deg, #f4f8fb, #fff 75%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dka-ic { color: #1c2335; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dka-foot { background: #f6f7fb; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dka-kbd { background: #f1f3f8; }

/* ---- light: account page, project cards, settings ---- */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2.v2-auth::after {
  background-image: linear-gradient(rgba(11, 16, 32, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 16, 32, .045) 1px, transparent 1px);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .qa-gate-box { background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-3), 0 0 80px -40px rgba(13, 148, 136, .5); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .qa-google-btn { background: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-thumb-icon { filter: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-menu { box-shadow: 0 0 0 1px rgba(11, 16, 32, .06), var(--v2-lift-3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-empty.dk-pcard-error a { color: var(--v2-warn-hi); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-tab.active::after { box-shadow: none; }

/* ===================================================== 12 phone menu
   The ☰ menu: a side drawer (js/main.js builds it, once, on every page
   with a ☰). It slides in from the ☰'s side (the left in Hebrew, the
   right in English), min(320px, 82vw) wide, full height, over a dimmed,
   blurred backdrop; its inner edge is rounded and carries the sidebar's
   glowing divider. Groups: ניווט (icon rows), כלים (the six tools as tiles
   in their own neon), הגדרות (light / dark switch, language, install the
   app); a footer with the sign-in call to action or the signed-in account.
   Everything reads the v2 tokens, so the light theme (section 1b) re-points
   it; a few surfaces are set again at the end of this section. */
.dk-drawer-backdrop[hidden], #dk-drawer[hidden] { display: none !important; }
html.dk-drawer-open, html.dk-drawer-open body { overflow: hidden; }
.dk-drawer-backdrop {
  position: fixed; inset: 0; z-index: 4250; opacity: 0; transition: opacity .3s ease;
  background: rgba(var(--v2-scrim-rgb), calc(.62 * var(--v2-scrim-k)));
  -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%);
  -webkit-tap-highlight-color: transparent;
}
.dk-drawer-backdrop.is-open { opacity: 1; }
#dk-drawer {
  --dk-drawer-shift: -100%;                 /* rtl: the drawer rests on the left edge */
  --dk-drawer-r: 26px;
  position: fixed; z-index: 4300; top: 0; bottom: 0; inset-inline-end: 0;
  display: flex; flex-direction: column; box-sizing: border-box; width: min(320px, 82vw); overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-top: var(--dk-safe-top, 0px); padding-left: var(--dk-safe-left, 0px);
  border-start-start-radius: var(--dk-drawer-r); border-end-start-radius: var(--dk-drawer-r);
  font-family: 'Heebo', system-ui, -apple-system, sans-serif; color: var(--v2-text); text-align: start;
  background:
    radial-gradient(120% 40% at 100% 0%, rgba(var(--v2-teal-rgb), .10), transparent 70%),
    radial-gradient(90% 30% at 0% 100%, rgba(var(--v2-cv-rgb), .07), transparent 70%),
    var(--v2-bg-2);
  box-shadow: 0 0 0 1px rgba(var(--v2-fg-rgb), .06), 0 30px 80px rgba(var(--v2-shade-rgb), calc(.7 * var(--v2-shade-k)));
  transform: translateX(var(--dk-drawer-shift));
  transition: transform .34s var(--v2-ease);
  will-change: transform;
}
#dk-drawer[dir="ltr"] { --dk-drawer-shift: 100%; padding-left: 0; padding-right: var(--dk-safe-right, 0px); }
#dk-drawer.is-open { transform: none; }
#dk-drawer::before { /* the glowing divider along the inner edge */
  content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--v2-teal-hi-rgb), .6) 18%, rgba(var(--v2-site-rgb), .4) 55%, rgba(var(--v2-cv-rgb), .3) 82%, transparent);
  box-shadow: 0 0 12px 0 rgba(var(--v2-teal-rgb), calc(.4 * var(--v2-glow-k)));
}
#dk-drawer *, #dk-drawer *::before, #dk-drawer *::after { box-sizing: border-box; }
#dk-drawer svg { width: 18px; height: 18px; flex: none; display: block; }

/* header: the logo and × */
#dk-drawer .dk-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 12px 14px 8px; padding-inline-start: 20px; }
#dk-drawer .dk-drawer-brand { display: inline-flex; align-items: center; gap: 9px; direction: ltr; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 21px; letter-spacing: -.01em; color: var(--v2-hi); text-decoration: none; border-radius: 10px; }
#dk-drawer .dk-drawer-brand .brand-logo { width: 28px; height: 32px; }
#dk-drawer .dk-drawer-brand .brand-logo .brand-mark { width: 25px; height: 28px; }
#dk-drawer .dk-drawer-brand .brand-kit { color: var(--v2-teal-hi); }
#dk-drawer .dk-drawer-close {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--v2-text-2); background: rgba(var(--v2-fg-rgb), .04); border: 1px solid rgba(var(--v2-fg-rgb), .14);
  transition: background-color var(--v2-fast) ease, border-color var(--v2-fast) ease, color var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease);
  -webkit-tap-highlight-color: transparent;
}
#dk-drawer .dk-drawer-close:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .09); border-color: rgba(var(--v2-fg-rgb), .28); }
#dk-drawer .dk-drawer-close:active { transform: scale(.94); }

/* the scrolling middle */
#dk-drawer .dk-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 18px; scrollbar-width: thin; }
#dk-drawer .dk-drawer-group + .dk-drawer-group { margin-top: 6px; }
#dk-drawer .dk-drawer-glabel { margin: 20px 10px 8px; font: 700 11.5px/1.2 'Heebo', system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--v2-muted); }
#dk-drawer .dk-drawer-group:first-child .dk-drawer-glabel { margin-top: 6px; }
#dk-drawer .dk-drawer-list { display: grid; gap: 2px; }

/* a row: icon box + label (48px tall) */
#dk-drawer .dk-drawer-item {
  --c: var(--v2-teal-hi);
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 48px; margin: 0; padding: 6px 10px; border: 0; border-radius: 14px;
  font: 500 15.5px/1.25 'Heebo', system-ui, sans-serif; color: var(--v2-text-2); text-align: start; text-decoration: none; background: transparent; cursor: pointer;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
#dk-drawer .dk-drawer-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dk-drawer .dk-drawer-ic {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px;
  color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, color var(--v2-fast) ease;
}
#dk-drawer .dk-drawer-ic[data-dk-drawer-c="teal"] { --c: var(--v2-teal-hi); }
#dk-drawer .dk-drawer-item:is(:hover, :focus-visible) { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .05); }
#dk-drawer .dk-drawer-item:is(:hover, :focus-visible) .dk-drawer-ic { background: color-mix(in srgb, var(--c) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 16px -5px var(--c); }
#dk-drawer .dk-drawer-item:active { background: rgba(var(--v2-fg-rgb), .08); }
#dk-drawer .dk-drawer-item[aria-current="page"] {
  color: var(--v2-hi);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 15%, transparent), color-mix(in srgb, var(--c) 3%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent);
}
#dk-drawer[dir="rtl"] .dk-drawer-item[aria-current="page"] { background: linear-gradient(270deg, color-mix(in srgb, var(--c) 15%, transparent), color-mix(in srgb, var(--c) 3%, transparent)); }
#dk-drawer .dk-drawer-item[aria-current="page"]::before { /* the bar of light, as in the sidebar */
  content: ""; position: absolute; inset-inline-start: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px;
  background: var(--c); box-shadow: 0 0 12px 1px var(--c), 0 0 3px var(--c);
}

/* tools: three-by-two tiles in each tool's colour */
#dk-drawer .dk-drawer-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 2px; }
#dk-drawer .dk-drawer-tool {
  --c: var(--tool, var(--v2-teal-hi));
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 4px 10px; border-radius: 16px;
  font: 600 12.5px/1.2 'Heebo', system-ui, sans-serif; color: var(--v2-text-2); text-align: center; text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), color-mix(in srgb, var(--c) 2%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 17%, transparent);
  transition: transform var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease, color var(--v2-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
#dk-drawer .dk-drawer-tool-ic {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 36%, transparent), 0 0 18px -7px var(--c);
}
#dk-drawer .dk-drawer-tool-ic svg { width: 20px; height: 20px; }
#dk-drawer .dk-drawer-tool-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dk-drawer .dk-drawer-tool:is(:hover, :focus-visible) { color: var(--v2-hi); transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 12px 26px -16px var(--c); }
#dk-drawer .dk-drawer-tool:active { transform: scale(.97); }
#dk-drawer .dk-drawer-tool[aria-current="page"] { color: var(--v2-hi); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 22px -10px var(--c); }

/* settings: the theme switch, the language segments, install */
#dk-drawer .dk-drawer-theme { --c: var(--v2-quote); }
html.dk-light #dk-drawer .dk-drawer-theme { --c: var(--v2-cv); }
#dk-drawer .dk-drawer-switch {
  position: relative; flex: none; width: 46px; height: 28px; border-radius: 99px;
  background: rgba(var(--v2-fg-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .1);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
#dk-drawer .dk-drawer-knob {
  position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--v2-knob); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: inset-inline-start var(--v2-fast) var(--v2-ease), background-color var(--v2-fast) ease;
}
#dk-drawer .dk-drawer-theme[aria-checked="true"] .dk-drawer-switch { background: var(--v2-teal); box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-rgb), .6), 0 0 14px -4px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))); }
#dk-drawer .dk-drawer-theme[aria-checked="true"] .dk-drawer-knob { inset-inline-start: 21px; background: #fff; }
#dk-drawer .dk-drawer-lang { --c: var(--v2-site); cursor: default; }
#dk-drawer .dk-drawer-lang:is(:hover, :focus-visible), #dk-drawer .dk-drawer-lang:active { background: transparent; color: var(--v2-text-2); }
#dk-drawer .dk-drawer-lang:hover .dk-drawer-ic { background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); }
#dk-drawer .dk-drawer-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .05); box-shadow: inset 0 0 0 1px var(--v2-line); }
#dk-drawer .dk-drawer-seg button {
  min-height: 34px; min-width: 58px; padding: 0 11px; border: 0; border-radius: 99px; cursor: pointer;
  font: 600 13px/1 'Heebo', system-ui, sans-serif; color: var(--v2-muted); background: transparent;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
#dk-drawer .dk-drawer-seg button:hover { color: var(--v2-hi); }
#dk-drawer .dk-drawer-seg button[aria-pressed="true"] { color: var(--v2-hi); background: var(--v2-panel-2); box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-rgb), .45), 0 0 12px -4px rgba(var(--v2-teal-rgb), calc(.7 * var(--v2-glow-k))); cursor: default; }
#dk-drawer .dk-pwa-navlink { --c: var(--v2-deck); }

/* footer: start creating / signed-in account */
#dk-drawer .dk-drawer-foot {
  flex: none; display: grid; gap: 10px; padding: 14px 16px calc(16px + var(--dk-safe-bottom, 0px)); border-top: 1px solid var(--v2-line);
  background: linear-gradient(180deg, rgba(var(--v2-teal-rgb), .035), rgba(var(--v2-teal-rgb), .07));
}
#dk-drawer .dk-drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px;
  font: 700 15.5px/1 'Heebo', system-ui, sans-serif; text-decoration: none; color: var(--v2-on-teal);
  background: linear-gradient(180deg, var(--v2-teal-top, var(--v2-teal-hi)), var(--v2-teal));
  box-shadow: inset 0 0 0 1px rgba(160, 255, 240, .5), inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 28px -14px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k)));
  transition: transform var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) ease, filter var(--v2-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
#dk-drawer .dk-drawer-cta:hover { filter: brightness(1.06); }
#dk-drawer .dk-drawer-cta:active { transform: scale(.98); }
#dk-drawer .dk-drawer-cta-ghost { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .05); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
#dk-drawer .dk-drawer-cta-ghost:hover { background: rgba(var(--v2-fg-rgb), .09); filter: none; }
#dk-drawer .dk-drawer-signin { margin: 0; text-align: center; font-size: 13.5px; line-height: 1.4; color: var(--v2-muted); }
#dk-drawer .dk-drawer-signin a { color: var(--v2-teal-hi); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: 4px; padding: 6px 2px; }
#dk-drawer .dk-drawer-account { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 2px 2px 0; }
#dk-drawer .dk-drawer-avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  font: 700 16px/1 'Space Grotesk', Arial, sans-serif; color: #03211c;
  background: linear-gradient(135deg, #5eead4, #3d8bff); box-shadow: 0 0 0 2px var(--v2-bg-2), 0 0 0 3px rgba(var(--v2-teal-rgb), .45);
}
#dk-drawer .dk-drawer-account-text { display: grid; min-width: 0; gap: 2px; }
#dk-drawer .dk-drawer-account-k { font-size: 12px; color: var(--v2-muted); }
#dk-drawer .dk-drawer-account-email { font-size: 14px; font-weight: 600; color: var(--v2-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; unicode-bidi: plaintext; }

/* focus: one teal ring everywhere in the drawer */
#dk-drawer :is(a, button):focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
#dk-drawer :is(.dk-drawer-item, .dk-drawer-tool):focus-visible { outline-offset: -2px; }

/* the ☰ itself: a round icon button like the theme switch beside it */
@media (max-width: 1180px) {
  html:not(.hv-light) body.theme-v2 header.site .burger {
    display: inline-grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%;
    color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .04); border: 1px solid rgba(var(--v2-fg-rgb), .16); line-height: 0;
    transition: background-color var(--v2-fast) ease, border-color var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease);
    -webkit-tap-highlight-color: transparent;
  }
  html:not(.hv-light) body.theme-v2 header.site .burger svg { width: 20px; height: 20px; display: block; }
  html:not(.hv-light) body.theme-v2 header.site .burger:hover { background: rgba(var(--v2-fg-rgb), .09); border-color: rgba(var(--v2-fg-rgb), .3); }
  html:not(.hv-light) body.theme-v2 header.site .burger:active { transform: scale(.94); }
  html:not(.hv-light) body.theme-v2 header.site .burger[aria-expanded="true"] { border-color: rgba(var(--v2-teal-rgb), .6); color: var(--v2-teal-hi); }
}

/* motion: none with reduced motion or "stop animations" */
@media (prefers-reduced-motion: reduce) {
  #dk-drawer, .dk-drawer-backdrop, #dk-drawer *, header.site .burger { transition: none !important; }
}
html.dka-still :is(#dk-drawer, .dk-drawer-backdrop, #dk-drawer *) { transition: none !important; }
/* high contrast (accessibility panel): plain edges instead of glows */
html:is(.dka-contrast-dark, .dka-contrast-light) #dk-drawer::before { display: none; }
html:is(.dka-contrast-dark, .dka-contrast-light) #dk-drawer { box-shadow: 0 0 0 2px currentColor; }
@media print { #dk-drawer, .dk-drawer-backdrop { display: none !important; } }

/* ---- light: a white sheet with a hairline and a soft layered shadow ---- */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer {
  background:
    radial-gradient(120% 40% at 100% 0%, rgba(13, 148, 136, .07), transparent 70%),
    radial-gradient(90% 30% at 0% 100%, rgba(124, 58, 237, .04), transparent 70%),
    #fff;
  box-shadow: 0 0 0 1px rgba(11, 16, 32, .07), 0 2px 6px rgba(15, 23, 42, .06), 0 30px 80px -20px rgba(15, 23, 42, .35);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer::before { opacity: .5; box-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .dk-drawer-backdrop { background: rgba(15, 23, 42, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-close { background: #fff; border-color: rgba(11, 16, 32, .14); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-close:hover { background: #f4f6fa; border-color: rgba(11, 16, 32, .26); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-ic { background: color-mix(in srgb, var(--c) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-item:is(:hover, :focus-visible) .dk-drawer-ic { background: color-mix(in srgb, var(--c) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-item[aria-current="page"]::before { box-shadow: 0 0 8px -1px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-tool {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff), #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent), 0 1px 2px rgba(15, 23, 42, .04);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-tool-ic { background: color-mix(in srgb, var(--c) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-tool:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 22px -14px color-mix(in srgb, var(--c) 70%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-switch { background: #dfe3ea; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .06); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-theme[aria-checked="true"] .dk-drawer-switch { background: var(--v2-teal); box-shadow: inset 0 0 0 1px rgba(13, 148, 136, .5), 0 4px 10px -4px rgba(13, 148, 136, .6); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-knob { box-shadow: 0 1px 3px rgba(15, 23, 42, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-seg { background: #f1f3f8; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .12), inset 0 0 0 1px rgba(13, 148, 136, .35); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-foot { background: linear-gradient(180deg, #fbfcfe, #f3f6fa); border-top-color: rgba(11, 16, 32, .08); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 23, 42, .12), 0 10px 24px -12px rgba(13, 148, 136, .75); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-cta-ghost { background: #fff; color: var(--v2-hi); box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .14), 0 1px 2px rgba(15, 23, 42, .05); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer .dk-drawer-avatar { color: #fff; background: linear-gradient(135deg, #0f8378, #1a66d8); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(13, 148, 136, .35); }
@media (max-width: 1180px) {
  html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 header.site .burger { background: #fff; border-color: rgba(11, 16, 32, .14); color: var(--v2-text-2); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
  html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 header.site .burger:hover { background: #f4f6fa; border-color: rgba(11, 16, 32, .26); }
}

/* ============================== 13 the status bar (installed app, iOS)
   The app is installed with the "black-translucent" status bar: iOS draws
   the page under it and always writes the clock / battery in WHITE (the
   style is read once, when the app is added — a page cannot switch it to
   dark text later, and theme-color does not change it). On the dark theme
   the header simply runs up behind it. On the light theme a white header
   there would hide the clock, so the strip behind the status bar (exactly
   --dk-safe-top tall, 0 everywhere else) stays deep ink with a thin line
   of the brand's light along its base: a deliberate dark "system bar" over
   the light app, the same in the editors' own top bars and the open menu. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(header.site, .bshell-top, .bsx-top)::before,
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) #dk-drawer::after {
  content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: var(--dk-safe-top, 0px); pointer-events: none;
  background:
    linear-gradient(90deg, rgba(45, 212, 191, 0), rgba(45, 212, 191, .7) 30%, rgba(61, 139, 255, .55) 65%, rgba(169, 112, 255, 0)) left bottom / 100% 1px no-repeat,
    linear-gradient(180deg, #070a12, #101828);
}

/* Sign-in / sign-up on a phone (375×740): the submit button in view
   without scrolling. The sign-up boxes (terms, optional updates) stay
   ABOVE the submit and the Google button, just compact; the logo mark
   goes (the header already has it). */
@media (max-width: 760px) {
  #qa-auth.qa-gate-wrap { min-height: 0; align-items: flex-start; padding: 10px 12px 16px; }
  html body #qa-auth .qa-gate-box { padding: 16px 16px 18px; }
  body.theme-v2.v2-auth #qa-auth .qa-gate-box::before { display: none; }
  html body #qa-auth .qa-gate-box h1 { font-size: 21px; margin: 0 0 10px; }
  #qa-auth .qa-consent { margin: 0 0 10px; padding: 4px 10px; gap: 0; }
  /* Each box's row is a 40px tap target. */
  html body #qa-auth .qa-gate-box .qa-check { font-size: 12.5px; line-height: 1.45; min-height: 40px; align-items: center; }
  #qa-auth .qa-check input { margin: 0; }
  html body #qa-auth .qa-google-btn { min-height: 44px; padding-block: 8px; }
  #qa-auth .qa-divider { margin: 8px 0; }
  #qa-auth .qa-gate-box .field { margin-bottom: 8px; gap: 3px; }
  html body #qa-auth .qa-gate-box :is(input[type="email"], input[type="password"], input[type="text"]) { min-height: 44px; padding-block: 8px; }
  #qa-auth .qa-err:empty, #qa-auth .qa-msg:empty { min-height: 0; margin: 0; }
  #qa-auth #qa-captcha:empty { margin: 0 !important; }
  html body #qa-auth .qa-gate-box .btn { min-height: 48px; }
  #qa-auth .qa-switch { margin-top: 10px; }
  #qa-auth :is(.qa-switch, .qa-forgot) button { min-height: 40px; }
}