:root { --bg:#08090b; --panel:#121317; --panel2:#17191e; --line:#292c33; --text:#f7f7f8; --muted:#8b909b; --orange:#f97316; --purple:#a855f7; --green:#22c55e; --red:#ef4444; --mono:'JetBrains Mono',monospace; --font:'Inter',system-ui,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; color:var(--text); background:radial-gradient(circle at 16% -10%,rgba(249,115,22,.1),transparent 32%),var(--bg); font-family:var(--font); -webkit-font-smoothing:antialiased; }
.dashboard-shell { width:min(1280px,calc(100% - 40px)); margin:auto; padding:42px 0 70px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }.back-link { color:var(--orange); font-size:13px; font-weight:650; text-decoration:none; }.topbar h1 { margin-top:10px; font-size:clamp(30px,4vw,48px); letter-spacing:-2px; line-height:1; }.topbar p,.panel-heading p { color:var(--muted); font-size:13px; margin-top:8px; }
.live-state { align-items:center; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2); border-radius:999px; color:#8ceaab; display:flex; font:12px var(--mono); gap:9px; padding:9px 13px; }.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); animation:pulse 1.8s infinite; }@keyframes pulse { 50% { opacity:.35; } }
.hero-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.metric-card,.panel { background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 60%),var(--panel); border:1px solid var(--line); border-radius:16px; }.metric-card { min-height:185px; padding:21px; }.metric-card.primary { border-color:rgba(249,115,22,.32); box-shadow:inset 0 1px rgba(255,255,255,.04),0 16px 50px rgba(0,0,0,.2); }
.card-label { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }.metric-value { align-items:baseline; display:flex; font:600 48px var(--mono); letter-spacing:-3px; margin:22px 0 18px; }.metric-value small { color:var(--muted); font-size:15px; letter-spacing:0; margin-left:5px; }.meter { height:4px; overflow:hidden; background:#282b31; border-radius:4px; }.meter i { display:block; height:100%; width:0; background:linear-gradient(90deg,#ea580c,var(--orange)); border-radius:inherit; transition:width .5s ease; }.meter.purple i { background:linear-gradient(90deg,#7e22ce,var(--purple)); }.metric-foot { color:var(--muted); display:flex; justify-content:space-between; font:11px var(--mono); margin-top:12px; }.metric-foot.tall { border-top:1px solid var(--line); margin-top:32px; padding-top:13px; }
.chart-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:14px; margin-top:14px; }.panel { padding:22px; }.panel-heading { align-items:flex-start; display:flex; justify-content:space-between; gap:16px; }.panel-heading h2 { font-size:15px; letter-spacing:-.2px; }.legend { color:var(--muted); font:10px var(--mono); display:flex; align-items:center; gap:7px; }.legend i { background:var(--orange); width:7px; height:7px; border-radius:50%; }.legend .purple-dot { background:var(--purple); margin-left:7px; }
#resource-chart { display:block; height:235px; width:100%; margin-top:16px; overflow:visible; }.grid-lines line { stroke:#272a30; stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:4 5; }.cpu-line,.memory-line { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }.cpu-line { stroke:var(--orange); }.memory-line { stroke:var(--purple); opacity:.85; }.area { fill:url(#cpu-fill); }
.detail-list { margin-top:15px; }.detail-list div { align-items:center; border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:13px 0; }.detail-list dt { color:var(--muted); font-size:12px; }.detail-list dd { font:11px var(--mono); }.detail-list .good { color:var(--green); }.sessions-panel { margin-top:14px; }.updated { color:var(--muted); font:10px var(--mono); }.sessions-list { display:grid; gap:10px; margin-top:18px; }.empty-state { border:1px dashed var(--line); border-radius:11px; color:var(--muted); font-size:13px; padding:30px; text-align:center; }
.session-row { align-items:center; background:var(--panel2); border:1px solid var(--line); border-radius:11px; display:grid; grid-template-columns:1.1fr repeat(5,minmax(80px,1fr)); gap:12px; padding:14px 16px; }.session-name strong { display:block; font:600 13px var(--mono); }.session-name span,.cell-label { color:var(--muted); font-size:10px; }.session-cell { font:12px var(--mono); }.session-cell .cell-label { display:block; font-family:var(--font); margin-bottom:5px; text-transform:uppercase; letter-spacing:.6px; }.status-good { color:var(--green); }.status-warn { color:#facc15; }.status-bad { color:var(--red); }
@media (max-width:900px) { .hero-grid { grid-template-columns:repeat(2,1fr); }.chart-grid { grid-template-columns:1fr; }.session-row { grid-template-columns:1fr 1fr 1fr; } }@media (max-width:560px) { .dashboard-shell { width:min(100% - 24px,1280px); padding-top:24px; }.topbar { align-items:flex-start; flex-direction:column; }.hero-grid { grid-template-columns:1fr; }.session-row { grid-template-columns:1fr 1fr; }.metric-card { min-height:160px; } }