body{color:#e0e0e0;-webkit-font-smoothing:antialiased;background:#0f0f0f;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#root{min-height:100dvh}:root{--bg:#0a0a0a;--surface:#141414;--surface2:#1e1e1e;--border:#262626;--border2:#333;--text:#e0e0e0;--text2:#999;--text3:#555;--up:#22c55e;--up-dim:#22c55e1f;--down:#ef4444;--down-dim:#ef44441f;--accent:#6366f1;--radius:10px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px}.app{flex-direction:column;gap:16px;max-width:1100px;margin:0 auto;padding:20px 16px 60px;display:flex}.header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:4px 0 8px;display:flex}.header-title{align-items:baseline;gap:8px;display:flex}.header-title h1{color:var(--text);font-size:18px;font-weight:700}.header-sub{color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-size:12px}.header-right{align-items:center;gap:10px;display:flex}.last-refresh{color:var(--text3);font-size:12px}.pulse{background:var(--text3);border-radius:50%;width:7px;height:7px;transition:background .2s}.pulse.active{background:var(--up);animation:.8s ease-in-out infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}.stats-row{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}@media (width<=480px){.stats-row{grid-template-columns:repeat(2,1fr)}}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:2px;padding:14px 16px;display:flex}.stat[data-accent=up]{background:var(--up-dim);border-color:#22c55e4d}.stat[data-accent=down]{background:var(--down-dim);border-color:#ef44444d}.stat-value{color:var(--text);font-size:22px;font-weight:700;line-height:1}.stat[data-accent=up] .stat-value{color:var(--up)}.stat[data-accent=down] .stat-value{color:var(--down)}.stat-label{color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-top:2px;font-size:11px}.stat-sub{color:var(--text3);font-size:11px}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.filter-tabs{gap:4px;display:flex}.filter-tab{border:1px solid var(--border);color:var(--text2);cursor:pointer;background:0 0;border-radius:6px;padding:6px 12px;font-size:12px;transition:all .15s}.filter-tab:hover{border-color:var(--border2);color:var(--text)}.filter-tab.active{background:var(--surface2);border-color:var(--border2);color:var(--text)}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:7px 14px;font-size:13px;font-weight:500;transition:opacity .15s}.btn-primary:hover{opacity:.85}.btn-primary:disabled{opacity:.5;cursor:default}.btn-ghost{color:var(--text2);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:7px 14px;font-size:13px}.btn-ghost:hover{color:var(--text);border-color:var(--border2)}.add-form{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);flex-direction:column;gap:10px;padding:20px;display:flex}.add-form h3{color:var(--text);font-size:14px;font-weight:600}.add-form input{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;outline:none;width:100%;padding:8px 12px;font-size:13px}.add-form input:focus{border-color:var(--accent)}.form-error{color:var(--down);font-size:12px}.form-actions{justify-content:flex-end;gap:8px;display:flex}.empty{text-align:center;color:var(--text3);padding:60px 20px;line-height:1.8}.empty strong{color:var(--text2)}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;display:grid}@media (width<=380px){.grid{grid-template-columns:1fr}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px;transition:border-color .2s;display:flex}.card[data-status=up]{border-left:3px solid var(--up)}.card[data-status=down]{border-left:3px solid var(--down)}.card.clickable{cursor:pointer}.card.clickable:hover{border-color:var(--border2);background:var(--surface2)}.card-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.card-name{color:var(--text);font-size:14px;font-weight:600}.badge{letter-spacing:.8px;border-radius:4px;padding:2px 7px;font-size:10px;font-weight:700}.badge-up{background:var(--up-dim);color:var(--up)}.badge-down{background:var(--down-dim);color:var(--down)}.badge-unknown{background:var(--surface2);color:var(--text3)}.card-meta{flex-wrap:wrap;gap:12px;display:flex}.meta-item{color:var(--text2);font-size:12px}.meta-item.ms{color:var(--text);font-variant-numeric:tabular-nums}.meta-item.uptime{color:var(--up)}.dots{flex-wrap:wrap;gap:3px;display:flex}.dot{border-radius:2px;flex-shrink:0;width:9px;height:9px}.dot.up{background:var(--up)}.dot.down{background:var(--down)}.no-history{color:var(--text3);font-size:11px}.section-label{color:var(--text3);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);padding:4px 0 2px;font-size:11px}.hb-grid{grid-template-columns:1fr 1fr;gap:6px 12px;display:grid}.hb-row{justify-content:space-between;align-items:center;gap:6px;display:flex}.hb-label{color:var(--text3);font-size:11px}.hb-val{color:var(--text2);font-variant-numeric:tabular-nums;font-size:12px}.hb-val.ok{color:var(--up)}.hb-val.bad{color:var(--down)}.hb-alert-reason{color:var(--down);opacity:.85;grid-column:1/-1;font-size:11px}.card-footer{justify-content:space-between;align-items:center;gap:8px;margin-top:2px;display:flex}.card-url{color:var(--text3);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.remove-btn{color:var(--text3);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:2px 4px;font-size:11px;transition:color .15s}.remove-btn:hover{color:var(--down)}.modal-overlay{z-index:100;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);flex-direction:column;width:100%;max-width:420px;max-height:80vh;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.modal-title{color:var(--text);font-size:14px;font-weight:600}.modal-body{flex-direction:column;gap:8px;padding:10px 16px 16px;display:flex;overflow-y:auto}.event-row{border-bottom:1px solid var(--border);gap:10px;padding:6px 0;font-size:12px;display:flex}.event-row:last-child{border-bottom:none}.event-time{color:var(--text3);white-space:nowrap;font-variant-numeric:tabular-nums;flex-shrink:0}.event-msg{color:var(--text2)}