/* ============================================================
   登录 / 注册 页共用样式
   布局：左侧品牌区 + 右侧表单区（≤900px 自动堆叠）
   支持深浅色：html[data-theme="dark"]
   ============================================================ */
:root{
  --page:#f5f6f8;
  --surface:#ffffff;
  --surface-2:#f7f9fb;
  --text:#16202b;
  --text-2:#4b5866;
  --muted:#8a949f;
  --line:#e4e8ed;
  --line-2:#d3d9e0;
  --accent:#2f6fb5;
  --accent-h:#255a94;
  --accent-soft:#eef4fb;
  --accent-text:#1c4b7d;
  --danger:#b3261e;
  --danger-soft:#fdeceb;
  --brand-1:#0a1f38;
  --brand-2:#12395f;
  --brand-3:#1b5a92;
  --brand-text:#ffffff;
  --brand-muted:rgba(255,255,255,.72);
  --brand-line:rgba(255,255,255,.16);
  --shadow:0 18px 50px rgba(16,32,52,.10);
  --ring:0 0 0 3px var(--accent-soft);
  --r:10px;
}
html[data-theme="dark"]{
  --page:#0e1216;
  --surface:#161b21;
  --surface-2:#1b2128;
  --text:#e9edf2;
  --text-2:#b3bcc7;
  --muted:#7f8994;
  --line:#252c34;
  --line-2:#333b45;
  --accent:#6aa9e0;
  --accent-h:#8cc0ee;
  --accent-soft:#16283a;
  --accent-text:#a9ccf0;
  --danger:#f2857d;
  --danger-soft:#33201e;
  --brand-1:#08131f;
  --brand-2:#0d2338;
  --brand-3:#123a5b;
  --shadow:0 18px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--page);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",
              "Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}

/* ── 总体布局：左 6 : 右 4 ── */
.auth{display:grid;grid-template-columns:6.5fr 3.5fr;min-height:100vh}

/* ── 左：品牌区 ── */
.brand{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--brand-1) 0%,var(--brand-2) 52%,var(--brand-3) 100%);
  color:var(--brand-text);padding:60px 68px;display:flex;flex-direction:column;
}
/* 细网格纹理，替代花哨渐变球 */
.brand:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 76% 14%,#000 0%,transparent 60%);
          mask-image:radial-gradient(circle at 76% 14%,#000 0%,transparent 60%);
}
.brand>*{position:relative}
.brand-top{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;letter-spacing:.3px}
.brand-top svg{width:28px;height:28px;flex:none;opacity:.92}
.brand-mid{margin-top:auto;margin-bottom:auto;padding:52px 0;max-width:660px}
.brand h1{
  margin:0 0 20px;font-size:clamp(26px,2.9vw,42px);line-height:1.3;
  font-weight:700;letter-spacing:.6px;
}
.brand .lead{margin:0;max-width:34em;font-size:15px;color:var(--brand-muted);line-height:1.95}
.feats{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.feats li{
  display:flex;gap:11px;align-items:flex-start;font-size:14px;
  color:rgba(255,255,255,.9);line-height:1.6;
}
.feats li:before{
  content:"";flex:none;width:17px;height:17px;margin-top:3px;border-radius:50%;
  background:rgba(255,255,255,.14);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat;
}
.feats b{font-weight:600;color:#fff}
.facts{display:flex;gap:46px;margin:38px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.facts li{display:flex;flex-direction:column;gap:3px}
.facts b{font-size:26px;font-weight:600;letter-spacing:.6px}
.facts span{font-size:12px;color:var(--brand-muted);letter-spacing:.7px}
.brand-bot{
  padding-top:20px;border-top:1px solid var(--brand-line);
  font-size:12px;color:var(--brand-muted);letter-spacing:.4px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
/* 备案号：独占一行，颜色与品牌区次要文字一致，hover 提亮 */
.brand-bot .icp{
  flex:1 0 100%;margin-top:1px;
  font-size:11.5px;color:var(--brand-muted);text-decoration:none;transition:color .16s;
}
.brand-bot .icp:hover{color:#fff;text-decoration:none}

/* ── 右：表单区（占 40%，内容居中单列） ── */
.panel{display:flex;align-items:center;justify-content:center;padding:46px 30px;background:var(--surface)}
.box{width:100%;max-width:450px}
.box h2{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:.4px}
.box .sub{margin:0 0 30px;font-size:13px;color:var(--muted);line-height:1.7}

.field{margin-bottom:18px}
.field>label{display:block;font-size:13px;color:var(--text-2);margin-bottom:8px;font-weight:500}
.field .req{color:var(--danger);margin-left:2px}
.field .opt{color:var(--muted);font-weight:400;font-size:12px;margin-left:4px}
.ipt{
  width:100%;height:48px;padding:0 15px;font-size:15px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .16s,box-shadow .16s,background .16s;outline:none;
  font-family:inherit;
}
.ipt::placeholder{color:var(--muted)}
.ipt:hover{border-color:var(--line-2)}
.ipt:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--ring)}
/* 覆盖 Chrome 自动填充带来的异色底色，保持视觉一致 */
.ipt:-webkit-autofill,
.ipt:-webkit-autofill:hover,
.ipt:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px var(--surface-2) inset;
  -webkit-text-fill-color:var(--text);
  transition:background-color 600000s ease-out 0s;
}
.hint{margin-top:7px;font-size:12px;color:var(--muted);line-height:1.6}

.row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 26px;font-size:13px}
.row label{display:flex;align-items:center;gap:8px;color:var(--text-2);cursor:pointer;user-select:none}
.row input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.btn{
  display:block;width:100%;height:48px;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--accent);color:#fff;font-size:15.5px;font-weight:600;letter-spacing:2px;
  transition:background .16s,transform .06s;font-family:inherit;
}
.btn:hover{background:var(--accent-h)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;letter-spacing:1px}
.alert{
  display:none;margin-bottom:20px;padding:11px 14px;border-radius:var(--r);
  font-size:13px;line-height:1.6;background:var(--danger-soft);color:var(--danger);
}
.alert.show{display:block}
.alt{margin-top:22px;text-align:center;font-size:13.5px;color:var(--muted)}
.alt a{font-weight:600;margin-left:5px}

