/* 会员登录 / 注册 / 找回密码页专属样式（login.html、register.html、forgot.html 引用）。
 *
 * 版式参照淘宝/京东会员登录页（output/qa/refs/ 有真实截图）：
 * 顶部灰条 → 一张大圆角白卡垂直居中（左表单 + 右浅灰服务栏）→ 页脚。
 * 输入框为占位符式浅灰填充（无左侧标签），页签大号居中、选中橙色下划线，
 * 卡片 1000px、圆角 12、柔和投影；品牌橙只用于按钮、图标、页签选中与悬停。
 */

/* ---------- 图标字体：与首页共用子集字体，这里只声明本套页面用到的字形 ---------- */
@font-face{font-display:block;font-family:bootstrap-icons;src:url(../../images/bootstrap-icons.woff2) format("woff2")}
.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bi-buildings-fill::before{content:"\f87c"}
.bi-file-earmark-text-fill::before{content:"\f38a"}
.bi-boxes::before{content:"\f685"}
.bi-geo-alt-fill::before{content:"\f3e7"}
.bi-record-circle-fill::before{content:"\f517"}
.bi-award-fill::before{content:"\f153"}
.bi-box-seam-fill::before{content:"\f7d3"}
.bi-layers-fill::before{content:"\f459"}
.bi-chevron-right::before{content:"\f285"}
.bi-x-lg::before{content:"\f659"}

/* ---------- 页面基调：与首页 .home-body 同一套变量 ---------- */
.auth-body,.auth-body *,.auth-body ::before,.auth-body ::after{box-sizing:border-box}
.auth-body{
  --orange:#ff6418;
  --canvas:#f5f6f8;
  --ink:#333333;
  --text:#666666;
  --muted:#8a929c;
  --line:#eceff3;
  --field-fill:#f7f8fa;
  --danger:#e02020;
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font:13px/1.65 "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.auth-body a{text-decoration:none;color:inherit}
.auth-body button{font:inherit;cursor:pointer}
.auth-body input,.auth-body select{font:inherit;color:inherit}
.auth-body :is(a,button,input):focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 顶部灰条：同首页 classic-utility，内容对齐 1320px 居中列 ---------- */
.auth-topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:7px 12px;min-height:34px;width:min(1320px,calc(100% - 64px));margin-inline:auto;padding:7px 16px;background:#fafafa;border-bottom:1px solid #eee;color:#717983;font-size:12px;line-height:1.5;box-shadow:0 0 0 100vmax #fafafa;clip-path:inset(0 -100vmax)}
.auth-topbar-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-width:0}
.auth-topbar-group:last-child{margin-left:auto}
.auth-topbar a{white-space:nowrap}
.auth-topbar a:hover{color:var(--orange)}
.auth-topbar .auth-authlink{color:var(--orange)}
.auth-topbar .auth-authlink:hover{text-decoration:underline}
.auth-topbar .is-current{font-weight:700}
/* 欢迎语里的站名链接：可点击回首页，但颜色保持与周围文字一致（含悬停不变橙） */
.auth-topbar .auth-plain-link{color:inherit}
.auth-topbar .auth-plain-link:hover{color:inherit}

/* ---------- 主区：1000px 大卡垂直居中（淘宝/京东式） ---------- */
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:36px 16px}
.auth-card{width:min(1000px,100%);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(18,45,78,.08);overflow:hidden}
.auth-form-col{padding:42px 46px 40px}
.auth-info-col{padding:36px 34px;background:#fafbfc;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:22px}
.auth-info-block + .auth-info-block{border-top:1px solid var(--line);padding-top:20px}

/* 页签：登录/注册互切，淘宝式大号居中 + 橙色下划线 */
.auth-tabs{display:flex;justify-content:center;gap:40px;margin-bottom:30px}
.auth-tabs a{position:relative;font-size:19px;font-weight:700;color:var(--ink);padding-bottom:10px}
.auth-tabs a:hover{color:var(--orange)}
.auth-tabs a.is-active{color:var(--orange)}
.auth-tabs a.is-active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:32px;height:3px;border-radius:3px;background:var(--orange)}

