:root{
  --rail:#0f1b2d;--rail-text:#b9c4d6;--rail-on:#fff;
  --paper:#f3f5f9;--panel:#fff;--text:#121a2b;--mute:#5a667a;--line:#e0e5ee;
  --brand:#4338ff;--brand-soft:#e9e8ff;--brand-ink:#2b21c9;
  --live:#0c8a58;--live-soft:#dcf4e8;--bad:#d03a3a;--bad-soft:#fde5e5;--warn:#b86e00;--warn-soft:#fdeed2;--idle:#66738a;--idle-soft:#e8ecf3;
}
@media(prefers-color-scheme:dark){:root{
  --rail:#0a121f;--paper:#0f1724;--panel:#16202f;--text:#e8edf6;--mute:#9aa7bc;--line:#26344a;
  --brand:#7b73ff;--brand-soft:#252266;--brand-ink:#b6b1ff;
  --live:#4fd6a0;--live-soft:#12372a;--bad:#ff7d7d;--bad-soft:#3d1c1f;--warn:#f0b24d;--warn-soft:#3b2d12;--idle:#9aa7bc;--idle-soft:#222e41}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.5 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.02em;margin:0}
h1{font-size:1.9rem;font-weight:800;margin:6px 0 4px}
h2{font-size:1.4rem;font-weight:800}
h3{font-size:1.05rem;font-weight:700}

.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.shell>*{min-width:0}
.rail{background:var(--rail);color:var(--rail-text);padding:22px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.brand{font-size:1.9rem;font-weight:800;letter-spacing:-.045em;color:var(--rail-on);padding:0 10px;display:flex;align-items:center;gap:7px}
.brand::after{content:"";width:11px;height:11px;border-radius:3px;background:var(--brand);box-shadow:0 0 0 3px rgba(123,115,255,.35);margin-top:6px}
nav#tabs{display:flex;flex-direction:column;gap:2px;flex:1}
nav#tabs button{background:transparent;border:0;color:var(--rail-text);text-align:left;padding:11px 12px;border-radius:9px;font-weight:600;min-height:44px}
nav#tabs button:hover{background:rgba(255,255,255,.06)}
nav#tabs button.on{background:rgba(255,255,255,.11);color:var(--rail-on);box-shadow:inset 3px 0 0 #8c86ff}
.who{border-top:1px solid rgba(255,255,255,.12);padding:14px 10px 0;display:grid;gap:10px;font-size:.9rem}
.who #who{color:var(--rail-on);font-weight:600;word-break:break-word}
.who button{background:rgba(255,255,255,.08);border:0;color:var(--rail-on);padding:8px 12px;min-height:40px}
main{padding:28px clamp(16px,4vw,48px) 90px;max-width:980px;width:100%}

body.out .shell{grid-template-columns:minmax(0,1fr)}
body.out .rail{display:none}
body.out main{margin:0 auto;max-width:460px;padding-top:12vh}

.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:12px 0;position:relative}
.card h3{margin:0 0 6px}
.card[class*=" s-"]{padding-left:22px}
.card[class*=" s-"]::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:5px;border-radius:0 5px 5px 0;background:var(--idle)}
.s-live::before,.s-approved::before{background:var(--live)!important}
.s-paused::before,.s-critical::before,.s-declined::before,.s-rejected::before{background:var(--bad)!important}
.s-pending::before,.s-draft::before,.s-warning::before,.s-open::before{background:var(--warn)!important}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.mute{color:var(--mute);font-size:.92rem}
p.mute{margin:6px 0}

.tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.8rem;font-weight:700;margin:0 6px 4px 0;background:var(--idle-soft);color:var(--idle)}
.tag.live,.tag.approved,.tag.resolved,.tag.used{background:var(--live-soft);color:var(--live)}
.tag.paused,.tag.critical,.tag.rejected,.tag.declined{background:var(--bad-soft);color:var(--bad)}
.tag.warning,.tag.pending,.tag.draft,.tag.submitted,.tag.open,.tag.issued,.tag.requested,.tag.needs_info{background:var(--warn-soft);color:var(--warn)}

