:root {
  --bg: #06101c;
  --bg-deep: #030912;
  --panel: rgba(14, 28, 46, 0.9);
  --panel-border: rgba(152, 180, 214, 0.14);
  --text: #f4f8ff;
  --soft: #bdc9d9;
  --muted: #7f91a8;
  --green: #42d79a;
  --green-soft: rgba(66, 215, 154, 0.14);
  --yellow: #f1c75b;
  --yellow-soft: rgba(241, 199, 91, 0.14);
  --red: #ff6778;
  --red-soft: rgba(255, 103, 120, 0.14);
  --blue: #68c9ff;
  --shadow: 0 24px 70px rgba(0,0,0,.34);
  --radius: 26px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(rgba(94,123,163,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,123,163,.035) 1px, transparent 1px),
    radial-gradient(circle at 15% 0%, rgba(57,100,211,.16), transparent 36%),
    linear-gradient(155deg, #081626 0%, #07111e 52%, #040a12 100%);
  background-size: 32px 32px, 32px 32px, auto, auto;
  overflow-x: hidden;
}

.glow { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .14; pointer-events: none; z-index: 0; }
.glow-a { width: 370px; height: 370px; right: -180px; top: 12%; background: #356cff; }
.glow-b { width: 310px; height: 310px; left: -160px; bottom: -130px; background: #20c49a; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 13px clamp(18px,4vw,58px);
  border-bottom: 1px solid rgba(148,173,205,.12);
  background: rgba(4,11,20,.76);
  backdrop-filter: blur(18px) saturate(130%);
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-mark {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid rgba(128,190,255,.22);
  background: linear-gradient(145deg, rgba(98,198,255,.17), rgba(138,168,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark svg { width: 30px; fill: none; stroke: #8fd7ff; stroke-width: 1.8; stroke-linejoin: round; }
.brand strong { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.freshness-pill, .refresh-button, .live-pill, .status-pill {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 8px 13px; border: 1px solid var(--panel-border);
  background: rgba(16,30,49,.72); color: var(--soft); font-size: .78rem; font-weight: 700;
}
.freshness-pill i, .live-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.2s infinite; }
.freshness-pill.green { color: #a9f2d3; border-color: rgba(66,215,154,.27); background: rgba(66,215,154,.08); }
.freshness-pill.yellow { color: #ffe7a5; border-color: rgba(241,199,91,.27); background: rgba(241,199,91,.08); }
.freshness-pill.red { color: #ffb9c1; border-color: rgba(255,103,120,.3); background: rgba(255,103,120,.08); }
.refresh-button { cursor: pointer; font: inherit; transition: transform .18s ease, background .18s ease; }
.refresh-button:hover { transform: translateY(-1px); background: rgba(25,44,69,.9); }
.refresh-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.refresh-button.loading svg { animation: spin .8s linear infinite; }

.shell { position: relative; z-index: 1; width: min(1500px, calc(100% - 36px)); margin: 28px auto 42px; }
.panel {
  border: 1px solid var(--panel-border); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(18,33,53,.94), rgba(10,22,37,.89));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
}

.hero {
  min-height: 218px; position: relative; overflow: hidden; display: grid;
  grid-template-columns: auto minmax(0,1fr) auto; align-items: center;
  gap: clamp(20px,3vw,38px); padding: clamp(25px,4vw,45px);
}
.hero::after { content:""; position:absolute; width:380px; height:380px; right:-160px; top:-160px; border-radius:50%; background:radial-gradient(circle,rgba(103,145,255,.13),transparent 68%); pointer-events:none; }
.hero[data-level="green"] { border-color: rgba(66,215,154,.22); }
.hero[data-level="yellow"] { border-color: rgba(241,199,91,.26); }
.hero[data-level="red"] { border-color: rgba(255,103,120,.3); }
.traffic-light {
  width: 70px; padding: 12px; display: grid; gap: 10px; border-radius: 24px;
  background: rgba(2,7,13,.67); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 10px 20px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.25);
}
.lamp { aspect-ratio:1; border-radius:50%; opacity:.15; border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 -8px 15px rgba(0,0,0,.35); transition:.35s; }
.lamp.red { background:var(--red); }.lamp.yellow{background:var(--yellow)}.lamp.green{background:var(--green)}
.traffic-light[data-level="red"] .lamp.red,
.traffic-light[data-level="yellow"] .lamp.yellow,
.traffic-light[data-level="green"] .lamp.green { opacity:1; transform:scale(1.04); box-shadow:0 0 21px currentColor,inset 0 -5px 10px rgba(0,0,0,.22),inset 0 4px 7px rgba(255,255,255,.28); }
.traffic-light[data-level="red"] .lamp.red{color:var(--red)}.traffic-light[data-level="yellow"] .lamp.yellow{color:var(--yellow)}.traffic-light[data-level="green"] .lamp.green{color:var(--green)}
.eyebrow { margin:0 0 8px; color:var(--muted); font-size:.71rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero-copy h1 { margin:0; font-size:clamp(1.85rem,4vw,3.35rem); line-height:1.08; letter-spacing:-.035em; }
.hero-copy > p:not(.eyebrow) { max-width:760px; margin:13px 0 0; color:var(--soft); font-size:clamp(.95rem,1.4vw,1.08rem); line-height:1.6; }
.hero-meta { display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:22px; color:var(--muted); font-size:.8rem; }
.hero-meta b { color:var(--soft); margin-right:5px; }
.hero-word { min-width:160px; text-align:right; position:relative; z-index:2; }
.hero-word strong { display:block; font-size:clamp(1.25rem,2.5vw,2rem); text-transform:uppercase; letter-spacing:.06em; }
.hero-word small { color:var(--muted); }
.hero[data-level="green"] .hero-word strong{color:var(--green)}.hero[data-level="yellow"] .hero-word strong{color:var(--yellow)}.hero[data-level="red"] .hero-word strong{color:var(--red)}

.component-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
.component-card { min-height:148px; padding:20px; position:relative; overflow:hidden; }
.component-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--muted); }
.component-card[data-level="green"]::before{background:var(--green)}.component-card[data-level="yellow"]::before{background:var(--yellow)}.component-card[data-level="red"]::before{background:var(--red)}
.component-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.component-icon { width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(98,198,255,.08);border:1px solid rgba(98,198,255,.14); }
.component-icon svg { width:20px;fill:none;stroke:#9ad8ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.component-dot { width:10px;height:10px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 5px rgba(127,145,168,.08); }
.component-card[data-level="green"] .component-dot{background:var(--green);box-shadow:0 0 0 5px var(--green-soft)}
.component-card[data-level="yellow"] .component-dot{background:var(--yellow);box-shadow:0 0 0 5px var(--yellow-soft)}
.component-card[data-level="red"] .component-dot{background:var(--red);box-shadow:0 0 0 5px var(--red-soft)}
.component-card h3 { margin:20px 0 5px; font-size:1.05rem; }
.component-card strong { display:block; font-size:1.28rem; }
.component-card p { margin:7px 0 0; color:var(--muted); font-size:.76rem; line-height:1.45; }

.metrics-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:18px; }
.capacity-panel,.system-panel,.findings-panel,.history-panel { padding:26px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-heading.outside { margin:0 0 14px; padding:0 4px; }
.section-heading h2 { margin:0; font-size:1.35rem; letter-spacing:-.025em; }
.status-pill { min-height:30px; padding:5px 10px; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; }
.status-pill.green { color:#a9f2d3;background:var(--green-soft);border-color:rgba(66,215,154,.2) }
.status-pill.yellow { color:#ffe7a5;background:var(--yellow-soft);border-color:rgba(241,199,91,.2) }
.status-pill.red { color:#ffb9c1;background:var(--red-soft);border-color:rgba(255,103,120,.22) }
.capacity-layout { display:flex; align-items:center; gap:30px; }
.capacity-ring { --used:0; --ring:var(--green); width:132px;height:132px;flex:0 0 132px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--used)*1%),rgba(132,153,181,.13) 0);position:relative; }
.capacity-ring::before { content:"";position:absolute;inset:11px;border-radius:50%;background:#0e1d30;border:1px solid rgba(255,255,255,.04); }
.capacity-ring > div { position:relative;text-align:center; }.capacity-ring strong{display:block;font-size:1.65rem}.capacity-ring span{color:var(--muted);font-size:.72rem}
.key-values { margin:0;flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px 22px; }
.key-values div { min-width:0; }.key-values dt{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.key-values dd{margin:5px 0 0;font-weight:750;word-break:break-word}
.system-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.system-metric { padding:14px;border-radius:13px;background:rgba(4,11,19,.38);border:1px solid rgba(148,173,205,.09); }
.system-metric span{display:block;color:var(--muted);font-size:.67rem;text-transform:uppercase;letter-spacing:.07em}.system-metric strong{display:block;margin-top:6px;font-size:1.18rem}.system-metric small{display:block;margin-top:4px;color:var(--muted);font-size:.68rem}

.section-block { margin-top:26px; }
.section-meta { color:var(--muted);font-size:.75rem; }
.disk-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px; }
.disk-card { position:relative;min-height:154px;padding:18px;border-radius:16px;border:1px solid rgba(148,173,205,.12);background:linear-gradient(145deg,rgba(15,29,47,.86),rgba(8,18,31,.88));overflow:hidden;transition:.18s; }
.disk-card:hover{transform:translateY(-2px);border-color:rgba(148,173,205,.25)}
.disk-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--muted)}
.disk-card[data-level="green"]::before{background:var(--green)}.disk-card[data-level="yellow"]::before{background:var(--yellow)}.disk-card[data-level="red"]::before{background:var(--red)}
.disk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.disk-name{display:flex;align-items:center;gap:10px}.disk-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(128,154,187,.1);color:var(--soft)}.disk-icon svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.disk-name strong{display:block;font-size:.93rem}.disk-name small{display:block;margin-top:2px;color:var(--muted);font-size:.68rem}.state-chip{border-radius:999px;padding:5px 8px;font-size:.64rem;font-weight:800;letter-spacing:.04em;background:rgba(127,145,168,.1);color:var(--soft)}
.disk-card[data-level="green"] .state-chip{background:var(--green-soft);color:#a9f2d3}.disk-card[data-level="yellow"] .state-chip{background:var(--yellow-soft);color:#ffe8a7}.disk-card[data-level="red"] .state-chip{background:var(--red-soft);color:#ffbdc5}
.disk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:19px}.disk-stat{min-width:0;padding:8px 7px;border-radius:9px;background:rgba(255,255,255,.025)}.disk-stat span{display:block;color:var(--muted);font-size:.58rem;text-transform:uppercase;letter-spacing:.06em}.disk-stat b{display:block;margin-top:4px;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lower-grid { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;margin-top:18px; }
.finding-count{min-width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(127,145,168,.1);color:var(--soft);font-weight:800;font-size:.8rem}
.findings{display:grid;gap:9px}.finding{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;padding:12px;border:1px solid rgba(148,173,205,.1);border-radius:12px;background:rgba(4,11,19,.35)}.finding-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;font-size:.72rem;font-weight:900}.finding.red .finding-icon{color:#ffd2d7;background:var(--red-soft)}.finding.yellow .finding-icon{color:#ffe7a4;background:var(--yellow-soft)}.finding b{display:block;font-size:.78rem}.finding p{margin:3px 0 0;color:var(--soft);font-size:.78rem;line-height:1.45}
.empty-state{padding:25px;text-align:center;color:var(--muted);border:1px dashed rgba(148,173,205,.16);border-radius:14px}.empty-state.success{color:#a9f2d3;border-color:rgba(66,215,154,.18);background:rgba(66,215,154,.04)}
.timeline{min-height:55px;display:flex;align-items:stretch;gap:3px;padding:6px;border-radius:11px;background:rgba(4,10,18,.5);overflow:hidden}.timeline-segment{flex:1 1 0;min-width:2px;border-radius:3px;background:var(--muted);opacity:.85}.timeline-segment.green{background:var(--green)}.timeline-segment.yellow{background:var(--yellow)}.timeline-segment.red{background:var(--red)}
.legend{display:flex;gap:18px;margin-top:15px;color:var(--muted);font-size:.72rem}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:7px;height:7px;border-radius:50%}.legend i.green{background:var(--green)}.legend i.yellow{background:var(--yellow)}.legend i.red{background:var(--red)}

.details-panel{margin-top:18px;padding:0 28px}details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer}details>summary::-webkit-details-marker{display:none}details>summary strong{font-size:.94rem}.chevron{color:var(--muted);font-size:1.35rem;transition:transform .2s}details[open] .chevron{transform:rotate(180deg)}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 0 26px;border-top:1px solid rgba(148,173,205,.1)}.details-grid>div{padding-top:21px;min-width:0}.details-grid h3{margin:0 0 12px;font-size:.85rem;color:var(--soft)}.detail-table{display:grid;gap:8px}.detail-row{display:grid;grid-template-columns:.8fr .8fr .8fr 1fr;gap:8px;align-items:center;padding:9px 10px;border-radius:9px;background:rgba(4,11,19,.35);color:var(--soft);font-size:.73rem}.detail-row b{color:var(--text)}.detail-list{margin:0;display:grid;grid-template-columns:minmax(90px,.45fr) 1fr;gap:8px 12px;font-size:.77rem}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0;color:var(--soft);word-break:break-word}.kernel-block{grid-column:1/-1}.kernel-block pre{margin:0;max-height:240px;overflow:auto;padding:14px;border-radius:12px;background:#050b13;color:#b9c8da;font:.72rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}

footer{position:relative;z-index:1;width:min(1500px,calc(100% - 36px));margin:0 auto;padding:0 0 30px;display:flex;justify-content:space-between;gap:15px;color:#60748d;font-size:.7rem}.toast{position:fixed;right:22px;bottom:22px;z-index:50;max-width:min(390px,calc(100vw - 44px));padding:12px 16px;border-radius:12px;background:#172a43;color:var(--text);border:1px solid rgba(148,173,205,.2);box-shadow:var(--shadow);font-size:.8rem;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}noscript{display:block;margin:20px;text-align:center;color:var(--red)}

@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.25)}50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.component-grid{grid-template-columns:1fr 1fr}.metrics-grid{grid-template-columns:1fr}.lower-grid{grid-template-columns:1fr}}
@media(max-width:720px){.topbar{min-height:70px;padding:10px 16px}.brand small,.freshness-pill{display:none}.refresh-button{width:40px;padding:0;font-size:0}.shell{width:min(100% - 22px,1500px);margin-top:14px}.hero{grid-template-columns:auto 1fr;padding:24px 20px;border-radius:22px}.traffic-light{width:54px;padding:9px;gap:7px;border-radius:18px;align-self:start}.hero-word{display:none}.hero-meta{display:grid;gap:5px}.component-grid{grid-template-columns:1fr;gap:10px;margin-top:12px}.metrics-grid,.lower-grid{gap:12px;margin-top:12px}.capacity-layout{align-items:flex-start}.capacity-ring{width:108px;height:108px;flex-basis:108px}.key-values{grid-template-columns:1fr}.disk-grid{grid-template-columns:1fr}.details-grid{grid-template-columns:1fr}.kernel-block{grid-column:auto}.details-panel{padding:0 20px}footer{width:calc(100% - 24px);display:grid}}
@media(max-width:430px){.hero{grid-template-columns:1fr}.traffic-light{display:flex;width:auto;justify-self:start}.lamp{width:21px;height:21px}.capacity-layout{display:grid}.system-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}