/* ============================================================================
   Kmila Web — Design System
   Ported from the locked brand tokens (App/Kmila/Kmila.Shared/wwwroot/css/tokens.css)
   and the approved Mockup 01 (dark IDE). Dark-first; light overrides via
   <html data-theme="light">. No JS required for the base styles.

   DESIGN RULES (see also /Users/.../plans — full audit):
   - Nothing hardcoded: every spacing, font-size and major dimension is a token.
   - Sizes are FLUID via clamp() so they scale continuously at every viewport —
     media queries change LAYOUT only (column counts, nav collapse, stacking),
     never type/space (the clamp() tokens already do that).
   - @media conditions can't read CSS variables, so breakpoints are literal but
     snapped to one ladder (see --bp reference below).
   - Allowed literals: 1px/2px hairlines & borders, 50% circles, 0, and the
     syntax-highlight hex in .km-code (not theme colors).
   ============================================================================ */

/* ----- Tokens: dark (default / :root) ----- */
:root {
  /* Brand */
  --primary: #64748b;
  --primary-light: #94a3b8;
  --primary-dark: #475569;
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-soft: rgba(96, 165, 250, .15);
  --on-accent: #0b1220;        /* text/icons on top of --accent fills (dark theme) */

  /* Slate ramp (stable across themes) */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;

  /* Surfaces */
  --surface-0:#0b1220; --surface-1:#111a2e; --surface-2:#162038; --surface-3:#1e293b;

  /* Text */
  --text-strong:#f8fafc; --text:#e2e8f0; --text-muted:#94a3b8; --text-subtle:#64748b;

  /* Borders */
  --border:rgba(148,163,184,.16); --border-strong:rgba(148,163,184,.28);

  /* Semantic + signal (data-viz accents) */
  --success:#34d399; --warning:#fbbf24; --danger:#f87171;
  --danger-soft:rgba(248,113,113,.12); --danger-border:rgba(248,113,113,.3);
  --success-soft:rgba(52,211,153,.12); --success-border:rgba(52,211,153,.3);
  --danger-text:#fca5a5; --success-text:#6ee7b7;
  --signal-clock:#34d399; --signal-input:#60a5fa; --signal-output:#fbbf24; --signal-vector:#a78bfa;

  --shadow-1:0 1px 2px 0 rgba(0,0,0,.3),0 1px 3px 0 rgba(0,0,0,.2);
  --shadow-2:0 2px 4px -1px rgba(0,0,0,.35),0 8px 24px -6px rgba(0,0,0,.35);
  --shadow-3:0 4px 8px -2px rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.5);

  /* Type */
  --font-sans:'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Fluid type scale (min → max across the viewport). Replaces hardcoded px sizes. */
  --fs-2xs:clamp(.6875rem, .66rem + .15vw, .75rem);    /*  11 → 12 */
  --fs-xs: clamp(.75rem,  .72rem + .17vw, .8125rem);   /*  12 → 13 */
  --fs-sm: clamp(.8125rem,.78rem + .18vw, .875rem);    /*  13 → 14 */
  --fs-base:clamp(.875rem,.84rem + .2vw,  .9375rem);   /*  14 → 15 */
  --fs-md: clamp(.9375rem,.9rem + .22vw,  1rem);       /*  15 → 16 */
  --fs-lg: clamp(1.03rem, .98rem + .26vw, 1.125rem);   /*  16.5 → 18 */
  --fs-xl: clamp(1.125rem,1.06rem + .3vw, 1.25rem);    /*  18 → 20 */
  --fs-2xl:clamp(1.25rem, 1.15rem + .5vw, 1.5rem);     /*  20 → 24 */

  /* Line-height scale */
  --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.6; --lh-relaxed:1.65; --lh-loose:1.75;

  /* Fluid spacing scale (continuous). Snap hardcoded px to the nearest step. */
  --space-3xs:clamp(2px, .3vw, 3px);
  --space-2xs:clamp(3px, .5vw, 5px);
  --space-xs: clamp(6px, 1vw, 8px);
  --space-sm: clamp(8px, 1.4vw, 12px);
  --space-md: clamp(12px, 2vw, 16px);
  --space-lg: clamp(16px, 2.6vw, 22px);
  --space-xl: clamp(20px, 3.2vw, 28px);
  --space-2xl:clamp(26px, 4vw, 36px);
  --space-3xl:clamp(32px, 5vw, 48px);
  --space-4xl:clamp(40px, 7vw, 64px);
  --space-5xl:clamp(52px, 9vw, 88px);

  /* Layout */
  --max:1160px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  --nav-h:clamp(56px, 4vw + 44px, 64px);
  --gutter:clamp(20px, 5vw, 24px);     /* .km-wrap side padding */

  /* Responsive component dimensions (replace fixed heights/widths) */
  --control-h:clamp(2.3rem, 2rem + .8vw, 2.6rem);
  --sidebar-w:clamp(200px, 22vw, 250px);     /* docs rail */
  --sidebar-w-sm:clamp(180px, 18vw, 220px);  /* admin rail */
  --embed-h:clamp(420px, 70vh, 760px);
  --embed-h-tall:clamp(520px, 80vh, 900px);
  --pdf-h:clamp(360px, 60vh, 640px);
  --pdf-h-sm:clamp(300px, 46vh, 420px);
  --chart-h:clamp(200px, 34vh, 280px);
  --editor-min:clamp(320px, 50vh, 440px);
  --phone-w:clamp(190px, 44vw, 230px);
  --cd-cell-w:clamp(84px, 22vw, 108px);
  --log-max-h:clamp(180px, 34vh, 260px);
  --wave-name-w:clamp(88px, 22vw, 120px);

  /* Breakpoint ladder (reference only — @media can't read vars; keep values in sync)
     --bp-xs:480px; --bp-sm:600px; --bp-md:768px; --bp-lg:900px; --bp-xl:1160px;
     exception: --bp-nav:820px (nav collapse). */
}

/* ----- Tokens: light override ----- */
:root[data-theme="light"] {
  --primary:#475569; --primary-light:#64748b; --primary-dark:#334155;
  --accent:#3c82f6; --accent-hover:#2563eb; --accent-soft:#dbeafe;
  --on-accent:#ffffff;
  --surface-0:#ffffff; --surface-1:#f8fafc; --surface-2:#ffffff; --surface-3:#f1f5f9;
  --text-strong:#0f172a; --text:#334155; --text-muted:#64748b; --text-subtle:#94a3b8;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --success:#059669; --warning:#d97706; --danger:#dc2626;
  --danger-soft:rgba(220,38,38,.08); --danger-border:rgba(220,38,38,.28);
  --success-soft:rgba(5,150,105,.1); --success-border:rgba(5,150,105,.3);
  --danger-text:#dc2626; --success-text:#047857;
  --signal-clock:#10b981; --signal-input:#3c82f6; --signal-output:#f59e0b; --signal-vector:#8b5cf6;
  --shadow-1:0 1px 2px 0 rgba(15,23,42,.04),0 1px 3px 0 rgba(15,23,42,.06);
  --shadow-2:0 2px 4px -1px rgba(15,23,42,.06),0 8px 24px -6px rgba(15,23,42,.10);
  --shadow-3:0 4px 8px -2px rgba(15,23,42,.08),0 18px 40px -12px rgba(15,23,42,.14);
}

/* ----- Base ----- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans); color:var(--text); line-height:var(--lh-normal);
  font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 600px at 80% -5%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(900px 700px at -10% 10%, rgba(167,139,250,.07), transparent 55%),
    var(--surface-0);
}
:root[data-theme="light"] body{
  background:radial-gradient(900px 500px at 50% -10%, #eef4ff, transparent 60%), var(--slate-50);
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* Sticky footer: fill the viewport so a short page still pins the footer to the bottom. */
.km-app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.km-main{flex:1 0 auto}
.km-footer{flex-shrink:0}
[hidden]{display:none!important}
h1,h2,h3{color:var(--text-strong)}
.km-wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.km-mono{font-family:var(--font-mono)}
[dir="rtl"] .km-mono{direction:ltr;unicode-bidi:embed}

