:root { --paper:#EEF1F0; --sheet:#fff; --ink:#0E1614; --body:#2B3634; --muted:#5E6A68; --rule:#CDD5D3; --petrol:#145E6B; --bad:#B3261E; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --paper:#0F1715; --sheet:#16201E; --ink:#E8EEEC; --body:#C9D3D1; --muted:#8F9C9A; --rule:#2C3A37; --petrol:#5FB0BD; --bad:#EF7D74; --btn-ink:#0F1715; color-scheme: dark; } }
* { box-sizing: border-box; }
body.login { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--paper); color: var(--body); font: 400 15.5px/1.5 "Archivo", system-ui, sans-serif; padding: 16px; }
.login-card { width: min(380px, 100%); background: var(--sheet); border: 1.5px solid var(--ink); padding: 28px 26px 22px; }
.mark { width: 30px; height: 30px; color: var(--petrol); }
h1 { margin: 10px 0 0; color: var(--ink); font-size: 2rem; font-weight: 700; font-stretch: 82%; letter-spacing: -.015em; }
.sub { margin: 4px 0 20px; color: var(--muted); }
form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-size: .9rem; color: var(--ink); }
input { font: inherit; padding: 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); color: var(--ink); }
input:focus-visible, button:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
button { font: inherit; font-weight: 600; font-stretch: 88%; background: var(--petrol); color: var(--btn-ink, #fff); border: 0; border-radius: 4px; padding: 11px; cursor: pointer; }
.err { margin: 0; min-height: 1.2em; color: var(--bad); font-size: .88rem; }
.fine { margin: 16px 0 0; color: var(--muted); font-size: .8rem; }