:root { --bg: #F5F5F7; --surface: #FFFFFF; --ink: #1D1D1F; --muted: #6E6E73; --line: #E5E5EA; --line2: #D1D1D6; --accent: #006400; --accent-hover: #004D00; --bad: #D70015; --bad-bg: #FFE9EA; --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--ink); font: 15px/1.47 var(--f-ui); letter-spacing: -.008em; -webkit-font-smoothing: antialiased; }
/* a quiet light green glow behind the card, like Apple's sign-in pages */
body { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px 16px; background: radial-gradient(1200px 700px at 50% -10%, #E3F1E3 0%, rgba(227, 241, 227, 0) 60%), radial-gradient(900px 600px at 110% 110%, #EEF6EE 0%, rgba(238, 246, 238, 0) 55%), var(--bg); }
.box { width: 100%; max-width: 360px; display: grid; justify-items: center; text-align: center; animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.app-icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 100, 0, .22); margin-bottom: 22px; }
h1 { font-size: 30px; line-height: 1.15; margin: 0 0 26px; font-weight: 700; letter-spacing: -.022em; }
form { display: grid; gap: 14px; width: 100%; text-align: left; }
/* the two fields as one grouped list, as in iOS Settings */
.group { background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .05); overflow: hidden; }
.group input { display: block; width: 100%; border: 0; background: transparent; font: 17px var(--f-ui); letter-spacing: -.01em; padding: 15px 16px; color: var(--ink); outline: none; }
.group input + input { border-top: .5px solid var(--line2); }
.group input::placeholder { color: #A1A1A6; }
.group:focus-within { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 0 0 4px rgba(0, 100, 0, .16); }
button { font: 600 17px var(--f-ui); letter-spacing: -.01em; padding: 14px; border-radius: 14px; border: 0; background: var(--accent); color: #fff; cursor: pointer; transition: background .18s, transform .08s; }
button:hover { background: var(--accent-hover); }
button:active { transform: scale(.985); }
.err { background: var(--bad-bg); color: var(--bad); padding: 11px 14px; border-radius: 12px; font-size: 14px; text-align: center; }
.foot { margin: 8px 0 0; font-size: 12px; color: #A1A1A6; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .box { animation: none; } }