/* ── Fonts (self-hosted; same families as Devya's Moving apps) ─────────────
   IBM Plex Sans (Latin) and IBM Plex Sans Arabic for text, IBM Plex Mono for
   codes, Reem Kufi for display headings and page titles. */
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/fonts/plex-arabic-400-ar.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/fonts/plex-arabic-500-ar.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/fonts/plex-arabic-600-ar.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/fonts/plex-arabic-700-ar.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-500-latin-ext.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-600-latin-ext.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-700-latin-ext.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Hebrew";src:url(/fonts/plex-hebrew-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Hebrew";src:url(/fonts/plex-hebrew-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Reem Kufi";src:url(/fonts/reem-kufi-arabic.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Reem Kufi";src:url(/fonts/reem-kufi-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Reem Kufi";src:url(/fonts/reem-kufi-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Tokens (Devya: ink, paper, silver) ──────────────────────────────────
   Light is the default; dark comes from the system (prefers-color-scheme)
   unless the visitor chose a theme (html[data-theme], public/prefs.js).
   A room's brand (room.json → --b-*-l / --b-*-d on <html>) replaces the
   primary, accent and hero colours; without one the look is Devya's. */
:root{
  color-scheme:light;
  --ink:#0A0A0A;--ink-2:#24272D;--ink-3:#3B3F47;--muted:#59616C;--faint:#666E79;
  --line:#E6E8EC;--line-2:#D6DCE4;--paper:#EEF0EE;--card:#FFFFFF;--tint:#F1F2F4;--th:#F3F4F6;
  --field:#FCFCFB;--field-focus:#FFFFFF;--hover:rgba(10,10,10,.035);--tips:#FBFBF9;
  --glass:rgba(246,246,243,.82);--glass-2:rgba(246,246,243,.92);
  --silver:#D6DCE4;--silver-dim:#666E79;
  --ok:#1E7A4C;--ok-bg:#E8F4EE;--warn:#9A5B00;--warn-bg:#FBF1E2;--bad:#B42318;--bad-bg:#FBEAE8;--info:#2457A6;--info-bg:#E9F0FB;--on-tone:#FFFFFF;
  --primary:var(--b-primary-l,#0A0A0A);--on-primary:var(--b-on-primary-l,#FFFFFF);--primary-hover:var(--b-primary-hover-l,#1C1E22);
  --accent:var(--b-accent-l,#7E8794);--accent-ink:var(--b-accent-ink-l,#666E79);
  --hero:var(--b-hero-l,#0A0A0A);--toast:#0A0A0A;
  --logo:var(--logo-l);
  /* The password page */
  --g-bg:#EEF0EE;--g-ink:#0A0A0A;--g-sub:#565E69;--g-faint:#5F6772;--g-err:#B42318;--g-ok:#1E7A4C;
  --g-card:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.82));--g-border:rgba(10,10,10,.08);
  --g-field:rgba(10,10,10,.03);--g-field-line:rgba(10,10,10,.14);--g-field-focus:rgba(10,10,10,.05);
  --g-orb-1:color-mix(in srgb,var(--accent) 45%,transparent);--g-orb-2:color-mix(in srgb,var(--primary) 18%,transparent);--g-orb-3:color-mix(in srgb,var(--accent) 30%,transparent);--g-grain:rgba(10,10,10,.035);
  --shadow-1:0 1px 2px rgba(10,10,10,.05),0 1px 1px rgba(10,10,10,.03);
  --shadow-2:0 8px 24px -12px rgba(10,10,10,.18),0 2px 6px -2px rgba(10,10,10,.06);
  --shadow-3:0 24px 60px -24px rgba(10,10,10,.35);
  --r-sm:8px;--r:14px;--r-lg:20px;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --font-ar:"IBM Plex Sans Arabic","IBM Plex Sans","IBM Plex Sans Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-en:"IBM Plex Sans","IBM Plex Sans Arabic","IBM Plex Sans Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font:var(--font-ar);
  --font-display:"Reem Kufi",var(--font);
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --top:64px;
}
:root:lang(en){--font:var(--font-en)}
/* Dark: the same tokens twice — for "follow the system" and for a choice. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --ink:#ECEEF1;--ink-2:#D5D9DF;--ink-3:#B9C0C9;--muted:#A1A9B4;--faint:#8D95A1;
  --line:#232837;--line-2:#323949;--paper:#0A0C11;--card:#11141B;--tint:#181C25;--th:#151922;
  --field:#0D1016;--field-focus:#11141B;--hover:rgba(255,255,255,.045);--tips:#141821;
  --glass:rgba(10,12,17,.72);--glass-2:rgba(10,12,17,.9);
  --silver:#3A3E45;--silver-dim:#959DA9;
  --ok:#4FC38C;--ok-bg:#10261B;--warn:#E7A64C;--warn-bg:#2A1F10;--bad:#F27A6F;--bad-bg:#2D1614;--info:#86ACF1;--info-bg:#131F37;--on-tone:#0B0C0E;
  --primary:var(--b-primary-d,#ECEEF1);--on-primary:var(--b-on-primary-d,#0A0A0A);--primary-hover:var(--b-primary-hover-d,#FFFFFF);
  --accent:var(--b-accent-d,#8E96A2);--accent-ink:var(--b-accent-ink-d,#A1A9B4);
  --hero:var(--b-hero-d,#141821);--toast:#1E2330;
  --logo:var(--logo-d,var(--logo-l));
  --g-bg:#050505;--g-ink:#F2F3F5;--g-sub:#A9B0BA;--g-faint:#8A929D;--g-err:#FF9C91;--g-ok:#9FE0BC;
  --g-card:linear-gradient(180deg,rgba(24,26,30,.86),rgba(12,13,15,.9));--g-border:rgba(214,220,228,.12);
  --g-field:rgba(255,255,255,.04);--g-field-line:rgba(214,220,228,.18);--g-field-focus:rgba(255,255,255,.07);
  --g-orb-1:color-mix(in srgb,var(--b-accent-d,#4A5361) 70%,transparent);--g-orb-2:color-mix(in srgb,var(--b-hero-d,#2A2F38) 90%,transparent);--g-orb-3:#8B95A3;--g-grain:rgba(255,255,255,.035);
  --shadow-1:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.45);
  --shadow-2:inset 0 1px 0 rgba(255,255,255,.04),0 10px 28px -14px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-3:0 24px 60px -24px rgba(0,0,0,.8);
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --ink:#ECEEF1;--ink-2:#D5D9DF;--ink-3:#B9C0C9;--muted:#A1A9B4;--faint:#8D95A1;
  --line:#232837;--line-2:#323949;--paper:#0A0C11;--card:#11141B;--tint:#181C25;--th:#151922;
  --field:#0D1016;--field-focus:#11141B;--hover:rgba(255,255,255,.045);--tips:#141821;
  --glass:rgba(10,12,17,.72);--glass-2:rgba(10,12,17,.9);
  --silver:#3A3E45;--silver-dim:#959DA9;
  --ok:#4FC38C;--ok-bg:#10261B;--warn:#E7A64C;--warn-bg:#2A1F10;--bad:#F27A6F;--bad-bg:#2D1614;--info:#86ACF1;--info-bg:#131F37;--on-tone:#0B0C0E;
  --primary:var(--b-primary-d,#ECEEF1);--on-primary:var(--b-on-primary-d,#0A0A0A);--primary-hover:var(--b-primary-hover-d,#FFFFFF);
  --accent:var(--b-accent-d,#8E96A2);--accent-ink:var(--b-accent-ink-d,#A1A9B4);
  --hero:var(--b-hero-d,#141821);--toast:#1E2330;
  --logo:var(--logo-d,var(--logo-l));
  --g-bg:#050505;--g-ink:#F2F3F5;--g-sub:#A9B0BA;--g-faint:#8A929D;--g-err:#FF9C91;--g-ok:#9FE0BC;
  --g-card:linear-gradient(180deg,rgba(24,26,30,.86),rgba(12,13,15,.9));--g-border:rgba(214,220,228,.12);
  --g-field:rgba(255,255,255,.04);--g-field-line:rgba(214,220,228,.18);--g-field-focus:rgba(255,255,255,.07);
  --g-orb-1:color-mix(in srgb,var(--b-accent-d,#4A5361) 70%,transparent);--g-orb-2:color-mix(in srgb,var(--b-hero-d,#2A2F38) 90%,transparent);--g-orb-3:#8B95A3;--g-grain:rgba(255,255,255,.035);
  --shadow-1:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.45);
  --shadow-2:inset 0 1px 0 rgba(255,255,255,.04),0 10px 28px -14px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-3:0 24px 60px -24px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 24px);-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;overflow-x:clip;font-family:var(--font);font-size:15.5px;line-height:1.8;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root:lang(en) body{line-height:1.7}
[lang=he],bdi[lang=he]{font-family:"IBM Plex Sans Hebrew","IBM Plex Sans Arabic",sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--primary);color:var(--on-primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
.i18n-wait .gate-card,.i18n-wait #own{visibility:hidden}
code,.code{font-family:var(--font-mono)}
/* Reem Kufi's space is narrow: open it up a little in display headings. */
.gate h1,.hero h1,.sec-head h2,.modal-card h3,.blocked-card h1,.own-top h1,.own-login h1{word-spacing:.14em}
td.code{direction:ltr;text-align:left;white-space:nowrap;font-size:12.5px}

/* Wordmark painted from the brand SVG */
.wordmark{display:inline-block;width:104px;height:13px;background:currentColor;-webkit-mask:url(/devya-wordmark.svg) no-repeat center/contain;mask:url(/devya-wordmark.svg) no-repeat center/contain}
/* The room's logo (room.json brand.logo, and brand.logoDark on dark
   surfaces), else Devya's wordmark. Height-driven: --logo-h. */
.logo{--logo-h:13px;display:inline-block;flex:none;width:calc(var(--logo-h) * 8);height:var(--logo-h);background:currentColor;-webkit-mask:url(/devya-wordmark.svg) no-repeat center/contain;mask:url(/devya-wordmark.svg) no-repeat center/contain}
:root[data-brand=logo] .logo{width:calc(var(--logo-h) * var(--logo-ratio,8));-webkit-mask:none;mask:none;background:var(--logo) no-repeat center/contain}
:root[data-brand=logo] .logo.on-dark{background-image:var(--logo-d,var(--logo-l))}

/* ── Language and theme toggles ───────────────────────────────────────── */
.prefs{display:inline-flex;align-items:center;gap:6px;flex:none}
.pref-btn{display:inline-grid;place-items:center;height:36px;min-width:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-3);font-size:13px;font-weight:600;line-height:1;transition:border-color .2s,color .2s,background .2s}
.pref-btn:hover{border-color:var(--silver-dim);color:var(--ink)}
.pref-btn.pref-theme{padding:0;width:36px}
.pref-btn .short{display:none}
.pref-btn[lang=ar]{font-family:var(--font-ar)}
.pref-btn[lang=en]{font-family:var(--font-en)}
.gate-prefs{position:absolute;top:16px;inset-inline-end:16px;z-index:2}
.gate-prefs .pref-btn{background:var(--g-field);border-color:var(--g-field-line);color:var(--g-ink)}
.gate-prefs .pref-btn:hover{background:var(--g-field-focus)}

/* ── Gate ──────────────────────────────────────────────────────────────── */
body.is-locked{overflow:hidden;background:var(--g-bg)}
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px 16px;color:var(--g-ink);background:var(--g-bg);z-index:50;transition:opacity .7s var(--ease),visibility .7s}
.gate.out{opacity:0;visibility:hidden}
.gate.out .gate-card{transform:translateY(-12px) scale(.98)}
.gate-bg{position:absolute;inset:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.o1{width:520px;height:520px;background:radial-gradient(circle,var(--g-orb-1),transparent 70%);top:-180px;right:-120px;animation:float1 22s ease-in-out infinite}
.o2{width:460px;height:460px;background:radial-gradient(circle,var(--g-orb-2),transparent 70%);bottom:-200px;left:-140px;animation:float2 26s ease-in-out infinite}
.o3{width:300px;height:300px;background:radial-gradient(circle,var(--g-orb-3),transparent 70%);top:40%;left:55%;opacity:.18;animation:float3 30s ease-in-out infinite}
.grain{position:absolute;inset:-50%;background-image:radial-gradient(var(--g-grain) 1px,transparent 1px);background-size:3px 3px;opacity:.6}
@keyframes float1{50%{transform:translate(-60px,50px) scale(1.08)}}
@keyframes float2{50%{transform:translate(70px,-40px) scale(1.1)}}
@keyframes float3{50%{transform:translate(-90px,-60px)}}
.gate-card{position:relative;width:min(420px,100%);padding:36px 32px 26px;border-radius:24px;background:var(--g-card);border:1px solid var(--g-border);box-shadow:0 40px 80px -30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);text-align:center;animation:rise .9s var(--ease) both;transition:transform .7s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}}
.gate-logo{--logo-h:12px;color:var(--g-ink);opacity:.9}
:root[data-brand=logo] .gate-logo{--logo-h:30px;opacity:1}
.lock{display:grid;place-items:center;width:84px;height:84px;margin:22px auto 10px;border-radius:50%;color:var(--g-ink);background:radial-gradient(circle at 30% 25%,var(--g-field-focus),var(--g-field));border:1px solid var(--g-field-line);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 10px var(--g-field)}}
.lock .shackle{transform-origin:33px 21px;transition:transform .6s var(--spring)}
.gate.unlocked .lock .shackle{transform:translateY(-4px) rotate(28deg)}
.gate.unlocked .lock{color:var(--g-ok);border-color:color-mix(in srgb,var(--g-ok) 50%,transparent)}
.gate h1{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.5;margin:6px 0 6px;letter-spacing:0}
.gate-sub{margin:0 auto 22px;max-width:320px;font-size:14px;line-height:1.85;color:var(--g-sub)}
.gate-field{position:relative;display:block}
.gate-field input{width:100%;height:52px;padding:0 48px;border-radius:14px;border:1px solid var(--g-field-line);background:var(--g-field);color:var(--g-ink);font-size:16px;letter-spacing:.02em;transition:border-color .25s,background .25s,box-shadow .25s;text-align:center}
.gate-field input::placeholder{color:var(--g-faint);letter-spacing:0}
.gate-field input:focus{outline:none;border-color:color-mix(in srgb,var(--g-ink) 45%,transparent);background:var(--g-field-focus);box-shadow:0 0 0 4px var(--g-field)}
.eye{position:absolute;top:50%;inset-inline-end:8px;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--g-faint);display:grid;place-items:center;transition:color .2s,background .2s}
.eye:hover{color:var(--g-ink);background:var(--g-field-focus)}
.eye .slash{transition:stroke-dashoffset .3s var(--ease);stroke-dasharray:23;stroke-dashoffset:0}
.eye[aria-pressed=true] .slash{stroke-dashoffset:23}
.gate-check{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 18px;font-size:13.5px;color:var(--g-sub);cursor:pointer;user-select:none}
.gate-check input{position:absolute;opacity:0;pointer-events:none}
.gate-check .box{width:18px;height:18px;border-radius:5px;border:1.5px solid color-mix(in srgb,var(--g-ink) 35%,transparent);display:grid;place-items:center;transition:all .2s var(--ease)}
.gate-check .box::after{content:"";width:9px;height:5px;border:2px solid var(--on-primary);border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .25s var(--spring)}
.gate-check input:checked+.box{background:var(--primary);border-color:var(--primary)}
.gate-check input:checked+.box::after{transform:rotate(-45deg) scale(1)}
.gate-check input:focus-visible+.box{outline:2px solid var(--g-ink);outline-offset:2px}
.gate-btn{position:relative;width:100%;height:52px;border:0;border-radius:14px;background:var(--primary);color:var(--on-primary);font-weight:600;font-size:15.5px;overflow:hidden;transition:transform .2s var(--ease),box-shadow .3s,background .3s}
.gate-btn:hover{background:var(--primary-hover);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--primary) 55%,transparent)}
.gate-btn:active{transform:scale(.985)}
.gate-btn .spin{position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--on-primary) 25%,transparent);border-top-color:var(--on-primary);opacity:0;animation:spin .8s linear infinite;transition:opacity .2s}
.gate-btn.busy .label{opacity:0}
.gate-btn.busy .spin{opacity:1}
.gate-btn.busy{opacity:.85}
.gate-btn .label{transition:opacity .2s}
@keyframes spin{to{transform:rotate(360deg)}}
.gate-err{min-height:22px;margin:12px 0 0;font-size:13.5px;color:var(--g-err)}
.gate-card.shake{animation:shake .5s var(--ease)}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.gate-card.shake .gate-field input{border-color:color-mix(in srgb,var(--g-err) 70%,transparent)}
.gate-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;font-size:12px;color:var(--g-faint);line-height:1.6}
.gate-foot svg{flex:none}
.gate-noscript{position:absolute;bottom:24px;color:var(--g-sub)}

/* ── App shell ─────────────────────────────────────────────────────────── */
.app{min-height:100vh}
.app.enter .topbar{animation:slideDown .8s var(--ease) both}
.app.enter .side{animation:fadeIn .9s .15s var(--ease) both}
.app.enter .hero{animation:rise 1s .2s var(--ease) both}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px)}}
@keyframes fadeIn{from{opacity:0}}
.scrollbar{position:fixed;top:0;right:0;left:0;height:2px;z-index:40;transform-origin:right;transform:scaleX(var(--p,0));background:linear-gradient(270deg,var(--primary),var(--accent))}
[dir=ltr] .scrollbar{transform-origin:left;background:linear-gradient(90deg,var(--primary),var(--accent))}
.topbar{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar .brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.topbar .logo{--logo-h:11px;color:var(--ink)}
:root[data-brand=logo] .topbar .logo{--logo-h:24px}
.topbar .sep{width:1px;height:22px;background:var(--line-2)}
.topbar .doc{min-width:0;font-size:14px;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .grow{flex:1}
.sync{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--muted);white-space:nowrap;transition:all .3s var(--ease)}
.sync .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(30,122,76,.4)}
.sync.saving .dot{background:var(--warn);animation:pulse 1s ease-in-out infinite}
.sync.offline .dot{background:var(--faint)}
.sync.error .dot{background:var(--bad)}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(154,91,0,0)}0%{box-shadow:0 0 0 0 rgba(154,91,0,.35)}}
.ring{position:relative;width:40px;height:40px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .track{stroke:var(--line)}
.ring .bar{stroke:var(--primary);stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.ring.done .bar{stroke:var(--ok)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease),box-shadow .25s,background .2s,border-color .2s}
.btn:hover{border-color:var(--silver-dim);box-shadow:var(--shadow-2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 60%,transparent)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--tint);box-shadow:none}
.btn.icon{width:40px;padding:0}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;animation:spin .8s linear infinite;display:none}
.btn.busy .spin{display:inline-block}
.btn.busy .ic{display:none}
.btn.lg{height:52px;padding:0 26px;font-size:15.5px;border-radius:14px}

