/* ============================================================
   JLR Auth Pages · 共享设计系统
   v1.0 · 2026-05-05 · IMI 项目组
   覆盖: login_m / wechat_bind / wechat_bind_oem / register_m / change_password_m
   与 home_m.html v1.6 视觉同源 (米淡 + 揽胜背景 + JLR Bronze)
   ============================================================ */

/* ===== JLR Emeric 字体 ===== */
@font-face { font-family: 'JLR Emeric'; src: url('/static/jlr/fonts/JLREmeric-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JLR Emeric'; src: url('/static/jlr/fonts/JLREmeric-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JLR Emeric'; src: url('/static/jlr/fonts/JLREmeric-ExtraLight.ttf') format('truetype'); font-weight: 200; font-display: swap; }

/* ===== Design Tokens (CI 标准 from theme1.xml) ===== */
:root {
  --jlr-black: #1A1A1A;
  --jlr-white: #FFFFFF;
  --jlr-cream: #EEECE1;
  --jlr-blue: #1F497D;
  --jlr-bronze: #BF7F56;
  --jlr-bronze-d: #9C6440;
  --jlr-coral: #DF6F21;
  --jlr-green: #95C98F;
  --divider: #E0DCD2;

  --text-2: #4A4A4A;
  --text-3: #8B8B8B;
  --text-mute: #B5AFA0;

  --font-sans: 'JLR Emeric', 'PingFang SC', -apple-system, BlinkMacSystemFont,
               'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
}

/* ===== 全局 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--jlr-cream); height: 100vh; overflow: hidden; }
body {
  font-family: var(--font-sans);
  color: var(--jlr-black);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input, textarea, button { font-family: inherit; outline: none; }
button { cursor: pointer; border: 0; background: transparent; }
a { text-decoration: none; color: inherit; }

/* ===== 全屏揽胜背景 (跟 home_m v1.6 同源, 车头朝左 30%) ===== */
.jlr-fixed-bg {
  position: fixed;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  height: 100vh; height: 100svh;
  background: url('/static/jlr/img/main_bg.jpg') 30% 50% / cover;
  z-index: 0;
  pointer-events: none;
}
/* 顶部/底部柔和米淡渐变, 让揽胜车头清晰但前景卡片清晰 */
.jlr-fixed-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,15,10,.22) 0%, rgba(238,236,225,.10) 22%,
    rgba(238,236,225,.20) 45%, rgba(238,236,225,.45) 70%,
    rgba(238,236,225,.78) 100%);
}

/* ===== 整体容器 ===== */
.jlr-auth-page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 22px;
}

/* ===== 顶部 brand 区 ===== */
@keyframes brandIn {
  0%   { opacity: 0; letter-spacing: 0.30em; transform: translateY(-10px); filter: blur(6px); }
  100% { opacity: 1; letter-spacing: 0.10em; transform: translateY(0); filter: blur(0); }
}
.jlr-brand {
  text-align: center;
  margin-top: 70px;
  margin-bottom: 12px;
}
.jlr-brand__title {
  color: var(--jlr-white);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.10em;
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(0,0,0,.30), 0 0 28px rgba(255,248,235,.18);
  animation: brandIn 1.2s cubic-bezier(.4,0,.2,1) .2s both;
}

/* ===== 主磨砂卡片 (跟 home_m unified-card 同源) ===== */
@keyframes cardIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.jlr-card {
  margin-top: auto;
  margin-bottom: 20px;
  padding: 24px 22px 20px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 16px 48px rgba(40,30,20,.18),
              inset 0 1px 0 rgba(255,255,255,.7);
  animation: cardIn .8s cubic-bezier(.4,0,.2,1) .4s both;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}
.jlr-card::-webkit-scrollbar { width: 0; }

