/* ============================================================
   宝盘 · 认证页 v2 样式（全新设计，沿用落地页 design token）
   ============================================================ */

/* ---------- 页面骨架：左叙事 / 右认证 ---------- */
:root{--auth-card-bg:color-mix(in oklab, var(--surface) 88%, transparent)}
.auth-body{min-height:100vh}
/* 预留滚动条槽：切换登录/注册时页面宽度不跳动（内容已压进视口，正常不会真出现滚动条） */
html{scrollbar-gutter:stable}
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
}

/* ---------- 左：品牌叙事面板 ---------- */
/* 高度锁定为视口高度 + sticky：右列表单变高不再拉伸/推挤左侧内容 */
/* 内部允许滚动兜底，但滚动条不可见，避免中缝出现"第二条栏" */
.auth-brand{
  position:sticky;top:0;align-self:start;
  height:100vh;
  overflow:hidden;scrollbar-width:none;
  border-right:1px solid var(--border);
  background:var(--background);
  padding:2rem 2.5rem 1.75rem;
  display:flex;
}
.auth-brand::-webkit-scrollbar{display:none}
/* 内容统一收在同一条居中的中轴里，左右留白对称 */
.ab-inner{
  position:relative;flex:1;
  width:100%;max-width:36rem;margin:0 auto;
  display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;
}
.auth-brand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--cobalt) 12%, transparent), transparent 60%);
}
.auth-brand .orb-glow.cobalt{top:-10rem;left:-8rem;width:520px;height:520px}
.auth-brand .orb-glow.amber{top:auto;right:auto;bottom:-12rem;left:8%;width:460px;height:460px}
.ab-top,.ab-mid,.ab-foot{position:relative}
.ab-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.ab-mid{text-align:center}
.ab-title{
  font-family:var(--font-display);font-weight:700;
  font-size:2rem;line-height:1.35;letter-spacing:.01em;
}
@media (min-width:1280px){.ab-title{font-size:2.5rem}}
.ab-lead{
  margin:1.25rem auto 0;max-width:32rem;
  font-size:.9375rem;line-height:1.85;color:var(--muted-foreground);
}

.ab-points{margin:2.25rem auto 0;display:flex;flex-direction:column;gap:1.125rem;max-width:32rem;text-align:left}
.ab-points li{
  display:flex;gap:.875rem;align-items:flex-start;
  padding:.875rem 1rem;border-radius:var(--radius);
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--surface) 70%, transparent);
  transition:border-color .25s, background-color .25s;
}
.ab-points li:hover{border-color:color-mix(in oklab, var(--amber) 28%, transparent);background:var(--surface)}
.ab-ic{
  flex:none;width:2.25rem;height:2.25rem;border-radius:.625rem;
  display:grid;place-items:center;
  border:1px solid color-mix(in oklab, var(--amber) 30%, transparent);
  background:var(--surface-2);color:var(--amber);
}
.ab-ic svg{width:1.125rem;height:1.125rem}
.ab-points b{display:block;font-size:.875rem;font-weight:600}
.ab-points div span{display:block;font-size:.8125rem;line-height:1.6;color:var(--muted-foreground)}

.ab-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
  padding-top:1.25rem;border-top:1px solid var(--border);
  font-size:.75rem;color:var(--muted-foreground);
}
.ab-sec{display:inline-flex;align-items:center;gap:.5rem}
.ab-sec svg{width:.875rem;height:.875rem;color:var(--cobalt)}
.ab-legal{color:oklch(0.55 0.015 260)}

/* ---------- 右：认证区 ---------- */
.auth-main{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:1.75rem 1.5rem;
}
.auth-main::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 100% 100%, color-mix(in oklab, var(--amber) 8%, transparent), transparent 65%);
}
.auth-wrap{position:relative;width:100%;max-width:26rem}
/* 邀请制徽标：置于认证卡片上方居中 */
.auth-badge{display:flex;justify-content:center;margin-bottom:.75rem}
.auth-badge .badge{border-color:color-mix(in oklab, var(--amber) 25%, transparent)}
.auth-card{
  position:relative;
  border-radius:1.25rem;border:1px solid var(--border);
  background:var(--auth-card-bg);
  padding:1.5rem;
  box-shadow:0 30px 60px -20px rgb(0 0 0 / .55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
/* 顶部琥珀色发丝线 */
.auth-card::before{
  content:"";position:absolute;left:1.75rem;right:1.75rem;top:0;height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--amber) 55%, transparent), transparent);
}

.ac-head{margin-bottom:1rem}
.ac-title{font-family:var(--font-display);font-size:1.375rem;font-weight:700;line-height:1.4}
.ac-sub{margin-top:.375rem;font-size:.8125rem;line-height:1.7;color:var(--muted-foreground)}