.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;max-width:1240px;margin:0 auto;padding:28px 24px 120px}
.side{position:sticky;top:calc(var(--top) + 20px);align-self:start;max-height:calc(100vh - var(--top) - 40px);overflow:auto;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.nav{list-style:none;margin:0;padding:0;position:relative}
.nav a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:14px;color:var(--muted);transition:color .25s,background .25s}
.nav a:hover{color:var(--ink);background:var(--hover)}
.nav a.active{color:var(--ink);font-weight:600}
.nav .ix{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;background:var(--tint);font-size:11.5px;font-weight:600;color:var(--ink-3);transition:background .3s,color .3s}
.nav a.active .ix{background:var(--primary);color:var(--on-primary)}
.nav a.complete .ix{background:var(--ok);color:var(--on-tone)}
.nav .ct{margin-inline-start:auto;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.nav-ind{position:absolute;inset-inline-start:0;width:3px;border-radius:3px;background:var(--primary);transition:transform .45s var(--ease),height .45s var(--ease)}
.who{margin-top:18px;padding:14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--muted)}
.who b{display:block;color:var(--ink);font-size:14px;margin-top:2px}
.who button{display:block;margin-top:8px;border:0;background:none;padding:0;color:var(--ink-3);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.side-actions{display:flex;gap:8px;margin-top:12px}

main{min-width:0}
.layout>*{min-width:0}
/* ── Sections ──────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:44px 40px 36px;border-radius:var(--r-lg);color:#F2F3F5;background:var(--hero);border:1px solid rgba(214,220,228,.08);box-shadow:var(--shadow-3);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% -10%,rgba(214,220,228,.22),transparent 60%),radial-gradient(500px 300px at 0% 110%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 60%);z-index:-1}
.hero .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#C9CFD7;border:1px solid rgba(214,220,228,.2);padding:4px 12px;border-radius:99px}
.hero h1{font-family:var(--font-display);font-size:clamp(26px,3.4vw,38px);line-height:1.45;margin:18px 0 10px;font-weight:700}
.hero p{max-width:680px;color:#B8BFC9;margin:0 0 22px;font-size:15.5px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:#9AA3AE}
.hero .meta span{display:inline-flex;align-items:center;gap:6px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.how div{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(214,220,228,.1);font-size:13.5px;color:#C4CAD3;line-height:1.7}
.how b{display:block;color:#fff;font-size:14.5px;margin-bottom:2px}
.how i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#F2F3F5;color:#0A0A0A;font-size:12px;font-weight:700;margin-inline-end:8px}
.hero .cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.hero .btn{background:#F2F3F5;color:#0A0A0A;border-color:#F2F3F5}
.hero .btn.ghost{background:transparent;color:#E5E8EC;border-color:rgba(214,220,228,.25)}

.sec{margin-top:64px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-head .eyebrow{font-size:12.5px;font-weight:600;color:var(--accent-ink);letter-spacing:0}
.sec-head h2{font-family:var(--font-display);font-size:clamp(21px,2.4vw,26px);line-height:1.5;margin:4px 0 0;font-weight:600}
.sec-head p{margin:6px 0 0;color:var(--muted);font-size:14.5px;max-width:720px}
.sec-head .count{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mini-bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden;width:120px;margin-top:6px}
.mini-bar i{display:block;height:100%;width:var(--w,0%);background:var(--primary);border-radius:4px;transition:width .8s var(--ease)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);transition:box-shadow .3s var(--ease),border-color .3s,transform .3s var(--ease)}
.card.pad{padding:20px 22px}
.card + .card{margin-top:12px}
.lead{font-size:16.5px;line-height:1.95;color:var(--ink-2)}
.prose p{margin:0 0 10px;color:var(--ink-2)}
.prose strong{font-weight:600}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.stat{padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-align:center}
.stat b{display:block;font-size:28px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--muted)}

.top-list{counter-reset:t;display:grid;gap:10px;margin:0;padding:0;list-style:none}
.top-list li{counter-increment:t;position:relative;padding:16px 18px 16px 18px;padding-inline-start:58px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);font-size:14.5px;color:var(--ink-2);line-height:1.85}
.top-list li::before{content:counter(t);position:absolute;inset-inline-start:16px;top:16px;width:28px;height:28px;border-radius:9px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:13px;font-weight:700}
.top-list b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}

/* Items with controls */
.item{position:relative;padding:18px 20px;scroll-margin-top:calc(var(--top) + 40px)}
.item + .item{margin-top:12px}
.item-head{display:flex;align-items:flex-start;gap:12px}
.item-id{flex:none;display:inline-grid;place-items:center;min-width:44px;height:26px;padding:0 8px;border-radius:8px;background:var(--tint);font-size:12px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;direction:ltr;transition:background .3s,color .3s}
.item.answered .item-id{background:var(--primary);color:var(--on-primary)}
.item-title{flex:1;font-weight:600;font-size:15.5px;line-height:1.7}
.item-title small{display:block;font-weight:400;font-size:12.5px;color:var(--faint);margin-top:2px}
.item-body{margin-top:12px;font-size:14.5px;color:var(--ink-2)}
.rec{position:relative;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--tint);font-size:14px;line-height:1.85;color:var(--ink-2)}
.rec .lbl{display:inline-block;font-size:11.5px;font-weight:600;color:var(--accent-ink);margin-bottom:2px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.by{font-size:12px;color:var(--faint);margin-top:8px;min-height:0;opacity:0;transform:translateY(-3px);transition:opacity .4s,transform .4s var(--ease)}
.by.show{opacity:1;transform:none}
.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 0 transparent}15%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 40%,transparent)}100%{box-shadow:var(--shadow-1)}}

