/* 后台登录端排版重做（登录 / 注册账号 / 忘记密码）
   只作用于 #loginView，客户填写端 intake.html 用的是另一套 .auth-* 样式，不受影响。
   要点：
   1) 卡片宽度用 clamp 固定区间，窄屏不再被挤成 350px；
   2) 注册/找回面板拆成 01/02/03 分节，字段成栅格对齐，长杂的 select 文案挪到提示行；
   3) 所有控件（含 select）统一 46px 高、12px 圆角、同一套 focus 光圈；
   4) 错误/成功提示只在有内容时出现，不占位。 */

/* ---------- 骨架 ---------- */
#loginView.login-shell{
  background:linear-gradient(135deg,#fbfcfe,#eef3f8);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch;
}
#loginView .login-visual{padding:48px 5.2vw}
#loginView .login-copy h1{letter-spacing:-1.4px;margin:18px 0 0}
#loginView .login-copy .eyebrow{letter-spacing:3.4px}
#loginView .security-note{font-size:12.5px;letter-spacing:.2px;color:#a7b6c6}

#loginView .login-card{
  width:clamp(430px,36vw,600px);
  margin:auto;
  padding:34px 38px 30px;
  display:grid;
  gap:20px;
  background:#fff;
  border:1px solid #e7ecf3;
  border-radius:24px;
  box-shadow:0 30px 72px rgba(9,26,45,.11),0 1px 0 rgba(255,255,255,.6) inset;
}

/* ---------- 卡片头部 ---------- */
#loginView .auth-head{display:grid;gap:8px}
#loginView .auth-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
#loginView .auth-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  background:linear-gradient(135deg,#fdf6e7,#f7ead1);
  border:1px solid #efdcb4;
  color:#8f6a24;font-size:10.5px;font-weight:800;letter-spacing:2.1px;
}
#loginView .auth-lock{font-size:11.5px;font-weight:650;color:#8494a6;letter-spacing:.2px}
#loginView .auth-head h2{margin:6px 0 0;font-size:29px;font-weight:750;letter-spacing:-.5px;color:#10243d}
#loginView .auth-head p{margin:0;font-size:13px;line-height:1.6;color:#6c7a8f}

/* ---------- 分段式页签 ---------- */
#loginView .auth-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  padding:4px;background:#f1f4f8;border:1px solid #e6ebf1;border-radius:13px;
}
#loginView .auth-tab{
  border:0;background:transparent;border-radius:10px;padding:8px 6px;
  font-size:13px;font-weight:700;color:#617083;letter-spacing:.2px;
  transition:background .16s,color .16s,box-shadow .16s;
}
#loginView .auth-tab:hover{color:#10243d}
#loginView .auth-tab.active{background:#fff;color:#10243d;box-shadow:0 3px 10px rgba(16,35,57,.10)}
#loginView .auth-tab:focus-visible{outline:2px solid #c99a45;outline-offset:2px}

/* ---------- 面板与分节 ---------- */
#loginView .auth-pane{display:grid;gap:14px;min-width:0;align-content:start}
#loginView .auth-section{
  display:grid;gap:11px;min-width:0;
  padding:0;
}
#loginView .auth-section+.auth-section{
  margin-top:2px;padding-top:14px;border-top:1px solid #eef2f7;
}
#loginView .auth-section-head{display:flex;align-items:baseline;gap:9px;min-width:0}
#loginView .step-no{
  flex:none;width:22px;height:22px;border-radius:8px;
  background:linear-gradient(135deg,#173f66,#0b2340);color:#e8c987;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;line-height:22px;text-align:center;
  box-shadow:0 4px 10px rgba(11,35,64,.16);
}
#loginView .auth-section-head b{font-size:13px;font-weight:750;color:#16324f;letter-spacing:.2px}
#loginView .auth-section-head small{font-size:11.5px;font-weight:500;color:#93a1b1;letter-spacing:.1px}

/* ---------- 字段 ---------- */
/* align-content:start 很关键：否则字段所在网格单元被行高拉伸时，
   「标签行」会被撑高，输入框会比同一行另一列的输入框低一截（左右不齐）。 */
#loginView .field{display:grid;gap:7px;min-width:0;font-size:13px;align-content:start}
#loginView .field-label{font-size:12.5px;font-weight:700;color:#54657b;letter-spacing:.2px}
#loginView .req{color:#c1924a;font-style:normal;font-weight:800}
#loginView .field input,
#loginView .field select{
  width:100%;min-width:0;height:45px;padding:0 14px;
  border:1px solid #dfe6ee;border-radius:12px;background:#fff;
  font-size:14px;font-weight:600;color:#16263c;letter-spacing:.1px;
  outline:none;transition:border-color .16s,box-shadow .16s,background .16s;
}
#loginView .field input::placeholder{color:#a9b5c3;font-weight:500;letter-spacing:0}
#loginView .field input:hover,#loginView .field select:hover{border-color:#ccd7e2}
#loginView .field input:focus,#loginView .field select:focus{
  border-color:#c99a45;background:#fff;box-shadow:0 0 0 3px rgba(201,154,69,.16);
}
#loginView .field select{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236c7a8f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px 7px;
  text-overflow:ellipsis;
}

