/* 登录 —— 浅色商务 · 左右分屏（2026-09-21 改版，方案 C）
   左 46% 品牌区（浅灰网格 + 蓝线稿插画）/ 右 54% 表单；≤900px 隐藏左区。
   注意：滑块验证码由 app.js 的 initCaptcha() 动态生成，画布固定 320×150，
   故 .cap-box / .cap-slider 宽度必须维持 320px，不可改成 100%（会导致画布 CSS 像素与内部坐标错位）。 */
.login-wrap { min-height:100vh; display:flex; background:#fff; }

/* ===== 左：品牌区 ===== */
.login-aside { flex:0 0 46%; position:relative; overflow:hidden; padding:46px 60px;
  display:flex; flex-direction:column; justify-content:space-between; background:#f6f8fc; }
.login-aside::before { content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(14,63,143,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(14,63,143,.045) 1px, transparent 1px);
  background-size:34px 34px; }
.login-aside::after { content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  left:-190px; bottom:-240px; background:radial-gradient(circle, rgba(26,95,208,.10), transparent 66%); }
.login-aside > * { position:relative; z-index:2; }

.login-brand { display:flex; align-items:center; gap:12px; }
.login-brand-badge { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; font-weight:800; background:linear-gradient(135deg,#0e3f8f,#1a5fd0);
  box-shadow:0 6px 16px rgba(26,95,208,.28); }
.login-brand-txt b { display:block; font-size:17px; color:#0e3f8f; letter-spacing:.5px; }
.login-brand-txt span { font-size:9.5px; color:#8a97ab; letter-spacing:2.2px; }

.login-hero-title { font-size:32px; line-height:1.36; font-weight:800; color:#16233c; letter-spacing:.6px; margin:0 0 16px; }
.login-hero-title em { font-style:normal; color:var(--blue2); }
.login-hero-sub { font-size:13.5px; line-height:1.9; color:#5b6470; max-width:420px; margin:0 0 30px; }
.login-points { display:flex; flex-direction:column; gap:15px; }
.login-point { display:flex; gap:12px; align-items:flex-start; }
.login-point > i { width:26px; height:26px; flex:0 0 26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-style:normal; background:#fff; border:1px solid #dfe8f5; box-shadow:0 2px 6px rgba(14,63,143,.06); }
.login-point b { display:block; font-size:13.5px; color:#22314d; font-weight:600; margin-bottom:3px; }
.login-point span { font-size:12px; color:#8794a8; line-height:1.6; }
.login-art { display:flex; justify-content:flex-end; margin-top:22px; opacity:.5; }
.login-art svg { width:260px; height:auto; }
.login-aside-foot { font-size:11px; color:#a6b0bf; letter-spacing:.3px; }

/* 中缝 */
.login-divider { width:1px; background:linear-gradient(180deg, transparent, #e2e9f4 18%, #e2e9f4 82%, transparent); }

/* ===== 右：表单 ===== */
.login-form { flex:1 1 54%; display:flex; align-items:center; justify-content:center; padding:52px 48px; background:#fff; }
.login-inner { width:100%; max-width:380px; }
.login-head { margin-bottom:30px; }
.login-title { font-size:24px; font-weight:700; color:#16233c; margin:0 0 7px; }
.login-wave { font-size:20px; }
.login-sub { font-size:13px; color:var(--muted); margin:0; }

.login-label { display:block; font-size:13px; color:#4a5568; margin-bottom:7px; font-weight:500; }
.login-field { position:relative; margin-bottom:16px; }
.login-field-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.5; }
.login-input { width:100%; height:46px; border:1.5px solid var(--line); border-radius:10px; padding:0 14px 0 40px;
  font-size:14px; outline:none; background:#fcfdff; transition:border-color .2s, box-shadow .2s, background .2s; }
.login-input:focus { border-color:var(--blue2); box-shadow:0 0 0 3px rgba(26,95,208,.12); background:#fff; }
.login-input::placeholder { color:#aab4c2; }
.login-remember { display:flex; align-items:center; justify-content:space-between; margin:-2px 0 16px; font-size:13px; color:#4a5568; }
.login-remember label { display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.login-remember input { width:15px; height:15px; accent-color:#1a5fd0; cursor:pointer; }
.login-remember a { color:var(--blue); text-decoration:none; font-size:12.5px; }
.login-remember a:hover { text-decoration:underline; }
.login-btn { width:100%; height:46px; background:linear-gradient(135deg,#0e3f8f,#1a5fd0); color:#fff; border:none; border-radius:10px;
  font-size:15px; font-weight:600; letter-spacing:4px; cursor:pointer; margin-top:6px;
  transition:opacity .2s, transform .1s; box-shadow:0 8px 20px rgba(26,95,208,.26); }
.login-btn:hover { opacity:.93; }
.login-btn:active { transform:scale(.99); }
.login-err { color:#e53935; font-size:13px; text-align:center; min-height:18px; margin-top:8px; }
.login-foot { text-align:center; margin-top:22px; }
.login-or { position:relative; display:block; font-size:12px; color:#aab4c2; margin:8px 0 14px; }
.login-or::before, .login-or::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:#eef0f4; }
.login-or::before { left:0; } .login-or::after { right:0; }
.login-others { display:flex; justify-content:center; gap:14px; }
.login-other { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; font-size:13px; color:#4a5568;
  background:#f7f9fc; border:1px solid #e8ecf2; border-radius:9px; cursor:pointer; transition:all .15s; }
.login-other:hover { border-color:var(--blue2); color:var(--blue2); background:#f0f5fd; }

/* ===== 滑块拼图验证码（容器宽度必须 320px，见文件头说明） ===== */
.login-captcha { margin-bottom:16px; position:relative; }
.cap-box { position:relative; width:320px; height:150px; margin:0 auto; border-radius:10px; overflow:hidden; background:#eef2f8; }
.cap-bg { display:block; width:320px; height:150px; }
.cap-piece { position:absolute; top:0; left:0; pointer-events:none; }
.cap-tip { position:absolute; left:0; bottom:0; width:100%; text-align:center; font-size:12px; color:#fff;
  background:rgba(0,0,0,.35); padding:3px 0; transition:background .2s; }
.cap-tip.ok { background:rgba(30,142,62,.92); }
.cap-slider { position:relative; width:320px; height:40px; margin:8px auto 0; border-radius:20px; background:#eef2f8; overflow:hidden; }
.cap-slider-track { position:absolute; left:0; top:0; height:100%; width:0; background:rgba(26,95,208,.18); }
.cap-slider-btn { position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%;
  background:#1a5fd0; color:#fff; display:flex; align-items:center; justify-content:center; cursor:grab; user-select:none;
  font-size:16px; box-shadow:0 2px 6px rgba(26,95,208,.4); }
.cap-slider-btn:active { cursor:grabbing; }
.cap-slider-text { position:absolute; left:46px; top:0; height:40px; display:flex; align-items:center; font-size:12px; color:#9aa7b8; }
.cap-pass .cap-slider { background:rgba(30,142,62,.15); }
.cap-pass .cap-slider-btn { background:#1e8e3e; box-shadow:0 2px 6px rgba(30,142,62,.4); }
@keyframes capShake {
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.cap-shake { animation:capShake .28s ease; box-shadow:0 0 0 2px rgba(229,57,53,.9) !important; border-radius:10px; }

/* ===== 自适应 ===== */
/* 窄屏：隐藏左品牌区，表单居中铺满（原 820px 断点，改版后统一为 900px） */
@media (max-width:900px){
  .login-aside, .login-divider { display:none; }
  .login-form { flex:1 1 100%; padding:40px 24px; }
  .login-inner { max-width:400px; }
}
/* 矮屏：收紧左区，必要时隐藏装饰插画，保证 768 高度下不出现挤压 */
@media (max-height:860px){
  .login-aside { padding:38px 48px; }
  .login-hero-title { font-size:28px; }
  .login-art { display:none; }
}
@media (max-height:720px){
  .login-aside { padding:30px 44px; }
  .login-hero-title { font-size:25px; margin-bottom:12px; }
  .login-hero-sub { margin-bottom:20px; }
  .login-points { gap:11px; }
}