:root{--color-bg: oklch(.98 .01 var(--hue));--color-surface: oklch(1 0 var(--hue));--color-border: oklch(.92 .02 var(--hue));--color-text-primary: oklch(.2 .05 var(--hue));--color-text-secondary: oklch(.5 .05 var(--hue));--color-text-muted: oklch(.7 .03 var(--hue));--color-success: #22c55e;--color-success-bg: #f1fcf4;--color-success-border: #bef4d0;--color-warning: #f97316;--color-warning-bg: #fffbeb;--color-error: #ef4444;--color-error-bg: #fdf4f3;--color-error-border: #fcd2cc}@media(prefers-color-scheme:dark){:root{--color-bg: oklch(.2 .03 var(--hue));--color-surface: oklch(.25 .03 var(--hue));--color-border: oklch(.35 .05 var(--hue));--color-text-primary: oklch(.98 .01 var(--hue));--color-text-secondary: oklch(.8 .03 var(--hue));--color-text-muted: oklch(.6 .03 var(--hue));--color-success-bg: #072c15;--color-success-border: #1a7b3c;--color-warning-bg: #451a03;--color-error-bg: #42140d;--color-error-border: #932f21}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--color-bg);color:var(--color-text-primary);line-height:1.6;min-height:100vh}.container{max-width:800px;margin:0 auto;padding:2rem 1rem}header{text-align:center;margin-bottom:1rem;display:flex;gap:20px;align-items:center;justify-content:center}.logo{width:64px;height:64px;object-fit:contain;margin-bottom:1rem}h1{font-size:1.875rem;font-weight:700;margin-bottom:.5rem}.subtitle{color:var(--color-text-secondary);font-size:1rem}.status-banner{border-radius:.75rem;padding:1.5rem;margin-bottom:2rem;text-align:center;border:1px solid}.status-banner.operational{background-color:var(--color-success-bg);border-color:var(--color-success-border)}.status-banner.degraded{background-color:var(--color-warning-bg);border-color:var(--color-warning)}.status-banner.down{background-color:var(--color-error-bg);border-color:var(--color-error-border)}.status-banner h2{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.status-banner.operational h2{color:var(--color-success)}.status-banner.degraded h2{color:var(--color-warning)}.status-banner.down h2{color:var(--color-error)}.status-banner p{color:var(--color-text-secondary);font-size:.875rem}.monitors-section{background-color:var(--color-surface);border-radius:.75rem;border:1px solid var(--color-border);overflow:hidden}.section-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:1rem}.section-header h3{font-size:1.125rem;font-weight:600}.time-range-switch{display:flex;align-items:center;gap:.25rem;padding:.25rem;background-color:var(--color-bg);border-radius:.5rem;border:1px solid var(--color-border)}.time-range-switch a{padding:.375rem .75rem;font-size:.875rem;font-weight:600;text-decoration:none;color:var(--color-text-secondary);border-radius:.375rem;transition:all .2s}.time-range-switch a:hover{color:var(--color-text-primary)}.time-range-switch a.active{background-color:var(--color-success);color:#111827}.monitor-list{list-style:none}.monitor-item{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--color-border)}.monitor-item:last-child{border-bottom:none}.monitor-info{flex:1;min-width:0}.monitor-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap}.monitor-name{font-weight:600;font-size:1rem}.monitor-url{color:var(--color-text-muted);font-size:.75rem;font-family:monospace}.uptime-section{background-color:var(--color-surface);border-radius:.75rem;border:1px solid var(--color-border);padding:1.5rem;margin-top:1.5rem;text-align:center}.uptime-title{font-size:1.125rem;font-weight:600;margin-bottom:1.5rem;color:var(--color-text-primary)}.uptime-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.uptime-item{text-align:center}.uptime-value{font-size:2rem;font-weight:700;color:var(--color-success);margin-bottom:.25rem}.uptime-label{color:var(--color-text-secondary);font-size:.875rem}@media(max-width:640px){.uptime-grid{grid-template-columns:1fr;gap:1rem}.uptime-value{font-size:1.5rem}}.monitor-row{display:flex;align-items:center;gap:1rem}.check-history{display:flex;align-items:flex-end;gap:2px;height:28px;flex:1}.bar{flex:1;border-radius:2px;height:100%;transition:opacity .2s}.bar:hover{opacity:.8}.bar.up{background-color:var(--color-success)}.bar.degraded{background-color:var(--color-warning)}.bar.down{background-color:var(--color-error)}.bar.nodata{background-color:var(--color-text-muted);opacity:.3}.monitor-stats{display:flex;align-items:center;gap:1rem;min-width:fit-content;width:132px}.uptime-percent{font-size:.875rem;font-weight:500;color:var(--color-success)}.status-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500}.status-badge.operational{color:var(--color-success)}.status-badge.degraded{background-color:var(--color-warning-bg);color:var(--color-warning)}.status-badge.down{background-color:var(--color-error-bg);color:var(--color-error)}.status-dot{width:6px;height:6px;border-radius:50%}.status-badge.operational .status-dot{background-color:var(--color-success);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.5)}}.status-badge.degraded .status-dot{background-color:var(--color-warning)}.status-badge.down .status-dot{background-color:var(--color-error)}footer{text-align:center;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:.875rem}footer a{color:var(--color-success);text-decoration:none}footer a:hover{text-decoration:underline}@media(max-width:640px){.container{padding:1rem}.monitor-item{flex-direction:column;align-items:stretch;gap:.75rem}.monitor-row{width:100%}.check-history{height:24px}}