/* ==========================================================================
   MODIT NATIONS — Design System v2 (v1.5.0)
   Layered ON TOP of style.css: every existing class keeps working, this
   file restyles them. Nothing is renamed, so all 79 templates upgrade at
   once without being rewritten.
   ========================================================================== */

/* ---------- 1 · tokens ------------------------------------------------ */
:root{
  /* brand — royal blue + gold, refined */
  --royal:#2A4FD7; --royal-dark:#101A3D; --royal-mid:#1E3A8A;
  --royal-soft:#EEF2FF; --royal-ring:rgba(42,79,215,.35);
  --gold:#C79A2E; --gold-bright:#E3B93F; --gold-soft:#FEF6E0;

  /* surfaces */
  --bg:#F6F8FC; --bg-deep:#EEF2F9;
  --card:#FFFFFF; --card-2:#FBFCFE;
  --ink:#111827; --ink-2:#374151; --muted:#6B7280; --muted-2:#9AA3B2;
  --line:#E5EAF2; --line-2:#EDF1F7;

  /* semantic */
  --ok:#0F766E; --ok-bg:#D7F5EF; --err:#B4232B; --err-bg:#FDE7E9;
  --warn:#9A6700; --warn-bg:#FEF3C7; --info:#1D4ED8; --info-bg:#DBEAFE;

  /* elevation — soft, layered, never harsh */
  --sh-1:0 1px 2px rgba(16,26,61,.05), 0 1px 3px rgba(16,26,61,.04);
  --sh-2:0 2px 6px rgba(16,26,61,.06), 0 6px 16px rgba(16,26,61,.06);
  --sh-3:0 8px 20px rgba(16,26,61,.10), 0 20px 44px rgba(16,26,61,.10);
  --sh-pop:0 12px 32px rgba(16,26,61,.16), 0 30px 60px rgba(16,26,61,.14);

  /* geometry */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.14s; --t:.22s; --t-slow:.42s;

  /* type */
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --sidebar-w:264px;
}

body[data-theme="dark"]{
  --royal:#6C8CFF; --royal-dark:#0B1020; --royal-mid:#24356B;
  --royal-soft:#1A2444; --royal-ring:rgba(108,140,255,.4);
  --gold:#E3B93F; --gold-bright:#F3CE5C; --gold-soft:#2A2412;
  --bg:#0B1020; --bg-deep:#070B16;
  --card:#141B2E; --card-2:#182036;
  --ink:#E8EDF7; --ink-2:#C7D0E2; --muted:#94A0B8; --muted-2:#6F7C96;
  --line:#26304A; --line-2:#1E2740;
  --ok:#4ADEC0; --ok-bg:#0E2E2A; --err:#FF8A93; --err-bg:#3A1418;
  --warn:#F0C05A; --warn-bg:#332813; --info:#8FB0FF; --info-bg:#16264C;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.45);
  --sh-3:0 10px 26px rgba(0,0,0,.5);
  --sh-pop:0 16px 40px rgba(0,0,0,.6);
}

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

/* ---------- 2 · base -------------------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(42,79,215,.07), transparent 60%),
    radial-gradient(900px 460px at 102% 0%, rgba(199,154,46,.08), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.006em;
}
h1{font-size:clamp(21px,2.4vw,27px);font-weight:700;letter-spacing:-.025em;
   margin:0 0 6px;color:var(--ink)}
h2{font-size:17px;font-weight:650;letter-spacing:-.018em;color:var(--ink);
   margin:24px 0 12px;border-bottom:none;padding-bottom:0;
   display:flex;align-items:center;gap:9px}
h2::before{content:"";width:3px;height:16px;border-radius:2px;
   background:linear-gradient(180deg,var(--royal),var(--gold-bright));flex:none}
h3{font-size:14.5px;font-weight:640;margin:16px 0 7px;letter-spacing:-.012em}
a{color:var(--royal);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--royal-mid)}
.subtitle{color:var(--muted);font-size:13.5px;margin-bottom:20px;max-width:74ch;line-height:1.6}
.muted{color:var(--muted)}
::selection{background:var(--royal-ring);color:inherit}

:focus-visible{outline:2px solid var(--royal);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--royal);
  color:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0;font-size:14px}
.skip-link:focus{left:0}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted-2);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- 3 · app shell -------------------------------------------- */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex-shrink:0;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:linear-gradient(178deg,var(--royal-dark) 0%,#16224A 52%,#101A3D 100%);
  color:#DCE4F5;border-right:1px solid rgba(255,255,255,.07);
  box-shadow:var(--sh-2);z-index:60;
}
body[data-theme="dark"] .sidebar{
  background:linear-gradient(178deg,#0C1428 0%,#101A34 60%,#0A1120 100%)}

.brand{display:flex;gap:11px;align-items:center;padding:17px 16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(140deg,var(--royal) 0%,#4B6FE8 55%,var(--gold) 100%);
  border:1.5px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#fff;letter-spacing:.5px;
  box-shadow:0 4px 14px rgba(42,79,215,.45);
}
.brand-name{font-weight:700;font-size:13px;letter-spacing:.5px;color:#fff}
.brand-sub{font-size:11px;color:#93A5D4;letter-spacing:.3px}

.sidebar nav,.main-nav{padding:12px 10px;flex:1;overflow-y:auto}
.sidebar nav a,.main-nav a{
  display:flex;align-items:center;gap:10px;
  color:#C3CFE8;padding:9.5px 12px;border-radius:var(--r-sm);
  margin:2px 0;font-size:14px;font-weight:500;position:relative;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.sidebar nav a:hover,.main-nav a:hover{
  background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}
.sidebar nav a.active,.main-nav a.active{
  background:linear-gradient(90deg,rgba(42,79,215,.55),rgba(42,79,215,.18));
  color:#fff;font-weight:640}
.sidebar nav a.active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--gold-bright)}
.nav-sep{font-size:10px;letter-spacing:1.3px;color:#7E8FBB;
  margin:16px 12px 5px;text-transform:uppercase;font-weight:650}

.sidebar-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.user-chip{font-size:13px;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-sm);padding:9px 11px;margin-bottom:9px;line-height:1.4}
.user-chip small{color:#9FB0D8}
.sidebar .ghost,a.ghost{display:block;color:#B9C6E2;font-size:13px;padding:7px 11px;
  border-radius:var(--r-xs);transition:background var(--t-fast) var(--ease)}
.sidebar .ghost:hover,a.ghost:hover{background:rgba(255,255,255,.08);color:#fff}

.main{flex:1;min-width:0;padding:26px 30px 68px;position:relative;animation:pageIn .3s var(--ease-out)}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.sidebar-hide{display:none;margin:10px 12px 0;background:rgba(255,255,255,.09);
  color:#DCE4F5;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xs);
  padding:8px 11px;font-size:12.5px;cursor:pointer;transition:background var(--t-fast)}
.sidebar-hide:hover{background:rgba(255,255,255,.16)}
.theme-toggle{margin-top:10px;background:rgba(255,255,255,.09);color:#DCE4F5;
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xs);
  width:36px;height:32px;font-size:15px;cursor:pointer;transition:all var(--t-fast)}
.theme-toggle:hover{background:rgba(255,255,255,.18);transform:rotate(18deg)}

/* ---------- 4 · surfaces --------------------------------------------- */
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;margin:0 0 20px;box-shadow:var(--sh-1);
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.panel:hover{box-shadow:var(--sh-2)}
.panel > h2:first-child,.panel > h3:first-child{margin-top:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:15px;margin:18px 0}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease);
}
.stat::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--royal),var(--gold-bright));opacity:.85}
.stat:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.stat span{display:block;font-size:12px;color:var(--muted);font-weight:520;
  letter-spacing:.02em;margin-bottom:5px}
