@font-face{font-family:'Mars Mission';src:url('fonts/MarsMission.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* Layout: fixed charcoal sidebar + working canvas; summary first, detail below. */
:root{
 --bg:#F2F2F0;--surface:#FFFFFF;--surface2:#F7F7F5;--ink:#141414;--mute:#6B6B66;--line:#DEDDD8;
 --head:#E8E7E2;--th:#A83A0C;--amber:#F29A1C;--orange:#E4571E;--red:#E2382F;--orange-ink:#A83A0C;
 --ok:#1E7A46;--ok-bg:#E3F2E9;--warn:#8A5A00;--warn-bg:#FBEFD3;--bad:#B02A22;--bad-bg:#FBE4E2;--info:#2F4A6B;--info-bg:#E4EBF3;
 --side:#1B1B1A;--side-ink:#ECEBE7;--side-mute:#8D8B85;
 --f-body:'Manrope',system-ui,sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,monospace;--f-mark:'Mars Mission','Manrope',sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --bg:#0F0F0F;--surface:#191918;--surface2:#212120;--ink:#EDECE8;--mute:#9A9992;--line:#2E2E2C;--th:#F7B045;--head:#34332F;
 --orange-ink:#FF8A57;--ok:#6FD39A;--ok-bg:#16301F;--warn:#F2C25C;--warn-bg:#35280C;--bad:#FF8F88;--bad-bg:#3A1714;--info:#9DBBE0;--info-bg:#1A2634;--side:#0A0A0A;color-scheme:dark}}
:root[data-theme="dark"]{
 --bg:#0F0F0F;--surface:#191918;--surface2:#212120;--ink:#EDECE8;--mute:#9A9992;--line:#2E2E2C;--th:#F7B045;--head:#34332F;
 --orange-ink:#FF8A57;--ok:#6FD39A;--ok-bg:#16301F;--warn:#F2C25C;--warn-bg:#35280C;--bad:#FF8F88;--bad-bg:#3A1714;--info:#9DBBE0;--info-bg:#1A2634;--side:#0A0A0A;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--f-body);padding-left:0;padding-right:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}
.brandlock{display:flex;flex-direction:column;gap:22px;min-width:0;--mk:42px;--mg:16px}
.wm{display:inline-flex;flex-direction:column;align-items:stretch}
.wm b{font-family:var(--f-mark);font-weight:800;font-size:21px;letter-spacing:.08em;line-height:1;margin-right:-.08em;color:#fff}
.wm small{display:flex;justify-content:space-between;width:0;min-width:100%;margin-top:7px;font:500 9.5px/1 var(--f-mono);color:rgba(255,255,255,.62)}
.wm small i{font-style:normal;display:block}.wm small i.sp{width:.55em}
.ptl{margin-left:calc(var(--mk) + var(--mg));font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.brandrow{display:flex;gap:var(--mg);align-items:center}
.brandrow svg{width:var(--mk);height:56px;flex:none}
@media (max-width:960px){.wm b{font-size:17px}.wm small{font-size:7.6px;margin-top:6px}.brandrow svg{height:46px}.brandlock{--mk:35px;--mg:14px}}

/* login */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.l-brand{background:var(--side);color:var(--side-ink);padding:56px max(24px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:space-between;gap:48px;position:relative;overflow:hidden}
.l-brand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--amber) 0 40%,var(--orange) 40% 75%,var(--red) 75%)}
.l-brand h1{font-size:clamp(34px,4.4vw,60px);line-height:1.04;letter-spacing:-.03em;margin:0;font-weight:700;max-width:12ch;text-wrap:balance}
.l-brand p{color:var(--side-mute);max-width:42ch;margin:16px 0 0}
.l-form{display:flex;align-items:center;justify-content:center;padding:48px max(24px,env(safe-area-inset-right,0px))}
.l-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px}
.l-card h2{margin:0;font-size:26px;letter-spacing:-.02em}
.tabs2{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.tabs2 button{padding:11px;background:var(--surface);border:0;cursor:pointer;font-weight:600;color:var(--mute)}
.tabs2 button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
.in{border:1px solid var(--line);background:var(--surface);padding:11px 12px;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500;width:100%;border-radius:0}
.in:focus{border-color:var(--orange);outline:none}
textarea.in{min-height:96px;resize:vertical}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--bg);padding:11px 18px;font-weight:700;cursor:pointer;letter-spacing:.02em;border-radius:0}
.btn:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn.go{background:linear-gradient(90deg,var(--amber),var(--orange));border-color:var(--orange);color:#fff}
.btn.go:hover{background:linear-gradient(90deg,var(--orange),var(--red));border-color:var(--red);color:#fff}
.btn.white{background:#fff;border-color:#fff;color:#111}
.btn.white:hover{background:#f1f1f1;border-color:#f1f1f1;color:#111}
a.btn{display:inline-block;text-decoration:none}
.btn.sm{padding:6px 11px;font-size:12px}
.hint{font-size:12px;color:var(--mute)}
.proto{font:500 11px var(--f-mono);color:var(--mute);border:1px dashed var(--line);padding:10px 12px}

/* shell */
.shell{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100%}
.side{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;gap:28px;padding:24px 0;position:sticky;top:0;height:100vh;height:100dvh}
.side .brandlock{padding:0 22px}
.nav{display:flex;flex-direction:column}
.nav a{background:none;border:0;text-align:left;color:var(--side-mute);padding:11px 22px;font-weight:600;display:flex;justify-content:space-between;gap:8px;border-left:3px solid transparent;text-decoration:none}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.06);border-left-color:var(--orange)}
.nav .badge{font:500 11px var(--f-mono);background:var(--red);color:#fff;padding:0 6px;min-width:20px;text-align:center}
.who{margin-top:auto;padding:0 22px;display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--side-mute)}
.who b{color:#fff;font-size:13px;display:block}
.who .row{display:flex;gap:8px}
.who button{background:none;border:1px solid #3a3a38;color:var(--side-ink);padding:6px 10px;cursor:pointer;font-size:12px;border-radius:0}
.who button:hover{border-color:#fff}
.main{padding:32px max(24px,env(safe-area-inset-right,0px)) 64px 36px;min-width:0;display:flex;flex-direction:column;gap:24px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.head h1{margin:0;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1.05;font-weight:700}
.head p{margin:6px 0 0;color:var(--mute)}
.proto-bar{background:var(--warn-bg);color:var(--warn);font:500 12px var(--f-mono);padding:8px 14px;display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.kpi{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
.kpi strong{font-size:30px;letter-spacing:-.03em;line-height:1.1;font-weight:700}
.kpi em{font-style:normal;font-size:12px;color:var(--mute)}
.kpi.alert strong{color:var(--bad)}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}
.panel{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.panel>header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel>header{background:var(--head);padding:18px 20px}
.panel>header h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.main>.panel+.panel{margin-top:20px}
.panel .pad{padding:20px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--th);font-weight:800;text-align:left;padding:12px 20px;border-bottom:2px solid var(--orange);white-space:nowrap;background:var(--surface2)}
td{padding:13px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--surface2)}
td.r,th.r{text-align:right}
td.r,td.num,.pill{white-space:nowrap}
table.compact{min-width:0}
table.compact th,table.compact td{padding-left:14px;padding-right:14px}
td.r{font-variant-numeric:tabular-nums}
.pill{display:inline-block;font:600 11px var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px}
.p-paid,.p-live,.p-resolved{background:var(--ok-bg);color:var(--ok)}
.p-unpaid,.p-open,.p-soon{background:var(--warn-bg);color:var(--warn)}
.p-overdue,.p-urgent{background:var(--bad-bg);color:var(--bad)}
.p-suspended{background:var(--red);color:#fff}
.p-ended{background:var(--surface2);color:var(--mute)}
.p-proof,.p-progress,.p-active{background:var(--info-bg);color:var(--info)}
.muted{color:var(--mute)}
.bar{height:6px;background:var(--line);position:relative;min-width:80px}
.bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--amber),var(--orange))}
.list{display:flex;flex-direction:column}
.li{display:flex;justify-content:space-between;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}
.li:last-child{border-bottom:0}
.li b{display:block}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:start}
.col{background:var(--surface2);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.col>h3{margin:0;padding:12px 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
.col .cards{display:flex;flex-direction:column;gap:10px;padding:10px;min-height:60px}
.card{background:var(--surface);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:8px}
.card select{border:1px solid var(--line);background:var(--surface);padding:5px;font-size:12px;border-radius:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line);background:var(--surface);padding:6px 12px;cursor:pointer;font-weight:600;font-size:12px;border-radius:0;color:var(--mute)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.form{align-items:start;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding:20px}
.form .wide{grid-column:1/-1}
.form.one{grid-template-columns:minmax(0,1fr)}
.form .actions{gap:16px}
.form .hint{line-height:1.5}
.stages{display:flex;gap:0}
.stages span{flex:1;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-top:8px;border-top:3px solid var(--line);font-weight:600}
.stages span.on{border-top-color:var(--orange);color:var(--ink)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;justify-content:flex-end}
.drawer{width:min(520px,100%);background:var(--surface);height:100%;overflow:auto;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer>header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.drawer>header h2{margin:0;font-size:18px}
.drawer .body{padding:24px;display:flex;flex-direction:column;gap:18px}
.kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px 14px;font-size:13px}
.kv dt{color:var(--mute);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding-top:2px}
.kv dd{margin:0;overflow-wrap:anywhere}
.msg{border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:4px}
.msg.me{background:var(--surface2)}
.msg small{color:var(--mute)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;font-weight:600;z-index:40}
.empty{padding:32px 20px;color:var(--mute);text-align:center}
.legend{display:flex;gap:16px;font-size:12px;color:var(--mute)}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
@media (max-width:900px){
 .login{grid-template-columns:1fr}.l-brand{padding-block:32px}
 .shell{grid-template-columns:minmax(0,1fr)}.side{min-width:0}.nav{max-width:100%}
 .side{position:relative;height:auto;flex-direction:column;gap:12px;padding:16px 0}
 .nav{flex-direction:row;overflow-x:auto}.nav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
 .nav a[aria-current="page"]{border-bottom-color:var(--orange)}
 .who{margin-top:0}
 .main{padding:24px 16px 56px}
 .grid2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* portal additions */
.plain{max-width:520px;margin:12vh auto;padding:0 24px;display:flex;flex-direction:column;gap:12px}
.flash{padding:12px 16px;font-weight:600;border:1px solid var(--line)}
.flash.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.flash.err{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.preview{background:var(--info-bg);color:var(--info);padding:10px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-weight:600}
.inline{display:inline}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tw a.rowlink{color:inherit;text-decoration:none;display:block}
.tw tr.click td a{color:inherit;text-decoration:none;font-weight:700}
a.btn{display:inline-block;text-decoration:none}
a{color:var(--orange-ink)}
.detail{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px}
.detail .pad{display:flex;flex-direction:column;gap:16px}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.tmp{font:500 18px var(--f-mono);letter-spacing:.04em}
.sr{position:absolute;left:-9999px}
.err-text{color:var(--bad);font-weight:600}
.cell-form{display:flex;gap:8px;align-items:center}
.cell-form select{border:1px solid var(--line);background:var(--surface);padding:6px;border-radius:0}

/* overdue and suspension emphasis */
.alertbox{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px;margin:0 0 16px;background:var(--bad-bg);border-left:6px solid var(--bad);color:var(--text)}
.alertbox b{display:block;font-size:18px;color:var(--bad)}
.alertbox p{margin:4px 0 0;font-size:14px}
.alertbox ul{margin:6px 0 0;padding-left:18px}.alertbox li span{color:var(--mute)}
.alertbox.sev{background:var(--red);border-left-color:#8E1D17;color:#fff}.alertbox.sev b,.alertbox.sev li span{color:#fff}
.alertbox.sev .btn{background:#fff;color:#B02A22;border-color:#fff}
.alertbox .btn{flex:none}
.panel.sev{border-top:4px solid var(--bad)}.panel.sev header h2{color:var(--bad)}
.panel header .tot{font:700 18px var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap}
tr.od td:first-child{box-shadow:inset 4px 0 0 var(--bad)}
.hint.late{color:var(--bad);font-weight:600}
@media(max-width:640px){.alertbox{flex-direction:column;align-items:flex-start}}

.bar.hot i{background:var(--red)}
.panel>header .btn.sm{flex:none}