.status-page { max-width: 880px; margin: 0 auto; padding: 56px 24px 80px; }
.status-page h1 { margin: 12px 0 12px; font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.05em; }
.status-page .lede { max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.status-page .lede code, .embed-note code { font-size: 12px; color: #c4a574; }
.overall { display: flex; align-items: center; gap: 10px; margin: 28px 0 22px; font-size: 14px; }
.overall i { width: 8px; height: 8px; border-radius: 99px; background: #ffc96a; }
.overall.ok i { background: var(--green); box-shadow: 0 0 9px var(--green); }
.overall.down i { background: #ff7890; box-shadow: 0 0 9px #ff7890; }
.status-grid { display: grid; gap: 10px; }
.status-grid article { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(11, 17, 29, 0.9); }
.status-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 99px; background: #ffc96a; }
.status-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.down { background: #ff7890; box-shadow: 0 0 8px #ff7890; }
.status-grid strong { display: block; font-size: 14px; }
.status-grid span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.status-grid small { display: block; margin-top: 8px; color: #9aa6bb; font-size: 12px; }
.embed-note { margin-top: 36px; color: var(--muted); font-size: 13px; line-height: 1.7; }