/**
 * 响应式适配层 V4.0 - 全站屏幕自适应
 * Updated: 2026-10-05 V4.0 - 令牌化尺寸 + 全断点自适应 + 安全区 + 溢出防护
 *
 * ⚠ 加载顺序要求：本文件必须是 <head> 中最后一个 stylesheet
 *   （已在全部 40 个模板中统一调整，确保能覆盖页面级 CSS）
 */

/* ============================================
   0. 自适应尺寸令牌（Adaptive Tokens）
   所有关键尺寸统一由令牌驱动，断点内只改令牌值
   ============================================ */
:root {
    /* 刘海屏 / 圆角屏安全区（配合 viewport-fit=cover） */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* 关键尺寸令牌 */
    --header-h: 56px;      /* 固定头部高度 */
    --footer-h: 68px;      /* 底部导航占位高度 */
    --gutter: 16px;        /* 页面左右留白 */
    --card-pad: 16px;      /* 卡片内边距 */

    /* 派生令牌：含安全区 */
    --header-h-total: calc(var(--header-h) + var(--safe-top));
    --footer-h-total: calc(var(--footer-h) + var(--safe-bottom));
}

/* ============================================
   1. 全局溢出防护（任何屏幕都不出现横向滚动）
   ============================================ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, canvas, iframe, svg, embed {
    max-width: 100%;
}

img, video {
    height: auto;
}

/* 代码块 / 公告内容：允许换行 + 自身横向滚动，不撑破页面 */
pre, code {
    white-space: pre-wrap !important;
    word-break: break-word;
    overflow-x: auto;
}

/* Flex/Grid 子项最小宽度归零：长内容不再撑破容器 */
[class*="col-"], .col, .col-auto, .row > *,
.card, .card-body, .card-footer, .card-header,
.list-group-item, .media-body {
    min-width: 0;
}

/* 长文本 / 长数字 / 长地址自动换行 */
body, .wrapper, .container, .card, .card-body, .card-footer,
.list-group-item, .btn, .form-control, .modal-body,
h1, h2, h3, h4, h5, h6, p, span, td, th, label {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ============================================
   2. 固定头部 / 底部导航：高度令牌化 + 安全区
   ============================================ */
.header,
.homepage .header,
.order-page .header,
.auth-page .header,
.my-page .header {
    height: auto;
    min-height: var(--header-h-total);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-bottom: 10px;
    padding-top: calc(10px + var(--safe-top));
    box-sizing: border-box;
}

/* 内容区顶部让位：由令牌统一驱动，替换各页面散落的硬编码 56/60px */
.wrapper {
    padding-top: var(--header-h-total) !important;
    padding-bottom: var(--footer-h-total);
    padding-left: 0;
    padding-right: 0;
}

/* ⚠ 这里【不要】列 .order-page。
   订单页在页面级 CSS 里用 .wrapper.order-page 自定义了让位距离
   （= header 真实高度 + 12px 呼吸位），本文件在页面 CSS 之后加载，
   同特异性 + 同 !important 会把页面规则压掉。
   另注：.wrapper 与页面类（auth/home/my/order）写在同一个 div 上，
   所以「.xxx-page .wrapper」这类后代选择器是匹配不到的，要写复合选择器 .wrapper.xxx-page。 */
.auth-page .wrapper,
.homepage .wrapper,
.my-page .wrapper {
    padding-top: var(--header-h-total) !important;
}

/* 登录/注册页无底部导航，不需要底部让位 */
.auth-page .wrapper {
    padding-bottom: 0 !important;
}

/* ⚠ 不要再给 container 垫一层 header 高度。
   .wrapper 自己已经 padding-top: var(--header-h-total) 让过位了，
   而 .header 是 position:fixed、container 处于正常文档流且起点就在 header 下方，
   两者相加等于让位两次——实测 375px 下 header 底到内容顶会出现约 57px 空档。
   页面级 CSS 里若有同名覆盖，也一并压掉（order / deposit 两页原有 padding-top:60px）。 */
.order-page > .header + div.container,
.deposit-page > .header + div.container {
    padding-top: 0 !important;
}

/* 底部导航：补齐 iPhone 底部安全区 */
.footer,
.homepage .footer-nav {
    padding-bottom: calc(8px + var(--safe-bottom));
}

/* 现代浏览器使用动态视口高度，避免移动端地址栏导致的 100vh 跳动 */
@supports (min-height: 100dvh) {
    .wrapper,
    .auth-page .wrapper {
        min-height: 100dvh;
    }
}

/* ============================================
   3. 流体排版（Fluid Typography）
   字号随视口线性缩放，并锁定上下限，保证可读性与不溢出
   ============================================ */
/* 说明：组件级样式（如 .stat-card h5）特异性更高，不受此处影响；
   此规则只兜底未被组件样式覆盖的裸标题 */
h1 { font-size: clamp(22px, 7.0vw, 32px); }
h2 { font-size: clamp(20px, 6.2vw, 28px); }
h3 { font-size: clamp(18px, 5.6vw, 26px); }
h4 { font-size: clamp(16px, 5.0vw, 22px); }
h5 { font-size: clamp(15px, 4.6vw, 20px); }
h6 { font-size: clamp(14px, 4.2vw, 17px); }

/* ============================================
   4. 关键组件流体尺寸
   ============================================ */
/* Banner：宽屏不失控，窄屏不挤压 */
.homepage .home-banner-img,
.home-banner-img {
    width: 100%;
    max-height: clamp(130px, 40vw, 260px);
    object-fit: cover;
    display: block;
}

/* 余额主数字 */
.balance-amount,
.homepage .balance-card h3 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.15;
}

