
:root{
  --bg:#07101f;--bg2:#0a1425;--panel:#0f1b2d;--panel2:#111f34;--line:#22314a;
  --text:#f3f7fb;--muted:#9fb0c7;--soft:#d6e0ee;--accent:#4dd5b5;--accent2:#74a8ff;
  --warn:#f5bf5b;--danger:#ff7b8d;--protected:#a985ff;--shadow:0 18px 50px rgba(0,0,0,.25);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,var(--bg),#091426 55%,#08111f);color:var(--text);font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.app-shell{min-height:100vh}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:235px;background:rgba(6,13,25,.96);border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;z-index:10}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:850;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#06101f;box-shadow:var(--shadow)}
.brand strong{display:block;font-size:16px;letter-spacing:.04em}.brand span{display:block;color:var(--muted);font-size:11px}
nav{display:flex;flex-direction:column;gap:6px}
nav a{padding:10px 12px;border-radius:10px;color:var(--muted)}
nav a:hover,nav a.active{background:#111f33;color:var(--text)}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:12px;color:var(--muted)}
.read-only{font-size:11px;letter-spacing:.08em;color:var(--accent)}
.main{margin-left:235px;padding:28px 34px 40px;max-width:1600px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px}
.eyebrow,.section-kicker{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3,p{margin-top:0}h1{font-size:26px;margin-bottom:0}h2{font-size:28px;line-height:1.2;max-width:900px;margin:12px 0}h3{font-size:18px;margin:3px 0}
.top-actions{display:flex;gap:10px;align-items:center}
.runtime-state{color:var(--muted);font-size:12px}
.btn{border:1px solid var(--line);background:#122137;color:var(--text);padding:9px 13px;border-radius:10px;cursor:pointer}
.btn:hover{border-color:#365075}.btn.primary{background:linear-gradient(135deg,#4e8cff,#4bd2b3);border:0;color:#06111d;font-weight:800}.btn.disabled{opacity:.55;cursor:not-allowed}
.hero{display:grid;grid-template-columns:1.5fr .7fr;gap:20px;padding:28px;border:1px solid #263954;background:radial-gradient(circle at 85% 0%,rgba(116,168,255,.13),transparent 35%),linear-gradient(135deg,#101e33,#0c1829);border-radius:22px;box-shadow:var(--shadow);margin-bottom:18px}
.hero p{color:var(--muted);max-width:850px}.pill{display:inline-block;border:1px solid rgba(77,213,181,.35);color:var(--accent);background:rgba(77,213,181,.08);padding:5px 10px;border-radius:999px;font-size:11px}
.hero-rule{padding:18px;border-radius:16px;background:rgba(4,12,24,.45);border:1px solid var(--line);align-self:stretch;display:flex;flex-direction:column;justify-content:center}.hero-rule strong{color:var(--accent);margin-bottom:8px}.hero-rule span{color:var(--soft)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.metric{padding:18px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius)}
.metric .value{font-size:28px;font-weight:800;letter-spacing:-.03em}.metric .label{color:var(--muted);font-size:12px;margin-top:4px}.metric.good .value{color:var(--accent)}.metric.warn .value{color:var(--warn)}
.section-grid{display:grid;gap:18px;margin-bottom:18px}.section-grid.two{grid-template-columns:1fr 1fr}
.panel{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),#0d192a);border-radius:var(--radius);padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.14);margin-bottom:18px}
.section-grid .panel{margin-bottom:0}
.panel-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}
.muted{color:var(--muted);font-size:12px}.badge{font-size:10px;letter-spacing:.06em;padding:5px 8px;border-radius:999px;border:1px solid var(--line)}.badge.priority{color:var(--warn);border-color:rgba(245,191,91,.35);background:rgba(245,191,91,.07)}.badge.pending{color:var(--protected);border-color:rgba(169,133,255,.35)}
.stack{display:flex;flex-direction:column;gap:10px}.attention-item,.risk-item{padding:14px;border-radius:13px;background:#0b1627;border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:12px}.number{width:30px;height:30px;border-radius:8px;background:#162640;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--warn)}.attention-item strong,.risk-item strong{display:block;margin-bottom:3px}.attention-item p,.risk-item p{margin:0;color:var(--muted);font-size:12px}
.protect{border-color:rgba(169,133,255,.33);background:radial-gradient(circle at 100% 0%,rgba(169,133,255,.14),transparent 45%),var(--panel)}
.protect-copy{display:flex;gap:14px;align-items:flex-start}.shield{min-width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(169,133,255,.13);color:#c7adff;font-size:20px}.protect-copy p{color:var(--muted);margin:5px 0 0}
.systems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.system-card{border:1px solid var(--line);background:#0b1627;border-radius:15px;padding:15px;min-height:177px;display:flex;flex-direction:column}
.system-top{display:flex;justify-content:space-between;gap:10px}.system-card h4{font-size:15px;margin:0 0 4px}.system-card .group{color:var(--muted);font-size:11px}.status{font-size:9px;font-weight:850;letter-spacing:.08em;border-radius:999px;padding:5px 7px;height:max-content}.status.good{background:rgba(77,213,181,.1);color:var(--accent)}.status.warning{background:rgba(245,191,91,.1);color:var(--warn)}.status.protected{background:rgba(169,133,255,.12);color:#c7adff}.status.neutral{background:#17263c;color:#b6c5d8}
.system-meta{margin-top:12px;color:var(--muted);font-size:11px}.system-next{margin-top:auto;padding-top:12px;border-top:1px solid #1b2a40;color:var(--soft);font-size:12px}.probe{margin-top:7px;font-size:10px;color:var(--muted)}
.upgrade-table{display:flex;flex-direction:column}.upgrade-row{display:grid;grid-template-columns:76px 1.2fr 1.6fr 1.1fr;gap:14px;padding:14px 6px;border-top:1px solid var(--line);align-items:start}.upgrade-row:first-child{border-top:0}.p0{color:var(--danger);font-weight:850}.p1{color:var(--warn);font-weight:850}.upgrade-title{font-weight:750}.upgrade-why,.upgrade-result{color:var(--muted);font-size:12px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.service{padding:11px;border:1px solid var(--line);border-radius:11px;background:#0b1627}.service strong{display:block;font-size:12px}.service span{font-size:9px;letter-spacing:.06em;color:var(--muted)}.service .partial{color:var(--warn)}.service .required{color:var(--danger)}
.layers{display:flex;flex-direction:column;gap:8px}.layer{display:grid;grid-template-columns:34px 115px 1fr;gap:9px;padding:10px;border:1px solid var(--line);border-radius:11px;background:#0b1627;align-items:start}.layer-no{width:28px;height:28px;border-radius:8px;background:#142842;color:var(--accent2);display:grid;place-items:center;font-weight:850}.layer strong{font-size:12px}.layer span{font-size:11px;color:var(--muted)}
.truth-table{display:flex;flex-direction:column}.truth-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line)}.truth-row:first-child{border-top:0}.truth-row span{color:var(--muted);font-size:12px}.truth-row strong{font-size:12px}
.ask-panel{background:radial-gradient(circle at 80% 20%,rgba(77,213,181,.09),transparent 42%),var(--panel)}.ask-box{border:1px dashed #31516a;border-radius:14px;padding:18px}.ask-example{font-size:18px;line-height:1.4;margin-bottom:12px}.ask-box p{color:var(--muted)}
.risk-item{grid-template-columns:85px 1fr}.severity{font-size:9px;font-weight:850;letter-spacing:.06em;color:var(--danger)}.timeline{display:flex;flex-direction:column;gap:13px}.timeline-item{display:grid;grid-template-columns:70px 1fr;gap:12px}.timeline-time{color:var(--accent);font-size:10px}.timeline-item strong{display:block;font-size:11px;color:var(--muted)}.timeline-item span{display:block;font-size:12px;margin-top:2px}
footer{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:8px 2px}
.login-page{display:grid;place-items:center;min-height:100vh}.login-shell{width:min(92vw,430px)}.login-card{border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:28px;box-shadow:var(--shadow)}.login-card .brand-mark{margin-bottom:16px}.login-card h1{margin-bottom:2px}.login-card p{color:var(--muted)}.login-card label{display:block;color:var(--soft);font-size:12px;margin:14px 0}.login-card input{width:100%;margin-top:6px;background:#081323;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px;outline:none}.login-card .btn{width:100%;margin-top:4px}.login-card small{display:block;text-align:center;color:var(--muted);margin-top:18px}.notice{padding:10px 12px;border-radius:10px;margin:14px 0}.notice.danger{background:rgba(255,123,141,.08);border:1px solid rgba(255,123,141,.25);color:#ffadb8}
@media(max-width:1100px){.systems-grid{grid-template-columns:repeat(2,1fr)}.section-grid.two,.hero{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sidebar{position:static;width:auto;height:auto;padding:15px}.sidebar nav{display:none}.sidebar-foot{display:none}.main{margin-left:0;padding:16px}.topbar{align-items:flex-start}.top-actions{flex-direction:column;align-items:flex-end}.systems-grid{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.services{grid-template-columns:repeat(2,1fr)}.upgrade-row{grid-template-columns:58px 1fr}.upgrade-why,.upgrade-result{grid-column:2}.layer{grid-template-columns:34px 90px 1fr}.hero{padding:20px}h2{font-size:23px}.panel{padding:16px}}
@media(max-width:450px){.metrics{grid-template-columns:1fr}.truth-row{grid-template-columns:1fr}.layer{grid-template-columns:34px 1fr}.layer span{grid-column:2}.topbar{display:block}.top-actions{margin-top:12px;align-items:flex-start}.services{grid-template-columns:1fr 1fr}}
