/* ==========================================================================
   idc 主题 · 登录 / 注册 / 找回密码 皮肤层
   --------------------------------------------------------------------------
   基底是 wb-auth.css（布局与一屏适配全部保留），本文件只做「视觉接管」：
     白底 + 浅薄荷左栏 + 白色促销卡 + 墨色胶囊按钮 + 16px 圆角，
   与官网 public/web/idc 的 idc.css 令牌完全同源。
   ★ 加载顺序必须在 wb-auth.css 之后（模板里已按此顺序引用）。
   ★ 对比度：正文墨 #1a1a1a / 次要 #5f6368 / 薄荷字 #00832a，
     三种色在白底与 #f4fcf6 底上均 ≥4.5:1，薄荷只做点缀与图标。
   ========================================================================== */

/* ---------- 1. 令牌对齐官网 ---------- */
:root {
  --navy: #f4fcf6;          /* 原深底 → 浅薄荷底 */
  --navy-2: #effaf2;
  --navy-3: #eaf9ee;
  --blue: #00b42a;
  --blue-dark: #00832a;     /* 白底 4.92，绿字专用 */
  --green: #00832a;         /* 原 #34D399 白底仅 1.9，统一压深 */
  --ink: #1a1a1a;
  --body: #5f6368;
  --muted: #6b7280;
  --border: #e5e7eb;

  --auth-line: #e3efe7;     /* 薄荷底上的描边 */
  --auth-mint-soft: #f2fbf5;
}

