:root{--bg:#F2F2F7;--surface:#fff;--fill:rgba(118,118,128,.12);--ink:#1C1C1E;--ink2:#6C6C72;--line:rgba(60,60,67,.13);--accent:#1D7A4B;--accent-ink:#fff;--accent-soft:#E3F1E9;--danger:#D92D20;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#000;--surface:#1C1C1E;--fill:rgba(120,120,128,.24);--ink:#F5F5F7;--ink2:#98989F;--line:rgba(84,84,88,.55);--accent:#3CC47E;--accent-ink:#04120A;--accent-soft:rgba(60,196,126,.16);--danger:#FF6B5F;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font:17px/1.42 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink);display:flex;align-items:flex-start;justify-content:center}
main{width:100%;max-width:400px;margin:12vh 20px 40px;animation:in .5s cubic-bezier(.32,.72,0,1)}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:10px;font:600 17px var(--font);letter-spacing:-.02em;margin-bottom:28px;color:var(--ink)}
.brand::before{content:"";width:30px;height:30px;border-radius:8px;background:var(--accent) url("/icon.svg") center/cover}
h1{font:700 34px/1.1 var(--font-d);letter-spacing:-.025em;margin:0 0 6px}
.sub{color:var(--ink2);margin:0 0 24px;font-size:16px}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-size:13px;color:var(--ink2);font-weight:500}
input{font:inherit;font-size:17px;padding:13px 14px;border:0;border-radius:12px;background:var(--surface);color:var(--ink);min-height:50px;box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .15s}
input:focus{outline:0;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1.5px var(--accent) inset}
button{font:600 17px var(--font);padding:14px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);min-height:50px;cursor:pointer;margin-top:6px;transition:transform .18s cubic-bezier(.32,.72,0,1),opacity .15s}
button:active{transform:scale(.97)} button:disabled{opacity:.5}
.err{color:var(--danger);margin:0;min-height:1.2em;font-size:14px}
@media (prefers-reduced-motion:reduce){main{animation:none}button{transition:none}}