/* Self-contained login surface; no external fonts or application assets. */
:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; color: #eef2f6; background: #111820; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(100%, 27rem); padding: clamp(1.5rem, 5vw, 2.5rem); background: #1b2530; border: 1px solid #425061; border-radius: .75rem; }
.brand { color: #8de4ce; font-weight: 650; letter-spacing: .03em; }
h1 { font-size: 1.8rem; line-height: 1.2; margin: 1.5rem 0 .75rem; }
p { color: #c0cbd6; }
form { display: grid; gap: .6rem; margin-top: 1.75rem; }
label { margin-top: .5rem; }
input, button { font: inherit; width: 100%; min-height: 2.8rem; padding: .6rem .8rem; border: 1px solid #718194; border-radius: .35rem; }
input { color: #eef2f6; background: #111820; }
button { margin-top: 1rem; color: #10241f; background: #8de4ce; border-color: #8de4ce; font-weight: 650; cursor: pointer; }
:focus-visible { outline: 3px solid #c9b2ff; outline-offset: 3px; }
.error { color: #ffd1c5; border-left: 3px solid #ffa58e; padding-left: .75rem; }

/* Keep the form within narrow and zoomed viewports, including long errors. */
.login-card, form, input { min-width: 0; }
.login-card { overflow-wrap: anywhere; }
input { max-width: 100%; caret-color: #8de4ce; }
button:hover { background: #b1efdf; }
::selection { color: #10241f; background: #8de4ce; }