:root { color-scheme: dark; font-family: system-ui, sans-serif; background:#101820; color:#edf4f7; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; display:grid; place-items:center; }
.pad { width:min(100%, 540px); min-height:100vh; padding:24px; background:linear-gradient(160deg,#172630,#101820); }
header { display:flex; gap:10px; align-items:center; } header small, article span, .hero span { display:block; color:#a8bbc3; } #status { margin-left:auto; color:#76d8a6; font-size:.85rem; }
.mark { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:#ffb800; color:#101820; font-weight:800; }
.card, article { margin-top:28px; padding:20px; border:1px solid #2b414d; border-radius:16px; background:#182c37; }
h1 { margin-top:0; } form { display:grid; gap:10px; margin-top:22px; } input, button { min-height:48px; border-radius:10px; padding:0 14px; font:inherit; }
input { border:1px solid #526873; background:#0e1a21; color:inherit; letter-spacing:.08em; } button { border:0; background:#ffb800; color:#101820; font-weight:750; }
.error { min-height:1.4em; color:#ff9292; } .hero { margin:34px 0 18px; text-align:center; padding:26px; border-radius:18px; background:#ffb800; color:#101820; }
.hero span { color:#584400; }.hero strong { display:block; font-size:6rem; line-height:1; }.hero em { font-style:normal; font-weight:700; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.grid article { margin:0; min-height:105px; }.grid strong { display:block; margin-top:12px; font-size:1.1rem; }.note { color:#a8bbc3; text-align:center; }
.awake { margin-top:18px; text-align:center; }.awake button { min-height:42px; background:#294553; color:#edf4f7; border:1px solid #526873; }.awake .note { margin:9px 0 0; }