:root{
  --bg:#eef2f4; --surface:#ffffff; --surface-2:#f5f8f9; --line:#d6dfe3; --ink:#12242f; --muted:#5b6f7a;
  --hull:#12304a; --hull-ink:#e9f1f5; --accent:#0e7d8a; --accent-soft:#d5eef0;
  --ok:#1f8a4c; --ok-soft:#dcf1e4; --warn:#b86e00; --warn-soft:#fbecd2; --bad:#b83a32; --bad-soft:#f7dedb;
  --bar:#0e7d8a; --bar-2:#9fc8cf;
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark; --bg:#0c161d; --surface:#13212b; --surface-2:#182a35; --line:#26404e; --ink:#e3edf1; --muted:#90a7b2;
  --hull:#0a1f30; --hull-ink:#dbe8ee; --accent:#3fb6c2; --accent-soft:#16404a;
  --ok:#5cc98a; --ok-soft:#173a28; --warn:#e7a54a; --warn-soft:#3d2c12; --bad:#ec7b72; --bad-soft:#40201d; --bar:#3fb6c2; --bar-2:#2a5e68;
}}
:root[data-theme="dark"]{
  color-scheme:dark; --bg:#0c161d; --surface:#13212b; --surface-2:#182a35; --line:#26404e; --ink:#e3edf1; --muted:#90a7b2;
  --hull:#0a1f30; --hull-ink:#dbe8ee; --accent:#3fb6c2; --accent-soft:#16404a;
  --ok:#5cc98a; --ok-soft:#173a28; --warn:#e7a54a; --warn-soft:#3d2c12; --bad:#ec7b72; --bad-soft:#40201d; --bar:#3fb6c2; --bar-2:#2a5e68;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--body);}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px;padding-block:0 48px}
header.top{background:var(--hull);color:var(--hull-ink);padding-block:18px 0}
header.top .wrap{padding-block:0}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand h1{font:700 30px/1 var(--display);letter-spacing:.02em;margin:0;text-transform:uppercase}
.brand span{font:500 12px var(--mono);opacity:.7;letter-spacing:.06em}
.fleet{display:flex;gap:6px;overflow-x:auto;padding-block:16px 0;scrollbar-width:thin}
.fleet button{flex:none;font:600 15px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;padding:10px 14px 12px;border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--hull-ink);opacity:.72;cursor:pointer;display:flex;gap:8px;align-items:center}
.fleet button:hover{opacity:1;background:rgba(255,255,255,.06)}
.fleet button[aria-pressed="true"]{background:var(--bg);color:var(--ink);opacity:1}
.fleet button .n{font:500 11px var(--mono);padding:2px 6px;border-radius:10px;background:rgba(255,255,255,.14)}
.fleet button[aria-pressed="true"] .n{background:var(--accent-soft);color:var(--accent)}
.fleet button.add{border:1px dashed rgba(255,255,255,.35);border-radius:8px;margin-bottom:8px;padding:8px 12px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.head2{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;padding-block:22px 14px}
.head2 h2{font:700 34px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0;text-wrap:balance}
.head2 p{margin:4px 0 0;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{font:600 13px var(--body);border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.kpi .l{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font:600 30px/1.1 var(--display);margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.spend .v{color:var(--accent)}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.kpi.spend{grid-column:1/-1}}

.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:10px;margin-top:10px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}
.panel h3{font:600 17px/1 var(--display);text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px;display:flex;justify-content:space-between;gap:8px}
.panel h3 small{font:400 12px var(--body);text-transform:none;letter-spacing:0;color:var(--muted)}
svg text{fill:var(--muted);font:11px var(--mono)}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surface-2);margin-bottom:14px}
.legend{display:grid;gap:8px}
.legend div{display:flex;align-items:center;gap:8px;font-size:13px}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.legend b{margin-left:auto;font:500 13px var(--mono)}
.sup{display:grid;gap:9px}
.sup .row{cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13px}
.sup .row .t{height:6px;border-radius:3px;background:var(--surface-2);grid-column:1/-1;overflow:hidden}
.sup .row .t i{display:block;height:100%;background:var(--bar)}
.sup .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup .am{font:500 12px var(--mono);color:var(--muted)}

