:root { font-family: Arial, Helvetica, sans-serif; color: #0f172a; background: #e2e8f0; color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; padding: 24px 16px; }
.card { width: 100%; max-width: 400px; margin: auto; padding: 32px; border-radius: 16px; background: white; box-shadow: 0 12px 24px #0f172a18; overflow-wrap: anywhere; }
header { text-align: center; margin-bottom: 24px; }
.logo { display: block; width: auto; max-width: 100%; height: 48px; object-fit: contain; margin: 0 auto 16px; box-shadow: 0 3px 6px #0002; }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 19px; line-height: 1.4; margin: 0 0 10px; }
p { color: #475569; line-height: 1.5; margin: 0 0 16px; }
label { display: block; font-size: 14px; font-weight: 600; margin: 20px 0 8px; }
input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #94a3b8; border-radius: 6px; font: inherit; background: white; color: #0f172a; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
button, .secondary { display: block; width: 100%; min-height: 44px; padding: 12px 16px; margin-top: 20px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
button { color: white; background: #4f46e5; }
button:hover { background: #4338ca; }
button:disabled { background: #6366f1; cursor: wait; }
.secondary { background: white; color: #334155; border-color: #cbd5e1; }
.secondary:hover { background: #f1f5f9; }
.hint { font-size: 12px; margin-top: 8px; }
.help { margin: 24px 0 0; font-size: 12px; text-align: center; }
.error { color: #b91c1c; background: #fef2f2; padding: 12px; border-radius: 6px; margin-top: 16px; }
#status { text-align: center; }
#status[data-kind="success"] h2 { color: #15803d; }
#status[data-kind="error"] h2 { color: #b91c1c; }
@media (max-width: 360px) { .card { padding: 24px 20px; } h1 { font-size: 22px; } }