/* ----- Buttons ----- */
.km-btn{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--fs-base);font-weight:600;
  padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:.16s;white-space:nowrap;text-align:center;
  /* Normalize <button> so it doesn't fall back to the native (white) button background/chrome
     in dark mode — variants below set their own background/color. */
  background:transparent;color:inherit;font-family:inherit;line-height:var(--lh-tight);
  -webkit-appearance:none;appearance:none}
.km-btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--fs-md)}
.km-btn-primary{background:var(--accent);color:var(--on-accent)}
.km-btn-primary:hover{background:var(--accent-hover)}
.km-btn-ghost{border-color:var(--border-strong);color:var(--text)}
.km-btn-ghost:hover{background:var(--surface-2);border-color:var(--slate-500)}
.km-btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--fs-sm)}
.km-btn-danger{background:var(--danger);color:#fff;border-color:transparent}
.km-btn-danger:hover{background:var(--danger);filter:brightness(1.08)}
.km-btn-ghost.km-btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.km-btn-ghost.km-btn-danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:var(--danger);filter:none}
.km-btn:disabled,.km-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ----- Nav ----- */
.km-nav{position:sticky;top:env(safe-area-inset-top,0);z-index:100;backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--surface-0) 78%, transparent);border-bottom:1px solid var(--border)}
/* Full-bleed nav bar (app-shell pattern): the bar uses the whole viewport width so the
   guest nav has room; page content still centers at --max. Collapses to the burger
   below --bp-nav (1100px) — see the @media block below. */
.km-nav-in{display:flex;align-items:center;gap:var(--space-lg);height:var(--nav-h);max-width:none;min-width:0}
.km-brand{display:flex;align-items:center;gap:var(--space-sm);font-weight:700;color:var(--text-strong);font-size:var(--fs-xl);letter-spacing:-.01em;flex:none}
.km-brand img{display:block;width:clamp(26px,3vw,30px);height:auto;border-radius:7px}
.km-nav-links{display:flex;gap:clamp(14px,1.6vw,20px);font-size:var(--fs-base);color:var(--text-muted);align-items:center}
.km-nav-links a:hover{color:var(--text-strong)}
.km-nav-links a.active{color:var(--text-strong)}
.km-nav-right{margin-left:auto;display:flex;gap:var(--space-sm);align-items:center}
.km-nav-links a{white-space:nowrap}
/* Authenticated actions must stay a single row (a plain block wraps its inline-flex buttons). */
.km-auth-actions{display:flex;align-items:center;gap:var(--space-sm)}
/* User dropdown (reuses the language-menu list styles) */
.km-usermenu{position:relative}
.km-usermenu>summary{list-style:none;cursor:pointer;white-space:nowrap}
.km-usermenu>summary::-webkit-details-marker{display:none}
.km-langmenu__list form{margin:0}
.km-langmenu__list button{display:block;width:100%;text-align:start;padding:var(--space-xs) var(--space-sm);border-radius:6px;
  font-size:var(--fs-sm);color:var(--text-muted);background:none;border:none;cursor:pointer;font:inherit}
.km-langmenu__list button:hover{background:var(--surface-3);color:var(--text-strong)}
.km-lang{background:transparent;border:1px solid var(--border-strong);color:var(--text-muted);
  border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);font-size:var(--fs-sm);font-family:var(--font-mono);cursor:pointer}
.km-lang:hover{color:var(--text-strong)}
.km-logout{display:inline;margin:0}

/* Mobile menu (JS-free <details>; shown ≤1100px) */
.km-mobilemenu{display:none;position:relative}
.km-burger{list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:38px;padding:9px;border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.km-burger::-webkit-details-marker{display:none}
.km-burger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:.18s}
.km-mobilemenu[open] .km-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.km-mobilemenu[open] .km-burger span:nth-child(2){opacity:0}
.km-mobilemenu[open] .km-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.km-mobilemenu__panel{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:230px;
  max-width:calc(100vw - 32px);background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);padding:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-3xs);z-index:200;box-shadow:var(--shadow-3)}
.km-mobilemenu__panel>a{padding:var(--space-sm);border-radius:var(--radius-sm);font-size:var(--fs-md);color:var(--text)}
.km-mobilemenu__panel>a:hover{background:var(--surface-3);color:var(--text-strong)}
.km-mobilemenu__panel .km-btn{width:100%;justify-content:center;margin-top:var(--space-2xs)}
.km-mobilemenu__panel .km-logout{display:block;width:100%}
.km-mobilemenu__sep{height:1px;background:var(--border);margin:var(--space-xs) var(--space-2xs)}
@media(max-width:1100px){
  .km-nav-links{display:none}
  .km-auth-actions{display:none}
  /* The Demo CTA is repeated inside the burger panel, so drop it from the top bar on
     mobile/tablet to leave room for brand + language + theme + burger. */
  .km-nav-right>.km-btn-primary{display:none}
  .km-mobilemenu{display:block}
}

/* Login as a quiet text link (Register stays the single primary button) */
.km-nav-login{font-size:var(--fs-base);color:var(--text-muted);white-space:nowrap;padding:var(--space-xs) var(--space-2xs)}
.km-nav-login:hover{color:var(--text-strong)}
/* GitHub as an icon-only link in the top bar */
.km-nav-gh{display:inline-flex;align-items:center;font-size:var(--fs-xl);color:var(--text-muted);line-height:1}
.km-nav-gh:hover{color:var(--text-strong)}

/* ----- Hero ----- */
.km-hero{padding:var(--space-5xl) 0 var(--space-3xl)}
.km-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-4xl);align-items:center}
@media(max-width:900px){.km-hero-grid{grid-template-columns:1fr;gap:var(--space-2xl)}}
.km-pill{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--fs-xs);font-weight:600;
  color:var(--accent-hover);background:var(--accent-soft);border:1px solid var(--border-strong);
  padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);font-family:var(--font-mono)}
.km-dot{width:7px;height:7px;border-radius:50%;background:var(--signal-clock);box-shadow:0 0 10px var(--signal-clock)}
.km-h1{font-size:clamp(2.3rem,1.7rem+2.6vw,3.6rem);line-height:1.05;letter-spacing:-.03em;margin:var(--space-lg) 0 0;font-weight:700}
.km-grad{background:linear-gradient(100deg,var(--accent),var(--signal-vector));-webkit-background-clip:text;background-clip:text;color:transparent}
.km-lede{font-size:var(--fs-lg);color:var(--text-muted);max-width:40ch;margin:var(--space-lg) 0 0}
.km-cta-row{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-2xl)}
.km-meta{margin-top:var(--space-lg);font-size:var(--fs-sm);color:var(--text-subtle);font-family:var(--font-mono)}
.km-meta b{color:var(--text);font-weight:600}

/* ----- Editor mock ----- */
.km-editor{border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;
  background:var(--surface-1);box-shadow:var(--shadow-3)}
.km-editor-bar{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:var(--surface-2);border-bottom:1px solid var(--border)}
.km-tl{width:11px;height:11px;border-radius:50%}
.km-tl.r{background:var(--danger)}.km-tl.y{background:var(--warning)}.km-tl.g{background:var(--success)}
.km-editor-tab{margin-left:var(--space-sm);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);
  background:var(--surface-1);padding:var(--space-2xs) var(--space-sm);border-radius:6px;border:1px solid var(--border)}
