:root {
  color-scheme: dark;
  --canvas: #252525;
  --field: #1b1b1b;
  --line: rgb(255 255 255 / 10%);
  --text: #f4f3ef;
  --soft: #d1d0cb;
  --muted: #a5a5a0;
  --olive-ink: #dce69a;
  --action: #f1f0e9;
  --action-ink: #1e1e1d;
  --danger: #ef7771;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --display: "Newsreader", Charter, Georgia, ui-serif, serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { min-height: 100dvh; margin: 0; background: var(--canvas); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--olive-ink); outline-offset: 3px; }
button, input { -webkit-appearance: none; appearance: none; }

.login-shell { width: min(100%, 640px); min-height: 100dvh; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 26px) 24px calc(env(safe-area-inset-bottom) + 32px); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--canvas); }
.login-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.login-brand .ti { color: var(--olive-ink); font-size: 24px; }
.login-card { align-self: center; width: min(100%, 390px); margin: -30px auto 0; animation: login-in 220ms ease-out; }
.login-eyebrow { margin: 0 0 10px; color: var(--muted); font-size: 14px; font-weight: 500; }
h1 { margin: 0 0 15px; color: var(--text); font-family: var(--display); font-size: clamp(42px, 11vw, 52px); font-weight: 400; letter-spacing: -.05em; line-height: .94; }
.login-copy { max-width: 33ch; margin: 0 0 29px; color: var(--muted); font-size: 16px; line-height: 1.5; }
#loginForm { display: grid; gap: 16px; }
.login-field { display: grid; gap: 8px; color: var(--soft); font-size: 14px; font-weight: 600; }
.login-input-wrap { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--field); transition: border-color 160ms ease, background 160ms ease; }
.login-input-wrap:focus-within { border-color: rgb(220 230 154 / 65%); background: #202020; }
.login-input-wrap .ti { flex: none; color: var(--olive-ink); font-size: 20px; }
.login-input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 17px; letter-spacing: .04em; }
.login-submit { min-height: 56px; margin-top: 8px; border: 0; border-radius: 17px; background: var(--action); color: var(--action-ink); font-size: 16px; font-weight: 700; transition: transform 160ms ease, background 160ms ease; }
.login-submit:hover { background: #fffef7; }
.login-submit:active { transform: scale(.985); }
.login-submit:disabled { cursor: wait; opacity: .58; }
.login-message { margin: -2px 0 0; color: var(--danger); font-size: 14px; line-height: 1.4; }
.login-note { display: flex; gap: 9px; margin: 26px 2px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.login-note .ti { flex: none; margin-top: 1px; color: var(--olive-ink); font-size: 17px; }
@keyframes login-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 700px) { .login-shell { padding-right: 36px; padding-left: 36px; } }