.stat b{display:block;font-size:27px;font-weight:730;color:var(--ink);
  letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat.gold b{color:var(--gold)}

/* ---------- 5 · buttons ---------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(180deg,var(--royal),#2445BE);
  color:#fff;border:none;border-radius:var(--r-sm);
  padding:9.5px 17px;font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,26,61,.14),0 2px 8px rgba(42,79,215,.22);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             filter var(--t-fast) var(--ease);
  text-decoration:none;line-height:1.3;
}
.btn:hover{transform:translateY(-1.5px);color:#fff;
  box-shadow:0 3px 8px rgba(16,26,61,.16),0 8px 22px rgba(42,79,215,.3);filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.985)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
    rgba(255,255,255,.42),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease)}
.btn:active::after{opacity:1;transition:none}
.btn[disabled],.btn.disabled{opacity:.55;pointer-events:none;filter:grayscale(.35)}

.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#20180A;
  box-shadow:0 1px 2px rgba(16,26,61,.14),0 2px 8px rgba(199,154,46,.32)}
.btn-gold:hover{color:#20180A;box-shadow:0 3px 8px rgba(16,26,61,.16),0 8px 22px rgba(199,154,46,.4)}
.btn-danger{background:linear-gradient(180deg,#D33C43,#A81F27);
  box-shadow:0 1px 2px rgba(16,26,61,.14),0 2px 8px rgba(180,35,43,.28)}
.btn-plain{background:var(--card);color:var(--royal);border:1.5px solid var(--line);
  box-shadow:var(--sh-1)}
.btn-plain:hover{background:var(--royal-soft);border-color:var(--royal);color:var(--royal)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:var(--r-xs)}
.btn-lg{padding:13px 26px;font-size:15.5px;border-radius:var(--r)}

/* ---------- 6 · forms ------------------------------------------------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);
  margin:0 0 5px;letter-spacing:.01em}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=time],input[type=search],input[type=tel],
input[type=url],select,textarea{
  width:100%;background:var(--card);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:9.5px 12px;font-size:14px;font-family:inherit;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
input:hover:not([disabled]),select:hover:not([disabled]),textarea:hover:not([disabled]){
  border-color:var(--muted-2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--royal);box-shadow:0 0 0 3.5px var(--royal-ring)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
textarea{resize:vertical;min-height:78px;line-height:1.55}
select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--royal);
  width:16px;height:16px;cursor:pointer}
input[type=color]{width:52px;height:36px;padding:3px;cursor:pointer}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:15px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:15px}

/* ---------- 7 · tables ------------------------------------------------ */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;
  background:var(--card);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line)}
.table thead th{
  background:var(--bg-deep);color:var(--ink-2);font-size:11.5px;font-weight:680;
  text-transform:uppercase;letter-spacing:.055em;text-align:left;
  padding:11px 13px;border-bottom:1.5px solid var(--line);
  position:sticky;top:0;z-index:2;white-space:nowrap}
.table td{padding:11px 13px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr{transition:background var(--t-fast) var(--ease)}
.table tbody tr:hover{background:var(--royal-soft)}
.table tbody tr:last-child td{border-bottom:none}
.table-wrap,.tbl-scroll{overflow-x:auto;border-radius:var(--r);-webkit-overflow-scrolling:touch}

/* ---------- 8 · feedback ---------------------------------------------- */
.flash{
  padding:12px 16px;border-radius:var(--r-sm);margin:0 0 14px;font-size:13.5px;
  border:1px solid transparent;display:flex;align-items:flex-start;gap:10px;
  box-shadow:var(--sh-1);animation:flashIn .34s var(--ease-out);font-weight:520;
}
@keyframes flashIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.flash-ok,.flash-success{background:var(--ok-bg);color:var(--ok);border-color:rgba(15,118,110,.24)}
.flash-error,.flash-err{background:var(--err-bg);color:var(--err);border-color:rgba(180,35,43,.24)}
.flash-info{background:var(--info-bg);color:var(--info);border-color:rgba(29,78,216,.22)}
.flash-warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(154,103,0,.24)}
.flash::before{font-size:15px;line-height:1.35}
.flash-ok::before,.flash-success::before{content:"✓"}
.flash-error::before,.flash-err::before{content:"✕"}
.flash-info::before{content:"ℹ"}
.flash-warn::before{content:"⚠"}

.badge,.pill{display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:650;
  letter-spacing:.02em;background:var(--bg-deep);color:var(--ink-2);
  border:1px solid var(--line)}
.badge.ok,.pill.ok,.badge.good{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.badge.err,.pill.err,.badge.bad{background:var(--err-bg);color:var(--err);border-color:transparent}
.badge.warn,.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}

/* skeleton loading */
.skeleton{position:relative;overflow:hidden;background:var(--line-2);
  border-radius:var(--r-xs);color:transparent!important}
.skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:shimmer 1.4s infinite}
body[data-theme="dark"] .skeleton::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent)}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-line{height:12px;margin:8px 0;border-radius:6px}
.sk-line.w60{width:60%}.sk-line.w40{width:40%}.sk-line.w80{width:80%}

/* progress */
.progress{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}
.progress>i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--royal),var(--gold-bright));
  transition:width .7s var(--ease-out)}

/* empty states */
.empty{text-align:center;padding:48px 24px;color:var(--muted)}
.empty .ico{font-size:44px;display:block;margin-bottom:12px;opacity:.75;
  animation:floaty 4.5s var(--ease) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.empty h3{color:var(--ink);margin:0 0 6px;font-size:16px}
.empty p{margin:0 auto 16px;max-width:44ch;font-size:13.5px;line-height:1.6}

/* ---------- 9 · toasts ------------------------------------------------ */
.toast-host{position:fixed;right:20px;bottom:20px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(380px,92vw)}
.toast{
  pointer-events:auto;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-left:3.5px solid var(--royal);
  border-radius:var(--r-sm);padding:12px 15px;font-size:13.5px;
  box-shadow:var(--sh-pop);animation:toastIn .34s var(--ease-out);
  display:flex;align-items:flex-start;gap:10px;
}
.toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--err)}
.toast.warn{border-left-color:var(--warn)}
.toast.out{animation:toastOut .26s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(28px) scale(.96)}}

/* ---------- 10 · login / splash --------------------------------------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(42,79,215,.30), transparent 58%),
    radial-gradient(760px 520px at 88% 92%, rgba(199,154,46,.24), transparent 55%),
    linear-gradient(150deg,#0C1430 0%,#16224A 48%,#0B1226 100%);
  position:relative;overflow:hidden;
}
.login-wrap::before,.login-wrap::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;
  animation:drift 17s var(--ease) infinite alternate}
.login-wrap::before{width:440px;height:440px;background:#2A4FD7;top:-130px;left:-110px}
.login-wrap::after{width:380px;height:380px;background:#C79A2E;bottom:-120px;right:-90px;
  animation-delay:-8s}
@keyframes drift{to{transform:translate(58px,42px) scale(1.14)}}

.login-card{
  position:relative;z-index:1;width:100%;max-width:414px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-xl);padding:38px 34px;
  box-shadow:0 26px 64px rgba(0,0,0,.34),0 2px 0 rgba(255,255,255,.6) inset;
  animation:cardRise .6s var(--ease-out);
}
body[data-theme="dark"] .login-card{background:rgba(20,27,46,.95);
  border-color:rgba(255,255,255,.11)}
@keyframes cardRise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.login-mark{
  width:60px;height:60px;margin:0 auto 16px;border-radius:17px;
  background:linear-gradient(140deg,var(--royal) 0%,#4B6FE8 52%,var(--gold) 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:20px;letter-spacing:.6px;
  box-shadow:0 10px 26px rgba(42,79,215,.44);animation:markPop .55s var(--ease-out) .1s both}
@keyframes markPop{from{opacity:0;transform:scale(.7) rotate(-10deg)}to{opacity:1;transform:none}}
.login-card h1{text-align:center;font-size:22px;margin:0 0 3px;letter-spacing:-.02em}
.login-card .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:22px}
.login-card label{margin-top:13px}
.login-card .btn{width:100%;margin-top:18px;padding:12px}
.login-note{margin-top:18px;font-size:12px;color:var(--muted);text-align:center;line-height:1.65}

/* splash */
#mn-splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:20px;
  background:linear-gradient(150deg,#0C1430,#16224A 52%,#0B1226);
  animation:splashOut .5s var(--ease) 1.05s forwards}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
.splash-mark{width:74px;height:74px;border-radius:21px;
  background:linear-gradient(140deg,var(--royal),#4B6FE8 52%,var(--gold));
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-weight:800;font-size:25px;letter-spacing:.6px;
  box-shadow:0 14px 40px rgba(42,79,215,.5);animation:markPop .5s var(--ease-out)}
.splash-bar{width:168px;height:3px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.splash-bar>i{display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--royal),var(--gold-bright));animation:splashRun 1.1s var(--ease) infinite}
@keyframes splashRun{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.splash-name{color:#DCE4F5;font-size:13px;letter-spacing:2.6px;font-weight:600;text-transform:uppercase}

/* ---------- 11 · misc legacy classes ---------------------------------- */
.dash-welcome{margin-bottom:20px}
.eyebrow{font-size:10.5px;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--royal);font-weight:700;margin:0 0 4px}
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;margin:18px 0}
.area-card{
  display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  box-shadow:var(--sh-1);color:inherit;position:relative;overflow:hidden;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.area-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--royal),var(--gold-bright));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease-out)}
.area-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--royal)}
.area-card:hover::before{transform:scaleX(1)}
.area-icon{font-size:27px;line-height:1;flex:none;
  width:48px;height:48px;border-radius:var(--r);background:var(--royal-soft);
  display:flex;align-items:center;justify-content:center}
.area-card b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:3px;letter-spacing:-.014em}
.area-card small{display:block;color:var(--muted);font-size:12.8px;line-height:1.55;margin-bottom:9px}
.area-card em{font-style:normal;font-size:12.5px;color:var(--royal);font-weight:640}

.tool-card{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:17px 18px;box-shadow:var(--sh-1);color:inherit;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease)}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--royal)}

.foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px;text-align:center}

.ai-fab{
  position:fixed;right:22px;bottom:22px;z-index:80;
  background:linear-gradient(135deg,var(--royal),#4B6FE8 60%,var(--gold));
  color:#fff;border-radius:var(--r-pill);padding:12px 20px;font-size:14px;
  font-weight:650;box-shadow:0 8px 26px rgba(42,79,215,.45);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease)}
.ai-fab:hover{transform:translateY(-3px) scale(1.03);color:#fff;
  box-shadow:0 14px 36px rgba(42,79,215,.55)}
.ai-fab::before{content:"";width:7px;height:7px;border-radius:50%;background:#7CF5C4;
  box-shadow:0 0 0 0 rgba(124,245,196,.75);animation:pulse 2.1s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(124,245,196,0)}100%{box-shadow:0 0 0 0 rgba(124,245,196,0)}}

