:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #153042; background: #edf3f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.card { width: min(100%, 580px); background: #fff; border: 1px solid #d4e1e7; border-radius: 18px; padding: clamp(26px, 5vw, 48px); box-shadow: 0 14px 45px #17344612; }
.brand { font-size: 13px; font-weight: 750; letter-spacing: .18em; color: #245873; margin: 0 0 32px; }
.label { display: inline-block; font-size: 12px; font-weight: 650; color: #775a17; background: #fff4ce; border-radius: 5px; padding: 6px 9px; margin: 0; }
h1 { font-size: clamp(28px, 6vw, 38px); line-height: 1.15; font-weight: 650; letter-spacing: -.025em; margin: 14px 0; }
.intro { font-size: 17px; line-height: 1.55; color: #405b6b; }
.status { margin: 28px 0 20px; padding: 15px 18px; background: #f0f6f8; border-left: 3px solid #7ba3b4; border-radius: 3px; font-size: 15px; line-height: 1.5; }
.status[data-state="authenticated"] { background: #eaf6ef; border-color: #42815a; }
.status[data-state="halted"] { background: #fff2e8; border-color: #a96d29; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
button { border: 1px solid #174f6e; border-radius: 7px; padding: 12px 18px; background: #174f6e; color: white; font: inherit; font-weight: 600; cursor: pointer; }
button:hover:enabled { background: #103e58; }
button:disabled { opacity: .52; cursor: default; }
button:focus-visible { outline: 3px solid #82b5d4; outline-offset: 3px; }
button.secondary { background: white; color: #174f6e; }
button.secondary:hover:enabled { background: #edf3f5; }
[hidden] { display: none !important; }
.note { font-size: 13px; line-height: 1.5; color: #59717f; margin: 24px 0 0; }
.note + .note { margin-top: 10px; }