*{box-sizing:border-box}body{margin:0;background:#0b1220;color:#f8fafc;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:600px;margin:auto;padding:18px 14px 45px}.hidden{display:none!important}.center{min-height:100dvh;display:grid;place-items:center}.card{background:#192638;border-radius:15px;padding:16px;margin-bottom:13px}.login{width:min(100%,380px);padding:24px}.login h1{font-size:23px}.login p{color:#94a3b8}input{display:block;width:100%;border:1px solid #34445a;border-radius:9px;background:#0f1929;color:white;padding:12px;margin:10px 0;font:inherit}button{border:0;border-radius:9px;background:#0284c7;color:white;padding:11px 15px;font-weight:600;cursor:pointer}button:disabled{opacity:.5}button.secondary{background:#34445a}button.danger{background:#7f1d1d}button.outline{background:transparent;border:1px solid #ef4444;color:#fca5a5;width:100%}.iconBtn{background:#22334a;padding:8px 11px;font-size:19px}header,.headRight,.flex,.serverTop,.modalHead,.outRow,.manageRow{display:flex;align-items:center;justify-content:space-between;gap:10px}header{margin-bottom:19px}h1,h2,h3,p{margin:0}h1{font-size:23px}h2{font-size:18px}h3{font-size:16px}.blue,.down{color:#38bdf8}.up{color:#c084fc}.green,.live{color:#4ade80}.red,.error{color:#f87171}.muted,small{color:#94a3b8}.headRight{gap:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.stat{background:#192638;text-align:center;padding:13px 4px;border-radius:10px}.stat strong{display:block;font-size:20px;margin-top:5px}.stat small{font-size:11px}.serverTop{margin-bottom:14px}.serverTop .muted{text-align:right;font-size:12px}.rates{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rate{background:#0f1929;border-radius:10px;padding:13px}.rate strong{display:block;font-size:24px;margin:7px 0 3px}.rate small{font-size:11px}.sectionHead{display:flex;justify-content:space-between;margin:16px 0 6px;font-weight:600}.outList{max-height:211px;overflow-y:auto;overscroll-behavior:contain}.outRow{padding:11px 2px;border-bottom:1px solid #27374a}.outRow:last-child{border:0}.details{border-top:1px solid #34445a;margin-top:14px;padding-top:12px}.details summary{cursor:pointer;color:#cbd5e1}.detailBody{padding-top:13px}.alert{margin-top:10px;background:#442d23;color:#fbbf24;border-radius:8px;padding:9px}.notice{color:#94a3b8;font-size:12px;line-height:1.6;margin:10px 0}.overlay{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:14px;z-index:10}.modal{width:min(100%,500px);max-height:90dvh;overflow-y:auto}.modalHead{margin-bottom:15px}.manageRow{background:#0f1929;border-radius:10px;padding:9px;margin:7px 0}.manageRow .name{flex:1}.manageRow button{padding:7px 9px;background:#34445a}.manageRow button.danger{background:#7f1d1d}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.empty{text-align:center;padding:40px 12px}.empty h2{margin-bottom:12px}.empty p{color:#94a3b8;margin-bottom:18px}footer{text-align:center;color:#64748b;font-size:11px;margin-top:20px}svg{width:100%;height:100px}.warn{color:#fbbf24}
/* v1.0.5 - explicit refresh, stable cards, and startup state */
.headRight{gap:7px}
#liveStatus{font-size:11px;white-space:nowrap}
#refreshBtn{font-size:24px;line-height:1;padding:7px 11px;min-width:37px;min-height:36px}
#refreshBtn.spinning{opacity:.65}
#refreshBtn.spinning:not(:disabled){animation:blueSpin .7s linear infinite}
@keyframes blueSpin{to{transform:rotate(360deg)}}
.serverCard .serverTop>div:first-child{min-width:0;flex:1}
.serverName{overflow-wrap:anywhere}
.lastUpdated{display:block;margin-top:5px;font-size:10px;color:#94a3b8}
.connectionError{border-radius:8px;background:#42202b;color:#fca5a5;padding:9px 10px;font-size:12px;margin-bottom:12px;overflow-wrap:anywhere;line-height:1.5}
.bootPanel button{margin-top:16px}
@media (max-width:375px){.headRight{gap:5px}#liveStatus{font-size:10px}header h1{font-size:20px}}

/* v1.0.8 - compact accordion, true outbound status only, 10s probe cadence */
.outboundDetails{margin-top:13px;border-top:1px solid #34445a;padding-top:10px}
.outboundDetails>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:3px 0;user-select:none}
.outboundDetails>summary::-webkit-details-marker{display:none}
.outTitle{font-weight:600;font-size:13px;color:#cbd5e1}
.outRight{display:flex;align-items:center;gap:9px}
.outChevron{font-size:12px;color:#94a3b8;transition:transform .2s ease}
.outboundDetails[open] .outChevron{transform:rotate(180deg)}
.outPill{display:inline-flex;align-items:center;border-radius:14px;padding:4px 8px;font-size:11px;white-space:nowrap;font-weight:600}
.outPill.neutral{background:#27374a;color:#94a3b8}
.outPill.good{background:#153a30;color:#86efac}
.outPill.bad{background:#512635;color:#fca5a5}
.outboundContent{padding:8px 0 2px}
.outboundDetails .outList{max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.outboundDetails .outRow{font-size:12px;gap:10px}
.outRowName{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;min-width:0}
.outDot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#64748b;flex:none}
.outDot.ok{background:#4ade80}.outDot.down{background:#f87171}
.outLatency{flex:none;font-variant-numeric:tabular-nums}
.outLatency.down{color:#fca5a5}.outLatency.ok{color:#86efac}.outLatency.unknown{color:#94a3b8}
.outFoot{display:flex;align-items:center;justify-content:space-between;margin-top:7px;gap:8px;font-size:10px;color:#7f91a9}

/* v1.0.9: clear last-hour history view, preserved across live refresh */
.historyPanel{margin-top:13px;background:#101c2d;border:1px solid #2a3b50;border-radius:12px;padding:12px 9px}
.historyToolbar,.historyChartHead{display:flex;justify-content:space-between;align-items:center;gap:9px}
.historyToolbar{margin:1px 3px 13px}.historyToolbar strong{font-size:13px}
.historyReload{padding:7px 10px!important;font-size:11px}
.historySummary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.historySummary>div{padding:9px 6px;background:#18273b;border-radius:8px;min-width:0}
.historySummary small{display:block;font-size:10px;margin-bottom:7px}
.historySummary strong{font-size:13px;word-break:break-word;display:block;font-variant-numeric:tabular-nums}
.historySummary em{font-size:9px;font-style:normal;font-weight:normal;color:#94a3b8}
.historyChart{padding:11px 7px 5px;border:1px solid #2b3c52;border-radius:10px;margin-bottom:12px;background:#142236}
.historyChartHead{font-size:12px;flex-wrap:wrap}
.historyLegend{display:flex;gap:9px;flex-wrap:wrap;font-size:10px;color:#b1c1d5}
.historyLegend span{display:inline-flex;gap:4px;align-items:center}
.historyLegend i{width:8px;height:8px;border-radius:100%}
.historyPlot{width:100%;position:relative;touch-action:pan-y}
.historySvg{width:100%;height:auto;display:block;max-height:250px;overflow:visible}
.historyTooltip{position:absolute;top:8px;min-width:120px;z-index:2;background:#0b1424f2;border:1px solid #5d7189;border-radius:8px;padding:8px 9px;font-size:11px;pointer-events:none;box-shadow:0 3px 15px #0007}
.historyTooltip strong,.historyTooltip span,.historyTooltip small{display:block;margin-bottom:4px}
.historyFoot{color:#90a3b9;font-size:10px;line-height:1.6;margin:0 3px 3px}
@media(max-width:410px){.historySummary strong{font-size:11px}.historySummary>div{padding:9px 5px}.historyChart{padding:9px 5px}.historyLegend{gap:6px}}

/* v1.1.0: account/domain settings and wide desktop top 50 */
.settingsSection{padding:4px 0 17px;margin-bottom:15px;border-bottom:1px solid #35445b}
.settingsSection h3{margin-bottom:12px}
.settingsSection form{display:block}
.settingsSection label,.topTools label{display:block;color:#cbd5e1;font-size:12px;margin:9px 0}
.settingsSection input{margin:5px 0 10px}
.domainCommand{background:#0f1929;border:1px solid #31445a;border-radius:9px;padding:12px;overflow-wrap:anywhere;margin-top:12px}
.domainCommand code{display:block;margin-top:7px;color:#7dd3fc;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:normal;user-select:all}
.topBtn{font-size:11px;padding:10px 13px;white-space:nowrap;background:#155e75}
.desktopOnly{display:none}
@media(min-width:900px){.desktopOnly{display:inline-flex}main#app{max-width:760px}}
.topOverlay{position:fixed;inset:0;background:#020817e8;z-index:20;display:flex;align-items:center;justify-content:center;padding:26px}
.topWindow{width:min(1120px,100%);max-height:95dvh;overflow:hidden;border:1px solid #34465c;background:#152338;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 16px 70px #0008}
.topHead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.topHead h2{font-size:21px;margin-bottom:5px}
.topTools{display:flex;align-items:end;gap:13px;flex-wrap:wrap}
.topTools label{flex:1;min-width:170px;margin:0}
.topTools input,.topTools select{width:100%;display:block;background:#0f1929;color:#f8fafc;border:1px solid #34445a;padding:10px;border-radius:9px;margin-top:5px}
.topTools #topUpdated{font-size:11px;white-space:nowrap;padding-bottom:10px}
.topTools #topRefresh{padding:10px 14px}
.topScroll{overflow:auto;overscroll-behavior:contain;min-height:140px;flex:1}
.topTable{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.topTable th{text-align:left;position:sticky;top:0;background:#1e3046;color:#a6bdd5;font-size:11px;padding:13px 11px;z-index:1}
.topTable td{padding:12px 11px;border-bottom:1px solid #2b3e53;font-variant-numeric:tabular-nums}
.topTable tbody tr:hover{background:#21384f}
.topTable th:last-child,.topTable td:last-child{text-align:right}
.topTable .topTotal{color:#f8fafc;font-weight:700}
.topTable .topIndex{color:#7791a9}
.topTable .topUser{font-weight:600;max-width:250px;overflow:hidden;text-overflow:ellipsis}