:root { --bg:#071019; --panel:#0c1722; --line:#203140; --text:#f4f7fa; --muted:#8fa3b5; --accent:#4ad7b8; --accent2:#54a7ff; --warn:#f2bd63; --bad:#ff7474; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#071019; color:var(--text); font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { background:radial-gradient(circle at 15% 0,#10283b 0,#071019 36%,#050b11 100%); }
a { color:inherit; text-decoration:none; }
.topbar { height:72px; display:flex; align-items:center; gap:30px; padding:0 34px; border-bottom:1px solid var(--line); background:rgba(6,14,22,.94); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; min-width:260px; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:13px; letter-spacing:.12em; }
.brand span { font-size:12px; color:var(--muted); }
.brand-mark { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-weight:800; background:#132839; border:1px solid #31506a; }
.brand-mark.small { width:38px; height:38px; border-radius:11px; }
.topbar nav { display:flex; gap:8px; flex:1; }
.topbar nav a { padding:9px 13px; border-radius:9px; color:#b8c7d3; }
.topbar nav a:hover { background:#10202e; color:#fff; }
.user { display:flex; align-items:center; gap:12px; color:#b9c7d2; }
.ghost { border:1px solid var(--line); background:transparent; color:#dbe5ed; padding:8px 12px; border-radius:9px; cursor:pointer; }
.page { max-width:1450px; margin:0 auto; padding:34px; }
.hero { display:flex; justify-content:space-between; align-items:flex-start; gap:28px; padding:20px 0 30px; }
.hero h1 { font-size:34px; line-height:1.15; margin:6px 0 10px; letter-spacing:-.035em; }
.hero p { max-width:780px; color:var(--muted); font-size:15px; margin:0; }
.eyebrow { font-size:10px; letter-spacing:.18em; color:#6fd9c4; font-weight:750; }
.live { display:flex; align-items:center; gap:8px; border:1px solid #285449; border-radius:999px; padding:8px 12px; color:#86e7d3; font-size:11px; font-weight:700; background:#0a201e; }
.live i { width:7px; height:7px; background:#50e3bd; border-radius:50%; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.metric,.panel { background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(10,20,29,.96)); border:1px solid var(--line); border-radius:15px; }
.metric { padding:18px 20px; }
.metric span,.metric small { display:block; color:var(--muted); }
.metric strong { display:block; font-size:25px; margin:7px 0 2px; letter-spacing:-.03em; }
.metric small { font-size:11px; }
.grid.two { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:16px; }
.panel { padding:21px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.panel h2 { font-size:18px; margin:4px 0 0; letter-spacing:-.02em; }
.panel h3 { font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:#9db0bf; margin:18px 0 8px; }
.pill { display:inline-flex; border:1px solid #2b4152; background:#0d1a25; color:#afc2d1; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:700; }
.pill.safe { border-color:#245a4d; color:#78dec7; background:#0c201c; }
.facts { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0; }
.facts div { padding:12px; background:#09141e; border:1px solid #192b39; border-radius:10px; }
.facts dt { font-size:10px; color:#7890a4; text-transform:uppercase; letter-spacing:.09em; }
.facts dd { margin:4px 0 0; color:#e7edf2; overflow-wrap:anywhere; }
.muted { color:var(--muted); }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chips span { border:1px solid #275347; color:#86d9c5; background:#0c1d1a; border-radius:8px; padding:6px 8px; font-size:10px; }
.chips.defer span { border-color:#59452b; color:#e6bf83; background:#21180e; }
.product-list { display:grid; gap:9px; }
.product { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 12px; border:1px solid #1c2d3b; background:#09141e; border-radius:10px; }
.product strong,.product small { display:block; }
.product small { color:#7890a4; margin-top:2px; font-size:10px; }
.status-dot { color:#69d9bf; font-size:10px; font-weight:750; letter-spacing:.07em; }
.timeline { margin-bottom:20px; }
.event-list { display:grid; }
.event { display:grid; grid-template-columns:12px minmax(220px,1fr) 90px 180px; align-items:center; gap:12px; padding:12px 3px; border-top:1px solid #182936; }
.event:first-child { border-top:0; }
.event-icon { width:8px; height:8px; border-radius:50%; background:#4ad7b8; box-shadow:0 0 10px rgba(74,215,184,.35); }
.event-main strong,.event-main span { display:block; }
.event-main strong { font-size:12px; }
.event-main span,time { color:#7890a4; font-size:10px; }
.severity { justify-self:start; border-radius:999px; padding:4px 7px; font-size:9px; font-weight:800; border:1px solid #2b4152; color:#9fb4c4; }
.severity.high,.severity.critical { color:#ff9e9e; border-color:#6a3232; background:#251111; }
.severity.warning,.severity.medium { color:#f0ca8f; border-color:#5e4a2d; background:#21180e; }
.empty { color:#7890a4; padding:18px 4px; }
.error { background:#2a1115; border:1px solid #6b323a; color:#ffb4bc; border-radius:10px; padding:11px 13px; margin:12px 0; }
footer { display:flex; justify-content:space-between; gap:20px; padding:8px 2px 30px; color:#637b8d; font-size:10px; }
.login-body { display:grid; place-items:center; min-height:100vh; padding:24px; }
.login-shell { width:100%; max-width:430px; }
.login-card { background:linear-gradient(180deg,#10202e,#09141d); border:1px solid #233848; border-radius:18px; padding:30px; box-shadow:0 28px 80px rgba(0,0,0,.35); }
.login-card h1 { font-size:30px; margin:7px 0 6px; letter-spacing:-.035em; }
.login-card form { display:grid; gap:14px; margin-top:24px; }
.login-card label { color:#9db0bf; font-size:11px; font-weight:650; }
.login-card input { display:block; width:100%; margin-top:6px; background:#07121b; color:#f4f7fa; border:1px solid #25394a; border-radius:10px; padding:11px 12px; outline:none; }
.login-card input:focus { border-color:#4286ad; }
.login-card button:not(.ghost) { border:0; border-radius:10px; padding:12px; background:#dbeef7; color:#071019; font-weight:800; cursor:pointer; }
.micro { color:#6f8596; font-size:10px; margin-top:18px; }
@media (max-width:900px) {
  .topbar { padding:0 18px; gap:14px; }
  .brand { min-width:auto; flex:1; }
  .topbar nav { display:none; }
  .user>span { display:none; }
  .page { padding:22px 16px; }
  .hero { display:block; }
  .live { width:max-content; margin-top:16px; }
  .hero h1 { font-size:28px; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .grid.two { grid-template-columns:1fr; }
  .event { grid-template-columns:12px minmax(0,1fr) 70px; }
  .event time { display:none; }
}
@media (max-width:520px) {
  .metrics { grid-template-columns:1fr 1fr; gap:9px; }
  .metric { padding:14px; }
  .metric strong { font-size:21px; }
  .facts { grid-template-columns:1fr; }
  .panel { padding:16px; }
  .topbar { height:64px; }
  .brand-mark.small { width:34px; height:34px; }
  footer { display:block; }
  footer span { display:block; margin-top:5px; }
}