:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#050607;color:#f5f6f7;--panel:#101214;--line:#292d31;--muted:#92989f}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -30%,#292d31 0,#08090a 43%,#030404 100%);color:#f5f6f7}button,a{font:inherit}button{color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:238px 1fr}.sidebar{border-right:1px solid var(--line);background:#090a0b;padding:26px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}.brand img{width:42px;height:42px}.brand strong{display:block;font-size:18px}.brand span{font-size:11px;color:var(--muted)}.nav-label{margin:44px 9px 12px;font-size:9px;letter-spacing:2px;color:#6f757c}.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;text-align:left;padding:12px 13px;border-radius:10px;color:#9ca3aa;cursor:pointer}.nav button.active{background:#1a1c1f;color:#fff;box-shadow:inset 2px 0 #fff}.cloud-card{margin-top:auto;padding:14px;border:1px solid var(--line);border-radius:14px;background:#111315}.cloud-card div{display:flex;align-items:center;gap:8px;font-size:12px}.cloud-dot{width:8px;height:8px;border-radius:50%;background:#62676d}.cloud-dot[data-state=online]{background:#3ddd7b;box-shadow:0 0 12px #3ddd7b}.cloud-dot[data-state=syncing]{background:#efc94f}.cloud-dot[data-state=error]{background:#f24654}.cloud-card small{display:block;margin-top:7px;color:#777d84;font-size:10px}.main{padding:28px clamp(22px,4vw,64px) 56px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:25px;border-bottom:1px solid var(--line)}.topbar p,.eyebrow{font-size:9px;letter-spacing:2px;color:#777e85;margin:0 0 6px}.topbar h1{font-size:25px;margin:0}.back-raw{border:1px solid var(--line);border-radius:999px;padding:10px 15px;color:#bbc0c5;text-decoration:none;font-size:11px}.intro{display:flex;align-items:end;justify-content:space-between;margin:44px 0 24px}.intro h2{font-size:clamp(29px,4vw,48px);letter-spacing:-2px;margin:0 0 8px}.intro p{margin:0;color:var(--muted);max-width:600px;line-height:1.6}.sync-label{font-size:10px;color:#777e85}.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.alert-card{background:linear-gradient(145deg,#131517,#0b0c0d);border:1px solid var(--line);border-radius:19px;padding:18px;min-width:0;cursor:pointer;transition:.2s transform,.2s border-color}.alert-card:hover,.alert-card:focus{transform:translateY(-3px);border-color:#5a6066;outline:none}.card-head{display:flex;justify-content:space-between}.card-head>span{font-size:10px;letter-spacing:2px;color:#858b92}.card-head button{width:31px;height:31px;border:1px solid var(--line);border-radius:50%;background:#17191b}.alert-card h2{margin:-5px 0 4px;font-size:23px}.alert-card>p{margin:0 0 18px;font-size:11px;color:var(--muted)}.gauge{display:block;width:100%;max-height:165px;overflow:visible}.gauge-track path{fill:none;stroke-width:15;stroke-linecap:butt;filter:brightness(.75)}.gauge-track path:first-child{stroke-linecap:round}.gauge-track path:last-child{stroke-linecap:round}.needle{stroke:#fff;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 7px #fff8)}.needle-hub{fill:#fff}.gauge text{fill:#fff;font-size:25px;font-weight:800}.level-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.level-selector button{border:1px solid #262a2e;border-radius:10px;background:#151719;padding:9px 3px;display:grid;place-items:center;gap:4px;cursor:pointer;min-width:0}.level-selector button i{width:8px;height:8px;border-radius:50%;background:var(--level);box-shadow:0 0 9px color-mix(in srgb,var(--level),transparent 45%)}.level-selector button span{font-size:12px}.level-selector button b{display:none}.level-selector button[aria-checked=true]{border-color:var(--level);background:color-mix(in srgb,var(--level),#111 84%)}.detail-view{max-width:1050px}.back-overview{border:0;background:transparent;padding:5px 0 24px;color:#aeb4ba;font-size:12px;cursor:pointer}.detail-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,1fr);gap:18px}.detail-gauge,.detail-control{border:1px solid var(--line);border-radius:20px;background:#0e1012;padding:28px}.detail-number{text-align:center;margin-top:-15px}.detail-number small{display:block;color:#777e85;font-size:9px;letter-spacing:2px}.detail-number strong{font-size:62px;line-height:1}.detail-number span{display:block;color:var(--muted)}.detail-control h2{font-size:40px;margin:0}.detail-control>p:not(.eyebrow){color:var(--muted);line-height:1.6;margin-bottom:30px}.detail-control .level-selector button{padding:14px 5px}.detail-control .level-selector button b{display:block;font-size:8px;white-space:nowrap}.meaning{display:flex;gap:14px;margin-top:30px;padding:18px;border-radius:14px;background:#17191b}.meaning>i{width:10px;border-radius:6px;flex:none}.meaning small,.meaning p{font-size:10px;color:#858b92;margin:0}.meaning strong{display:block;margin:4px 0;font-size:17px}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:15px 16px;display:grid;grid-template-columns:1fr auto;align-items:center}.nav-label,.cloud-card{display:none}.nav{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin-top:12px}.nav button{text-align:center;padding:9px 4px;font-size:10px}.main{padding:20px 16px 40px}.overview-grid{grid-template-columns:1fr}.alert-card{padding:16px}.gauge.compact{max-height:135px}.detail-grid{grid-template-columns:1fr}.detail-control,.detail-gauge{padding:20px}.topbar{align-items:flex-start}.back-raw{padding:8px 10px}.intro{margin-top:28px}.intro h2{font-size:34px}.sync-label{display:none}}
@media(max-width:430px){.level-selector{gap:3px}.level-selector button{border-radius:8px}.detail-control .level-selector button b{display:none}.detail-grid{min-width:0}.detail-control h2{font-size:32px}}