.lvl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:2px 10px;border-radius:99px;white-space:nowrap}
.lvl::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lvl.low{color:var(--ok);background:var(--ok-bg)}.lvl.mid{color:var(--warn);background:var(--warn-bg)}.lvl.high{color:var(--bad);background:var(--bad-bg)}
.prio{display:inline-flex;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap}
.prio.p1{color:var(--on-tone);background:var(--bad)}.prio.p2{color:var(--on-tone);background:var(--warn)}.prio.p3{color:var(--on-tone);background:var(--info)}

/* Segmented control with sliding thumb */
.seg{position:relative;display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:12px;background:var(--tint);border:1px solid var(--line);gap:2px;isolation:isolate}
.seg button{position:relative;z-index:1;height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;font-size:13.5px;font-weight:500;color:var(--ink-3);transition:color .25s;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-checked=true]{color:var(--on-primary)}
.seg[data-tone=ok] button[aria-checked=true],.seg[data-tone=warn] button[aria-checked=true],.seg[data-tone=info] button[aria-checked=true],.seg[data-tone=bad] button[aria-checked=true]{color:var(--on-tone)}
.seg .thumb{position:absolute;z-index:0;top:4px;height:34px;border-radius:9px;background:var(--primary);box-shadow:0 4px 12px -4px rgba(10,10,10,.5);opacity:0;transition:transform .4s var(--ease),width .4s var(--ease),opacity .2s,background .3s}
.seg.has .thumb{opacity:1}
.seg[data-tone=ok] .thumb{background:var(--ok)}
.seg[data-tone=warn] .thumb{background:var(--warn)}
.seg[data-tone=info] .thumb{background:var(--info)}
.seg[data-tone=bad] .thumb{background:var(--bad)}

.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);background:var(--card);font-size:13px;color:var(--ink-3);transition:all .25s var(--ease)}
.chip:hover{border-color:var(--silver-dim);color:var(--ink)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed=true]{background:var(--info-bg);border-color:var(--info);color:var(--info)}
.chip svg{flex:none}

textarea.ans,input.ans{width:100%;border:1px solid var(--line-2);border-radius:12px;background:var(--field);padding:12px 14px;font-size:14.5px;line-height:1.8;resize:none;transition:border-color .2s,box-shadow .25s,background .2s;color:var(--ink)}
textarea.ans{min-height:52px;overflow:hidden;display:block}
textarea.ans::placeholder,input.ans::placeholder{color:var(--faint)}
textarea.ans:hover,input.ans:hover{border-color:var(--silver-dim)}
textarea.ans:focus,input.ans:focus{outline:none;border-color:var(--primary);background:var(--field-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}
input.ans[type=date],input.ans[type=datetime-local]{height:42px;padding:0 12px;width:auto;min-width:170px}
.field-label{display:block;font-size:12.5px;color:var(--muted);margin:12px 0 6px}
.reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease),opacity .35s;opacity:0}
.reveal>div{overflow:hidden}
.reveal.open{grid-template-rows:1fr;opacity:1}
.reveal.open>div{padding-top:12px}
.link-btn{border:0;background:none;padding:0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--ink)}

/* Flow & matrix */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative;margin:4px 0 6px}
.phase{position:relative;padding:14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.phase h4{margin:0 0 8px;font-size:13.5px;font-weight:600}
.phase ol{list-style:none;margin:0;padding:0;font-size:13px;color:var(--ink-3);line-height:1.7}
.phase li{display:flex;gap:6px}
.phase li b{color:var(--silver-dim);font-variant-numeric:tabular-nums;min-width:18px}
.phase:not(:last-child)::after{content:"";position:absolute;top:50%;inset-inline-end:-10px;width:10px;height:2px;background:var(--line-2)}
.table-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--card);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.7}
th{position:sticky;top:0;background:var(--th);color:var(--ink-3);font-weight:600;text-align:start;padding:10px 12px;font-size:12.5px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.c{text-align:center}
.yes{color:var(--ok);font-weight:600}.no{color:var(--bad);font-weight:600}.q{color:var(--warn);font-weight:600}
.matrix td .seg{margin-top:6px}
.matrix td .seg button{height:28px;padding:0 9px;font-size:12px}
.matrix td .seg .thumb{height:28px}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 16px}
.filters .chip[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.filters .chip .n{font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);transition:color .25s}
.filters .chip[aria-pressed=true] .n{color:inherit}
.sf-sep{width:1px;margin:6px 2px;background:var(--line-2)}
.sf-empty{margin:0 0 16px;padding:14px 16px;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted);font-size:14px}
.qgroup-title{font-size:14px;font-weight:600;color:var(--ink-3);margin:26px 0 10px;display:flex;align-items:center;gap:10px}
.qgroup-title::after{content:"";flex:1;height:1px;background:var(--line)}
.hidden-by-filter{display:none}