.km-code{padding:var(--space-md);font-family:var(--font-mono);font-size:var(--fs-xs);line-height:var(--lh-loose);overflow-x:auto}
.km-code .ln{color:var(--slate-700);user-select:none;display:inline-block;width:22px;text-align:right;margin-right:var(--space-md)}
/* Syntax-highlight hex are intentional literals (not theme colors). */
.km-code .k{color:#c4b5fd}.km-code .t{color:#7dd3fc}.km-code .s{color:#86efac}.km-code .c{color:var(--slate-500)}.km-code .n{color:#fbbf24}
.km-wave{border-top:1px solid var(--border);background:var(--surface-2);padding:var(--space-sm) var(--space-md)}
.km-wave-h{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-subtle);margin-bottom:var(--space-xs);text-transform:uppercase;letter-spacing:.08em}
.km-wave svg{display:block;width:100%;height:64px}

/* ----- Stat bar ----- */
.km-stats{border-block:1px solid var(--border);margin-top:var(--space-4xl)}
.km-stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.km-stat{background:var(--surface-0);padding:var(--space-xl) var(--space-lg);text-align:center}
.km-stat b{display:block;font-size:clamp(1.5rem,1.2rem+1vw,2rem);color:var(--text-strong);font-weight:700;letter-spacing:-.02em}
.km-stat span{font-size:var(--fs-xs);color:var(--text-muted)}
@media(max-width:600px){.km-stats-in{grid-template-columns:repeat(2,1fr)}}

/* ----- Sections ----- */
.km-section{padding:var(--space-5xl) 0}
.km-eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.12em}
.km-h2{font-size:clamp(1.7rem,1.3rem+1.6vw,2.5rem);letter-spacing:-.025em;margin:var(--space-sm) 0 0;font-weight:700}
.km-sub{color:var(--text-muted);max-width:56ch;margin:var(--space-md) 0 0}
.km-head-center{text-align:center;max-width:640px;margin-inline:auto}
.km-head-center .km-sub{margin-inline:auto}

/* ----- Cards / grids ----- */
.km-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-top:var(--space-3xl)}
@media(max-width:900px){.km-grid{grid-template-columns:1fr}}
.km-card{background:linear-gradient(180deg,var(--surface-1),var(--surface-0));border:1px solid var(--border);
  border-radius:14px;padding:var(--space-xl);transition:.18s}
.km-card:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow-3)}
.km-ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;margin-bottom:var(--space-md);border:1px solid var(--border-strong)}
.km-card h3{margin:0 0 var(--space-xs);font-size:var(--fs-lg);color:var(--text-strong)}
.km-card p{margin:0;font-size:var(--fs-base);color:var(--text-muted)}

/* ----- Steps ----- */
.km-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);margin-top:var(--space-3xl);counter-reset:s}
@media(max-width:900px){.km-steps{grid-template-columns:1fr}}
.km-step{position:relative;padding-left:56px}
.km-step::before{counter-increment:s;content:"0" counter(s);position:absolute;inset-inline-start:0;top:-4px;
  font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;color:var(--on-accent);background:var(--accent);
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
[dir="rtl"] .km-step{padding-left:0;padding-right:56px}
.km-step h3{margin:0 0 var(--space-xs);font-size:var(--fs-lg);color:var(--text-strong)}
.km-step p{margin:0;font-size:var(--fs-base);color:var(--text-muted)}

/* ----- Platforms ----- */
.km-plats{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-2xl);justify-content:center}
.km-plat{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border:1px solid var(--border);
  border-radius:10px;background:var(--surface-1);font-size:var(--fs-base);font-weight:500}
.km-plat small{color:var(--text-subtle);font-family:var(--font-mono);font-size:var(--fs-2xs)}

/* ----- CTA box ----- */
.km-cta{margin:0 0 var(--space-5xl)}
.km-cta-box{border:1px solid var(--border-strong);border-radius:var(--radius-xl);padding:var(--space-4xl) var(--space-3xl);text-align:center;
  background:radial-gradient(600px 300px at 50% 0%, var(--accent-soft), transparent 65%),var(--surface-1)}
.km-cta-box .km-cta-row{justify-content:center;margin-top:var(--space-xl)}

/* ----- Footer ----- */
.km-footer{border-top:1px solid var(--border);padding:var(--space-3xl) 0;color:var(--text-subtle);font-size:var(--fs-sm)}
.km-foot-in{display:flex;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap;align-items:center}
.km-foot-links{display:flex;gap:var(--space-lg);flex-wrap:wrap}
.km-foot-links a:hover{color:var(--text)}

/* ----- Demo/no-persistence banner ----- */
.km-banner{background:var(--warning);color:var(--on-accent);font-size:var(--fs-xs);font-weight:600;text-align:center;
  padding:var(--space-xs) var(--space-md);font-family:var(--font-mono)}

/* ----- Utilities ----- */
.km-center{text-align:center}
.km-fallback{display:inline-flex;gap:var(--space-xs);align-items:center;font-size:var(--fs-xs);color:var(--warning);
  background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:var(--space-2xs) var(--space-sm);margin:0 0 var(--space-sm)}

/* ----- Page hero (interior pages) ----- */
.km-page-hero{padding:var(--space-5xl) 0 var(--space-xs);max-width:760px}
.km-page-hero .km-eyebrow{display:block}
.km-page-hero h1{font-size:clamp(2rem,1.5rem+2vw,3.1rem);letter-spacing:-.03em;line-height:1.08;margin:var(--space-md) 0 0;font-weight:700}
.km-page-hero .km-lead{font-size:var(--fs-xl);color:var(--text-muted);margin:var(--space-lg) 0 0;max-width:60ch}

/* ----- Prose ----- */
.km-prose{max-width:70ch;color:var(--text);font-size:var(--fs-md)}
.km-prose p{margin:0 0 var(--space-md)}
.km-prose strong{color:var(--text-strong)}

/* ----- Two-column split ----- */
.km-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4xl);align-items:start}
/* Let grid items shrink below their content's min-content (default is auto) so an
   overflow-x:auto child (e.g. a long command block) scrolls instead of blowing the track out. */
.km-split>*{min-width:0}
@media(max-width:900px){.km-split{grid-template-columns:1fr;gap:var(--space-2xl)}}

/* ----- Numbered problem list ----- */
.km-problems{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden}
.km-problem{display:flex;gap:var(--space-md);padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--border)}
.km-problem:last-child{border-bottom:none}
.km-problem .tag{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--danger);font-weight:700;flex:0 0 auto;width:92px;text-transform:uppercase;letter-spacing:.04em}
.km-problem p{margin:0;font-size:var(--fs-base);color:var(--text-muted)}
.km-problem b{color:var(--text-strong)}

/* ----- Solution checklist ----- */
.km-checklist{list-style:none;margin:var(--space-md) 0 0;padding:0}
.km-checklist li{display:flex;gap:var(--space-sm);padding:var(--space-sm) 0;font-size:var(--fs-md);align-items:flex-start;color:var(--text)}
.km-checklist li svg{flex:0 0 auto;margin-top:3px;color:var(--signal-clock)}
.km-checklist b{color:var(--text-strong)}

/* ----- Comparison table ----- */
.km-compare{width:100%;border-collapse:collapse;margin-top:var(--space-3xl);font-size:var(--fs-base);overflow:hidden;
  border:1px solid var(--border-strong);border-radius:var(--radius-md)}
.km-compare-wrap{overflow-x:auto}
.km-compare th,.km-compare td{padding:var(--space-md);text-align:center;border-bottom:1px solid var(--border)}
.km-compare thead th{background:var(--surface-2);color:var(--text-strong);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em}
.km-compare tbody th{text-align:start;color:var(--text);font-weight:600;background:var(--surface-1)}
.km-compare .km-col-kmila{background:var(--accent-soft);color:var(--accent-hover);font-weight:700}
.km-compare .yes{color:var(--signal-clock);font-weight:700}
.km-compare .no{color:var(--text-subtle)}
.km-compare tr:last-child td,.km-compare tr:last-child th{border-bottom:none}

