@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(fonts/inter-700.woff2) format("woff2"); }

:root { --bg: #f6f6f3; --surface: #fff; --line: #e7e5df; --line-2: #d6d3cb; --ink: #17202a; --ink-2: #4b5563; --ink-3: #8a909a; --navy: #1d3557; --navy-2: #142742; --err: #b42330; --err-bg: #fdecee; }
* { box-sizing: border-box; }
*, *::before, *::after { font-variant-ligatures: no-contextual !important; font-feature-settings: "calt" 0 !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); color: var(--ink); font: 15px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.box { width: 100%; max-width: 380px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 2px rgba(23, 32, 42, .03); }
h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
input { height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; font: 15px "Inter", system-ui, sans-serif; color: var(--ink); background: #fbfbf9; }
input:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(29, 53, 87, .12); }
button { height: 42px; margin-top: 4px; border: 0; border-radius: 8px; background: var(--navy); color: #fff; font: 600 15px "Inter", system-ui, sans-serif; cursor: pointer; }
button:hover { background: var(--navy-2); }
.err { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--err-bg); color: var(--err); font-size: 14px; font-weight: 500; }