/* ===== 移动端弹框加固层（最后加载，只覆盖 <=768px，桌面端观感零变化）=====
 *
 * 背景：弹窗外壳与内容叠了 6 层 CSS（index.css / index-modals.css / index-ui-v2 /
 * index-ui-v3 / index-modals-v2 / index-ui-v4），mask 与弹窗本体上还压着大面积
 * backdrop-filter: blur(18~20px) saturate(...)。这套东西在移动端 WebView
 * （微信/手机浏览器）里有三个确凿问题：
 *   1) 滚动时 backdrop-filter 会重采样整个背景，表现为「矩形色块遮挡内容 / 闪动」，
 *      极端情况下整块内容不绘制 —— 就是「充值弹窗看不见充值内容」；
 *   2) 弹窗高度用 vh，移动端地址栏一收一放会超出可视区，底部内容/支付按钮看不到；
 *   3) 滚动链没断，弹窗内滑动会带着背景页面一起动，视觉上就是「抖 + 闪」。
 *
 * 这里在移动端统一：去毛玻璃（改不透明底色）→ dvh 高度 → flex 滚动容器
 * （min-height:0 + overscroll-behavior:contain）→ 装饰层禁止遮挡/吃点击。
 * 另外把两个窄屏会互相压叠的网格（五档套餐、活动价格示例）收成单列。
 */

/* ---------- 窄屏：单列，避免元素互相压叠 ---------- */
@media (max-width: 560px) {
  /* 五档套餐：卡片只有 ~160px 时，原价/活动价/立减/单价/立省 会互相压叠 */
  .points-grid { grid-template-columns: 1fr !important; gap: 8px; }
  /* 活动价格示例：145px 网格列里 nowrap 文案会溢出压到隔壁色块 */
  .promo-price-examples { grid-template-columns: 1fr !important; }
  .promo-price-examples span { justify-content: flex-start; }
}

/* ---------- 移动端弹窗：去毛玻璃 + 正确滚动结构 ---------- */
@media (max-width: 768px) {
  /* 1) 去掉移动端的 backdrop-filter（遮挡/闪动/不绘制的根因） */
  .modal-mask,
  .announce-mask,
  .modal,
  .announce-box,
  .welcome-box,
  .modal-head,
  .announce-head,
  .announce-footer,
  .points-head,
  .api-console,
  .modal-body,
  .announce-body {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* 不透明底色替代毛玻璃，保证背后内容不可见、观感一致 */
  .modal-mask { background: rgba(2, 6, 23, .74); }
  html[data-theme="light"] .modal-mask { background: rgba(15, 23, 42, .54); }
  .announce-mask { background: rgba(2, 6, 23, .74); }
  html[data-theme="light"] .announce-mask { background: rgba(15, 23, 42, .54); }
  .modal, .announce-box { background: var(--surface-solid); }

  /* 2) 高度用 dvh：96vh / 88vh 在移动端会超出可视区，底部内容与按钮被吃 */
  .modal,
  .modal.modal-points,
  .modal.modal-api-logs,
  .modal.modal-profile,
  .announce-box {
    max-height: calc(100dvh - 16px) !important;
  }

  /* 3) 滚动容器：flex 子项必须 min-height:0 才能滚；contain 断掉滚动链 */
  .modal-body,
  .announce-body {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* 4) 装饰层一律退到内容之下、不吃点击，避免「动不动有遮挡」 */
  .points-head-glow,
  .profile-glow,
  .ac-hero-glow,
  .wm-head-orb,
  .wm-head-sheen,
  .points-head::after,
  .profile-hero::after,
  .announce-head::before,
  .announce-head::after {
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .points-head-copy,
  .points-head .points-balance,
  .profile-head,
  .ac-hero-main,
  .ac-hero-side {
    position: relative;
    z-index: 1;
  }

  /* 5) 弹窗内禁止横向溢出 */
  .modal, .announce-box { overflow-x: hidden; }

  /* 6) 价格行允许换行：角标宁可掉到下一行，也不要被挤出卡片 */
  .pc-pricing { flex-wrap: wrap; row-gap: 6px; }
  .pc-price-wrap { flex-wrap: wrap; }
}