/* ---- Recruvo palette · corporate blue · light default ------------------ */
:root{
  --bg:#f3f6fb; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e3eaf4;
  --ink:#131c2b; --ink-soft:#41506a; --muted:#6a7890;
  --line:#dde4ee; --line-strong:#c4d0e0;
  --accent:#1f5fb0; --accent-ink:#17498c; --accent-wash:#1f5fb012;
  --accent-2:#2f80ed;
  --brass:#8a6d1a; --brass-wash:#8a6d1a12;
  --crit:#c23b3b; --major:#c9761f; --minor:#b08a1a; --ofi:#2a6aad; --good:#1f8a5b;
  --shadow:0 1px 2px rgba(19,28,43,.05),0 10px 26px rgba(19,28,43,.06);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
  --radius:14px;
  --font:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:"Cascadia Code","Consolas",ui-monospace,monospace;
}
/* dark tokens, shared by OS-preference (unless overridden to light) and by the toggle */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b111b; --surface:#131c2a; --surface-2:#182333; --surface-3:#1f2c3f;
    --ink:#e9eef6; --ink-soft:#aebdd2; --muted:#7e8da3;
    --line:#25344a; --line-strong:#35496a;
    --accent:#4f95e8; --accent-ink:#7db2f0; --accent-wash:#4f95e820;
    --accent-2:#5aa0f2;
    --brass:#c9a85c; --brass-wash:#c9a85c18;
    --crit:#e4696a; --major:#e0973f; --minor:#d6b445; --ofi:#5b9bdd; --good:#46b483;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0b111b; --surface:#131c2a; --surface-2:#182333; --surface-3:#1f2c3f;
  --ink:#e9eef6; --ink-soft:#aebdd2; --muted:#7e8da3;
  --line:#25344a; --line-strong:#35496a;
  --accent:#4f95e8; --accent-ink:#7db2f0; --accent-wash:#4f95e820;
  --accent-2:#5aa0f2;
  --brass:#c9a85c; --brass-wash:#c9a85c18;
  --crit:#e4696a; --major:#e0973f; --minor:#d6b445; --ofi:#5b9bdd; --good:#46b483;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:24px}h2{font-size:19px}h3{font-size:15px}

/* top bar */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:12px 20px;padding:9px 22px;min-height:56px;flex-wrap:wrap}
.brand{font-weight:700;font-size:16px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand .logo{width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:14px}
.nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.nav a{padding:7px 12px;border-radius:8px;color:var(--ink-soft);font-size:14px;font-weight:500}
.nav a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.nav a.active{background:var(--accent-wash);color:var(--accent-ink)}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap}
.who b{color:var(--ink)}

.wrap{max-width:1200px;margin:0 auto;padding:26px 22px 70px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-h .sub{color:var(--muted);font-size:14px;margin-top:2px}

/* cards / panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px}
.panel h3{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* stat tiles */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.stat .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-size:30px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.stat.accent{border-left:3px solid var(--accent)}
.stat.warn{border-left:3px solid var(--major)}
.stat.crit{border-left:3px solid var(--crit)}
.stat.good{border-left:3px solid var(--good)}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:560px}
th,td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--surface-2);font-weight:650;font-size:12.5px;white-space:nowrap;position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--accent-wash)}
td.mono,.mono{font-family:var(--mono);font-size:12.5px}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;font-family:var(--mono);
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);letter-spacing:.02em;white-space:nowrap}
.pill:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-Draft{color:var(--muted)}
.s-Open{color:var(--ofi);background:color-mix(in srgb,var(--ofi) 12%,transparent)}
.s-Assigned{color:var(--brass);background:var(--brass-wash)}
.s-ActionPlanned{color:var(--major);background:color-mix(in srgb,var(--major) 12%,transparent)}
.s-InProgress{color:var(--major);background:color-mix(in srgb,var(--major) 12%,transparent)}
.s-PendingVerification{color:var(--ofi);background:color-mix(in srgb,var(--ofi) 12%,transparent)}
.s-Closed{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.s-Received{color:var(--ofi);background:color-mix(in srgb,var(--ofi) 12%,transparent)}
.s-AwaitingVendor{color:var(--brass);background:var(--brass-wash)}
.s-Resolved{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.sev-crit{color:var(--crit);background:color-mix(in srgb,var(--crit) 12%,transparent)}
.sev-major{color:var(--major);background:color-mix(in srgb,var(--major) 12%,transparent)}
.sev-minor{color:var(--minor);background:color-mix(in srgb,var(--minor) 14%,transparent)}
.sev-ofi{color:var(--ofi);background:color-mix(in srgb,var(--ofi) 12%,transparent)}
.sev-good{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.badge-over{color:var(--crit);background:color-mix(in srgb,var(--crit) 12%,transparent);border-color:transparent}

/* forms */
form .field{margin-bottom:13px}
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
label .req{color:var(--crit)}
input,select,textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
textarea{min-height:74px;resize:vertical}
.row{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

.btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 15px}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}
.btn.sm{padding:6px 11px;font-size:13px}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}

/* flash */
.flashes{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.flash{padding:10px 14px;border-radius:10px;font-size:14px;border:1px solid var(--line)}
.flash.ok{background:color-mix(in srgb,var(--good) 12%,transparent);border-color:transparent;color:var(--good)}
.flash.err{background:color-mix(in srgb,var(--crit) 12%,transparent);border-color:transparent;color:var(--crit)}
.flash.warn{background:var(--brass-wash);border-color:transparent;color:var(--brass)}

/* misc */
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--muted);font-size:12.5px;padding-top:2px}
.kv dd{margin:0}
.divider{height:1px;background:var(--line);margin:16px 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.muted{color:var(--muted)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs a{padding:8px 14px;font-size:14px;font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent}
.tabs a.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.bar{height:10px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:100%;max-width:400px}
.demo-note{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.7}
.demo-note code{font-family:var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px}
.empty{padding:34px;text-align:center;color:var(--muted)}
.timeline{border-left:2px solid var(--line);padding-left:16px;margin:8px 0}
.timeline .ev{margin-bottom:12px;font-size:13px;position:relative}
.timeline .ev:before{content:"";position:absolute;left:-21px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.timeline .ev .t{font-family:var(--mono);font-size:11px;color:var(--muted)}
.timeline .ev .act{font-weight:650}

/* nav active */
.nav a.active{background:var(--accent-wash);color:var(--accent-ink)}
.muted-pill{color:var(--muted)}

/* lifecycle stepper */
.stepper{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:4px 0 2px}
.stepper .step{display:flex;align-items:center;gap:7px;padding:2px 2px}
.stepper .step .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;font-family:var(--mono);flex:none;border:1.5px solid var(--line-strong);
  background:var(--surface);color:var(--muted)}
.stepper .step .lbl{font-size:12px;color:var(--muted);white-space:nowrap}
.stepper .seg{width:16px;height:2px;background:var(--line-strong);flex:none}
.stepper .step.done .dot{background:var(--good);border-color:var(--good);color:#fff}
.stepper .step.done .lbl{color:var(--ink-soft)}
.stepper .seg.done{background:var(--good)}
.stepper .step.now .dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-wash)}
.stepper .step.now .lbl{color:var(--ink);font-weight:700}

/* severity stripe on rows */
td.stripe{border-left:3px solid var(--line);padding-left:10px}
td.stripe.sv-crit{border-left-color:var(--crit)}
td.stripe.sv-major{border-left-color:var(--major)}
td.stripe.sv-minor{border-left-color:var(--minor)}
td.stripe.sv-ofi{border-left-color:var(--ofi)}
td.stripe.sv-good{border-left-color:var(--good)}

/* discussion */
.comment{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:9px;background:var(--surface-2)}
.comment .meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.comment .meta b{color:var(--ink)}
.comment .body{font-size:14px;white-space:pre-wrap}
.accept-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good);font-size:13.5px;font-weight:600;margin-bottom:12px}

/* calendar */
.cal{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cal-head,.cal-row{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-hd{background:var(--surface-2);padding:8px 6px;font-size:11px;font-weight:650;text-align:center;
  color:var(--muted);font-family:var(--mono);letter-spacing:.06em;border-bottom:1px solid var(--line)}
.cal-cell{min-height:88px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 6px;background:var(--surface)}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell.empty{background:var(--surface-2);opacity:.5}
.cal-cell.today{background:var(--accent-wash)}
.cal-day{font-size:12px;font-weight:650;color:var(--ink-soft);margin-bottom:4px;font-variant-numeric:tabular-nums}
.cal-cell.today .cal-day{color:var(--accent-ink)}
.cal-ev{display:block;font-size:11px;font-weight:600;padding:3px 6px;border-radius:6px;margin-bottom:3px;
  text-decoration:none;color:#fff;background:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid rgba(0,0,0,.18)}
.cal-ev:hover{text-decoration:none;filter:brightness(1.08)}
.cal-ev.st-Planned{background:var(--ofi)}
.cal-ev.st-InProgress{background:var(--major)}
.cal-ev.st-Completed{background:var(--good)}
.dotlbl{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:middle;margin-right:4px}
.dotlbl.st-Planned{background:var(--ofi)}
.dotlbl.st-InProgress{background:var(--major)}
.dotlbl.st-Completed{background:var(--good)}
/* document list */
.doclist{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.doc{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2);font-size:14px}
.doc a{font-weight:600}
.doc form{margin:0}
details>summary.btn{cursor:pointer;display:inline-flex}
details>summary.btn::-webkit-details-marker{display:none}

/* department chips with edit/remove */
.deptcell{display:flex;flex-wrap:wrap;gap:8px}
.deptchip{display:inline-flex;align-items:center;gap:2px}
.deptchip .pill{margin:0}
.mini{cursor:pointer;font:inherit;font-size:11px;line-height:1;padding:4px 6px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-soft);border-radius:6px}
.mini:hover{background:var(--surface-2)}
.mini.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}
.deptpop{display:inline}
.deptpop>summary{list-style:none}
.deptpop>summary::-webkit-details-marker{display:none}
.popform{position:absolute;z-index:6;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:12px;box-shadow:var(--shadow);width:240px;margin-top:4px}

/* operations agent */
.agent-banner{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:14px;margin-bottom:20px;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.agent-banner .ab-dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.agent-banner .ab-label{font-weight:700;font-size:18px}
.agent-banner .ab-sub{font-size:13px;color:var(--muted);font-family:var(--mono)}
.agent-banner.sev-ok{background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.agent-banner.sev-ok .ab-dot{background:var(--good)}
.agent-banner.sev-warn{background:color-mix(in srgb,var(--major) 9%,var(--surface))}
.agent-banner.sev-warn .ab-dot{background:var(--major)}
.agent-banner.sev-critical{background:color-mix(in srgb,var(--crit) 9%,var(--surface))}
.agent-banner.sev-critical .ab-dot{background:var(--crit);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.agent-banner .ab-dot{animation:none}}
.findings{display:flex;flex-direction:column;gap:10px}
.finding{border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.finding.sev-critical{border-left-color:var(--crit)}
.finding.sev-warn{border-left-color:var(--major)}
.finding.sev-ok{border-left-color:var(--good)}
.finding .fh{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.finding p{font-size:13px;color:var(--ink-soft);margin:0 0 8px}
.finding form{margin:0}
.brief{white-space:pre-wrap;font-family:var(--font);font-size:14px;line-height:1.6;margin:0;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--ink)}
@media (max-width:640px){.cal-cell{min-height:64px}.cal-ev{font-size:10px}}

/* auth extras */
.or-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:12px}
.or-divider:before,.or-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.backup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.backup-grid code{text-align:center;padding:9px 6px;font-size:14px;letter-spacing:.06em}

/* analytics heatmap */
table.heat td.hcell{text-align:center;padding:5px}
.hbox{display:inline-grid;place-items:center;min-width:30px;height:26px;border-radius:6px;color:#fff;
  font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;padding:0 6px}
.hbox.sev-crit{background:var(--crit)}
.hbox.sev-major{background:var(--major)}
.hbox.sev-minor{background:var(--minor)}
.hbox.sev-ofi{background:var(--ofi)}
.hbox.sev-good{background:var(--good)}
.hzero{color:var(--line-strong)}
/* category fills */
.sev-fill-crit{background:var(--crit)!important}
.sev-fill-major{background:var(--major)!important}
.sev-fill-minor{background:var(--minor)!important}
.sev-fill-ofi{background:var(--ofi)!important}
.sev-fill-good{background:var(--good)!important}
.bar>span[class^="sev-fill-"]{display:block;height:100%}
/* sparkline / trend */
.spark{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px}
.spark-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.spark-bar{width:100%;max-width:46px;background:var(--accent);border-radius:6px 6px 0 0;min-height:3px;transition:height .3s}
.spark-lbl{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}
.spark-n{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}

/* recruitment status pills */
.s-PendingApproval{color:var(--major);background:color-mix(in srgb,var(--major) 12%,transparent)}
.s-Approved{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.s-Rejected{color:var(--crit);background:color-mix(in srgb,var(--crit) 12%,transparent)}
.s-Cancelled{color:var(--muted);background:var(--surface-2)}

/* candidate pipeline — kanban board */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.kcol{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;min-width:180px;display:flex;flex-direction:column}
.khead{font-weight:700;font-size:13px;padding:11px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.kcount{font-family:var(--mono);font-size:11px;background:var(--surface-3);color:var(--ink-soft);border-radius:999px;padding:1px 8px}
.kbody{padding:10px;display:flex;flex-direction:column;gap:9px;min-height:60px}
.kcard{display:block;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;padding:10px 12px;box-shadow:var(--shadow);color:var(--ink)}
.kcard:hover{text-decoration:none;border-left-color:var(--accent-ink);transform:translateY(-1px)}
.kname{font-weight:650;font-size:13.5px}
.kmeta{font-size:11.5px;color:var(--muted);margin-top:2px}
.kfoot{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:11px}
.kempty{color:var(--muted);text-align:center;font-size:12px;padding:10px 0}

/* dashboard mini-funnel */
.funnel{display:flex;align-items:flex-end;gap:10px;padding:6px 0 0}
.fstage{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:var(--ink);gap:4px}
.fstage:hover{text-decoration:none}
.fbar{width:70%;max-width:80px;background:linear-gradient(180deg,var(--accent),var(--accent-ink));border-radius:7px 7px 0 0;min-height:22px}
.fstage:hover .fbar{filter:brightness(1.08)}
.fv{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.fk{font-size:11px;color:var(--muted);font-family:var(--mono);letter-spacing:.03em}
@media (max-width:720px){.kanban{grid-template-columns:repeat(5,minmax(160px,1fr))}}

/* analytics funnel */
.afunnel{display:flex;flex-direction:column;gap:9px}
.arow{display:grid;grid-template-columns:90px 1fr 96px;align-items:center;gap:12px}
.albl{font-size:13px;font-weight:600;color:var(--ink-soft)}
.abar-wrap{position:relative;background:var(--surface-2);border-radius:8px;height:30px;display:flex;align-items:center}
.abar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-ink));border-radius:8px;min-width:6px;transition:width .3s}
.aval{position:absolute;left:10px;font-weight:700;font-size:13px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.aconv{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.aconv .muted{font-weight:500;font-size:11px}

/* résumé comparison matrix */
table.compare td, table.compare th{vertical-align:top}
table.compare tbody th{background:var(--surface-2);text-align:left;font-size:12.5px;
  position:sticky;left:0;z-index:1;color:var(--ink-soft);white-space:nowrap}
table.compare thead th:first-child{position:sticky;left:0;z-index:2}
table.compare tbody tr:hover th{background:var(--surface-3)}
table.compare td{font-size:13px}

/* ============================================================= */
/* Recruvo — modernise & polish layer                            */
/* ============================================================= */
body{transition:background .2s ease,color .2s ease}

/* frosted sticky header */
.topbar{backdrop-filter:saturate(1.4) blur(8px);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  border-bottom:1px solid var(--line)}
.brand .logo{background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 45%,transparent);font-weight:800}
.nav a{transition:background .15s,color .15s}
.nav a.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}

/* panels & cards: softer radius, gentle hover lift */
.panel{border-radius:var(--radius)}
.panel,.stat,.card,.kcard,.kpi{transition:box-shadow .18s ease,transform .18s ease,border-color .18s}
.stat{border-radius:13px;position:relative;overflow:hidden}
.stat:hover,.panel:hover{box-shadow:0 2px 4px rgba(19,28,43,.06),0 14px 34px rgba(19,28,43,.09)}
.stat.accent,.stat.good,.stat.warn,.stat.crit{border-left-width:0}
.stat.accent:before,.stat.good:before,.stat.warn:before,.stat.crit:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.stat.accent:before{background:linear-gradient(180deg,var(--accent),var(--accent-2))}
.stat.good:before{background:var(--good)}
.stat.warn:before{background:var(--major)}
.stat.crit:before{background:var(--crit)}

/* buttons: gradient primary + smoother states */
.btn{transition:background .15s,box-shadow .15s,transform .05s,border-color .15s;border-radius:10px}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;
  box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 34%,transparent)}
.btn.primary:hover{filter:brightness(1.05);box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 42%,transparent)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* tables: quieter, rounded */
.tablewrap{border-radius:12px}
thead th{letter-spacing:.02em}
tbody tr{transition:background .12s}

/* pills a touch softer */
.pill{border-radius:999px}

/* theme toggle (floating, always available incl. login) */
.theme-toggle{position:fixed;right:16px;bottom:16px;z-index:60;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:18px;cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center;
  transition:transform .15s,box-shadow .15s}
.theme-toggle:hover{transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 30%,transparent)}
@media print{.theme-toggle{display:none}}

/* ============================================================= */
/* AI visibility layer — distinct violet accent + badges         */
/* ============================================================= */
:root{ --ai:#7c3aed; --ai-2:#4f46e5; --ai-ink:#6d28d9; --ai-wash:#7c3aed14; }
:root[data-theme="dark"], :root:not([data-theme="light"]){ }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ai:#a78bfa; --ai-2:#818cf8; --ai-ink:#c4b5fd; --ai-wash:#7c3aed26; } }
:root[data-theme="dark"]{ --ai:#a78bfa; --ai-2:#818cf8; --ai-ink:#c4b5fd; --ai-wash:#7c3aed26; }

/* inline "✨ AI" badge — put next to any AI-produced value */
.ai-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);
  font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;
  color:#fff;background:linear-gradient(135deg,var(--ai),var(--ai-2));
  box-shadow:0 1px 6px color-mix(in srgb,var(--ai) 40%,transparent);white-space:nowrap;vertical-align:middle}
.ai-badge.soft{color:var(--ai-ink);background:var(--ai-wash);box-shadow:none;
  border:1px solid color-mix(in srgb,var(--ai) 30%,transparent)}
/* the analytics sparkline also claims .spark — keep it off the AI sparkle glyph */
.ai-badge .spark,.ai-chip .spark{display:inline;height:auto;min-height:0;padding:0;gap:0;
  align-items:initial;flex:none}
.ai-badge .spark{font-size:10px}

/* AI status chip in the top bar */
.ai-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:5px 11px;border-radius:999px;text-decoration:none;white-space:nowrap;
  color:#fff;background:linear-gradient(135deg,var(--ai),var(--ai-2));
  box-shadow:0 2px 10px color-mix(in srgb,var(--ai) 35%,transparent)}
.ai-chip:hover{text-decoration:none;filter:brightness(1.07)}
.ai-chip.off{color:var(--ai-ink);background:var(--ai-wash);
  border:1px solid color-mix(in srgb,var(--ai) 32%,transparent);box-shadow:none}
.ai-chip .dot{width:7px;height:7px;border-radius:50%;background:#c9f7d8}
.ai-chip.off .dot{background:var(--ai)}
.ai-chip .spark{animation:aisparkle 2.4s ease-in-out infinite}
@keyframes aisparkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.ai-chip .spark{animation:none}}

/* AI accent for whole panels that are AI-driven */
.ai-panel{border-color:color-mix(in srgb,var(--ai) 30%,var(--line))!important;
  box-shadow:0 1px 2px rgba(19,28,43,.05),0 10px 26px color-mix(in srgb,var(--ai) 14%,transparent)}
.ai-panel > h3{color:var(--ai-ink)}
.ai-rule{height:3px;border:0;border-radius:3px;margin:0 0 14px;
  background:linear-gradient(90deg,var(--ai),var(--ai-2),transparent)}

/* AI Center hero */
.ai-hero{border-radius:16px;padding:22px 24px;color:#fff;margin-bottom:18px;
  background:linear-gradient(135deg,var(--ai),var(--ai-2))}
.ai-hero h1{color:#fff;margin:0 0 4px}
.ai-hero .sub{color:#ffffffcc;font-size:14px}
.ai-hero .status{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  background:#ffffff22;border:1px solid #ffffff44;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600}
.ai-cap{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:var(--surface);position:relative}
.ai-cap .ic{font-size:22px}
.ai-cap h3{margin:6px 0 4px;font-size:14px}
.ai-cap p{margin:0;font-size:12.5px;color:var(--muted)}
.ai-cap .tag{position:absolute;top:12px;right:12px}

/* deployment-environment banner (demo instances) */
.env-banner{position:sticky;top:0;z-index:30;text-align:center;font-size:12.5px;font-weight:650;
  padding:7px 16px;background:linear-gradient(90deg,#c9761f,#b08a1a);color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15)}
@media print{.env-banner{display:none}}