/* ---------- 2. 左栏：浅薄荷面板 ---------- */
.login-container .container-back {
  background:
    radial-gradient(720px 500px at 108% -10%, rgba(0, 180, 42, .10), transparent 62%),
    radial-gradient(520px 400px at -14% 108%, rgba(0, 180, 42, .07), transparent 60%),
    linear-gradient(180deg, #f7fdf9 0%, #f1faf4 100%) !important;
  border-right: 1px solid var(--auth-line);
  box-shadow: none !important;
}
/* 细网格纹理：深色低透明度，浅底上才看得见 */
.login-container .container-back::after {
  opacity: .55 !important;
  background-image:
    linear-gradient(rgba(16, 24, 20, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 20, .055) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}
/* 极光：只留薄荷色，压到很淡 */
.login-container .container-back::before {
  background:
    radial-gradient(closest-side at 24% 26%, rgba(0, 180, 42, .10), transparent 70%),
    radial-gradient(closest-side at 80% 18%, rgba(0, 180, 42, .07), transparent 70%),
    radial-gradient(closest-side at 62% 84%, rgba(0, 180, 42, .05), transparent 70%) !important;
  filter: blur(34px) !important;
}
/* 装饰圆 / 光球 / 雷达环：全部降为薄荷淡影 */
.login-container .back-line1 { border-color: rgba(0, 180, 42, .20) !important; }
.login-container .back-line2 { border-color: rgba(0, 180, 42, .16) !important; }
.login-container .back-line3 { border-color: rgba(0, 180, 42, .12) !important; }
.gm-orb { filter: blur(34px) !important; opacity: .30 !important; }
.gm-orb-1 { background: #7ee09a !important; }
.gm-orb-2 { background: #b6ecc6 !important; }
.gm-orb-3 { background: #d8f5e0 !important; }
.login-container .container-back .gm-radar { border-color: rgba(0, 180, 42, .18) !important; }
.login-container .container-back .gm-radar::before { border-color: rgba(0, 180, 42, .14) !important; }
.login-container .container-back .gm-radar::after { border-color: rgba(0, 180, 42, .22) !important; }

/* ---------- 3. 促销区文案 ---------- */
.gm-deals-head .eyebrow-line {
  display: inline-flex !important;
  align-items: center;
  height: 24px;
  padding: 0 11px !important;
  border-radius: 999px;
  color: var(--blue-dark) !important;
  background: rgba(0, 180, 42, .10);
  border: 1px solid rgba(0, 180, 42, .22);
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  margin-bottom: 10px !important;
}
.gm-deals-head h2 {
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.015em;
}
.gm-deals-head p { color: var(--body) !important; }

/* ---------- 4. 促销卡：统一白卡（四种 bg_color 全部归一） ---------- */
.gm-deal-card,
.gm-deal-card.card-a,
.gm-deal-card.card-b,
.gm-deal-card.card-blue,
.gm-deal-card.card-purple,
.gm-deal-card.card-green,
.gm-deal-card.card-orange {
  background: #fff !important;
  border: 1px solid var(--auth-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 20, .04) !important;
  color: var(--ink) !important;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s, border-color .22s;
}
.gm-deal-card:hover,
.gm-deal-card.card-blue:hover,
.gm-deal-card.card-purple:hover,
.gm-deal-card.card-green:hover,
.gm-deal-card.card-orange:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 180, 42, .38) !important;
  box-shadow: 0 12px 28px rgba(16, 24, 20, .10) !important;
}
/* 去掉白色高光层（白卡上会发灰） */
.gm-deal-card::before { display: none !important; }

.gm-deal-card .deal-kicker {
  background: rgba(0, 180, 42, .10) !important;
  color: var(--blue-dark) !important;
  border-radius: 999px !important;
  letter-spacing: .04em !important;
  font-weight: 700 !important;
}
.gm-deal-card h3 {
  color: var(--ink) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}
.gm-deal-card .deal-desc { color: var(--body) !important; }
.gm-deal-card .deal-price .num { color: var(--ink) !important; }
.gm-deal-card .deal-price sub,
.gm-deal-card .deal-price .unit { color: var(--body) !important; }
.gm-deal-card .deal-price .orig { color: var(--muted) !important; }
.gm-deals-grid .gm-deal-card .deal-price-txt { color: var(--body) !important; }

/* 抢购按钮：墨色胶囊 */
.gm-deal-card .deal-btn,
.gm-deal-card.card-b .deal-btn,
.gm-deal-card.card-green .deal-btn {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.gm-deal-card .deal-btn:hover {
  background: #000 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18) !important;
}
/* 倒计时：浅薄荷条 */
.gm-deals-grid .cd-mini {
  background: var(--auth-mint-soft) !important;
  border: 1px solid var(--auth-line) !important;
  color: var(--body) !important;
  border-radius: 8px !important;
}
.gm-deals-grid .cd-mini b { color: var(--ink) !important; }

/* 空态提示（JS 内联 color:#8F8CB8 读不清，这里兜底） */
#gmDealCards > div[style] { color: var(--body) !important; }

/* ---------- 5. 信任条 ---------- */
.gm-deals-trust span {
  background: #fff !important;
  border: 1px solid var(--auth-line) !important;
  color: var(--body) !important;
  border-radius: 999px !important;
}
.gm-deals-trust svg { color: var(--blue) !important; }

/* ---------- 6. 右栏：纯白 + 极淡网格 ---------- */
.login-container .container-before {
  background:
    radial-gradient(680px 440px at 100% 0%, rgba(0, 180, 42, .06), transparent 62%),
    linear-gradient(rgba(16, 24, 20, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 20, .028) 1px, transparent 1px),
    #fff !important;
  background-size: auto, 32px 32px, 32px 32px, auto !important;
  border-left: 1px solid #eef3ef !important;
}
.login-container .container-before::after { border-color: rgba(0, 180, 42, .16) !important; }

/* 表单卡：实白卡 */
.login-container .gm-form-card {
  background: #fff !important;
  border: 1px solid #e8efe9 !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 56px rgba(16, 24, 20, .08), 0 2px 8px rgba(16, 24, 20, .03) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 卡片顶部品牌行 */
.gm-right-brand .mark {
  background: var(--blue-dark) !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 14px rgba(0, 131, 42, .22) !important;
}
.gm-right-brand b { color: var(--ink) !important; }
.gm-right-brand small { color: var(--muted) !important; }
.gm-right-welcome h1 { color: var(--ink) !important; }
.gm-right-welcome p { color: var(--body) !important; }

/* ---------- 7. 表单控件 ---------- */
.login-container .el-input__inner {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
}
.login-container .el-input__inner::placeholder { color: #9aa0a6 !important; }
.login-container .el-input__inner:hover { border-color: #cfd4d9 !important; }
.login-container .el-input__inner:focus,
.login-container .el-input.is-focus .el-input__inner {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 42, .14) !important;
}
.login-container .el-input-group__prepend {
  background: #f7f9f8 !important;
  border-color: var(--border) !important;
  border-radius: 12px 0 0 12px !important;
}
.login-container .el-input-group--prepend > .el-input .el-input__inner {
  border-radius: 0 12px 12px 0 !important;
}
.code-btn {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--blue-dark) !important;
  font-weight: 600 !important;
}
.code-btn:hover {
  border-color: var(--blue) !important;
  background: var(--auth-mint-soft) !important;
  color: var(--blue-dark) !important;
}

/* 登录方式分段 */
.login-top { background: #f5f6f7 !important; border-radius: 12px !important; }
.login-email, .login-phone { color: var(--body) !important; border-radius: 9px !important; }
.login-email.active, .login-phone.active {
  background: #fff !important;
  color: var(--blue-dark) !important;
  box-shadow: 0 2px 8px rgba(16, 24, 20, .08) !important;
}
.login-text-title { color: var(--ink) !important; }
.login-text-title::after {
  background: var(--blue) !important;
  width: 34px !important;
  height: 3px !important;
  border-radius: 2px !important;
}
.login-text-regist { color: var(--body) !important; }
.login-text-regist a { color: var(--blue-dark) !important; }
.login-text-regist a:hover { color: #00691f !important; }

/* 协议行与复选框 */
.login-container .rember-item,
.login-container .read-item { color: var(--body) !important; }
.login-container .rember-item a,
.login-container .read-item a { color: var(--blue-dark) !important; }
.login-container .el-checkbox__inner {
  border-radius: 4px !important;
  border-color: #c9ced3 !important;
}
.login-container .el-checkbox__input.is-checked .el-checkbox__inner,
.login-container .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
}
.login-container .el-checkbox__input.is-focus .el-checkbox__inner { border-color: var(--ink) !important; }
.login-container .el-checkbox__label { color: var(--body) !important; }

/* ---------- 8. 主按钮：墨色胶囊 ---------- */
.login-container .login-btn.el-button {
  background: var(--ink) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(16, 24, 20, .16) !important;
}
.login-container .login-btn.el-button:hover {
  background: #000 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(16, 24, 20, .22) !important;
}
.login-container .login-btn.el-button:active { transform: translateY(0); }
.login-container .login-btn.el-button.is-disabled,
.login-container .login-btn.el-button.is-loading { opacity: .7; }
/* 去掉原先的白色扫光动画 */
.login-container .login-btn::after { display: none !important; animation: none !important; }

.pass-btn { color: var(--muted) !important; }
.pass-btn:hover { color: var(--blue-dark) !important; }

/* ---------- 9. 杂项：返回 / 二维码 / 三方登录 / 脚注 ---------- */
.gm-back-site {
  background: #f5f6f7 !important;
  color: var(--body) !important;
  border-radius: 999px !important;
}
.gm-back-site:hover { background: var(--ink) !important; color: #fff !important; }

.login .qr-code {
  background: var(--ink) !important;
  border-radius: 12px !important;
}
.login .qr-code:hover { box-shadow: 0 8px 18px rgba(16, 24, 20, .22) !important; }
.login .qr-box .qr-box-img { border-color: var(--border) !important; border-radius: 12px !important; }
.login .qr-box .qr-expire-time { color: var(--blue-dark) !important; }

.oauth-item {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.oauth-item:hover {
  border-color: var(--blue) !important;
  box-shadow: 0 8px 18px rgba(0, 180, 42, .14) !important;
}
.line-item .el-divider { background: var(--border) !important; }
.line-item .el-divider__text { color: var(--muted) !important; background: #fff !important; }

.login-container .gm-form-foot { border-top: 1px solid #f0f1f3 !important; }
.login-container .gm-form-foot a { color: var(--muted) !important; }
.login-container .gm-form-foot a:hover { color: var(--blue-dark) !important; }

/* 右上角优惠胶囊 */
.gm-promo-chip {
  background: #fff !important;
  color: var(--blue-dark) !important;
  border: 1px solid rgba(0, 180, 42, .32) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(0, 180, 42, .12) !important;
}
.gm-promo-chip:hover { box-shadow: 0 10px 22px rgba(0, 180, 42, .18) !important; }

/* 高屏信任面板 */
.login-container .gm-trust-panel {
  background: #fff !important;
  border: 1px solid var(--auth-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.login-container .gm-tp-ico { background: var(--auth-mint-soft) !important; color: var(--blue-dark) !important; }
.login-container .gm-tp-item b { color: var(--ink) !important; }
.login-container .gm-tp-item small { color: var(--body) !important; }

/* 窄屏精简品牌条 */
.gm-brand-mini {
  background: #f4fcf6 !important;
  border: 1px solid var(--auth-line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.gm-brand-mini .mark { background: var(--blue-dark) !important; }
.gm-brand-mini b { color: var(--ink) !important; }
.gm-brand-mini small { color: var(--muted) !important; }

/* 密码强度浮层 */
.password-rule-popover { border-color: var(--border) !important; border-radius: 12px !important; }
.password-rule-title { color: var(--ink) !important; }
.password-rule-item { color: var(--body) !important; }
.password-rule-item.is-pass { color: var(--blue-dark) !important; }

/* 错误提示 */
.el-alert { border-radius: 12px !important; }

/* ---------- 10. 协议勾选：wb 把文字藏在 checkbox 里，必须还原 ---------- */
/* 找回密码页的协议文字写在 <el-checkbox> 内部（没有兄弟节点），
   wb-auth.css 用 .read-item .el-checkbox__label{display:none} 把整段协议藏了，
   用户只能看到一个空勾选框 —— 法务与无障碍双输。这里显式还原。 */
.login-container .read-item .el-checkbox {
  flex: 0 0 auto !important;
  white-space: normal !important;
  max-width: 100%;
}
/* 只有「文字在勾选框内部」时才让勾选框撑满整行；
   文字是兄弟节点（登录/注册页）时必须保持 auto，否则会把文字挤到最右侧。 */
.login-container .read-item .el-checkbox:has(.el-checkbox__label:not(:empty)) {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: flex-start !important;
}
.login-container .read-item .el-checkbox__input { flex: 0 0 auto; margin-top: 3px; }
.login-container .read-item .el-checkbox__label {
  display: inline-block !important;
  padding-left: 8px !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  color: var(--body) !important;
  white-space: normal !important;
  word-break: break-word;
  text-align: left;
}
.login-container .read-item .el-checkbox__label a { color: var(--blue-dark) !important; }
/* 文字在兄弟节点时，让它占满剩余宽度并左对齐 */
.login-container .read-item .read-text { flex: 1 1 auto; min-width: 0; text-align: left; }

/* 登录/注册页：勾选框与协议文字同一行，不出现「孤零零一个框」 */
.login-container .rember-item { align-items: flex-start !important; row-gap: 4px; }
.login-container .rember-item .el-checkbox { flex: 0 0 auto !important; margin-top: 3px; }
.login-container .rember-item .read-text { flex: 1 1 200px; min-width: 0; line-height: 1.65; }
.login-container .rember-item a:last-child { margin-left: auto; white-space: nowrap; }

/* ---------- 11. 响应式微调 ---------- */
@media (max-width: 960px) {
  .login-container .container-before { border-left: 0 !important; }
  .login-container .gm-form-card { border-radius: 18px !important; }

  /* 整页垂直居中：wb 让内容顶部对齐，短表单会留下大片白 */
  .login-container { min-height: 100vh !important; }
  .login-container .container-before {
    justify-content: center !important;
    min-height: 100vh !important;
    padding-top: 58px !important;   /* 给绝对定位的「返回官网」让位 */
  }

  /* 验证码输入框与按钮保持同一行（wb 在窄屏改成整行按钮，视觉像野链接） */
  .login-container .code-item { flex-wrap: nowrap !important; align-items: stretch !important; }
  .login-container .code-item .el-input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  .login-container .code-item .code-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-top: 0 !important;
    padding: 0 12px !important;
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  /* wb 在 ≤400 把协议行改成纵向堆叠，这里改回「勾选框+文字同行、忘记密码另起一行」 */
  .login-container .rember-item {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px 8px !important;
  }
  .login-container .rember-item .read-text { flex: 1 1 180px; }
  .login-container .rember-item a:last-child { margin-left: auto !important; }
  /* 超窄屏按钮文字略缩，避免换行撑高 */
  .login-container .code-item .code-btn { font-size: 12px !important; padding: 0 10px !important; }
}
@media (min-width: 961px) and (max-width: 1280px) {
  /* 中屏左栏收窄后卡片文字略小，绿字对比度不变，仅收紧留白 */
  .gm-deals-grid .gm-deal-card { padding: 12px 12px 11px !important; }
}
/* 减少动效偏好：卡片不再位移 */
@media (prefers-reduced-motion: reduce) {
  .gm-deal-card:hover { transform: none; }
}

/* ---------- 12. 促销栏关闭（后台「促销栏」开关） ----------
   桌面端改为单列，表单区居中独占；≤960 本来就是单列，无需重复。
   模板已经不再渲染 container-back，这里的 display:none 只是兜底，
   避免只改配置没改模板（或缓存未更新）时留下一整块空左栏。 */
@media (min-width: 961px) {
  .login-container.idc-auth-single {
    grid-template-columns: 1fr !important;
  }
  .login-container.idc-auth-single .container-back {
    display: none !important;
  }
}

/* 无活动时的占位（文案由后台配置，颜色白底 4.9:1） */
.gm-deals-empty {
  color: var(--body, #5f6368) !important;
}