/* Accordions (research, gaps) */
details.acc{border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden}
details.acc + details.acc{margin-top:10px}
details.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 20px;font-weight:600;font-size:15px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary .chev{margin-inline-start:auto;transition:transform .35s var(--ease);color:var(--faint)}
details.acc[open]>summary .chev{transform:rotate(180deg)}
details.acc>summary .ct{font-size:12.5px;font-weight:500;color:var(--muted)}
.acc-body{padding:0 20px 18px}
details.acc[open] .acc-body{animation:accIn .45s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}}
.gap{padding:14px 0;border-top:1px solid var(--line)}
.gap:first-child{border-top:0;padding-top:4px}
.gap .t{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:14.5px}
.gap .why{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.gap .rec{font-size:13.5px}

/* Research tabs */
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--tint);border:1px solid var(--line);overflow:auto;scrollbar-width:none;position:relative;isolation:isolate}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;z-index:1;height:36px;padding:0 14px;border:0;border-radius:9px;background:none;font-size:13.5px;font-weight:500;color:var(--ink-3);white-space:nowrap;transition:color .25s}
.tabs button[aria-selected=true]{color:var(--ink)}
.tabs .thumb{position:absolute;z-index:0;top:4px;height:36px;border-radius:9px;background:var(--card);box-shadow:var(--shadow-2);transition:transform .45s var(--ease),width .45s var(--ease)}
.tabpanel{margin-top:16px;animation:accIn .45s var(--ease)}
.tabpanel[hidden]{display:none}
.callout{padding:16px 18px;border-radius:var(--r);background:var(--tint);border-inline-start:3px solid var(--primary);font-size:14px;line-height:1.85;color:var(--ink-2);margin:14px 0}
.callout.ok{background:var(--ok-bg);border-color:var(--ok)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn)}
.callout b.t{display:block;color:var(--ink);margin-bottom:4px}
ul.bul{margin:8px 0;padding-inline-start:20px}
ul.bul li{margin-bottom:6px;font-size:14px;color:var(--ink-2)}
ol.num{margin:8px 0;padding-inline-start:22px}
ol.num li{margin-bottom:6px;font-size:14px;color:var(--ink-2)}
.src-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.src-list li{font-size:13px;color:var(--ink-2)}
.src-list a{display:block;direction:ltr;text-align:left;font-family:var(--font-mono);font-size:11.5px;color:var(--info);word-break:break-all;text-decoration:none}
.src-list a:hover{text-decoration:underline}