/* 卡片标题 */
.jlr-card__title {
  font-size: 22px;
  font-weight: 500;
  color: var(--jlr-black);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.jlr-card__sub {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* ===== 微信信息卡 (wechat_bind 用) ===== */
.jlr-wx-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(191,127,86,.08);
  border: 1px solid rgba(191,127,86,.22);
  border-radius: 12px;
  margin-bottom: 16px;
}
.jlr-wx-card__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--jlr-bronze);
  object-fit: cover;
  background: var(--jlr-cream);
  flex-shrink: 0;
}
.jlr-wx-card__info { flex: 1; min-width: 0; }
.jlr-wx-card__nickname {
  font-size: 14px; font-weight: 500; color: var(--jlr-black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jlr-wx-card__tip {
  font-size: 11px; color: var(--text-3); margin-top: 2px;
  letter-spacing: 0.02em;
}

/* ===== 提示条 (info banner) ===== */
.jlr-tip {
  background: rgba(31,73,125,.06);
  border-left: 3px solid var(--jlr-blue);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-2);
  border-radius: 4px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.jlr-tip strong { color: var(--jlr-bronze-d); font-weight: 600; }

/* ===== Form 字段 ===== */
.jlr-field { margin-bottom: 12px; }
.jlr-field__label {
  font-size: 11px; color: var(--text-3);
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 6px; display: block;
}
.jlr-input {
  width: 100%;
  padding: 13px 16px;
  background: var(--jlr-white);
  border: 1px solid var(--divider);
  border-radius: 10px;
  color: var(--jlr-black);
  font-size: 14px;
  letter-spacing: 0.3px;
  transition: border-color .2s, box-shadow .2s;
}
.jlr-input:focus {
  border-color: var(--jlr-bronze);
  box-shadow: 0 0 0 3px rgba(191,127,86,.12);
}
.jlr-input::placeholder { color: var(--text-3); }

/* ===== 主按钮 米金 ===== */
.jlr-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--jlr-bronze);
  color: var(--jlr-white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-top: 6px;
  transition: background .2s, box-shadow .25s, transform .15s;
}
.jlr-btn:hover { background: var(--jlr-bronze-d); }
.jlr-btn:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(191,127,86,.32); }
.jlr-btn:active { transform: scale(.98); }
.jlr-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ===== 状态条 (error / success) ===== */
.jlr-msg {
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
  line-height: 1.5;
}
.jlr-msg.show { display: block; }
.jlr-msg--err {
  background: rgba(200,85,61,.10);
  border: 1px solid rgba(200,85,61,.28);
  color: #C8553D;
}
.jlr-msg--ok {
  background: rgba(149,201,143,.16);
  border: 1px solid rgba(149,201,143,.40);
  color: #2D7026;
}

/* ===== 分割线 + 次入口 ===== */
.jlr-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 12px;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.20em;
}
.jlr-divider::before, .jlr-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--divider);
}

/* 次入口卡 (注册 / CDSID / OEM) */
.jlr-alt-cta {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--divider);
  margin-bottom: 8px;
  transition: background .2s, border-color .2s, transform .15s;
}
.jlr-alt-cta:hover { background: rgba(191,127,86,.08); border-color: var(--jlr-bronze); }
.jlr-alt-cta:active { transform: scale(.98); }
.jlr-alt-cta__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--jlr-bronze);
  border-radius: 8px;
  color: var(--jlr-white);
  flex-shrink: 0;
}
.jlr-alt-cta__main { flex: 1; min-width: 0; line-height: 1.35; }
.jlr-alt-cta__title {
  font-size: 13px; font-weight: 500; color: var(--jlr-black);
  letter-spacing: 0.02em;
}
.jlr-alt-cta__hint {
  font-size: 11px; color: var(--text-3);
  margin-top: 2px; letter-spacing: 0.02em;
}
.jlr-alt-cta__arrow { color: var(--jlr-bronze); font-size: 16px; flex-shrink: 0; }

/* ===== 企微提示 (login_m 用, body.in-wecom 显示) ===== */
.jlr-wecom-tip {
  display: none;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(149,201,143,.10);
  border: 1px solid rgba(149,201,143,.40);
  border-radius: 10px;
  font-size: 12px;
  color: #2D7026;
  line-height: 1.6;
}
body.in-wecom .jlr-wecom-tip { display: block; }
.jlr-wecom-tip a { color: var(--jlr-bronze); text-decoration: underline; }

/* ===== 底部 footer ===== */
.jlr-foot {
  text-align: center;
  padding: 14px 0 calc(16px + env(safe-area-inset-bottom, 0));
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  line-height: 1.7;
}
.jlr-foot a {
  color: var(--text-2);
  border-bottom: 1px dotted var(--text-3);
  padding-bottom: 1px;
}
.jlr-foot a:hover { color: var(--jlr-bronze); border-color: var(--jlr-bronze); }

/* ============================================================
   PC 双栏登录布局 (login.html 用)
   左 60% 揽胜大图 + 右 40% 登录卡 (米淡底)
   ============================================================ */
