:root { --bg:#0c1019; --surface:#151c2b; --line:#263149; --text:#edf2ff; --muted:#a9b5cc; --accent:#8c7cff; --good:#4de2a6; --warn:#ffc563; --bad:#ff7088; color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
:root.light { --bg:#f5f7ff; --surface:#fff; --line:#d8dfef; --text:#172033; --muted:#65708a; --accent:#6252da; color-scheme:light; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); } button,select { font:inherit; } .topbar { min-height:72px; display:flex; justify-content:space-between; align-items:center; padding:0 clamp(20px,6vw,88px); border-bottom:1px solid var(--line); } .brand { color:var(--text); text-decoration:none; font-weight:900; letter-spacing:.08em; } .brand span,.kicker { color:var(--accent); } .topbar-actions { display:flex; align-items:center; gap:16px; color:var(--muted); } button,select { border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); padding:9px 12px; } main { max-width:1200px; margin:auto; padding:clamp(30px,7vw,80px) clamp(20px,5vw,40px); } .hero { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px; margin-bottom:42px; } h1 { font-size:clamp(2rem,5vw,4.2rem); letter-spacing:-.055em; margin:7px 0; } h2 { margin:5px 0; } .hero p:last-child,.connection,.metric span,.service-meta,footer { color:var(--muted); } .kicker { font-size:.73rem; font-weight:800; letter-spacing:.15em; margin:0; } .connection { padding:12px 15px; border:1px solid var(--line); border-radius:999px; background:var(--surface); } .connection i,.state { width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--good); margin-right:8px; } .metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:24px; } .metric,.panel { border:1px solid var(--line); background:var(--surface); border-radius:16px; } .metric { padding:20px; min-height:140px; display:flex; flex-direction:column; justify-content:space-between; } .metric strong { font-size:2rem; letter-spacing:-.05em; } .bar { height:7px; overflow:hidden; border-radius:20px; background:var(--line); } .bar i { display:block; height:100%; background:var(--accent); border-radius:inherit; transition:width .4s; } .panel { padding:clamp(18px,4vw,30px); } .panel-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; } .panel-heading label { color:var(--muted); } .services { display:grid; gap:9px; } .service { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:15px; border-radius:12px; background:color-mix(in srgb,var(--bg) 48%,var(--surface)); } .service h3 { margin:0 0 4px; font-size:1rem; } .state.warning { background:var(--warn); }.state.offline { background:var(--bad); } footer { padding:30px; text-align:center; border-top:1px solid var(--line); font-size:.9rem; } @media(max-width:700px) { .metrics { grid-template-columns:repeat(2,1fr); } .topbar-actions #clock { display:none; } } @media(max-width:400px) { .metrics { grid-template-columns:1fr; } }