/* Final */
.final{padding:28px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.approve{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:16px;border-radius:14px;border:1px dashed var(--line-2);cursor:pointer;transition:border-color .3s,background .3s}
.approve:hover{border-color:var(--silver-dim)}
.approve input{position:absolute;opacity:0;pointer-events:none}
.approve .box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--silver-dim);display:grid;place-items:center;margin-top:3px;transition:all .25s var(--ease)}
.approve .box::after{content:"";width:10px;height:6px;border:2.5px solid var(--on-tone);border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-3px;transition:transform .3s var(--spring)}
.approve input:checked~.box{background:var(--ok);border-color:var(--ok)}
.approve input:checked~.box::after{transform:rotate(-45deg) scale(1)}
.approve:has(input:checked){border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.approve input:focus-visible~.box{outline:2px solid var(--primary);outline-offset:2px}
.summary-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.summary-list div{padding:12px;border-radius:12px;background:var(--tint);text-align:center;font-size:12.5px;color:var(--muted)}
.summary-list b{display:block;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.final .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
footer.foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
footer.foot .wordmark{color:var(--ink);width:72px;height:9px}
footer.foot a{color:var(--accent-ink)}

/* Floating "next" */
.fab{position:fixed;inset-inline-end:24px;bottom:24px;z-index:35;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0;padding-inline:18px 14px;border-radius:99px;border:0;background:var(--primary);color:var(--on-primary);font-size:14px;font-weight:500;box-shadow:0 16px 36px -14px rgba(10,10,10,.6);transition:transform .45s var(--spring),opacity .3s}
.fab.hide{transform:translateY(90px);opacity:0;pointer-events:none}
.fab b{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:99px;background:color-mix(in srgb,var(--on-primary) 16%,transparent);font-size:12.5px;font-variant-numeric:tabular-nums}
.fab:hover{transform:translateY(-2px)}

/* Toasts */
.toasts{position:fixed;bottom:24px;right:50%;transform:translateX(50%);z-index:85;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:var(--toast);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:14px;box-shadow:var(--shadow-3);animation:toastIn .5s var(--spring) both}
.toast.out{animation:toastOut .35s var(--ease) both}
.toast.ok svg{color:#7FD3A4}.toast.err svg{color:#FF9C91}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}

/* Modal */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(10,10,10,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .35s var(--ease)}
.modal.out{animation:fadeOut .3s var(--ease) both}
@keyframes fadeOut{to{opacity:0}}
.modal-card{width:min(440px,100%);padding:28px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-3);animation:rise .55s var(--ease)}
.modal-card h3{margin:0 0 6px;font-family:var(--font-display);font-size:21px;font-weight:600}
.modal-card p{margin:0 0 16px;color:var(--muted);font-size:14px}
.modal-card .actions{display:flex;gap:10px;justify-content:flex-start;margin-top:16px}
.name-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* Quick search: Ctrl/⌘ K, "/" or the top bar's button */
.qs-btn{display:inline-flex;align-items:center;gap:8px;flex:none;height:36px;padding-inline:10px 6px;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-3);font-size:13px;font-weight:500;line-height:1;transition:border-color .2s,color .2s}
.qs-btn:hover{border-color:var(--silver-dim);color:var(--ink)}
.qs-btn kbd,.qs kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;border:1px solid var(--line-2);background:var(--tint);color:var(--ink-3);font:600 11px/1 var(--font-en);letter-spacing:0;direction:ltr;unicode-bidi:isolate}
.qs{position:fixed;inset:0;z-index:75;display:flex;align-items:flex-start;justify-content:center;padding:min(12vh,104px) 16px 16px;background:rgba(10,10,10,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .14s ease-out}
.qs[hidden]{display:none}
.qs.out{animation:fadeOut .12s ease-in both}
.qs-card{display:flex;flex-direction:column;width:min(640px,100%);max-height:min(72vh,600px);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-3);overflow:hidden;animation:qsIn .16s var(--ease)}
.qs.out .qs-card{animation:qsOut .12s ease-in both}
@keyframes qsIn{from{opacity:0;transform:translateY(-8px) scale(.985)}}
@keyframes qsOut{to{opacity:0;transform:translateY(-4px) scale(.99)}}
.qs-field{display:flex;align-items:center;gap:10px;flex:none;padding:0 14px;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.qs-field:focus-within{box-shadow:inset 0 -2px 0 var(--primary)}
.qs-field>svg{flex:none;color:var(--muted)}
.qs-input{flex:1;min-width:0;height:56px;padding:0;border:0;background:transparent;font-size:16px;outline:none}
.qs-input::placeholder{color:var(--faint)}
.qs-x{flex:none;display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted)}
.qs-x:hover kbd{border-color:var(--silver-dim);color:var(--ink)}
.qs-x svg{display:none}
.qs-hint{flex:none;padding:12px 18px 0;font-size:12px;font-weight:600;color:var(--muted)}
.qs-hint:empty{display:none}
.qs-list{flex:1 1 auto;min-height:0;margin:0;padding:6px;list-style:none;overflow-y:auto;overscroll-behavior:contain;scroll-padding:6px}
.qs-list:empty{display:none}
.qs-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;padding:10px;border-radius:12px;cursor:pointer;transition:background .12s}
.qs-opt[aria-selected=true]{background:var(--tint);box-shadow:inset 3px 0 0 var(--primary)}
[dir=rtl] .qs-opt[aria-selected=true]{box-shadow:inset -3px 0 0 var(--primary)}
.qs-opt .item-id{min-width:52px;margin-top:1px}
.qs-opt[aria-selected=true] .item-id:not(.hit),.qs-opt[aria-selected=true] .qs-st.open{background:var(--card)}
.qs-opt .item-id.hit{background:var(--primary);color:var(--on-primary)}
.qs-txt{display:grid;gap:2px;min-width:0}
.qs-t{display:-webkit-box;overflow:hidden;font-size:14px;line-height:1.6;color:var(--ink);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qs-c{overflow:hidden;font-size:12.5px;line-height:1.55;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.qs mark{padding:0 1px;border-radius:3px;background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--ink);font-weight:600}
.qs-meta{display:grid;justify-items:end;gap:4px;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:end}
.qs-st{padding:1px 8px;border-radius:99px;font-weight:600;white-space:nowrap}
.qs-st.done{background:var(--ok-bg);color:var(--ok)}
.qs-st.open{background:var(--tint);color:var(--muted)}
.qs-empty{margin:0;padding:24px 18px;text-align:center;font-size:14px;color:var(--muted)}
.qs-foot{display:flex;flex-wrap:wrap;gap:6px 18px;flex:none;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.qs-foot span{display:inline-flex;align-items:center;gap:6px}
.qs-foot kbd{min-width:20px;height:20px;padding:0 5px}
tr.flash>td{animation:rowFlash 1.6s var(--ease)}
@keyframes rowFlash{15%{background:color-mix(in srgb,var(--accent) 22%,transparent)}}
@media (pointer:coarse){.qs-foot,.qs-btn kbd{display:none}}
@media (max-width:720px){
  .qs-btn{justify-content:center;width:34px;height:34px;padding:0}
  .qs-btn .long,.qs-btn kbd{display:none}
}
/* Phones: a full-width sheet from the top, clear of the on-screen keyboard. */
@media (max-width:640px){
  .qs{padding:0}
  .qs-card{width:100%;max-height:100vh;max-height:100dvh;border-width:0 0 1px;border-radius:0 0 var(--r-lg) var(--r-lg);animation-name:qsSheet}
  .qs.out .qs-card{animation-name:qsSheetOut}
  .qs-x{min-width:40px;height:40px}
  .qs-x kbd{display:none}
  .qs-x svg{display:block;width:18px;height:18px}
  .qs-opt{grid-template-columns:auto minmax(0,1fr);padding:12px 10px}
  .qs-meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;justify-items:start;text-align:start}
  body.qs-lock{overflow:hidden}
}
@keyframes qsSheet{from{transform:translateY(-16px);opacity:0}}
@keyframes qsSheetOut{to{transform:translateY(-12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.qs,.qs-card,.qs.out,.qs.out .qs-card,tr.flash>td{animation:none}.qs-opt,.qs-field{transition:none}}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.rv.in{opacity:1;transform:none}

/* Responsive */
/* ── Full picture: files, links ───────────────────────────────────────── */
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.files:empty{display:none}
.file{display:flex;align-items:center;gap:8px;max-width:100%;padding:6px 0;padding-inline:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:13px}
.file img{width:40px;height:40px;object-fit:cover;border-radius:8px;background:var(--tint)}
.file .ficon{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--tint);color:var(--silver-dim)}
.file .fname{border:0;background:none;padding:0;color:var(--ink);text-align:start;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.file .fsize{color:var(--faint);font-size:12px;white-space:nowrap}
.file .fx{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--muted)}
.file .fx:hover{background:var(--bad-bg);color:var(--bad)}
.file .fx.confirm{background:var(--bad);color:var(--on-tone)}
.drop{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:10px;padding:12px 14px;border:1.5px dashed var(--line-2);border-radius:12px;color:var(--ink-3);font-size:13.5px;cursor:pointer;transition:border-color .2s,background .2s}
.drop small{flex-basis:100%;color:var(--faint);font-size:12px}
.drop:hover,.drop.over{border-color:var(--ink-3);background:var(--tint)}
.drop.busy{opacity:.6;pointer-events:none}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.links:empty{display:none}
.links .chip{height:28px;font-size:12.5px;text-decoration:none}

/* ── Device limit ──────────────────────────────────────────────────────── */
.blocked{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:#050505;color:#E9ECF0}
.blocked-card{width:min(440px,100%);padding:34px 28px;border-radius:24px;border:1px solid rgba(214,220,228,.14);background:linear-gradient(180deg,rgba(24,26,30,.9),rgba(12,13,15,.94));text-align:center}
.blocked-card .logo{display:block;margin:0 auto 18px;color:#E9ECF0;opacity:.9}
:root[data-brand=logo] .blocked-card .logo{--logo-h:26px;opacity:1}
.blocked-card svg{width:34px;height:34px;color:#B8BFC9}
.blocked-card h1{font-family:var(--font-display);font-size:21px;font-weight:600;margin:10px 0 8px}
.blocked-card p{color:#A9B0BA;font-size:14.5px;line-height:1.9;margin:0 0 18px}
.blocked-card .btn{color:#E9ECF0}
.blocked-card .btn:hover{background:rgba(255,255,255,.06)}

/* ── Assistant ─────────────────────────────────────────────────────────── */
.ai-launch{position:fixed;inset-inline-start:24px;bottom:24px;z-index:36;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0;padding-inline:16px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,var(--hero),color-mix(in srgb,var(--hero) 72%,#5A6270));color:#fff;font-size:14px;font-weight:500;box-shadow:0 16px 36px -14px rgba(10,10,10,.6);transition:transform .45s var(--spring),opacity .3s}
.ai-launch svg{color:color-mix(in srgb,var(--b-accent-d,#D6DCE4) 80%,#fff);animation:twinkle 3.6s ease-in-out infinite}
.ai-launch:hover{transform:translateY(-2px)}
body.ai-open .ai-launch{opacity:0;pointer-events:none;transform:translateY(20px)}
@keyframes twinkle{50%{transform:scale(1.18) rotate(8deg);opacity:.8}}
.ai-panel{position:fixed;top:12px;inset-inline-start:12px;bottom:12px;z-index:65;width:min(440px,calc(100vw - 24px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-3);overflow:hidden;transform:translateX(24px);opacity:0;transition:transform .35s var(--ease),opacity .3s}
[dir=ltr] .ai-panel{transform:translateX(-24px)}
.ai-panel.open,[dir=ltr] .ai-panel.open{transform:none;opacity:1}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;gap:10px;padding:14px 0 10px;padding-inline:14px 10px;border-bottom:1px solid var(--line)}
.ai-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--hero),color-mix(in srgb,var(--hero) 70%,#5A6270));color:#E9ECF0;flex:none}
.ai-id{flex:1;min-width:0;line-height:1.4}
.ai-id b{display:block;font-size:15px}
.ai-id small{color:var(--muted);font-size:12px}
.ai-talk{display:inline-flex;align-items:center;gap:6px;height:36px;padding-inline:10px 14px;border:0;border-radius:99px;background:var(--primary);color:var(--on-primary);font-size:13px;font-weight:600;flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 45%,transparent);animation:talkpulse 2.6s ease-out infinite}
.ai-talk svg{width:16px;height:16px}
.ai-talk:hover{background:var(--primary-hover)}
/* Section actions: one row, one geometry. */
.sec-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none;align-self:center;margin-inline-start:auto}
.sec-act{display:inline-flex;align-items:center;gap:7px;height:36px;padding-inline:12px 15px;border-radius:99px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease)}
.sec-act svg{width:15px;height:15px;flex:none}
.sec-act:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--line-2));color:var(--ink);box-shadow:var(--shadow-1)}
.sec-act:active{transform:scale(.97)}
.sec-act:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@keyframes talkpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 45%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.ai-talk{animation:none}}
.ai-hbtn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--ink-3);flex:none}
.ai-hbtn:hover{background:var(--tint);color:var(--ink)}
.ai-tabs{display:flex;gap:4px;margin:10px 14px 0;padding:4px;border-radius:12px;background:var(--tint)}
.ai-tabs button{flex:1;height:34px;border:0;border-radius:9px;background:transparent;font-size:13.5px;color:var(--muted);transition:background .2s,color .2s}
.ai-tabs button[aria-selected=true]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.ai-view{flex:1;min-height:0;display:flex;flex-direction:column}
.ai-view[hidden]{display:none}
.ai-log[hidden]{display:none}
.ai-log{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.ai-msg{max-width:92%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.85}
.ai-msg p{margin:0 0 6px}.ai-msg p:last-child{margin:0}
.ai-msg ul,.ai-msg ol{margin:4px 0 6px;padding-inline-start:20px}
.ai-msg li{margin:2px 0}
.ai-msg code{font-family:var(--font-mono);font-size:12.5px;background:var(--tint);padding:1px 5px;border-radius:5px}
.ai-msg.user{align-self:flex-start;background:var(--primary);color:var(--on-primary);border-end-start-radius:6px}
.ai-msg.assistant{align-self:flex-end;background:var(--paper);border:1px solid var(--line);border-end-end-radius:6px}
.ai-msg.pending{min-width:64px}
.dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--silver-dim);animation:dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{transform:translateY(-4px);opacity:.5}}
.ai-note{align-self:center;font-size:12.5px;color:var(--muted);text-align:center;padding:4px 10px}
.ai-note.err{color:var(--bad);background:var(--bad-bg);border-radius:10px;padding:8px 12px}
.ai-new{align-self:center;font-size:12.5px}
.ai-starters{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ai-starters .chip{height:auto;min-height:32px;padding:6px 12px;text-align:start;line-height:1.5}
.ai-compose{display:flex;align-items:flex-end;gap:6px;margin:0 12px;padding:6px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);transition:border-color .2s,box-shadow .2s}
.ai-compose[hidden]{display:none}
.ai-compose:focus-within{border-color:var(--silver-dim);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 8%,transparent)}
.ai-compose textarea{flex:1;min-height:38px;max-height:160px;resize:none;border:0;outline:0;padding:8px 8px;background:transparent;font-size:14.5px;line-height:1.6}
.ai-cbtn{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;background:var(--tint);color:var(--ink-3);flex:none}
.ai-cbtn:hover{color:var(--ink)}
.ai-cbtn.send{background:var(--primary);color:var(--on-primary)}
.ai-cbtn.send svg{transform:none}
[dir=ltr] .ai-cbtn.send:not(.stop) svg{transform:scaleX(-1)}
.ai-cbtn.stop{background:var(--ink-3);color:var(--card)}
.ai-foot{margin:6px 14px 10px;font-size:11.5px;color:var(--faint);text-align:center}
.ai-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ai-intbar{justify-content:flex-end;padding-top:4px}
.ai-intbar .btn{height:36px;font-size:13.5px}
.ai-intro{padding:6px 2px}
.ai-intro h3{margin:0 0 6px;font-size:17px}
.ai-intro p{margin:0 0 10px;color:var(--ink-2);font-size:14.5px}
.ai-small{font-size:13px;color:var(--muted)}
.ai-topics{padding:10px 14px 0}
.ai-topics:empty{display:none}
.ai-tbar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.ai-tbar i{flex:1;height:5px;border-radius:9px;background:var(--tint);position:relative;overflow:hidden}
.ai-tbar i::after{content:"";position:absolute;inset:0;inset-inline-end:auto;width:var(--w);background:var(--primary);border-radius:9px;transition:width .5s var(--ease)}
.ai-tlist{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.ai-tlist::-webkit-scrollbar{display:none}
.ai-topic{flex:none;padding:4px 10px;border-radius:99px;border:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap}
.ai-topic.covered{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.ai-topic.skipped{background:var(--tint);color:var(--faint)}
.ai-topic.current{border-color:var(--primary);color:var(--ink);font-weight:600}
.ai-review{flex:1;min-height:0;overflow-y:auto;padding:14px;border-top:1px solid var(--line)}
.ai-review[hidden]{display:none}
.ai-review-head h3,.ai-done h3{margin:0 0 4px;font-size:17px}
.ai-review-head p{margin:0 0 12px;color:var(--muted);font-size:13.5px}
.ai-sec{display:block;margin:0 0 12px}
.ai-sec span{display:block;font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:4px}
.ai-sec textarea,.ai-sec input{width:100%;padding:9px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);font-size:14px;line-height:1.75;resize:none;overflow:hidden}
.ai-sec textarea:focus,.ai-sec input:focus{outline:none;border-color:var(--ink-3);background:var(--card)}
.ai-empty{margin:0 0 12px}
.ai-empty summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--muted);margin-bottom:10px}
.ai-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 14px;font-size:13.5px;cursor:pointer}
.ai-check input{position:absolute;opacity:0;pointer-events:none}
.ai-check .box{flex:none;width:20px;height:20px;margin-top:3px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:all .2s var(--ease)}
.ai-check .box::after{content:"";width:9px;height:5px;border:2px solid var(--on-primary);border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .25s var(--spring)}
.ai-check input:checked+.box{background:var(--primary);border-color:var(--primary)}
.ai-check input:checked+.box::after{transform:rotate(-45deg) scale(1)}
.ai-check input:focus-visible+.box{outline:2px solid var(--primary);outline-offset:2px}
.ai-done{text-align:center}
.ai-done .ai-row{justify-content:center;margin:10px 0 14px}
.ai-ok{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ok-bg);color:var(--ok);font-size:22px;margin-bottom:6px}
.ai-done p{color:var(--ink-2);font-size:14px}
.ai-brief{text-align:start;border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:10px;background:var(--paper)}
.ai-brief h4{margin:10px 0 4px;font-size:13.5px}
.ai-brief ul{margin:0;padding-inline-start:18px;font-size:13.5px}
.btn.busy{opacity:.7;pointer-events:none}

