/* =====================================================================
   Path OS — THEME (UI v2)
   ---------------------------------------------------------------------
   This is the ONLY file that defines colors, fonts, radii, shadows and
   the chart palette. Every other stylesheet reads these tokens.

   Themes: light is the default. theme.js (loaded in <head>) sets
     <html data-theme="light|dark">   (resolved from the saved choice:
                                       light / dark / system)
   Dark mode is its own palette, not an inverted light mode.

   Naming: the original token names are kept so every existing page and
   card follows the new design. In v2, "--brand" means the strongest
   foreground (near-black in light, near-white in dark) and "--lime" /
   "--accent" is the luminous green, used sparingly.
   Contrast notes (WCAG 2.2, measured): see docs/ui-v2/DESIGN_SYSTEM.md.
   ===================================================================== */

:root{
  color-scheme:light;

  /* Desktop notice uses the light reference palette and follows dark mode below. */
  --desktop-bg:#F5F5F5; --desktop-surface:#FFFFFF; --desktop-ink:#0B0C0B;
  --desktop-muted:#60665F; --desktop-green-soft:#E4FDE9; --desktop-green-hover:#C9F9D4;
  --desktop-green-ink:#13762F; --desktop-card-radius:28px; --desktop-pill-radius:16px;
  --desktop-input-radius:8px; --desktop-shadow:0 12px 40px rgba(11,12,11,.06);

  /* ---- Typography ---- */
  --font:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular','Cascadia Code','Roboto Mono',Menlo,Consolas,monospace;

  /* ---- Neutrals ---- */
  --bg:#F5F5F5;          /* approved gray page canvas */
  --bg-soft:#EDEDED;     /* subtle fills: chips, tracks, hover */
  --bg-softer:#FAFAF8;   /* footers, quiet panels */
  --surface:#FFFFFF;     /* cards, header, menus */
  --surface-2:#FBFBFA;   /* inset panels inside cards */
  --ink:#0B0C0B;         /* main text */
  --ink-2:#2A2E29;       /* strong secondary text */
  --muted:#60665F;       /* secondary text, labels (5.4:1 on --bg) */
  --muted-2:#6B7168;     /* placeholders, captions (5.0:1 on white, 4.6:1 on --bg) */
  --faint:#B9BEB6;       /* decorative numbers and ticks only */
  --line:#DADBDD;        /* approved subtle separators */
  --line-2:#D5DAD2;      /* stronger borders */
  --line-3:#C3C9C0;      /* hover borders */
  --line-4:#B5BBB2;      /* input-like hover border */
  --line-input:#878D84;  /* form control borders (3.4:1 on white, 3.1:1 on --bg) */
  --switch-off:#C2C8BF;  /* toggle switch off track */

  /* Card surfaces and copy follow the resolved app theme; controls keep their own tokens. */
  --card-surface:var(--surface);
  --card-ink:var(--ink); --card-ink-2:var(--ink-2); --card-body:var(--jd-body);
  --card-muted:var(--muted); --card-muted-2:var(--muted-2);
  --card-link:var(--accent-ink); --card-focus:var(--accent-ink);
  --card-line:var(--line); --card-line-2:var(--line-2); --card-line-3:var(--line-3);
  --card-positive:var(--positive); --card-warn:var(--warn); --card-danger:var(--danger);
  --filter-pill-line:var(--accent-ink);

  /* ---- Strong foreground ("brand") ---- */
  --brand:#0B0C0B;           /* primary buttons, active nav pill, links, chart bars */
  --brand-700:#2A2E29;       /* primary hover */
  --brand-50:#E8EBE5;        /* light neutral fill */
  --brand-tint:#EFF1EC;      /* selected / quiet badge background */
  --on-brand:#FFFFFF;        /* text on --brand */
  --on-brand-soft:#C9CFC6;   /* secondary text on --brand */
  --on-brand-accent:#76FB91; /* accent mark on a --brand fill (icon, dot) */

  /* ---- Accent green (use sparingly: one or two elements per view) ---- */
  --lime:#76FB91;            /* accent fill: insight stack, selected markers, voice orb */
  --lime-700:#5EEA7B;        /* accent hover */
  --on-lime:#0B0C0B;         /* text on green (never white: 1.3:1) */
  --lime-tint:#E4FDE9;       /* soft green surface — dark text only */
  --lime-line:#B4F2C2;       /* border on --lime-tint */
  --accent:var(--lime);      /* chart highlight, dots, markers */
  --accent-ink:#13762F;      /* green TEXT on light backgrounds (5.3:1 on --bg) */
  --accent-soft:rgba(118,251,145,.20);

  /* ---- Dropdown icon tiles (select.css) ---- */
  --xs-ic-bg:#E4FDE9;        --xs-ic-ink:#13762F;       /* resting tile */
  --xs-ic-hover-bg:#C9F9D4;  --xs-ic-hover-ink:#0B5F23; /* hovered / keyboard-focused option */
  --xs-ic-on-bg:#76FB91;     --xs-ic-on-ink:#0B0C0B;    /* selected option, set pill */
  --accent-glow:rgba(118,251,145,.55);

  /* ---- Focus ---- */
  --focus:#0B0C0B;           /* focus outline */
  --focus-halo:rgba(118,251,145,.55);

  /* ---- Status (text / tint / line) ---- */
  --positive:#15803D;  --positive-tint:#E6F5EA;  --positive-line:#BFE5CB;
  --warn:#8A5A00;      --warn-tint:#FDF3DC;      --warn-line:#F0D9A1;  --warn-ink:#5F3E00;  --warn-bar:#D8991F;
  --danger:#B42318;    --danger-tint:#FDECEA;    --danger-line:#F4C5BF; --danger-ink:#7A1A12;
  --on-danger:#FFFFFF;  /* text / icon on a --danger fill */
  --info:#2F4A3A;      --info-tint:#EAF0EC;      --info-line:#CFDCD3;
  --highlight:#D9A21B;       /* "Offer" segment */
  --gold:#7A5200;      --gold-tint:#FBF0D6;  --gold-1:#FFF4D6;  --gold-2:#FBE3A8;
  --amber:#8F4A0D;     --amber-tint:#FCEBD9; --amber-ink:#6B360A;
  /* Pipeline status colours (text / fill / border) */
  --st-saved:#4F554E;     --st-saved-bg:#EFF0ED;     --st-saved-line:#DDE1DA;
  --st-interview:#13762F; --st-interview-bg:#E4FDE9; --st-interview-line:#B4F2C2;
  /* Admin center hues (kept muted) */
  --violet:#5B4A9E;  --violet-tint:#EEEBF7;
  --pink:#C2477A;    --pink-ink:#97305A;  --pink-tint:#FBE8EF;
  --orange:#D9771F;
  --teal:#1F7A6A;    --slate:#55606B;     --chart-muted:#B9BEB6;

  /* ---- Chart palette ---- */
  --chart-1:#0B0C0B;   /* primary series (bars, lines) */
  --chart-2:#76FB91;   /* highlight / current marker */
  --chart-3:#9AA095;   /* secondary series */
  --chart-4:#D9A21B;   /* tertiary (offers) */
  --chart-grid:#E7EAE4;
  --chart-tick:#C3C9C0;

  /* ---- Tracks / idle fills ---- */
  --track:#ECEEEA;  --track-2:#E2E5DF;  --track-3:#F0F1EE;

  /* ---- Sidebar Jobs page (Job Description design, frontend/features/jobs-sidebar) ---- */
  --jd-font-head:'Montserrat',var(--font);
  --jd-tint:#EAF3EC;         --jd-tint-ink:#08331F;   /* quiet green fills: tags, benefits, numbered markers */
  --jd-green:#146C43;        /* section marker bar, green links */
  --jd-body:#3A3F39;         /* long-form body text */
  --jd-divider:#EEF0EC;      /* list dividers inside a section */
  --jd-dash:#A9AFA7;         /* dashed empty / unselected outlines */
  --jd-pill:#0B0C0B;         --jd-pill-ink:#FFFFFF;   --jd-pill-muted:#A9AFA7; /* match chips, salary chip */
  --jd-deep:radial-gradient(130% 150% at 0% 100%,rgba(118,251,145,.55) 0%,rgba(36,150,84,.32) 38%,rgba(6,20,14,0) 72%),linear-gradient(160deg,#103224 0%,#06140E 100%);
  --jd-deep-sh:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08);
  --jd-deep-ink:#FFFFFF;     --jd-deep-muted:#C6DCCD;
  /* Score scale (match %, ATS): frontend/shared/ui/score.tsx blends these stops at 0 / 40 / 70 / 100% */
  --score-0:#FFC21A;  --score-40:#D9DC0B;  --score-70:#7BE33A;  --score-100:#00E676;
  --score-ink:#0B0C0B;       /* text on any score fill */
  --tip-bg:#0B0C0B;  --tip-ink:#FFFFFF;  --tip-shadow:0 8px 24px rgba(11,12,11,.2); /* score tooltips */
  --jd-rating:linear-gradient(90deg,#FFC21A 0%,#D9DC0B 40%,#7BE33A 70%,#00E676 100%);
  --jd-promo:#76FB91;        --jd-promo-ink:#0B0C0B;
  --jd-logo-tile:#FFFFFF;    /* company logos sit on white in both themes */
  /* ---- Sidebar Pipeline page: stage pills, kanban columns, notes (frontend/features/pipeline) ---- */
  --pl-saved-bg:#F2EFE4;        --pl-saved-ink:#0F7A4A;
  --pl-applied-bg:#0E4A40;      --pl-applied-ink:#76FB91;
  --pl-interviewing-bg:#1FCB6E; --pl-interviewing-ink:#06352B;
  --pl-offer-bg:#B4F23E;        --pl-offer-ink:#06352B;
  --pl-rejected-bg:#E7E9E4;     --pl-rejected-ink:#60665F;
  --pl-column:#EEF0EC;          --pl-column-over:#EAF3EC;
  --pl-note:#8A7A2A;            --pl-empty-line:#D3D8D0;
  --pl-count-soft:rgba(255,255,255,.55);
  --jd-scrim:rgba(11,12,11,.16); --jd-drawer-scrim:rgba(11,12,11,.32);
  --idle-1:#EEF0EC; --idle-2:#F6F7F5;   --idle-seg:#D9DDD6;

  /* ---- Insight stack (Dashboard, Workspace) ---- */
  --insight-ink:#0B0C0B;
  --on-insight-ink:#FFFFFF;  /* text on an --insight-ink fill (insight card buttons) */
  --insight-glass:rgba(255,255,255,.55);  /* chips and hover fills on the green insight card */
  --insight-glass-2:rgba(255,255,255,.40);
  --insight-front:radial-gradient(120% 95% at 88% 8%,rgba(235,255,240,.95) 0%,rgba(235,255,240,0) 46%),linear-gradient(155deg,#9BFDB0 0%,#7DFB97 42%,#63F07F 100%);
  --insight-mid:linear-gradient(155deg,rgba(150,253,173,.78),rgba(118,251,145,.55));
  --insight-back:linear-gradient(155deg,rgba(150,253,173,.48),rgba(118,251,145,.28));
  --insight-line:rgba(11,12,11,.08);
  --insight-shadow:0 30px 60px -30px rgba(31,120,56,.55),0 2px 6px -2px rgba(11,12,11,.08);

  /* ---- Voice orb / teaching canvas ---- */
  --orb-core:radial-gradient(circle at 35% 30%,#E9FFEE 0%,#9DFDB2 30%,#76FB91 58%,#3DD566 100%);
  --orb-ring:rgba(118,251,145,.35);
  --orb-idle:radial-gradient(circle at 35% 30%,#FFFFFF 0%,#E3E6E0 60%,#C9CEC6 100%);
  --cv-bg:#FFFFFF;      --cv-grid:#EEF0EC;   --cv-ink:#0B0C0B;  --cv-muted:#9AA095;
  --cv-accent:#13762F;  --cv-accent-fill:rgba(118,251,145,.28); --cv-danger:#B42318; --cv-note:#FBF0D6;
  --cv-pointer:#0B0C0B; --cv-highlight:rgba(118,251,145,.38);

  /* ---- Ask Path (path-ai.css): floating chat card, silver orb, launcher mercury ---- */
  --ai-inset:16px;      --ai-w:440px;        --ai-r:26px;
  --ai-desktop-w:400px; --ai-desktop-pill-w:360px;
  --ai-panel-sh:0 40px 90px -36px rgba(11,12,11,.5);
  --ai-head-bg:#FAFAF8;
  --ai-input-bg:#F6F6F4;
  --ai-mobile-glass:rgba(255,255,255,.94);
  --ai-mobile-edge:rgba(11,12,11,.12);
  --ai-mobile-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 28px -10px rgba(11,12,11,.25);
  --ai-phone-bg:#0B0C0B; --ai-phone-input:#252725; --ai-phone-ink:#F3F5F0; --ai-phone-muted:#A8B0A4; --ai-phone-line:#454A43;
  --ai-send-bg:#0B0C0B; --ai-send-fg:#FFFFFF;
  --ai-hover:rgba(127,127,127,.14);
  --ai-busy:#868C93;
  --ai-user-r:18px 18px 6px 18px;
  --ai-silver:radial-gradient(circle at 32% 24%,#FFFFFF 0%,#EEF0F2 16%,#C3C8CD 44%,#868C93 74%,#4B5056 100%);
  --ai-smoke:radial-gradient(circle,rgba(8,9,10,.85) 0%,rgba(8,9,10,0) 68%);
  --ai-gloss:radial-gradient(ellipse at center,rgba(255,255,255,.8),rgba(255,255,255,0) 70%);
  --ai-orb-sh:inset 0 -2px 5px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.8),0 4px 10px -4px rgba(11,12,11,.55);
  /* Monochrome wireframe palette: normalized RGB channels follow the resolved theme. */
  --ai-wireframe-ink:0 0 0; --ai-wireframe-solid:#000000;
  --ai-wireframe-idle:var(--ai-wireframe-ink); --ai-wireframe-connecting:var(--ai-wireframe-ink);
  --ai-wireframe-listening:var(--ai-wireframe-ink); --ai-wireframe-thinking:var(--ai-wireframe-ink);
  --ai-wireframe-speaking:var(--ai-wireframe-ink); --ai-wireframe-error:var(--ai-wireframe-ink);
  --ai-wireframe-disabled:var(--ai-wireframe-ink);
  --ai-launch-bg:var(--surface); --ai-launch-fg:var(--ink); --ai-launch-bd:var(--line);
  --ai-launch-sh:var(--pop-lg);
  --ai-plus-bg:#EDEDED;
  --ai-chip-bg:#F1F2EF; --ai-seg-on:#FFFFFF; --ai-seg-sh:0 1px 2px rgba(11,12,11,.15);
  --ai-dict-ring:0 0 0 4px rgba(118,251,145,.25);
  --ai-menu-bg:#141614; --ai-menu-bd:#2E322E; --ai-menu-ink:#ECEFEA; --ai-menu-ic:#232623; --ai-menu-hover:rgba(255,255,255,.06);
  --ai-menu-sh:0 30px 60px -20px rgba(0,0,0,.7);
  --ai-picker-bg:#FFFFFF; --ai-picker-glass:rgba(255,255,255,.9); --ai-picker-ink:#0B0C0B;
  --ai-picker-muted:#5C6458; --ai-picker-line:rgba(11,12,11,.14); --ai-picker-hover:#F1F2EF;
  --ai-picker-shadow:0 12px 36px -12px rgba(11,12,11,.3);
  --ai-sheet-bg:#FFFFFF; --ai-sheet-sh:0 -20px 50px -20px rgba(11,12,11,.45); --ai-scrim:rgba(11,12,11,.34);
  /* resume folder (same in both themes: a dark folder holding white paper) */
  --ai-folder:#1B1E1B; --ai-folder-back:#0B0C0B; --ai-folder-edge:#2A2E2A; --ai-folder-ink:#ECEFEA; --ai-folder-muted:#8B9289;
  --ai-folder-sh:0 0 0 1px #2A2E2A,0 30px 50px -30px rgba(0,0,0,.8); --ai-folder-hi:inset 0 1px 0 rgba(255,255,255,.05);
  --ai-go-glow:0 0 0 6px rgba(118,251,145,.14),0 0 26px rgba(118,251,145,.45);
  --ai-paper:#FFFFFF; --ai-paper-ink:#0B0C0B; --ai-paper-line:#E1E5DF; --ai-paper-meta:#6B7168; --ai-paper-type:#9AA197; --ai-paper-label:#13762F;
  --ai-paper-bd:rgba(11,12,11,.08);
  --ai-paper-sh:0 16px 30px -18px rgba(11,12,11,.5); --ai-paper-lift:0 24px 40px -18px rgba(11,12,11,.6);
  --ai-paper-on:0 0 0 3px #76FB91,0 20px 34px -18px rgba(11,12,11,.6);
  /* shared Ask Path chat (ChatGPT-style): white page in light, black page in dark */
  --ai-chat-bg:#FFFFFF; --ai-chat-ink:#0D0D0D; --ai-chat-muted:#6E6E6E; --ai-chat-line:rgba(0,0,0,.1);
  --ai-chat-bubble:#F0F0F0; --ai-chat-bubble-ink:#0D0D0D;
  --ai-chat-pill:#F4F4F4; --ai-chat-pill-bd:rgba(0,0,0,.08); --ai-chat-btn:#F4F4F4; --ai-chat-btn-bd:rgba(0,0,0,.06);
  --ai-chat-cta:#0D0D0D; --ai-chat-cta-ink:#FFFFFF;
  --ai-chat-sel:#ECECEC; --ai-chat-shade:rgba(255,255,255,.55); --ai-chat-pop-sh:0 18px 40px -12px rgba(0,0,0,.28);

  /* ---- Welcome banner (legacy card) / on-dark status ---- */
  --hero-kicker:#76FB91;  --hero-ring:#76FB91;
  --on-dark-ok:#9DFDB2;     --on-dark-ok-bg:#76FB91;
  --on-dark-warn:#FFD57A;   --on-dark-warn-bg:#FFC54D;
  --on-dark-danger:#FFB0B0; --on-dark-danger-bg:#FF8A8A;

  /* Approved company placeholders: dark tangerine with white initials in both themes. */
  --company-logo-placeholder:#C2410C; --company-logo-placeholder-ink:#FFFFFF;

  /* ---- Company initials chips (quiet; logos come from company-logo enrichment) ---- */
  --logo-ink:#1E221E;
  --logo-1:#E7ECE4; --logo-2:#E6E9EE; --logo-3:#EFE9E1;
  --logo-4:#ECE7EE; --logo-5:#E2EEE6; --logo-6:#E9ECEC;

  /* ---- Shape ---- */
  --r-surface:12px; /* ordinary surfaces; chat and meaningful shapes keep their own radii */
  --r-sm:8px;
  --r:10px;
  --r-lg:14px;
  --r-card:18px;
  --r-widget:18px;
  --r-btn:12px;
  --r-pill:999px;

  /* ---- Elevation (quiet by default) ---- */
  --shadow-rgb:11,12,11;
  --shadow-card:0 1px 2px rgba(var(--shadow-rgb),.04);
  --shadow-hover:0 1px 2px rgba(var(--shadow-rgb),.04),0 12px 28px -16px rgba(var(--shadow-rgb),.20);
  --pop:0 18px 40px -18px rgba(var(--shadow-rgb),.24),0 2px 6px -2px rgba(var(--shadow-rgb),.08);
  --pop-lg:0 28px 64px -22px rgba(var(--shadow-rgb),.30),0 4px 12px -4px rgba(var(--shadow-rgb),.08);
  --shadow-raised:0 1px 2px rgba(var(--shadow-rgb),.05),0 8px 20px -12px rgba(var(--shadow-rgb),.16);
  --shadow-raised-hover:0 2px 4px rgba(var(--shadow-rgb),.06),0 14px 28px -14px rgba(var(--shadow-rgb),.22);
  --shadow-soft-hover:0 4px 12px -8px rgba(var(--shadow-rgb),.20);
  --search-bar-shadow:0 8px 24px -16px rgba(var(--shadow-rgb),.35); /* compact job search bar */
  --glow-accent:0 22px 50px -22px rgba(118,251,145,.75);
  --announcement-bg:#000000; --announcement-ink:#FFFFFF;
  --announcement-h:30px;
  --header-bg:#FFFFFF;
  /* header toolbar (search · credits · + · alerts) and account */
  --hdr-search-tile:#0B0C0B;    --hdr-search-tile-ink:#FFFFFF;
  --hdr-plus-wrap:#76FB91;
  --hdr-plus-bg:#FFFFFF;        --hdr-plus-ink:#0B0C0B;
  --hdr-plus-hover-bg:#0B0C0B;  --hdr-plus-hover-ink:#76FB91;
  --hdr-plus-shadow:0 1px 2px rgba(11,12,11,.14);
  --hdr-btn-hover:#F6F6F4;
  --hdr-badge-bg:#0B0C0B;       --hdr-badge-ink:#76FB91;   --hdr-badge-edge:0 0 0 0 transparent;
  --hdr-av-bg:#FFFFFF;          --hdr-av-ink:#0B0C0B;      --hdr-av-ring:#76FB91;
  /* Courses (/courses): the dark "continue learning" panel, cover tags and category covers */
  --crs-hero-bg:#0B0C0B;     --crs-hero-side:#161816;   --crs-hero-ink:#ECEFEA;   --crs-hero-white:#FFFFFF;
  --crs-hero-muted:#A2A9A0;  --crs-hero-faint:#8B9289;  --crs-hero-dim:#6B7168;
  --crs-hero-chip:#161816;   --crs-hero-chip-ink:#C3C8CD; --crs-hero-line:#2A2E2A; --crs-hero-track:#2E332E;
  --crs-hero-accent:#76FB91; --crs-hero-accent-2:#9BFCAE; --crs-hero-accent-line:#A9FDBB; --crs-hero-accent-hover:#8BFCA2;
  --crs-hero-pill:rgba(118,251,145,.12); --crs-hero-pill-line:rgba(118,251,145,.35);
  --crs-hero-glass:rgba(11,12,11,.8);    --crs-hero-glass-line:rgba(255,255,255,.08); --crs-hero-cur-glow:0 0 0 3px rgba(255,255,255,.06);
  --crs-hero-shadow:0 30px 60px -36px rgba(11,12,11,.6);
  --crs-tag-bg:rgba(11,12,11,.86); --crs-tag-ink:#FFFFFF;
  --crs-card-hover:0 20px 40px -24px rgba(11,12,11,.4);
  --crs-dialog-sh:0 40px 90px -24px rgba(11,12,11,.55); --crs-scrim:rgba(11,12,11,.5);
  --crs-cover-technical:radial-gradient(120% 90% at 85% 10%,#C9F9D4 0%,rgba(201,249,212,0) 55%),linear-gradient(150deg,#E4FDE9 0%,#B4F2C2 100%);
  --crs-cover-behavioral:radial-gradient(120% 90% at 85% 10%,#FFFFFF 0%,rgba(255,255,255,0) 55%),linear-gradient(150deg,#EFF1EC 0%,#D5DAD2 100%);
  --crs-cover-leadership:radial-gradient(120% 90% at 85% 10%,#2E332E 0%,rgba(46,51,46,0) 55%),linear-gradient(150deg,#161816 0%,#0B0C0B 100%);
  --crs-cover-negotiation:radial-gradient(120% 90% at 85% 10%,#FFF4D6 0%,rgba(255,244,214,0) 55%),linear-gradient(150deg,#FBF0D6 0%,#FBE3A8 100%);
  --crs-cover-ink:#0B0C0B;  --crs-cover-ink-on-dark:#76FB91;

  /* ---- Type scale ---- */
  --fs-2xs:12px;       /* eyebrows, tiny tags */
  --fs-xs:13px;        /* captions, chips, badges */
  --fs-sm:14px;        /* meta lines, buttons, pills, tabs */
  --fs-md:15px;        /* body text, nav */
  --fs-lg:16px;        /* card titles, lead text */
  --fs-xl:20px;        /* stat values, section titles */
  --fs-2xl:26px;       /* page sub-heads; detail title on phones */
  --fs-3xl:34px;       /* page titles */
  --fs-display:clamp(40px,5.2vw,68px); /* editorial page heading */
  --fs-metric:clamp(34px,3.4vw,48px);  /* large metric numbers */
  --lh-body:1.55;
  --lh-tight:1.12;

  /* ---- Density (control heights, spacing) — 4/8 px rhythm ---- */
  --h-btn:40px;  --h-btn-sm:32px;  --h-btn-lg:48px;
  --h-pill:34px; --h-input:42px;   --h-tab:42px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
  --card-pad-y:16px;   /* list cards (e.g. job results) */
  --card-pad-x:18px;
  --card-gap:10px;     /* space between list cards */
  --card-pad:22px;     /* standard card padding (20–24px) */

  /* ---- Layout ---- */
  --hh-bar:68px;       /* main header row */
  --subnav-h:46px;     /* Jobs sub-navigation row */
  --hh:var(--hh-bar);  /* whole sticky header; body.has-subnav adds --subnav-h (path28.css) */
  --page-max:1440px;
  --page-pad:clamp(16px,2.6vw,40px);
  --tutor-w:clamp(360px,30vw,440px);
  --nav-bar:2px;

  /* ---- Motion (prefers-reduced-motion turns it off) ---- */
  --dur-press:90ms;    /* button press scale */
  --dur-tick:120ms;    /* checkbox / radio tick pop */
  --dur-fast:140ms;    /* hover, colour changes */
  --dur-pop:160ms;     /* filter popover in / out */
  --dur-list:180ms;    /* result cards fade */
  --dur-med:180ms;     /* panels, tabs */
  --dur-sheet:220ms;   /* side / bottom sheet */
  --dur-slow:220ms;    /* stacked insight cards */
  --dur-count:400ms;   /* number tween */
  --stagger:30ms;      /* per result card, max 8 staggered */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --scrim:rgba(var(--shadow-rgb),.36); /* backdrop behind sheets */

  /* ---- Interview room (interview-practice.css, "Interview Room v3" design) ----
     The floating top bar, control dock and status pill are dark in both themes. */
  --ir-stage:#FFFFFF;
  --ir-chrome:#0B0C0B;     --ir-chrome-bd:#2A2E2A;    --ir-chrome-ink:#FFFFFF;  --ir-chrome-muted:#8B9289;
  --ir-chrome-2:#1F221F;   --ir-chrome-2-bd:#2E332E;  --ir-chrome-3:#1B1E1B;    --ir-chrome-off:#4A504A;
  --ir-chrome-sh:0 22px 48px -18px rgba(11,12,11,.6);
  --ir-top-sh:0 12px 28px -14px rgba(11,12,11,.55);
  --ir-go:#76FB91;         --ir-go-bd:#A9FDBB;        --ir-go-ink:#0B0C0B;
  --ir-pause:#FFFFFF;      --ir-pause-ink:#0B0C0B;
  --ir-live:#E5484D;
  --ir-end:#E5484D;        --ir-end-bd:#F27A7E;       --ir-end-hover:#D93A40;   --ir-end-ink:#FFFFFF;
  --ir-tool:#1A1D1A;       --ir-tool-ink:#D3D8D0;     --ir-tool-bd:#2E332E;
  --ir-tool-on:rgba(118,251,145,.13); --ir-tool-on-ink:#A6FDB8; --ir-tool-on-bd:rgba(118,251,145,.42);
  --ir-seg:#2E322E;        --ir-seg-cur:#ECEFEA;      --ir-seg-done:#76FB91;
  --ir-btn:#0B0C0B;        --ir-btn-ink:#FFFFFF;      --ir-btn-bd:#2A2E2A;      --ir-btn-hover:#2A2E29;
  --ir-chip-ink:#2A2E29;   --ir-sep:#C3C9C0;
  --ir-board:#FFFFFF;      --ir-board-dot:#D5DAD2;    --ir-board-bar:rgba(255,255,255,.92);
  --ir-board-line:#EDEDED; --ir-board-ink:#0B0C0B;    --ir-board-hint:#9AA197;  --ir-board-marker:#76FB91;
  --ir-board-seg:#EDEDED;  --ir-board-seg-on:#FFFFFF; --ir-board-seg-sh:0 1px 2px rgba(11,12,11,.15);
  --ir-board-btn-bd:#E1E5DF; --ir-board-btn-hover:#F6F6F4;
  --ir-board-sh:0 30px 60px -30px rgba(11,12,11,.45),0 0 0 1px rgba(11,12,11,.06);
  --ir-board-scrim:rgba(220,223,217,.75);
  --ir-halo:rgba(255,255,255,.025); /* faint ring around the setup-page orb and live dot */
  --ir-spring:cubic-bezier(.34,1.56,.64,1); /* springy press / open motion */
  /* Interview Room v5: soft gradient stage, glass cards, a contextual control pill */
  --ir5-stage:linear-gradient(120deg,#E3F3E7 0%,#EEF0F5 50%,#DCE6F4 100%);
  --ir5-ink:#0B0C0B;       --ir5-inv:#FFFFFF;         --ir5-mut:#5C625B;        --ir5-line:rgba(60,60,67,.2);
  --ir5-card:rgba(255,255,255,.62); --ir5-card-bd:rgba(255,255,255,.85);
  --ir5-card-sh:0 1px 2px rgba(0,0,0,.04),0 14px 34px -20px rgba(30,50,80,.3);
  --ir5-soft:rgba(246,247,245,.9);  --ir5-chip:rgba(255,255,255,.75); --ir5-chip-fg:#2A2E29;
  --ir5-track:rgba(60,60,67,.12);   --ir5-hover:rgba(127,127,127,.1);
  --ir5-ok:#13762F;        --ir5-warn:#A35200;        --ir5-warn-bg:#FFE9CF;    --ir5-warn-fg:#8A4B00;
  --ir5-cx-bg:rgba(255,255,255,.86); --ir5-cx-bd:rgba(4,4,4,.06);
  --ir5-cx-sh:0 1px 2px rgba(0,0,0,.05),0 16px 40px -16px rgba(30,40,60,.3);
  --ir5-sep:rgba(60,60,67,.14);     --ir5-meter:#13762F;      --ir5-tg-fg:#1C1C1E;
  --ir5-hero-bg:linear-gradient(180deg,#FFFFFF 0%,#F4F3F6 100%); --ir5-hero-fg:#111111;
  --ir5-hero-sh:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(0,0,0,.04),0 0 0 .5px rgba(0,0,0,.06),0 6px 16px -4px rgba(30,30,60,.18),0 1px 2px rgba(0,0,0,.06);
  --ir5-seg-idle:rgba(255,255,255,.18); --ir5-seg-cur:rgba(118,251,145,.45); --ir5-row-cur:rgba(255,255,255,.85);
  --ir5-end:rgba(255,59,48,.92);   --ir5-end-ink:#FFFFFF;
  --ir5-end-sh:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -1px 1px rgba(0,0,0,.15),0 6px 16px -4px rgba(255,59,48,.45);
  --ir5-end-rim:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.1) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.45));
  --ir5-orb:radial-gradient(circle at 35% 30%,#FFFFFF 0%,#B9FCC8 22%,#76FB91 50%,#13762F 100%);
  --ir5-orb-sh:0 6px 18px -6px rgba(19,118,47,.6),inset 0 -4px 10px rgba(0,0,0,.18);
  --ir5-board:#FFFFFF;     --ir5-board-dot:#D5DAD2;
  --ir5-board-sh:0 30px 60px -30px rgba(11,12,11,.45),0 0 0 1px rgba(127,127,127,.15);

}

@media (max-width:1100px){:root{--hh-bar:62px;--subnav-h:44px}}

/* =====================================================================
   Dark theme — deep neutral surfaces, thin lifted borders, the same green
   ===================================================================== */
:root[data-theme="dark"]{
  --desktop-bg:var(--bg); --desktop-surface:var(--surface); --desktop-ink:var(--ink);
  --desktop-muted:var(--muted); --desktop-green-soft:var(--lime-tint);
  --desktop-green-hover:var(--xs-ic-hover-bg); --desktop-green-ink:var(--accent-ink);
  color-scheme:dark;

  --bg:#0D0E0D;
  --bg-soft:#1F221F;
  --bg-softer:#121412;
  --surface:#161816;
  --surface-2:#1B1E1B;
  --ink:#ECEFEA;
  --ink-2:#D3D8D0;
  --muted:#A2A9A0;       /* 7.4:1 on --surface */
  --muted-2:#8B9289;     /* 5.6:1 on --surface */
  --faint:#4A504A;
  --line:#2A2E2A;
  --line-2:#343934;
  --line-3:#454B45;
  --line-4:#566056;
  --line-input:#6E766C;  /* 3.8:1 on --surface */
  --switch-off:#3A403A;

  --brand:#ECEFEA;
  --brand-700:#FFFFFF;
  --brand-50:#262B26;
  --brand-tint:#222622;
  --on-brand:#0B0C0B;
  --on-brand-soft:#4A504A;
  --on-brand-accent:#13762F;

  --lime:#76FB91;
  --lime-700:#8FFCA5;
  --on-lime:#0B0C0B;
  --lime-tint:#18291D;
  --lime-line:#2C5236;
  --accent-ink:#76FB91;      /* 13.6:1 on --surface */
  --accent-soft:rgba(118,251,145,.14);
  --accent-glow:rgba(118,251,145,.35);

  --xs-ic-bg:rgba(118,251,145,.14);        --xs-ic-ink:#76FB91;
  --xs-ic-hover-bg:rgba(118,251,145,.14);  --xs-ic-hover-ink:#76FB91;
  --xs-ic-on-bg:#76FB91;                   --xs-ic-on-ink:#0B0C0B;

  --focus:#ECEFEA;
  --focus-halo:rgba(118,251,145,.45);

  --positive:#5BD68A;  --positive-tint:#15281C;  --positive-line:#24452F;
  --warn:#F0B44C;      --warn-tint:#2B2312;      --warn-line:#4A3A16;  --warn-ink:#F7D08A;  --warn-bar:#E0A53A;
  --danger:#FF8A80;    --danger-tint:#2E1715;    --danger-line:#4D2420; --danger-ink:#FFC2BC;
  --on-danger:#2B0B08;
  --info:#B9CBBE;      --info-tint:#1C231E;      --info-line:#2E3A31;
  --highlight:#E8B53A;
  --gold:#F0C66A;      --gold-tint:#2A2414;  --gold-1:#2E2716;  --gold-2:#4A3B17;
  --amber:#F2A25C;     --amber-tint:#2D1F12; --amber-ink:#F7C597;
  --st-saved:#BAC0B7;     --st-saved-bg:#222622;     --st-saved-line:#343934;
  --st-interview:#76FB91; --st-interview-bg:#18291D; --st-interview-line:#2C5236;
  --violet:#B3A6EE;  --violet-tint:#241F38;
  --pink:#F08DB4;    --pink-ink:#F7B8D0;  --pink-tint:#33192A;
  --orange:#F2A25C;
  --teal:#5FC7B4;    --slate:#A9B4BF;     --chart-muted:#4A504A;

  --chart-1:#ECEFEA;
  --chart-2:#76FB91;
  --chart-3:#6E766C;
  --chart-4:#E8B53A;
  --chart-grid:#242824;
  --chart-tick:#3A403A;

  --track:#242824;  --track-2:#2A2E2A;  --track-3:#1F221F;

  --jd-tint:#18291D;         --jd-tint-ink:#B4F2C2;
  --jd-green:#76FB91;
  --jd-body:#C9CFC6;
  --jd-divider:#2A2E2A;
  --jd-dash:#566056;
  --jd-pill:#ECEFEA;         --jd-pill-ink:#0B0C0B;   --jd-pill-muted:#4A504A;
  --jd-scrim:rgba(0,0,0,.45); --jd-drawer-scrim:rgba(0,0,0,.6);
  --pl-saved-bg:#26281F;        --pl-saved-ink:#8FE3B0;
  --pl-rejected-bg:#262B26;     --pl-rejected-ink:#A2A9A0;
  --pl-column:#1B1E1B;          --pl-column-over:#18291D;
  --pl-note:#D8C26A;            --pl-empty-line:#343934;
  --pl-count-soft:rgba(255,255,255,.18);
  --idle-1:#1F221F; --idle-2:#1A1D1A;   --idle-seg:#3A403A;

  --insight-ink:#0B0C0B;
  --on-insight-ink:#FFFFFF;  /* text on an --insight-ink fill (insight card buttons) */
  --insight-glass:rgba(255,255,255,.55);  /* chips and hover fills on the green insight card */
  --insight-glass-2:rgba(255,255,255,.40);
  --insight-front:radial-gradient(120% 95% at 88% 8%,rgba(225,255,232,.85) 0%,rgba(225,255,232,0) 46%),linear-gradient(155deg,#8EFCA6 0%,#76FB91 45%,#4FE071 100%);
  --insight-mid:linear-gradient(155deg,rgba(118,251,145,.42),rgba(118,251,145,.22));
  --insight-back:linear-gradient(155deg,rgba(118,251,145,.24),rgba(118,251,145,.10));
  --insight-line:rgba(11,12,11,.10);
  --insight-shadow:0 30px 80px -24px rgba(118,251,145,.32),0 2px 8px -2px rgba(0,0,0,.5);

  --orb-ring:rgba(118,251,145,.28);
  --orb-idle:radial-gradient(circle at 35% 30%,#4A504A 0%,#2A2E2A 60%,#1F221F 100%);
  --cv-bg:#121412;      --cv-grid:#1F221F;   --cv-ink:#ECEFEA;  --cv-muted:#6E766C;
  --cv-accent:#76FB91;  --cv-accent-fill:rgba(118,251,145,.18); --cv-danger:#FF8A80; --cv-note:#2A2414;
  --cv-pointer:#ECEFEA; --cv-highlight:rgba(118,251,145,.24);

  --ai-panel-sh:0 40px 90px -36px rgba(0,0,0,.9);
  --ai-head-bg:#141614;
  --ai-input-bg:#171917;
  --ai-mobile-glass:rgba(23,25,23,.96);
  --ai-mobile-edge:rgba(255,255,255,.2);
  --ai-mobile-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 28px -10px rgba(0,0,0,.6);
  --ai-send-bg:#76FB91; --ai-send-fg:#0B0C0B;
  --ai-busy:#DADDE0;
  --ai-launch-bg:#0B0C0B; --ai-launch-fg:#FFFFFF; --ai-launch-bd:#343934;
  --ai-plus-bg:#232723;
  --ai-chip-bg:#1F221F; --ai-seg-on:#343934;
  --ai-sheet-bg:#151715; --ai-sheet-sh:0 -20px 50px -20px rgba(0,0,0,.7); --ai-scrim:rgba(0,0,0,.5);
  --ai-paper:var(--surface); --ai-paper-ink:var(--ink); --ai-paper-line:var(--line);
  --ai-paper-meta:var(--muted); --ai-paper-type:var(--muted-2); --ai-paper-label:var(--accent-ink);
  --ai-orb-sh:inset 0 -2px 5px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.8),0 4px 10px -4px rgba(0,0,0,.6),0 0 14px rgba(220,224,228,.14);
  --ai-wireframe-ink:1 1 1; --ai-wireframe-solid:#FFFFFF;
  --ai-chat-bg:#000000; --ai-chat-ink:#F2F2F2; --ai-chat-muted:#9B9B9B; --ai-chat-line:rgba(255,255,255,.12);
  --ai-chat-bubble:#363636; --ai-chat-bubble-ink:#FFFFFF;
  --ai-chat-pill:#141414; --ai-chat-pill-bd:rgba(255,255,255,.1); --ai-chat-btn:#171717; --ai-chat-btn-bd:rgba(255,255,255,.08);
  --ai-chat-cta:#F2F2F2; --ai-chat-cta-ink:#000000;
  --ai-chat-sel:#232323; --ai-chat-shade:rgba(0,0,0,.55); --ai-chat-pop-sh:0 18px 40px -12px rgba(0,0,0,.8);

  --logo-ink:#E3E7E0;
  --logo-1:#232823; --logo-2:#22252B; --logo-3:#2A2620;
  --logo-4:#28232A; --logo-5:#1F2A23; --logo-6:#252828;

  --shadow-rgb:0,0,0;
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
  --shadow-hover:0 1px 2px rgba(0,0,0,.35),0 14px 30px -16px rgba(0,0,0,.6);
  --pop:0 20px 44px -18px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4);
  --pop-lg:0 30px 70px -22px rgba(0,0,0,.75),0 4px 12px -4px rgba(0,0,0,.4);
  --glow-accent:0 22px 60px -22px rgba(118,251,145,.45);
  --header-bg:rgba(13,14,13,.84);
  --hdr-search-tile:#ECEFEA;    --hdr-search-tile-ink:#0B0C0B;
  --hdr-plus-wrap:#76FB91;
  --hdr-plus-bg:#0B0C0B;        --hdr-plus-ink:#76FB91;
  --hdr-plus-hover-bg:#FFFFFF;  --hdr-plus-hover-ink:#0B0C0B;
  --hdr-plus-shadow:0 1px 2px rgba(11,12,11,.14);
  --hdr-btn-hover:#1F221F;
  --hdr-badge-bg:#0B0C0B;       --hdr-badge-ink:#76FB91;   --hdr-badge-edge:inset 0 0 0 1.5px #76FB91;
  --hdr-av-bg:#1F221F;          --hdr-av-ink:#ECEFEA;      --hdr-av-ring:#76FB91;
  --crs-hero-bg:#161816;     --crs-hero-side:#1B1E1B;
  --crs-hero-chip:#1F221F;   --crs-hero-line:#343934;   --crs-hero-track:#343934;
  --crs-hero-shadow:0 30px 60px -36px rgba(0,0,0,.8);
  --crs-card-hover:0 20px 40px -24px rgba(0,0,0,.7);
  --crs-dialog-sh:0 40px 90px -24px rgba(0,0,0,.8); --crs-scrim:rgba(0,0,0,.6);
  --crs-cover-technical:radial-gradient(120% 90% at 85% 10%,#2C5236 0%,rgba(44,82,54,0) 55%),linear-gradient(150deg,#18291D 0%,#0F1A12 100%);
  --crs-cover-behavioral:radial-gradient(120% 90% at 85% 10%,#343934 0%,rgba(52,57,52,0) 55%),linear-gradient(150deg,#222622 0%,#161816 100%);
  --crs-cover-leadership:radial-gradient(120% 90% at 85% 10%,#2A2E2A 0%,rgba(42,46,42,0) 55%),linear-gradient(150deg,#121412 0%,#0B0C0B 100%);
  --crs-cover-negotiation:radial-gradient(120% 90% at 85% 10%,#4A3B17 0%,rgba(74,59,23,0) 55%),linear-gradient(150deg,#2A2414 0%,#1C180D 100%);
  --crs-cover-ink:#ECEFEA;
  --scrim:rgba(0,0,0,.55);

  /* Interview room: same dark chrome; the stage and primary button follow the theme */
  --ir-stage:#0D0E0D;
  --ir-btn:#ECEFEA;        --ir-btn-ink:#0B0C0B;      --ir-btn-bd:#FFFFFF;      --ir-btn-hover:#FFFFFF;
  --ir-chip-ink:#D3D8D0;   --ir-sep:#454B45;
  --ir-board-sh:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
  --ir-board-scrim:rgba(0,0,0,.6);
  --ir5-stage:linear-gradient(120deg,#0E1A12 0%,#0B0C0B 50%,#0F1420 100%);
  --ir5-ink:#FFFFFF;       --ir5-inv:#0B0C0B;         --ir5-mut:rgba(235,235,245,.64); --ir5-line:rgba(235,235,245,.2);
  --ir5-card:rgba(255,255,255,.05); --ir5-card-bd:rgba(255,255,255,.08);
  --ir5-card-sh:0 14px 34px -20px rgba(0,0,0,.8);
  --ir5-soft:rgba(255,255,255,.05); --ir5-chip:rgba(255,255,255,.08); --ir5-chip-fg:#ECEFEA;
  --ir5-track:rgba(255,255,255,.1);
  --ir5-ok:#76FB91;        --ir5-warn:#FFB86B;        --ir5-warn-bg:rgba(255,184,107,.16); --ir5-warn-fg:#FFB86B;
  --ir5-cx-bg:rgba(24,24,27,.86); --ir5-cx-bd:rgba(255,255,255,.08);
  --ir5-cx-sh:0 16px 40px -14px rgba(0,0,0,.75);
  --ir5-sep:rgba(255,255,255,.1);   --ir5-meter:#76FB91;      --ir5-tg-fg:#FFFFFF;
  --ir5-hero-bg:linear-gradient(180deg,#3A3A3D 0%,#2A2A2C 100%); --ir5-hero-fg:#FFFFFF;
  --ir5-hero-sh:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.6),0 6px 16px -4px rgba(0,0,0,.6);
  --ir5-seg-idle:rgba(11,12,11,.15); --ir5-row-cur:rgba(255,255,255,.08);
  --ir5-board:#111311;     --ir5-board-dot:#2A2E2A;

}

/* =====================================================================
   Landing page (index.html → landing.css) — "PathOS Home" design.
   Public-page palette. Accent aliases share the current Path green in every theme.
   ===================================================================== */
:root{
  --home-font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --home-ink:#1a1d1e;        /* headings, primary text, dark fills */
  --home-ink-2:#2a2e31;
  --home-body:#565b60;       /* paragraphs */
  --home-nav:#4a4f54;        /* nav + footer links */
  --home-muted:#8a9099;      /* captions */
  --home-muted-2:#9aa0a6;
  --home-line:#eceef0;       /* borders */
  --home-line-2:#f0f2f4;
  --home-surface:#fff;
  --home-soft:#fbfcfa;       /* tinted section / card background */
  --home-chip:#f2f4f5;
  --home-chip-2:#f5f6f7;
  --home-lime:var(--lime);       /* public pages share the current Path accent */
  --home-lime-ink:var(--accent-ink);
  --home-lime-ink-2:var(--accent-ink);
  --home-lime-tint:var(--lime-tint);
  --home-lime-wash:var(--lime-tint);
  --home-lime-line:var(--lime-line);
  --home-bad:#b0485c;        /* missing keywords */
  --home-bad-tint:#fbeef0;
  --home-deep:#0d2818;       /* final CTA banner */
  --home-grid:rgba(255,255,255,.05);
  --home-glow:var(--accent-soft);
  --home-on-deep-muted:#aeb4b9;
  /* laptop mockups */
  --home-bezel-1:#20262a;  --home-bezel-2:#14181b;
  --home-base-1:#d3d8dc;   --home-base-2:#b4babf;  --home-notch:#9198a0;
  --home-bar:#f1f3f5;      --home-bar-line:#e4e7ea; --home-screen:#fbfbfc;
  --home-dot-r:#ec6a5e;    --home-dot-y:#f4be4f;    --home-dot-g:#61c554;
  --home-stage-1:#c7cdd2;  --home-stage-2:#9bb8c9;  --home-stage-3:#8fd1a6;
  --home-track:#edf0f2;
  --home-shadow:0 28px 60px rgba(20,30,20,.2);
  --home-shadow-sm:0 24px 60px rgba(20,30,20,.22);
}

/* Public landing redesign: aliases are scoped so logged-in product tokens stay unchanged. */
body[data-page="landing"]{
  --home-font:var(--font);
  --home-ink:var(--ink);
  --home-ink-2:var(--ink-2);
  --home-body:var(--muted);
  --home-nav:var(--ink-2);
  --home-muted:var(--muted);
  --home-muted-2:var(--muted-2);
  --home-line:var(--line);
  --home-line-2:var(--line);
  --home-surface:var(--surface);
  --home-soft:var(--bg);
  --home-chip:var(--bg-soft);
  --home-lime:var(--lime);
  --home-lime-ink:var(--accent-ink);
  --home-lime-ink-2:var(--accent-ink);
  --home-lime-tint:var(--lime-tint);
  --home-lime-wash:var(--lime-tint);
  --home-lime-line:var(--lime-line);
  --home-bad:var(--danger);
  --home-deep:var(--brand);
  --home-panel-radius:28px;
  --home-hero-wash:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);
  --home-panel-wash:linear-gradient(135deg,var(--lime-tint),var(--bg-softer));
  --home-preview-shadow:0 2px 4px rgba(var(--shadow-rgb),.04),0 28px 64px -32px rgba(var(--shadow-rgb),.24);
}

/* Landing v3 (index.html → landing.css): the design's extra palette — live interview room, glows, orb.
   Scoped to the landing page; the landing page is light-only (it does not load theme.js). */
body[data-page="landing"]{
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-hand:'Caveat','Comic Sans MS',cursive;
  --lp-bg:#F6F6F4;  --lp-surface:#FFFFFF;  --lp-ink:#0B0C0B;  --lp-ink-2:#2A2E29;
  --lp-muted:#60665F;  --lp-muted-2:#6B7168;  --lp-muted-3:#8B9289;
  --lp-line:#E1E5DF;  --lp-line-soft:#EDEDED;  --lp-line-2:#D5DAD2;  --lp-line-3:#C9CEC6;  --lp-line-4:#C3C9C0;
  --lp-chip:#F1F2EF;  --lp-dot:#E8EAE6;  --lp-strike:#B9BFB6;
  --lp-glass:rgba(246,246,244,.8);  --lp-glass-line:rgba(225,229,223,.85);  --lp-glass-white:rgba(255,255,255,.88);
  --lp-ring-white:rgba(255,255,255,.6);  --lp-grid:rgba(11,12,11,.05);
  --lp-green:#76FB91;  --lp-green-hover:#8BFCA2;  --lp-green-line:#A9FDBB;  --lp-green-soft:#9BFCAE;
  --lp-green-ink:#13762F;  --lp-green-tint:#E4FDE9;  --lp-green-tint-line:#B4F2C2;  --lp-green-mid:#C9FCD4;
  --lp-green-wash:#EEFDF1;  --lp-green-dot:#2BD15A;  --lp-green-deep:#1E3A24;
  --lp-green-rgb:118,251,145;  --lp-mist-rgb:195,200,205;  --lp-ink-rgb:11,12,11;  --lp-deep-rgb:19,118,47;  --lp-white-rgb:255,255,255;
  /* the interview room stage is dark */
  --lp-stage:#0B0C0B;  --lp-stage-bar:#0E100E;  --lp-stage-line:#1F221F;  --lp-stage-card:#161816;  --lp-stage-card-2:#121412;
  --lp-stage-btn:#1F221F;  --lp-stage-line-2:#2A2E2A;  --lp-stage-line-3:#2E332E;  --lp-stage-hover:#1B1E1B;
  --lp-stage-text:#ECEFEA;  --lp-stage-text-2:#D3D8D0;  --lp-stage-chip-text:#C3C9C0;  --lp-stage-muted:#A2A9A0;
  --lp-stage-faint:#454B45;  --lp-stage-white:#FFFFFF;
  --lp-amber:#F5A524;  --lp-amber-ink:#FFC769;  --lp-amber-rgb:245,165,36;
  --lp-red:#E5484D;  --lp-red-hover:#D93A40;  --lp-red-line:#F27A7E;  --lp-red-soft:#FF8C90;  --lp-red-rgb:229,72,77;
  /* AI orb */
  --lp-orb-1:#FFFFFF;  --lp-orb-2:#EEF0F2;  --lp-orb-3:#C3C8CD;  --lp-orb-4:#868C93;  --lp-orb-5:#4B5056;
  --lp-orb-smoke:rgba(8,9,10,.92);  --lp-orb-smoke-2:rgba(40,43,47,.85);  --lp-orb-rim:rgba(220,224,228,.28);
  /* Landing v4: panels, the dark pill nav, status dots and the bright skill chips */
  --lp-panel:#EEEFEB;  --lp-soft:#EEF0EC;  --lp-soft-2:#FAFAF8;  --lp-soft-3:#F8F8F6;  --lp-muted-4:#9AA39A;
  --lp-stage-card-3:#232623;  --lp-stage-card-4:#1A1C1A;  --lp-green-tint-line-2:#B8F5C6;  --lp-black:#000000;
  --lp-warn:#E8A33B;  --lp-warn-tint:#FFF4E0;  --lp-warn-line:#F3D49A;  --lp-warn-ink:#8A5A0B;
  --lp-st-saved:#FFBB00;  --lp-st-applied:#1B82CC;  --lp-st-live:#31EE33;  --lp-st-closed:#FF0000;
  --lp-due-hot-ink:#C20000;  --lp-due-soon-ink:#8A6200;  --lp-due-hot-line:rgba(255,0,0,.25);  --lp-due-soon-line:rgba(255,187,0,.4);
  --lp-chip-1:#C8FC00;  --lp-chip-2:#FF3366;  --lp-chip-3:#0055FF;  --lp-chip-4:#18181B;  --lp-chip-5:#B200FF;
  --lp-review-1:#E4FDE9;  --lp-review-2:#ECEDE8;  --lp-review-3:#F3EEE3;  --lp-review-4:#E6ECEF;  --lp-review-5:#EEEAF2;
  --lp-mist-2-rgb:220,224,228;
}

/* Approved mobile navigation reference: opaque fallback and glass treatment. */
:root{
 --mobile-nav-bg:#F0F1F0; --mobile-nav-glass:rgba(243,244,243,.82); --mobile-nav-edge:#FFFFFF;
 --mobile-nav-ink:#0B0C0B; --mobile-nav-muted:#606560; --mobile-nav-green:#2BD15A;
 --mobile-nav-shadow:inset 0 2px 1px rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.7),0 18px 48px -14px rgba(70,75,70,.4);
 --mobile-ask-bg:#000000; --mobile-ask-fg:#FFFFFF;
}

/* Ordinary surface corners. Shared chat tokens stay unchanged. The radius-only
   priority keeps page styles and Tailwind controls on the same theme-owned value. */
:where(
 button, [role="button"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"],
 input:not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="hidden"],[type="file"]),
 textarea, select, .btn, .input, .textarea, .tags-input,
 .card, .wg, .c, .jx, .hero, .hx, .nxa, .nxi, .file, .drop, .flow,
 .tk .it, .tk .col, .tk .bc, .tk .mn, .tk .mo, .tk .ib, .tk .col-e, .tk-dlg,
 .rw-b, .rw-a, .si, .tl-d, .up-d, .hn-cd div, .nxi-cd>div,
 .p28-tools, .p28-nav a, .p28-sub a, .p28-mnav a, .p28-sidebar-link, .p28-acct-btn,
 .p28-pop, .dd-menu, .dd-opt, .acct-cr, .acct-theme, .acct-l a, .ad-nav a,
 .p28-bottom-nav, .p28-bottom-item, .p28-library-tile, .p28-library-more, .p28-library-menu, .p28-library-menu a,
 .credits, .cr-top, .cr-add, .alert, .toast, .ui-notice, .ui-dialog,
 .ui-stack-card, .ui-segmented, .ui-segmented a, .ui-steps li, .ui-prose pre,
 .xs-t, .xs-m, .xs-o, .side a, .pack, .dlg, .modal, .savebar, .helper, .msg, .err2,
 .sum, .sp-card, .fact, .kp-c, .results>#detail, .js-fresh-note,
 .fx-pop, .fx-sheet, .fx-opt, .fx-toggle, .spx-seg, .spx-tags, .spx-a, .js .sp,
 .mobile-search-bar, .mobile-filter-group, .mobile-filter-choice,
 .resume-upload-error, .resume-delete-dialog, .rs-hero, .rs-q, .rs-sug, .rs-item, .rs-empty, .rs-dlg,
 .dz, .nores, .fr, .rd, .ok-card, .sec, .sec-h, .rw, .ed, .cat, .pv, .sm, .mx,
 .tile, .lvl, .lv, .ob-note, .ac-l, .sk-l .skel, .tip, .ib, .add,
 .crs-search, .crs-hero, .crs-upnext, .crs-card, .crs-dlg, .crs-go, .crs-practise,
 .ip-card, .ip-choice label, .ip-paused, .ip-score, .ip-example, .ip-unans, .ip-hist-i,
 .ir-qc, .ir-ac, .ir-type, .ir-paused, .ir-qa-card, .ir-qi, .ir-board,
 .ir-avg, .ir-skill, .ir-ans, .ir-box, .ir-better, .ir-plan, .ir-drill, .ir-wait,
 .ip-new-loading, .ip-new-hero, .ip-new-step, .ip-room-preview,
 .desktop-card, .desktop-url, .launch-date, .launch-card,
 .hc-topics a, .faq, .hc-contact, .tbl, .toc, .toc a, .nf-links a,
 .pub-nav a, .pub-f nav a, .skip, .hm-go, .hm-ghost, .hm-signin, .hm-nav-go,
 .hm-nav-pill, .hm-links a, .hm-mnav a, .hm-journey, .hm-compare,
 .hm-window, .hm-fit-card, .hm-flow-steps li, .hm-pl-row, .hm-plan,
 .hm-qs, .hm-qs details, .hm-qs summary, .hm-end-box, .hm-dlg,
 .hm-sf-box, .hm-sf-inner, .hm-tour-controls, .hm-js-q, .hm-js-list button, .hm-js-stats>div,
 [class~="tw:rounded-jd"]
):not(:where(
 #p28AIPanel, #p28AIPanel *, .p28-ai-launcher, .p28-ai-launcher *,
 [class^="ai-"], [class^="ai-"] *, [class*=" ai-"], [class*=" ai-"] *,
 .v-orb, .v-orb *, .orb-mini, .orb-mini *, .p28-mercury-fallback,
 .avatar, .avatar *, .av, .av-xl, .logo, .logo *, .jx-logo, .jx-logo *,
 .p28-mark, .hm-mark, .launch-logo, .ir-logo, .ir-icon, .ir-orb, .ir-pens button,
 [class~="tw:bg-jd-logo-tile"], [class~="tw:bg-path-logo-placeholder"],
 [role="switch"], [role="checkbox"], [role="radio"], .switch, .switch *, .demo-tg, .demo-sw,
 .tag, .tag *, .ui-tag, .ui-chip, .ui-chip *, .chip, .chip *, .xs-tag, .xs-tag *,
 .tc, .sk, .kw, .badge, .ui-status, .st-pill, .st-chip, .ad-pill,
 .jx-save, .fx-x, .fx-box, .ui-chip .x, .hm-burger, .crs-upnext-play,
 .p28-jobfilters, .p28-ask-capsule, .p28-library-settings,
 [class~="tw:rounded-full"][aria-pressed][class~="tw:h-[34px]"],
 [class~="tw:rounded-full"][class*="tw:size-"],
 .p28-ai-mobile .p28-mobile-pair, .p28-ai-mobile .p28-mobile-pair *,
 .p28-ai-mobile .p28-acct-btn, .p28-ai-mobile .p28-acct-btn *
)){
 border-radius:var(--r-surface)!important;
}