#loginView .auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;align-items:start}
#loginView .auth-grid .span-2{grid-column:1/-1}

/* 验证码：输入 + 发送按钮同高、对齐 */
#loginView .code-row{display:flex;gap:10px;align-items:stretch;min-width:0}
#loginView .code-row input{flex:1 1 auto;letter-spacing:.26em;font-weight:700;min-width:0}
#loginView .code-send{
  flex:none;height:45px;padding:0 16px;border-radius:12px;white-space:nowrap;
  font-size:12.5px;font-weight:750;letter-spacing:.2px;
  background:#f4f7fa;border:1px solid #dfe6ee;color:#1d4a76;
}
#loginView .code-send:hover:not(:disabled){background:#eaf1f7;border-color:#c9d7e3;transform:none}
#loginView .code-send:disabled{opacity:.62;cursor:not-allowed}

#loginView .auth-hint{font-size:11.5px;font-weight:500;color:#8d9bab;line-height:1.6;letter-spacing:.1px}

/* ---------- 提示 / 按钮 / 页脚 ---------- */
#loginView .form-error,
#loginView .auth-ok{font-size:12.5px;line-height:1.6;font-weight:600}
/* 没有提示内容时不占位，否则提交按钮上方会多出两段空隙 */
#loginView .form-error:empty,
#loginView .auth-ok:empty{display:none}
#loginView .form-error:not(:empty){
  padding:10px 13px;border-radius:11px;
  background:#fdf1f2;border:1px solid #f3d3d7;color:#a83542;
}
#loginView .auth-ok:not(:empty){
  padding:10px 13px;border-radius:11px;
  background:#eff8f4;border:1px solid #cfe8dd;color:#13705a;
}
#loginView .form-hint:not(:empty){
  padding:10px 13px;border-radius:11px;
  background:#fdf8ee;border:1px solid #f0e0c2;color:#8a6a28;
  font-size:12.5px;line-height:1.6;font-weight:600;
}

#loginView .login-submit{
  height:50px;border-radius:13px;font-size:14.5px;font-weight:750;letter-spacing:.4px;
  background:linear-gradient(135deg,#1a4a78,#0b2340)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(11,35,64,.22),0 0 0 1px rgba(201,154,69,.32) inset!important;
  transition:transform .16s,box-shadow .16s,background .16s;
}
#loginView .login-submit:hover{
  background:linear-gradient(135deg,#20568a,#0d2a4c)!important;
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(11,35,64,.28),0 0 0 1px rgba(222,182,102,.44) inset!important;
}
#loginView .login-submit:focus-visible{outline:2px solid #c99a45;outline-offset:3px}

#loginView .auth-foot{
  margin:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  font-size:12.5px;font-weight:600;color:#8494a6;
}
#loginView .auth-foot .dot{color:#cdd6df}
#loginView .auth-foot a{color:#b7842e;font-weight:750;text-decoration:none}
#loginView .auth-foot a:hover{text-decoration:underline}

#loginView .auth-note{
  margin:0;padding:10px 14px;border-radius:12px;
  background:#f7f9fc;border:1px solid #e8edf3;
  font-size:11.5px;font-weight:550;color:#6c7a8f;line-height:1.65;
}

/* ---------- 响应式 ---------- */
/* 卡片变窄时，双列字段回到单列，避免输入框被压得过窄 */
@media(max-width:1000px){
  #loginView .auth-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1080px){
  #loginView .login-card{width:min(600px,94%)}
}
@media(min-width:761px){
  /* 表单比屏幕高时，左侧品牌区固定，右侧独立滚动，避免整页跟着滚 */
  #loginView .login-visual{position:sticky;top:0;height:100vh}
}
@media(max-width:760px){
  #loginView.login-shell{display:block;background:#f4f7fa;padding:22px 16px 30px}
  #loginView .login-card{
    width:100%;max-width:520px;min-height:0;padding:24px 18px 22px;gap:14px;border-radius:20px;
  }
  #loginView .auth-head h2{font-size:25px}
  #loginView .auth-section{padding:13px 13px 14px}
  #loginView .mobile-brand{display:flex;align-items:center;gap:9px;margin-bottom:4px;font-size:14px;font-weight:800}
  #loginView .auth-head-row{margin-top:2px}
  #loginView .code-row{flex-wrap:nowrap}
  #loginView .code-send{padding:0 13px;font-size:12px}
}
@media(max-width:400px){
  #loginView .code-row{flex-wrap:wrap}
  #loginView .code-send{width:100%}
}