:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}}:root{--bg: #1a1a2e;--card-bg: #242444;--text: rgba(255, 255, 255, .87);--text-secondary: rgba(255, 255, 255, .6);--border: rgba(255, 255, 255, .1);--status-up: #22c55e;--status-down: #ef4444;--status-degraded: #f59e0b;--status-checking: #6b7280;--banner-up-bg: rgba(34, 197, 94, .12);--banner-down-bg: rgba(239, 68, 68, .12);--banner-degraded-bg: rgba(245, 158, 11, .12);--banner-checking-bg: rgba(107, 114, 128, .12);--header-bg: rgba(0, 0, 0, .2);--btn-bg: rgba(255, 255, 255, .08);--btn-hover-bg: rgba(255, 255, 255, .15)}[data-theme=light]{--bg: #f5f5f5;--card-bg: #ffffff;--text: #213547;--text-secondary: rgba(33, 53, 71, .6);--border: rgba(0, 0, 0, .1);--banner-up-bg: rgba(34, 197, 94, .1);--banner-down-bg: rgba(239, 68, 68, .1);--banner-degraded-bg: rgba(245, 158, 11, .1);--banner-checking-bg: rgba(107, 114, 128, .1);--header-bg: rgba(0, 0, 0, .04);--btn-bg: rgba(0, 0, 0, .06);--btn-hover-bg: rgba(0, 0, 0, .1)}.dashboard{min-height:100vh;background-color:var(--bg);color:var(--text);display:flex;flex-direction:column}.header{background-color:var(--header-bg);border-bottom:1px solid var(--border);padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.header-brand{display:flex;align-items:center;gap:.75rem}.header-logo{height:36px;width:auto}.header-title{font-size:1.35rem;font-weight:600;margin:0;letter-spacing:-.02em}.header-title span{font-weight:300;opacity:.5;margin:0 .4rem}.header-actions{display:flex;align-items:center;gap:.75rem}.last-checked{font-size:.85rem;color:var(--text-secondary)}.auto-refresh{font-size:.8rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}.btn{border:1px solid var(--border);background:var(--btn-bg);color:var(--text);padding:.45rem .9rem;border-radius:6px;font-size:.85rem;cursor:pointer;transition:background-color .2s;font-family:inherit}.btn:hover{background:var(--btn-hover-bg)}.btn:disabled{opacity:.5;cursor:not-allowed}.main{flex:1;padding:2rem;max-width:960px;margin:0 auto;width:100%;box-sizing:border-box}.status-banner{border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:2rem;display:flex;align-items:center;gap:.75rem;border:1px solid var(--border)}.status-banner.up{background:var(--banner-up-bg);border-color:#22c55e40}.status-banner.down{background:var(--banner-down-bg);border-color:#ef444440}.status-banner.degraded{background:var(--banner-degraded-bg);border-color:#f59e0b40}.status-banner.checking{background:var(--banner-checking-bg);border-color:#6b728040}.status-banner-text{font-size:1.1rem;font-weight:500}.status-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.status-dot.up{background-color:var(--status-up);box-shadow:0 0 8px #22c55e80}.status-dot.down{background-color:var(--status-down);box-shadow:0 0 8px #ef444480}.status-dot.degraded{background-color:var(--status-degraded);box-shadow:0 0 8px #f59e0b80}.status-dot.checking{background-color:var(--status-checking)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.card-header{display:flex;align-items:center;justify-content:space-between}.card-title{font-size:.85rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.card-status{font-size:1.1rem;font-weight:600}.card-status.up{color:var(--status-up)}.card-status.down{color:var(--status-down)}.card-status.checking{color:var(--status-checking)}.card-detail{font-size:.8rem;color:var(--text-secondary)}.history-section{margin-top:2rem;text-align:center}.btn-history{display:inline-block;text-decoration:none;padding:.6rem 1.5rem;font-size:.95rem}.footer{border-top:1px solid var(--border);padding:1.25rem 2rem;text-align:center;font-size:.8rem;color:var(--text-secondary)}@media(max-width:600px){.header{padding:1rem;flex-direction:column;align-items:flex-start}.main{padding:1rem}.card-grid{grid-template-columns:1fr}}@keyframes spin{to{transform:rotate(360deg)}}.btn-refreshing{animation:spin 1s linear infinite;display:inline-block}