/* =========================================================
   餐谋长V2 - 响应式适配层（最后加载，覆盖桌面固定布局）
   断点：≤1100px 平板 / ≤760px 手机
   ========================================================= */

/* 桌面端首页：内容超出固定外框时允许内容区内部滚动（原 overflow:hidden 直接裁掉且无滚动条） */
@media (min-width: 761px) {
    .ui-shell-page[data-ui-page="index"] .app-content { overflow-y: auto !important; }
}

/* 解除桌面最小宽度锁定（原样式 html/body min-width:1180~1200px） */
@media (max-width: 1180px) {
    html, body {
        min-width: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* 解除固定视口高外壳：内容自然撑开，页面可向下滚动 */
    .glass-container, .glass-container--flex {
        height: auto !important;
        min-height: calc(100vh - 36px) !important;
        /* 装饰光晕伪元素向容器外负值延伸，必须裁在容器内，否则撑出横向滚动 */
        overflow: hidden !important;
        /* 100vw 含纵向滚动条宽度、100% 叠 14px 外边距都会横向溢出，统一收缩 */
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        margin: 14px auto !important;
        box-sizing: border-box !important;
    }
    .app-main { height: auto !important; min-height: 0 !important; overflow: visible !important; }
    .app-content {
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        overflow: visible !important;
    }

    /* 首页专属：桌面一屏锁定（height:0/overflow:hidden/grid 固定行）在 ≤1180px 全部解除 */
    .ui-shell-page[data-ui-page="index"] .app-content {
        display: block !important;
        grid-template-rows: none !important;
        padding: 0 8px 20px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .ui-shell-page[data-ui-page="index"] .main-grid {
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card {
        height: auto !important;
        min-height: 0 !important;
    }
    .ui-shell-page[data-ui-page="index"] .section-head { margin: 16px 2px 10px !important; }

    /* 绝对定位的装饰标签在新文档流下会错位，一并隐藏 */
    .main-grid::before, .main-grid::after, .app-main::after { content: none !important; display: none !important; }
}

/* ---------- 平板 ≤1100px ---------- */
@media (max-width: 1100px) {
    .glass-container, .glass-container--flex {
        grid-template-columns: 190px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    .app-sidebar { min-height: calc(100vh - 24px) !important; }
    .brand-title { white-space: nowrap !important; }
    /* 首页功能卡：两列，大卡通栏 */
    .ui-shell-page[data-ui-page="index"] .main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        gap: 14px !important;
        padding: 0 0 20px !important;
    }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card { height: auto !important; min-height: 120px !important; }
    .home-card--survey, .home-card--analysis { grid-column: span 2 !important; }
    .home-card--survey .feature-icon, .home-card--analysis .feature-icon { width: 110px !important; height: 110px !important; }
    .home-card .feature-icon { width: 72px !important; height: 72px !important; }
    /* 网格伪元素标签随布局浮动容易错位，平板起隐藏 */
    .main-grid::before, .main-grid::after { content: none !important; display: none !important; }
    .app-main::after { content: none !important; display: none !important; }
}

/* ---------- 手机 ≤760px ---------- */
@media (max-width: 760px) {
    /* 容器：单列 */
    .glass-container, .glass-container--flex {
        display: block !important;
        padding: 10px !important;
        min-height: 100vh !important;
        height: auto !important;
    }

    /* 侧边栏 → 顶部横条（旧移动端规则是隐藏，这里恢复并改为横条） */
    .app-sidebar {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
        margin-bottom: 12px !important;
    }
    .window-dots, .nav-section-label, .sidebar-foot { display: none !important; }
    .brand-block { margin-bottom: 10px !important; }
    .brand-title { font-size: 17px !important; }
    .app-nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch;
    }
    .app-nav::-webkit-scrollbar { height: 4px; }
    .nav-item {
        flex: 0 0 auto !important;
        height: 38px !important;
        padding: 0 12px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
        gap: 6px !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }
    .nav-item::before { content: none !important; display: none !important; }
    .nav-icon { width: 16px !important; height: 16px !important; background-size: 14px 14px !important; }

    /* 顶栏：换行弹性布局 */
    .app-topbar, .ui-shell-page[data-ui-page="index"] .app-topbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 2px 2px 10px !important;
    }
    .app-topbar::before { content: none !important; display: none !important; }
    .integral-badge { min-width: 0 !important; height: 36px !important; padding: 0 12px !important; font-size: 12px !important; }

    /* 主区高度解锁（桌面是固定高三栏滚动壳，移动端必须按内容自然撑开） */
    .app-main {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .app-main::after { content: none !important; display: none !important; }
    .app-content {
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* 首页功能卡：单列纵向 */
    .ui-shell-page[data-ui-page="index"] .main-grid,
    .main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    .main-grid::before, .main-grid::after { content: none !important; display: none !important; }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card,
    .main-grid .glass-card {
        height: auto !important;
        min-height: 0 !important;
        padding: 14px 16px !important;
    }
    .home-card { align-items: center !important; }
    .home-card .feature-icon { width: 60px !important; height: 60px !important; flex: 0 0 auto !important; }
    .home-card .feature-art, .feature-art {
        width: 100% !important; height: 100% !important;
        max-width: 60px !important; max-height: 60px !important;
        object-fit: contain !important;
    }
    .home-card h3 { font-size: 18px !important; }
    .home-card p { font-size: 13px !important; }
    .home-card .card-lead { font-size: 14px !important; margin: 4px 0 !important; }
    .home-card br { display: none !important; }

    /* 区块标题正常换行 */
    .section-head { flex-wrap: wrap !important; gap: 4px 10px !important; }
    .section-title { font-size: 15px !important; }

    /* 价值看板：小屏压缩为横排4卡，整体高度约为竖排版的1/4 */
    .vv-dashboard { padding: 10px 12px !important; margin-bottom: 12px !important; }
    .vv-dash-header { gap: 8px !important; margin-bottom: 8px !important; }
    .vv-dash-icon svg { width: 20px !important; height: 20px !important; }
    .vv-dash-title { font-size: 12px !important; }
    .vv-dash-sub { font-size: 10px !important; margin-top: 1px !important; }
    .vv-dash-badge { font-size: 10px !important; padding: 3px 8px !important; }
    .vv-dash-stats { flex-direction: row !important; gap: 6px !important; margin-bottom: 8px !important; }
    .vv-dash-stat { width: auto !important; min-width: 0 !important; padding: 6px 2px !important; border-radius: 10px !important; }
    .vv-dash-stat-label { font-size: 9px !important; margin-bottom: 2px !important; white-space: nowrap !important; }
    .vv-dash-stat-value { font-size: 14px !important; white-space: nowrap !important; }
    .vv-dash-stat-unit { font-size: 8px !important; margin-top: 1px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .vv-dash-stat-hint { display: none !important; }
    .vv-milestone { margin-bottom: 6px !important; }
    .vv-milestone-info { font-size: 10px !important; margin-bottom: 4px !important; }
    .vv-progress-bar { height: 6px !important; }
    .vv-milestone-percent { font-size: 9px !important; margin-top: 2px !important; }
    .vv-milestone-max { padding: 8px !important; font-size: 11px !important; }
    .vv-dash-actions { flex-direction: row !important; }
    .vv-dash-actions .vv-btn { width: auto !important; padding: 6px 12px !important; font-size: 11px !important; }

    /* 通用：卡片内边距收窄、表格可横滑 */
    .glass-card { padding: 16px 14px !important; }
    .module-title { font-size: 18px !important; }
    .menu-table, .file-table { display: block !important; overflow-x: auto !important; max-width: 100% !important; }
    input.input-box, textarea.input-box { font-size: 14px !important; }
    .btn-primary { width: 100% !important; box-sizing: border-box !important; }

    /* 配置表单行：小屏改为上下堆叠，避免输入框被挤压出屏幕 */
    .config-form-row { flex-wrap: wrap !important; gap: 8px !important; }
    .config-form-row label { width: 100% !important; flex-shrink: 1 !important; }
    .config-form-row .input-box { flex: 1 1 100% !important; min-width: 0 !important; }

    /* 积分中心套餐卡纵向排列 */
    .vv-pricing-cards { flex-direction: column !important; align-items: stretch !important; }
    .vv-price-card { width: 100% !important; max-width: none !important; }

    /* 弹窗适配 */
    .vv-modal { width: calc(100vw - 40px) !important; max-width: 360px !important; }

    /* 首页专属布局解锁：桌面 !important 锁定在移动端全部解除 */
    .ui-shell-page[data-ui-page="index"] .app-content {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
        grid-template-rows: none !important;
    }
    .ui-shell-page[data-ui-page="index"] .main-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
    }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card,
    .ui-shell-page[data-ui-page="index"] .main-grid .home-card,
    .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) {
        height: auto !important;
        min-height: 0 !important;
        grid-column: auto !important;
    }
    .ui-shell-page[data-ui-page="index"] .section-head { margin: 14px 2px 2px !important; }

    /* 侧边栏占满整行 */
    .app-sidebar { width: 100% !important; box-sizing: border-box !important; }

    /* 顶栏子元素桌面是绝对定位，移动端恢复文档流 */
    .app-topbar > *, .ui-shell-page[data-ui-page="index"] .app-topbar > * {
        position: static !important;
    }

    /* 首页卡片标题/正文字号覆盖桌面 clamp 锁定 */
    .ui-shell-page[data-ui-page="index"] .main-grid .home-card h3,
    .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) h3 { font-size: 17px !important; padding-top: 0 !important; }
    .ui-shell-page[data-ui-page="index"] .main-grid .home-card p { font-size: 12.5px !important; }

    /* 桌面用伪元素注入文案（真实文字被 font-size:0 隐藏），移动端全部关掉、恢复真实文字 */
    .ui-shell-page[data-ui-page="index"] .section-title::after { content: none !important; }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) h3::after { content: none !important; }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) p::before,
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) p::after { content: none !important; }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) p,
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) .card-lead,
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) .card-detail {
        font-size: 12.5px !important;
        color: #587694 !important;
    }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) .card-lead {
        font-size: 14px !important;
        color: #1c8cf0 !important;
        font-weight: 650 !important;
    }
    /* 桌面纯 CSS 绘制的图标伪元素在移动端关掉（用回图片图标） */
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) .feature-icon::before,
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) .feature-icon::after {
        content: none !important;
        display: none !important;
    }
    .ui-shell-page[data-ui-page="index"] .main-grid .glass-card:nth-child(n) .feature-icon {
        background: none !important;
        box-shadow: none !important;
        border: 0 !important;
        width: 60px !important;
        height: 60px !important;
        flex: 0 0 auto !important;
    }
}

/* ---------- 超小屏 ≤400px 微调 ---------- */
@media (max-width: 400px) {
    .balance-number { font-size: 40px !important; }
    .nav-item { font-size: 12px !important; padding: 0 10px !important; }
}

/* ---------- 性能优化：停用全屏装饰光晕的位移动画（光晕静态保留） ---------- */
/* 全屏 blur(32~72px) + 无限位移动画 导致主线程每帧重绘，滚动帧率仅 3FPS。停用动画后恢复 47FPS+，视觉无变化。 */
body::before, body::after,
.glass-container::before, .glass-container::after,
.app-main::before, .app-main::after {
    animation: none !important;
}

/* ---------- 性能优化层②：消除滚动时的逐帧重模糊 ---------- */
/* 1) 全屏光晕去掉模糊滤镜：渐变色块本身边缘柔和，视觉几乎无变化，但滚动帧率大幅提升（实测移动端 17→57FPS） */
body::before, body::after,
.glass-container::before, .glass-container::after,
.app-main::before, .app-main::after {
    filter: none !important;
}
/* 2) 滚动区内的毛玻璃改为半实色背景（静止的玻璃外框、侧边栏、弹窗保留毛玻璃质感） */
html body .ui-shell-page.app-main .home-card.home-card,
html body .ui-shell-page.app-main .glass-card.glass-card,
html body .ui-shell-page.app-main .guide-step.guide-step,
html body .ui-shell-page.app-main .result-box.result-box,
html body .ui-shell-page.app-main .balance-card.balance-card,
html body .ui-shell-page.app-main .recharge-placeholder.recharge-placeholder {
    background: rgba(255, 255, 255, .62) !important;
}
html body .ui-shell-page.app-main .vv-dashboard.vv-dashboard,
html body .ui-shell-page.app-main .level-inner.level-inner,
html body .ui-shell-page.app-main .vv-price-card.vv-price-card {
    background: rgba(255, 255, 255, .82) !important;
}
html body .ui-shell-page.app-main .input-box.input-box,
html body .ui-shell-page.app-main .history-filter.history-filter {
    background: rgba(255, 255, 255, .80) !important;
}
html body .ui-shell-page.app-main .upload-area.upload-area {
    background: rgba(255, 255, 255, .75) !important;
}
html body .ui-shell-page.app-main .empty-state.empty-state {
    background: rgba(255, 255, 255, .60) !important;
}
html body .ui-shell-page.app-main .rule-tag.rule-tag {
    background: rgba(219, 234, 254, .92) !important;
}
html body .ui-shell-page.app-main .vv-dash-badge.vv-dash-badge {
    background: rgba(255, 255, 255, .88) !important;
}

