:root{
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --sp:16px;
  --font-display:'Archivo','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-code:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --info:#38bdf8;
  /* Brand mark. These are the true Iphios colours and are the default.
     data-logo="theme" swaps them for palette-matched ones (see below). */
  --logo-dark:#1A1A1A; --logo-w1:#F5C400; --logo-w2:#F59500; --logo-plate:#ffffff;
  --shadow:0 18px 40px -24px rgba(0,0,0,.65);
  --speed:.22s;
}

body[data-theme="dark"]{
  --bg:#0e1419; --bg-2:#131c23;
  --panel:#18232c; --panel-2:#1f2f3a; --panel-3:#253743;
  --line:#2b3d4a; --line-soft:#22323d;
  --ink:#eaf2f6; --ink-2:#9db0bd; --ink-3:#6b8290;
  --brand:#1d5f7a; --brand-2:#2b7f9e;
  --accent:#4ade80; --accent-2:#22c55e; --accent-ink:#06281a;
  --rail:linear-gradient(175deg,#14202a 0%,#101a22 55%,#0d151b 100%);
  --hero:linear-gradient(115deg,#1d5f7a 0%,#17485f 48%,#123a4c 100%);
  --card:linear-gradient(158deg,#1f3a3a 0%,#1b3230 60%,#18292a 100%);
  --pop:linear-gradient(120deg,#4ade80,#22c55e 55%,#0ea5e9);
  --chart-a:#4ade80; --chart-b:#22d3ee; --chart-c:#a78bfa; --chart-d:#fbbf24;
  --glass:rgba(255,255,255,.045);
}

body[data-theme="light"]{
  --bg:#eef2f5; --bg-2:#e4eaef;
  --panel:#ffffff; --panel-2:#f4f7f9; --panel-3:#eaeff3;
  --line:#d3dde4; --line-soft:#e4ebf0;
  --ink:#10202b; --ink-2:#4f6675; --ink-3:#7f95a3;
  --brand:#1d5f7a; --brand-2:#2b7f9e;
  --accent:#16a34a; --accent-2:#15803d; --accent-ink:#ffffff;
  --rail:linear-gradient(175deg,#ffffff 0%,#f2f6f8 100%);
  --hero:linear-gradient(115deg,#1d5f7a 0%,#2b7f9e 100%);
  --card:linear-gradient(158deg,#ffffff 0%,#f0f7f2 100%);
  --pop:linear-gradient(120deg,#16a34a,#0ea5e9);
  --chart-a:#16a34a; --chart-b:#0891b2; --chart-c:#7c3aed; --chart-d:#d97706;
  --glass:rgba(16,32,43,.04);
  --shadow:0 16px 34px -26px rgba(16,42,60,.55);
}

body[data-theme="green"]{
  --bg:#08150f; --bg-2:#0c1d15;
  --panel:#11291d; --panel-2:#173425; --panel-3:#1d422e;
  --line:#255a3d; --line-soft:#1c4530;
  --ink:#e7f7ec; --ink-2:#9ac7ac; --ink-3:#6d9c83;
  --brand:#14663f; --brand-2:#1c8a55;
  --accent:#6ee7a8; --accent-2:#34d399; --accent-ink:#04241a;
  --rail:linear-gradient(175deg,#0f2a1c 0%,#0a1d14 100%);
  --hero:linear-gradient(115deg,#14663f 0%,#0f4f33 55%,#0b3a26 100%);
  --card:linear-gradient(158deg,#1a4630 0%,#153a28 60%,#112e20 100%);
  --pop:linear-gradient(120deg,#a3e635,#34d399 55%,#0d9488);
  --chart-a:#a3e635; --chart-b:#34d399; --chart-c:#2dd4bf; --chart-d:#fde047;
  --glass:rgba(255,255,255,.05);
}

body[data-theme="amber"]{
  --bg:#17110a; --bg-2:#1d160c;
  --panel:#251b0f; --panel-2:#2f2314; --panel-3:#3a2c19;
  --line:#4b3a20; --line-soft:#3a2c19;
  --ink:#fdf3e3; --ink-2:#d0b285; --ink-3:#a08a63;
  --brand:#a3600f; --brand-2:#c97a14;
  --accent:#fbbf24; --accent-2:#f97316; --accent-ink:#2a1704;
  --rail:linear-gradient(175deg,#2a1e11 0%,#1a1309 100%);
  --hero:linear-gradient(115deg,#b06612 0%,#8a4d0c 55%,#63380a 100%);
  --card:linear-gradient(158deg,#3d2a12 0%,#33230f 60%,#2a1d0d 100%);
  --pop:linear-gradient(120deg,#fde047,#fb923c 55%,#ef4444);
  --chart-a:#fbbf24; --chart-b:#fb923c; --chart-c:#f472b6; --chart-d:#a3e635;
  --glass:rgba(255,255,255,.05);
}
/* --- Theme 5: Gradient Indigo / Violet --- */
body[data-theme="violet"]{
  --bg:#0d0b1a; --bg-2:#120f22;
  --panel:#181433; --panel-2:#201a42; --panel-3:#2a2252;
  --line:#372c66; --line-soft:#2a2252;
  --ink:#eeeaff; --ink-2:#b0a7dd; --ink-3:#8177b5;
  --brand:#4c1d95; --brand-2:#6d28d9;
  --accent:#a78bfa; --accent-2:#818cf8; --accent-ink:#150a33;
  --rail:linear-gradient(175deg,#1a1440 0%,#100c26 100%);
  --hero:linear-gradient(115deg,#5b21b6 0%,#4c1d95 55%,#312e81 100%);
  --card:linear-gradient(158deg,#2b2160 0%,#241c50 60%,#1d1742 100%);
  --pop:linear-gradient(120deg,#c084fc,#818cf8 55%,#38bdf8);
  --chart-a:#c084fc; --chart-b:#818cf8; --chart-c:#38bdf8; --chart-d:#f472b6;
  --glass:rgba(255,255,255,.055);
}
/* --- Theme 6: Gradient Blue / Sky --- */
body[data-theme="blue"]{
  --bg:#071520; --bg-2:#0a1c2a;
  --panel:#0e2536; --panel-2:#133046; --panel-3:#183c57;
  --line:#1f4d6d; --line-soft:#183c57;
  --ink:#e6f5ff; --ink-2:#95bdd8; --ink-3:#6b96b4;
  --brand:#0c4a6e; --brand-2:#0369a1;
  --accent:#38bdf8; --accent-2:#0ea5e9; --accent-ink:#04202f;
  --rail:linear-gradient(175deg,#0d2739 0%,#08192a 100%);
  --hero:linear-gradient(115deg,#0369a1 0%,#075985 55%,#0c4a6e 100%);
  --card:linear-gradient(158deg,#12405c 0%,#0f3550 60%,#0c2b42 100%);
  --pop:linear-gradient(120deg,#7dd3fc,#38bdf8 55%,#2563eb);
  --chart-a:#7dd3fc; --chart-b:#38bdf8; --chart-c:#818cf8; --chart-d:#5eead4;
  --glass:rgba(255,255,255,.05);
}

/* ============================================================
   FONT STYLE PRESETS
   Each preset re-points the same three tokens the whole UI uses:
   --font-display (headings, figures) / --font-body / --font-code (refs).
   Web fonts beyond the default set are fetched on demand — see loadFontCss().
   ============================================================ */
/* --- Font 1: Iphios Standard (default) --- */
body[data-font="default"],
.fp[data-font-preview="default"]{
  --font-display:'Archivo','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-code:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-base:14px;
}
/* --- Font 2: Plex Enterprise — wide, neutral, built for dense data --- */
body[data-font="plex"],
.fp[data-font-preview="plex"]{
  --font-display:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-code:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-base:13.6px;
}
/* --- Font 3: Terminal Grotesk — technical headings, engineered numerals --- */
body[data-font="grotesk"],
.fp[data-font-preview="grotesk"]{
  --font-display:'Space Grotesk','Archivo','Segoe UI',sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-code:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-base:14px;
}
/* --- Font 4: Manrope Humanist — rounder, softer for long shifts --- */
body[data-font="humanist"],
.fp[data-font-preview="humanist"]{
  --font-display:'Manrope','Archivo','Segoe UI',sans-serif;
  --font-body:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-code:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-base:14px;
}
/* --- Font 5: Manifest Condensed — narrow, fits more columns per screen --- */
body[data-font="condensed"],
.fp[data-font-preview="condensed"]{
  --font-display:'Barlow Condensed','Archivo','Segoe UI',sans-serif;
  --font-body:'Barlow','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-code:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-base:14.6px;
}
body[data-font="condensed"] h1,
body[data-font="condensed"] h2,
body[data-font="condensed"] h3,
body[data-font="condensed"] h4{letter-spacing:.005em}
/* --- Font 6: Executive Report — serif headings for printed SOAs and reports --- */
body[data-font="editorial"],
.fp[data-font-preview="editorial"]{
  --font-display:'Lora',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-code:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-base:14.4px;
}
body[data-font="editorial"] h1,
body[data-font="editorial"] h2,
body[data-font="editorial"] h3,
body[data-font="editorial"] h4{letter-spacing:0}
/* --- Font 7: System Native — no web fonts, fastest on weak links --- */
body[data-font="system"],
.fp[data-font-preview="system"]{
  --font-display:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-code:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,Consolas,monospace;
  --fs-base:14px;
}


/* ============================================================
   BRAND MARK — theme blending
   data-logo="brand" (default) keeps the real Iphios gold and charcoal.
   data-logo="theme" re-tints the mark so it sits inside each palette.
   ============================================================ */
body[data-logo="theme"][data-theme="dark"]  {--logo-dark:#0c1a22;--logo-w1:#86efac;--logo-w2:#16a34a}
body[data-logo="theme"][data-theme="light"] {--logo-dark:#10202b;--logo-w1:#4ade80;--logo-w2:#15803d;--logo-plate:#f7fafb}
body[data-logo="theme"][data-theme="green"] {--logo-dark:#072014;--logo-w1:#bef264;--logo-w2:#0d9488}
body[data-logo="theme"][data-theme="amber"] {--logo-dark:#241304;--logo-w1:#fde047;--logo-w2:#ea580c}
body[data-logo="theme"][data-theme="violet"]{--logo-dark:#140930;--logo-w1:#d8b4fe;--logo-w2:#6d28d9}
body[data-logo="theme"][data-theme="blue"]  {--logo-dark:#04202f;--logo-w1:#a5e8fd;--logo-w2:#0369a1}

/* the mark sits on a light plate so the charcoal chevron keeps contrast
   on every background, dark themes included */
.brandmark .glyph,.rail-brand .glyph{
  background:var(--logo-plate);padding:5px 6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.4);box-shadow:0 3px 12px -6px rgba(0,0,0,.7);
}
.brandmark .glyph{width:62px;height:42px;border-radius:11px}
.rail-brand .glyph{width:52px;height:35px;border-radius:9px}
.glyph svg{width:100%;height:100%;display:block}
.glyph .streaks{transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.rail-brand:hover .glyph .streaks,.brandmark:hover .glyph .streaks{transform:translateX(-16px)}
.logo-prev{height:70px;display:grid;place-items:center;border-radius:var(--r-md);background:var(--logo-plate);border:1px solid var(--line-soft);padding:8px}
.logo-prev svg{height:100%;width:auto}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-base,14px); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background var(--speed),color var(--speed);
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-.01em;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--accent)}
.mono{font-family:var(--font-code);letter-spacing:-.02em}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-art{background:var(--hero);position:relative;overflow:hidden;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login-art::after{content:"";position:absolute;inset:0;background:
   radial-gradient(900px 420px at 12% 8%,rgba(255,255,255,.16),transparent 62%),
   radial-gradient(700px 480px at 92% 96%,rgba(0,0,0,.4),transparent 60%);}
.login-art>*{position:relative;z-index:2}
/* sign-in background video — sits under the art's glow and the copy */
.login-art>.login-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--hero);pointer-events:none}
.lv-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.lv-clip.on{opacity:1}
.login-video.still .lv-clip{transition:none}
.lv-tint{position:absolute;inset:0;background:var(--hero);opacity:.5;mix-blend-mode:multiply}
.lv-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.62) 100%)}
.login-art h1,.login-art p{text-shadow:0 1px 16px rgba(0,0,0,.35)}
.brandmark{display:flex;gap:14px;align-items:center;color:#fff}
.brandmark .glyph{width:46px;height:46px;border-radius:12px;background:var(--pop);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:var(--accent-ink);font-size:19px}
.brandmark b{font-family:var(--font-display);font-size:16px;letter-spacing:.02em;line-height:1.15;display:block}
.brandmark span{font-size:11.5px;opacity:.75;letter-spacing:.14em}
.login-art h1{color:#fff;font-size:clamp(30px,4.4vw,52px);line-height:1.02;max-width:12ch}
.login-art p{color:rgba(255,255,255,.78);max-width:44ch;margin:18px 0 0}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.pill{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;border:1px solid rgba(255,255,255,.18)}
.login-form{display:grid;place-items:center;padding:40px;background:var(--bg)}
.login-card{width:min(400px,100%)}
.login-card h2{font-size:24px;margin-bottom:6px}
.login-card .sub{color:var(--ink-2);margin:0 0 26px}
.demo-users{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:16px}
.demo-users h4{font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:10px}
.demo-user{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line-soft);background:var(--panel);margin-bottom:6px;text-align:left;transition:border-color var(--speed),transform var(--speed)}
.demo-user:hover{border-color:var(--accent)}
.demo-user small{color:var(--ink-3)}

/* ---------- Form controls ---------- */
.field{margin-bottom:14px}
.field>label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field>label .req{color:var(--bad);margin-left:3px}
.field>label .opt{color:var(--ink-3);font-weight:400;margin-left:6px}
.ctl{width:100%;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel-2);color:var(--ink);transition:border-color var(--speed),box-shadow var(--speed)}
.ctl::placeholder{color:var(--ink-3)}
.ctl:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
select.ctl{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.ctl.err{border-color:var(--bad);box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.err-msg{color:var(--bad);font-size:11.5px;margin-top:5px;display:none}
.field.invalid .err-msg{display:block}
.split{display:grid;grid-template-columns:118px 1fr;gap:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--r-sm);font-weight:600;font-size:13.5px;border:1px solid transparent;transition:filter var(--speed),transform var(--speed),background var(--speed)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pop);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);background:var(--panel-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-quiet{color:var(--ink-2);padding:8px 10px}
.btn-quiet:hover{color:var(--ink)}
.btn-danger{background:color-mix(in srgb,var(--bad) 16%,transparent);color:#fca5a5;border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn-danger:hover{background:var(--bad);color:#fff}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-sm{padding:6px 10px;font-size:12.5px}

/* ---------- App shell ---------- */
.app{display:none;min-height:100vh;grid-template-columns:264px 1fr}
.app.on{display:grid}
.rail{background:var(--rail);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;padding:18px 16px;position:sticky;top:0;height:100vh}
.rail-brand{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-md);background:var(--hero);margin-bottom:22px}
.rail-brand .glyph{width:38px;height:38px;border-radius:10px;background:var(--pop);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:var(--accent-ink);font-size:16px;flex:none}
.rail-brand b{font-family:var(--font-display);font-size:13px;color:#fff;line-height:1.2;display:block}
.rail-brand span{font-size:10.5px;color:rgba(255,255,255,.7);letter-spacing:.12em}
.nav{display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto}
.nav button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);color:var(--ink-2);font-weight:600;font-size:14px;border:1px solid transparent;text-align:left;transition:background var(--speed),color var(--speed),border-color var(--speed)}
.nav button:hover{background:var(--glass);color:var(--ink)}
.nav button.active{background:var(--hero);color:#fff;border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.nav button.active .ico{color:var(--accent)}
.nav .ico{width:18px;display:grid;place-items:center;color:var(--ink-3);flex:none}
.nav button.active .badge,.nav .badge{margin-left:auto;background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:10.5px;padding:1px 7px;font-weight:700}

.rail-foot{border-top:1px solid var(--line-soft);padding-top:14px;margin-top:14px}
.who{display:flex;gap:11px;align-items:center;padding:8px;border-radius:var(--r-md);background:var(--glass)}
.avatar{width:36px;height:36px;border-radius:10px;background:var(--pop);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-family:var(--font-display);font-size:13px;flex:none}
.who b{display:block;font-size:13px;font-family:var(--font-body);font-weight:600}
.who small{color:var(--ink-3);font-size:11px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.status-dot{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.status-dot i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.status-dot.warn i{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.theme-btn{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);font-size:12px;font-weight:600;color:var(--ink-2)}
.theme-btn:hover{border-color:var(--accent);color:var(--ink)}
.theme-btn svg{color:var(--accent)}
.logout{width:100%;margin-top:10px;justify-content:flex-start;color:#f8a5a5;border:1px solid transparent;padding:9px 12px;border-radius:var(--r-sm);font-weight:600;font-size:13px;display:flex;gap:10px;align-items:center}
.logout:hover{background:color-mix(in srgb,var(--bad) 15%,transparent);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}

/* ---------- Main / views ---------- */
.main{min-width:0;padding:20px 26px 40px;background:
  radial-gradient(1100px 520px at 100% -10%,var(--glass),transparent 60%);}
.topbar{display:flex;align-items:center;gap:16px;background:var(--hero);border-radius:var(--r-lg);padding:16px 22px;margin-bottom:20px;box-shadow:var(--shadow)}
.topbar h1{color:#fff;font-size:22px;flex:1;min-width:0}
.topbar .crumb{color:rgba(255,255,255,.72);font-size:12px;display:block;font-weight:500;font-family:var(--font-body);letter-spacing:.02em}
.clock{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);padding:8px 14px;text-align:right;color:#fff;flex:none}
.clock b{display:block;font-size:16px;font-variant-numeric:tabular-nums;font-family:var(--font-display)}
.clock small{font-size:10.5px;opacity:.72}
.burger{display:none}

.view{display:none;animation:fade .28s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Dashboard ---------- */
.grid-top{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(320px,1.5fr) minmax(280px,1fr);gap:16px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px;position:relative;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-h h3{font-size:14px;letter-spacing:.02em}
.card-h .hint{font-size:11.5px;color:var(--ink-3)}

.bignum{font-family:var(--font-display);font-size:clamp(44px,6vw,62px);line-height:1;font-weight:800;font-variant-numeric:tabular-nums;background:var(--pop);-webkit-background-clip:text;background-clip:text;color:transparent}
.bignum-cap{font-size:12px;color:var(--ink-2);margin-top:6px}
.kpi-list{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.kpi{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--line-soft)}
.kpi .dot{width:9px;height:9px;border-radius:3px;flex:none}
.kpi b{margin-left:auto;font-variant-numeric:tabular-nums;font-family:var(--font-display);font-size:17px}
.kpi span{font-size:12.5px;color:var(--ink-2)}
.kpi .pct{font-size:11px;color:var(--ink-3);width:44px;text-align:right}

.chart-tabs{display:flex;gap:4px;background:var(--glass);padding:3px;border-radius:999px}
.chart-tabs button{padding:5px 12px;border-radius:999px;font-size:12px;color:var(--ink-3);font-weight:600}
.chart-tabs button.on{background:var(--panel-3);color:var(--ink)}
.chart-box{width:100%;height:230px}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--ink-2)}
.chart-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}

.charge{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line-soft);margin-bottom:9px}
.charge .ci{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--panel-3);flex:none}
.charge b{display:block;font-family:var(--font-display);font-size:17px;font-variant-numeric:tabular-nums}
.charge small{color:var(--ink-3);font-size:11px}
.charge .meta{margin-left:auto;text-align:right}

/* ---------- Tables ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.panel-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel-h h3{font-size:15px;flex:none}
.panel-h .grow{flex:1;min-width:180px}
.search{position:relative;flex:1;min-width:200px}
.search input{padding-left:36px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tools select{min-width:140px}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{position:sticky;top:0;background:var(--panel-2);text-align:left;padding:11px 14px;font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.04em;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr{transition:background var(--speed)}
tbody tr:hover{background:var(--glass)}
tbody tr:last-child td{border-bottom:0}
td .ref{font-family:var(--font-code);font-weight:500;font-size:12.5px}
td .sub{color:var(--ink-3);font-size:11.5px;display:block}
.empty{padding:52px 20px;text-align:center;color:var(--ink-3)}
.empty h4{color:var(--ink-2);font-size:15px;margin-bottom:6px}

.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.t-process{background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info);border-color:color-mix(in srgb,var(--info) 32%,transparent)}
.t-delivered{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.t-completed{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.t-motion{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.t-neutral{background:var(--glass);color:var(--ink-2);border-color:var(--line)}
.t-alert{background:color-mix(in srgb,var(--bad) 16%,transparent);color:#fca5a5;border-color:color-mix(in srgb,var(--bad) 34%,transparent)}
.t-motion i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blip 1.4s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

.bar{height:7px;border-radius:99px;background:var(--glass);overflow:hidden;min-width:110px;border:1px solid var(--line-soft)}
.bar i{display:block;height:100%;border-radius:99px;background:var(--pop);transition:width .6s cubic-bezier(.4,0,.2,1)}
.bar-wrap{display:flex;align-items:center;gap:10px}
.bar-wrap span{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;width:34px}

/* phase rail inside table */
.phase-rail{display:flex;align-items:center;gap:0;min-width:150px}
.phase-rail .node{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;font-size:8px;background:var(--panel)}
.phase-rail .node.done{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.phase-rail .node.now{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.phase-rail .link{height:2px;flex:1;background:var(--line)}
.phase-rail .link.done{background:var(--accent)}

/* ---------- Wizard ---------- */
.wiz-head{display:flex;gap:6px;padding:18px;overflow-x:auto;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.step{flex:1;min-width:148px;text-align:left;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line-soft);background:var(--panel);opacity:.6;transition:all var(--speed);position:relative}
.step .n{width:22px;height:22px;border-radius:7px;background:var(--panel-3);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.step b{display:block;font-size:12.5px;font-family:var(--font-body);font-weight:600}
.step small{font-size:10.5px;color:var(--ink-3)}
.step.done{opacity:1;border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.step.done .n{background:var(--accent);color:var(--accent-ink)}
.step.on{opacity:1;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.step.on .n{background:var(--pop);color:var(--accent-ink)}
.step.locked{cursor:not-allowed}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 16px;padding:20px}
.form-grid .full{grid-column:1/-1}
.wiz-foot{display:flex;gap:10px;align-items:center;padding:16px 20px;border-top:1px solid var(--line-soft);background:var(--panel-2);flex-wrap:wrap}
.wiz-foot .msg{font-size:12.5px;color:var(--ink-3);flex:1;min-width:160px}
.lock-note{display:flex;gap:10px;align-items:flex-start;margin:0 20px 4px;padding:11px 14px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-2)}

/* ---------- Modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(4,9,13,.66);backdrop-filter:blur(3px);z-index:80;display:none;padding:24px;overflow-y:auto}
.scrim.on{display:grid;place-items:start center}
.modal{width:min(720px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);margin:auto;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line-soft)}
.modal-h h3{flex:1;font-size:17px}
.modal-b{padding:20px}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--line-soft);background:var(--panel-2);border-radius:0 0 var(--r-xl) var(--r-xl)}
.x{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3)}
.x:hover{background:var(--glass);color:var(--ink)}

/* detail sheet */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.dl div{min-width:0}
.dl dt{font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:3px}
.dl dd{margin:0;font-size:13.5px;word-break:break-word}
.sec-title{font-size:12px;font-weight:700;color:var(--accent);margin:22px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line-soft);font-family:var(--font-display);letter-spacing:.03em}
.sec-title:first-child{margin-top:0}

/* toast */
.toasts{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--shadow);font-size:13px;max-width:330px;animation:slide .24s ease}
.toast.bad{border-left-color:var(--bad)}
@keyframes slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* reports */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.rep{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:12px}
.rep h4{font-size:14.5px}
.rep p{margin:0;color:var(--ink-2);font-size:12.5px;flex:1}
.rep .n{font-family:var(--font-display);font-size:28px;font-variant-numeric:tabular-nums}
.rep .acts{display:flex;gap:8px}
.db-note{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r-lg);border:1px dashed var(--line);background:var(--glass);margin-bottom:16px}


/* ---------- Seasonal background canvas ---------- */
#season-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:75;pointer-events:none;
  opacity:0;transition:opacity .6s ease}
#season-canvas.on{opacity:var(--season-op,.6)}
@media print{#season-canvas{display:none!important}}

/* ---------- extra settings controls ---------- */
.sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .track{width:42px;height:24px;border-radius:999px;background:var(--panel-3);border:1px solid var(--line);position:relative;transition:background var(--speed),border-color var(--speed);flex:none}
.sw .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ink-3);transition:transform var(--speed),background var(--speed)}
.sw input:checked+.track{background:color-mix(in srgb,var(--accent) 28%,transparent);border-color:var(--accent)}
.sw input:checked+.track::after{transform:translateX(18px);background:var(--accent)}
.sw input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}
.rng{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--panel-3);border:1px solid var(--line);width:100%;max-width:260px}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);cursor:pointer}
.rng::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);cursor:pointer}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.ev{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);padding:11px 12px;display:flex;flex-direction:column;gap:5px}
.ev.live{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.ev .ev-top{display:flex;align-items:center;gap:8px}
.ev .ev-em{font-size:19px;line-height:1}
.ev .ev-n{font-size:13px;font-weight:700}
.ev .ev-d{font-size:11px;color:var(--ink-3)}
.ev .ev-a{margin-top:4px;display:flex;gap:6px;align-items:center}
.howto{border:1px dashed var(--line);border-radius:var(--r-md);background:var(--glass);padding:0 14px;margin-top:14px}
.howto>summary{cursor:pointer;padding:13px 0;font-weight:700;font-size:13px;list-style:none;display:flex;align-items:center;gap:9px}
.howto>summary::-webkit-details-marker{display:none}
.howto>summary::before{content:"+";font-family:var(--font-code);color:var(--accent);font-size:15px;width:14px}
.howto[open]>summary::before{content:"\2212"}
.howto .in{padding:0 0 14px;border-top:1px solid var(--line-soft);margin-top:-1px;padding-top:13px}
.howto ol{margin:0 0 12px;padding-left:20px;font-size:12.5px;color:var(--ink-2);line-height:1.65}
.howto li{margin-bottom:5px}
.howto code{font-family:var(--font-code);font-size:11.5px;background:var(--panel-3);padding:1px 5px;border-radius:4px;color:var(--ink)}
.howto pre{margin:0 0 12px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px;overflow-x:auto}
.howto pre code{background:none;padding:0;font-size:11.5px;line-height:1.6;display:block;white-space:pre;color:var(--ink-2)}

/* ---------- Settings ---------- */
.set-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.set-head h3{font-size:15px}
.set-head p{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);max-width:72ch}
.set-body{padding:18px}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.opt{position:relative;display:block;width:100%;text-align:left;padding:10px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel-2);transition:border-color var(--speed),transform var(--speed),background var(--speed)}
.opt:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-2px)}
.opt.on{border-color:var(--accent);background:var(--panel-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.opt .opt-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-top:10px}
.opt .opt-note{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.opt .tick2{margin-left:auto;color:var(--accent);opacity:0;flex:none;transition:opacity var(--speed)}
.opt.on .tick2{opacity:1}
.opt .now{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:1px 7px}

/* theme preview tile — a miniature of the shell */
.tp{height:74px;border-radius:var(--r-md);border:1px solid var(--line-soft);overflow:hidden;display:flex}
.tp .tp-rail{width:26%;height:100%}
.tp .tp-main{flex:1;padding:7px;display:flex;flex-direction:column;gap:5px}
.tp .tp-bar{height:13px;border-radius:4px}
.tp .tp-row{height:6px;border-radius:3px;opacity:.55}
.tp .tp-chips{display:flex;gap:4px;margin-top:auto}
.tp .tp-chip{height:9px;flex:1;border-radius:3px}

/* font preview tile */
.fp{display:block;border-radius:var(--r-md);border:1px solid var(--line-soft);background:var(--panel);padding:11px 12px;min-height:74px}
.fp .fp-h{display:block;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.fp .fp-b{display:block;font-family:var(--font-body);font-size:12px;color:var(--ink-2);margin-top:3px}
.fp .fp-m{display:block;font-family:var(--font-code);font-size:11.5px;color:var(--accent);margin-top:5px;letter-spacing:-.02em}
.set-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line-soft);background:var(--glass)}
.live{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.live .lv{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--glass);padding:13px}
.live .lv small{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;font-weight:700;margin-bottom:6px}
.live .lv b{font-family:var(--font-display);font-size:24px;font-variant-numeric:tabular-nums;display:block}

/* misc layout helpers */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.mb{margin-bottom:16px}
.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:start}
.seg{display:flex;background:var(--glass);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:3px;gap:3px}
.seg button{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;color:var(--ink-3)}
.seg button.on{background:var(--panel-3);color:var(--ink)}
.alert-dot{width:7px;height:7px;border-radius:50%;background:var(--bad);display:inline-block;margin-left:6px;vertical-align:middle}

@media(max-width:1180px){
  .grid-top{grid-template-columns:1fr 1fr}
  .grid-top .card:nth-child(2){grid-column:1/-1;order:3}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:920px){
  .app.on{grid-template-columns:1fr}
  .rail{position:fixed;z-index:70;width:270px;left:0;top:0;transform:translateX(-102%);transition:transform .26s ease;box-shadow:var(--shadow)}
  .rail.open{transform:none}
  .burger{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.16);color:#fff;flex:none}
  .main{padding:14px}
  .login-wrap{grid-template-columns:1fr}
  .login-art{padding:32px;min-height:auto}
  .grid-top{grid-template-columns:1fr}
  .grid-top .card:nth-child(2){order:0}
  .topbar h1{font-size:18px}
}
@media(max-width:620px){
  .clock b{font-size:13px}
  .form-grid{padding:16px;grid-template-columns:1fr}
  .modal-f{flex-direction:column-reverse}
  .modal-f .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media print{
  .rail,.topbar,.tools,.panel-h .btn,.no-print{display:none!important}
  body{background:#fff;color:#000}
  .app,.app.on{display:block;background:#fff}
  .main{padding:0}
  .panel,.card{border:1px solid #bbb;background:#fff;color:#000;border-radius:0}
  table{font-size:10.5px}
  thead th{background:#eee;color:#000}
  .print-head{display:block!important;margin-bottom:14px}
}
.print-head{display:none}
#print-report{display:none}
body.printing .app{display:none!important}
body.printing #print-report{display:block;font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;padding:18px}
body.printing #print-report table{width:100%;border-collapse:collapse;font-size:8.6px}
body.printing #print-report th{background:#164e63;color:#fff;text-align:left;padding:5px 6px;border:1px solid #0e3a4a}
body.printing #print-report td{padding:4px 6px;border:1px solid #cfd8dd}

/* ============================================================
   ADDITIONS — v2
   Drill-down cards, activity timeline, permission table, locked
   fields, inline "add new" rows and the smoother search controls.
   Everything below reuses the existing design tokens, so all six
   themes and all seven font presets pick it up for free.
   ============================================================ */

/* ---------- clickable status breakdown on the Total shipments card ---------- */
.kpi-list .kpi{width:100%;text-align:left;font:inherit;cursor:pointer}
.kpi-list button.kpi:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--panel-3)}
.kpi-list button.kpi:hover .kpi-chev{opacity:1;transform:none}
.kpi-chev{color:var(--accent);opacity:0;transform:translateX(-4px);flex:none;
  transition:opacity var(--speed),transform var(--speed)}
.kpi-hint{font-size:11px;color:var(--ink-3);margin-top:9px;text-align:center}
.drill-scroll{max-height:52vh;overflow:auto;border:1px solid var(--line-soft);border-radius:var(--r-md)}

/* ---------- search field: clear button + result counter ---------- */
.search{position:relative}
.search input{padding-right:34px}
.search-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-3);font-size:17px;line-height:1;background:var(--panel-3)}
.search-x:hover{color:var(--ink);background:var(--line)}
.search-x[hidden]{display:none}
.count-chip{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  padding:0 4px;white-space:nowrap}
.act-cell{white-space:nowrap;display:flex;gap:6px;align-items:center;justify-content:flex-end}
.cbadge{display:inline-block;margin-left:6px;background:var(--panel-3);color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:700;padding:0 6px}
.more-note{padding:12px 16px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line-soft)}

/* ---------- role chip ---------- */
.role-chip{gap:6px}
.role-note{border:1px dashed var(--line);border-radius:var(--r-md);background:var(--glass);
  padding:11px 13px;font-size:12.5px;color:var(--ink-2);margin-bottom:14px}
.role-note b{color:var(--ink)}
.role-note code{font-family:var(--font-code);font-size:11.5px;background:var(--panel-3);
  padding:1px 5px;border-radius:4px}

/* ---------- locked / read-only form fields ---------- */
.field.is-locked>label{color:var(--ink-3)}
.field.is-locked .ctl{background:var(--bg-2);color:var(--ink-3);cursor:not-allowed;
  border-style:dashed}
.lockpill{margin-left:7px;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  border-radius:999px;padding:1px 6px;vertical-align:1px}
.ro-val{padding:10px 12px;border-radius:var(--r-sm);border:1px dashed var(--line);
  background:var(--bg-2);color:var(--ink-2);font-size:13.5px;min-height:41px}
.lock-note.ro{border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}

/* ---------- inline "+ Add new…" row under a dropdown ---------- */
select.ctl option.opt-add{color:var(--accent);font-weight:600}
.addnew{display:flex;gap:7px;margin-top:8px;padding:9px;border-radius:var(--r-sm);
  border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);
  animation:fade .18s ease}
.addnew input{flex:1;min-width:0;padding:7px 10px}
.addnew .btn{flex:none}

/* ---------- wide modal ---------- */
.modal.wide{width:min(1000px,100%)}

/* ---------- activity timeline (History + user sheet) ---------- */
.tl{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-i{position:relative;padding:0 0 18px}
.tl-i:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%;
  background:var(--panel);border:2px solid var(--line-soft);box-shadow:0 0 0 3px var(--panel)}
.tl-i.edit .tl-dot{background:var(--accent);border-color:var(--accent)}
.tl-head{display:flex;align-items:baseline;gap:10px}
.tl-head b{font-size:13.5px;font-family:var(--font-body);font-weight:600}
.tl-when{margin-left:auto;font-size:11px;color:var(--ink-3);white-space:nowrap}
.tl-meta{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.tl-role{color:var(--accent)}
.tl-detail{font-size:12.5px;color:var(--ink-2);margin-top:5px}
.tl.compact .tl-i{padding-bottom:13px}
.tl-diff{width:100%;margin-top:9px;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  overflow:hidden;font-size:12px}
.tl-diff th{background:var(--panel-2);padding:6px 10px;font-size:10.5px;position:static}
.tl-diff td{padding:6px 10px;border-bottom:1px solid var(--line-soft)}
.tl-diff .was{color:var(--ink-3);text-decoration:line-through}
.tl-diff .now{color:var(--accent);font-weight:600}

/* ---------- permission matrix ---------- */
.perm-tbl td{vertical-align:top}
.perm-tbl tr.me{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pcell{display:inline-block;font-size:11.5px;border-radius:999px;padding:2px 9px;
  border:1px solid transparent;white-space:nowrap}
.pcell.ok  {background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);
            border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.pcell.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn);
            border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.pcell.no  {background:var(--glass);color:var(--ink-3);border-color:var(--line)}

/* ---------- system logs ---------- */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel-2);font-size:12px;font-weight:600;
  color:var(--ink-2);transition:border-color var(--speed),color var(--speed)}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{border-color:var(--accent);background:var(--panel-3);color:var(--ink)}
.chip b{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-3);
  background:var(--glass);border-radius:999px;padding:0 6px}
.chip.on b{color:var(--accent)}
.chip-av{width:22px;height:22px;border-radius:50%;background:var(--pop);color:var(--accent-ink);
  display:grid;place-items:center;font-size:9.5px;font-weight:800;font-family:var(--font-display);flex:none}
.chip.clear{padding-left:11px;color:var(--ink-3)}
.log-tbl td{vertical-align:top}
.log-tbl .avatar{flex:none}

@media(max-width:920px){
  .act-cell{justify-content:flex-start;flex-wrap:wrap}
  .modal.wide{width:100%}
}
@media print{
  .search-x,.count-chip,.kpi-chev,.chips,.act-cell{display:none!important}
}

/* Account request UI */
.new-user-cta{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:18px;text-align:center}.new-user-cta p{margin:0 0 8px;color:var(--ink-2);font-size:13px}.new-user-cta small{display:block;margin-top:10px;color:var(--ink-3);font-size:11px}.notice-line{margin:0 0 18px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--r-sm);background:var(--glass);color:var(--ink-2);font-size:12px}

/* Shipment column sort controls */
.th-sort{border:0;background:transparent;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;padding:0;cursor:pointer;text-align:left;white-space:nowrap}
.th-sort:hover{color:var(--accent)}

/* ============================================================
   START-UP
   While app.js checks for a saved session, neither the sign-in page
   nor the portal is shown — a refresh goes straight back to where you
   were. If start-up ever stalls, the sign-in page appears after 10s.
   ============================================================ */
body.booting{background:var(--bg)}
body.booting .login-wrap{visibility:hidden;animation:boot-failsafe 0s linear 10s forwards}
body.booting .app{visibility:hidden}
body.booting::after{
  content:"";position:fixed;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);
  animation:boot-spin .8s linear infinite, boot-hide 0s linear 10s forwards;
}
@keyframes boot-spin{to{transform:rotate(360deg)}}
@keyframes boot-failsafe{to{visibility:visible}}
@keyframes boot-hide{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){ body.booting::after{animation:boot-hide 0s linear 10s forwards} }