/* 订单卡片 */
.order-card h3 { font-size: clamp(17px, 4.6vw, 22px); }
.order-card .row.text-center h3 { font-size: clamp(18px, 5vw, 24px); }

/* 首页代理榜固定高度改为弹性 */
.homepage .agent-box {
    height: clamp(200px, 58vw, 260px);
}

/* 卡片内边距令牌化 */
.card-body { padding: var(--card-pad); }
.homepage .card-body { padding: var(--card-pad); }

/* 页面左右留白令牌化 */
.container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* ============================================
   5. 触摸目标优化（移动端最小 44px）
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .btn-link,
    .nav-item,
    .btn-link-default {
        min-height: 44px;
    }

    a.btn-link {
        padding: 12px;
    }

    /* 去掉移动端 hover 位移，避免点击后元素错位 */
    .card:hover,
    .homepage .card:hover,
    .homepage .stat-card:hover,
    .homepage .info-icon-card:hover,
    .order-card:hover {
        transform: none;
    }
}

/* ============================================
   6. 小屏手机：≤575.98px
   ============================================ */
@media (max-width: 575.98px) {
    :root {
        --gutter: 14px;
        --card-pad: 14px;
        --header-h: 56px;
        --footer-h: 66px;
    }

    .card-body,
    .homepage .card-body {
        padding: var(--card-pad);
    }

    /* 按钮块级全宽 */
    .btn-block {
        width: 100%;
    }

    /* 首页图标卡片紧凑 */
    .home-icon-card {
        padding: 8px 4px;
    }

    .home-icon-card .avatar,
    .homepage .home-icon-card .avatar {
        width: 48px !important;
        height: 48px !important;
    }

    /* 通知栏 */
    .homepage .notification {
        margin: 0 var(--gutter) 12px;
        padding: 12px;
    }

    /* 文本最多 2 行截断 */
    .text-trim {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 表单控件 ≥16px，避免 iOS 聚焦时自动放大页面 */
    input, select, textarea,
    .form-control {
        font-size: 16px !important;
    }

    /* 弹窗贴边自适应 */
    .modal-dialog {
        margin: 12px;
        max-width: calc(100% - 24px);
    }

    .modal-body {
        max-height: 65vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   7. 窄屏手机：≤400px
   ============================================ */
@media (max-width: 400px) {
    :root {
        --gutter: 10px;
        --card-pad: 10px;
        --header-h: 52px;
        --footer-h: 62px;
    }

    .header-logo {
        height: 26px;
    }

    .home-icon-card .avatar,
    .homepage .home-icon-card .avatar {
        width: 44px !important;
        height: 44px !important;
    }

    /* 底部导航文字再收一点，保证 4~5 个 tab 不换行 */
    .footer .btn-link-default p,
    .homepage .footer-nav .nav-item p {
        font-size: 9px;
    }

    .footer .btn-link-default,
    .homepage .footer-nav .nav-item {
        padding-left: 2px;
        padding-right: 2px;
    }
}

/* ============================================
   8. 超小屏：≤360px（iPhone SE / 老安卓）
   ============================================ */
@media (max-width: 360px) {
    :root {
        --gutter: 8px;
        --card-pad: 10px;
        --header-h: 50px;
        --footer-h: 58px;
    }

    .footer .btn-link-default i,
    .homepage .footer-nav .nav-item i {
        font-size: 21px;
    }

    .balance-amount,
    .homepage .balance-card h3 {
        font-size: 22px;
    }

    .btn {
        font-size: 14px;
    }

    /* 图标区 2 列时留白更紧凑 */
    .home-icon-card {
        padding: 6px 2px;
    }
}

/* ============================================
   9. 平板竖屏：576px - 767.98px
   ============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
    :root {
        --gutter: 16px;
        --card-pad: 16px;
    }

    .wrapper, .container {
        max-width: 540px;
    }

    .home-icon-card .avatar,
    .homepage .home-icon-card .avatar {
        width: 56px !important;
        height: 56px !important;
    }

    .modal-dialog {
        max-width: 520px;
        margin: 20px auto;
    }
}

/* ============================================
   10. 平板横屏 / 小桌面：768px - 991.98px
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --gutter: 20px;
        --card-pad: 20px;
        --header-h: 58px;
    }

    .wrapper, .container {
        max-width: 720px;
    }

    /* 固定头部 / 底部导航的内容与内容区同宽，避免"头宽身窄" */
    .header > .row,
    .footer > .row,
    .header .container,
    .footer .container {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .modal-dialog {
        max-width: 640px;
        margin: 28px auto;
    }
}

/* ============================================
   11. 大桌面：992px - 1199.98px
   ============================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --gutter: 24px;
        --card-pad: 20px;
        --header-h: 60px;
        --footer-h: 72px;
    }

    .wrapper, .container {
        max-width: 960px;
    }

    .header > .row,
    .footer > .row,
    .header .container,
    .footer .container {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 4 列栅格在中等宽度下保持 */
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .modal-dialog {
        max-width: 720px;
        margin: 32px auto;
    }
}

/* ============================================
   12. 超大屏幕：≥1200px
   ============================================ */
@media (min-width: 1200px) {
    :root {
        --gutter: 24px;
        --card-pad: 24px;
        --header-h: 62px;
        --footer-h: 74px;
    }

    .wrapper, .container {
        max-width: 1140px;
    }

    .header > .row,
    .footer > .row,
    .header .container,
    .footer .container {
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 居中画布：宽屏下内容居中，两侧留灰底 */
    body {
        background: #f0f2f5;
    }

    .wrapper.homepage {
        background: transparent;
    }

    .modal-dialog {
        max-width: 800px;
        margin: 40px auto;
    }
}

/* ============================================
   13. 超宽屏：≥1600px（避免内容被拉得过散）
   ============================================ */
@media (min-width: 1600px) {
    .wrapper, .container {
        max-width: 1200px;
    }

    .header > .row,
    .footer > .row,
    .header .container,
    .footer .container {
        max-width: 1200px;
    }
}

/* ============================================
   14. 横屏手机优化（矮视口）
   ============================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
    :root {
        --header-h: 44px;
        --footer-h: 52px;
    }

    .homepage {
        padding-top: var(--header-h-total) !important;
    }

    .homepage .home-banner-img,
    .home-banner-img {
        max-height: 120px;
    }

    .balance-amount,
    .homepage .balance-card h3 {
        font-size: 22px;
    }

    .footer .btn-link-default {
        min-height: 44px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .footer .btn-link-default i,
    .homepage .footer-nav .nav-item i {
        font-size: 20px;
    }
}

/* ============================================
   15. 高分辨率屏幕 (Retina)
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .home-banner-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ============================================
   16. 减少动画（系统偏好）
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   17. 容器查询（现代浏览器）：卡片自身宽度自适应
   ============================================ */
@supports (container-type: inline-size) {
    .card {
        container-type: inline-size;
        container-name: card;
    }

    @container card (max-width: 280px) {
        .card-body {
            padding: 12px;
        }

        .card h3 {
            font-size: 1.1rem;
        }
    }

    @container card (min-width: 281px) and (max-width: 400px) {
        .card-body {
            padding: 16px;
        }
    }
}

/* ============================================
   18. 打印样式
   ============================================ */
@media print {
    .header, .footer, .footer-nav, .swiper-container, .notification {
        display: none !important;
    }

    .wrapper {
        padding: 0 !important;
    }

    .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
}