.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 10px}
.tools input,.tools select{font:14px var(--body);padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.tools input{flex:1 1 220px;min-width:0}
.tablebox{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:1100px}
th{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0;cursor:pointer;user-select:none;white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--surface-2)}
td.po,td.amt{font:13px var(--mono);white-space:nowrap}
td.amt{text-align:right;font-variant-numeric:tabular-nums}
th.r{text-align:right}
.d1{font-weight:500}.d2{font-size:12px;color:var(--muted)}
.pill{display:inline-block;font:600 11px var(--mono);letter-spacing:.04em;padding:3px 8px;border-radius:10px;white-space:nowrap}
.p-COMPLETED{background:var(--ok-soft);color:var(--ok)}
.p-IN{background:var(--warn-soft);color:var(--warn)}
.p-CANCELLED,.p-ISSUE{background:var(--bad-soft);color:var(--bad)}
.p-other{background:var(--surface-2);color:var(--muted)}
.pri{font:600 10px var(--mono);letter-spacing:.06em}
.pri.HIGH{color:var(--bad)}.pri.MEDIUM{color:var(--warn)}.pri.LOW{color:var(--muted)}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.foot{font-size:12px;color:var(--muted);margin-top:10px}
.notice{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:10px 14px;margin-top:14px;font-size:13px}

dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 40px)}
dialog::backdrop{background:rgba(8,20,28,.55)}
dialog form{padding:20px;display:grid;gap:14px}
dialog h4{font:700 22px/1 var(--display);text-transform:uppercase;margin:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields .full{grid-column:1/-1}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
label{display:grid;gap:4px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
label input,label select,label textarea{font:14px var(--body);text-transform:none;letter-spacing:0;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
.amtrow{display:grid;grid-template-columns:90px 1fr;gap:6px}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dlg-actions .sp{flex:1}
.confirm{font-size:13px;color:var(--bad)}
.views{margin-left:auto;display:flex;gap:4px;background:rgba(255,255,255,.08);padding:3px;border-radius:9px}
.views button{font:600 13px var(--body);border:0;background:transparent;color:var(--hull-ink);padding:6px 12px;border-radius:7px;cursor:pointer;opacity:.75}
.views button[aria-pressed="true"]{background:var(--hull-ink);color:var(--hull);opacity:1}
.crit{font:600 10px var(--mono);letter-spacing:.06em;padding:3px 7px;border-radius:9px}
.crit.Critical{background:var(--bad-soft);color:var(--bad)}.crit.Normal{background:var(--surface-2);color:var(--muted)}
.st-Inactive{color:var(--muted);text-decoration:line-through}
.hint{font-size:12px;color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--body)}
dialog.wide{width:min(980px,calc(100vw - 32px))}
.imp-note{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
ul.imp-note{padding-left:18px;display:grid;gap:2px}
.imp-grid{display:grid;gap:12px}
.imp-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
@media (max-width:640px){.imp-sum{grid-template-columns:repeat(2,minmax(0,1fr))}}
.imp-sum div{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface-2)}
.imp-sum b{display:block;font:600 24px/1.1 var(--display);font-variant-numeric:tabular-nums}
.imp-sum span{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.imp-sec{margin-top:12px}
.imp-sec summary{cursor:pointer;font:600 15px var(--display);text-transform:uppercase;letter-spacing:.05em;padding:6px 0}
.imp-box{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.imp-box table{min-width:720px}
.imp-box td,.imp-box th{padding:6px 10px;font-size:12.5px}
.imp-box th{cursor:default}
.chg{font:12px var(--mono);display:block}
.chg s{color:var(--bad)}.chg ins{color:var(--ok);text-decoration:none}
.imp-files{font-size:12px;color:var(--muted);margin:0 0 8px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--hull);color:var(--hull-ink);padding:10px 16px;border-radius:8px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* ---- self-hosted extras */
.userbox{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--hull-ink)}
.userbox a,.userbox button{color:var(--hull-ink);opacity:.8;font:500 12px var(--body);background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}
.userbox a:hover,.userbox button:hover{opacity:1}
.role{font:600 10px var(--mono);letter-spacing:.06em;padding:2px 7px;border-radius:9px;background:rgba(255,255,255,.14)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding-inline:16px;background:var(--hull)}
.login{background:var(--surface);color:var(--ink);border-radius:12px;padding:28px;width:min(400px,100%);display:grid;gap:14px}
.login h1{font:700 30px/1 var(--display);text-transform:uppercase;margin:0}
.login p{margin:0;color:var(--muted);font-size:13px}
.err{background:var(--bad-soft);color:var(--bad);padding:8px 12px;border-radius:8px;font-size:13px}
.okmsg{background:var(--ok-soft);color:var(--ok);padding:8px 12px;border-radius:8px;font-size:13px}
.log{display:grid;gap:0}
.log div{display:grid;grid-template-columns:130px 90px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.log div:last-child{border-bottom:0}
.log .t{font:12px var(--mono);color:var(--muted)}
@media (max-width:600px){.log div{grid-template-columns:1fr}}
.act-create{color:var(--ok)}.act-update{color:var(--warn)}.act-delete{color:var(--bad)}