button{font:inherit;font-weight:650;padding:9px 16px;border-radius:10px;border:0;background:var(--brand);color:#fff;min-height:44px;cursor:pointer}
button:hover{filter:brightness(1.08)}
button.alt{background:var(--brand-soft);color:var(--brand-ink)}
button.danger{background:var(--bad);color:#fff}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
input,select,textarea{font:inherit;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text);min-height:44px;max-width:100%}
textarea{width:100%}
input.note{flex:1;min-width:180px}
.form input:not([type=checkbox]),.form select{width:100%}
.field{display:grid;gap:4px;margin:12px 0}
.field>span{font-weight:650;font-size:.95rem}
.checks{display:flex;flex-wrap:wrap;gap:6px 14px}
.chk{display:inline-flex;gap:8px;align-items:center;min-height:38px}
.chk input{width:20px;height:20px;min-height:0;accent-color:var(--brand)}
pre{white-space:pre-wrap;word-break:break-word;margin:8px 0;padding:10px 12px;background:var(--paper);border-radius:8px;font:.88rem/1.45 ui-monospace,Menlo,monospace}
pre.code{font-size:1.7rem;letter-spacing:.18em;font-weight:700;text-align:center}

form.login{display:grid;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}
.login-brand{font-size:3rem;font-weight:800;letter-spacing:-.05em;display:flex;align-items:center;gap:9px;margin-bottom:6px}
.login-brand::after{content:"";width:16px;height:16px;border-radius:4px;background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);margin-top:9px}
.login-sub{color:var(--mute);margin:0 0 6px}
.login-wrap .card{margin:14px 0}
.login-wrap input{width:100%;margin-top:8px}

#msg{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;width:min(92vw,620px);padding:13px 16px;border-radius:12px;background:#0f1b2d;color:#fff;display:none;box-shadow:0 8px 28px rgba(0,0,0,.25);z-index:9}
#msg.show{display:block}

@media(max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px}
  .brand{font-size:1.5rem}
  nav#tabs{order:3;flex-direction:row;flex-basis:100%;overflow-x:auto;gap:6px}
  nav#tabs button{white-space:nowrap;padding:9px 13px}
  nav#tabs button.on{box-shadow:inset 0 -3px 0 #8c86ff}
  .who{border:0;padding:0;margin-left:auto;display:flex;align-items:center}
}
@media(prefers-reduced-motion:no-preference){.card{transition:border-color .15s}.card:hover{border-color:var(--brand)}}

