*{box-sizing:border-box}html{background:#0d131c}body{margin:0;color:#edf3fa;background:#0d131c;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #68afff;outline-offset:3px}a{color:#91c1fd}.muted{color:#91a2b9}.small{font-size:12px}.eyebrow{font-size:10px;letter-spacing:.11em;color:#91a2b9;font-weight:800}.header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:10px 28px;border-bottom:1px solid #253345;gap:15px;background:#111a26}.brand,.header-actions{display:flex;align-items:center;gap:12px}.brand strong{display:block;letter-spacing:.02em}.brand strong span{color:#76b9ff}.brand small{display:block;color:#91a2b9;font-size:11px}.logo{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#2265a0;color:white;font-weight:800;font-size:22px}.header-actions{font-size:12px}.connection{white-space:nowrap}.connection.bad{color:#ffc17a}.connection.good{color:#4edeb0}.icon-btn{height:38px;width:38px;background:#1b2838;border:1px solid #33465e;color:#eff5fc;border-radius:10px;font-size:24px}.shell{display:grid;grid-template-columns:238px minmax(0,1fr);max-width:1420px;margin:auto;min-height:calc(100vh - 72px)}.desktop-nav{padding:24px 13px;border-right:1px solid #253345;display:flex;flex-direction:column;gap:7px}.desktop-nav strong{font-size:12px;color:#90a7bf;padding:8px 9px 18px}.nav-item{text-align:left;background:transparent;color:#b3c1d4;border:0;border-radius:11px;padding:12px}.nav-item:hover,.nav-item.active{background:#1f354c;color:#eaf6ff}.side-note{margin-top:auto;color:#8aa0b9;font-size:12px;border-top:1px solid #263343;padding:18px 7px}main{min-width:0;padding:23px 26px 40px;max-width:1100px;width:100%;margin:auto}.screen{display:none}.screen.active{display:block}.page-heading{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:17px}.page-heading h1{font-size:26px;line-height:1.2;margin:4px 0 0}.page-heading small{color:#9cacbf}.status-card{padding:23px;background:linear-gradient(120deg,#18334c,#112335);border:1px solid #355270;border-radius:17px;margin-bottom:12px}.status-main{display:flex;align-items:center;gap:11px;margin:7px 0}.status-main strong{font-size:22px}.dot{width:11px;height:11px;border-radius:50%;flex:none;background:#95a4b5;box-shadow:0 0 0 4px #ffffff12}.dot.critical{background:#ff6674}.dot.warning{background:#ffc16b}.dot.normal{background:#43d7ad}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.metric{background:#171f2c;border:1px solid #273547;border-radius:14px;padding:15px}.metric-label{font-size:12px;color:#9eafc4}.metric-reading{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.35;margin-top:6px;white-space:nowrap}.metric-reading.compact{font-size:18px}.panel{background:#171f2c;border:1px solid #273547;border-radius:15px;margin:12px 0;overflow:hidden}.section-head{padding:15px 17px;font-weight:700;border-bottom:1px solid #263445}.rows{padding:0 16px}.data-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #253243;min-height:48px}.data-row:last-child{border:0}.data-row .left{min-width:0}.data-row .label{font-size:14px}.data-row .detail{font-size:11px;color:#91a2b8;margin-top:2px;overflow-wrap:anywhere}.data-row .value{text-align:right;font-weight:750;white-space:nowrap}.data-row .value.critical{color:#ff8290}.data-row .value.warning{color:#ffd08b}.data-row .value.good{color:#5be2b7}.info,.error-banner{padding:13px 15px;border-radius:13px;background:#1b2b3e;border:1px solid #34455d;color:#a9bdd4;font-size:12px}.error-banner{margin-bottom:14px;background:#4a2027;border-color:#9a414f;color:#ffe5e7}footer{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#758ca7;margin-top:24px;flex-wrap:wrap}.mobile-nav{display:none}@media(min-width:1000px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.panel{max-width:none}}@media(max-width:790px){.shell{display:block;min-height:calc(100dvh - 63px)}.desktop-nav{display:none}.header{height:63px;padding:9px 16px}.header-actions{gap:8px}.header-actions .connection{font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis}.logo{height:34px;width:34px}.brand{gap:8px}.brand strong{font-size:14px}main{padding:18px 13px calc(90px + env(safe-area-inset-bottom))}.page-heading h1{font-size:23px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.status-card{padding:18px}.status-main strong{font-size:19px}.metric{padding:13px}.metric-reading{font-size:21px}.metric-reading.compact{font-size:16px}.mobile-nav{display:flex;position:fixed;z-index:10;bottom:0;left:0;right:0;min-height:64px;padding:7px 6px calc(5px + env(safe-area-inset-bottom));background:#111a26;border-top:1px solid #304158;justify-content:space-around;box-shadow:0 -8px 20px #0004}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:67px;padding:5px 9px;gap:2px;border:0;color:#95a9bf;background:transparent;border-radius:10px}.tab.active{color:#74b8ff;background:#1c344c}.tab span{font-size:19px;line-height:1.2}.tab small{font-size:10px}.page-heading small{font-size:10px}}@media(max-width:375px){.metric-reading{font-size:18px}.brand small{font-size:10px}.data-row .label{font-size:12px}}
.chart-panel{background:#171f2c;border:1px solid #273547;border-radius:15px;margin:13px 0;padding:15px;min-width:0}
.chart-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.chart-title{font-size:15px;font-weight:750}
.chart-periods{display:flex;gap:4px;padding:3px;border:1px solid #324253;background:#0e1925;border-radius:11px}
.chart-period{padding:7px 9px;border:0;background:transparent;color:#9caec6;border-radius:8px;font-size:12px;font-weight:700;min-height:34px;min-width:38px}
.chart-period:hover,.chart-period.active{background:#2a5b85;color:#fff}
.chart-body{position:relative;min-height:160px;touch-action:pan-y}
.chart-body.chart-empty{min-height:48px}
.chart-body svg{display:block;width:100%;height:auto;max-height:350px;overflow:visible}
.chart-body svg text{font-family:system-ui,-apple-system,Segoe UI,sans-serif}
.chart-legend{display:flex;gap:8px 18px;flex-wrap:wrap;padding:7px 0 0}
.chart-legend-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#bdcad9}
.chart-legend-item strong{color:#e9f2ff;font-weight:750;white-space:nowrap}
.chart-legend-dot{width:9px;height:9px;flex:none;border-radius:50%}
.chart-note{font-size:11px;color:#90a7c0;margin-top:8px;line-height:1.4}
.chart-tooltip{position:absolute;left:6%;right:6%;top:0;z-index:2;border:1px solid #4d627c;background:#0f1b2cf0;color:#e8f4ff;padding:6px 10px;border-radius:9px;font-size:11px;pointer-events:none;overflow-wrap:anywhere;text-align:center}
@media(max-width:790px){.chart-panel{padding:12px 9px;margin:11px 0}.chart-header{align-items:start}.chart-title{font-size:14px}.chart-period{padding:6px 7px;min-width:34px}.chart-body svg{min-height:155px}.chart-legend{gap:7px 12px}.chart-legend-item{font-size:10px}}

/* 0.4.0 authentication, PWA and lazy charts */
[hidden]{display:none!important}.login-card{max-width:430px;margin:5vh auto;padding:28px}.login-card img{border-radius:24px}.login-card label{display:block;margin:20px 0}.login-card input{display:block;width:100%;padding:14px;margin-top:8px;background:#172332;color:#edf3fa;border:1px solid #3d5167;border-radius:8px}.login-card button,.header-actions button,.install-banner button{padding:10px 16px;border:1px solid #45633b;border-radius:8px;background:#28543a;color:#fff;cursor:pointer}.header-actions{flex-wrap:wrap}.user-name{font-size:12px}.logo{object-fit:contain}.chart-group{margin:16px 0;border:1px solid #334252;border-radius:12px;overflow:hidden}.chart-group summary{padding:18px;cursor:pointer;font-weight:600}.mobile-nav{grid-template-columns:repeat(5,1fr)}.install-banner{position:fixed;bottom:90px;left:16px;right:16px;max-width:480px;z-index:100;background:#1b2c3b;border:1px solid #68a447;border-radius:16px;padding:20px;display:flex;gap:16px;box-shadow:0 8px 32px #0008}.install-banner img{border-radius:10px}.install-banner button{margin-right:8px}.chart-group .chart-panel{margin:8px}

/* Responsive header repair: fixed-height flex could overflow on phones. */
.header{display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;min-height:72px;gap:8px 16px;align-items:center;padding:12px 28px}
.header .brand{min-width:0}.header .brand>div{min-width:0}
.header .brand strong,.header .brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header .logo{flex:none;background:transparent}
.header .header-actions{display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-end;min-width:0}
.header .header-actions form{margin:0;flex:none}
.header .header-actions button{height:36px;min-height:36px;padding:6px 12px;line-height:1.2}
.header .header-actions .icon-btn{width:36px;min-width:36px;padding:0;display:grid;place-items:center;font-size:24px;line-height:1;background:#1b2838;border-color:#33465e}
.header .user-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-status{grid-column:1/-1;min-width:0;line-height:1.4}
.header-status .connection{font-size:12px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:790px){
 .header{min-height:0;padding:10px 13px;gap:7px 10px}
 .header .brand{gap:7px}.header .brand strong{font-size:14px;line-height:1.25}
 .header .brand small{font-size:10px;line-height:1.35;margin-top:2px}
 .header .header-actions{gap:6px}.header .header-actions button{font-size:12px;padding:6px 9px}
 .header .header-actions .icon-btn{padding:0;font-size:23px}
 .header .user-name{max-width:52px;font-size:11px}
 .header-status .connection{font-size:11px}
}
.chart-legend button.chart-legend-item{font:inherit;font-size:11px;background:#1b2838;border:1px solid #33465e;border-radius:8px;padding:8px 10px;cursor:pointer;min-height:36px;text-align:left}.chart-legend button.chart-legend-item:hover{border-color:#78b9ed}.chart-legend button.chart-legend-item.is-hidden{opacity:.5}.chart-legend button.chart-legend-item.is-hidden>span:not(.chart-legend-dot){text-decoration:line-through}.chart-legend button.chart-legend-item:focus-visible{outline:2px solid #78b9ed;outline-offset:2px}