/* Inline suggestions and "explain" */
.sec-head{flex-wrap:wrap}
.ai-tipbtn[aria-expanded=true]{border-color:var(--primary);color:var(--ink);background:color-mix(in srgb,var(--primary) 6%,var(--card))}
.ai-tips{margin:-6px 0 18px;padding:16px 18px;border-radius:var(--r);background:linear-gradient(180deg,var(--tips),var(--card));border:1px solid var(--line);box-shadow:var(--shadow-1);animation:rise .5s var(--ease) both}
.ai-tips[hidden]{display:none}
.ai-tips-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ai-tips-head b{flex:1;font-size:14px}
.ai-tips-load{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px}
.ai-tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ai-tg h4{margin:0 0 6px;font-size:13px;color:var(--ink-3)}
.ai-tg ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ai-tg li{font-size:13.5px;line-height:1.8;padding:8px 10px;border-radius:10px;background:var(--paper);border-inline-start:3px solid var(--line-2)}
.ai-tg li{color:var(--ink-2)}.ai-tg.tq li{border-color:var(--info)}.ai-tg.to li{border-color:var(--silver-dim)}.ai-tg.tr li{border-color:var(--warn)}
.ai-msg hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.ai-tg .link-btn{display:block;margin-top:4px;font-size:12px}
.ai-ask{display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto}
.ai-ask svg{width:14px;height:14px}