/* ----- Roadmap ----- */
.km-roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-top:var(--space-3xl)}
@media(max-width:900px){.km-roadmap{grid-template-columns:1fr}}
.km-milestone{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-xl);background:var(--surface-1)}
.km-milestone .when{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.km-milestone h3{margin:var(--space-sm) 0 var(--space-xs);font-size:var(--fs-lg);color:var(--text-strong)}
.km-milestone p{margin:0;font-size:var(--fs-base);color:var(--text-muted)}

/* ----- Docs hub ----- */
.km-docs{display:grid;grid-template-columns:var(--sidebar-w) 1fr;gap:var(--space-3xl);align-items:start;padding-block:var(--space-2xl) var(--space-5xl)}
@media(max-width:900px){.km-docs{grid-template-columns:1fr;gap:var(--space-xl)}}
.km-docs-side{position:sticky;top:calc(var(--nav-h) + 16px + env(safe-area-inset-top,0px));
  max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto;padding-inline-end:var(--space-xs)}
@media(max-width:900px){.km-docs-side{position:static;max-height:none;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-md)}}
.km-docs-side nav{display:flex;flex-direction:column;gap:var(--space-lg)}
.km-docs-home{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-subtle);text-transform:uppercase;letter-spacing:.08em}
.km-docs-home:hover{color:var(--text-strong)}
.km-docs-cat__t{font-size:var(--fs-xs);font-weight:700;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-xs)}
.km-docs-cat a{display:block;padding:var(--space-xs) var(--space-sm);border-radius:6px;font-size:var(--fs-base);color:var(--text-muted);border-inline-start:2px solid transparent}
.km-docs-cat a:hover{color:var(--text-strong);background:var(--surface-1)}
.km-docs-cat a.active{color:var(--accent);border-inline-start-color:var(--accent);background:var(--accent-soft);font-weight:600}
.km-docs-body{min-width:0}

.km-docs-group{margin-bottom:var(--space-2xl)}
.km-docs-group__t{font-size:var(--fs-base);color:var(--text-subtle);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono);margin:0 0 var(--space-md);font-weight:600}
.km-docs-cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
@media(max-width:900px){.km-docs-cardgrid{grid-template-columns:1fr}}
.km-doc-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-lg);
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1);transition:.16s}
.km-doc-card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.km-doc-card__t{font-weight:600;color:var(--text-strong);font-size:var(--fs-md)}
.km-doc-card__arrow{color:var(--accent);font-weight:700}

/* ----- Rendered Markdown ----- */
.km-md{color:var(--text);font-size:var(--fs-md);line-height:var(--lh-loose);max-width:76ch}
.km-md>*:first-child{margin-top:0}
.km-md h1{font-size:clamp(1.8rem,1.4rem+1.4vw,2.4rem);letter-spacing:-.02em;margin:0 0 var(--space-xs);line-height:1.15}
.km-md h2{font-size:1.5rem;margin:var(--space-3xl) 0 var(--space-md);padding-bottom:var(--space-xs);border-bottom:1px solid var(--border);line-height:1.25}
.km-md h3{font-size:1.2rem;margin:var(--space-2xl) 0 var(--space-sm)}
.km-md h4{font-size:var(--fs-md);margin:var(--space-xl) 0 var(--space-xs);color:var(--text-strong)}
.km-md p{margin:0 0 var(--space-md)}
.km-md a{color:var(--accent);text-decoration:none}
.km-md a:hover{text-decoration:underline}
.km-md ul,.km-md ol{margin:0 0 var(--space-md);padding-inline-start:var(--space-xl)}
.km-md li{margin:var(--space-xs) 0}
.km-md strong{color:var(--text-strong)}
.km-md hr{border:none;border-top:1px solid var(--border);margin:var(--space-2xl) 0}
.km-md blockquote{margin:0 0 var(--space-md);padding:2px var(--space-lg);border-inline-start:3px solid var(--accent);
  color:var(--text-muted);background:var(--surface-1);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.km-md code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--border);
  padding:1px 6px;border-radius:5px;color:var(--text-strong)}
.km-md pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-md);overflow-x:auto;margin:0 0 var(--space-lg)}
.km-md pre code{background:none;border:none;padding:0;font-size:var(--fs-xs);line-height:var(--lh-loose);color:var(--text)}
.km-md img{max-width:100%;border-radius:var(--radius-sm)}
.km-md table{border-collapse:collapse;width:100%;margin:0 0 var(--space-lg);font-size:var(--fs-base);display:block;overflow-x:auto}
.km-md th,.km-md td{border:1px solid var(--border);padding:var(--space-xs) var(--space-sm);text-align:start}
.km-md th{background:var(--surface-2);color:var(--text-strong);font-weight:600}

/* ----- Docs search ----- */
.km-docs-search{margin:0 0 var(--space-2xs)}
.km-docs-search input[type="search"]{width:100%;background:var(--surface-1);border:1px solid var(--border-strong);
  color:var(--text);border-radius:var(--radius-sm);padding:var(--space-sm);font-size:var(--fs-base);font-family:var(--font-sans)}
.km-docs-search input[type="search"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.km-docs-search--hero{display:flex;gap:var(--space-sm);margin-top:var(--space-xl);max-width:520px}
.km-docs-search--hero input{flex:1}
.km-search-results{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-lg)}
.km-search-hit{display:block;padding:var(--space-md) var(--space-lg);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1);transition:.16s}
.km-search-hit:hover{border-color:var(--border-strong);background:var(--surface-2)}
.km-search-hit__t{display:block;font-weight:600;color:var(--accent);font-size:var(--fs-md)}
.km-search-hit__s{display:block;color:var(--text-muted);font-size:var(--fs-sm);margin-top:var(--space-xs)}

/* ----- Embeds (PDF / iframe) ----- */
.km-pdf{width:100%;height:var(--pdf-h);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-1)}
.km-embed{width:100%;height:var(--embed-h);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:#fff;margin-top:var(--space-xs)}
.km-embed--tall{height:var(--embed-h-tall)}
.km-embed-actions{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;margin:var(--space-lg) 0}
.km-embed-themes{font-size:var(--fs-sm);color:var(--text-muted)}
.km-embed-themes a{color:var(--accent);margin-inline-start:var(--space-sm)}
.km-embed-themes a:hover{text-decoration:underline}

/* ----- Thesis cards ----- */
.km-thesis{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-top:var(--space-xl)}
@media(max-width:900px){.km-thesis{grid-template-columns:1fr}}
.km-thesis-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);background:var(--surface-1)}
.km-thesis-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.km-thesis-card h2{font-size:1.15rem;margin:0 0 var(--space-xs);border:none;padding:0}
.km-thesis-card p{color:var(--text-muted);font-size:var(--fs-base);margin:0 0 var(--space-md)}
.km-thesis-card .km-pdf{height:var(--pdf-h-sm)}
.km-badge{font-family:var(--font-mono);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;
  padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-pill);border:1px solid var(--border-strong);color:var(--text-muted)}
.km-badge--current{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--accent)}

/* ----- Metric grid (about) ----- */
.km-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-top:var(--space-xl)}
@media(max-width:600px){.km-metric-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.km-metric-grid{grid-template-columns:1fr}}
.km-metric{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-xl);background:var(--surface-1)}
.km-metric b{display:block;font-size:clamp(1.6rem,1.3rem+1vw,2.2rem);color:var(--text-strong);font-weight:700;letter-spacing:-.02em}
.km-metric span{font-size:var(--fs-sm);color:var(--text-muted)}
.km-people{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-top:var(--space-xl)}
@media(max-width:600px){.km-people{grid-template-columns:1fr}}
.km-person{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-xl);background:var(--surface-1)}
.km-person b{display:block;font-size:clamp(1.05rem,1rem+.4vw,1.25rem);color:var(--text-strong);font-weight:700;letter-spacing:-.01em}
.km-person span{display:block;margin-top:var(--space-xs);font-size:var(--fs-sm);color:var(--text-muted)}