@media (min-width: 900px) {
  html, body { height: 100vh; overflow: hidden; }

  /* PC 整页双栏 */
  .jlr-pc-wrap {
    display: grid; grid-template-columns: 1.2fr 1fr;
    min-height: 100vh; background: var(--jlr-cream);
  }

  /* 左 hero */
  .jlr-pc-hero {
    position: relative; padding: 56px 64px;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
  }
  .jlr-pc-hero__bg {
    position: absolute; inset: 0; z-index: 0;
    background: url('/static/jlr/img/main_bg.jpg') 50% 50% / cover;
  }
  .jlr-pc-hero__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(110deg, rgba(238,236,225,0.10) 0%, rgba(238,236,225,0.0) 35%, rgba(238,236,225,0.55) 100%);
  }
  .jlr-pc-hero__top {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 14px;
    color: var(--jlr-white);
  }
  .jlr-pc-hero__top-line {
    width: 32px; height: 1px; background: rgba(255,255,255,.7);
  }
  .jlr-pc-hero__top-label {
    font-size: 11px; letter-spacing: 0.35em;
    color: rgba(255,255,255,.85); font-weight: 300;
  }
  .jlr-pc-hero__main { position: relative; z-index: 2; margin: auto 0; max-width: 540px; }
  .jlr-pc-hero__title {
    font-size: clamp(40px, 4.8vw, 60px); font-weight: 500;
    line-height: 1.05; letter-spacing: 0.04em;
    color: var(--jlr-white);
    text-shadow: 0 2px 16px rgba(0,0,0,.30);
    margin-bottom: 18px;
  }
  .jlr-pc-hero__sub {
    font-size: 15px; line-height: 1.7;
    color: rgba(255,255,255,.88); max-width: 480px;
    font-weight: 300; letter-spacing: 0.05em;
    text-shadow: 0 1px 8px rgba(0,0,0,.25);
  }
  .jlr-pc-hero__feats {
    margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px;
  }
  .jlr-pc-hero__feat {
    padding: 6px 14px; font-size: 12px; color: var(--jlr-white);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    letter-spacing: 0.05em;
  }
  .jlr-pc-hero__foot {
    position: relative; z-index: 2;
    font-size: 11px; color: rgba(255,255,255,.55);
    letter-spacing: 0.05em;
  }

  /* 右 panel */
  .jlr-pc-panel {
    display: flex; align-items: center; justify-content: center;
    padding: 56px 48px;
    background: var(--jlr-cream);
  }
  .jlr-pc-card {
    width: 100%; max-width: 420px;
    padding: 36px 32px;
    background: var(--jlr-white);
    border-radius: 16px;
    border: 1px solid var(--divider);
    box-shadow: 0 12px 40px rgba(40,30,20,.06);
    animation: cardIn .8s cubic-bezier(.4,0,.2,1) .3s both;
  }
  .jlr-pc-card__title {
    font-size: 26px; font-weight: 500;
    letter-spacing: 0.02em; color: var(--jlr-black);
    margin-bottom: 6px;
  }
  .jlr-pc-card__sub {
    font-size: 13px; color: var(--text-2);
    margin-bottom: 28px; letter-spacing: 0.04em;
  }
  /* PC 上隐藏 mobile-only 元素 */
  .jlr-mobile-only { display: none; }
}
@media (max-width: 899px) {
  /* PC 双栏 在 mobile 退化 (只显示 panel, 通常不会发生因为 mobile UA 已 302 到 /m) */
  .jlr-pc-wrap { display: block; }
  .jlr-pc-hero { display: none; }
  .jlr-pc-panel { padding: 24px; }
}


/* ============================================================
   宽屏手机 / 折叠屏 / 平板竖屏 (481-899px) 自适应
   2026-05-30: 修复 _m 页面内容挤中间 480px、两边空白米色
   一改覆盖所有引用 auth.css 的 16 个 C 端认证/表单页
   ============================================================ */
@media (min-width: 481px) and (max-width: 899px) {
  /* 1) 背景揽胜图铺满全屏 (原 max-width:480 居中 → 两边空白) */
  .jlr-fixed-bg {
    max-width: none;
    width: 100%;
    left: 0;
    transform: none;
    background-position: 50% 42%;
  }
  /* 2) 内容容器: 居中 + 略放宽到 520, 大屏舒展 */
  .jlr-auth-page {
    max-width: 520px;
    padding: 0 32px;
  }
  /* 3) brand 顶部视口比例间距 */
  .jlr-brand { margin-top: 13vh; }
  /* 4) 卡片在剩余空间垂直居中 (不贴底), 大屏视觉平衡 */
  .jlr-card { margin-top: auto; margin-bottom: auto; }
}