/* ============================================================
   密码找回页（/forgot）补充样式
   ============================================================ */

/* ── 步骤条 ── */
.steps{display:flex;align-items:center;gap:10px;margin:0 0 28px}
.steps .st{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex:none;transition:color .18s}
.steps .st i{
  width:23px;height:23px;border-radius:50%;flex:none;font-style:normal;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);transition:.18s;
}
.steps .st.on{color:var(--accent-text);font-weight:600}
.steps .st.on i{background:var(--accent);border-color:var(--accent);color:#fff}
.steps .st.past i{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.steps .bar{flex:1;min-width:12px;height:1px;background:var(--line)}

/* ── 「手机号 / 邮箱」二选一 ── */
.seg{display:flex;gap:9px;margin-bottom:16px}
.seg button{
  flex:1;height:41px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  background:var(--surface-2);color:var(--text-2);font-size:13.5px;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:.16s;
}
.seg button .layui-icon{font-size:15px}
.seg button:hover{border-color:var(--line-2)}
.seg button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text);font-weight:600}

/* ── 第 2 步：回显打码后的联系方式 ── */
.masked{
  display:flex;align-items:flex-start;gap:9px;margin:0 0 24px;padding:12px 14px;
  background:var(--accent-soft);border-radius:var(--r);
  font-size:13px;line-height:1.65;color:var(--accent-text);
}
.masked .layui-icon{font-size:15px;flex:none;margin-top:2px}
.masked b{font-weight:600;letter-spacing:.4px;white-space:nowrap}

/* ── 第 3 步：重置成功 ── */
.done{padding:8px 0 0;text-align:center}
.done .ic{
  width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
}
.done .ic .layui-icon{font-size:27px}
.done h3{margin:0 0 10px;font-size:17.5px;font-weight:600;letter-spacing:.3px}
.done p{margin:0 0 26px;font-size:13px;color:var(--muted);line-height:1.85}
.done p b{color:var(--accent-text);font-weight:600}

/* ── 步骤面板显隐（同一页面切换）── */
.pane{display:none}
.pane.on{display:block;animation:paneIn .22s ease-out}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 底部辅助链接 ── */
.alt .sep{color:var(--line-2);margin:0 9px}

/* 主题切换 */
.theme{
  position:fixed;right:20px;top:20px;z-index:9;width:38px;height:38px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.16s;
}
.theme:hover{color:var(--accent);border-color:var(--accent)}
.theme .layui-icon{font-size:17px}

/* ── 响应式 ── */
@media(max-width:1200px){
  .auth{grid-template-columns:5fr 5fr}
  .brand{padding:52px 48px}
}
@media(max-width:900px){
  .auth{grid-template-columns:1fr;min-height:auto}
  .brand{padding:36px 26px 32px}
  .brand-mid{padding:26px 0 6px;max-width:100%}
  .brand h1{font-size:25px;margin-bottom:14px}
  .brand .lead{font-size:13.5px}
  .feats{margin-top:22px;gap:10px}
  .feats li{font-size:13px}
  .facts{gap:28px;margin-top:24px}
  .facts b{font-size:19px}
  .brand-bot{margin-top:22px}
  .panel{padding:38px 22px 60px}
  .box{max-width:100%}
  .theme{top:auto;bottom:16px;right:16px}
}
@media(max-width:420px){
  .brand{padding:28px 20px 26px}
  .panel{padding:28px 18px 54px}
  .box h2{font-size:21px}
}