/* Voice */
.ai-voice{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 16px;background:radial-gradient(circle at 50% 38%,#1A1D22,#050505 70%);color:#E9ECF0;text-align:center;opacity:0;transition:opacity .3s}
.ai-voice.open{opacity:1}
.ai-voice[hidden]{display:none}
.ai-orb{--lvl:0;position:relative;width:180px;height:180px;margin-bottom:18px}
.ai-orb i,.ai-orb b{position:absolute;inset:0;border-radius:50%}
.ai-orb b{inset:28%;background:radial-gradient(circle at 35% 30%,#F2F3F5,#8B95A3 55%,#2A2F38);box-shadow:0 0 60px rgba(214,220,228,.25);transform:scale(calc(1 + var(--lvl) * .35));transition:transform .08s linear}
.ai-orb i{border:1px solid rgba(214,220,228,.18);transform:scale(calc(.7 + var(--lvl) * .5));transition:transform .12s linear}
.ai-orb i:nth-child(2){border-color:rgba(214,220,228,.1);transform:scale(calc(.85 + var(--lvl) * .7))}
.ai-orb i:nth-child(3){border-color:rgba(214,220,228,.06);transform:scale(calc(1 + var(--lvl) * .9))}
.ai-orb[data-state=thinking] b{animation:breathe2 1.4s ease-in-out infinite}
.ai-orb[data-state=speaking] i{animation:ring 1.8s ease-out infinite}
.ai-orb[data-state=speaking] i:nth-child(2){animation-delay:.6s}.ai-orb[data-state=speaking] i:nth-child(3){animation-delay:1.2s}
.ai-orb[data-state=paused]{opacity:.4}
@keyframes breathe2{50%{transform:scale(1.12);filter:brightness(1.25)}}
@keyframes ring{from{transform:scale(.7);opacity:.9}to{transform:scale(1.25);opacity:0}}
.ai-vstate{font-size:18px;font-weight:600;margin:0}
.ai-vline{max-width:560px;margin:0;font-size:15px;line-height:1.9;color:#B8BFC9;min-height:1.9em}
.ai-vline.you{color:#8E96A1}
.ai-vline.bot{color:#E9ECF0;max-height:30vh;overflow-y:auto}
.ai-vctl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.ai-vctl .btn{border-color:rgba(214,220,228,.2);background:rgba(255,255,255,.06);color:#E9ECF0}
.ai-vctl .btn.primary{background:#E9ECF0;color:#0A0A0A;border-color:#E9ECF0}
.ai-vhint{color:#7D8590;font-size:12.5px}

@media (max-width:1024px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0;padding:0 16px 120px}
  .side{position:sticky;top:var(--top);z-index:20;max-height:none;margin:0 -16px;padding:8px 16px;background:var(--glass-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);overflow:visible}
  .nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:7px 10px;font-size:13px}
  .nav .ct{display:none}
  .nav-ind,.who,.side-actions{display:none}
  .hero{margin-top:18px}
  .flow{grid-template-columns:repeat(2,1fr)}
  .phase:not(:last-child)::after{display:none}
}
@media (max-width:720px){
  body{font-size:15px}
  .topbar{padding:0 12px;gap:8px}
  .topbar .doc,.topbar .sep{display:none}
  :root[data-brand=logo] .topbar .logo{--logo-h:18px;max-width:34vw;background-position:var(--logo-pos,right) center}
  [dir=ltr] .topbar .logo{--logo-pos:left}
  .top-prefs .pref-lang .long{display:none}
  .top-prefs .pref-lang .short{display:inline}
  .top-prefs .pref-btn{height:34px;min-width:34px;padding:0 8px}
  .top-prefs .pref-btn.pref-theme{width:34px;padding:0}
  .ring{width:36px;height:36px}
  .ring svg{width:36px;height:36px}
  .sync span.t{display:none}
  .sync{padding:0 10px}
  .btn.pdf span.t{display:none}
  .btn.pdf{width:40px;padding:0}
  .hero{padding:30px 20px 24px}
  .how,.stats,.summary-list,.final-grid{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr}
  .item{padding:16px}
  .seg{display:flex;width:100%}
  .seg button{flex:1 1 auto;padding:0 10px}
  .fab{inset-inline-end:16px;bottom:16px}
  .final{padding:20px}
  .ai-launch{inset-inline-start:16px;bottom:16px;padding:0 14px}
  .ai-launch span{display:none}
  .sec-head{flex-wrap:wrap}
  .ai-panel{top:0;inset-inline-start:0;bottom:0;width:100vw;border-radius:0;border:0}
  .ai-tgrid{grid-template-columns:1fr}
  .file .fname{max-width:150px}
}
@media (max-width:420px){.how,.stats,.summary-list,.final-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* Try-the-demo section */
.demo-links{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 16px}
.demo-links .btn span{margin-inline-start:6px}
.demo-acc td small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.copy-val{font-family:var(--font-mono,ui-monospace,monospace);font-size:13.5px;padding:3px 9px;border-radius:8px;border:1px dashed color-mix(in srgb,var(--primary) 40%,transparent);background:color-mix(in srgb,var(--primary) 6%,transparent);color:var(--ink);cursor:copy;white-space:nowrap;unicode-bidi:isolate;letter-spacing:0}
.copy-val:hover{background:color-mix(in srgb,var(--primary) 14%,transparent)}
.demo-scn{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:8px}
.demo-scn h4{margin:4px 0 8px;font-size:15px}
.demo-scn ol{margin:0;padding-inline-start:20px;font-size:13.5px;line-height:1.8}
.demo-who{display:inline-block;font-size:12px;font-weight:600;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:99px;padding:2px 10px}
.demo-exp{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
/* The jump target rings in the primary colour once, then settles (it used to keep a static outline). */
.card.flash{animation:flash 1.6s var(--ease),flashRing 1.6s var(--ease)}
@keyframes flashRing{0%,60%{outline:3px solid var(--primary);outline-offset:3px}100%{outline:3px solid transparent;outline-offset:3px}}
@media (prefers-reduced-motion:reduce){.card.flash{animation:none}}
/* Demo tables become cards on phones: one row per card, labels inline. */
@media (max-width:640px){
  .demo-acc thead,.demo-dec thead{display:none}
  .demo-acc,.demo-acc tbody,.demo-dec,.demo-dec tbody{display:block}
  .demo-acc tr,.demo-dec tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .demo-acc td,.demo-dec td{display:block;border:0;padding:0}
  .demo-acc td:first-child,.demo-acc td:last-child,.demo-dec td:not(:first-child){grid-column:1/-1}
  .demo-acc td[data-label]::before,.demo-dec td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:3px}
  .demo-links .btn{flex:1 1 100%;justify-content:center}
  .copy-val{white-space:normal;word-break:break-all}
  .sec-act{height:34px;font-size:12.5px;padding-inline:11px 13px}
  .sec-actions{margin-inline-start:0;width:100%}
}
.demo-scn article{transition:transform .2s ease,box-shadow .2s ease}
.demo-scn article:hover{transform:translateY(-2px)}
.copy-val{transition:background-color .15s ease,transform .12s ease}
.copy-val:active{transform:scale(.97)}
.ai-talk:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.demo-scn article,.copy-val,.sec-act{transition:none}.demo-scn article:hover{transform:none}}

/* Dark, refined: layered surfaces with a faint top highlight and a soft accent
   glow behind the page, instead of flat grey slabs. */
:root[data-theme=dark] body{background:radial-gradient(1200px 560px at 50% -220px,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--paper);background-attachment:fixed}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body{background:radial-gradient(1200px 560px at 50% -220px,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--paper);background-attachment:fixed}}
:root[data-theme=dark] .card{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 42%),var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .card{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 42%),var(--card)}}