:root{
  --bg:#10151b; --panel:#171d24; --raise:#1c242e; --line:#26303a;
  --text:#e7ecf1; --muted:#8a97a3; --accent:#f2a33c; --err:#e5534b; --ok:#6fcf97;
  --font-ui:"Segoe UI","Microsoft YaHei",-apple-system,"PingFang SC",sans-serif;
  --font-mono:"Cascadia Code",Consolas,"SF Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(900px 640px at 50% 30%,#151b23 0%,var(--bg) 62%,#0b0e12 100%);
  color:var(--text);font:14px/1.6 var(--font-ui);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 16px 64px;
}
::selection{background:var(--accent);color:#161006}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.card{
  width:min(392px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:30px 30px 26px;position:relative;
}
.card::before,.card::after,
.card .tick-tr,.card .tick-bl{
  content:"";position:absolute;width:14px;height:14px;border:0 solid #39434f;
}
.card::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.card .tick-tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.card .tick-bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.card::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}

.logo{width:46px;height:46px;display:block;margin:0 auto 14px}
h1{font-size:17px;font-weight:600;text-align:center;letter-spacing:.01em}
.sub{font-size:12.5px;color:var(--muted);text-align:center;margin:6px 0 22px}

form{display:flex;flex-direction:column;gap:14px}
label{display:block;font-size:12.5px;color:var(--muted)}
input{
  width:100%;height:38px;margin-top:5px;padding:0 12px;color:var(--text);
  background:#121820;border:1px solid var(--line);border-radius:8px;
  font:13.5px var(--font-ui);transition:border-color .15s;
}
input:focus{outline:none;border-color:var(--accent)}
input::placeholder{color:#54626f}

.cap{display:flex;gap:10px;align-items:flex-end}
.cap-box{
  width:122px;height:38px;flex:none;border:1px solid var(--line);border-radius:8px;
  background:#121820;overflow:hidden;cursor:pointer;display:flex;
  align-items:center;justify-content:center;
}
.cap-box svg{display:block}
.cap input{margin-top:5px}

/* 密码框：显示/隐藏切换 */
.pwd{position:relative;display:block}
.pwd input{padding-right:42px}
.eye{
  position:absolute;right:5px;top:5px;width:34px;height:38px;border:0;background:transparent;
  color:#54626f;cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:8px;transition:color .15s;
}
.eye:hover{color:var(--muted)}
.eye svg{width:18px;height:18px}
.eye .off{display:none}
.eye.show .on{display:none}
.eye.show .off{display:block}
.eye.show{color:var(--accent)}

.err{
  display:none;background:rgba(229,83,75,.08);border:1px solid rgba(229,83,75,.4);
  color:#f0978f;padding:8px 12px;border-radius:8px;font-size:12.5px;line-height:1.6;
}
.err.show{display:block}
.err.info{background:rgba(242,163,60,.07);border-color:rgba(242,163,60,.4);color:#f2c48c}

.btn-primary{
  height:40px;border:0;border-radius:8px;background:var(--accent);color:#161006;
  font:600 14px var(--font-ui);cursor:pointer;transition:filter .15s;margin-top:2px;
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}

.alt{text-align:center;font-size:13px;color:var(--muted);margin-top:18px}

.done{display:none;text-align:center;padding:14px 0 6px}
.done.show{display:block}
.done .ok{width:56px;height:56px;margin:0 auto 14px;color:var(--ok)}
.done h2{font-size:16px;margin-bottom:8px}
.done p{font-size:13px;color:var(--muted);line-height:1.8}
.done p b{color:#cfd8e0;font-family:var(--font-mono);font-weight:500;word-break:break-all}

.icp{
  position:fixed;left:0;right:0;bottom:0;height:44px;display:flex;gap:18px;
  align-items:center;justify-content:center;font-size:11.5px;color:#5f6e7c;
  background:rgba(13,17,22,.6);border-top:1px solid rgba(38,48,58,.5);
}
.icp a{color:#5f6e7c}
.icp a:hover{color:var(--accent);text-decoration:none}