* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, Arial, sans-serif; background: #f2f5fb; color: #1b1f2a;
       min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { background: #fff; max-width: 420px; width: 100%; padding: 28px 24px; border-radius: 16px;
        box-shadow: 0 6px 24px rgba(0,0,0,.08); text-align: center; }
h1 { margin-top: 0; font-size: 1.6rem; }
p { line-height: 1.5; color: #4a5160; }
button { background: #0d6efd; color: #fff; border: 0; padding: 14px 22px; border-radius: 10px;
         font-size: 1rem; cursor: pointer; width: 100%; margin-top: 8px; }
button:active { transform: scale(.98); }
button[hidden], .hint[hidden] { display: none; }
.hint { background: #fff8e1; border-radius: 10px; padding: 12px; font-size: .9rem; margin-top: 14px; }
.status { font-size: .85rem; margin-top: 16px; color: #777; }