/* ============================================================
 * mobile.css v2 — V1 公网内测手机端真适配
 *
 * v1 反馈：顶部状态条挤压 / 步骤条重叠 / 主内容仍并排 / fx888 暴露
 * v2 修复：
 *   1. 真正隐藏 status-indicators（只保留"我的"按钮）
 *   2. stepper 每步 min-width 110px / 真横滚
 *   3. 主内容 flex 容器强制 column / 卡片 100% 宽
 *   4. 管理员提示只在 .admin-page 出现
 *   5. 手机端 user-tag 用 ::after 显示「我的」隐藏 fx888/开发者文本
 * ============================================================ */

/* ============================================================
 * 全局兜底（≤768px）
 * ============================================================ */
@media (max-width: 768px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    input, select, textarea {
        font-size: 16px !important;  /* 防 iOS 自动放大 */
    }
}

/* ============================================================
 * 登录页 index.html（≤768px）
 * ============================================================ */
@media (max-width: 768px) {
    /* sledgehammer specificity 防桌面 width:440px 覆盖 */
    body .login-box,
    body div.login-box,
    html body .login-box {
        width: calc(100vw - 24px) !important;
        max-width: 380px !important;
        padding: 24px 16px !important;
        margin: 16px auto !important;
        box-sizing: border-box !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .brand-title { font-size: 22px !important; }
    .brand-subtitle { font-size: 12px !important; }
    .brand-version { font-size: 11px !important; }
    .tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
    }
    .tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 10px 6px !important;
        font-size: 13px !important;
        text-align: center !important;
    }
    .field { margin-bottom: 12px !important; }
    .field-label { font-size: 13px !important; }
    .field-input {
        width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }
    .login-box .btn-primary {
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
        margin-top: 6px !important;
    }
    .footer-status { font-size: 11px !important; padding: 8px !important; }
    #particles { opacity: 0.25 !important; }
}

/* ============================================================
 * 主应用 app.html（≤768px）
 * ============================================================ */