/* Admin panel */
.km-admin{display:grid;grid-template-columns:var(--sidebar-w-sm) 1fr;gap:var(--space-2xl);padding-block:var(--space-3xl);align-items:start}
@media(max-width:900px){.km-admin{grid-template-columns:1fr}}
.km-admin-side{position:sticky;top:calc(var(--nav-h) + 16px)}
.km-admin-nav{display:flex;flex-direction:column;gap:var(--space-2xs);margin-top:var(--space-sm)}
.km-admin-nav a{padding:var(--space-xs) var(--space-sm);border-radius:8px;color:var(--text-muted);text-decoration:none;font-size:var(--fs-base)}
.km-admin-nav a:hover{background:var(--surface-1);color:var(--text-strong)}
.km-admin-nav a.active{background:var(--surface-1);color:var(--accent);font-weight:600}
.km-admin-body{min-width:0}
.km-admin-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.km-h3{font-size:1.15rem;color:var(--text-strong);margin:0 0 var(--space-sm)}
.km-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);margin-top:var(--space-md)}
.km-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.km-table th,.km-table td{text-align:left;padding:var(--space-sm);border-bottom:1px solid var(--border);white-space:nowrap}
.km-table th{color:var(--text-muted);font-weight:600}
.km-table tr:last-child td{border-bottom:none}
.km-row-actions{display:flex;gap:var(--space-xs)}
.km-admin-form{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-md);align-items:flex-end}
.km-field{display:flex;flex-direction:column;gap:var(--space-xs);font-size:var(--fs-sm);color:var(--text-muted)}
.km-field input,.km-field select{padding:var(--space-xs) var(--space-sm);border:1px solid var(--border);border-radius:8px;background:var(--surface-1);color:var(--text-strong);min-width:160px}
.km-field--btn{justify-content:flex-end}
.km-admin-textarea{width:100%;min-height:var(--editor-min);margin-top:var(--space-md);padding:var(--space-md);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1);color:var(--text-strong);font-family:var(--font-mono,monospace);font-size:var(--fs-xs);line-height:1.5;resize:vertical}
.km-admin-editor{margin-top:var(--space-xs)}

/* ----- Records list ----- */
.km-records{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-xl);max-width:640px}
.km-record{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1);font-size:var(--fs-base);color:var(--text);transition:.16s}
.km-record:hover{border-color:var(--border-strong);background:var(--surface-2)}
.km-record__dl{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);font-weight:600;white-space:nowrap}

/* ----- Updates / Newsletter ----- */
.km-updates-list{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-lg)}
.km-update-card,.km-release-card{display:block;padding:var(--space-lg) var(--space-xl);border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface-1);transition:.16s}
.km-update-card:hover,.km-release-card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.km-update-meta{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.km-update-date{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-subtle)}
.km-tag{font-family:var(--font-mono);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-hover);background:var(--accent-soft);border:1px solid var(--border-strong);
  padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-pill)}
.km-update-title{display:block;font-size:var(--fs-lg);font-weight:700;color:var(--text-strong);margin:var(--space-sm) 0 0;letter-spacing:-.01em}
.km-update-summary{display:block;font-size:var(--fs-base);color:var(--text-muted);margin-top:var(--space-xs)}

/* ----- Demo ----- */
.km-demo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:start}
@media(max-width:900px){.km-demo{grid-template-columns:1fr}}
.km-demo-editor,.km-demo-output{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1);overflow:hidden}
.km-demo-toolbar{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;padding:var(--space-sm);border-bottom:1px solid var(--border);background:var(--surface-2)}
.km-demo-select,.km-demo-dur input{background:var(--surface-1);border:1px solid var(--border-strong);color:var(--text);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);font-size:var(--fs-sm)}
.km-demo-dur{font-size:var(--fs-xs);color:var(--text-muted);display:flex;gap:var(--space-xs);align-items:center}
.km-demo-dur input{width:96px}
.km-demo-toolbar .km-btn:last-child{margin-inline-start:auto}
.km-demo-name{background:var(--surface-1);border:1px solid var(--border-strong);color:var(--text);
  border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);font-size:var(--fs-sm);min-width:130px}
.km-save-banner{padding:var(--space-xs) var(--space-md);background:var(--accent-soft);color:var(--accent-hover);font-size:var(--fs-xs);border-bottom:1px solid var(--border)}
.km-demo-projects{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1)}
.km-demo-projects__t{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600}
.km-proj-chip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);padding:2px var(--space-2xs) 2px var(--space-sm)}
.km-proj-chip.active{border-color:var(--accent);background:var(--accent-soft)}
.km-proj-load{background:none;border:none;color:var(--text);cursor:pointer;font-size:var(--fs-sm);padding:var(--space-2xs) 2px}
.km-proj-chip.active .km-proj-load{color:var(--accent-hover);font-weight:600}
.km-proj-del{background:none;border:none;color:var(--text-subtle);cursor:pointer;font-size:var(--fs-md);line-height:1;padding:0 var(--space-xs);border-radius:50%}
.km-proj-del:hover{color:var(--danger)}
.km-proj-new{padding:var(--space-xs) var(--space-sm);font-size:var(--fs-sm)}
.km-save-msg{font-size:var(--fs-xs);color:var(--text-subtle)}
.km-demo-code{display:block;width:100%;border:none;background:var(--surface-0);color:var(--text);
  font-family:var(--font-mono);font-size:var(--fs-xs);line-height:var(--lh-normal);padding:var(--space-md);resize:vertical;min-height:var(--editor-min);outline:none}
.km-demo-output{padding:var(--space-md);min-height:var(--editor-min)}
.km-demo-stats{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--space-md)}
.km-demo-stats b{color:var(--text-strong)}
.km-wavebox{display:flex;flex-direction:column;gap:3px}
.km-waverow{display:grid;grid-template-columns:var(--wave-name-w) 1fr 66px;gap:var(--space-xs);align-items:center;height:30px}
.km-wavename{font-size:var(--fs-xs);color:var(--text);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;border-inline-start:3px solid var(--accent);padding-inline-start:var(--space-xs)}
.km-wavetrace{width:100%;height:28px;background:var(--surface-0);border-radius:4px}
.km-waveval{font-size:var(--fs-2xs);text-align:end;white-space:nowrap;overflow:hidden}
.km-demo-log{margin-top:var(--space-lg)}
.km-demo-log summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text-muted)}
.km-demo-log pre{background:var(--surface-0);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--space-sm);overflow:auto;font-size:var(--fs-2xs);color:var(--text-muted);max-height:var(--log-max-h)}

/* ----- App launch / download ----- */
.km-spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--border-strong);
  border-top-color:var(--accent);margin:0 auto var(--space-xl);animation:km-spin 1s linear infinite}
@keyframes km-spin{to{transform:rotate(360deg)}}
.km-cmd{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  padding:var(--space-md);overflow-x:auto;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:var(--lh-loose);color:var(--text);margin:var(--space-md) 0}

/* ----- Auth (login / register / password flows) ----- */
.km-auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--space-3xl) var(--space-lg);
  padding-top:calc(var(--space-3xl) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--space-3xl) + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(1000px 600px at 80% -5%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(900px 700px at -10% 10%, rgba(167,139,250,.08), transparent 55%),
    var(--surface-0)}
