/* =====================================================================
 * AIGC 平台（api.chuyu.group）手机端内容补丁  v3
 * 仅在手机宽度（≤768px）生效；>768px 不影响 PC。
 *
 * 背景：新版前端已【原生】提供手机框架（@media width<=768 已隐藏
 *   sidebar/navbar、main-content 全宽、自带底部 4 个 tab：
 *   首页 / 工作台 / 模型广场 / 我的），故本文件【不重复做】导航与主框架，
 *   只精修各页面内部的卡片网格、间距、超大面板，解决“卡片高度/排版不合理”。
 *
 * 原则：
 *   1. 全部规则用 .main-layout 前缀，只作用于控制台，不影响营销官网
 *      （.official-site 已有完整响应式）。
 *   2. 只用精确类名，不用 [class*=grid]/[class*=card] 等通配。
 *   3. 卡片类网格统一 2 列（小程序宫格观感）；详情/两栏统一 1 列。
 * ===================================================================== */

@media (max-width: 768px) {

  /* ===== 一、页面容器：收紧 PC 大留白 ===== */
  .main-layout .models-page { padding: 12px 10px 28px !important; }
  .main-layout .dashboard-content { padding: 0 10px 24px !important; }
  .main-layout .profile-page { padding: 20px 12px 28px !important; }
  .main-layout .tools-page { padding-left: 10px !important; padding-right: 10px !important; }

  /* ===== 一·补：会员中心 ConsoleLayout（/app/console/*）
          系统 768 适配只隐藏了主 sidebar，没处理这一层 208px 的二级导航，
          会把“我的”内容挤成 182px。这里改为顶部横向滚动条。 ===== */
  .main-layout .console-shell { display: block !important; }
  .main-layout .console-nav {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
  }
  .main-layout .console-nav::-webkit-scrollbar { display: none !important; }
  .main-layout .console-nav .nav-title,
  .main-layout .console-nav .nav-group-label { display: none !important; }
  .main-layout .console-nav .nav-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }
  .main-layout .console-nav .nav-item {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
  }
  .main-layout .console-body {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ===== 二、模型广场：卡片网格 2 列（小程序宫格） ===== */
  .main-layout .models-grid,
  .main-layout .skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* 模型卡片：收紧内边距，统一观感 */
  .main-layout .model-card {
    padding: 10px !important;
    gap: 7px !important;
    border-radius: 12px !important;
    contain-intrinsic-size: 0 220px !important;
  }
  /* 封面 16:9，随卡片内边距一起收（负边距贴合卡片边缘） */
  .main-layout .card-media {
    margin: -10px -10px 2px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  /* 卡片头部：logo 缩小、名称可换两行、状态标签紧凑，
     修复 180px 卡片里名称区只剩 31px、名称只显示“Mi…”的问题 */
  .main-layout .card-head { gap: 6px !important; align-items: flex-start !important; }
  .main-layout .logo-box {
    width: 32px !important; height: 32px !important;
    border-radius: 10px !important; flex-shrink: 0 !important;
  }
  .main-layout .logo-box .vendor-logo,
  .main-layout .logo-box img { width: 22px !important; height: 22px !important; object-fit: contain !important; }
  .main-layout .head-text { flex: 1 1 auto !important; min-width: 0 !important; gap: 1px !important; }
  .main-layout .model-name {
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  .main-layout .model-vendor { font-size: 10px !important; }
  .main-layout .status-pill {
    padding: 2px 6px !important; gap: 3px !important;
    font-size: 9px !important; flex-shrink: 0 !important; margin-top: 2px !important;
  }
  /* 价格 / 接口 / 标签区块收紧 */
  .main-layout .price-cell { padding: 6px 8px !important; border-radius: 8px !important; gap: 1px !important; }
  .main-layout .cell-value { font-size: 15px !important; }
  .main-layout .cell-label,
  .main-layout .cell-unit { font-size: 9px !important; }
  .main-layout .endpoint-row { padding: 6px 8px !important; gap: 6px !important; }
  .main-layout .endpoint { font-size: 9px !important; }
  .main-layout .id-row { gap: 6px !important; }
  .main-layout .model-id { font-size: 9px !important; }
  .main-layout .card-foot { padding-top: 8px !important; }

  /* 模型页顶部促销行（原 1fr 258px 两栏且无手机断点）→ 单列 */
  .main-layout .promo-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 统计条：5 项一排、紧凑排列（小程序数据条样式） */
  .main-layout .stat-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 10px 2px !important;
  }
  .main-layout .strip-item { gap: 2px !important; padding: 0 1px !important; }
  .main-layout .strip-item strong { font-size: 13px !important; }
  .main-layout .strip-item span { font-size: 10px !important; white-space: nowrap !important; }

  /* 模型组合/榜单等详情：保持单列（原系统 ≤600/900 已处理，这里兜底到 768） */
  .main-layout .cmb-grid,
  .main-layout .leaderboard-content,
  .main-layout .rank-list,
  .main-layout .dlg-split { grid-template-columns: 1fr !important; }

  /* ===== 三、工作台：概览统计卡 2 列 ===== */
  .main-layout .overview-section {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }
  .main-layout .overview-card { padding: 14px !important; border-radius: 12px !important; }
  .main-layout .overview-value { font-size: 20px !important; }
  .main-layout .overview-label { font-size: 12px !important; }
  /* 短剧卡片网格（系统 ≤760 已是 2 列），仅收紧间距 */
  .main-layout .shorts-grid { gap: 10px !important; }
  /* 架构流程 2 列（系统 ≤700 已处理），兜底 */
  .main-layout .cae-flow { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .main-layout .cae-systems { grid-template-columns: 1fr !important; }

  /* ===== 四、工具页：工具/模板卡片 2 列宫格 ===== */
  .main-layout .tools-grid,
  .main-layout .vt-grid,
  .main-layout .combo-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* ===== 五、作品/资产/项目卡片 2 列兜底（仅控制台） ===== */
  .main-layout .assets-grid,
  .main-layout .reco-grid,
  .main-layout .run-arts,
  .main-layout .project-grid,
  .main-layout .portal-template-grid,
  .main-layout .canvas-portal-gallery-grid,
  .main-layout .material-grid,
  .main-layout .result-cards,
  .main-layout .mini-grid,
  .main-layout .pd-tools-grid,
  .main-layout .pd-skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* ===== 六、大尺寸悬浮面板/菜单：收进屏幕宽度 ===== */
  .main-layout .tool-hover-panel {
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 72vh !important;
    right: 4vw !important;
  }
  .main-layout .model-mega-menu {
    width: 92vw !important;
    min-width: 0 !important;
    padding: 16px !important;
  }

  /* ===== 七、表单输入不溢出 ===== */
  .main-layout input,
  .main-layout textarea,
  .main-layout select { max-width: 100% !important; box-sizing: border-box !important; }
  .main-layout .el-input,
  .main-layout .el-select,
  .main-layout .el-textarea { width: 100% !important; }
  .main-layout .form-row { grid-template-columns: 1fr !important; }

  /* ===== 八、多列固定表格：横向滚动而不是压扁 ===== */
  .main-layout .table-card,
  .main-layout .model-row,
  .main-layout .rank-row,
  .main-layout .project-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ===== 九、创作/工具二级工作区：左参数+右画布的多列改单列 ===== */
  .main-layout .docs-body,        /* API 文档：250px 1fr 380px 三栏 */
  .main-layout .dh-layout,        /* 数字人：320px 1fr */
  .main-layout .workspace,        /* 短剧 / 地理：400px 1fr、380px 1fr */
  .main-layout .vc-layout,        /* 视频：340px 1fr */
  .main-layout .guides-layout,    /* 指南：190px 1fr */
  .main-layout .generate-panel,   /* 内容工厂：380px 1fr */
  .main-layout .welcome-state {   /* 对话：240px 1fr 340px 三栏 */
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ===== 十、创作页浮动参数面板：限宽不溢出屏幕 ===== */
  .main-layout .model-panel-3col { min-width: 0 !important; }
  .main-layout .asset-panel,
  .main-layout .dropdown-panel,
  .main-layout .model-panel,
  .main-layout .quality-panel,
  .main-layout .tool-hover-panel {
    max-width: calc(100vw - 24px) !important;
  }
  .main-layout .asset-panel { left: 12px !important; right: 12px !important; width: auto !important; }
}