/* finesse · register=product · A=cool-slate+flat-violet · B=650/400 · C=status-ledger · D=feedback-only · E=quiet-operations · SOUL=4 SPECTACLE=1 DENSITY=6 */
:root{
  --page:#eceff3; --surface:#f9fafc; --surface-2:#f2f4f8; --rail:#20232a;
  --ink:#171a21; --muted:#5b6474; --faint:#798295; --border:rgba(23,26,33,.08);
  --accent:#5b4bd1; --accent-soft:rgba(91,75,209,.11); --on-accent:#f8f7ff;
  --ok:#267555; --ok-soft:rgba(38,117,85,.11); --warn:#9b6719; --warn-soft:rgba(155,103,25,.12);
  --bad:#aa3e38; --bad-soft:rgba(170,62,56,.11); --shadow:0 24px 70px -46px rgba(31,35,50,.42);
  --radius:20px; --radius-sm:12px; --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:clip}
body{background:var(--page);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.55}
button,a{font:inherit}
button{white-space:nowrap}
.skip{position:fixed;left:16px;top:12px;z-index:3;transform:translateY(-150%);padding:9px 12px;border-radius:var(--radius-sm);background:var(--rail);color:var(--on-accent)}
.skip:focus{transform:translateY(0)}
.shell{width:min(760px,calc(100% - 32px));margin:clamp(20px,6vh,72px) auto;background:var(--surface);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);overflow:clip}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap}
.brand small{color:var(--muted);font-size:12px;font-weight:600}
.mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--rail);color:var(--on-accent);font-size:14px}
button{min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 15px;background:var(--surface-2);color:var(--ink);font-weight:650;cursor:pointer}
button:hover{border-color:rgba(91,75,209,.3);background:var(--accent-soft)}
button:disabled{cursor:wait;opacity:.6}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.summary{display:grid;grid-template-columns:18px minmax(0,1fr);gap:16px;padding:34px 28px 30px}
.overall-dot{width:14px;height:14px;margin-top:8px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 5px rgba(121,130,149,.12)}
.summary[data-status="operational"] .overall-dot{background:var(--ok);box-shadow:0 0 0 5px var(--ok-soft)}
.summary[data-status="degraded"] .overall-dot{background:var(--warn);box-shadow:0 0 0 5px var(--warn-soft)}
.summary[data-status="outage"] .overall-dot{background:var(--bad);box-shadow:0 0 0 5px var(--bad-soft)}
.label{margin:0 0 5px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.04em}
h1{margin:0;font-size:24px;line-height:1.25;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere;min-width:0}
.summary p:last-child{margin:8px 0 0;color:var(--muted);text-wrap:pretty}
.service-list{border-top:1px solid var(--border)}
.service-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px;padding:16px 28px;border-bottom:1px solid var(--border)}
.service-row:last-child{border-bottom:0}
.service-row h2{margin:0 0 2px;font-size:15px;line-height:1.35;overflow-wrap:anywhere;min-width:0}
.service-row p{margin:0;color:var(--muted);font-size:13px}
.status{flex:0 0 auto;min-width:86px;padding:7px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:700;text-align:center;white-space:nowrap}
.service-row[data-status="operational"] .status{background:var(--ok-soft);color:var(--ok)}
.service-row[data-status="degraded"] .status,.service-row[data-status="maintenance"] .status,.service-row[data-status="paused"] .status{background:var(--warn-soft);color:var(--warn)}
.service-row[data-status="outage"] .status{background:var(--bad-soft);color:var(--bad)}
footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 24px;border-top:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:12px}
footer p{margin:0} footer a{color:var(--accent);font-weight:650;text-decoration:none;white-space:nowrap}
@media(max-width:520px){
  .shell{width:min(100% - 20px,760px);margin:10px auto;border-radius:22px}
  .masthead{padding:16px}.summary{padding:28px 20px 24px}.service-row{padding:15px 20px;gap:12px}
  .service-row p{display:none}.status{min-width:76px}footer{align-items:flex-start;padding:16px 20px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}