/* ===================================================================
 * login.css —— 登录页样式（与登录页一一对应，不依赖 console.css）
 *   01 variables / 重置 / 页面骨架 / 左侧品牌面板
 *   02 右侧面板：标签页、表单、输入框、按钮、toast、提示、响应式
 * =================================================================== */

/* ========== 01 · 变量 / 重置 / 页面骨架 / 品牌面板 ========== */
/* ===== 变量 / 重置 / 页面骨架 ===== */
:root{
  --ink:#0b1220;
  --ink-soft:#334155;
  --muted:#748196;
  --line:#e4e9f2;
  --line-strong:#d3dbe8;
  --accent:#4b46d6;
  --accent-2:#6f6bff;
  --accent-soft:#eef0ff;
  --danger:#d93b52;
  --ok:#12996b;
  --bg:#f4f6fb;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 8% -10%, #e6e9ff 0%, rgba(230,233,255,0) 60%),
    radial-gradient(760px 520px at 98% 108%, #e3f4f1 0%, rgba(227,244,241,0) 62%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}

.stage{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px 28px;
  gap:20px;
}

.shell{
  width:100%;
  max-width:1010px;
  min-height:566px;
  display:flex;
  background:#fff;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 28px 70px -30px rgba(24,33,66,.32);
  overflow:hidden;
  animation:rise .6s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes rise{
  from{opacity:0;transform:translateY(18px) scale(.99);}
  to{opacity:1;transform:none;}
}

/* ---------- left brand panel ---------- */

/* ========== 02 · 登录面板：标签页 / 表单 / 按钮 / 提示 ========== */
/* ===== 登录·注册·重置·注册进度（含该区响应式） ===== */
.brand{
  position:relative;
  flex:0 0 46%;
  padding:42px 40px 34px;
  color:#eef1ff;
  background:
    radial-gradient(520px 300px at 100% 0%, rgba(124,120,255,.55), rgba(124,120,255,0) 62%),
    radial-gradient(420px 380px at 0% 100%, rgba(56,189,168,.32), rgba(56,189,168,0) 60%),
    linear-gradient(158deg,#161a3d 0%,#242a5e 46%,#2a2160 100%);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.brand::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 20%,#000 20%,transparent 78%);
  mask-image:radial-gradient(80% 70% at 70% 20%,#000 20%,transparent 78%);
  pointer-events:none;
}
.brand > *{position:relative;z-index:1;}

.logo{display:flex;align-items:center;gap:11px;}
.logo-mark{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(150deg,#fff,#c9c8ff);
  display:grid;place-items:center;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.logo-name{font-size:16.5px;font-weight:650;letter-spacing:.14em;}
.logo-sub{font-size:11.5px;color:rgba(238,241,255,.62);letter-spacing:.08em;margin-top:2px;}

.brand-copy{margin-top:auto;padding-top:48px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(238,241,255,.72);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  padding:6px 11px;border-radius:99px;
}
.dot{width:5px;height:5px;border-radius:50%;background:#5eead4;box-shadow:0 0 0 3px rgba(94,234,212,.18);}
h1{
  font-size:clamp(23px,3vw,31px);
  line-height:1.36;
  margin:16px 0 0;
  font-weight:600;
  letter-spacing:-.01em;
}
h1 em{font-style:normal;color:#b9b6ff;}
.brand-copy p{
  margin:12px 0 0;
  font-size:13.5px;
  line-height:1.75;
  color:rgba(238,241,255,.68);
  max-width:27em;
}

.feats{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px;}
.feats li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(238,241,255,.82);line-height:1.55;}
.tick{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  background:rgba(94,234,212,.14);
  border:1px solid rgba(94,234,212,.4);
  display:grid;place-items:center;margin-top:1px;
}

.brand-foot{
  margin-top:34px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:12px;
}
.avatars{display:flex;}
.avatars span{
  width:24px;height:24px;border-radius:50%;
  border:1.5px solid #262b5c;
  margin-left:-7px;
  background:linear-gradient(140deg,#8f8bff,#4dd4c0);
}
.avatars span:first-child{margin-left:0;}
.avatars span:nth-child(2){background:linear-gradient(140deg,#ffb37a,#f2709c);}
.avatars span:nth-child(3){background:linear-gradient(140deg,#7dd3fc,#6366f1);}
.brand-foot p{margin:0;font-size:12px;color:rgba(238,241,255,.6);}

/* ---------- right form panel ---------- */
.panel{
  flex:1 1 auto;
  padding:44px 46px 34px;
  display:flex;
  flex-direction:column;
}
.view{display:none;flex-direction:column;flex:1 1 auto;min-width:0;}
.view.is-active{display:flex;animation:fade .3s ease both;}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.panel-head h2{margin:0;font-size:21px;font-weight:650;letter-spacing:-.01em;}
.panel-head p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.6;}
.help{
  flex:0 0 auto;font-size:12.5px;color:var(--muted);text-decoration:none;
  border-bottom:1px dashed var(--line-strong);padding-bottom:1px;
}
.help:hover{color:var(--accent);border-color:var(--accent);}

.tabs{
  display:flex;gap:24px;
  margin:26px 0 2px;
  border-bottom:1px solid var(--line);
}
.tab{
  position:relative;
  appearance:none;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:520;
  color:var(--muted);
  padding:0 0 11px;
  transition:color .18s;
}
.tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
.tab[aria-selected="true"]{color:var(--ink);}
.tab[aria-selected="true"]::after{transform:scaleX(1);}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}

form{margin-top:22px;}
.form-pane{display:none;animation:fade .28s ease both;}
.form-pane.is-active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.field{
  position:relative;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fbfcfe;
  transition:border-color .18s, box-shadow .18s, background .18s;
  margin-bottom:14px;
}
.field:hover{border-color:var(--line-strong);}
.field:focus-within{
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 4px rgba(75,70,214,.1);
}
.field.invalid{border-color:var(--danger);background:#fff8f8;}
.field.invalid:focus-within{box-shadow:0 0 0 4px rgba(217,59,82,.1);}
.field .ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:#95a1b4;display:grid;place-items:center;
  pointer-events:none;transition:color .18s;
}
.field:focus-within .ico{color:var(--accent);}
.field input{
  width:100%;
  height:58px;
  border:0;
  background:transparent;
  font:inherit;font-size:14px;
  color:var(--ink);
  padding:20px 14px 6px 42px;
  border-radius:13px;
  outline:none;
}
.field input::placeholder{color:transparent;}
.field label{
  position:absolute;left:42px;top:50%;transform:translateY(-50%);
  font-size:13.5px;color:var(--muted);
  pointer-events:none;
  transition:top .16s ease, font-size .16s ease, color .16s ease, letter-spacing .16s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:15px;font-size:10.5px;letter-spacing:.06em;color:#8b97aa;
}
.field input:focus + label{color:var(--accent);}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 40px #fff inset;}

.peek{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:9px;background:none;cursor:pointer;
  color:#93a0b3;display:grid;place-items:center;
}
.peek:hover{background:var(--accent-soft);color:var(--accent);}
.peek:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.peek .off{display:none;}
.peek.on .off{display:block;}
.peek.on .on{display:none;}

.field-code{display:flex;gap:10px;align-items:stretch;margin-bottom:10px;}
.field-code .field{flex:1 1 auto;margin-bottom:0;}
.send{
  flex:0 0 auto;
  min-width:114px;
  border:1px solid var(--line-strong);
  background:#fff;border-radius:13px;
  font:inherit;font-size:13px;font-weight:520;color:var(--accent);
  cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.send:hover:not(:disabled){background:var(--accent-soft);border-color:#c9c6ff;}
.send:disabled{color:#a9b2c1;cursor:not-allowed;background:#f7f9fc;border-color:var(--line);}
.send:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.note{
  margin:2px 0 16px;
  font-size:11.5px;
  line-height:1.75;
  color:#94a0b2;
  display:flex;gap:7px;align-items:flex-start;
}
.note svg{flex:0 0 13px;margin-top:3px;color:#aab4c4;}
.note b{font-weight:600;color:#65718a;}

.hint{
  margin:-8px 0 14px;
  font-size:11.5px;line-height:1.7;color:#94a0b2;
}
.hint b{
  font-weight:600;color:#5b6780;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
}

.row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:2px 0 18px;
}
.check{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-soft);cursor:pointer;user-select:none;
}
.check input{position:absolute;opacity:0;width:0;height:0;}
.box{
  width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-strong);
  background:#fff;display:grid;place-items:center;transition:all .16s;
}
.check input:checked + .box{background:var(--accent);border-color:var(--accent);}
.box svg{opacity:0;transform:scale(.6);transition:all .16s;}
.check input:checked + .box svg{opacity:1;transform:scale(1);}
.check input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px;}
.row a{font-size:12.5px;color:var(--accent);text-decoration:none;}
.row a:hover{text-decoration:underline;}

.submit{
  position:relative;
  width:100%;height:50px;
  border:0;border-radius:13px;
  background:linear-gradient(135deg,#5a55e0,#4b46d6 60%,#423dc9);
  color:#fff;font:inherit;font-size:14.5px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(75,70,214,.9);
  transition:transform .16s, box-shadow .2s, filter .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
}
.submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(75,70,214,.95);}
.submit:active:not(:disabled){transform:translateY(0);}
.submit:disabled{cursor:progress;filter:saturate(.8) brightness(1.02);}
.submit:focus-visible{outline:2px solid #2f2a9e;outline-offset:2px;}
.spin{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  display:none;animation:sp .7s linear infinite;
}
.submit.loading .spin{display:block;}
.submit.loading .label{opacity:.85;}
@keyframes sp{to{transform:rotate(360deg);}}

.msg{
  margin:12px 0 0;min-height:17px;
  font-size:12.5px;line-height:1.45;color:var(--danger);
  display:flex;align-items:flex-start;gap:6px;
}
.msg.ok{color:var(--ok);}
.shake{animation:shake .34s;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  22%{transform:translateX(-5px);}
  55%{transform:translateX(4px);}
  80%{transform:translateX(-2px);}
}

/* ---------- 注册视图 ---------- */
.strength-row{display:flex;align-items:center;gap:10px;margin:-2px 0 14px;}
.strength{flex:1 1 auto;display:flex;gap:4px;}
.strength i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .22s;}
.strength[data-level="1"] i.on{background:#e2685c;}
.strength[data-level="2"] i.on{background:#e0a945;}
.strength[data-level="3"] i.on{background:#39b48a;}
.strength[data-level="4"] i.on{background:#12996b;}
.strength-tip{flex:0 0 auto;font-size:11px;color:#9aa5b6;min-width:30px;text-align:right;}
.terms{
  display:flex;align-items:flex-start;gap:8px;
  margin:2px 0 16px;
  font-size:12px;line-height:1.6;color:var(--muted);
}
.terms .check{font-size:12px;color:var(--muted);align-items:flex-start;gap:8px;}
.terms .box{margin-top:1px;}
.terms a{color:var(--accent);text-decoration:none;}
.terms a:hover{text-decoration:underline;}

.panel-foot{margin-top:auto;padding-top:24px;font-size:12.5px;color:var(--muted);}
.panel-foot a{color:var(--accent);text-decoration:none;font-weight:520;}
.panel-foot a:hover{text-decoration:underline;}

.foot{
  margin:0;font-size:11.5px;color:#9aa5b6;letter-spacing:.02em;text-align:center;
}
.foot a{color:#8b97aa;text-decoration:none;}
.foot a:hover{color:var(--accent);}

.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);
  background:#101828;color:#f3f6ff;
  padding:12px 18px;border-radius:12px;
  font-size:13px;
  max-width:min(560px,calc(100vw - 36px));
  line-height:1.6;text-align:left;
  display:flex;align-items:center;gap:9px;
  box-shadow:0 18px 40px -18px rgba(6,10,25,.8);
  opacity:0;pointer-events:none;
  transition:opacity .26s, transform .26s;
  z-index:20;
}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast .tick{background:rgba(18,153,107,.22);border-color:rgba(18,153,107,.5);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .shell{max-width:520px;min-height:0;flex-direction:column;}
  .brand{flex:none;padding:26px 26px 24px;}
  .brand-copy{padding-top:24px;}
  .brand-copy p,.feats,.brand-foot{display:none;}
  h1{font-size:21px;margin-top:12px;}
  .panel{padding:30px 26px 26px;}
  .stage{padding:24px 14px 20px;}
}
@media (max-width:640px){
  .panel-head h2{font-size:19px;}
  .panel-head .help{display:none;}
  .tabs{gap:16px;}
  .field-code{flex-direction:column;}
  .send{height:44px;min-width:0;width:100%;}
  .stage{padding:12px 10px 16px;}
  .shell{border-radius:20px;}
}
/* =================================================================

/* ========== 03 · 登录页复用的通用小组件（按钮 / 标签 / 进度卡） ========== */
[hidden]{display:none !important;}

.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;font-size:11px;
  background:#f1f4f9;color:#6b7789;
}
.tag.ok{background:#eaf7f1;color:#118a60;}
.tag.warn{background:#fdf3e7;color:#b87316;}
.tag.err{background:#fdeef0;color:#c53147;}
.tag.role{background:#eef0ff;color:#4b46d6;}

.btn-key{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 15px;border-radius:10px;border:1px solid var(--line-strong);
  background:#fff;font:inherit;font-size:13px;color:var(--ink-soft);cursor:pointer;transition:.16s;
  text-decoration:none;white-space:nowrap;
}
.btn-key:hover{background:#f7f8fc;border-color:#c3cddd;}
.btn-key.primary{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#5a55e0,#4b46d6 60%,#423dc9);
  box-shadow:0 10px 22px -14px rgba(75,70,214,.95);
}

.dotsep{margin:0 7px;color:#c3cbd9;}
.tiny{font-size:11.5px;color:#9aa5b6;}

.link-btn{background:none;border:0;padding:0;margin-right:12px;font:inherit;font-size:12.5px;color:var(--accent);cursor:pointer;}
.link-btn:hover{text-decoration:underline;}
.link-btn.ok{color:#118a60;}
.link-btn.danger{color:#c53147;}

.progress-card{margin-top:18px;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fbfcff;}
.progress-card[hidden]{display:none;}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.progress-card.done .pc-head{margin-bottom:0;}
.pc-head b{font-size:14px;font-weight:560;}
.pc-act{margin-top:14px;display:flex;gap:10px;}

.steps{list-style:none;margin:0;padding:0;}
.steps li{position:relative;padding:0 0 16px 26px;font-size:12.5px;color:#8b97aa;line-height:1.5;}
.steps li:last-child{padding-bottom:0;}
.steps li:before{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#dbe1ec;}
.steps li:after{content:"";position:absolute;left:7.4px;top:15px;bottom:2px;width:1.2px;background:#e6ebf4;}
.steps li:last-child:after{display:none;}
.steps li.on{color:var(--ink-soft);}
.steps li.on:before{background:var(--accent);}
.steps li.fail{color:#c53147;}
.steps li.fail:before{background:var(--danger);}
.steps li b{display:block;font-weight:540;color:inherit;margin-bottom:2px;}

/* ========== 03 · 页面背景装饰（填补空白，与品牌色呼应） ========== */
/* 两个大的渐变光斑：右上紫色（品牌主色）、左下青色（勾选图标色） */
body::before,
body::after{
  content:"";
  position:fixed;
  border-radius:50%;
  filter:blur(80px);
  opacity:.5;
  pointer-events:none;
  z-index:0;
}
body::before{
  width:560px;height:560px;
  top:-180px;right:-140px;
  background:radial-gradient(circle at 32% 32%, #8a85ff 0%, #4b46d6 68%);
  animation:orbA 16s ease-in-out infinite alternate;
}
body::after{
  width:500px;height:500px;
  bottom:-170px;left:-150px;
  background:radial-gradient(circle at 60% 40%, #6adcc7 0%, #22a085 70%);
  animation:orbB 19s ease-in-out infinite alternate;
}
@keyframes orbA{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(-46px,34px) scale(1.1);}
}
@keyframes orbB{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(34px,-30px) scale(1.07);}
}

/* 中部偏后的第三团淡紫光晕，避免宽屏下中间区域太空 */
.stage::before{
  content:"";
  position:fixed;
  width:640px;height:640px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, #cdd0ff 0%, rgba(205,208,255,0) 65%);
  opacity:.4;
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
}

/* 淡淡的点阵网格，让空区域有质感而不显突兀 */
body{
  background-image:
    radial-gradient(rgba(75,70,214,.055) 1px, transparent 1.4px),
    radial-gradient(900px 520px at 8% -10%, #e6e9ff 0%, rgba(230,233,255,0) 60%),
    radial-gradient(760px 520px at 98% 108%, #e3f4f1 0%, rgba(227,244,241,0) 62%),
    var(--bg);
  background-size:26px 26px, auto, auto, auto;
}

/* 登录卡片和页脚浮在装饰层之上 */
.stage{position:relative;z-index:1;}
.stage > .foot{position:relative;z-index:1;}

/* 小屏幕收掉大光斑，避免挡内容 */
@media (max-width:720px){
  body::before,
  body::after{opacity:.3;}
  .stage::before{display:none;}
}