/* ---------- 分段切换 ---------- */
.seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  padding:.25rem;border-radius:9999px;
  border:1px solid var(--border);background:var(--surface-2);
}
.seg-ind{
  position:absolute;top:.25rem;left:.25rem;
  width:calc(50% - .25rem);height:calc(100% - .5rem);
  border-radius:9999px;
  border:1px solid color-mix(in oklab, var(--amber) 30%, transparent);
  background:var(--surface);
  box-shadow:0 0 24px -8px color-mix(in oklab, var(--amber) 45%, transparent);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.seg.is-reg .seg-ind{transform:translateX(100%)}
.seg button{
  position:relative;z-index:1;
  padding:.5rem 0;font-size:.8125rem;color:var(--muted-foreground);
  transition:color .2s;
}
.seg button.on{color:var(--foreground);font-weight:500}
/* ---------- 社交登录 ---------- */
.soc-div{position:relative;margin-top:1.125rem;text-align:center;font-size:.6875rem;color:var(--muted-foreground)}
.soc-div::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border)}
.soc-div span{position:relative;padding:0 .625rem;background:var(--auth-card-bg)}
.social{margin-top:.75rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.soc{
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  height:2.375rem;padding:0 .25rem;border-radius:.75rem;
  border:1px solid var(--border);background:var(--surface-2);
  font-size:.75rem;color:var(--muted-foreground);
  transition:border-color .2s, background-color .2s, color .2s;
}
.soc:hover{border-color:color-mix(in oklab, var(--amber) 30%, transparent);background:var(--surface);color:var(--foreground)}
.soc svg{width:1rem;height:1rem}

/* ---------- 表单 ---------- */
.form{margin-top:1rem}
.f{display:block;margin-top:.75rem}
/* 注册表单：确认密码与省份并排，减少一行高度 */
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:420px){.f-row{grid-template-columns:1fr}}
.f-label{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-bottom:.4rem;font-size:.75rem;color:var(--muted-foreground);
}
.f-link{font-size:.75rem;color:var(--muted-foreground);transition:color .2s}
.f-link:hover{color:var(--amber)}
.f-ctl{position:relative}
.in{
  width:100%;height:2.625rem;padding:0 .875rem;
  border-radius:.75rem;border:1px solid var(--input);
  background:var(--surface-2);color:var(--foreground);
  font-family:inherit;font-size:.875rem;
  outline:none;transition:border-color .2s, box-shadow .2s;
}
.in::placeholder{color:oklch(0.5 0.01 260)}
.in:focus{
  border-color:color-mix(in oklab, var(--amber) 45%, transparent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--amber) 12%, transparent);
}
.in.has-affix{padding-right:2.75rem}
.sel{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.25rem;cursor:pointer;
}
.sel option{background:var(--popover);color:var(--popover-foreground)}
.sel-ic{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--muted-foreground);pointer-events:none}
.pw-btn{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  width:2rem;height:2rem;border-radius:.5rem;display:grid;place-items:center;
  color:var(--muted-foreground);transition:color .2s, background-color .2s;
}
.pw-btn:hover{color:var(--amber);background:var(--surface)}
.pw-btn svg{width:1rem;height:1rem}