/* 卡片标题（找回密码页用，居中） */
.auth-card-title{margin:0 0 26px;font-size:19px;font-weight:700;color:var(--ink);text-align:center}

/* 服务栏内容 */
.auth-info-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.auth-info-head>.bi{font-size:18px;color:var(--orange);flex-shrink:0}
.auth-info-head h4{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.side-list{display:grid;gap:11px}
.auth-perk{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text);line-height:1.7}
.auth-perk .bi{font-size:16px;color:var(--orange);margin-top:2px;flex-shrink:0}
.auth-perk b{color:var(--ink);font-weight:700}
.side-cta{display:block;margin-top:16px;height:44px;line-height:44px;text-align:center;border-radius:6px;background:var(--orange);color:#fff;font-size:14px;font-weight:700;letter-spacing:2px;text-indent:2px}
.side-cta:hover{background:#ef5912}
.side-hotline{margin:2px 0 0;font-size:12px;color:var(--muted)}
.side-hotline b{font-size:20px;color:var(--orange);letter-spacing:.5px;margin:0 3px}
.side-tip{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.8}
.side-tip a{color:var(--orange)}
.side-tip a:hover{text-decoration:underline}
.side-note{margin:0;font-size:12px;color:#8a6a45;line-height:1.9}
.side-note b{color:#c25705}

/* ---------- 表单：占位符式浅灰填充输入框（无左侧标签） ---------- */
.f-row{margin-bottom:16px}
.f-row input{width:100%;height:46px;padding:0 14px;border:1px solid transparent;border-radius:6px;background:var(--field-fill);font-size:14px;color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s}
.f-row input::placeholder,.f-captcha input::placeholder{color:#a6adb8}
.f-row input:focus,.f-captcha input:focus{outline:none;background:#fff;border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,100,24,.1)}
.f-row input.is-error,.f-captcha input.is-error{border-color:var(--danger);background:#fff}
.f-error{font-size:12px;color:var(--danger);margin:-10px 0 14px;display:none}
.f-error.is-visible{display:block}

/* 图形验证码行 */
.f-captcha{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:16px}
.f-captcha input{width:100%;height:46px;padding:0 14px;border:1px solid transparent;border-radius:6px;background:var(--field-fill);font-size:14px;color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s}
.auth-captcha{position:relative;width:122px;height:46px;border-radius:6px;background:#eef1f5;display:flex;align-items:center;justify-content:center;gap:2px;cursor:pointer;user-select:none;overflow:hidden}
.auth-captcha::before{content:"";position:absolute;left:-8%;top:52%;width:116%;height:2px;background:rgba(25,49,78,.28);transform:rotate(-8deg)}
.auth-captcha i{font-style:normal;font-size:21px;font-weight:700;line-height:1;display:inline-block}
.auth-captcha:hover{box-shadow:inset 0 0 0 1px var(--orange)}
.f-captcha-tip{grid-column:1/-1;font-size:11px;color:var(--muted);margin-top:-10px}
.f-captcha-tip button{border:0;padding:0;background:none;font-size:11px;color:var(--orange)}
.f-captcha-tip button:hover{text-decoration:underline}

/* 辅助行：记住账号 / 忘记密码 */
.f-aux{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px}
.f-aux label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);cursor:pointer}
.f-aux input[type=checkbox]{width:14px;height:14px;accent-color:var(--orange);margin:0}
.f-aux a{font-size:12px;color:var(--muted)}
.f-aux a:hover{color:var(--orange)}

/* 条款勾选行（注册） */
.f-agree{display:flex;align-items:flex-start;gap:6px;margin:0 0 18px;font-size:12px;color:var(--text);line-height:1.7}
.f-agree input{width:14px;height:14px;accent-color:var(--orange);margin:2px 0 0;flex-shrink:0}
.f-agree a,.link-like{color:var(--orange)}
.f-agree a:hover,.link-like:hover{text-decoration:underline}
.link-like{border:0;padding:0;background:none;font-size:inherit}

/* 提交按钮 */
.auth-submit{width:100%;height:46px;border:0;border-radius:6px;background:var(--orange);color:#fff;font-size:16px;font-weight:700;letter-spacing:6px;text-indent:6px;transition:background .15s}
.auth-submit:hover{background:#ef5912}
.auth-submit:disabled{opacity:.65;cursor:default}
.auth-form-foot{margin-top:16px;font-size:12px;color:var(--muted);text-align:center}
.auth-form-foot a{color:var(--orange)}
.auth-form-foot a:hover{text-decoration:underline}

/* ---------- 找回密码：步骤条 + 分步面板 ---------- */
.auth-steps{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.auth-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.auth-step i{width:26px;height:26px;border-radius:50%;border:1px solid #d8dee6;background:#fff;color:#8a929c;font-style:normal;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-step.is-active{color:var(--ink);font-weight:700}
.auth-step.is-active i{background:var(--orange);border-color:var(--orange);color:#fff}
.auth-step.is-done{color:var(--text)}
.auth-step.is-done i{border-color:var(--orange);color:var(--orange)}
.auth-steps-line{flex:1;height:1px;background:#e3e7ec}
.auth-steps-line.is-done{background:var(--orange)}
.auth-step-pane{display:none}
.auth-step-pane.is-active{display:block}
.auth-sms{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.auth-sms input{width:100%;height:46px;padding:0 14px;border:1px solid transparent;border-radius:6px;background:var(--field-fill);font-size:14px;color:var(--ink)}
.auth-sms input:focus{outline:none;background:#fff;border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,100,24,.1)}
.auth-sms button{height:46px;padding:0 16px;border:1px solid var(--orange);border-radius:6px;background:#fff;color:var(--orange);font-size:13px;white-space:nowrap}
.auth-sms button:hover{background:#fff4ec}
.auth-sms button:disabled{border-color:#e3e7ec;color:#aab2bc;background:#fafbfc;cursor:default}
.f-pane-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.f-pane-actions .auth-submit{width:auto;height:46px;padding:0 34px;letter-spacing:2px;text-indent:2px}
.auth-ghost-btn{height:46px;padding:0 24px;border:1px solid var(--field-line);border-radius:6px;background:#fff;color:var(--text);font-size:14px}
.auth-ghost-btn:hover{border-color:var(--orange);color:var(--orange)}
.f-pane-actions .f-pane-hint{font-size:12px;color:var(--muted)}
.f-pane-actions .f-pane-hint a{color:var(--orange)}
.f-pane-actions .f-pane-hint a:hover{text-decoration:underline}
.auth-sms-hint{margin:-4px 0 16px;font-size:12px;color:var(--muted);line-height:1.8}

/* 完成面板 */
.auth-done{text-align:center;padding:26px 0 10px;display:none}
.auth-done.is-active{display:block}
.auth-done .bi{font-size:54px;color:var(--orange)}
.auth-done h3{margin:14px 0 0;font-size:19px;font-weight:700;color:var(--ink)}
.auth-done p{margin:8px 0 0;font-size:13px;color:var(--muted)}
.auth-done-actions{display:flex;justify-content:center;gap:12px;margin-top:22px}
.auth-done-actions .auth-submit{width:auto;height:44px;padding:0 30px;font-size:14px;letter-spacing:2px;text-indent:2px}

/* ---------- 服务条款弹窗 ---------- */
.auth-dialog{border:0;border-radius:12px;padding:0;width:480px;max-width:calc(100% - 32px);color:var(--ink);box-shadow:0 28px 90px rgba(16,46,78,.25)}
.auth-dialog::backdrop{background:rgba(18,45,78,.44)}
/* 弹窗打开后焦点交给容器本身，避免 UA 默认给聚焦容器画一圈黑色描边。 */
.auth-dialog:focus-visible{outline:none}
.auth-dialog-heading{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink)}
.auth-dialog-close{border:0;background:none;padding:4px;font-size:14px;color:var(--muted)}
.auth-dialog-close:hover{color:var(--orange)}
/* 关闭按钮聚焦时不画描边：原生 dialog 打开瞬间默认聚焦该按钮，
   命中全局 :focus-visible 后会在右上角留下突兀方框；改为仅切换文字颜色。 */
.auth-dialog-close:focus-visible{outline:none;color:var(--orange)}
.auth-dialog-body{padding:18px;max-height:52vh;overflow:auto;font-size:12px;color:var(--text);line-height:2}
.auth-dialog-body h4{margin:14px 0 0;font-size:13px;color:var(--ink)}
.auth-dialog-body h4:first-child{margin-top:0}
.auth-dialog-foot{padding:12px 18px;background:#f7f9fc;border-radius:0 0 12px 12px;text-align:right}
.auth-dialog-foot button{border:0;border-radius:4px;padding:8px 18px;background:var(--orange);color:#fff;font-size:12px}
.auth-dialog-foot button:hover{background:#ef5912}

/* ---------- 页脚：同首页 home-foot ---------- */
.auth-foot{border-top:1px solid #eceef1;padding:22px 16px 30px;text-align:center;font-size:12px;color:var(--muted);line-height:1.9;background:var(--canvas)}
.auth-foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 14px;margin-bottom:8px}
.auth-foot nav a{color:var(--text)}
.auth-foot nav a:hover{color:var(--orange)}
.auth-foot nav span{color:#d1d5db}
.auth-foot p{margin:0}

/* ---------- 响应式 ---------- */
@media(max-width:1100px){
  .auth-topbar{width:calc(100% - 40px)}
}
@media(max-width:900px){
  .auth-card{grid-template-columns:1fr}
  .auth-info-col{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
  .auth-info-block + .auth-info-block{border-top:0;padding-top:0}
}
@media(max-width:700px){
  .auth-topbar{width:calc(100% - 30px);padding-inline:12px;font-size:11px}
  .auth-topbar-group{gap:7px 12px}
  .auth-main{padding:20px 12px}
  .auth-form-col{padding:26px 20px 24px}
  .auth-tabs{gap:28px;margin-bottom:24px}
  .auth-tabs a{font-size:17px}
  .auth-info-col{padding:20px;grid-template-columns:1fr}
  .auth-info-block + .auth-info-block{border-top:1px solid var(--line);padding-top:16px}
  .auth-captcha{width:100px}
  .auth-submit{letter-spacing:4px;text-indent:4px}
}

/* ===== 账户页视觉收口（2026-10-27）：统一表单灰阶、输入聚焦与主要操作的触感。 */
.auth-body{
  --canvas:#f3f5f7;
  --line:#e7ecf1;
  --field-fill:#f6f8fa;
  color:#4f5b68;
  font-size:14px;
}
.auth-topbar{border-bottom-color:var(--line);font-size:13px}
.auth-card{border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px rgba(28,43,60,.08)}
.auth-form-col{padding:44px 48px 42px}
.auth-tabs a{font-size:20px}
.auth-info-col{background:#f8fafc}
.f-row input,.f-captcha input,.auth-sms input{border-color:#e3e8ee;border-radius:8px;background:var(--field-fill);font-size:15px}
.f-row input:focus,.f-captcha input:focus,.auth-sms input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 14%,transparent)}
.auth-submit,.auth-sms button,.auth-ghost-btn{min-height:46px;border-radius:8px}
.auth-submit{box-shadow:0 4px 12px color-mix(in srgb,var(--orange) 18%,transparent)}
.auth-dialog{border-radius:14px}
.auth-dialog-body{font-size:13px}
@media(max-width:700px){
  .auth-main{padding:20px 12px}
  .auth-form-col{padding:26px 20px 24px}
  .auth-info-col{padding:20px}
}