@font-face { font-family: Inter; font-weight: 500; src: url('/fonts/Inter-500.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Inter; font-weight: 600; src: url('/fonts/Inter-600.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Inter; font-weight: 700; src: url('/fonts/Inter-700.ttf') format('truetype'); font-display: swap; }
:root { font-family: Inter, system-ui, sans-serif; font-weight: 500; color: #eef2f5; background: #10151c; --muted: #a1adba; --line: #34404b; --green: #92d784; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
[hidden] { display: none !important; }
.wordmark { display: flex; align-items: center; gap: 22px; padding: 32px 40px; color: var(--green); font-size: 27px; font-weight: 700; letter-spacing: -.04em; }
.wordmark span { border-left: 1px solid var(--line); padding-left: 22px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
main { width: min(100% - 48px, 380px); margin: 48px auto 64px; align-self: center; }
.eyebrow { color: var(--green); font-size: 10px; font-weight: 600; letter-spacing: .13em; }
h1 { font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -.045em; margin: 16px 0 14px; }
.intro > p { margin: 0 0 36px; color: var(--muted); font-size: 14px; line-height: 1.7; }
button, input { font: inherit; }
button { cursor: pointer; }
.field { margin-top: 22px; }
.field > label { display: block; margin-bottom: 9px; font-size: 12px; }
.field input { width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; color: #eef2f5; background: #171e27; font-size: 15px; }
.field input:hover { border-color: #697687; }
.field input:focus { border-color: var(--green); outline: 3px solid #92d78420; }
.field input[aria-invalid=true] { border-color: #a66b6b; }
.password { position: relative; }
.password input { padding-right: 52px; }
.password button { position: absolute; right: 3px; top: 3px; width: 44px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.password button:hover { background: #26313d; color: #eef2f5; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eye-slash { display: none; }
[aria-pressed=true] .eye-slash { display: initial; }
.remember { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 17px 0 20px; color: var(--muted); font-size: 12px; cursor: pointer; }
.remember input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); cursor: pointer; }
.submit { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 50px; padding: 13px 17px; border: 1px solid var(--green); border-radius: 8px; background: var(--green); color: #132414; font-size: 14px; font-weight: 600; }
.submit:hover { background: #a6e59a; }
.submit:disabled { cursor: wait; opacity: .7; }
button:focus-visible, .remember input:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.error { margin: 0 0 24px; padding: 13px 15px; color: #ffcece; background: #302126; border: 1px solid #69444a; border-radius: 8px; font-size: 13px; line-height: 1.6; }
footer { padding: 22px 40px; color: #8996a4; font-size: 11px; }
@media (max-width: 600px) {
  .wordmark { padding: 26px 24px; font-size: 25px; }
  main { margin: 36px auto 56px; }
  h1 { font-size: 31px; }
  .field input { font-size: 16px; }
  footer { padding: 22px 24px; }
}