:root {
  --bg: #07060d; --card: rgba(20, 17, 38, 0.7); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16);
  --text: #f4f2ff; --muted: #9a94bb; --cyan: #00e5ff; --violet: #8b5cff; --pink: #ff3da6;
  --up: #3ddc97; --degraded: #ffc531; --down: #ff5c7a; --maint: #00e5ff; --none: rgba(255, 255, 255, 0.08);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100svh; background: var(--bg); color: var(--text); font: 15px/1.5 "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.glow { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(60vmax 50vmax at 80% -10%, rgba(139, 92, 255, 0.22), transparent 60%), radial-gradient(50vmax 40vmax at -10% 100%, rgba(0, 229, 255, 0.1), transparent 60%); }
.wrap { position: relative; max-width: 880px; margin: 0 auto; padding: 28px 16px 40px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand img { filter: drop-shadow(0 4px 14px rgba(139, 92, 255, 0.55)); }
.brand small { font: 500 13px ui-monospace, monospace; color: var(--muted); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 12px ui-monospace, monospace; color: var(--muted); padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: ping 2s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }

.hero { margin: 44px 0 26px; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 18px; }
.overall { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(12px); }
.overall strong { display: block; font-size: 18px; letter-spacing: -0.01em; }
.overall small { color: var(--muted); font-size: 13px; }
.overall-icon { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; font-weight: 700; color: #07060d; }
.overall-ok { border-color: rgba(61, 220, 151, 0.35); background: linear-gradient(90deg, rgba(61, 220, 151, 0.12), var(--card) 60%); }
.overall-ok .overall-icon { background: var(--up); }
.overall-ok .overall-icon::after { content: '✓'; }
.overall-degraded .overall-icon, .overall-maintenance .overall-icon { background: var(--degraded); }
.overall-degraded .overall-icon::after, .overall-maintenance .overall-icon::after { content: '!'; }
.overall-degraded, .overall-maintenance { border-color: rgba(255, 197, 49, 0.35); background: linear-gradient(90deg, rgba(255, 197, 49, 0.1), var(--card) 60%); }
.overall-partial .overall-icon, .overall-major .overall-icon { background: var(--down); }
.overall-partial .overall-icon::after, .overall-major .overall-icon::after { content: '×'; font-size: 22px; }
.overall-partial, .overall-major { border-color: rgba(255, 92, 122, 0.4); background: linear-gradient(90deg, rgba(255, 92, 122, 0.12), var(--card) 60%); }
.overall-loading .overall-icon { background: var(--none); }

.services { display: grid; gap: 12px; }
.svc { padding: 16px 18px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(12px); }
.svc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.svc-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; text-decoration: none; }
a.svc-name:hover { text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 3px; }
.svc-name svg { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-up { color: var(--up); background: rgba(61, 220, 151, 0.1); }
.pill-degraded, .pill-maintenance { color: var(--degraded); background: rgba(255, 197, 49, 0.1); }
.pill-maintenance { color: var(--maint); background: rgba(0, 229, 255, 0.1); }
.pill-down { color: var(--down); background: rgba(255, 92, 122, 0.12); }
.pill-unknown { color: var(--muted); background: var(--none); }
.bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 34px; margin: 14px 0 8px; }
.bar { border-radius: 3px; background: var(--none); transition: transform 0.15s var(--ease), filter 0.15s; cursor: default; }
.bar:hover, .bar:focus-visible { transform: scaleY(1.12); filter: brightness(1.25); outline: none; }
.b-up { background: var(--up); }
.b-minor { background: #9fe36b; }
.b-degraded { background: var(--degraded); }
.b-down { background: var(--down); }
.svc-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.svc-foot b { color: var(--text); font-weight: 600; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; }

.incidents { margin-top: 34px; }
.incidents h2 { font-size: 18px; letter-spacing: -0.02em; margin-bottom: 12px; }
.incidents ul { list-style: none; display: grid; gap: 8px; }
.incidents li { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: 14px; display: grid; gap: 2px; }
.incidents li.ok { color: var(--up); border-style: dashed; }
.incidents li.open { border-color: rgba(255, 92, 122, 0.4); }
.incidents li small { color: var(--muted); }
.muted { color: var(--muted); }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.tip { position: fixed; z-index: 10; pointer-events: none; padding: 6px 10px; border-radius: 9px; background: #14112a; border: 1px solid var(--line-2); font-size: 12.5px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8); }
.tip b { display: block; }
@media (max-width: 600px) {
  .bars { grid-template-columns: repeat(45, 1fr); }
  .bars .bar:nth-child(-n + 45) { display: none; }
  .svc-foot > span:first-child, .svc-foot > span:last-child { display: none; }
  .stats { gap: 6px 14px; }
  .hero { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }