/**
 * 手机端样式（≤767px）：对齐小程序视觉规范（按 index.wxss 逐值换算）
 * 仅布局/样式，不影响功能；PC 端不受任何影响。
 * 换算基准：750rpx = 视口宽（375px ≈ 2rpx:1px）
 */
@media (max-width: 767px) {

    /* ===== 页面容器（小程序 .page：padding 24rpx 24rpx 60rpx） ===== */
    body > div.max-w-4xl {
        max-width: 100% !important;
        padding: 12px 12px 30px !important;
    }

    /* ===== 标题（小程序 .header/.title/.subtitle） ===== */
    header.text-center.mb-10 {
        margin-bottom: 0 !important;
        padding: 12px 0 16px !important;
    }
    header.text-center.mb-10 h1 {
        font-size: 26px !important;              /* 52rpx */
        letter-spacing: 6px;                     /* 12rpx */
        color: #7f1d1d;
    }
    header.text-center.mb-10 p {
        font-size: 12px;                         /* 24rpx */
        color: #78716c;
        margin-top: 4px;
    }

    /* 左上角导航按钮 */
    #nav-toggle { width: 36px !important; height: 36px !important; font-size: 16px !important; }

    /* ===== 主面板：小程序是一整张大卡片（.card），section 间分隔线 ===== */
    main.bg-white.rounded-2xl {
        background: #fff !important;
        border-radius: 12px !important;          /* 24rpx */
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
        border: none !important;
        overflow: hidden !important;
    }
    /* 撤销分块卡片化：还原为卡内 section + 底部分隔线 */
    main > section,
    main > div {
        background: transparent !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid #e7e5e4 !important;   /* 小程序 .section */
        border-radius: 0 !important;
        overflow: visible !important;
    }
    main > section:last-child, main > div:last-child { border-bottom: none !important; }

    /* 区块内边距（小程序 .section padding 28rpx 32rpx） */
    main > section.p-6, main > section.p-8 { padding: 14px 16px !important; }
    main > section.p-6.bg-stone-50 { background: #fff !important; }

    /* 输入区 */
    main > section label { font-size: 12px; }                       /* 24rpx */
    main > section input, main > section select {
        font-size: 14px; padding: 10px 12px !important;             /* 20rpx 24rpx */
        border-radius: 6px !important;
    }

    /* 快捷胶囊（小程序 .chip） */
    .quick-chip {
        font-size: 12px !important;
        padding: 3px 10px !important;
        border-radius: 999px !important;
    }

    /* 状态胶囊（小程序 .status） */
    #cast-status {
        background: #fef2f2 !important;
        color: #991b1b !important;
        font-size: 12px !important;
        padding: 4px 14px !important;
    }

    /* 铜钱（小程序 110rpx ≈ 55px） */
    :root { --coin-size: 55px; }
    .coins-container { gap: 14px; }
    .coin-hint { font-size: 11px; color: #a8a29e; }

    /* 已摇记录：小程序为居纵列（第6次在上） */
    .cast-results {
        flex-direction: column !important;
        align-items: center;
        min-width: 0 !important;
        width: auto;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        gap: 5px;
    }
    .cast-tag {
        background: #fafaf9 !important;
        border: 1px solid #e7e5e4 !important;
        border-radius: 4px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        gap: 8px;
    }

    /* 提示与按钮 */
    .tip, main > section > p.text-stone-500 { font-size: 11px !important; }
    #btn-reset {
        display: inline-block !important;
        width: auto !important;
        padding: 5px 20px !important;                                /* 10rpx 40rpx */
        font-size: 13px !important;
        border-radius: 6px !important;
    }
    #btn-manual-submit { width: 100% !important; padding: 6px 0 !important; font-size: 14px !important; background: #7f1d1d !important; }
    #manual-area .manual-opt { padding: 4px 0 !important; font-size: 12px !important; flex: 1; }

    /* 模式切换胶囊（小程序 .mode-tab：两个等大胶囊）；注意不能用 display 覆盖 .hidden 的权限门 */
    #mode-tabs { border: none !important; gap: 6px; }
    #mode-tabs:not(.hidden) { display: flex !important; }
    #mode-tabs button {
        flex: 1; border: 1px solid #d6d3d1 !important; border-radius: 999px !important;
        padding: 5px 0 !important; font-size: 13px !important;
    }

    /* ===== 结果区（小程序 result 页） ===== */
    #result-section {
        margin: 0 !important; border: none !important; border-radius: 0 !important;
        background: #fff !important;
    }
    /* 卦名横幅（小程序 .gua-banner） */
    #result-section > div.p-6.bg-red-900 { padding: 14px !important; background: #7f1d1d !important; }
    #gua-name { font-size: 22px !important; color: #fef3c7 !important; }     /* 44rpx */
    #gua-info { font-size: 11px !important; color: #fecaca !important; }     /* 22rpx */

    /* 区块（小程序 .block：padding 24rpx 32rpx + 分隔线） */
    #result-section .p-6, #result-section .px-6 { padding-left: 16px !important; padding-right: 16px !important; }
    #result-section .px-6.py-4 { padding-top: 12px !important; padding-bottom: 12px !important; }

    /* 区块标题（小程序 .block-title：8rpx 竖条 #991b1b） */
    #result-section h3 { font-size: 14px !important; }

    /* 起课信息表（小程序 .info-table 灰头、隔行 #fafaf9） */
    .info-summary { width: 100%; font-size: 11px; }
    .info-summary th, .info-summary td { padding: 6px 4px !important; font-size: 11px !important; }

    /* 排盘（小程序 .pan-scroll 横滑） */
    #result-section .text-center { text-align: left; }
    .gua-pan { width: 100%; max-width: 100%; border-radius: 8px; padding: 8px 10px; }
    .gua-pan-row { min-width: 600px; font-size: 12px; padding: 9px 0; }

    /* 用神（小程序 .yongshen） */
    #yong-shen { font-size: 13px; }

    /* AI 区（小程序 .btn-ai 非满宽、.ai-box 蓝边） */
    #btn-ai-jiegua {
        width: auto !important; display: inline-block !important;
        padding: 6px 16px !important; font-size: 13px !important;
        background: #0369a1 !important;
    }
    #ai-status { display: block; margin: 6px 0 0 !important; font-size: 11px; }
    #ai-content { font-size: 14px !important; line-height: 1.8; }
    .fb-btn { padding: 3px 10px !important; font-size: 12px !important; }

    /* 页脚（小程序 .footer） */
    footer { font-size: 11px !important; margin-top: 16px !important; padding-bottom: 10px; }

    /* 登录层卡片适配窄屏 */
    #ly-login-mask > div { width: calc(100% - 48px) !important; max-width: 340px; }
}

/* ===== me / records / admin 页通用手机适配 ===== */
@media (max-width: 767px) {
    body > div.max-w-2xl, body > div.max-w-5xl, body > div.max-w-4xl {
        max-width: 100% !important;
        padding: 10px !important;
    }
    .grid { gap: 8px !important; }
    section.bg-white { padding: 14px !important; }
    table { font-size: 12px; }
    h1.text-2xl, h1.text-3xl { font-size: 20px !important; }
}

/* ===== 小程序外壳：顶部导航栏 + 底部 tabBar（仅手机端） ===== */
.mp-topbar, .mp-tabbar { display: none; }
@media (max-width: 767px) {
    /* 顶部红色导航栏（对应小程序 navigationBar：#7f1d1d 白字） */
    .mp-topbar {
        display: block;
        position: sticky; top: 0; z-index: 40;
        background: #7f1d1d; color: #fff;
        text-align: center; font-size: 16px; font-weight: 600;
        padding: 10px 0;
    }
    /* 主体让出顶部空间；原网页大标题隐藏（小程序主页标题就在导航栏里） */
    header.text-center.mb-10 h1 { display: none; }
    header.text-center.mb-10 p { font-size: 12px; color: #78716c; margin-top: 8px; }
    header.text-center.mb-10 { padding: 10px 0 12px !important; }

    /* 左上角 ☰ 收到导航栏右侧（避免与标题抢位） */
    #nav-toggle { position: fixed; left: auto; right: 10px; top: 6px; z-index: 50;
        width: 30px !important; height: 30px !important; font-size: 14px !important;
        background: rgba(255,255,255,0.18) !important; box-shadow: none !important; }
    .fixed.left-4.top-4 { left: auto; }

    /* 底部 tabBar（对应小程序 tabBar：白底、上边框、图标+文字） */
    .mp-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: #fff; border-top: 1px solid #e7e5e4;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mp-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        padding: 6px 0 4px; color: #78716c; text-decoration: none;
    }
    .mp-tab img { width: 22px; height: 22px; }
    .mp-tab span { font-size: 10px; margin-top: 1px; }
    .mp-tab.active { color: #7f1d1d; }

    /* 页面底部留白给 tabBar */
    body > div.max-w-4xl { padding-bottom: 70px !important; }
    footer { margin-bottom: 0 !important; }
}