/* 密码强度 */
.pw-meter{display:flex;gap:.25rem;margin-top:.5rem}
.pw-seg{flex:1;height:3px;border-radius:9999px;background:oklch(1 0 0 / 8%);transition:background-color .25s}
.pw-meter.l1 .pw-seg:nth-child(1){background:var(--destructive)}
.pw-meter.l2 .pw-seg:nth-child(-n+2){background:var(--amber)}
.pw-meter.l3 .pw-seg{background:color-mix(in oklab, var(--cobalt) 80%, #34d399)}
.pw-tip{margin-top:.375rem;font-size:.6875rem;color:var(--muted-foreground);min-height:1em}

/* 邀请码 */
.inv-f .in{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;text-transform:uppercase;
}
.inv-f.ok .in{border-color:color-mix(in oklab, var(--cobalt) 55%, transparent)}
.inv-f.bad .in{border-color:color-mix(in oklab, var(--destructive) 55%, transparent)}
.inv-state{display:flex;align-items:flex-start;gap:.375rem;margin-top:.5rem;font-size:.75rem;line-height:1.6;color:var(--muted-foreground)}
.inv-state svg{width:.875rem;height:.875rem;flex:none;margin-top:.15rem}
.inv-state.idle{color:var(--muted-foreground)}
.inv-state.ok{color:var(--cobalt)}
.inv-state.bad{color:var(--destructive)}

/* 协议 */
.agree{display:flex;align-items:flex-start;gap:.625rem;margin-top:1rem;cursor:pointer;font-size:.75rem;line-height:1.7;color:var(--muted-foreground)}
.ck{
  flex:none;width:1.125rem;height:1.125rem;margin-top:.15rem;border-radius:.375rem;
  border:1px solid var(--input);background:var(--surface-2);
  display:grid;place-items:center;color:var(--primary-foreground);
  transition:background-color .2s, border-color .2s;
}
.ck svg{width:.75rem;height:.75rem;opacity:0;transition:opacity .15s;stroke-width:3}
.ck.on{background:var(--primary);border-color:var(--primary)}
.ck.on svg{opacity:1}
.agree a{color:var(--amber)}
.agree a:hover{text-decoration:underline}

/* 提交按钮 */
.btn-sub{
  margin-top:1rem;width:100%;height:2.625rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:9999px;
  background:linear-gradient(120deg, var(--amber), color-mix(in oklab, var(--amber) 62%, #ffb066));
  color:var(--primary-foreground);
  font-size:.875rem;font-weight:600;letter-spacing:.02em;
  box-shadow:0 0 44px -14px color-mix(in oklab, var(--amber) 70%, transparent);
  transition:opacity .2s, transform .2s;
}
.btn-sub:hover{opacity:.92}
.btn-sub:active{transform:translateY(1px)}
.btn-sub:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-sub svg{width:1rem;height:1rem;transition:transform .2s}
.btn-sub:hover svg{transform:translateX(3px)}

.ac-switch{margin-top:1.125rem;text-align:center;font-size:.8125rem;color:var(--muted-foreground)}
.ac-switch button{color:var(--amber);font-weight:500}
.ac-switch button:hover{text-decoration:underline}
.auth-note{margin-top:1.25rem;text-align:center;font-size:.75rem;color:oklch(0.55 0.015 260)}
.auth-note a{color:var(--muted-foreground)}
.auth-note a:hover{color:var(--amber)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;z-index:100;left:50%;top:1.5rem;
  transform:translate(-50%, -.75rem);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:.5rem;
  max-width:min(92vw, 26rem);padding:.75rem 1rem;
  border-radius:.75rem;border:1px solid var(--border);
  background:var(--popover);color:var(--foreground);
  font-size:.8125rem;line-height:1.5;
  box-shadow:0 20px 40px -16px rgb(0 0 0 / .6);
  transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1;transform:translate(-50%, 0)}
.toast svg{width:1rem;height:1rem;flex:none}
.toast.ok svg{color:var(--cobalt)}
.toast.err svg{color:var(--destructive)}

/* ---------- 矮窗口：按高度逐级压缩，保证两侧内容都在视口内 ---------- */
@media (max-height:900px){
  /* 左列 */
  .auth-brand{padding:1.5rem 2.5rem 1.25rem}
  .ab-inner{gap:1.75rem}
  .ab-title{font-size:1.75rem}
  .ab-lead{margin-top:1rem;font-size:.875rem;line-height:1.7}
  .ab-points{margin-top:1.5rem;gap:.75rem}
  .ab-points li{padding:.625rem .75rem}
  /* 右列 */
  .auth-main{padding:1.25rem 1.5rem}
  .auth-card{padding:1.25rem}
  .ac-head{margin-bottom:.75rem}
  .ac-sub{font-size:.75rem;margin-top:.25rem}
  .form{margin-top:.875rem}
  .f{margin-top:.625rem}
  .in{height:2.5rem}
  .btn-sub{margin-top:.875rem;height:2.5rem}
  .soc-div{margin-top:1rem}
  .social{margin-top:.625rem}
  .soc{height:2.25rem}
  .agree{margin-top:.875rem}
}
@media (max-height:780px){
  .ab-title{font-size:1.5rem}
  .ab-points li:nth-child(3){display:none}
  .auth-card{padding:1.125rem}
  .ac-title{font-size:1.25rem}
  .ac-sub{display:none}
  .seg button{padding:.4375rem 0}
  .pw-tip,.pvHint{display:none}
  .inv-state{font-size:.6875rem;margin-top:.375rem}
}
@media (max-height:640px){
  .ab-points li:nth-child(2){display:none}
  .ab-lead{display:none}
  .auth-main{padding:1rem 1.5rem}
  .soc-div,.social{display:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1023px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{
    position:static;height:auto;min-height:0;overflow:visible;
    border-right:0;border-bottom:1px solid var(--border);
    padding:1.5rem 1.5rem 1.25rem;
  }
  .ab-inner{gap:1.5rem;max-width:36rem}
  .ab-title{font-size:1.5rem}
  .ab-lead{font-size:.875rem;margin-top:.75rem}
  .ab-points{margin-top:1.25rem;gap:.625rem}
  .ab-points li{padding:.625rem .75rem}
  .auth-main{padding:2rem 1.25rem 3rem}
}
@media (max-width:639px){
  .ab-points li:nth-child(n+3){display:none}
  .ab-foot{font-size:.6875rem}
  .auth-card{padding:1.5rem 1.25rem;border-radius:1rem}
}

/* ============================================================
 * 浏览器自动填充观感修复（2026-10-27）
 * ------------------------------------------------------------
 * Chrome/Edge 的密码管理器与表单自动填充会给输入框套一层默认的
 * 白底黑字（:-webkit-autofill 伪类），在深色 UI 里表现为一条刺眼的
 * 白色长条，与手动输入的观感完全不一致。
 *   ① background/color 的变化被拖成"近乎无限长"的过渡 —— 那层白底
 *      永远来不及显现，等效于保持透明；
 *   ② -webkit-text-fill-color 锁成 currentColor，文字颜色与手动输入一致。
 * 与 console.html 搜索框的 readonly 物理阻止是两层独立防御，互不替代。
 * ============================================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: currentColor;
  caret-color: currentColor;
  transition: background-color 999999s ease-in-out 0s,
              color 999999s ease-in-out 0s;
}