*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:InterVariable,ui-sans-serif,system-ui,sans-serif;font-feature-settings:normal;color-scheme:dark;font-size:16px}
body{margin:0;color:var(--color-text-default);background-color:var(--color-bg-page);-webkit-font-smoothing:antialiased;letter-spacing:-0.025em;min-height:100vh;display:flex;flex-direction:column}

:root{--color-primary:rgb(1 97 239);--color-secondary:rgb(1 84 207);--color-accent:rgb(109 40 217);--color-text-heading:rgb(247 248 248);--color-text-default:rgb(229 236 246);--color-text-muted:rgb(229 236 246 / 66%);--color-bg-page:rgb(3 6 32)}

a{color:inherit;text-decoration:inherit}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}
p{margin:0}
img{display:block;max-width:100%;height:auto}
button{cursor:pointer;font-family:inherit;font-size:100%;line-height:inherit}
ul{list-style:none;margin:0;padding:0}
svg{display:inline-block;vertical-align:middle}

.container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem}}

.text-center{text-align:center}
.text-muted{color:var(--color-text-muted)}

.header{width:100%;border-bottom:1px solid rgb(229 236 246 / 8%);position:sticky;top:0;z-index:40;background:rgb(3 6 32 / 90%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.header-inner{position:relative;margin-left:auto;margin-right:auto;max-width:80rem;padding:0.75rem 1rem;width:100%;display:flex;align-items:center;justify-content:space-between}
@media(min-width:768px){.header-inner{padding:0.75rem 1.5rem}}
.header-logo{display:flex;align-items:center;gap:0.5rem;font-weight:700;font-size:1.5rem;text-decoration:none;flex-shrink:0}
@media(min-width:768px){.header-logo{font-size:1.25rem}}
.nav-desktop{display:none}
@media(min-width:768px){.nav-desktop{display:flex}}
.nav-list{display:flex;align-items:center;gap:0.25rem}
.nav-link{display:inline-flex;align-items:center;padding:0.5rem 0.75rem;font-size:0.875rem;font-weight:500;color:var(--color-text-muted);text-decoration:none;border-radius:0.375rem;transition:color 0.15s,background 0.15s}
.nav-link:hover{color:var(--color-text-default);background:rgb(229 236 246 / 8%)}

.dropdown{position:relative}
.dropdown-menu{display:none;font-weight:500;min-width:200px;padding-left:1rem}
@media(min-width:768px){.dropdown-menu{position:absolute;background:rgb(3 6 32 / 95%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:0.25rem;box-shadow:0 20px 13px -8px rgba(0,0,0,0.3),0 8px 5px -4px rgba(0,0,0,0.5);padding-left:0;border:1px solid rgb(229 236 246 / 10%)}}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}
.dropdown-link{display:block;padding:0.5rem 1.25rem;color:var(--color-text-muted);text-decoration:none;transition:background 0.15s}
.dropdown-link:hover{background:rgb(30 41 59);color:#fff}
.dropdown-link:first-child{border-radius:0.25rem 0.25rem 0 0}
.dropdown-link:last-child{border-radius:0 0 0.25rem 0.25rem}
.dropdown-link.disabled{pointer-events:none;opacity:0.5;cursor:default}

.status-hero{padding:3rem 0 2rem;text-align:center}
.status-hero h1{font-size:1.875rem;font-weight:700;letter-spacing:-0.05em;margin-bottom:0.5rem}
@media(min-width:768px){.status-hero h1{font-size:2.25rem}}
.status-hero p{color:var(--color-text-muted);font-size:1.125rem;max-width:36rem;margin:0 auto}
.status-badge{display:inline-flex;align-items:center;gap:0.625rem;margin-bottom:1.5rem;padding:0.5rem 1.25rem;border-radius:9999px;font-size:0.875rem;font-weight:600}
.status-dot{width:0.625rem;height:0.625rem;border-radius:9999px;flex-shrink:0}
.status-dot-green{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.4)}
.status-dot-yellow{background:#eab308;box-shadow:0 0 6px rgba(234,179,8,0.4)}
.status-dot-orange{background:#f97316;box-shadow:0 0 6px rgba(249,115,22,0.4)}
.status-dot-red{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,0.4)}
.status-time{font-size:0.75rem;color:var(--color-text-muted);margin-top:0.75rem}
.status-refresh-btn{display:inline-flex;align-items:center;gap:0.375rem;margin-top:1rem;padding:0.5rem 1rem;font-size:0.8125rem;border-radius:0.375rem;background:rgb(229 236 246 / 8%);color:var(--color-text-muted);border:none;cursor:pointer;transition:background 0.15s}
.status-refresh-btn:hover{background:rgb(229 236 246 / 15%);color:var(--color-text-default)}

.components-section{padding:2rem 0}
.components-section h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem;padding-left:0.25rem}
.component-card{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1rem;border-radius:0.5rem;background:rgb(229 236 246 / 4%);border:1px solid rgb(229 236 246 / 8%);margin-bottom:0.5rem;transition:background 0.15s}
.component-card:hover{background:rgb(229 236 246 / 7%)}
.component-name{font-size:0.9375rem;font-weight:500}
.component-status{display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;font-weight:500}
.component-dot{width:0.5rem;height:0.5rem;border-radius:9999px;flex-shrink:0}

.incidents-section{padding:2rem 0}
.incidents-section h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem;padding-left:0.25rem}
.incident-card{padding:1.25rem;border-radius:0.5rem;background:rgb(229 236 246 / 4%);border:1px solid rgb(229 236 246 / 8%);margin-bottom:0.75rem}
.incident-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.5rem}
.incident-name{font-size:1rem;font-weight:600}
.incident-badge{font-size:0.6875rem;font-weight:600;padding:0.125rem 0.5rem;border-radius:9999px;text-transform:uppercase;letter-spacing:0.05em}
.incident-date{font-size:0.75rem;color:var(--color-text-muted)}
.incident-update{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid rgb(229 236 246 / 8%)}
.incident-update:first-of-type{border-top:none;margin-top:0;padding-top:0}
.incident-update-header{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;color:var(--color-text-muted);margin-bottom:0.375rem}
.incident-update-body{font-size:0.875rem;line-height:1.6;color:var(--color-text-muted)}
.incident-none{padding:2rem;text-align:center;color:var(--color-text-muted);font-size:0.9375rem}

.footer{margin-top:auto;border-top:1px solid rgb(229 236 246 / 8%)}
.footer-inner{position:relative;margin-left:auto;margin-right:auto;max-width:80rem;padding:2rem 1rem;width:100%;display:flex;flex-direction:column;align-items:center;gap:0.75rem;text-align:center}
@media(min-width:640px){.footer-inner{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:640px){.footer-inner{flex-direction:row;justify-content:space-between;text-align:left}}
.footer-brand img{opacity:0.7}
.footer-links{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;justify-content:center}
.footer-link{font-size:0.8125rem;color:var(--color-text-muted);text-decoration:none;transition:color 0.15s}
.footer-link:hover{color:var(--color-text-default)}
.footer-sep{color:rgb(229 236 246 / 20%);font-size:0.75rem}
.footer-copy{font-size:0.75rem;color:var(--color-text-muted)}

@media(max-width:767px){
  .status-hero{padding:2rem 0 1.5rem}
  .status-hero h1{font-size:1.5rem}
  .component-card{padding:0.75rem}
  .incident-card{padding:1rem}
}