/* SIMOPS Control — design system.
   Palette: deep navy chrome, chart-paper ground, brass accents, signal-flag verdict colours.
   Type: IBM Plex Sans (text), Plex Sans Condensed (labels, codes), Plex Mono (figures, IDs).
   Spacing scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48. Radius: 6 (controls) · 10 (panels). */

@font-face{font-family:'Plex';src:url(/static/fonts/plex-sans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url(/static/fonts/plex-sans-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Plex';src:url(/static/fonts/plex-sans-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url(/static/fonts/plex-sans-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex';src:url(/static/fonts/plex-sans-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plex Cond';src:url(/static/fonts/plex-cond-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Cond';src:url(/static/fonts/plex-cond-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex Cond';src:url(/static/fonts/plex-cond-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/static/fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/static/fonts/plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/static/fonts/plex-mono-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --navy:#0B1A2C; --navy-2:#12263D; --navy-3:#1B3553; --navy-line:#1E3654;
  --ground:#F2F1EE; --panel:#FFFFFF; --panel-2:#FAF9F6; --ink:#14202E; --ink-2:#3D4C5E; --slate:#56677B; --mute:#8FA1B6;
  --line:#E3DFD7; --line-2:#CFC9BD; --line-3:#EFECE6;
  --brass:#B08A45; --brass-ink:#85642A; --brass-pale:#E8D9B8; --brass-wash:#F7F2E7;
  --vP:#2E7356; --vR:#E3A72F; --vM:#B4531F; --vX:#9E2A2B;
  --ok-wash:#E3F0E9; --ok-ink:#1F5A42; --warn-wash:#FBF0D6; --warn-ink:#6B4A0E; --fail-wash:#F5DEDE; --fail-ink:#7A1F20; --na-wash:#ECEAE5;
  --focus:#2F6FB3;
  --font:'Plex',system-ui,-apple-system,'Segoe UI',sans-serif; --cond:'Plex Cond','Plex',sans-serif; --mono:'Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--navy-3)} a:hover{color:var(--navy)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.005em}
h1{font-size:26px;line-height:1.2} h2{font-size:18px;line-height:1.3} h3{font-size:15px}
p{margin:0}
.mono{font-family:var(--mono)} .cond{font-family:var(--cond)}
.muted{color:var(--slate)} .small{font-size:12.5px} .tiny{font-size:11.5px}
.lbl{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--slate)}
.code{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brass-ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------- app shell ---------------- */
.shell{display:flex;min-height:100vh}
.side{flex:0 0 264px;align-self:flex-start;background:var(--navy);color:#C9D2DE;padding:20px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px;text-decoration:none;color:inherit}
.brand b{display:block;font-family:var(--cond);font-weight:700;letter-spacing:.14em;font-size:13px;color:var(--brass-pale)}
.brand span{font-size:11.5px;color:var(--mute)}
.vessel-card{background:var(--navy-2);border-radius:8px;padding:11px 13px;display:flex;flex-direction:column;gap:2px}
.vessel-card b{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vessel-card span{font-family:var(--mono);font-size:11px;color:var(--mute)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:7px;text-decoration:none;color:#C9D2DE;font-size:14px;font-weight:500}
.nav a:hover{background:var(--navy-2);color:#fff}
.nav a[aria-current=page]{background:var(--navy-3);color:#fff;box-shadow:inset 3px 0 0 var(--brass)}
.nav svg{flex:0 0 18px}
.nav .count{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--vM);color:#fff;border-radius:999px;padding:1px 7px}
.nav-sep{font-family:var(--cond);font-size:11.5px;font-weight:600;color:#6F8399;padding:10px 12px 2px}
.copyright{margin:4px 12px 0;font-size:11px;line-height:1.4;color:#6F8399}
.sign-alert{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:8px;background:var(--vX);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.sign-alert:hover{background:#86221F;color:#fff}
.sign-alert .go{margin-left:auto;border:1px solid rgba(255,255,255,.6);border-radius:6px;padding:4px 10px;font-size:12.5px}
.top-logout{display:inline-flex}
.to-top{position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;border:0;background:var(--navy-3);color:#fff;box-shadow:0 6px 18px rgba(11,26,44,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--navy)}
@media print{.to-top{display:none}}
.side-foot{margin-top:auto;border-top:1px solid var(--navy-line);padding:14px 8px 0;display:flex;flex-direction:column;gap:9px;font-size:12px}
.side-foot .who{color:#fff;font-weight:600;font-size:13px}
.net{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:#5FB38A;flex:0 0 8px}
.net.off .dot{background:var(--vR)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:var(--panel);border-bottom:1px solid var(--line);padding:18px 32px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.top .crumb{font-size:12.5px;color:var(--slate);margin-bottom:4px}
.top .crumb a{color:var(--slate);text-decoration:none} .top .crumb a:hover{text-decoration:underline}
.top-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.content{padding:24px 32px 48px;display:flex;flex-direction:column;gap:20px;max-width:1480px;width:100%}
.btn.menu-btn{display:none}
@media (min-width:901px){.shell{background:linear-gradient(90deg,var(--navy) 264px,var(--ground) 264px)}}

/* ---------------- panels ---------------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line-3)}
.panel-h h2{font-size:15.5px}
.panel-b{padding:16px 20px}
.panel-f{padding:12px 20px;border-top:1px solid var(--line-3);background:var(--panel-2);border-radius:0 0 10px 10px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.dark-panel{background:var(--navy);border-color:var(--navy);color:#C9D2DE}
.dark-panel h2,.dark-panel b{color:#fff}

/* ---------------- stat tiles ---------------- */
.stat{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.stat .n{font-family:var(--mono);font-size:30px;font-weight:500;line-height:1.1;color:var(--ink)}
.stat .t{font-size:13px;color:var(--ink-2);font-weight:500}
.stat .s{font-size:12px;color:var(--slate)}
.stat.alert{box-shadow:inset 4px 0 0 var(--vM)}
.stat.danger{box-shadow:inset 4px 0 0 var(--vX)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:7px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font:600 14px var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--slate);color:var(--ink)}
.btn-primary{background:var(--navy-3);border-color:var(--navy-3);color:#fff}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-brass{background:var(--brass);border-color:var(--brass);color:#fff}
.btn-brass:hover{background:var(--brass-ink);border-color:var(--brass-ink);color:#fff}
.btn-danger{background:var(--panel);border-color:#D9B3B3;color:var(--vX)}
.btn-danger:hover{background:var(--fail-wash);border-color:var(--vX);color:var(--fail-ink)}
.btn-sm{height:32px;padding:0 11px;font-size:13px}
.btn-lg{height:48px;padding:0 22px;font-size:15px}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-link{background:none;border:0;padding:0;height:auto;color:var(--navy-3);font-weight:600;text-decoration:underline;cursor:pointer}

/* ---------------- forms ---------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--slate)}
.input,select.input,textarea.input{width:100%;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:7px;background:#fff;color:var(--ink);font:500 14px var(--font)}
textarea.input{height:auto;min-height:88px;padding:10px 12px;line-height:1.5;resize:vertical}
.input:focus{border-color:var(--navy-3);outline:none;box-shadow:0 0 0 3px rgba(47,111,179,.18)}
.input.mono{font-family:var(--mono);letter-spacing:.04em}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--navy-3);flex:0 0 18px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:7px;overflow:hidden}
.seg label{position:relative}
.seg input{position:absolute;opacity:0}
.seg span{display:inline-flex;align-items:center;height:34px;padding:0 14px;font-size:13px;font-weight:600;cursor:pointer;border-left:1px solid var(--line-2);background:#fff}
.seg label:first-child span{border-left:0}
.seg input:checked+span{background:var(--navy-3);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-2px}

/* ---------------- messages ---------------- */
.flash{padding:12px 16px;border-radius:8px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;border:1px solid}
.flash.ok{background:var(--ok-wash);color:var(--ok-ink);border-color:#BFDCCB}
.flash.warn{background:var(--warn-wash);color:var(--warn-ink);border-color:#EED9A6}
.flash.fail{background:var(--fail-wash);color:var(--fail-ink);border-color:#E6BDBD}
.flash.info{background:#E8EEF5;color:#1B3553;border-color:#C8D5E4}
.flash b{font-weight:600}

/* ---------------- chips & verdict tiles ---------------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--na-wash);color:var(--ink-2)}
.chip.ok{background:var(--ok-wash);color:var(--ok-ink)} .chip.warn{background:var(--warn-wash);color:var(--warn-ink)}
.chip.fail{background:var(--fail-wash);color:var(--fail-ink)} .chip.info{background:#E3EAF3;color:var(--navy-3)}
.chip.navy{background:var(--navy-3);color:#fff} .chip.brass{background:var(--brass-wash);color:var(--brass-ink)}
.v{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 7px;border-radius:5px;font:600 12px var(--mono);white-space:nowrap}
.vP{background:var(--vP);color:#fff} .vR{background:var(--vR);color:var(--ink)} .vM{background:var(--vM);color:#fff} .vX{background:var(--vX);color:#fff} .v0{background:var(--line-3);color:var(--slate)}
.cls{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 6px;border-radius:5px;font:600 11.5px var(--mono)}
.cA{background:var(--navy-3);color:#fff} .cB{background:var(--slate);color:#fff} .cC{background:#DCE2E8;color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap}
.status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--slate)}
.st-draft::before{background:#9AA6B4} .st-signing::before{background:var(--vR)} .st-authorised::before{background:var(--vP)}
.st-closed::before{background:var(--navy-3)} .st-cancelled::before{background:#C9C2B5} .st-override::before{background:var(--vX)}

/* The verdict band — the one loud element in the system */
.verdict{border-radius:10px;padding:18px 22px;display:flex;flex-direction:column;gap:6px}
.verdict .vt{font-family:var(--cond);font-size:24px;font-weight:700;letter-spacing:.01em;line-height:1.1}
.verdict .vx{font-size:13.5px;line-height:1.5;max-width:68ch;opacity:.95}
.verdict.k-select{background:var(--na-wash);color:var(--ink)}
.verdict.k-permitted{background:var(--vP);color:#fff}
.verdict.k-conditions{background:var(--vR);color:var(--ink)}
.verdict.k-master{background:var(--vM);color:#fff}
.verdict.k-toomuch,.verdict.k-prohibited,.verdict.k-absolute{background:var(--vX);color:#fff}
.verdict-sm{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:5px;font:700 11.5px var(--cond);letter-spacing:.03em;white-space:nowrap}

/* ---------------- tables ---------------- */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
.t th{text-align:left;font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--slate);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
.t td{padding:11px 14px;border-bottom:1px solid var(--line-3);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t tbody tr:hover td{background:#FBFAF7}
.t td.num,.t th.num{text-align:right}
.t td.num{font-family:var(--mono)}
.t a.rowlink{font-weight:600;text-decoration:none;color:var(--ink)} .t a.rowlink:hover{text-decoration:underline}
.empty{padding:40px 20px;text-align:center;color:var(--slate);display:flex;flex-direction:column;gap:10px;align-items:center}
.empty b{color:var(--ink);font-size:15px}

/* ---------------- filters ---------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters .input{height:36px;width:auto;min-width:150px;font-size:13px}
.search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:7px;background:#fff;min-width:240px}
.search input{border:0;outline:0;font:500 13.5px var(--font);flex:1;background:transparent;color:var(--ink)}

/* ---------------- definition lists ---------------- */
dl.kv{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 16px;margin:0;font-size:13.5px}
dl.kv dt{color:var(--slate)} dl.kv dd{margin:0;font-weight:500}

/* ---------------- RECO-016 form ---------------- */
.part{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.part-h{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.part-h .pl{flex:0 0 74px;background:var(--navy);color:var(--brass-pale);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--cond);line-height:1}
.part-h .pl small{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--mute)}
.part-h .pl b{font-size:26px;font-weight:700;margin-top:3px}
.part-h .pt{flex:1;padding:12px 18px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.part-h .pt h2{font-size:16px}
.part-h .ps{display:flex;align-items:center;padding:0 18px}
.part-b{padding:16px 20px}
.clause-sec{margin-top:14px} .clause-sec:first-child{margin-top:0}
.clause-sec h3{font-family:var(--cond);font-size:13px;font-weight:600;color:var(--brass-ink);padding-bottom:6px;border-bottom:1px solid var(--line-3);margin-bottom:4px}
.clause{display:grid;grid-template-columns:22px 44px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px dashed var(--line-3);align-items:start}
.clause:last-child{border-bottom:0}
.clause input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--vP)}
.clause .cid{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--slate);padding-top:2px}
.sig-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sig{border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;min-height:118px;background:var(--panel-2)}
.sig.done{background:var(--ok-wash);border-color:#BFDCCB}
.sig.me{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
.sig .r{font-family:var(--cond);font-weight:600;font-size:13px}
.sig .n{font-size:13px;font-weight:600}
.ra{width:100%;border-collapse:collapse;font-size:13px}
.ra th{background:var(--navy);color:#E6EAF0;font-family:var(--cond);font-weight:600;font-size:12px;text-align:left;padding:9px 10px}
.ra td{border-bottom:1px solid var(--line-3);padding:10px;vertical-align:top}
.ra ul{margin:0;padding-left:16px} .ra li{margin:2px 0}
.lvl{display:inline-flex;height:22px;align-items:center;padding:0 8px;border-radius:4px;font:600 11.5px var(--cond)}
.lvl-High{background:var(--fail-wash);color:var(--fail-ink)} .lvl-Medium{background:var(--warn-wash);color:var(--warn-ink)} .lvl-Low{background:var(--ok-wash);color:var(--ok-ink)}
.att{display:grid;grid-template-columns:minmax(0,1.2fr) 120px minmax(0,2fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line-3);align-items:center}
.att:last-child{border-bottom:0}
.file{display:flex;align-items:center;gap:10px;font-size:13px}
.file a{font-weight:600}
.progress{height:6px;background:var(--line-3);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--vP)}
.steps{display:flex;gap:0;flex-wrap:wrap}
.steps .s{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--slate);padding:0 14px 0 0}
.steps .s i{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 11px var(--mono);font-style:normal;background:var(--line-3);color:var(--slate)}
.steps .s.done i{background:var(--vP);color:#fff} .steps .s.now i{background:var(--brass);color:#fff} .steps .s.now{color:var(--ink)}
.steps .s+.s::before{content:'';width:22px;height:1px;background:var(--line-2);margin-right:6px}

/* ---------------- check page ---------------- */
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.slot{border:1.5px solid var(--line-3);background:var(--panel-2);border-radius:9px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:128px;cursor:pointer}
.slot.active{border-color:var(--brass);background:var(--brass-wash)}
.slot .sl{font-size:12px;font-weight:600;color:var(--slate)}
.slot .sn{font-size:14px;font-weight:600;line-height:1.3}
.slot select{height:34px;font-size:13px}
.reg-group{border-top:1px solid var(--line-3)}
.reg-group>b{display:block;padding:10px 0 6px;font-family:var(--cond);font-size:12.5px;font-weight:600;color:var(--brass-ink)}
.ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px;padding-bottom:10px}
.op{display:grid;grid-template-columns:30px 54px minmax(0,1fr) 32px;gap:8px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:7px;background:#fff;padding:7px 9px;cursor:pointer;font:500 13px var(--font);color:var(--ink);min-height:44px}
.op:hover{border-color:var(--slate)}
.op.taken{background:var(--navy);border-color:var(--navy);color:#fff}
.op.taken .code{color:var(--brass-pale)}
.checks{display:flex;flex-direction:column}
.ckrow{display:grid;grid-template-columns:150px minmax(0,1fr) 54px;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-3);font-size:13px;align-items:center}
.ckrow:last-child{border-bottom:0}
.mark{display:inline-flex;justify-content:center;height:22px;align-items:center;border-radius:4px;font:600 11px var(--mono)}
.m-ok{background:var(--ok-wash);color:var(--ok-ink)} .m-warn{background:var(--warn-wash);color:var(--warn-ink)} .m-fail{background:var(--fail-wash);color:var(--fail-ink)} .m-na{background:var(--na-wash);color:var(--slate)}
.trig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.trig label{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:7px;padding:9px 11px;cursor:pointer;font-size:12.5px;background:#fff}
.trig label:has(input:checked){background:var(--warn-wash);border-color:var(--vR)}
.trig b{display:block;font-size:13px}
.sticky{position:sticky;top:16px}

/* ---------------- matrix ---------------- */
.mx-wrap{overflow:auto;max-height:78vh;border-radius:10px;border:1px solid var(--line);background:#fff}
table.mx{border-collapse:separate;border-spacing:0;font-family:var(--mono);font-size:10.5px}
.mx th,.mx td{width:30px;min-width:30px;height:28px;text-align:center;padding:0;border-right:1px solid #fff;border-bottom:1px solid #fff}
.mx thead th{position:sticky;top:0;background:var(--panel-2);z-index:2;height:86px;vertical-align:bottom;padding-bottom:6px}
.mx thead th span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:600;color:var(--ink-2)}
.mx tbody th{position:sticky;left:0;background:var(--panel-2);z-index:1;width:auto;min-width:240px;text-align:left;padding:0 10px;font-family:var(--font);font-size:12px;font-weight:500;white-space:nowrap}
.mx tbody th .code{margin-right:8px}
.mx thead th:first-child{left:0;z-index:3}
.mx td{font-weight:600;cursor:default}
.mx td.self{background:var(--line-3)}
.mx td.hl,.mx th.hl{outline:2px solid var(--navy);outline-offset:-2px}
.legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12.5px}

/* ---------------- auth pages ---------------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-side{background:var(--navy);color:#C9D2DE;padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative;overflow:hidden}
.auth-side h1{font-size:34px;color:#fff;max-width:14ch;line-height:1.15}
.auth-side p{max-width:46ch;font-size:15px;line-height:1.6}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-card{width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px}
.rose{position:absolute;right:-120px;bottom:-120px;opacity:.10}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 14px;font-weight:600;font-size:13.5px;color:var(--slate);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a[aria-current=page]{color:var(--ink);border-bottom-color:var(--brass)}

/* ---------------- charts ---------------- */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:160px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:13px}
.bar .track{height:12px;background:var(--line-3);border-radius:3px;overflow:hidden;display:flex}
.bar .track i{display:block;height:100%}
.bar .num{font-family:var(--mono);text-align:right}
.stackbar{display:flex;height:14px;border-radius:3px;overflow:hidden;background:var(--line-3)}
.stackbar i{display:block;height:100%}
.spark{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px}
.spark .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;min-width:6px;position:relative}
.spark .col i{display:block;border-radius:2px 2px 0 0}
.spark-x{display:flex;gap:3px;font:500 10.5px var(--mono);color:var(--slate)}
.spark-x span{flex:1;text-align:center}

/* ---------------- timeline (audit) ---------------- */
.tl{display:flex;flex-direction:column}
.tl .e{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line-3);font-size:13px}
.tl .e:last-child{border-bottom:0}
.tl time{font-family:var(--mono);font-size:11.5px;color:var(--slate)}

/* ---------------- dialog ---------------- */
dialog{border:0;border-radius:12px;padding:0;max-width:460px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(11,26,44,.35)}
dialog::backdrop{background:rgba(11,26,44,.55)}
dialog .dh{padding:18px 22px 6px} dialog .db{padding:6px 22px 16px;display:flex;flex-direction:column;gap:12px} dialog .df{padding:14px 22px;background:var(--panel-2);display:flex;justify-content:flex-end;gap:8px}

/* ---------------- night (bridge) mode ---------------- */
html[data-theme=night]{--ground:#050505;--panel:#0C0606;--panel-2:#110808;--ink:#C0392B;--ink-2:#A83226;--slate:#8E2A1F;--line:#2A0F0C;--line-2:#3A1410;--line-3:#1C0A08;--navy:#000;--navy-2:#120707;--navy-3:#3A0F0B;--brass:#8E2A1F;--brass-ink:#B8392A;--brass-pale:#C0392B;--brass-wash:#160807;--mute:#7A231A}
html[data-theme=night] body{color:var(--ink)}
html[data-theme=night] .side,html[data-theme=night] .nav a{color:#9C2F22}
html[data-theme=night] .input,html[data-theme=night] .op,html[data-theme=night] .btn,html[data-theme=night] .trig label,html[data-theme=night] .search,html[data-theme=night] .seg span,html[data-theme=night] .mx-wrap{background:#0C0606;color:var(--ink);border-color:var(--line-2)}
html[data-theme=night] .vP,html[data-theme=night] .vR,html[data-theme=night] .vM,html[data-theme=night] .vX,html[data-theme=night] .verdict{filter:brightness(.45) saturate(.7)}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){.split{grid-template-columns:minmax(0,1fr)} .sticky{position:static} .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .sig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .shell{flex-direction:column}
  .side{position:fixed;inset:0 auto 0 0;width:264px;transform:translateX(-100%);transition:transform .2s;z-index:50}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(11,26,44,.5)}
  .btn.menu-btn{display:inline-flex}
  .top{padding:14px 16px} .content{padding:16px 16px 40px}
  .g2,.g3,.form-grid,.slots,.trig{grid-template-columns:minmax(0,1fr)}
  .auth{grid-template-columns:minmax(0,1fr)} .auth-side{padding:28px 24px} .auth-side h1{font-size:26px}
  .sig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .att{grid-template-columns:minmax(0,1fr)} dl.kv{grid-template-columns:minmax(0,1fr)}
  .ckrow{grid-template-columns:minmax(0,1fr) 54px} .ckrow .lbl{grid-column:1/-1}
}

/* ---------------- print ---------------- */
@media print{.side,.top-actions,.no-print,.menu-btn{display:none!important} body{background:#fff} .content{padding:0} .panel,.part{border-color:#999;break-inside:avoid}}