:root{--bg: #0a0a0a;--surface: #141414;--surface-hover: #1a1a1a;--border: #262626;--text: #fafafa;--text-muted: #737373;--green: #22c55e;--yellow: #f59e0b;--red: #ef4444;--blue: #3b82f6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}.page{min-height:100vh;display:flex;flex-direction:column}.container{max-width:720px;width:100%;margin:0 auto;padding:0 24px}header{border-bottom:1px solid var(--border);padding:24px 0}.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}header h1{font-size:20px;font-weight:600;letter-spacing:-.02em}.header-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.refresh-info{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:6px}.refresh-btn{background:none;border:1px solid var(--border);color:var(--text-muted);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s}.refresh-btn:hover:not(:disabled){border-color:var(--text-muted);color:var(--text)}.refresh-btn:disabled{opacity:.4;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auto-refresh{font-size:11px;color:var(--text-muted);opacity:.6}main{padding:32px 0;flex:1}.banner{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:10px;margin-bottom:32px;font-size:15px;font-weight:500;border:1px solid}.banner.checking{background:#6b72800d;border-color:#6b728033}.banner.healthy{background:#22c55e0f;border-color:#22c55e33}.banner.degraded{background:#f59e0b0f;border-color:#f59e0b33}.banner.down{background:#ef44440f;border-color:#ef444433}.banner-icon{font-size:18px}.banner.healthy .banner-icon{color:var(--green)}.banner.degraded .banner-icon{color:var(--yellow)}.banner.down .banner-icon{color:var(--red)}.banner.checking .banner-icon{color:var(--text-muted)}.group{margin-bottom:28px}.group h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}.service-list{border:1px solid var(--border);border-radius:10px;overflow:hidden}.service-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .1s}.service-row:last-child{border-bottom:none}.service-row:hover{background:var(--surface-hover)}.status-dot{font-size:12px;flex-shrink:0}.service-info{flex:1;min-width:0}.service-name{font-size:14px;font-weight:500}.service-error{display:block;font-size:12px;color:var(--red);margin-top:2px}.service-meta{flex-shrink:0}.latency{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}.latency.slow{color:var(--yellow)}.incidents{margin-top:40px}.incidents h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:12px}.empty{color:var(--text-muted);font-size:14px;padding:20px 0}footer{border-top:1px solid var(--border);padding:24px 0;text-align:center}footer p{font-size:13px;color:var(--text-muted)}footer a{color:var(--text-muted);text-decoration:none;transition:color .15s}footer a:hover{color:var(--text)}
