@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');
:root{
  --p:#6d28d9;--p2:#7c3aed;--p3:#8b5cf6;--p4:#a78bfa;
  --dark:#07040f;--dark2:#0e0a1c;
  --text:#f8f5ff;--text2:rgba(248,245,255,.55);--text3:rgba(248,245,255,.25);
  --in-bg:rgba(255,255,255,.06);--in-border:rgba(255,255,255,.08);--in-focus-border:rgba(124,58,237,.65);
  --err:#f43f5e;--r:12px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;font-family:'Noto Sans SC',-apple-system,'PingFang SC',sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{background:var(--dark);color:var(--text)}
a{text-decoration:none}

/* 进度条 */
.progress-bar{height:4px;background:rgba(255,255,255,.06)}
.progress-bar__fill{height:100%;width:33%;background:linear-gradient(90deg,var(--p),var(--p4),#06b6d4);border-radius:0 2px 2px 0}

/* 头部 */
.reg-head{padding:20px 20px 0;background:var(--dark)}
.step-row{display:flex;align-items:center;gap:0;margin-bottom:22px}
.step{display:flex;align-items:center;gap:7px}
.step__dot{width:26px;height:26px;border-radius:50%;background:var(--p2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.step__dot--inactive{background:rgba(255,255,255,.08);color:var(--text3)}
.step__label{font-size:11px;font-weight:600;color:var(--p4)}
.step__label--inactive{color:var(--text3)}
.step__line{flex:1;height:1px;background:rgba(255,255,255,.08);margin:0 8px}

.reg-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p2);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.reg-eyebrow::before{content:'';width:18px;height:2px;background:var(--p2);border-radius:1px}
.reg-title{font-size:26px;font-weight:900;color:var(--text);letter-spacing:-.5px;margin-bottom:6px}
.reg-subtitle{font-size:13px;color:var(--text2);margin-bottom:0}
.reg-title-area{margin-bottom:6px}

/* 表单主体 */
.reg-body{padding:20px;display:flex;flex-direction:column;gap:16px}

/* 字段 */
.field{display:flex;flex-direction:column;gap:0}
.field__label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.field__wrap{position:relative;display:flex;align-items:center}
.field__icon{position:absolute;left:13px;font-size:18px!important;color:var(--text3);pointer-events:none}
.field__input{width:100%;height:50px;background:var(--in-bg);border:1.5px solid var(--in-border);border-radius:var(--r);padding:0 44px 0 42px;font-size:15px;font-family:inherit;color:var(--text);outline:none;transition:border-color .2s,background .2s,box-shadow .2s;-webkit-appearance:none}
.field__input::placeholder{color:var(--text3)}
.field__input:focus{border-color:var(--in-focus-border);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.field__input.error{border-color:rgba(244,63,94,.6)}
.field__eye{position:absolute;right:12px;background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;color:var(--text3);display:flex;align-items:center;justify-content:center}
.field__eye .material-icons-round{font-size:18px}
.field__err{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:12px;color:#fb7185;padding-left:2px}
.field__err .material-icons-round{font-size:13px;color:var(--err)}

/* 密码强度 */
.pwd-strength{display:flex;align-items:center;gap:10px;margin-top:8px;padding:0 2px}
.pwd-strength__bars{display:flex;gap:4px;flex:1}
.pwd-strength__bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .3s}
.pwd-strength__text{font-size:11px;color:var(--text3);white-space:nowrap}

/* 验证码行 */
.captcha-row{display:flex;gap:10px;align-items:center}
.captcha-img{width:110px;height:50px;border-radius:var(--r);border:1.5px solid var(--in-border);cursor:pointer;object-fit:cover;flex-shrink:0}

/* 同意协议 */
.agree-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none}
.agree-row__input{display:none}
.agree-row__box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--in-border);background:var(--in-bg);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.agree-row__box .material-icons-round{font-size:13px;color:#fff;opacity:0;transition:opacity .2s}
.agree-row__input:checked~.agree-row__box{background:var(--p2);border-color:var(--p2)}
.agree-row__input:checked~.agree-row__box .material-icons-round{opacity:1}
.agree-row__text{font-size:13px;color:var(--text2);line-height:1.6}
.agree-row__text a{color:var(--p4)}

/* 提交按钮 */
.submit-btn{width:100%;height:52px;border:none;border-radius:var(--r);background:linear-gradient(135deg,#6d28d9,var(--p2),var(--p3));color:#fff;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 24px rgba(109,40,217,.4);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.submit-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.1),transparent);pointer-events:none}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(109,40,217,.55)}
.submit-btn:active{transform:translateY(1px)}
.submit-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.submit-btn .material-icons-round{font-size:18px}

/* 登录链接 */
.login-link{text-align:center;font-size:13px;color:var(--text2)}
.login-link a{color:var(--p4);font-weight:600}

/* Toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);z-index:999;background:rgba(14,10,28,.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);color:var(--text);padding:12px 20px;border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;font-size:14px;min-width:220px;max-width:90vw;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast__icon{font-size:18px!important;flex-shrink:0}
.toast.ok .toast__icon{color:#34d399}
.toast.bad .toast__icon{color:var(--err)}