/* ============ 登录页面 ============ */
/* ★ v20261102g 登录页配色可切换：默认恢复经典紫（#667eea→#764ba2，v20261102b 清新化之前的原版），
   .lp-fresh 类切换为清新绿（v20261102b 的配色）。登录页右上角按钮切换，localStorage(loginTheme) 记忆。
   —— 色值全部收敛为 .login-page 上的 CSS 变量，两套主题只改变量不改规则。 */
.login-page {
  --lp-page-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* 经典紫：整页背景 */
  --lp-left-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* 经典紫：品牌面板 */
  --lp-btn-grad: linear-gradient(135deg, #667eea, #764ba2);           /* 经典紫：选中态按钮 */
  --lp-accent: #667eea;                                               /* 经典紫：强调色（hover 等） */
  --lp-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);                   /* 经典紫：卡片阴影（中性黑） */
  --lp-card-radius: 12px;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-page-grad);
  overflow: hidden;
}

/* 清新绿主题（v20261102b 配色）：登录页右上角切换按钮写入 .lp-fresh */
.login-page.lp-fresh {
  --lp-page-grad: linear-gradient(150deg, #1e9e63 0%, #2bb673 48%, #7bd6a8 100%);
  --lp-left-grad: linear-gradient(150deg, #178a52 0%, #2bb673 70%, #43c184 100%);
  --lp-btn-grad: linear-gradient(135deg, #2bb673, #1e9e63);
  --lp-accent: var(--primary, #2bb673);
  --lp-card-shadow: 0 20px 60px rgba(23, 92, 60, 0.22), 0 4px 16px rgba(23, 92, 60, 0.10);
  --lp-card-radius: 16px;
}

/* ============ ★ v20261106l 登录页配色多样化（老板 2026-11-06「不只局限于经典紫和清新绿，
   让用户选择直到自己喜欢的颜色」）============
   8 套主题 = 经典紫(默认/无类) + 清新绿(.lp-fresh 既有) + 以下 6 套新主题。
   全部只覆盖 .login-page 上的 6 个 --lp-* 变量，零规则改动、零回归面。
   色板浮层 .lp-palette 由 index.html 的 LoginThemePick.open() 控制，localStorage(loginTheme) 记忆。 */
.login-page.lp-ocean {      /* 深海蓝：稳重商务 */
  --lp-page-grad: linear-gradient(150deg, #1565c0 0%, #1e88e5 52%, #64b5f6 100%);
  --lp-left-grad: linear-gradient(150deg, #0d47a1 0%, #1e88e5 70%, #42a5f5 100%);
  --lp-btn-grad: linear-gradient(135deg, #1e88e5, #1565c0);
  --lp-accent: #1e88e5;
  --lp-card-shadow: 0 20px 60px rgba(13, 71, 161, 0.22), 0 4px 16px rgba(13, 71, 161, 0.10);
  --lp-card-radius: 16px;
}
.login-page.lp-sunset {     /* 活力橙：暖调醒目 */
  --lp-page-grad: linear-gradient(150deg, #d84315 0%, #f57c00 52%, #ffb74d 100%);
  --lp-left-grad: linear-gradient(150deg, #bf360c 0%, #f57c00 70%, #ffa726 100%);
  --lp-btn-grad: linear-gradient(135deg, #f57c00, #d84315);
  --lp-accent: #f57c00;
  --lp-card-shadow: 0 20px 60px rgba(191, 54, 12, 0.22), 0 4px 16px rgba(191, 54, 12, 0.10);
  --lp-card-radius: 16px;
}
.login-page.lp-sakura {     /* 樱语粉：柔和轻盈 */
  --lp-page-grad: linear-gradient(150deg, #ad1457 0%, #ec407a 52%, #f8bbd0 100%);
  --lp-left-grad: linear-gradient(150deg, #880e4f 0%, #ec407a 70%, #f06292 100%);
  --lp-btn-grad: linear-gradient(135deg, #ec407a, #ad1457);
  --lp-accent: #ec407a;
  --lp-card-shadow: 0 20px 60px rgba(136, 14, 79, 0.20), 0 4px 16px rgba(136, 14, 79, 0.10);
  --lp-card-radius: 16px;
}
.login-page.lp-teal {       /* 科技青：清爽专业 */
  --lp-page-grad: linear-gradient(150deg, #00695c 0%, #00897b 52%, #4db6ac 100%);
  --lp-left-grad: linear-gradient(150deg, #004d40 0%, #00897b 70%, #26a69a 100%);
  --lp-btn-grad: linear-gradient(135deg, #00897b, #00695c);
  --lp-accent: #00897b;
  --lp-card-shadow: 0 20px 60px rgba(0, 77, 64, 0.22), 0 4px 16px rgba(0, 77, 64, 0.10);
  --lp-card-radius: 16px;
}
.login-page.lp-wine {       /* 品韵红：热情典雅 */
  --lp-page-grad: linear-gradient(150deg, #7f0000 0%, #c62828 52%, #e57373 100%);
  --lp-left-grad: linear-gradient(150deg, #5f0000 0%, #c62828 70%, #ef5350 100%);
  --lp-btn-grad: linear-gradient(135deg, #c62828, #7f0000);
  --lp-accent: #c62828;
  --lp-card-shadow: 0 20px 60px rgba(95, 0, 0, 0.24), 0 4px 16px rgba(95, 0, 0, 0.10);
  --lp-card-radius: 16px;
}
.login-page.lp-graphite {   /* 曜石灰：克制高级 */
  --lp-page-grad: linear-gradient(150deg, #1c262e 0%, #37474f 52%, #78909c 100%);
  --lp-left-grad: linear-gradient(150deg, #10202a 0%, #37474f 70%, #546e7a 100%);
  --lp-btn-grad: linear-gradient(135deg, #455a64, #263238);
  --lp-accent: #455a64;
  --lp-card-shadow: 0 20px 60px rgba(16, 32, 42, 0.30), 0 4px 16px rgba(16, 32, 42, 0.12);
  --lp-card-radius: 16px;
}

/* 配色色板浮层（点右上角「🎨 配色」弹出；手机端同样可用） */
.lp-palette {
  position: fixed;
  top: 78px;
  right: 16px;
  z-index: 420;
  width: 216px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  padding: 10px;
  animation: lpPaletteIn 0.18s ease;
}
@keyframes lpPaletteIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.lp-palette-title {
  font-size: 12px;
  color: #8c8c8c;
  padding: 4px 6px 8px;
  text-align: center;
}
.lp-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 13.5px;
  color: #333;
  text-align: left;
  transition: background 0.15s;
}
.lp-palette-item:hover { background: #f5f7fa; }
.lp-palette-item.active { border-color: #52c41a; background: #f6ffed; }
.lp-palette-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.lp-palette-check { margin-left: auto; color: #52c41a; font-weight: 700; font-size: 14px; }
@media (max-width: 768px) {
  .lp-palette { top: 70px; right: 10px; width: 200px; }
}

/* 配色切换按钮（右上角悬浮，两套主题通用；置于顶部跑马灯(z-index:300,高26px)下方） */
.theme-toggle {
  position: fixed;
  top: 38px;
  right: 16px;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.theme-toggle:hover { background: rgba(0, 0, 0, 0.38); }
.theme-toggle:active { transform: scale(0.96); }
@media (max-width: 768px) {
  .theme-toggle { top: 32px; right: 10px; padding: 7px 12px; font-size: 12px; }
}

.login-container {
  display: flex;
  width: 900px;
  max-width: 95vw;
  height: 560px;
  max-height: 90vh;
  background: #fff;
  border-radius: var(--lp-card-radius);
  overflow: hidden;
  box-shadow: var(--lp-card-shadow);
}

.login-left {
  flex: 1;
  background: var(--lp-left-grad);
  color: #fff;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-left::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 50%);
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

.brand-area {
  position: relative;
  z-index: 1;
}

.logo {
  font-size: 48px;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.brand-area h1 {
  font-size: 28px;
  margin-bottom: 12px;
  font-weight: 700;
}

/* w 批：副标题一行放多业态口径（21 字 ×14px ≈ 354px < 面板 370px，保证单行），底距 30 → 22 */
.brand-area .subtitle {
  font-size: 14px;
  margin-bottom: 22px;
  opacity: 0.9;
}

/* w 批：功能概括 6 项 → 12 项，收紧行距保证 560px 面板内不溢出 */
/* v20261006j：12 项笼统概览 → 16 项模块级能力，改**两列紧凑网格**（每条 ≤13 字 ⇒ 不折行）。
   ★ 为什么改网格：单列 16 行在 560px 面板里必然溢出（品牌区约 153px + 16×24.2px ≈ 540px > 460px 可用高）；
     两列 8 行只需约 8×22 = 176px，且信息密度更高（老板诉求「功能细化」）。
   ★ 列宽：左面板 900px 容器的 1/2 减 padding 40×2 ⇒ 内容约 370px，两列各 ~178px，
     12.5px 字号下每列可容 ~14 个全角字 ⇒ 最长条目（细粒度权限 · 多端同步 = 12 字）不折行。 */
.features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 7px;
}

.features li {
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0.92;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  word-break: keep-all;
}

.login-right {
  flex: 1;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.form-container {
  max-width: 340px;
  margin: 0 auto;
}

.form-container h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.subtitle {
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.form {
  display: flex;
  flex-direction: column;
}

/* 注册类型切换 toggle */
.reg-type-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color, #e0e0e0);
}
.reg-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: none;
  background: #f5f7fa;
  color: var(--text-secondary, #8c8c8c);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.reg-type-btn.active {
  background: var(--lp-btn-grad);
  color: #fff;
}
.reg-type-btn:not(.active):hover {
  background: #eef0f4;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
}

.form-options a {
  font-size: 13px;
}

.form-footer {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.demo-accounts {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.demo-tip {
  text-align: center;
  font-size: 12px;
  color: var(--info);
  margin-bottom: 12px;
}

.quick-login {
  display: flex;
  gap: 8px;
}

.btn-quick {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  background: #f5f7fa;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-regular);
  transition: all 0.3s;
}

.btn-quick:hover {
  background: var(--lp-accent);
  color: #fff;
  border-color: var(--lp-accent);
}

@media (max-width: 768px) {
  .login-page {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .login-container {
    width: 100%;
    min-height: 100vh;
    height: auto;
    max-height: none;
    border-radius: 0;
    flex-direction: column;
    overflow: visible; /* 允许子元素滚动，避免被父容器裁剪 */
  }
  
  .login-left {
    padding: 24px 20px 26px;
    min-height: 0;          /* v20261006k：高度自适应，16 项功能全显（原 200px 是「只有标题」时代的兜底） */
    flex-shrink: 0;
  }

  /* v20261006k：手机端品牌区紧凑化 —— 与电脑端一样两列网格展示 16 条模块级能力，
     但收敛 logo/标题/行距，避免登录首屏被品牌区挤掉大半屏。 */
  .login-left .logo {
    font-size: 34px;
    margin-bottom: 8px;
  }
  .login-left .brand-area h1 {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .login-left .brand-area .subtitle {
    font-size: 12.5px;
    margin-bottom: 12px;
  }
  .login-left .features {
    column-gap: 10px;
    row-gap: 4px;
  }
  .login-left .features li {
    font-size: 12px;
    line-height: 1.4;
  }
  
  .login-right {
    padding: 24px 20px 40px;
    justify-content: flex-start; /* 顶部对齐，解决居中导致顶部无法上滚 */
    overflow-y: visible;
    flex: none;
    min-height: 0;
  }

  .form-container {
    width: 100%;
    max-width: 100%;
  }

  /* ★ v20261102b（F-04 批次2）：触摸目标 ≥44px + 输入框 16px 防 iOS 聚焦自动缩放 */
  #authPage .form-group input,
  #authPage .form-group select {
    min-height: 44px;
    font-size: 16px;
  }
  #authPage .btn-lg {
    min-height: 46px;
    font-size: 16px;
  }
  .reg-type-btn {
    min-height: 44px;
  }
  .btn-quick {
    min-height: 44px;
    padding: 10px 8px;
  }
  .quick-login {
    flex-wrap: wrap;
  }
}

/* ============ v20260930i（bugfix）：矮视口适配（桌面小屏窗口，视口 660~730px 高） ============
 * 现象：桌面端固定 1366×860 窗口在 1366×768 屏上被系统压到工作区高度（约 728 视口），
 *   而 .login-container 固定 560px、.login-right 上下 padding 各 50px → 内容区仅 460px，
 *   登录表单（租户下拉+账号+密码+按钮+注册框+版本号+备案号）总高约 536px →
 *   .login-right 出现纵向滚动条，底部「忘记密码？」/版本号/备案号被拦腰切掉。
 * 口径：收敛间距与字号、隐藏左侧次要功能项，让内容真实可见 —— 不用 overflow:hidden 硬盖。
 * 注意：加 (min-width: 769px) 收窄到桌面宽度 —— 避免在手机竖屏（宽≤768 且高≤860）
 *   与下方 max-width:768px 移动端块叠加，覆盖掉移动端 min-height:100vh 适配。 */
@media (max-height: 860px) and (min-width: 769px) {
  /* 容器改为随内容自适应，矮视口下不再强制 560px */
  .login-container {
    height: auto;
    min-height: 500px;
    max-height: 94vh;
  }

  /* 左侧品牌区：压缩留白与字号，次要功能项只保留前 6 条（display:none 是真实隐藏，非裁剪） */
  .login-left {
    padding: 28px 32px;
  }
  .logo {
    font-size: 36px;
    margin-bottom: 10px;
  }
  .brand-area h1 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .brand-area .subtitle {
    margin-bottom: 14px;
  }
  .features {
    column-gap: 10px;
    row-gap: 3px;
  }
  .features li {
    font-size: 11.5px;
    line-height: 1.35;
  }
  /* v20261006j：改两列网格后**不再裁剪功能条目**（原 `nth-child(n+7) → 隐藏` 已删）。
     ★ 实测依据：1366×760 品牌区实高 237px / 可用 602px（余 365px），1366×660 仍有余量
       ⇒ 16 项全显也不溢出。（旧口径是单列时代的遗产 —— 单列 16 行必撑破 560px 面板，
       故当时必须裁；两列 8 行已无此问题，再隐藏纯属信息损失。） */

  /* 右侧表单区：收敛留白/字号/间距，660px 视口内无滚动条完整展示 */
  .login-right {
    padding: 22px 32px;
  }
  .form-container h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .form-container .subtitle {
    margin-bottom: 14px;
  }
  #authPage .form-group {
    margin-bottom: 12px;
  }
  #authPage .form-group label {
    margin-bottom: 4px;
    font-size: 13px;
  }
  #authPage .form-group input,
  #authPage .form-group select {
    padding: 8px 12px;
  }
  #authPage .btn-lg {
    min-height: 42px;
    padding: 9px 20px;
    font-size: 15px;
  }
  .form-footer {
    margin-top: 10px;
  }
  .demo-accounts {
    margin-top: 14px;
    padding-top: 12px;
  }
}

/* =====================================================================
   v20261111h 登录页「🍚 我要点餐」免登录商城入口
   与主登录按钮同宽同级的大按钮，品牌暖色（美团黄/橙）区分身份；
   纯前端跳 ?m=store，零网络请求、不触发表单 submit（type="button"）。
   ===================================================================== */
.sfg-order-entry {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 14px;
  padding: 11px 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(135deg, #FFD100 0%, #FF9A2E 100%);
  color: #3a2f00;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255, 154, 46, 0.30);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sfg-order-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 154, 46, 0.42);
}
.sfg-order-entry:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 154, 46, 0.28);
}
@media (max-width: 480px) {
  .sfg-order-entry {
    font-size: 14px;
    letter-spacing: 0;
    padding: 11px 6px;
    min-height: 46px;
    white-space: nowrap;
  }
}