*{box-sizing:border-box}
:root{
  --ink:#0e2a28;--muted:#6b8681;--faint:#93a8a3;
  --line:#e3ece8;--line-strong:#cfdfd9;
  --accent:#0a8f78;--accent-2:#0fb9a4;
  --card:rgba(255,255,255,.92);
  --glow:0 30px 60px -40px rgba(6,72,62,.65);
}
body{
  margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 620px at 8% -12%, #d5f2ea 0%, rgba(213,242,234,0) 62%),
    radial-gradient(980px 560px at 96% -4%, #e2edff 0%, rgba(226,237,255,0) 58%),
    linear-gradient(180deg,#f8fbfa,#eef4f2 60%,#f3f7f5);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(15,60,55,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,60,55,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%);
}
.wrap{position:relative;width:100%;max-width:400px;z-index:1}
.brand{
  display:flex;align-items:center;gap:10px;justify-content:center;
  font-size:20px;font-weight:800;letter-spacing:.22em;color:#056a58;margin-bottom:22px;
}
.brand small{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--faint);margin-left:4px}
.card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid rgba(255,255,255,.9);
  border-radius:22px;padding:32px 30px 28px;
  box-shadow:0 2px 6px rgba(9,48,42,.05),var(--glow);
  backdrop-filter:blur(14px) saturate(140%);
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,#0a8f78,#0fb9a4 55%,#7fe0cf);
}
h1{font-size:22px;font-weight:750;letter-spacing:-.01em;margin:2px 0 6px}
.sub{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0 0 22px}
label{display:block;font-size:11px;font-weight:650;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.field{position:relative}
input{
  width:100%;font:inherit;font-size:14px;color:var(--ink);
  background:#fbfdfc;border:1px solid var(--line-strong);border-radius:12px;
  padding:14px 46px 14px 14px;transition:border-color .18s,box-shadow .18s,background .18s;
}
input:focus{outline:none;border-color:#6fc4b1;background:#fff;box-shadow:0 0 0 3px rgba(10,143,120,.14)}
.eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;padding:8px 10px;border-radius:9px;
  font-size:13px;color:var(--muted);
}
.eye:hover{background:#eef7f3;color:#0a8f78}
button.submit{
  width:100%;margin-top:20px;padding:14px;font:inherit;font-size:14px;font-weight:650;
  color:#fff;border:1px solid transparent;border-radius:12px;cursor:pointer;
  background:linear-gradient(120deg,#0a8f78,#0fb9a4 70%,#22c9b1);
  box-shadow:0 16px 32px -18px rgba(10,143,120,.95);
  transition:transform .16s,box-shadow .16s,filter .16s;
}
button.submit:hover{transform:translateY(-1px);filter:brightness(1.04)}
button.submit:active{transform:translateY(0) scale(.99)}
button.submit:disabled{opacity:.7;cursor:default;transform:none}
.msg{
  margin-top:14px;font-size:12.5px;line-height:1.7;color:#b3261e;
  min-height:18px;
}
.msg.ok{color:#0a7d68}
.foot{margin-top:18px;font-size:11.5px;color:var(--faint);text-align:center}
.card.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}
  50%{transform:translateX(-4px)}
}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.5);
  border-top-color:#fff;border-radius:50%;margin-right:7px;vertical-align:-2px;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .card.shake,.spin{animation:none}
}
@media (max-width:420px){
  .card{padding:26px 20px 22px;border-radius:18px}
  h1{font-size:20px}
}
/* 深色跟随系统 */
@media (prefers-color-scheme: dark){
  :root{--ink:#e7f2ee;--muted:#9db4ae;--faint:#7e958f;--line:#1d2f2b;--line-strong:#2a403b;
    --card:rgba(18,30,28,.92);}
  body{background:
    radial-gradient(1200px 620px at 8% -12%, #12312b 0%, rgba(18,49,43,0) 62%),
    radial-gradient(980px 560px at 96% -4%, #142334 0%, rgba(20,35,52,0) 58%),
    linear-gradient(180deg,#0b1513,#0d1a17 60%,#0b1513);}
  body::before{background-image:
    linear-gradient(to right, rgba(180,255,235,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(180,255,235,.05) 1px, transparent 1px);}
  .brand{color:#5fd8c0}
  input{background:#101d1a;border-color:#2a403b;color:#e7f2ee}
  input:focus{background:#0e1a17}
  .eye:hover{background:#16262230}
}

label{margin-top:16px}.links{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:13px}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.guest-link{display:block;text-align:center;margin-top:20px;padding:12px;border:1px solid var(--line-strong);border-radius:12px}.hint{font-size:11px;color:var(--muted);line-height:1.7;margin:6px 0}.msg{overflow-wrap:anywhere}.msg.pending{color:var(--muted)}.msg.ok{color:#0a7d68}.msg.error{color:#b3261e}@media(prefers-color-scheme:dark){.msg.ok{color:#5fd8c0}.msg.error{color:#ffaaa2}}