/* =====================================================================
   login.css — 登录页专有样式
   ---------------------------------------------------------------------
   【复用】theme.css 提供：设计变量、复位、.btn/.tag/.note/.alert/.hr、
          .modal 与遮罩（::before + .under）、.toasts/.toast、@media print。
          app.js 提供：$/$$/on、esc、toast、modals 弹窗栈、boot 兜底。
   【不复用】本文件全部为登录页专有：.auth-bg 背景层、.auth 分屏、
          .auth__brand 品牌区、.auth__card 登录卡、.auth__tabs 方式切换、
          .auth__field 输入框、.auth__qr 扫码区、.auth__cap-img 图形验证码、
          .auth__submit 主按钮与加载态。
   ===================================================================== */

.auth-body{min-height:100vh;background:var(--navy1);overflow-x:hidden}

/* ---------- 背景层 ---------- */
.auth-bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(1100px 620px at 84% -18%,rgba(139,92,246,.5),transparent 62%),
             radial-gradient(900px 560px at 4% 112%,rgba(14,165,183,.4),transparent 64%),
             linear-gradient(135deg,var(--navy1) 0%,var(--navy2) 46%,var(--navy3) 100%)}
.auth-bg__grid{position:absolute;inset:-2px;
  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:54px 54px;
  mask-image:radial-gradient(ellipse at 42% 34%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse at 42% 34%,#000 12%,transparent 76%)}
.auth-bg__glow{position:absolute;border-radius:50%;filter:blur(64px);opacity:.62;will-change:transform}
.auth-bg__glow--1{width:520px;height:520px;right:-140px;top:-190px;background:radial-gradient(circle,rgba(129,140,248,.5),transparent 68%);animation:drift1 26s ease-in-out infinite}
.auth-bg__glow--2{width:460px;height:460px;left:-150px;bottom:-170px;background:radial-gradient(circle,rgba(14,165,183,.44),transparent 68%);animation:drift2 32s ease-in-out infinite}
.auth-bg__glow--3{width:300px;height:300px;left:44%;top:58%;background:radial-gradient(circle,rgba(219,39,119,.26),transparent 70%);animation:drift3 38s ease-in-out infinite}
@keyframes drift1{50%{transform:translate3d(-70px,60px,0) scale(1.12)}}
@keyframes drift2{50%{transform:translate3d(80px,-50px,0) scale(1.08)}}
@keyframes drift3{50%{transform:translate3d(-60px,-70px,0) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.auth-bg__glow{animation:none}}

/* ---------- 分屏 ---------- */
/* 整页限宽居中：不限宽时左栏内容被 max-width 钉死后右侧会空出 200+px 死区 */
.auth{position:relative;z-index:1;min-height:100vh;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 500px;align-items:stretch}

/* 左：品牌区 */
.auth__brand{padding:52px 40px 40px 52px;display:flex;flex-direction:column;gap:28px;color:#fff;min-width:0}
.auth__logo{display:flex;align-items:center;gap:13px}
.auth__logo-mark{width:60px;height:60px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;}
.auth__logo-mark img{width:100%;height:100%;object-fit:cover;}
.auth__logo-txt b{display:block;font-size:20px;font-weight:700;letter-spacing:-.2px}
.auth__logo-txt i{display:block;font-style:normal;font-size:16px;letter-spacing:.16em;color:rgba(255,255,255,.55);margin-top:2px}
.auth__slogan{font-size:clamp(20px,2.4vw,32px);line-height:1.24;font-weight:760;letter-spacing:-1.2px;margin:0;padding:50px 0 0 0;}
.auth__slogan em{font-style:normal;background:linear-gradient(92deg,#a5b4fc 0%,#67e8f9 60%,#f0abfc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.auth__desc{font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.74);max-width:520px;margin:-8px 0 0}
.auth__feats{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.auth__feats li{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:.2s;backdrop-filter:blur(6px)}
.auth__feats li:hover{background:rgba(255,255,255,.13);border-color:rgba(165,180,252,.42);transform:translateX(4px)}
.auth__feats i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;color:#a5b4fc;
  background:rgba(129,140,248,.18);border:1px solid rgba(165,180,252,.34);border-radius:7px;padding:3px 7px;flex-shrink:0;margin-top:1px}
.auth__feats b{display:block;font-size:14.5px;font-weight:660;letter-spacing:-.1px}
.auth__feats span{display:block;font-size:12.6px;color:rgba(255,255,255,.66);line-height:1.7;margin-top:3px}
.auth__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);border-radius:16px;overflow:hidden}
.auth__stats>div{background:rgba(11,10,35,.36);padding:16px 18px}
.auth__stats b{display:block;font-size:25px;font-weight:750;letter-spacing:-1px;line-height:1.1}
.auth__stats b small{font-size:12.5px;font-weight:600;opacity:.75;margin-left:2px;letter-spacing:0}
.auth__stats span{display:block;font-size:11.5px;color:rgba(255,255,255,.62);margin-top:5px}
.auth__notice{display:flex;gap:11px;align-items:center;font-size:12.6px;color:rgba(255,255,255,.72);
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.28);border-radius:11px;padding:10px 14px}
.auth__notice-tag{flex-shrink:0;font-size:11px;font-weight:700;color:#fde68a;background:rgba(251,191,36,.2);
  border-radius:6px;padding:2.5px 8px;letter-spacing:.04em}
.auth__notice-roll{overflow:hidden;white-space:nowrap;flex:1;min-width:0;color: rgba(255, 255, 255, .72);}
.auth__notice-roll a{color: rgba(255, 255, 255, .72);}
.auth__notice-roll:hover{border-color:rgba(165,180,252,.42);transform:translateX(4px)}


.auth__notice-roll span{display:inline-block;padding-left:100%;animation:roll 26s linear infinite}
@keyframes roll{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.auth__notice-roll span{animation:none;padding-left:0;white-space:normal}}

/* 右：登录卡 */
.auth__panel{display:flex;align-items:center;justify-content:flex-start;padding:36px 48px 36px 0;min-width:0}
.auth__card{width:100%;max-width:460px;background:#fff;border-radius:22px;padding:34px 34px 24px;
  box-shadow:0 40px 90px rgba(8,6,30,.46),0 2px 6px rgba(8,6,30,.2);position:relative;overflow:hidden;
  /* 保持合成层：否则 22px 圆角的抗锯齿接缝会渗出顶部彩虹条与外部深色 */
  transform:translateZ(0)}
.auth__card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--cyan) 52%,#a855f7)}
.auth__card-head h2{font-size:23px;font-weight:730;letter-spacing:-.6px;margin:0;color:var(--ink)}
.auth__card-head p{font-size:12.8px;color:var(--muted);margin:6px 0 0;line-height:1.6}

/* 方式切换 */
.auth__tabs{position:relative;display:flex;gap:2px;margin:22px 0 20px;background:var(--bg3);border-radius:12px;padding:4px}
.auth__tab{flex:1;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;background:transparent;border-radius:9px;padding:9px 6px;font-size:13px;font-weight:560;color:var(--ink2);
  cursor:pointer;transition:color .2s;font-family:inherit;white-space:nowrap}
.auth__tab svg{width:15px;height:15px;flex-shrink:0}
.auth__tab.on{color:var(--brand);font-weight:660}
.auth__tab-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:0;border-radius:9px;background:#fff;
  box-shadow:0 2px 8px rgba(20,18,53,.12),0 0 0 1px rgba(99,102,241,.14);
  transition:transform .28s cubic-bezier(.32,.72,.28,1),width .28s cubic-bezier(.32,.72,.28,1)}
.auth__forms{position:relative;}
.auth__form{display:none;flex-direction:column;gap:14px}
.auth__form.on{display:flex;animation:formIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes formIn{from{opacity:0;transform:translateY(8px)}}

/* 输入框 */
.auth__field{position:relative;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;
  border:1.5px solid var(--rule);border-radius:12px;background:#fff;transition:.18s}
.auth__field:hover{border-color:#c7cbf5}
.auth__field.focus{border-color:var(--brand2);box-shadow:0 0 0 4px rgba(99,102,241,.13)}
.auth__field.bad{border-color:var(--danger);box-shadow:0 0 0 4px rgba(220,38,38,.1);animation:shake .34s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.auth__field>svg{width:17px;height:17px;flex-shrink:0;color:var(--muted);transition:color .18s}
.auth__field.focus>svg{color:var(--brand)}
/* 🔴 border-radius 必须显式归零：theme.css 的 :where(input[type=text],…) 基线规则带 var(--r-sm)=9px 圆角
   （特异性为 0，本页只覆盖了 border/padding/background，圆角会残留）。浏览器会把 input 内部编辑区
   按自身圆角矩形裁切，而本页输入框 padding:0（内边距由 .auth__field 提供），首个字符正好贴着输入框
   左边框，左上/左下角被圆弧削掉 → 表现为「第一个字显示不全」。 */
.auth__field input{flex:1;min-width:0;border:0;border-radius:0;outline:none;background:transparent;padding:0;margin:0;font-size:14.5px;font-family:inherit;color:var(--ink);height:auto;width:auto;box-shadow:none!important}
.auth__field input::placeholder{color:#a8aec2}
.auth__eye{border:0;background:transparent;padding:2px;cursor:pointer;color:var(--muted);display:grid;place-items:center;flex-shrink:0}
.auth__eye:hover{color:var(--brand)}
.auth__eye svg{width:17px;height:17px}
.auth__flag{font-size:12.5px;color:var(--muted);font-family:var(--mono);flex-shrink:0;padding-right:2px;border-right:1px solid var(--rule);margin-right:-4px;padding-left:2px}
.auth__code{flex-shrink:0;border:0;background:transparent;color:var(--brand);font-size:12.8px;font-weight:640;
  cursor:pointer;font-family:inherit;padding:4px 0 4px 6px;white-space:nowrap;border-left:1px solid var(--rule);margin-left:2px}
.auth__code:hover{text-decoration:underline}
.auth__code[disabled]{color:var(--muted);cursor:not-allowed;text-decoration:none;font-family:var(--mono)}
.auth__field--cap input{font-family:var(--mono);}
.auth__field--cap input:disabled{color:#9aa0b4;-webkit-text-fill-color:#9aa0b4;opacity:.85;cursor:not-allowed}
.auth__field--cap.done{border-color:#bfe3d4;background:#f6fbf9}
/* 图形码已通过：图片置灰 + 淡化，明确表达「这一格已过、不要再填」 */
.auth__field--cap.done .auth__cap-img{opacity:.4;filter:grayscale(.7);cursor:default}
.auth__field--cap.done >svg{color:#1D9E75}
.auth__cap-tip{font-size:11.5px;color:var(--muted);margin:-6px 0 12px;line-height:1.5;min-height:17px}
.auth__cap-tip.ok{color:#1D9E75;font-weight:500}
/* 🔴 border-radius:0 与 .auth__field input 保持一致：验证码图片是「框」的外观元素，
   保留 8px 圆角会与已归零的输入框不一致（用户要求统一为直角）。 */
.auth__cap-img{flex-shrink:0;height:33px;margin-top:2px;margin-right:-7px;border:1px solid var(--rule);border-radius:8px;cursor:pointer;
  background:#f5f8fc;object-fit:cover;display:block}
.auth__cap-img:hover{border-color:var(--brand2)}
.auth__row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:-2px}
.auth__remember{display:inline-flex;align-items:center;gap:7px;font-size:12.6px;color:var(--ink2);cursor:pointer}
.auth__remember input{accent-color:var(--brand);margin:0}
.auth__link{color:var(--brand);font-size:12.6px;font-weight:560;text-decoration:none}
.auth__link:hover{text-decoration:underline}
.auth__hint{font-size:11.8px;color:var(--muted);line-height:1.65;margin-top:-4px}
.auth__err{font-size:12px;color:var(--danger);font-weight:600;display:flex;align-items:center;gap:5px;margin-top:-6px}
.auth__err::before{content:"!";width:14px;height:14px;border-radius:50%;background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;display:grid;place-items:center;flex-shrink:0}

/* 主按钮 */
.auth__submit{position:relative;height:48px;border:0;border-radius:12px;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:680;letter-spacing:.32em;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#818cf8,#6366f1 52%,#4f46e5);
  box-shadow:0 10px 26px rgba(79,70,229,.4);transition:.2s;margin-top:2px}
.auth__submit:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(79,70,229,.5)}
.auth__submit:active{transform:translateY(0)}
.auth__submit::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);
  transform:translateX(-100%);animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%,72%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.auth__submit[disabled]{opacity:.72;cursor:progress;transform:none}
.auth__submit[disabled]::after{animation:none}
.auth__submit.loading .auth__submit-t{opacity:0}
.auth__spin{position:absolute;inset:0;display:none;place-items:center}
.auth__submit.loading .auth__spin{display:grid}
.auth__spin::before{content:"";width:19px;height:19px;border-radius:50%;border:2.4px solid rgba(255,255,255,.34);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* 扫码 */
.auth__qr{position:relative;width:196px;height:196px;margin:2px auto 0;padding:11px;border-radius:16px;
.auth__qr-off{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:22px 18px;text-align:center;color:var(--muted)}
.auth__qr-off svg{width:46px;height:46px;opacity:.5}
.auth__qr-off b{font-size:14.5px;color:var(--ink2);font-weight:640}
.auth__qr-off span{font-size:12px;line-height:1.7;max-width:270px}
  background:#fff;border:1.5px solid var(--rule);box-shadow:0 6px 20px rgba(20,18,53,.1)}
.auth__qr-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:11px;
  background:linear-gradient(135deg,#818cf8,#4f46e5 60%,#0ea5b7);display:grid;place-items:center;color:#fff;
  font-size:15px;font-weight:800;box-shadow:0 0 0 4px #fff,0 4px 12px rgba(20,18,53,.22)}
.auth__qr-mask{position:absolute;inset:0;border-radius:16px;background:rgba(255,255,255,.93);
  display:none;place-items:center;backdrop-filter:blur(1px)}
.auth__qr.expired .auth__qr-mask{display:grid}
.auth__qr-refresh svg{width:26px;height:26px;color:var(--brand)}
.auth__qr-refresh:hover{color:var(--brand)}
.auth__wx-state{text-align:center;font-size:12.8px;color:var(--ink2);display:flex;align-items:center;justify-content:center;gap:7px;min-height:20px}
.auth__wx-state b{font-family:var(--mono);color:var(--brand);font-weight:700}
.auth__wx-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulseDot 2s infinite}
.auth__wx-state.scan .auth__wx-dot{background:var(--brand);animation-duration:1s}
.auth__wx-state.done .auth__wx-dot{background:#22c55e;animation:none}
.auth__wx-state.dead .auth__wx-dot{background:var(--muted);animation:none}
@keyframes pulseDot{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* 协议 / 页脚 */
.auth__agree{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:11.8px;color:var(--muted);line-height:1.65;cursor:pointer}
.auth__agree input{accent-color:var(--brand);margin:2px 0 0;flex-shrink:0}
.auth__agree.bad{color:var(--danger);animation:shake .34s}
.auth__foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule2);
  font-size:11.2px;color:#a8aec2}
.auth__foot-ver{font-family:var(--mono)}

/* ---------- 手机号绑定 / 注册弹窗 ---------- */
.bd-tabs{display:flex;gap:2px;margin-bottom:16px;background:var(--bg3);border-radius:10px;padding:3px}
.bd-tab{flex:1;height:36px;border:0;background:transparent;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:560;color:var(--ink2);transition:.16s}
.bd-tab:hover{color:var(--ink)}
.bd-tab.on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(20,18,53,.1)}
.bd-row{margin-bottom:14px}
.bd-label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:7px;font-weight:500}
.bd-input{width:100%;height:42px;padding:0 12px;border:1px solid var(--rule);border-radius:8px;
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);transition:.16s;outline:none;appearance:none}
.bd-input:focus{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.bd-input.bad{border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.bd-roles,.bd-kinds{display:flex;gap:8px;flex-wrap:wrap}
.bd-kinds{margin-top:8px;padding-left:2px}
.bd-role{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--rule);
  border-radius:8px;background:#fff;cursor:pointer;font-size:12.8px;color:var(--ink2);transition:.16s;user-select:none}
.bd-role:hover{border-color:var(--brand2);background:var(--brand-soft)}
.bd-role.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.bd-role input{accent-color:var(--brand);margin:0}
.bd-cap{display:flex;gap:9px;align-items:center}
.bd-cap .bd-input{flex:1;min-width:0;letter-spacing:3px;font-family:var(--mono)}
.bd-cap .auth__cap-img{height:42px;width:120px;flex-shrink:0}
.bd-msg{min-height:18px;font-size:12.3px;line-height:1.6;color:var(--muted);margin-top:2px}
.bd-msg.err{color:var(--danger)}
.bd-msg.ok{color:#1D9E75}

/* ---------- 响应式 ---------- */
@media (max-width:1240px){
  .auth{grid-template-columns:minmax(0,1fr) 470px}
  .auth__brand{padding:44px 30px 36px 40px}
  .auth__feats li span{display:none}
  .auth__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth__panel{padding-right:32px}
}
@media (max-width:1000px){
  .auth{grid-template-columns:1fr;min-height:100vh}
  .auth__brand{padding:26px 22px 6px;gap:20px}
  .auth__slogan{font-size:26px;letter-spacing:-.6px}
  .auth__desc,.auth__feats,.auth__notice{display:none}
  .auth__stats{max-width:none}
  .auth__stats>div{padding:12px 14px}
  .auth__stats b{font-size:20px}
  .auth__panel{padding:20px 16px 32px}
  .auth__card{padding:26px 22px 18px;max-width:472px;margin:0 auto}
}
@media (max-width:520px){
  .auth__logo-mark{width:38px;height:38px;font-size:17px;border-radius:11px}
  .auth__logo-txt b{font-size:14.5px}
  .auth__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth__card{border-radius:18px;padding:22px 18px 14px}
  .auth__tab{font-size:12.2px;padding:8px 3px;gap:4px}
  .auth__tab svg{width:14px;height:14px}
  .auth__field{height:46px;padding:0 11px;gap:8px}
  .auth__submit{letter-spacing:.2em}
}
@media (max-height:760px) and (min-width:1001px){
  .auth__brand{gap:20px;padding-top:34px}
  .auth__feats li{padding:11px 14px}
  .auth__slogan{font-size:clamp(24px,2.6vw,32px)}
}
@media print{.auth-bg,.auth__brand{display:none!important}
.auth{display:block}.auth__card{box-shadow:none;border:1px solid var(--rule)}}