@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap');

:root { color-scheme: light; --ink: #111; --paper: #fff; --line: #d8d8d8; --muted: #777; --serif: 'Playfair Display', Georgia, serif; --sans: 'DM Sans', 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { min-height: 100vh; display: grid; place-items: center; padding: 24px; color: var(--ink); background: var(--paper); font: 14px/1.5 var(--sans); }
.login-shell { width: min(100%, 320px); display: flex; flex-direction: column; align-items: stretch; }
.login-brand { margin-bottom: 38px; text-align: center; font: 500 17px/1.35 var(--serif); letter-spacing: 0; }
.login-brand span { display: block; font-size: 28px; }
.login-form { display: grid; gap: 12px; }
.login-form input { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 0; outline: none; color: var(--ink); background: transparent; font: 13px var(--sans); }
.login-form input:focus { border-color: var(--ink); }
.login-form input::placeholder { color: var(--muted); }
.login-form button { min-height: 44px; margin-top: 3px; border: 1px solid var(--ink); border-radius: 0; color: #fff; background: var(--ink); cursor: pointer; font: 500 12px var(--sans); }
.login-form button:hover { background: #333; }
.login-form button:disabled { opacity: .6; cursor: wait; }
.login-error { min-height: 18px; margin: 1px 0 0; color: #8a2e2e; text-align: center; font-size: 11px; }
.login-error:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); border: 0; }