:root[data-theme="light"] .km-auth{background:radial-gradient(900px 500px at 50% -10%, #eef4ff, transparent 60%), var(--slate-50)}
.km-auth-shell{width:100%;max-width:430px;display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}
.km-auth-brand{display:flex;align-items:center;gap:var(--space-sm);font-weight:700;font-size:var(--fs-2xl);color:var(--text-strong);letter-spacing:-.01em}
.km-auth-brand img{width:34px;height:auto;border-radius:8px;display:block}
.km-auth-card{width:100%;background:var(--surface-1);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);padding:var(--space-2xl) var(--space-xl);box-shadow:var(--shadow-3)}
.km-auth-back{font-size:var(--fs-sm);color:var(--text-muted)}
.km-auth-back:hover{color:var(--text-strong)}

/* headings inside the card */
.km-auth-card h1{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 var(--space-xs);text-align:center;color:var(--text-strong)}
.km-auth-card h2,.km-auth-card h3{font-size:.95rem;font-weight:400;color:var(--text-muted);margin:0 0 var(--space-xl);text-align:center;border:none;padding:0}
.km-auth-card hr{display:none}

/* Bootstrap form controls themed to the palette (covers all auth pages) */
.km-auth-card .form-floating{margin-bottom:var(--space-md)}
.km-auth-card .form-control{background:var(--surface-0);border:1px solid var(--border-strong);color:var(--text);
  border-radius:var(--radius-sm)}
.km-auth-card .form-control::placeholder{color:transparent}
.km-auth-card .form-control:focus{background:var(--surface-0);color:var(--text);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.km-auth-card .form-floating>label{color:var(--text-muted)}
.km-auth-card .form-floating>.form-control:focus~label,
.km-auth-card .form-floating>.form-control:not(:placeholder-shown)~label{color:var(--text-subtle);opacity:1}
.km-auth-card .form-floating>.form-control:focus~label::after,
.km-auth-card .form-floating>.form-control:not(:placeholder-shown)~label::after{background:var(--surface-0)!important}

/* buttons */
.km-auth-card .btn-primary,.km-auth-card button[type="submit"].btn{width:100%;background:var(--accent);border:none;
  color:var(--on-accent);font-weight:600;padding:var(--space-sm);border-radius:var(--radius-sm);font-size:var(--fs-md);margin-top:var(--space-2xs)}
.km-auth-card .btn-primary:hover{background:var(--accent-hover)}

/* checkbox row */
.km-auth-check{display:flex;align-items:center;gap:var(--space-xs);margin:2px 0 var(--space-md);font-size:var(--fs-base);color:var(--text-muted)}
.km-auth-check label{display:flex;align-items:center;gap:var(--space-xs);margin:0;cursor:pointer}
.km-auth-card .form-check-input{width:16px;height:16px;background:var(--surface-0);border:1px solid var(--border-strong)}
.km-auth-card .form-check-input:checked{background:var(--accent);border-color:var(--accent)}

/* links + validation + alerts */
.km-auth-card a{color:var(--accent)}
.km-auth-card a:hover{color:var(--accent-hover)}
.km-auth-card .text-danger{color:var(--danger-text)!important;font-size:var(--fs-sm)}
.km-auth-card .alert{border-radius:var(--radius-sm);font-size:var(--fs-base);padding:var(--space-sm) var(--space-md);border:1px solid var(--border-strong);margin-bottom:var(--space-lg)}
.km-auth-card .alert-danger{background:var(--danger-soft);color:var(--danger-text);border-color:var(--danger-border)}
.km-auth-card .alert-success{background:var(--success-soft);color:var(--success-text);border-color:var(--success-border)}

.km-auth-links{margin-top:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);text-align:center;font-size:var(--fs-base)}
.km-auth-divider{display:flex;align-items:center;gap:var(--space-sm);color:var(--text-subtle);font-size:var(--fs-2xs);margin:var(--space-lg) 0;text-transform:uppercase;letter-spacing:.1em}
.km-auth-divider::before,.km-auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.km-ext-btn{width:100%;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);
  padding:var(--space-sm);border-radius:var(--radius-sm);font-weight:600;cursor:pointer;font-size:var(--fs-base);margin-top:var(--space-xs)}
.km-ext-btn:hover{border-color:var(--slate-500)}

/* Password show/hide "eye" toggle (auth.js adds .km-has-eye + the button). Works on any
   .form-floating password field (auth pages + the account Manage pages). */
.km-has-eye{position:relative}
.km-has-eye>.form-control{padding-right:2.9rem}
.km-eye{position:absolute;top:0;right:0;height:3.5rem;width:2.9rem;display:flex;align-items:center;
  justify-content:center;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:var(--fs-lg);padding:0;z-index:3}
.km-eye:hover{color:var(--text-strong)}
.km-eye:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:var(--radius-sm)}

/* Password strength meter + requirement checklist (auth.js inserts .km-pw after the field). */
.km-pw{margin:-4px 0 var(--space-md)}
.km-pw-meter{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.km-pw-meter>span{display:block;height:100%;width:0;border-radius:999px;transition:width .18s ease,background .18s ease}
.km-pw-meter.lvl0>span{background:var(--danger)}
.km-pw-meter.lvl1>span{background:var(--danger)}
.km-pw-meter.lvl2>span{background:var(--warning)}
.km-pw-meter.lvl3>span{background:var(--accent)}
.km-pw-meter.lvl4>span{background:var(--signal-clock)}
.km-pw-label{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--space-2xs);min-height:15px;font-weight:600}
.km-pw-req{list-style:none;margin:var(--space-xs) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px var(--space-md)}
.km-pw-req li{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--fs-xs);color:var(--text-subtle)}
.km-pw-req li i{font-size:var(--fs-sm);color:var(--text-subtle)}
.km-pw-req li.ok{color:var(--text-muted)}
.km-pw-req li.ok i{color:var(--signal-clock)}
@media(max-width:480px){.km-pw-req{grid-template-columns:1fr}}

/* Neutralize Bootstrap's grid inside auth/account cards so scaffolded forms fill the width
   (otherwise a col-md-4 squeezes the field + button, wrapping the button text). */
.km-auth-card .row{margin:0;--bs-gutter-x:0}
.km-auth-card [class*="col-"]{flex:0 0 100%;max-width:100%;width:100%;padding-inline:0}

/* Account management area (/Account/Manage/*): reuse the admin grid + auth-card control theming. */
.km-account-card{padding:var(--space-2xl) var(--space-xl)}
.km-account-card h1,.km-account-card h2,.km-account-card h3{text-align:start;color:var(--text-strong);
  font-weight:700;margin:0 0 var(--space-md);border:none;padding:0}
.km-account-card h1{font-size:1.4rem}
.km-account-card h2,.km-account-card h3{font-size:1.15rem;font-weight:600}
.km-account-card hr{display:block;border:none;border-top:1px solid var(--border);margin:var(--space-lg) 0}

/* ----- Language menu (native <details>, no JS) ----- */
.km-langmenu{position:relative}
.km-langmenu>summary{list-style:none;cursor:pointer}
.km-langmenu>summary::-webkit-details-marker{display:none}
.km-langmenu__list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:var(--space-xs);display:flex;flex-direction:column;
  gap:2px;min-width:150px;z-index:200;box-shadow:var(--shadow-2)}
.km-langmenu__list a{padding:var(--space-xs) var(--space-sm);border-radius:6px;font-size:var(--fs-sm);color:var(--text-muted)}
.km-langmenu__list a:hover{background:var(--surface-3);color:var(--text-strong)}
.km-langmenu__list a.active{color:var(--accent);font-weight:600}

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