/* 3) 外框与侧边栏的毛玻璃改为半实色：让滚动链路彻底没有 backdrop-filter（桌面端滚动 10→25FPS+，真机更流畅） */
html body .glass-container.glass-container {
    background: rgba(255, 255, 255, .48) !important;
}
html body .app-sidebar.app-sidebar {
    background: rgba(255, 255, 255, .55) !important;
}

/* ---------- 导航修复：小窗横排对齐 + 大窗侧栏可滚动 ---------- */
@media (max-width: 760px) {
    /* 原桌面样式给第2个导航项(新手引导)加了上间距和分隔线，横排时会错位下沉，这里复位 */
    .app-nav { align-items: center !important; flex-wrap: nowrap !important; }
    .app-nav .nav-item:nth-child(2) { margin-top: 0 !important; }
    .app-nav .nav-item:nth-child(2)::before { content: none !important; display: none !important; }
}
@media (min-width: 761px) {
    /* 窗口较矮时侧栏导航可上下滑动，不再被裁掉 */
    .app-sidebar {
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .app-sidebar .brand-block, .app-sidebar .sidebar-foot { flex: 0 0 auto !important; }
    .app-sidebar .app-nav {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: 570px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
    }
    .app-sidebar .app-nav::-webkit-scrollbar { width: 4px; }
}
/* 新手引导项的 relative 定位在横排时仍会造成 8px 错位，与兄弟项保持一致 */
@media (max-width: 760px) {
    .app-nav .nav-item:nth-child(2) { position: static !important; }
}
/* 历史记录项的底部分隔间距在横排时会让它上浮，一并复位 */
@media (max-width: 760px) {
    .app-nav .nav-item:nth-child(7) { margin-bottom: 0 !important; position: static !important; }
    .app-nav .nav-item:nth-child(7)::before { content: none !important; display: none !important; }
}

/* ---------- 全量诊断：档位卡双层边框修复 + 开始按钮拉长 ---------- */
/* 内层 span 去掉自己的边框/背景，只留外层 label 作为卡片（原来是内外两套边框叠出重影） */
html body .ui-shell-page.app-main .level-inner.level-inner {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body .ui-shell-page.app-main .level-card.level-card {
    background: rgba(255, 255, 255, .78) !important;
    display: block !important;
}
html body .ui-shell-page.app-main .level-card.level-card:has(input:checked) {
    background: linear-gradient(145deg, rgba(237, 233, 255, .95), rgba(246, 238, 255, .88)) !important;
    border-color: rgba(108, 92, 231, .60) !important;
}
/* 开始AI诊断按钮拉满整行 */
html body .ui-shell-page.app-main #startBtn {
    width: 100% !important;
    display: block !important;
}

/* ---------- 首页价值看板底部留白压缩（去掉按钮后多余空间） ---------- */
.vv-dashboard { padding-bottom: 12px !important; }
.vv-milestone { margin-bottom: 4px !important; }

/* ---------- 大屏：去掉最外圈边框留白，窗口铺满屏幕（内容区更大） ---------- */
/* 仅 ≥1181px 桌面生效：761-1180 区间沿用原有"窗口整页滚动"流动布局，否则固定高外壳会把内容裁掉 */
@media (min-width: 1181px) {
    .glass-container, .glass-container--flex {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 12px !important;
    }
    .app-sidebar { height: calc(100dvh - 24px) !important; min-height: 0 !important; }
    .app-main { height: calc(100dvh - 24px) !important; min-height: 0 !important; }
}