@media (max-width: 768px) {
    /* === 容器：竖向布局 === */
    .app-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        padding: 8px !important;
        gap: 8px !important;
    }

    /* === 侧边栏 → 顶部横向滚动条 === */
    .sidebar,
    .sidebar:hover {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        padding: 6px 8px !important;
        border-radius: 12px !important;
        gap: 6px !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .nav-group {
        flex-shrink: 0 !important;
        display: flex !important;
        gap: 4px !important;
        align-items: center !important;
    }
    .nav-group .nav-subitem { display: none !important; }
    .nav-group.expanded .nav-subitem {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .nav-item,
    .sidebar:hover .nav-item {
        width: auto !important;
        height: auto !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .nav-item span,
    .sidebar:hover .nav-item span {
        display: inline !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .nav-group-arrow { display: none !important; }
    .nav-subitem.active {
        background: linear-gradient(135deg, rgba(167,139,250,0.3), rgba(96,165,250,0.3)) !important;
    }

    /* === 主内容区 === */
    .main-content,
    .main-stage {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    /* === 顶部状态条：真正隐藏多余标签，仅保留"我的"按钮 === */
    .top-bar-container {
        padding: 0 !important;
    }
    header.top-bar,
    .top-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 6px !important;
        gap: 6px !important;
    }
    .brand {
        font-size: 13px !important;
        font-weight: 600 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .status-indicators {
        flex: 0 0 auto !important;
        gap: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* === [v3 主修复] HTML marker class 直接命中（最高优先级 / 绕过 :has 不稳）=== */
    /* 隐藏标记 indicator：全自动模式 / 引擎在线 / 开通会员 / 引导 / 真实样本评测 */
    .indicator.mobile-hide-on-phone,
    div.indicator.mobile-hide-on-phone,
    .status-indicators .indicator.mobile-hide-on-phone {
        display: none !important;
        visibility: hidden !important;
    }
    /* 直接 ID 兜底：即使 marker class 没生效也强制隐藏关键元素 */
    #mode-tag,
    #membership-badge,
    #eval-center-topbar-entry {
        display: none !important;
    }
    /* 隐藏「引擎在线」中的 dot（无 id，靠它独有的样式标记）*/
    header .indicator .dot {
        display: none !important;
    }

    /* === 兜底：无 marker class 也按 :last-child 兜底（旧 HTML 兼容）=== */
    .status-indicators .indicator:not(.mobile-user-menu):not(:last-child) {
        display: none !important;
    }

    /* === 仅保留 user-tag 容器 === */
    .indicator.mobile-user-menu,
    .status-indicators .indicator.mobile-user-menu {
        display: inline-flex !important;
        visibility: visible !important;
    }

    /* === user-tag 文字部分隐藏（fx888 / 开发者），保留 icon 并改文「我的」=== */
    .mobile-user-menu #user-tag,
    #user-tag,
    span#user-tag.user-tag {
        font-size: 0 !important;          /* 隐藏所有文本节点（包括 JS 注入的 fx888 · 开发者）*/
        padding: 8px 10px !important;
        gap: 4px !important;
        line-height: 1 !important;
    }
    #user-tag i,
    .mobile-user-menu #user-tag i {
        font-size: 16px !important;       /* icon 恢复 */
    }
    #user-tag::after,
    .mobile-user-menu #user-tag::after {
        content: '我的' !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        margin-left: 4px !important;
        color: #e6e6e6 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* === 步骤条：真横滚 + 每步 min-width 110px === */
    .step-bar-container {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 0 4px !important;
        align-items: stretch !important;
    }
    .stepper {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
        padding: 6px 2px 10px !important;
    }
    .stepper .step {
        flex: 0 0 110px !important;
        min-width: 110px !important;
        max-width: 140px !important;
        font-size: 12px !important;
        padding: 8px 6px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .step-action-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* === page 切换：手机端展平 === */
    .page {
        position: relative !important;
        height: auto !important;
        padding-bottom: 80px !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: all !important;
        gap: 10px !important;
        display: none !important;
    }
    .page.active {
        display: flex !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    /* === 主内容卡片：强制单列 === */
    .page > div[style*="display: flex"],
    .page > div[style*="display:flex"],
    .card[style*="display: flex"],
    .card[style*="display:flex"] {
        flex-direction: column !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .page > .card,
    .card,
    .card[style*="flex: 1"],
    .card[style*="flex: 2"],
    .card[style*="flex:1"],
    .card[style*="flex:2"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .card {
        padding: 12px !important;
        margin-bottom: 6px !important;
        border-radius: 10px !important;
    }

    /* === 上传区 === */
    .dropzone {
        padding: 24px 16px !important;
        min-height: 140px !important;
    }
    #btn-start-parse,
    #btn-manual-parse {
        display: block !important;
        width: 100% !important;
        margin: 12px 0 !important;
        padding: 14px !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
    }

    /* === 通用按钮 === */
    .btn-primary {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }
    .page button[onclick*="download"],
    .page button[onclick*="generate"],
    .page button[onclick*="export"],
    .page button[onclick*="upload"] {
        display: block !important;
        width: 100% !important;
        margin: 6px 0 !important;
        min-height: 40px !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* === 表格：横向滚动 === */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        font-size: 12px !important;
    }
    table th, table td {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    .data-table {
        display: block !important;
        overflow-x: auto !important;
    }

    /* === 缩略图列表 === */
    .key-page-list {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .key-page-card {
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
        font-size: 11px !important;
    }

    /* === 进度卡片：竖向 === */
    #progress-card .stat-row,
    #progress-card .progress-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    /* === 装饰降低 === */
    #particles { opacity: 0.2 !important; }
    .tour-tooltip { max-width: 90vw !important; }

    /* === 高级管理面板：在主页面提示用电脑（不是顶部 admin 提示）=== */
    #v325-validation-panel,
    #v324b-promotion-panel,
    #v324-admin-panel,
    #dev-card,
    #v339-eval-center-entry {
        opacity: 0.55 !important;
    }
    #v325-validation-panel::before,
    #v324b-promotion-panel::before,
    #v324-admin-panel::before,
    #dev-card::before {
        content: '⚠️ 此功能建议在电脑端使用';
        display: block;
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        padding: 6px 10px;
        border-radius: 6px;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 500;
    }
}

/* ============================================================
 * 极窄屏（≤390px / iPhone SE / 12 mini / 13 mini）
 * ============================================================ */
@media (max-width: 390px) {
    .login-box { padding: 20px 16px !important; }
    .brand-title { font-size: 20px !important; }
    .brand { font-size: 12px !important; }
    .stepper .step {
        flex: 0 0 100px !important;
        min-width: 100px !important;
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
    .nav-item span,
    .sidebar:hover .nav-item span { font-size: 11px !important; }
    .card { padding: 10px !important; }
    table { font-size: 11px !important; }
    #user-tag::after {
        content: '我的';
        font-size: 11px !important;
    }
}

/* ============================================================
 * 管理员体检中心 admin/eval_center.html（仅 .admin-page）
 *   提示文字只在管理员页面，不污染主应用
 * ============================================================ */
@media (max-width: 768px) {
    body.admin-page { padding: 12px !important; }
    body.admin-page .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    body.admin-page .card { padding: 12px !important; }
    body.admin-page .card h2 { font-size: 14px !important; }
    body.admin-page header h1 { font-size: 18px !important; }
    body.admin-page header::after {
        content: '⚠️ 管理员体检中心建议在电脑上使用';
        display: block;
        margin-top: 10px;
        padding: 10px 12px;
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
    }
}