:root{--bg:#eef2ee;--paper:#fff;--ink:#182a29;--muted:#5b6a64;--line:#d9e1dc;--accent:#175f50;--accent-ink:#fff;--field:#f7f9f7;--err:#b4413c;--shadow:0 1px 2px rgba(16,40,34,.06),0 12px 32px -8px rgba(16,40,34,.18)}
@media (prefers-color-scheme:dark){:root{--bg:#0c1312;--paper:#151f1d;--ink:#e6ece8;--muted:#9aa8a2;--line:#26332f;--accent:#5fbfa1;--accent-ink:#06231b;--field:#101917;--err:#ef8a83;--shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -10px rgba(0,0,0,.6)}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;opacity:.9;mask-image:radial-gradient(ellipse at center,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,#000 0,transparent 70%)}
.wrap{position:relative;min-height:100%;display:grid;place-items:center;padding:24px max(20px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom))}
.card{width:min(360px,100%);background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:32px 28px 30px;text-align:center;animation:rise .5s cubic-bezier(.22,1,.36,1) both}
.mark{width:56px;height:56px;margin:0 auto 16px;display:grid;place-items:center;border-radius:16px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
h1{margin:0 0 20px;font-size:24px;font-weight:700;letter-spacing:.2px}
.sub{margin:6px 0 24px;color:var(--muted);font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.field{position:relative;display:block}
.field input{width:100%;height:50px;padding:0 50px 0 16px;font-size:17px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.field input::placeholder{color:var(--muted);letter-spacing:0}
.field input:focus{border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.card.bad .field input{border-color:var(--err);box-shadow:none}
.eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.eye:hover{color:var(--ink)}.eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.eye .slash{opacity:1;transition:opacity .15s}.eye[aria-pressed="true"] .slash{opacity:0}
.msg{margin:0 2px;font-size:13px;line-height:18px;color:var(--err);text-align:left;max-height:0;opacity:0;overflow:hidden;transition:max-height .2s ease,opacity .2s ease,margin .2s ease}.msg:not(:empty){max-height:40px;opacity:1;margin:8px 0 0}
.msg.hint{color:var(--muted)}.msg::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:currentColor;vertical-align:middle}
.go{position:relative;width:100%;height:50px;margin-top:14px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:600;letter-spacing:2px;cursor:pointer;transition:filter .15s,transform .1s}
.go:hover{filter:brightness(1.06)}.go:active{transform:scale(.985)}.go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.go .spin{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:0}
.go.busy .t{opacity:0}.go.busy .spin{opacity:1;animation:spin .7s linear infinite}.go.busy{pointer-events:none}
.foot{margin:16px 0 0;font-size:12px;color:var(--muted)}
.card.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.card,.card.shake{animation:none}.go.busy .spin{animation:none}}
@media (max-height:560px){.card{padding:22px 22px 18px}.mark{display:none}.sub{margin-bottom:16px}}
.remember{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:14px;color:var(--ink);opacity:.82;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;width:max-content}.remember input{position:absolute;opacity:0;width:1px;height:1px}.remember .box svg{opacity:0;transition:opacity .12s}.remember input:checked+.box svg{opacity:1}.remember .box{width:18px;height:18px;display:grid;place-items:center;border:1.5px solid var(--muted);border-radius:5px;background:transparent;color:var(--accent-ink);transition:background-color .15s,border-color .15s,color .15s}.remember input:checked+.box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.remember input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}.remember:hover input:not(:checked)+.box{border-color:var(--ink)}@media (prefers-reduced-motion:reduce){.remember .box{transition:none}}