/* Login uses a dark logo surface and the viewer's purple accent family. */
:root { color-scheme: dark; font: 16px/1.6 system-ui, sans-serif; color: #ede9f2; background: #17151c; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 740px; margin: 7vh auto; padding: 32px; background: #201b29; isolation: isolate; border: 1px solid #3a3445; border-radius: 16px; }
.login-logo { display: block; width: 220px; max-width: 65%; height: auto; margin: 0 auto 24px; filter: grayscale(1) contrast(2); mix-blend-mode: screen; }
h1 { font-size: 30px; line-height: 1.2; color: #fff; }
label { display: block; font-weight: 600; }
input { display: block; width: 100%; padding: 12px; margin: 12px 0; border: 1px solid #51445f; background: #2b2435; color: #ede9f2; border-radius: 6px; font: inherit; }
button { padding: 10px 18px; border: 0; border-radius: 6px; background: #7042ad; color: #fff; font: inherit; cursor: pointer; }
button:hover:not(:disabled) { background: #5e3497; }
button:disabled { opacity: .45; cursor: default; }
input:focus-visible, button:focus-visible { outline: 2px solid #b69cf6; outline-offset: 2px; }
.usage-agreement { margin: 24px 0 28px; }
.usage-agreement p { margin-top: 0; }
[hidden] { display: none !important; }
@media (max-width: 780px) { main { margin: 16px; padding: 22px; } }