/* =============================================================================
 * v1334 · 注册/登录弹框可用性修复（P0 · 双栈同发）
 * -----------------------------------------------------------------------------
 * 实测缺陷（scout_auth2.py，prod/agent 逐位相同）：
 *   .auth-modal.auth-split  w=342 h=1389 y=-272  vh=844  overflowY=hidden  无祖先滚动容器
 *     .auth-modal-close   y=-255  inView=False（点不到关闭）
 *     .auth-tab           y=-239  inView=False（切不了注册/改密）
 *     input[name=login]   y=-70   inView=False（输不了账号）
 *   → 移动端用户根本无法注册、无法关闭弹框。
 * 根因：js/lx-auth-polish-v1170.js 在 ≤760px 下把 .auth-brand 设 order:2 移到表单下方，
 *   并注入 768px 高「赚钱机会仪表盘」；表单 619px + 768px = 1389px 远超视口，
 *   而 .auth-modal 是 overflow:hidden 且 .auth-modal-overlay 是 align-items:center 不可滚。
 * 修复（只改布局，不删任何真实承诺）：
 *   1) 遮罩可滚 + 弹框限高自滚（margin:auto 短时仍居中，长时可滚，不丢顶部）
 *   2) 关闭按钮 / 登录·注册·修改密码 tab 改 sticky 常驻可见
 *   3) 移动端品牌栏瘦身：隐藏装饰块（eyebrow/媒体/要点/页脚），保留
 *      「价值主张 + 今日精选（真实数据）+ 合规标注 + 7 天试用」
 * ========================================================================== */

/* 通用兜底：任何视口下弹框高于视口都能滚到顶部（桌面矮屏同样受益） */
html body .auth-modal-overlay {
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html body .auth-modal.auth-split {
  margin: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  html body .auth-modal-overlay { padding: 12px; }

  html body .auth-modal.auth-split {
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  /* 关闭按钮：absolute → sticky，随滚动常驻右上角（移动端唯一关闭入口） */
  html body .auth-modal .auth-modal-close {
    position: sticky;
    top: 8px;
    right: auto;
    left: auto;
    align-self: flex-end;
    margin: 8px 8px -44px auto;
    flex-shrink: 0;
    z-index: 9;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
  }

  /* 登录 / 注册 / 修改密码 tab 常驻顶部，滚动中随时可切 */
  html body .auth-modal .auth-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    background: var(--surface-deep, #0e1420);
    padding: 46px 0 10px;
    margin-bottom: 12px;
  }

  html body .auth-modal.auth-split .auth-panel {
    order: 1;
    width: 100%;
    padding: 4px 20px 20px;
    overflow: visible;
  }

  html body .auth-modal.auth-split .auth-brand {
    order: 2;
    width: 100%;
    padding: 16px 20px 26px !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(120, 170, 255, 0.12) !important;
  }

  /* 瘦身：只去掉装饰与已在表单内重复出现的文案 */
  html body .auth-brand .lxap-eyebrow,
  html body .auth-brand .lxap-media,
  html body .auth-brand .lxap-line,
  html body .auth-brand .lxap-foot {
    display: none !important;
  }
  html body .auth-brand .lxap-title { font-size: 19px !important; }
  html body .auth-brand .lxap-stats { gap: 8px !important; }
  html body .auth-brand .lxap-stat { min-width: 84px !important; padding: 8px 10px !important; }
  html body .auth-brand .lxap-stat b { font-size: 16px !important; }

  html body .auth-panel .auth-modal-title { font-size: 20px; }
}

/* =============================================================================
 * v1350 · 横屏 / 矮视口（max-height: 520px）补 sticky
 * -----------------------------------------------------------------------------
 * 实测：844x390 / 780x360 横屏下弹窗需滚动，滚到底后
 *   关闭按钮 × 与「登录·注册」tab 的 y = -165 / -203 → 视口外不可达，
 *   用户关不掉弹窗、切不了注册。
 * 根因：上面 v1334 的 sticky 只在 `@media (max-width: 760px)` 生效；
 *   横屏是「矮宽」（宽 844 > 760），宽度条件不命中 → 必须按高度补一条。
 * ========================================================================== */
/* v1362 · 横屏 / 矮视口（max-height: 520px）根治
 * -----------------------------------------------------------------------------
 * v1350 失效：横屏宽 844 > 760 → 不是 column 而是 .auth-split 的 row 双栏，
 *   sticky + align-self:flex-end 在 row 下 = 垂直底部对齐 → 关闭键 y=389（视口外）。
 * v1362 失效：`html body .auth-modal{overflow:hidden}` 特异性 (0,1,2) 被
 *   `html body .auth-modal.auth-split{overflow-y:auto}` (0,2,2) 压过 → modal 仍可滚，
 *   出现 modal + panel 双滚动容器，滚 modal 时 tabs 随整块移出视口（y=-114）。
 * v1362：modal 禁止滚动（!important 压过 split）+ 关闭键 absolute 定右上
 *   + panel 作为唯一滚动容器 + tabs sticky 粘 panel 顶。
 * ========================================================================== */
@media (max-height: 520px) {
  html body .auth-modal {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  /* 1) 弹窗本体不滚 —— 必须用 !important 压住 v1334 的 .auth-split{overflow-y:auto} */
  html body .auth-modal.auth-split,
  html body .auth-modal {
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  /* 2) 关闭键：row 双栏下 sticky+align-self:flex-end 会掉到底部 → 改 absolute 定右上 */
  html body .auth-modal .auth-modal-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    margin: 0 !important;
    align-self: auto !important;
    flex-shrink: 0 !important;
    z-index: 30 !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
  }

  /* 3) 唯一滚动容器 = 右栏表单；flex 子项可滚必须 min-height: 0 */
  html body .auth-modal .auth-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
  }

  /* 4) tabs 粘在滚动容器（panel）顶部；close 已绝对定位，不再需要 46px 让位 */
  html body .auth-modal .auth-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    background: var(--surface-deep, #0e1420) !important;
    padding: 10px 46px 10px 0 !important;
    margin-bottom: 12px !important;
  }

  /* 5) 品牌栏在矮视口必须隐藏 —— 实测（736x414 / 667x375 / 568x320 column 路径）：
     .auth-brand 高 397px 吃掉几乎全部弹窗高度，把 .auth-panel 压到 **24px**，
     表单区几乎不可见 = 功能不可用（不是观感问题）。隐藏后 panel 独占 390px 且可滚。
     row 双栏（844x390）同理：隐藏左侧 314px 品牌栏，表单独占 796px。
     高度 > 520 的桌面/竖屏不受影响，品牌栏照常展示。 */
  html body .auth-modal.auth-split .auth-brand {
    display: none !important;
  }
  html body .auth-modal.auth-split .auth-panel {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }
}