/* ---------- 12 · responsive ------------------------------------------- */
@media (max-width:1024px){
  .main{padding:22px 20px 60px}
  :root{--sidebar-w:236px}
}
@media (max-width:820px){
  .main{padding:15px 15px 56px;width:100%}
  .panel{padding:17px 16px;border-radius:var(--r)}
  h1{font-size:20px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:11px}
  .stat b{font-size:22px}
  .area-grid{grid-template-columns:1fr}
  .table{font-size:12.8px}
  .table thead th,.table td{padding:9px 10px}
  .ai-fab{right:14px;bottom:14px;padding:11px 16px;font-size:13px}
  .toast-host{right:12px;left:12px;bottom:12px;max-width:none}
}
@media (max-width:480px){
  body{font-size:14.5px}
  .main{padding:60px 12px 50px}
  .login-card{padding:28px 22px}
  .btn{padding:9px 15px}
}

@media print{
  .sidebar,.sidebar-reveal,.ai-fab,.foot,.toast-host,.flash,
  .btn,.tt-actions,.tt-filters,#mn-splash,.cmdk-backdrop{display:none!important}
  .main{padding:0}
  .panel{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  body{background:#fff}
}

/* ---------- 13 · command palette (Ctrl+K) ------------------------------ */
.cmdk-backdrop[hidden]{display:none}
.cmdk-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(9,14,30,.55);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:flex;align-items:flex-start;justify-content:center;padding:11vh 16px 16px;
  animation:fadeIn .16s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
body.cmdk-open{overflow:hidden}
.cmdk{width:100%;max-width:640px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-pop);overflow:hidden;
  animation:cmdkIn .26s var(--ease-out);display:flex;flex-direction:column;max-height:74vh}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-14px) scale(.975)}to{opacity:1;transform:none}}
.cmdk-top{display:flex;align-items:center;gap:11px;padding:15px 18px;
  border-bottom:1px solid var(--line)}
.cmdk-ico{font-size:16px;opacity:.65;flex:none}
.cmdk-input{flex:1;border:none!important;background:transparent!important;
  font-size:16px;padding:0!important;box-shadow:none!important;color:var(--ink)}
.cmdk-input:focus{outline:none;box-shadow:none!important}
.cmdk-esc,.cmdk-foot kbd{font-family:var(--mono);font-size:10.5px;
  background:var(--bg-deep);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:2px 6px;color:var(--muted)}
.cmdk-list{overflow-y:auto;padding:7px;flex:1;min-height:88px}
.cmdk-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-2);font-weight:700;padding:11px 11px 5px}
.cmdk-row{display:flex;align-items:center;gap:12px;padding:9px 11px;
  border-radius:var(--r-xs);cursor:pointer;transition:background var(--t-fast) var(--ease)}
.cmdk-row:hover,.cmdk-row.sel{background:var(--royal-soft)}
.cmdk-row.sel{box-shadow:inset 0 0 0 1.5px var(--royal)}
.cmdk-ric{width:31px;height:31px;flex:none;border-radius:9px;background:var(--bg-deep);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.cmdk-rtxt{flex:1;min-width:0}
.cmdk-rtxt b{display:block;font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-rtxt small{display:block;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-tag{font-size:10.5px;background:var(--bg-deep);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:2px 9px;color:var(--muted);flex:none}
.cmdk-empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:13.5px}
.cmdk-skel{padding:14px 12px}
.cmdk-foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--line);
  background:var(--card-2);font-size:11.5px;color:var(--muted)}
.cmdk-foot span{display:inline-flex;align-items:center;gap:4px}

/* search trigger in the sidebar */
.nav-search{display:flex;align-items:center;gap:9px;width:calc(100% - 20px);
  margin:10px;padding:9px 12px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.11);border-radius:var(--r-sm);
  color:#B9C6E2;font-size:13px;cursor:pointer;font-family:inherit;text-align:left;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.nav-search:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2);color:#fff}
.nav-search kbd{margin-left:auto;font-family:var(--mono);font-size:10px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.14);
  border-radius:4px;padding:1.5px 5px;color:#CBD5E1}

/* busy button */
.btn.is-busy{pointer-events:none;opacity:.85}
.spin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:spin .62s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 14 · command centre dashboard ------------------------------ */
.hero{display:flex;gap:20px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:linear-gradient(125deg,var(--royal-dark),#1B2A55 55%,#16224A);
  color:#fff;border-radius:var(--r-xl);padding:24px 28px;margin-bottom:18px;
  box-shadow:var(--sh-2);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:250px;height:250px;
  border-radius:50%;background:radial-gradient(circle,rgba(199,154,46,.32),transparent 68%)}
.hero .eyebrow{color:#9DB2E8}
.hero h1{color:#fff;margin:0 0 5px}
.hero-sub{color:#C3CFE8;font-size:13.5px;margin:0}
.hero-score{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.hero-score .ring{width:64px;height:64px;transform:rotate(-90deg);flex:none}
.ring-bg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:4}
.ring-fg{fill:none;stroke:var(--gold-bright);stroke-width:4;stroke-linecap:round;
  transition:stroke-dasharray 1s var(--ease-out)}
.hero-score b{display:block;font-size:23px;font-weight:750;line-height:1;color:#fff}
.hero-score small{display:block;font-size:11.5px;color:#B7C6E8;margin-top:3px}

.term-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 20px}
.term-strip b{font-size:13.5px}
.term-strip .muted{display:block;font-size:12px}
.term-pct{font-variant-numeric:tabular-nums;color:var(--royal)}

.quick-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.quick{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;
  font-size:13.5px;font-weight:560;color:var(--ink-2);box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease)}
.quick:hover{transform:translateY(-2px);box-shadow:var(--sh-2);
  border-color:var(--royal);color:var(--royal)}

.cc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:18px;margin-bottom:8px;align-items:start}
.cc-ai{grid-column:span 2}
@media (max-width:1100px){.cc-ai{grid-column:span 1}}

.insight{display:flex;gap:11px;padding:11px 13px;border-radius:var(--r-sm);
  margin-bottom:9px;border:1px solid var(--line);background:var(--card-2)}
.insight p{margin:0;font-size:13.3px;line-height:1.55}
.ins-ico{font-size:16px;flex:none;line-height:1.35}
.ins-act{display:inline-block;margin-top:5px;font-size:12.5px;font-weight:620}
.insight.tone-ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.insight.tone-warn{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.insight.tone-info{background:var(--info-bg);border-color:transparent;color:var(--info)}
.insight.tone-ok p,.insight.tone-warn p,.insight.tone-info p{color:inherit}

.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.tl li:last-child{border-bottom:none}
.tl-time{font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:650;
  color:var(--royal);background:var(--royal-soft);border-radius:var(--r-xs);
  padding:3px 8px;height:fit-content;flex:none}
.tl-body b{display:block;font-size:13.8px}
.tl-body small{color:var(--muted);font-size:12px}

.spark{width:100%;height:52px;display:block}
.spark polyline{fill:none;stroke:var(--royal);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 5px rgba(42,79,215,.28))}
.spark-legend{display:flex;justify-content:space-between;font-size:11px;
  color:var(--muted);margin-top:2px}

.big-pct{font-size:34px;font-weight:760;color:var(--royal);letter-spacing:-.03em;
  line-height:1.05;margin-bottom:9px;font-variant-numeric:tabular-nums}
table.mini{width:100%;font-size:13px;margin-top:11px;border-collapse:collapse}
table.mini td{padding:5px 0;border-bottom:1px solid var(--line-2);color:var(--muted)}
table.mini td:last-child{text-align:right;color:var(--ink);
  font-variant-numeric:tabular-nums}

.pend{list-style:none;margin:0;padding:0}
.pend a{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px;
  transition:background var(--t-fast) var(--ease)}
.pend a:hover{background:var(--royal-soft);color:var(--royal)}
.pend b{margin-left:auto;background:var(--royal);color:#fff;border-radius:var(--r-pill);
  padding:1px 9px;font-size:12px;font-variant-numeric:tabular-nums}

.feed{list-style:none;margin:0;padding:0}
.feed li{padding:10px 0;border-bottom:1px solid var(--line-2)}
.feed li:last-child{border-bottom:none}
.feed b{display:block;font-size:13.6px}
.feed small{color:var(--muted);font-size:11.5px}
.feed p{margin:4px 0 0;font-size:12.8px;color:var(--muted);line-height:1.5}

@media (max-width:820px){
  .hero{padding:19px 18px;border-radius:var(--r-lg)}
  .cc-grid{grid-template-columns:1fr}
  .quick-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px;
    scrollbar-width:none}
  .quick-row::-webkit-scrollbar{display:none}
  .quick{white-space:nowrap;flex:none}
}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;cursor:pointer;font-size:15px;padding:6px;
  border-radius:var(--r-xs);line-height:1;transition:background var(--t-fast) var(--ease)}
.pw-eye:hover{background:var(--bg-deep)}

/* ---------- 15 · student & teacher workspaces (v1.6.0) ----------------- */
.streak-box{text-align:right;position:relative;z-index:1}
.streak-box b{display:block;font-size:23px;font-weight:750;color:#fff;line-height:1}
.streak-box small{display:block;font-size:11.5px;color:#B7C6E8;margin-top:3px}
.streak-dots{display:flex;gap:4px;margin-top:8px;justify-content:flex-end}
.streak-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2)}
.streak-dots i.on{background:var(--gold-bright);box-shadow:0 0 8px rgba(227,185,63,.6)}

.tutor-box textarea{font-size:14px}
.tutor-out{margin-top:13px;background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px;min-height:52px}
.tutor-reply{font-size:13.8px;line-height:1.65;color:var(--ink-2);
  white-space:pre-wrap;word-wrap:break-word}

.worklist{list-style:none;margin:0;padding:0}
.worklist li{padding:10px 0;border-bottom:1px solid var(--line-2)}
.worklist li:last-child{border-bottom:none}
.worklist li.overdue{border-left:3px solid var(--err);padding-left:10px;
  margin-left:-10px;background:var(--err-bg);border-radius:var(--r-xs)}
.worklist b{display:block;font-size:13.8px}
.worklist small{color:var(--muted);font-size:12px}

.barline{display:flex;align-items:center;gap:11px;margin:9px 0;font-size:13px}
.barline>span{flex:0 0 40%;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.barline .progress{flex:1;height:9px}
.barline>b{flex:none;width:48px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--royal)}

.goal-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.goal-form input[type=text]{flex:1;min-width:170px}
.goal-form input[type=date]{max-width:160px}

.goals{list-style:none;margin:0;padding:0}
.goals li{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line-2)}
.goals li:last-child{border-bottom:none}
.goals form{display:flex;margin:0}
.goals b{display:block;font-size:13.6px;font-weight:600}
.goals small{color:var(--muted);font-size:11.5px}
.goals span{flex:1;min-width:0}
.goals span.done b{text-decoration:line-through;color:var(--muted)}
.tick{width:23px;height:23px;flex:none;border-radius:7px;border:1.5px solid var(--line);
  background:var(--card);cursor:pointer;font-size:12px;color:#fff;line-height:1;
  transition:all var(--t-fast) var(--ease)}
.tick:hover{border-color:var(--royal)}
.tick.on{background:var(--ok);border-color:var(--ok)}
.xbtn{background:transparent;border:none;color:var(--muted-2);cursor:pointer;
  font-size:13px;padding:4px 6px;border-radius:var(--r-xs);
  transition:all var(--t-fast) var(--ease)}
.xbtn:hover{background:var(--err-bg);color:var(--err)}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:11px}
.badge-card{text-align:center;padding:13px 8px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card-2);
  transition:transform var(--t) var(--ease-out)}
.badge-card span{display:block;font-size:26px;line-height:1;margin-bottom:6px}
.badge-card b{display:block;font-size:11px;font-weight:620;line-height:1.35}
.badge-card.earned{background:var(--gold-soft);border-color:var(--gold);
  box-shadow:0 2px 10px rgba(199,154,46,.2)}
.badge-card.earned:hover{transform:translateY(-3px) scale(1.03)}
.badge-card.locked{opacity:.42;filter:grayscale(1)}

.tl li.now{background:var(--ok-bg);border-radius:var(--r-xs);
  padding-left:8px;margin-left:-8px}
.tl li.past{opacity:.5}

/* ---------- 16 · security centre (v1.7.0) ------------------------------ */
.code-input{font-family:var(--mono);font-size:23px;letter-spacing:.4em;
  text-align:center;font-weight:600}
.codegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:9px;margin:14px 0}
.codegrid code{font-family:var(--mono);font-size:14px;background:var(--bg-deep);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:9px 6px;
  text-align:center;letter-spacing:.06em;font-weight:600}
.qr-wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin:14px 0}
.qr-box{background:#fff;padding:12px;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--sh-1);line-height:0}
code.secret{display:inline-block;font-family:var(--mono);font-size:14px;
  background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:9px 13px;letter-spacing:.12em;word-break:break-all;font-weight:600}
.devlist{list-style:none;margin:0;padding:0}
.devlist li{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--line-2)}
.devlist li:last-child{border-bottom:none}
.devlist b{display:block;font-size:13.6px}
.devlist small{display:block;color:var(--muted);font-size:11.5px}
.devlist form{margin:0}
.verify-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(900px 600px at 12% 8%,rgba(42,79,215,.28),transparent 58%),
  radial-gradient(760px 520px at 88% 92%,rgba(199,154,46,.22),transparent 55%),
  linear-gradient(150deg,#0C1430,#16224A 48%,#0B1226)}
.verify-card{width:100%;max-width:470px;background:var(--card);
  border-radius:var(--r-xl);padding:34px 30px;box-shadow:0 26px 64px rgba(0,0,0,.34)}
.verify-card h1{font-size:21px}
@media print{.codegrid code{border:1px solid #999}}

/* ---------- 17 · Curriculum Intelligence (v1.8.0) ---------------------- */
.cie-unit details>summary{cursor:pointer;padding:8px 0;list-style:none;
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.cie-unit details>summary::-webkit-details-marker{display:none}
.cie-unit details>summary::before{content:"▸";color:var(--royal);
  font-size:13px;transition:transform var(--t-fast) var(--ease)}
.cie-unit details[open]>summary::before{transform:rotate(90deg)}
.cie-unit summary b{font-size:14.5px}
.cie-form{background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px;margin:10px 0}
.cie-topic{border-left:3px solid var(--line);padding-left:14px;margin:14px 0 14px 6px}
.cie-topic h3{margin:6px 0 8px;font-size:13.5px;color:var(--royal)}
.cie-lesson{background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-xs);padding:9px 12px;margin-bottom:8px}
.cie-lesson>summary{cursor:pointer;font-size:13px;list-style:none}
.cie-lesson>summary::-webkit-details-marker{display:none}
.cie-lesson>summary::before{content:"·";margin-right:7px;color:var(--gold)}

/* ==========================================================================
   Icon system (v1.9.0)
   Inline SVG replaces every decorative glyph. Icons inherit colour and
   optical-align with the label they sit beside.
   ========================================================================== */
.ic{display:inline-block;vertical-align:-0.145em;flex:none;
  stroke-width:1.75;overflow:visible}
.btn .ic{margin-right:.15em}
.btn .ic:only-child{margin-right:0}
a .ic,button .ic,summary .ic,label .ic,td .ic,th .ic,li .ic{opacity:.9}
h1 .ic,h2 .ic,h3 .ic{opacity:.55;vertical-align:-0.11em}
.badge .ic,.pill .ic{width:12px;height:12px;vertical-align:-0.1em}
.stat .ic{opacity:.5}
.quick .ic,.tool-card .ic,.area-card .ic{opacity:.75}
.flash .ic{margin-right:.3em;opacity:.8}

/* the flash pseudo-glyphs were emoji; use a coloured rule instead */
.flash::before{content:none!important}
.flash{border-left:3px solid currentColor;padding-left:14px}

/* ==========================================================================
   Restraint pass
   Fewer competing surfaces, calmer type, tighter rhythm.
   ========================================================================== */
h1{font-weight:640;letter-spacing:-.021em}
h2{font-size:15.5px;font-weight:620;letter-spacing:-.012em;margin:26px 0 12px;
  color:var(--ink)}
h2::before{display:none}
h3{font-size:13.5px;font-weight:620;letter-spacing:-.006em;color:var(--ink-2)}
.subtitle{font-size:13px;color:var(--muted);margin:-2px 0 22px;max-width:70ch}

/* one border weight everywhere, softer shadow */
.panel{border-radius:12px;box-shadow:0 1px 2px rgba(16,26,61,.04);
  padding:20px 22px}
.panel:hover{box-shadow:0 1px 2px rgba(16,26,61,.04)}
.stat{border-radius:10px;box-shadow:0 1px 2px rgba(16,26,61,.04)}
.stat::after{display:none}
.stat:hover{transform:none;box-shadow:0 1px 3px rgba(16,26,61,.07)}
.stat span{font-size:11.5px;letter-spacing:.005em;font-weight:500;
  text-transform:none;color:var(--muted)}
.stat b{font-size:24px;font-weight:600;letter-spacing:-.022em}

/* buttons: flat, confident, no gradient shine */
.btn{background:var(--royal);border-radius:8px;font-weight:550;font-size:13.5px;
  padding:8px 14px;box-shadow:none;letter-spacing:-.002em}
.btn:hover{background:var(--royal-mid);transform:none;filter:none;
  box-shadow:0 1px 3px rgba(16,26,61,.12)}
.btn:active{transform:none}
.btn::after{display:none}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-bright);color:#fff}
.btn-danger{background:#B4232B}
.btn-danger:hover{background:#9A1D24}
.btn-plain{background:var(--card);border:1px solid var(--line);color:var(--ink-2)}
.btn-plain:hover{background:var(--bg-deep);border-color:var(--muted-2);
  color:var(--ink)}
.btn-sm{padding:5px 10px;font-size:12.5px}

/* cards stop shouting */
.area-card,.tool-card{border-radius:12px;box-shadow:0 1px 2px rgba(16,26,61,.04)}
.area-card:hover,.tool-card:hover{transform:none;border-color:var(--muted-2);
  box-shadow:0 2px 8px rgba(16,26,61,.07)}
.area-card::before{display:none}
.area-icon{background:var(--bg-deep);border-radius:9px;width:40px;height:40px;
  color:var(--royal)}
.area-card b{font-size:14.5px;font-weight:600}
.area-card small{font-size:12.5px}
.area-card em{font-size:12px;font-weight:550}

/* hero: quieter, no glow */
.hero{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 1px 2px rgba(16,26,61,.04);padding:20px 22px}
.hero::after{display:none}
.hero h1{color:var(--ink)}
.hero-sub{color:var(--muted);font-size:13px}
.hero .eyebrow{color:var(--muted);font-weight:600;letter-spacing:.09em}
.hero-score b{color:var(--ink)}
.hero-score small{color:var(--muted)}
.ring-bg{stroke:var(--line)}
.ring-fg{stroke:var(--royal)}

/* tables: quieter chrome, denser rhythm */
.table{font-size:13px;border-radius:10px}
.table thead th{background:transparent;border-bottom:1px solid var(--line);
  font-size:11px;font-weight:650;letter-spacing:.045em;color:var(--muted);
  padding:9px 12px}
.table td{padding:9px 12px;border-bottom:1px solid var(--line-2)}
.table tbody tr:hover{background:var(--bg-deep)}

/* forms: one focus treatment, calmer labels */
label{font-size:12px;font-weight:550;color:var(--muted);letter-spacing:0}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=time],input[type=search],input[type=tel],
input[type=url],select,textarea{border-radius:8px;font-size:13.5px;
  padding:8px 11px;border-width:1px}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--royal-ring);
  border-color:var(--royal)}

/* badges: no colour shouting */
.badge,.pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;
  letter-spacing:0}

/* quick actions read as links, not buttons */
.quick{border-radius:8px;box-shadow:none;font-weight:520;font-size:13px;
  padding:7px 13px}
.quick:hover{transform:none;box-shadow:none;background:var(--bg-deep);
  border-color:var(--muted-2)}

/* insights: a rule, not a filled block */
.insight{background:transparent;border:none;border-left:2px solid var(--line);
  border-radius:0;padding:6px 0 6px 13px;margin-bottom:12px}
.insight.tone-ok{border-left-color:var(--ok);background:transparent;color:inherit}
.insight.tone-warn{border-left-color:var(--warn);background:transparent;color:inherit}
.insight.tone-info{border-left-color:var(--royal);background:transparent;color:inherit}
.insight p{color:var(--ink-2)}

/* empty states: no floating animation */
.empty{padding:38px 20px}
.empty .ico{animation:none;display:block;margin-bottom:10px;line-height:1}
.empty .ico .ic{width:26px;height:26px;opacity:.32}
.empty h3{font-size:14.5px;font-weight:600}
.empty p{font-size:13px;max-width:40ch}

/* the assistant entry point is a control, not a mascot */
.ai-fab{background:var(--royal);border-radius:8px;font-weight:550;
  font-size:13px;padding:9px 15px;box-shadow:0 2px 10px rgba(16,26,61,.18)}
.ai-fab:hover{transform:none;background:var(--royal-mid);
  box-shadow:0 3px 14px rgba(16,26,61,.22)}
.ai-fab::before{display:none}

.foot{font-size:11.5px;color:var(--muted-2)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}

/* sidebar: flatter, no slide */
.sidebar nav a:hover,.main-nav a:hover{transform:none}
.sidebar nav a.active::before{display:none}
.sidebar nav a.active,.main-nav a.active{background:rgba(255,255,255,.13)}
.brand-mark{background:var(--royal);border-radius:8px;box-shadow:none;
  border:none;font-size:13px}
.login-mark{background:var(--royal);box-shadow:none;border-radius:12px}
.splash-mark{background:var(--royal);box-shadow:none}

@media (prefers-reduced-motion: no-preference){
  .panel,.stat,.area-card,.tool-card{transition:box-shadow .15s ease,
    border-color .15s ease}
}


/* ==========================================================================
   Navigation shell  (v2.0.1)

   One system for every screen size, driven by two classes on <html>:
     .nav-open    the sidebar is showing
     .nav-closed  the sidebar is collapsed

   Desktop (>1024px): the sidebar is docked in the flex row and open by
   default. Collapsing it is a deliberate user choice and is remembered.

   Phone and tablet (<=1024px): the sidebar is an overlay drawer over a
   scrim, closed by default, opened from the app bar.

   No selector here depends on the Menu button being a sibling of .shell.
   That coupling is what broke the menu in v1.9.2.
   ========================================================================== */

/* ---- app bar ---------------------------------------------------------- */
.appbar{
  position:fixed;top:0;left:0;right:0;z-index:75;
  display:none;align-items:center;gap:10px;
  padding:8px 12px;
  padding-top:calc(8px + env(safe-area-inset-top));
  background:color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.appbar-title{
  font-size:14.5px;font-weight:650;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}

/* The control that opens the menu. Never hidden while the drawer is closed. */
.sidebar-reveal{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  min-height:40px;padding:8px 14px;
  background:var(--card);color:var(--royal);border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:var(--sh-1);
  transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.sidebar-reveal:hover{background:var(--bg-deep);box-shadow:var(--sh-2)}
.sidebar-reveal:active{transform:translateY(1px)}

.mobile-home{
  margin-left:auto;flex:none;
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--muted);
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.mobile-home:hover{background:var(--bg-deep);color:var(--ink)}
.mobile-home.is-active{
  background:var(--royal-soft);border-color:var(--royal);color:var(--royal)}

/* ---- scrim ------------------------------------------------------------ */
.nav-scrim{
  position:fixed;inset:0;z-index:76;
  background:rgba(9,14,30,.5);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  animation:fadeIn .18s var(--ease);
  border:0;padding:0;
}
.nav-scrim[hidden]{display:none}
body.nav-locked{overflow:hidden}

/* ---- desktop: docked sidebar ------------------------------------------ */
@media (min-width:1025px){
  .appbar{display:none}
  .sidebar{
    position:sticky;top:0;height:100vh;
    width:var(--sidebar-w);transform:none;
  }
  /* Collapsed by choice: sidebar out, app bar in, so Menu is still there. */
  html.nav-closed .sidebar{display:none}
  html.nav-closed .appbar{display:flex}
  html.nav-closed .main{padding-top:calc(62px + env(safe-area-inset-top))}
  .sidebar-hide{display:inline-flex}
  .nav-scrim{display:none}
}

/* ---- phone and tablet: overlay drawer --------------------------------- */
@media (max-width:1024px){
  .appbar{display:flex}
  .shell{flex-direction:column}
  .main{padding-top:calc(62px + env(safe-area-inset-top))}
  /* The drawer sits ABOVE the app bar (z-index 75) so its own brand header
     is visible rather than tucked underneath the bar. */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:min(84vw,300px);height:100dvh;z-index:78;
    padding-top:env(safe-area-inset-top);
    transform:translateX(-102%);
    transition:transform var(--t) var(--ease);
    box-shadow:none;
  }
  html.nav-open .sidebar{transform:none;box-shadow:var(--sh-pop)}
  .sidebar-hide{display:inline-flex}
}

/* If JavaScript never runs, <html> carries neither class. The menu must
   still work, so fall back to the checkbox-free default: drawer closed on
   small screens, docked on large, and the Menu button always visible. */
@media (max-width:1024px){
  html:not(.nav-open):not(.nav-closed) .sidebar{transform:translateX(-102%)}
}

@media (prefers-reduced-motion:reduce){
  .sidebar{transition:none}
  .nav-scrim{animation:none}
}

/* the active navigation item must be unmistakable */
.sidebar nav a[aria-current="page"],
.main-nav a[aria-current="page"]{
  background:rgba(255,255,255,.16);
  color:#fff;
  font-weight:600;
}

/* ==========================================================================
   Touch ergonomics  (v2.0.1)

   Applies only to touch-capable, small screens so the desktop layout keeps
   its present density.
   ========================================================================== */
@media (max-width: 1024px){

  /* iOS zooms the page whenever a focused field is under 16px. That zoom is
     what makes forms feel broken on a phone: the layout jumps and does not
     always come back. 16px is the documented threshold, not a preference. */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]):not([type=file]),
  select,textarea{
    font-size:16px;
    min-height:44px;
    padding:10px 12px;
  }
  textarea{min-height:96px}

  /* WCAG 2.5.5 asks for 44x44 CSS pixels. Links inside flowing sentences are
     excluded, otherwise body copy would be shredded. */
  .btn,
  button:not(.aiw-tool):not(.aiw-send):not(.aiw-icon-btn):not(.theme-toggle),
  .toolbar a,.toolbar button,
  .quick,.tool-card,.area-card,
  .sidebar nav a,.main-nav a,
  .sidebar-foot a,
  .table a.btn,.table button{
    min-height:44px;
  }
  .btn,
  button:not(.aiw-tool):not(.aiw-send):not(.aiw-icon-btn):not(.theme-toggle),
  .toolbar a{
    display:inline-flex;align-items:center;justify-content:center;
    padding:11px 16px;
  }

  /* Standalone navigation links: give them a real hit area without turning
     them into buttons. `.subtitle` rows are used across the app as a strip of
     shortcut links under the page heading. */
  .back-link,.panel > a.ghost,.subnav a,.subtitle a,.hero-txt a,
  .stat a,.dash-welcome a{
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* A 22px box with a 44px-tall label gives the required hit area without a
     giant tick mark. Labels wrapping a control are the common pattern here. */
  input[type=checkbox],input[type=radio]{
    width:22px;height:22px;min-height:0;flex:none;
  }
  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]){
    display:inline-flex;align-items:center;gap:9px;min-height:44px;
  }

  /* Any table that cannot fit becomes a horizontally scrollable strip rather
     than pushing the whole page sideways. */
  .table-wrap,.panel > table,.table{
    display:block;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table{white-space:nowrap}
}

/* Back-to-previous-page button shown on every authenticated page. */
.page-toolbar{display:flex;align-items:center;margin:0 0 6px;min-height:24px}
.back-nav{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  font-weight:600;color:#37598e;text-decoration:none;padding:4px 10px;
  border-radius:8px;border:1px solid var(--line);background:var(--card)}
.back-nav:hover{border-color:#6c8dcc;color:#20345f}
.back-nav.is-hidden{visibility:hidden;pointer-events:none}

/* =====================================================================
   Design polish — top-notch engineer-grade micro-interactions
   ===================================================================== */
/* Sidebar: active item glows with a sliding gradient accent bar. */
.sidebar nav a, .main-nav a{position:relative}
.sidebar nav a.active, .main-nav a.active{
  background:linear-gradient(90deg,rgba(42,79,215,.62),rgba(42,79,215,.20) 70%,transparent);
  box-shadow:inset 0 0 0 1px rgba(122,154,255,.25);
}
.sidebar nav a.active::after, .main-nav a.active::after{
  content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 0 0 rgba(255,214,102,.7);animation:navPulse 2.2s infinite}
@keyframes navPulse{
  0%{box-shadow:0 0 0 0 rgba(255,214,102,.55)}
  70%{box-shadow:0 0 0 6px rgba(255,214,102,0)}
  100%{box-shadow:0 0 0 0 rgba(255,214,102,0)}}

/* Nav link icon nudges on hover. */
.sidebar nav a svg,.main-nav a svg{transition:transform var(--t-fast) var(--ease)}
.sidebar nav a:hover svg,.main-nav a:hover svg{transform:translateX(2px) scale(1.08)}

/* Brand mark: gentle continuous sheen. */
.brand-mark{overflow:hidden;position:relative}
.brand-mark::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);animation:brandSheen 4.5s var(--ease) infinite}
@keyframes brandSheen{0%{transform:translateX(-120%)}55%{transform:translateX(120%)}100%{transform:translateX(120%)}}

/* Cards and panels lift gently on hover. */
.panel,.card,.tool-card,.stat,.area-card{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.panel:hover,.card:hover,.tool-card:hover,.stat:hover{
  transform:translateY(-3px);box-shadow:var(--sh-2)}

/* Buttons: refined press + ripple-ish shine. */
.btn,.btn-sm,.btn-plain,.btn-gold{position:relative;overflow:hidden}
.btn::after,.btn-sm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .5s var(--ease)}
.btn:hover::after,.btn-sm:hover::after{transform:translateX(120%)}

/* Tables: subtle row hover. */
table tr:hover{background:rgba(42,79,215,.05)}
body[data-theme="dark"] table tr:hover{background:rgba(122,154,255,.08)}

/* Back button pulse dot. */
.back-nav{transition:transform var(--t-fast) var(--ease),border-color var(--t-fast)}
.back-nav:hover{transform:translateX(-2px);border-color:var(--royal)}