/* ----- Audience ("who it's for") ----- */
.km-grid.km-who{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.km-grid.km-who{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.km-grid.km-who{grid-template-columns:1fr}}

/* ----- Screenshot gallery ----- */
/* Desktop shots (all 2880×1568, uniform aspect) in a tidy 2-up grid. */
.km-shots-desktop{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);margin-top:var(--space-3xl)}
@media(max-width:768px){.km-shots-desktop{grid-template-columns:1fr}}
.km-shot{margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--surface-1);box-shadow:var(--shadow-2);transition:.18s}
.km-shot:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow-3)}
.km-shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--border)}
.km-shot figcaption{padding:var(--space-sm) var(--space-md);font-size:var(--fs-sm);color:var(--text-muted)}
/* Mobile shots (tall portraits) as centered phone cards. */
.km-shots-mobile{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-lg);margin-top:var(--space-lg)}
.km-phone{margin:0;width:var(--phone-w);max-width:60vw;border:1px solid var(--border);border-radius:22px;overflow:hidden;
  background:var(--surface-1);box-shadow:var(--shadow-2);transition:.18s}
.km-phone:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow-3)}
.km-phone img{display:block;width:100%;height:auto}
.km-phone figcaption{padding:var(--space-sm);font-size:var(--fs-xs);color:var(--text-muted);text-align:center;border-top:1px solid var(--border)}

/* ----- FAQ (JS-free accordion) ----- */
.km-faq{max-width:760px;margin:var(--space-2xl) auto 0;display:flex;flex-direction:column;gap:var(--space-sm)}
.km-faq-item{border:1px solid var(--border);border-radius:12px;background:var(--surface-1);overflow:hidden}
.km-faq-item summary{cursor:pointer;padding:var(--space-md) var(--space-lg);font-weight:600;color:var(--text-strong);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}
.km-faq-item summary::-webkit-details-marker{display:none}
.km-faq-item summary::after{content:"+";color:var(--accent);font-size:var(--fs-2xl);font-weight:400;line-height:1}
.km-faq-item[open] summary::after{content:"–"}
.km-faq-item summary:hover{color:var(--accent)}
.km-faq-item p{margin:0;padding:0 var(--space-lg) var(--space-lg);color:var(--text-muted);font-size:var(--fs-base);line-height:var(--lh-normal)}

/* ----- Bootstrap Icons sizing (match the app's icon set) ----- */
.km-ico i.bi{font-size:var(--fs-2xl);line-height:1}
.km-plat i.bi{color:var(--accent);margin-inline-end:var(--space-2xs);font-size:var(--fs-md);vertical-align:-1px}

/* ----- Long-term maintenance commitment band ----- */
.km-commit{margin-top:var(--space-4xl);border:1px solid var(--border-strong);border-left:3px solid var(--accent);
  border-radius:16px;padding:var(--space-2xl);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--surface-1)),var(--surface-1))}
.km-commit-head{max-width:680px}
.km-commit-head .km-sub{margin-top:var(--space-md)}
.km-commit-points{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);margin-top:var(--space-xl)}
@media(max-width:820px){.km-commit-points{grid-template-columns:1fr}}
.km-commit-pt{display:flex;gap:var(--space-md);align-items:flex-start}
.km-commit-pt i.bi{font-size:var(--fs-2xl);color:var(--accent);flex:none;margin-top:1px}
.km-commit-pt b{display:block;color:var(--text-strong);font-size:var(--fs-md);margin-bottom:var(--space-2xs)}
.km-commit-pt span{color:var(--text-muted);font-size:var(--fs-base);line-height:1.5}

/* ----- Highlighted note / callout (privacy summary, etc.) ----- */
.km-note{border:1px solid var(--border-strong);border-left:3px solid var(--accent);border-radius:14px;
  padding:var(--space-lg) var(--space-xl);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--surface-1)),var(--surface-1))}
.km-note b{display:block;color:var(--text-strong);font-size:var(--fs-base);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-xs)}
.km-note p{margin:0;color:var(--text);font-size:var(--fs-md);line-height:1.65}

/* ----- Launch countdown ----- */
.km-countdown-band{margin-top:var(--space-3xl)}
.km-countdown{border:1px solid var(--border-strong);border-radius:20px;padding:var(--space-3xl) var(--space-2xl);text-align:center;
  background:
    radial-gradient(620px 220px at 50% -30%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%),
    var(--surface-1)}
.km-countdown .km-h2{margin-top:var(--space-sm)}
.km-countdown-grid{display:flex;justify-content:center;gap:var(--space-md);margin:var(--space-2xl) 0 var(--space-xs);flex-wrap:wrap}
.km-cd-cell{min-width:var(--cd-cell-w);background:var(--surface-0);border:1px solid var(--border);border-radius:16px;padding:var(--space-lg) var(--space-md)}
.km-cd-cell b{display:block;font-family:var(--font-mono);font-weight:700;line-height:1;color:var(--accent);
  font-size:clamp(2.1rem,1.4rem+2.6vw,3.4rem);font-variant-numeric:tabular-nums}
.km-cd-cell span{display:block;margin-top:var(--space-sm);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}
.km-countdown-done{font-size:clamp(1.2rem,1rem+1vw,1.6rem);font-weight:700;color:var(--accent);margin:var(--space-xl) 0 var(--space-xs)}
.km-countdown-note{color:var(--text-muted);font-size:var(--fs-base);max-width:660px;margin:var(--space-md) auto 0;line-height:var(--lh-normal)}

/* ----- Locked academic docs ----- */
.km-locked-pill{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-sm)}
.km-locked-pill i.bi{font-size:var(--fs-sm)}
.km-record--locked{opacity:.8;cursor:default}
.km-record--locked .km-record__dl{color:var(--text-muted);display:inline-flex;align-items:center;gap:var(--space-2xs)}

/* ----- App store badges (Download) ----- */
.km-stores{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}
.km-store{display:inline-flex;align-items:center;gap:var(--space-sm);border:1px solid var(--border-strong);border-radius:12px;
  padding:var(--space-sm) var(--space-lg);background:var(--surface-1);color:var(--text);min-width:196px;transition:.16s}
.km-store i.bi{font-size:clamp(24px,3vw,28px);color:var(--text-strong);flex:none}
.km-store small{display:block;font-size:var(--fs-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.km-store b{display:block;font-size:var(--fs-lg);color:var(--text-strong);line-height:1.15;margin-top:1px}
.km-store--soon{opacity:.85;cursor:default}
a.km-store:hover{border-color:var(--slate-500);transform:translateY(-2px)}

/* ---- Public forms: satisfaction + bug report ---- */
.km-formpage{max-width:720px}
.km-formcard{display:flex;flex-direction:column;gap:var(--space-xl);padding:var(--space-xl)}
.km-formcard .km-field{gap:var(--space-xs)}
.km-q-label{font-size:var(--fs-base);font-weight:600;color:var(--text-strong)}
.km-input{width:100%;padding:var(--space-sm);border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-1);color:var(--text-strong);font:inherit;font-size:var(--fs-base)}
.km-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.km-textarea{resize:vertical;line-height:1.55}
.km-split-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.km-scale{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.km-scale-opt{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-1);cursor:pointer;color:var(--text);font-size:var(--fs-base)}
.km-scale-opt:hover{border-color:var(--border-strong)}
.km-scale-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--text-strong)}
.km-choices{display:flex;flex-direction:column;gap:var(--space-xs)}
.km-choice{display:inline-flex;align-items:center;gap:var(--space-xs);cursor:pointer;color:var(--text);font-size:var(--fs-base)}
.km-choice:has(input:checked){color:var(--text-strong)}
.km-valid{color:var(--danger);font-size:var(--fs-xs)}
/* Honeypot: kept in the DOM for bots, hidden from people and assistive tech */
.km-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:480px){.km-split-fields{grid-template-columns:1fr}}

