body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; height:100vh; display:flex; align-items:center; justify-content:center; background:#f4f6f8; }
    .hero { background:#fff; padding:2.25rem; border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,0.08); width:min(780px,94%); text-align:center; }
    .logo { width:96px; height:auto; display:block; margin:0 auto 1rem; }
    .hero h1 { margin:0 0 0.75rem; font-size:2rem; letter-spacing:0.2px; }
    .hero p { margin:0 0 1.25rem; color:#555; font-size:1.0625rem; }
    .form-row { display:flex; gap:0.75rem; justify-content:center; align-items:center; margin-top:0.5rem; }
    input[type="text"] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:clamp(28px, 6vw, 56px); letter-spacing:0.06em; padding:0.6rem 0.8rem; border:2px solid #e3e6ea; border-radius:12px; width:12ch; text-align:center; background:#fbfcfd; color:#111; outline:none; }
    input[type="text"]::placeholder { color: #d1d5db;  }
    input[type="text"]:focus { border-color:#0b5fff; box-shadow:0 0 0 4px rgba(11,95,255,0.12); }
    input[type="submit"] { padding: 0 1.5rem; height: calc(clamp(28px, 6vw, 56px) + 1.2rem + 1.2rem); border-radius:12px; border:0; background:#0b5fff; color:#fff; cursor:pointer; font-weight:600; font-size: 1.125rem; line-height: 1; }
    input[type="submit"]:hover { background:#0949c7; }
    .message { margin-bottom:1rem; padding:.75rem 1rem; border-radius:12px; text-align:left; width:100%; box-sizing:border-box; }
    .error { background:#fff3f3; border:1px solid #f0b0b0; color:#7a1b1b; }
    .success-inline { background:#f3fff6; border:1px solid #b0f0c7; color:#0b5f2b; }