:root{--bg: #0a0e18;--bg-2: #0e1524;--panel: #131b2c;--panel-2: #172136;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #e9eefb;--text-dim: #98a4bd;--text-faint: #64708a;--accent: #6b8afd;--up: #34d399;--up-glow: rgba(52, 211, 153, .35);--down: #fb6f7d;--down-glow: rgba(251, 111, 125, .35);--warn: #fbbf5c;--idle: #566079;--radius: 16px;--shadow: 0 8px 30px rgba(0, 0, 0, .35);font-synthesis:none}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1100px 600px at 12% -10%,#16223d 0%,transparent 55%),radial-gradient(900px 500px at 100% 0%,#1a1630 0%,transparent 50%),var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100%}.center-screen{min-height:100vh;display:grid;place-items:center;padding:24px}.spinner{width:34px;height:34px;border:3px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-card{width:100%;max-width:340px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:20px;padding:34px 28px;box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;gap:8px}.login-logo{font-size:44px;line-height:1}.login-card h1{margin:6px 0 0;font-size:22px;letter-spacing:-.02em}.login-sub{margin:0 0 12px;color:var(--text-dim);font-size:13px}.login-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border-strong);background:var(--bg-2);color:var(--text);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6b8afd33}.login-btn{margin-top:4px;padding:12px;border:none;border-radius:12px;background:linear-gradient(180deg,#7594ff,#5b7bf0);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:filter .15s,transform .05s}.login-btn:hover:not(:disabled){filter:brightness(1.08)}.login-btn:active:not(:disabled){transform:translateY(1px)}.login-btn:disabled{opacity:.5;cursor:default}.login-error{color:var(--down);font-size:13px;background:#fb6f7d1a;border:1px solid rgba(251,111,125,.25);border-radius:10px;padding:8px 10px}.app{max-width:1200px;margin:0 auto;padding:20px 20px 60px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 18px}.brand{display:flex;align-items:center;gap:10px}.brand-logo{font-size:24px}.brand-name{font-size:18px;font-weight:700;letter-spacing:-.02em}.topbar-right{display:flex;gap:8px}.ghost-btn{background:var(--panel);border:1px solid var(--border);color:var(--text-dim);padding:8px 13px;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.ghost-btn:hover:not(:disabled){background:var(--panel-2);color:var(--text);border-color:var(--border-strong)}.ghost-btn:disabled{opacity:.6;cursor:default}.summary{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}.summary-hero{display:flex;align-items:center;gap:12px}.summary-hero-dot{width:12px;height:12px;border-radius:50%}.summary-hero.good .summary-hero-dot{background:var(--up);box-shadow:0 0 0 4px var(--up-glow)}.summary-hero.bad .summary-hero-dot{background:var(--down);box-shadow:0 0 0 4px var(--down-glow);animation:pulse 1.6s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 4px var(--down-glow)}50%{box-shadow:0 0 0 8px transparent}}.summary-hero-text{font-size:17px;font-weight:600;letter-spacing:-.01em}.summary-stats{display:flex;gap:10px}.stat{min-width:92px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;align-items:flex-start}.stat-value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stat-label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}.stat-good .stat-value{color:var(--up)}.stat-warn .stat-value{color:var(--warn)}.down-banner{margin-top:14px;background:#fb6f7d14;border:1px solid rgba(251,111,125,.25);color:#ffd0d5;border-radius:12px;padding:10px 14px;font-size:14px}.down-banner strong{color:var(--down)}.cat{margin-top:30px}.cat-title{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin:0 0 14px 2px}.cat-icon{font-size:15px}.cat-count{font-size:11px;background:var(--panel);border:1px solid var(--border);color:var(--text-faint);border-radius:20px;padding:1px 8px;letter-spacing:0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}.card{position:relative;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .12s ease,border-color .15s,box-shadow .15s}.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--idle);opacity:.9}.card.is-up:before{background:var(--up)}.card.is-down:before{background:var(--down)}.card.is-idle:before{background:var(--idle)}.card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:0 10px 30px #0006}.card-top{display:flex;align-items:flex-start;gap:11px}.card-icon{font-size:22px;line-height:1;width:34px;height:34px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;flex-shrink:0}.card-title{display:flex;flex-direction:column;min-width:0;flex:1}.card-name{font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-desc{font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px}.dot.is-up{background:var(--up);box-shadow:0 0 0 3px var(--up-glow)}.dot.is-down{background:var(--down);box-shadow:0 0 0 3px var(--down-glow)}.dot.is-idle{background:var(--idle)}.card-mid{min-height:34px;display:flex;align-items:center}.spark{width:100%;height:34px;display:block}.spark-line{stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.spark-dot{fill:var(--accent)}.spark-down{stroke:var(--down);stroke-width:1.4;opacity:.85}.spark-empty{font-size:11px;color:var(--text-faint);font-style:italic}.lan-note{font-size:12px;color:var(--text-faint);font-family:ui-monospace,monospace}.coolify-stat{display:flex;align-items:baseline;gap:8px}.coolify-count{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.coolify-slash{color:var(--text-faint);margin:0 1px}.coolify-label{font-size:12px;color:var(--text-dim)}.coolify-down{font-size:11px;color:var(--warn);background:#fbbf5c1f;border-radius:6px;padding:1px 6px}.card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:10px}.status-text{font-size:12px;font-weight:600}.status-text.is-up{color:var(--up)}.status-text.is-down{color:var(--down)}.status-text.is-idle{color:var(--text-faint)}.card-meta{font-size:11.5px;color:var(--text-dim);display:flex;gap:4px;font-variant-numeric:tabular-nums}.card-meta .dim{color:var(--text-faint)}.error-box{display:flex;flex-direction:column;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--border);padding:24px;border-radius:16px;color:var(--text-dim)}.foot{margin-top:36px;text-align:center;color:var(--text-faint);font-size:12px}.metric-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.mcard{display:flex;flex-direction:column;gap:9px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;position:relative;overflow:hidden}.mcard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}.mcard.is-up:before{background:var(--up)}.mcard.is-down:before{background:var(--down)}.mcard-head{display:flex;align-items:center;gap:10px}.mcard-head .dot{margin-top:0}.mcard-title{display:flex;flex-direction:column;flex:1;min-width:0}.mcard-name{font-size:15px;font-weight:650;letter-spacing:-.01em}.mcard-sub{font-size:11.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.temp-badge{font-size:12px;font-weight:600;padding:2px 9px;border-radius:20px;font-variant-numeric:tabular-nums}.temp-badge.good{color:var(--up);background:#34d3991f}.temp-badge.warn{color:var(--warn);background:#fbbf5c24}.temp-badge.bad{color:var(--down);background:#fb6f7d24}.metric-row{display:flex;align-items:center;gap:10px}.metric-key{font-size:12px;color:var(--text-dim);width:40px;flex-shrink:0}.metric-val{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;width:78px;text-align:right;flex-shrink:0}.bar{flex:1;height:7px;background:var(--bg-2);border-radius:4px;overflow:hidden}.bar-fill{height:100%;border-radius:4px;transition:width .4s ease}.bar-fill.good{background:linear-gradient(90deg,#2bb673,var(--up))}.bar-fill.warn{background:linear-gradient(90deg,#e5a53f,var(--warn))}.bar-fill.bad{background:linear-gradient(90deg,#e5566a,var(--down))}.mcard-foot{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;padding-top:2px}.mcard-foot .dim{color:var(--text-faint);font-variant-numeric:tabular-nums}.mcard-chart{margin-top:2px;border-top:1px solid var(--border);padding-top:8px}.chart-label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint)}.trend{display:block;margin-top:2px}.trend-empty{font-size:11px;color:var(--text-faint);font-style:italic;height:38px;display:flex;align-items:center}.mcard-offline{font-size:13px;color:var(--down);padding:10px 0}.thru-row{display:flex;gap:20px;padding:4px 0 2px}.thru{display:flex;align-items:baseline;gap:5px}.thru-arrow{font-size:18px;font-weight:700}.thru-arrow.down{color:var(--up)}.thru-arrow.up{color:var(--accent)}.thru-val{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.thru-unit{font-size:12px;color:var(--text-faint)}@media(max-width:560px){.summary{flex-direction:column;align-items:flex-start}.summary-stats{width:100%}.stat{flex:1}}