/* ---- Admin: feedback + bug dashboards ---- */
.km-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--space-lg);margin-top:var(--space-xl)}
.km-chart-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg)}
.km-chart-card .km-h4{margin:0 0 var(--space-sm);font-size:var(--fs-base);color:var(--text-strong);font-weight:600}
.km-chart-box{position:relative;height:var(--chart-h)}
.km-row-muted{opacity:.55}
.km-row-actions{display:flex;gap:var(--space-xs);flex-wrap:wrap;justify-content:flex-end}
.km-h4{font-size:var(--fs-base);font-weight:600;color:var(--text-strong)}
.km-badge{display:inline-block;padding:2px var(--space-sm);border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:600;border:1px solid var(--border-strong)}
.km-badge-new{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.km-badge-triaged{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 45%,transparent)}
.km-badge-resolved{color:var(--success);border-color:color-mix(in srgb,var(--success) 45%,transparent)}
.km-badge-wontfix{color:var(--text-subtle)}
.km-admin-filters{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:flex-end;margin:var(--space-lg) 0}

/* Nav "Feedback ▾" dropdown (reuses .km-langmenu__list styling, anchored to start) */
.km-navmenu{position:relative}
.km-navmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2xs)}
.km-navmenu>summary::-webkit-details-marker{display:none}
.km-navmenu>summary:hover{color:var(--text-strong)}
.km-navmenu__list{inset-inline-start:0;inset-inline-end:auto}
.km-caret{font-size:var(--fs-2xs);opacity:.7}

/* ============================================================================
   Error UI (Blazor) — moved here from the deleted default MainLayout template.
   Lives in the live shell (App.razor). Tokenized.
   ============================================================================ */
#blazor-error-ui{
  color-scheme:light only;background:var(--warning);color:var(--on-accent);
  bottom:0;left:0;position:fixed;width:100%;z-index:1000;
  box-shadow:0 -1px 2px rgba(0,0,0,.2);box-sizing:border-box;display:none;
  padding:var(--space-sm) var(--space-lg)}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;inset-inline-end:var(--space-sm);top:var(--space-xs)}
#blazor-error-ui a{color:var(--on-accent);text-decoration:underline;margin-inline-start:var(--space-xs)}

/* ============================================================================
   Token-driven utilities — replace one-off inline style="" in .razor markup.
   Spacing utilities map to the fluid --space-* scale (nothing hardcoded).
   ============================================================================ */
/* margin-top */
.km-mt-0{margin-top:0}
.km-mt-xs{margin-top:var(--space-xs)}
.km-mt-sm{margin-top:var(--space-sm)}
.km-mt-md{margin-top:var(--space-md)}
.km-mt-lg{margin-top:var(--space-lg)}
.km-mt-xl{margin-top:var(--space-xl)}
.km-mt-2xl{margin-top:var(--space-2xl)}
.km-mt-3xl{margin-top:var(--space-3xl)}
/* padding-top */
.km-pt-0{padding-top:0}
.km-pt-xl{padding-top:var(--space-xl)}
.km-pt-2xl{padding-top:var(--space-2xl)}
.km-pt-3xl{padding-top:var(--space-3xl)}
/* margin-bottom */
.km-mb-md{margin-bottom:var(--space-md)}
/* padding-bottom */
.km-pb-4xl{padding-bottom:var(--space-4xl)}
/* misc layout utilities */
.km-mx-auto{margin-inline:auto}
.km-w-full{width:100%}
.km-text-start{text-align:start}
.km-maxw-sm{max-width:540px}
.km-maxw-md{max-width:720px}
.km-maxw-lg{max-width:820px}
/* signal/accent text colors (replace inline color:var(--signal-*)) */
.km-c-accent{color:var(--accent)}
.km-c-clock{color:var(--signal-clock)}
.km-c-input{color:var(--signal-input)}
.km-c-output{color:var(--signal-output)}
.km-c-vector{color:var(--signal-vector)}
.km-c-muted{color:var(--text-muted)}
.km-justify-center{justify-content:center}
.km-justify-start{justify-content:flex-start}
.km-inline-block{display:inline-block}
.km-fs-md{font-size:var(--fs-md)}
.km-fs-2xl{font-size:var(--fs-2xl)}
/* one-off composite blocks lifted out of inline styles */
.km-pre-wrap{white-space:pre-wrap;margin:var(--space-sm) 0}
.km-centered-list{list-style:none;padding:0;margin:var(--space-xl) auto 0;max-width:540px;display:grid;gap:var(--space-sm);text-align:center;color:var(--text-muted)}
.km-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.km-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.km-grid-4{grid-template-columns:1fr}}
.km-h1-post{font-size:clamp(1.9rem,1.4rem+1.8vw,2.8rem)}

/* Footer brand (smaller than the nav brand) */
.km-foot-brand{font-size:var(--fs-md)}
.km-foot-brand img{width:clamp(20px,3vw,24px)}

/* Admin form internals (lifted out of inline styles in FeedbackQuestions etc.) */
.km-admin-form--col{flex-direction:column;align-items:stretch}
.km-form-row{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.km-field--inline{flex-direction:row;align-items:center;gap:var(--space-xs)}
.km-opt-row{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-3xs);align-items:center}
.km-opt-row>input:not(.km-field-num){min-width:0;flex:1 1 140px}
.km-check-inline{display:inline-flex;gap:var(--space-2xs);align-items:center;font-size:var(--fs-xs)}
.km-field-num{width:clamp(72px,16vw,96px);min-width:0}
.km-textarea-sm{min-height:clamp(96px,16vh,140px)}
/* Inline edit row: cancel the table's white-space:nowrap so the editor can stack (no sideways scroll) */
.km-edit-row>td{white-space:normal;background:var(--surface-1)}
/* Phone: admin editor fields stack full-width instead of holding min-width:160px */
@media(max-width:480px){
  .km-admin-form .km-field{flex:1 1 100%}
  .km-admin-form .km-field input,.km-admin-form .km-field select{min-width:0;width:100%}
}

/* ============================================================================
   Learning (custom courses) + footer social + admin file list
   ============================================================================ */
.km-course-card{display:flex;flex-direction:column;gap:var(--space-xs);text-decoration:none;transition:.16s}
.km-course-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.km-course-card h3{margin:0}
.km-course-card .km-badge{align-self:flex-start;margin-top:var(--space-xs)}

.km-progress{position:relative;height:clamp(22px,4vw,26px);background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius-pill);margin-top:var(--space-lg);overflow:hidden}
.km-progress__bar{position:absolute;inset-block:0;inset-inline-start:0;background:var(--accent);transition:width .2s}
.km-progress__label{position:relative;display:block;text-align:center;font-size:var(--fs-xs);
  line-height:clamp(22px,4vw,26px);color:var(--text-strong)}

.km-lessons{display:flex;flex-direction:column;gap:var(--space-lg)}
.km-lesson{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1);padding:var(--space-lg)}
.km-lesson--done{border-color:var(--accent)}
.km-lesson__head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.km-lesson__head .km-h3{margin:0}
.km-lesson__links,.km-lesson__files{list-style:none;margin:var(--space-md) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-2xs)}
.km-lesson__links a,.km-lesson__files a{display:inline-flex;align-items:center;gap:var(--space-xs);
  color:var(--accent);text-decoration:none;word-break:break-word}
.km-lesson__links a:hover,.km-lesson__files a:hover{text-decoration:underline}
.km-lesson__files small{color:var(--text-muted)}

.km-foot-social{display:flex;gap:var(--space-md);flex-wrap:wrap;font-size:var(--fs-xl)}
.km-foot-social a{color:var(--text-muted);transition:.16s;line-height:1}
.km-foot-social a:hover{color:var(--accent)}

.km-file-list{list-style:none;margin:var(--space-xs) 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2xs)}
.km-file-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap}