/* =====================================================================
   Sterling LOS — application styles
   Carried over from the approved UI preview so the build looks like the
   thing Jordan already signed off on.
   ===================================================================== */

:root{
  --navy-900:#0f3438; --navy-800:#16484d; --navy-700:#1c5b61;
  --navy-600:#287880; --navy-500:#358c96;
  --gold-600:#2f8791; --gold-500:#3f9aa4; --gold-100:#e2f0f1;
  --ink:#16202e; --ink-2:#425066; --ink-3:#6b7890; --line:#e4e8ef; --line-2:#eef1f6;
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#f9fbfd;
  --good:#1f7a54; --good-bg:#e6f3ec; --warn:#9a6b12; --warn-bg:#faf0d7;
  --serious:#b4531a; --serious-bg:#fbe9dd; --crit:#a3282b; --crit-bg:#fae4e4;
  --info:#1f5f97; --info-bg:#e4eef8;
  --r:10px; --r-sm:7px;
  --shadow:0 1px 2px rgba(16,32,58,.06),0 4px 14px rgba(16,32,58,.06);
  --shadow-lg:0 8px 30px rgba(16,32,58,.14);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted-text{color:var(--ink-3)}
.small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- Login ---------- */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1200px 600px at 70% -10%,#2a8a92 0%,#0f3438 55%,#092528 100%);z-index:50;overflow:auto}
.login-card{width:100%;max-width:410px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:36px 34px;text-align:center}
.login-logo{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:18px}
.login-logo img{max-width:100%}
.mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(150deg,var(--navy-600),var(--navy-800));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mark .s{color:var(--gold-500)}
.login-card h1{font-size:19px;color:var(--navy-800)}
.login-card .sub{color:var(--ink-3);font-size:12.5px;margin-top:4px}
.login-foot{margin-top:20px;font-size:11px;color:var(--ink-3);line-height:1.6}
.badge-sso{display:inline-flex;align-items:center;gap:6px;background:var(--info-bg);color:var(--info);
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;margin-top:12px}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--navy-800);color:#cfe6e6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-top{padding:18px 18px 14px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.07)}
.side-top:hover .name{color:#fff}
.side-mark{height:32px;width:auto;display:block;flex:none;opacity:.95}
.side-top .mark{width:32px;height:32px;font-size:15px;border-radius:8px}
.side-top .name{font-weight:700;color:#fff;font-size:14.5px;letter-spacing:-.01em}
.side-top .name small{display:block;font-weight:500;color:#9ec6c8;font-size:10px;letter-spacing:.05em;margin-top:1px}
.nav{padding:8px 10px;overflow-y:auto;flex:1}
.nav-sec{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#6fa1a4;padding:14px 12px 6px;font-weight:700}
.nav a{display:flex;align-items:center;gap:11px;padding:8.5px 12px;border-radius:8px;color:#cfe6e6;font-size:13.5px;font-weight:500;margin-bottom:1px}
.nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--navy-600);color:#fff;font-weight:600}
.nav a .count{margin-left:auto;font-size:10.5px;background:rgba(255,255,255,.14);padding:1px 7px;border-radius:20px;font-weight:600}
.nav a .count.alert{background:var(--crit);color:#fff}
.side-user{border-top:1px solid rgba(255,255,255,.07);padding:12px 14px;display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none}
.side-user .u-name{font-size:12.5px;color:#fff;font-weight:600}
.side-user .u-role{font-size:11px;color:#9ec6c8}
.side-user a{margin-left:auto;color:#9ec6c8;font-size:11px;display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.14)}
.side-user a:hover{background:rgba(255,255,255,.08)}
.side-user a svg{width:13px;height:13px}
.side-user a:hover{color:#fff}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{min-height:58px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:14px;padding:0 24px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.crumbs{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs .sep{opacity:.45}
.search{margin-left:6px;flex:1;max-width:380px;position:relative}
.search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-size:13px}
.search svg{position:absolute;left:10px;top:9px;width:15px;height:15px;color:var(--ink-3)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{border-color:var(--navy-500);color:var(--navy-700)}
.role-pill{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);border:1px solid var(--line);padding:6px 11px;border-radius:20px;background:#fff}
.role-pill b{color:var(--ink)} .role-pill svg{width:14px;height:14px;opacity:.7}
.content{padding:22px 26px 60px}

/* ---------- Page furniture ---------- */
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h2{font-size:20px;color:var(--navy-800)}
.page-head .ph-sub{color:var(--ink-3);font-size:13px;margin-top:3px}
.page-head .spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:8px;font-size:13px;font-weight:600;border:1px solid transparent;text-align:center}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--navy-700);color:#fff} .btn-primary:hover{background:var(--navy-800)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2)} .btn-ghost:hover{border-color:var(--navy-500);color:var(--navy-700)}
.btn-gold{background:var(--gold-500);color:#fff} .btn-gold:hover{background:var(--gold-600)}
.btn-good{background:var(--good);color:#fff}
.btn-danger{background:#fff;border-color:#f0cccc;color:var(--crit)} .btn-danger:hover{background:var(--crit-bg)}
.btn-sm{padding:6px 11px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h3{font-size:14px;color:var(--navy-800)} .card-h .spacer{flex:1}
.card-b{padding:18px}
.card-f{padding:12px 18px;border-top:1px solid var(--line-2);background:var(--surface-2);
  display:flex;align-items:center;gap:10px;border-radius:0 0 var(--r) var(--r)}
.grid{display:grid;gap:16px}
.two-col{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.two-even{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .k-label{font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .k-val{font-size:25px;font-weight:700;color:var(--navy-800);margin-top:8px;letter-spacing:-.02em}
.kpi .k-val small{font-size:14px;color:var(--ink-3);font-weight:600}
.kpi .k-delta{font-size:11.5px;margin-top:5px;font-weight:600;color:var(--ink-3)}
.k-accent{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;position:absolute;top:14px;right:14px}
.k-accent svg{width:17px;height:17px}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.chip.nodot::before{display:none}
.chip.good{background:var(--good-bg);color:var(--good)} .chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.serious{background:var(--serious-bg);color:var(--serious)} .chip.crit{background:var(--crit-bg);color:var(--crit)}
.chip.info{background:var(--info-bg);color:var(--info)} .chip.muted{background:#eef1f6;color:var(--ink-2)}
.chip.gold{background:var(--gold-100);color:var(--gold-600)}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr.clickable{cursor:pointer}
.tbl .id{font-weight:650;color:var(--navy-700)}
.tbl .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.txt-right{text-align:right} .txt-center{text-align:center}
.avatar-xs{width:22px;height:22px;border-radius:50%;background:var(--gold-100);color:var(--gold-600);
  display:inline-grid;place-items:center;font-size:10px;font-weight:700;margin-right:6px;vertical-align:middle;flex:none}
.table-wrap{overflow-x:auto}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.empty svg{width:32px;height:32px;opacity:.35;margin-bottom:10px}
.empty b{display:block;color:var(--ink-2);font-size:14px;margin-bottom:4px}

/* ---------- Filters ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.filters select,.filters input{padding:6px 10px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;background:#fff;font-family:inherit}
.filters label{font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.tab-pill{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.tab-pill a,.tab-pill button{padding:6px 13px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--ink-3);border:none;background:none}
.tab-pill a.active,.tab-pill button.active{background:#fff;color:var(--navy-800);box-shadow:var(--shadow)}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:11.5px;font-weight:650;color:var(--ink-2);letter-spacing:.01em}
.field .req{color:var(--crit)}
.field input,.field select,.field textarea{padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;font-family:inherit;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-500);
  box-shadow:0 0 0 3px rgba(53,140,150,.12)}
.field input[readonly],.field input:disabled,.field select:disabled,.field textarea:disabled{
  background:var(--surface-2);color:var(--ink-2);cursor:default}
.field textarea{resize:vertical;min-height:60px;line-height:1.5}
.field .hint{font-size:11px;color:var(--ink-3);line-height:1.4}
.field.emphasis input,.field.emphasis select{border-color:var(--gold-500);background:#fbfeff}
.field.readonly-note{font-size:11px;color:var(--ink-3);font-style:italic}
.section-title{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--navy-700);font-weight:750;padding-top:14px;border-top:1px solid var(--line-2);margin-top:6px}
.section-title:first-child{padding-top:0;border-top:none;margin-top:0}
.section-note{grid-column:1/-1;font-size:12px;color:var(--ink-3);margin:-6px 0 4px;line-height:1.5}
.radio-row{display:flex;gap:18px;flex-wrap:wrap;padding-top:2px}
.radio-row label{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:var(--ink);cursor:pointer;font-size:13px}
.radio-row input{width:auto;margin:0}
.check{display:inline-flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;padding:4px 0;line-height:1.4}
.check input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--navy-600);flex:none}
.check.emphasis{background:var(--gold-100);border:1px solid #c9e3e5;border-radius:8px;padding:11px 13px;font-weight:600}
.hidden-section{display:none}

/* ---------- Loan file ---------- */
.loan-hero{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:14px;flex-wrap:wrap}
.lh-ico{width:44px;height:44px;border-radius:11px;background:var(--gold-100);color:var(--gold-600);display:grid;place-items:center;flex:none}
.lh-ico svg{width:22px;height:22px}
.pg-title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pg-title-row h2{font-size:19px;color:var(--navy-800)}
.lh-meta{color:var(--ink-3);font-size:12.5px;margin-top:4px}
.lh-stat{text-align:right;padding-left:20px;border-left:1px solid var(--line-2)}
.lh-stat .v{font-size:17px;font-weight:700;color:var(--navy-800)}
.lh-stat .l{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

/* ---------------------------------------------------------------------
   Pinned loan header.

   The hero and the stage bar stay under the top bar while the file is
   scrolled, so the loan number, the money and the stage are never more
   than a glance away. Past the first stretch of scrolling they condense —
   the address line, the stat captions, the stage labels and the move-stage
   controls fold away — so what remains is a slim identity strip rather
   than a third of the screen.
   --------------------------------------------------------------------- */
.loan-sticky{position:sticky;top:var(--topbar-h,58px);z-index:15;background:var(--bg);
  margin:0 -26px;padding:0 26px;transition:box-shadow .2s ease}
.loan-sticky.is-stuck{box-shadow:0 10px 18px -14px rgba(16,32,58,.45)}
.loan-sticky .lh-stage .card-b{padding:16px 22px}

/* Nothing that affects layout is animated, deliberately.
   Transitioning padding, height or font-size here reflows the entire page
   below the header on every frame of the animation — and because the header
   is pinned while that happens, the content underneath slides for the length
   of the transition, which reads as flicker if you are still scrolling. The
   collapse is one discrete change: a single reflow, then nothing. Only the
   shadow fades, and a shadow is paint-only. */
.loan-sticky *{transition:none}

/* Isolate the header's own layout and painting from the page below it, so a
   repaint here cannot force work on the rest of the document. */
.loan-sticky{contain:layout paint style}

.loan-sticky.is-condensed .loan-hero{padding:7px 16px;margin-bottom:7px;gap:11px}
.loan-sticky.is-condensed .lh-ico{width:28px;height:28px;border-radius:8px}
.loan-sticky.is-condensed .lh-ico svg{width:15px;height:15px}
.loan-sticky.is-condensed .pg-title-row h2{font-size:15px}
.loan-sticky.is-condensed .lh-meta{display:none}
.loan-sticky.is-condensed .lh-stat{padding-left:13px}
.loan-sticky.is-condensed .lh-stat .l{display:none}
.loan-sticky.is-condensed .lh-stat .v{font-size:13.5px}
.loan-sticky.is-condensed .lh-stage{margin-bottom:0}
.loan-sticky.is-condensed .lh-stage .card-b{padding:5px 22px}
.loan-sticky.is-condensed .stagebar{padding:0}
.loan-sticky.is-condensed .stage{min-width:34px}
.loan-sticky.is-condensed .stage .dot{width:15px;height:15px;font-size:9px;line-height:15px}
.loan-sticky.is-condensed .stage::after{top:7px}
.loan-sticky.is-condensed .stage .lbl{display:none}
/* Keep the stage the loan is actually at — that is the one worth reading. */
.loan-sticky.is-condensed .stage.active{min-width:104px}
.loan-sticky.is-condensed .stage.active .lbl{display:block;font-size:10.5px;margin-top:2px}
.loan-sticky.is-condensed .lh-stageform{display:none}

/* Anchored jumps must not land underneath the pinned header. */
.loan-sticky ~ * :target{scroll-margin-top:220px}

@media (max-width:900px){
  .loan-sticky{position:static;margin:0;padding:0}
}
@media (prefers-reduced-motion:reduce){
  .loan-sticky,.loan-hero,.loan-sticky *{transition:none}
}

.stagebar{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:4px 0}
.stage{flex:1;min-width:88px;text-align:center;position:relative}
.stage::after{content:"";position:absolute;top:13px;left:50%;width:100%;height:2px;background:var(--line)}
.stage:last-child::after{display:none}
.stage .dot{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--ink-3);
  display:grid;place-items:center;font-size:11px;font-weight:700;margin:0 auto 6px;position:relative;z-index:1}
.stage .dot svg{width:13px;height:13px}
.stage .lbl{font-size:11px;color:var(--ink-3);font-weight:600}
.stage.done .dot{background:var(--good);border-color:var(--good);color:#fff}
.stage.done::after{background:var(--good)}
.stage.active .dot{background:var(--navy-700);border-color:var(--navy-700);color:#fff;box-shadow:0 0 0 4px rgba(28,91,97,.14)}
.stage.active .lbl{color:var(--navy-800);font-weight:700}

.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 14px;overflow-x:auto}
.subtabs a{padding:12px 15px;font-size:13px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap}
.subtabs a:hover{color:var(--navy-700)}
.subtabs a.active{color:var(--navy-800);border-bottom-color:var(--navy-700)}
.subtabs .badge{display:inline-block;margin-left:6px;background:var(--crit);color:#fff;font-size:10px;
  padding:1px 6px;border-radius:20px;font-weight:700;vertical-align:1px}

.form-layout{display:grid;grid-template-columns:224px 1fr;gap:20px;align-items:start}
.folder{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:7px;font-size:12.5px;
  color:var(--ink-2);cursor:pointer;font-weight:500}
.folder svg{width:15px;height:15px;opacity:.6;flex:none}
.folder:hover{background:var(--surface-2)}
.folder.on{background:var(--gold-100);color:var(--navy-800);font-weight:650}
.folder .fc{margin-left:auto;font-size:10.5px;color:var(--ink-3);background:var(--line-2);padding:1px 6px;border-radius:20px;font-weight:600}
.folder.on .fc{background:#fff}
.folder .tick{margin-left:auto;color:var(--good);display:flex}
.folder .tick svg{width:13px;height:13px;opacity:1}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:750;padding:4px 11px 8px}

/* ---------- Documents ---------- */
.doc-row{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.doc-row:last-child{border-bottom:none}
.doc-row.rejected{background:#fefafa}
.doc-row.accepted{background:#fafefb}
.doc-ico{width:34px;height:34px;border-radius:8px;background:var(--line-2);color:var(--ink-2);display:grid;place-items:center;flex:none}
.doc-ico svg{width:17px;height:17px}
.doc-ico.pdf{background:var(--crit-bg);color:var(--crit)}
.doc-ico.xls{background:var(--good-bg);color:var(--good)}
.doc-ico.img{background:var(--info-bg);color:var(--info)}
.doc-meta{flex:1;min-width:0}
.doc-meta .dn{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis}
.doc-meta .dd{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.doc-actions{display:flex;align-items:center;gap:6px;flex:none}
.review-note{margin-top:8px;padding:9px 12px;background:var(--warn-bg);border-radius:7px;font-size:12px;color:#6b4a0c;line-height:1.5}
.review-note.rejected{background:var(--crit-bg);color:#7a1e21}
.review-note.accepted{background:var(--good-bg);color:#155c3f}

.dropzone{border:2px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--ink-3);
  background:var(--surface-2);transition:.15s;cursor:pointer}
.dropzone:hover,.dropzone.over{border-color:var(--navy-500);background:var(--gold-100);color:var(--navy-700)}
.dropzone svg{width:26px;height:26px;opacity:.5;margin-bottom:8px}

/* ---------- Lists ---------- */
.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.list-clean li:last-child{border-bottom:none}
.tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.tick svg{width:12px;height:12px}
.tick.done{background:var(--good-bg);color:var(--good)}
.tick.wait{background:var(--warn-bg);color:var(--warn)}
.tick.todo{background:var(--line-2);color:var(--ink-3)}
.tick.crit{background:var(--crit-bg);color:var(--crit)}
dl.def{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:13px}
dl.def dt{color:var(--ink-3);font-size:12.5px}
dl.def dd{margin:0;text-align:right;font-weight:600}

.notice{display:flex;gap:11px;align-items:flex-start;background:var(--info-bg);border:1px solid #cfe0f1;
  border-radius:9px;padding:12px 14px;font-size:12.5px;color:#1c4f7e;line-height:1.55}
.notice svg{width:16px;height:16px;flex:none;margin-top:1px}
.notice.warn{background:var(--warn-bg);border-color:#eddcae;color:#6b4a0c}
.notice.crit{background:var(--crit-bg);border-color:#f0cccc;color:#7a1e21}
.notice.good{background:var(--good-bg);border-color:#c3e3d2;color:#155c3f}
.notice b{font-weight:700}
.notice a{text-decoration:underline}

.flashes{position:fixed;top:14px;right:18px;z-index:120;display:flex;flex-direction:column;gap:8px;max-width:420px}
.flash{background:#fff;border:1px solid var(--line);border-left:4px solid var(--info);border-radius:9px;
  padding:12px 15px;box-shadow:var(--shadow-lg);font-size:13px;display:flex;gap:10px;align-items:flex-start;animation:slidein .2s ease}
.flash.good{border-left-color:var(--good)} .flash.warn{border-left-color:var(--warn)}
.flash.crit{border-left-color:var(--crit)} .flash.info{border-left-color:var(--info)}
.flash button{background:none;border:none;color:var(--ink-3);font-size:16px;line-height:1;padding:0;margin-left:auto}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ---------- Calculator ---------- */
.calc-grid{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
.calc-out{background:linear-gradient(160deg,var(--navy-800),var(--navy-900));border-radius:var(--r);
  padding:22px;color:#cfe6e6;box-shadow:var(--shadow-lg);position:sticky;top:74px}
.calc-out h3{color:#fff;font-size:14px}
.co-sub{font-size:11.5px;color:#9ec6c8;margin-top:4px;line-height:1.5}
.co-big{font-size:34px;font-weight:750;color:#fff;letter-spacing:-.025em;margin:14px 0 4px;font-variant-numeric:tabular-nums}
.co-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px}
.co-row:last-child{border-bottom:none}
.co-row .lab{color:#9ec6c8}
.co-row .val{font-weight:650;color:#fff;font-variant-numeric:tabular-nums}
.co-metric{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.co-metric .m{background:rgba(255,255,255,.07);border-radius:8px;padding:10px 12px}
.co-metric .ml{font-size:10.5px;color:#9ec6c8;text-transform:uppercase;letter-spacing:.05em}
.co-metric .mv{font-size:17px;font-weight:700;color:#fff;margin-top:3px;font-variant-numeric:tabular-nums}
.co-metric .mv.pass{color:#7fd6a8} .co-metric .mv.fail{color:#f0a0a2}
.co-flag{background:rgba(200,154,58,.16);border:1px solid rgba(200,154,58,.4);border-radius:8px;
  padding:10px 12px;margin-top:12px;font-size:11.5px;color:#e8c877;line-height:1.5}
.co-flag.crit{background:rgba(200,70,70,.16);border-color:rgba(220,120,120,.4);color:#f3b6b7}
.co-foot{font-size:10.5px;color:#9ec6c8;margin-top:14px;line-height:1.55}
table.matrix{width:100%;border-collapse:collapse;font-size:12.5px}
table.matrix th{background:var(--surface-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:700;padding:8px 12px;text-align:left;border-bottom:1px solid var(--line)}
table.matrix td{padding:8px 12px;border-bottom:1px solid var(--line-2)}
table.matrix tr.hot{background:var(--gold-100)}
table.matrix tr.hot td{font-weight:650;color:var(--navy-800)}

/* ---------- Notes ---------- */
.note{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.note:last-child{border-bottom:none}
.note-body{flex:1;min-width:0}
.note-head{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);margin-bottom:4px;flex-wrap:wrap}
.note-head b{color:var(--ink);font-size:12.5px;font-weight:650}
.note-text{font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.note.pinned{background:#fffdf5;margin:0 -18px;padding:13px 18px;border-left:3px solid var(--gold-500)}

/* ---------- Progress bars ---------- */
.funnel{display:flex;flex-direction:column;gap:7px}
.fr{display:flex;align-items:center;gap:11px}
.fl{width:104px;font-size:12px;color:var(--ink-2);flex:none}
.ft{flex:1;height:22px;background:var(--line-2);border-radius:5px;overflow:hidden;position:relative}
.ft span{display:block;height:100%;background:linear-gradient(90deg,var(--navy-600),var(--navy-500));
  color:#fff;font-size:11px;font-weight:650;display:flex;align-items:center;padding:0 8px;min-width:26px;border-radius:5px}
.bar{height:8px;background:var(--line-2);border-radius:4px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--good);border-radius:4px}
.bar.warn span{background:var(--warn)} .bar.crit span{background:var(--crit)}

/* ---------- Repeating rows ---------- */
.rowset{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rowset table{width:100%;border-collapse:collapse;font-size:12.5px}
.rowset th{background:var(--surface-2);padding:9px 11px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-3);font-weight:700;text-align:left;border-bottom:1px solid var(--line)}
.rowset td{padding:6px 8px;border-bottom:1px solid var(--line-2)}
.rowset td input,.rowset td select{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12.5px;font-family:inherit}
.rowset tfoot td{background:var(--surface-2);font-weight:700;border-bottom:none}
.row-del{background:none;border:none;color:var(--ink-3);padding:4px}
.row-del:hover{color:var(--crit)}

/* ---------- Utility ---------- */
.stack{display:flex;flex-direction:column;gap:16px}
.inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spacer{flex:1}
.mb0{margin-bottom:0} .mb8{margin-bottom:8px} .mb14{margin-bottom:14px} .mb18{margin-bottom:18px}
.mt14{margin-top:14px} .mt18{margin-top:18px}
details.disclose summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--navy-700);padding:6px 0}
details.disclose summary:hover{color:var(--navy-800)}

/* ---------- Print ---------- */
@media print{
  .side,.topbar,.btn,.filters,.subtabs,.flashes{display:none!important}
  .shell{grid-template-columns:1fr}
  .content{padding:0}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .two-col{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:1fr}
  .calc-out{position:static}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto}
  .side-top{border-bottom:none;border-right:1px solid rgba(255,255,255,.07)}
  .nav{display:flex;padding:8px;gap:4px}
  .nav-sec{display:none}
  .nav a{white-space:nowrap}
  .side-user{border-top:none;border-left:1px solid rgba(255,255,255,.07)}
  .form-layout{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .two-even{grid-template-columns:1fr}
  .content{padding:16px 14px 50px}
  .lh-stat{border-left:none;padding-left:0}
}