/* ============================================================
   汽配管家 · 科技蓝 v3.5 主题层（登录页）
   用法：login.html 中 v2 注入脚本之后引入（保证级联在最后）：
     <link rel="stylesheet" href="/css/theme-v3-login.css?v=...">
   原则：只改视觉；表单结构/字段/JS 逻辑（登录、记住密码、设备指纹）零改动
   版本：v3.5 · 2026-10-30
   ============================================================ */

/* ---------- 页面：极光深空（与主站侧栏同一材质） ---------- */
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 520px at 82% -12%,rgba(0,184,217,.22),transparent 62%),
             radial-gradient(760px 480px at -8% 112%,rgba(78,140,255,.24),transparent 62%),
             linear-gradient(178deg,#0C2150 0%,#102A62 55%,#16367C 100%);
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body::before{content:'';position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 30%,transparent 50%)}

/* ---------- 登录卡：白卡 + 品牌顶线签名 ---------- */
.card{position:relative;overflow:hidden;width:340px;border:1px solid rgba(255,255,255,.65);
  border-radius:18px;padding:30px 26px;background:#fff;
  box-shadow:0 24px 64px rgba(11,28,66,.38),0 4px 14px rgba(11,28,66,.22)}
.card::before{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:46px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#4E8CFF,var(--cyan,#00B8D9));box-shadow:0 1px 3px rgba(0,184,217,.35)}
.card .logo{width:52px;height:52px;border-radius:13px;background:#fff;padding:5px;object-fit:contain;
  display:block;margin:0 auto 10px;box-shadow:0 3px 10px rgba(20,40,90,.14),inset 0 0 0 1px #E3EAF5}
.brand-name{text-align:center;font-size:13px;font-weight:800;color:#16294D;letter-spacing:1.5px;margin-bottom:20px}

/* ---------- 表单 ---------- */
.card label{display:block;font-size:12px;font-weight:700;color:#5E6E8E;letter-spacing:.3px;margin-bottom:6px}
.card input[type=text],.card input[type=password]{
  width:100%;padding:11px 12px;border:1px solid #E3EAF5;border-radius:10px;
  background:#F5F8FD;font:inherit;font-size:14px;color:#16294D;transition:border-color .15s,box-shadow .15s,background .15s}
.card input[type=text]:focus,.card input[type=password]:focus{
  outline:none;border-color:#2E6BFF;background:#fff;box-shadow:0 0 0 3px rgba(46,107,255,.13)}
.card .pwd-wrap{position:relative}
.card .pwd-wrap input{padding-right:46px;width:100%}
.pwd-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  margin:0;padding:0;border:none;background:transparent;cursor:pointer;font-size:15px;line-height:1;border-radius:8px}
.pwd-eye:hover{background:#EEF3FB}
.card input[type=checkbox]{accent-color:#2E6BFF;cursor:pointer}
.remember-label{color:#5E6E8E;font-size:12.5px}
.remember-label:hover{color:#2E6BFF}
.opts-tip{font-size:11px;color:#9AA7C0}

/* ---------- 登录按钮 ---------- */
.card button[type=submit]{width:100%;margin-top:8px;padding:12px;border:none;border-radius:10px;
  background:linear-gradient(180deg,#4180FF,#1E4FD6);color:#fff;font:inherit;font-size:15px;font-weight:700;
  letter-spacing:.35em;text-indent:.35em;cursor:pointer;
  box-shadow:0 6px 16px rgba(46,107,255,.35),0 1px 2px rgba(30,79,214,.3),inset 0 1px 0 rgba(255,255,255,.28);
  transition:filter .15s,transform .06s}
.card button[type=submit]:hover{filter:brightness(1.06)}
.card button[type=submit]:active{transform:translateY(1px)}

/* ---------- 错误 / 提示 ---------- */
/* 错误色 #C93636 对白底约 5.2:1（原 #E54545 约 4.0:1，低于 WCAG AA 4.5:1）；
   错误区上移到按钮前，与主动作同组，保留 min-height 防布局跳动 */
.err{color:#C93636;font-size:12.5px;font-weight:600;margin:2px 0 4px;min-height:18px}
/* 弱文字统一 #5E6E8E（对白底约 5.1:1，达标）；原 #8A96AC / #9AA7C0 约 2.4~3.0:1 不达标 */
.hint{color:#5E6E8E;font-size:12px;margin-top:12px;text-align:center;line-height:1.7}
.opts-tip{color:#5E6E8E;font-size:11px}

/* ---------- 图形验证码（渐进式：仅连续失败后显示） ---------- */
.captcha-row{margin:0 0 12px}
.captcha-row[hidden]{display:none}
.captcha-line{display:flex;gap:8px;align-items:center}
.captcha-line input{flex:1;min-width:0;width:auto;text-transform:uppercase;letter-spacing:2px}
.captcha-line img{flex:none;width:116px;height:40px;border:0.5px solid #E3EAF5;border-radius:8px;background:#EEF3FB;cursor:pointer}
.captcha-line img:focus-visible{outline:2px solid #2E6BFF;outline-offset:2px}
.captcha-line img.is-err{border-color:#C93636}
.captcha-tip{font-size:11px;color:#5E6E8E;margin-top:5px;line-height:1.5}

/* 两个次要选项合并为一行：左对齐成组，避免两端拉散 */
.login-opts{justify-content:flex-start;gap:20px;flex-wrap:wrap}

/* ---------- 提交态 / 键盘可达 ---------- */
.card button[type=submit]:disabled{opacity:.62;cursor:not-allowed;filter:none}
.card button[type=submit]:focus-visible{outline:2px solid #2E6BFF;outline-offset:2px}
.card .pwd-eye:focus-visible{outline:2px solid #2E6BFF;outline-offset:-2px}

/* ---------- 响应式：iOS Safari 地址栏不抖动 + 小屏不贴边 ---------- */
body{min-height:100dvh}
@media(max-width:360px){
  .card{width:calc(100% - 24px);padding:24px 20px}
  .card button[type=submit]{letter-spacing:.2em;text-indent:.2em}
  .login-opts{flex-wrap:wrap;gap:4px 12px}
}