.tag.big{font-size:.9rem;padding:3px 12px;margin:0 0 6px 0;display:inline-block}
.card h3+.tag.big{margin-left:0}
.progress{display:flex;gap:6px;margin:10px 0 8px}
.pstep{flex:1;min-width:0}
.pstep .bar{display:block;height:6px;border-radius:3px;background:var(--line)}
.pstep .plabel{display:block;font-size:.78rem;color:var(--mute);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstep.done .bar{background:var(--live)}
.pstep.now .bar{background:var(--warn)}
.pstep.now.approved .bar{background:var(--live)}
.pstep.now.declined .bar{background:var(--bad)}
.pstep.now.submitted .bar,.pstep.now.draft .bar{background:var(--brand)}
.pstep.now .plabel{color:var(--text);font-weight:650}
.s-submitted::before{background:var(--brand)!important}
.tag.submitted{background:var(--brand-soft);color:var(--brand-ink)}
nav#tabs button.acct{margin-top:auto;font-size:.88rem;opacity:.85}
@media(max-width:860px){nav#tabs button.acct{margin-top:0}}
.matrow{display:grid;grid-template-columns:minmax(150px,230px) 1fr auto;gap:8px;margin:8px 0;align-items:center}
@media(max-width:700px){.matrow{grid-template-columns:1fr}}

.matrow.office{grid-template-columns:minmax(150px,230px) 1fr minmax(120px,160px) auto}
@media(max-width:700px){.matrow.office{grid-template-columns:1fr}}
.docslot{padding:10px 0;border-top:1px solid var(--line)}
.docslot input[type=file]{min-height:0;padding:8px;width:auto;max-width:100%}
.mapwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;margin:12px 0}
svg.worldmap{width:100%;height:auto;display:block}
svg.worldmap .land{fill:var(--idle-soft);stroke:var(--panel);stroke-width:.6;fill-rule:evenodd}
svg.worldmap .land.hit{cursor:pointer;stroke:var(--text);stroke-width:.8}
svg.worldmap .land.t1{fill:#7fb069}svg.worldmap .land.t2{fill:#c5e384}svg.worldmap .land.t2w{fill:#f2d04a}
svg.worldmap .land.t3{fill:#f08a5d}svg.worldmap .land.tsc{fill:#8fb8e8}svg.worldmap .land.tu{fill:#bfb2e0}
i.sw.t1{background:#7fb069}i.sw.t2{background:#c5e384}i.sw.t2w{background:#f2d04a}
i.sw.t3{background:#f08a5d}i.sw.tsc{background:#8fb8e8}i.sw.tu{background:#bfb2e0}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0}
.key,.covrow{display:inline-flex;align-items:center;gap:8px}
.covrow{display:flex;flex-wrap:wrap;padding:6px 0}
i.sw{display:inline-block;width:14px;height:14px;border-radius:3px;flex:none}
.tierinfo{margin:8px 0}.tierinfo summary{cursor:pointer;font-weight:650;color:var(--brand-ink);min-height:32px}
.tierdef{padding:8px 0;border-top:1px solid var(--line)}
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px}
.subtabs button{min-height:44px}
.subtabs button.on{background:var(--brand);color:#fff}
.tl{display:block}
.tldate{display:inline-block;min-width:92px;font-weight:700;color:var(--mute);margin-right:6px}
table.grid{width:100%;border-collapse:collapse;margin:10px 0;background:var(--panel)}
table.grid th,table.grid td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
table.grid tr.gap td{background:var(--warn-soft);color:var(--warn)}
.card h4{margin:14px 0 4px}
input[type=date]{min-width:0;max-width:100%;min-height:44px}
details.hist{margin-top:6px;font-size:.9rem}
details.hist summary{cursor:pointer;color:var(--mute)}

/* Security screen */
.sec{max-width:640px;margin:0 auto}
.sec>h2{margin-top:6px}
.sec-card{padding:20px 22px}
.sec-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.sec-top .tag{margin:0}
.sec-sub{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.step-head{display:flex;gap:12px;align-items:flex-start;margin:20px 0 8px}
.step-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.9rem}
.step-t{font-weight:700}
.keybox{background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;margin:6px 0}
.keybox code{display:block;font:700 1.25rem/1.4 ui-monospace,Menlo,monospace;letter-spacing:.08em;word-break:break-all;text-align:center}
.keybox .row{justify-content:center}
.bigcode{width:100%;text-align:center;font:700 1.8rem/1.2 ui-monospace,Menlo,monospace;letter-spacing:.3em;padding:12px}
.btn-link{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;text-decoration:none}
button.danger{background:var(--bad-soft);color:var(--bad)}
.codes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.rc{background:var(--paper);border-radius:10px;padding:10px 12px;text-align:center;font:700 1rem ui-monospace,Menlo,monospace;letter-spacing:.06em}
@media(max-width:420px){.codes-grid{grid-template-columns:1fr}}

details.guide{padding:0}
details.guide>summary{cursor:pointer;padding:14px 18px;list-style:none}
details.guide>summary::-webkit-details-marker{display:none}
details.guide[open]>summary{border-bottom:1px solid var(--line)}
details.guide>div{padding:0 18px}
.guide-steps{padding-left:22px}
.guide-steps li{margin:6px 0}
label.inline{display:inline-flex;gap:6px;align-items:center;margin-right:14px}