/* ==========================================================================
   tablet.css — 清清童创 H5 平板适配 (P0 基础框架 + P1 五个核心页面)
   --------------------------------------------------------------------------
   断点策略（与手机 style.css 完全解耦，纯覆盖、不改动手机样式）:
     - phone            : < 600px   （style.css 手机优先，原样保留）
     - tablet-portrait  : 600-1023px（iPad 竖屏 / 安卓平板竖屏）
     - tablet-landscape : ≥ 1024px  （iPad 横屏，安全范围内的容器规则）

   设计原则:
     1. 只写覆盖规则，全部置于 @media 内，手机 (<600px) 0 影响 → 375px 无视觉变化
     2. 暗色模式 (body.dark-mode) 由 CSS 变量驱动，本文件全部走变量 → 自动适用
     3. 触控目标: 可点击元素 ≥48px，核心 CTA ≥56px（通过 --touch-min-size + 覆盖）
   ========================================================================== */


/* ==========================================================================
   P0-1. 全局容器解锁 — 解除 style.css 中 max-width:480/500px 的手机硬编码
   （style.css 共 11 处硬编码，此处以 !important 统一覆盖，不删改原文件）
   ========================================================================== */
@media (min-width: 600px) {
  .page,
  .sub-container,
  .dialog-container,
  .gallery-container {
    max-width: min(92vw, 960px) !important;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .page,
  .sub-container {
    max-width: min(88vw, 1080px) !important;
  }
}


/* ==========================================================================
   P0-2. 全局基础覆盖 — 字号 / 触控目标 / 间距 / 卡片质感
   ========================================================================== */
@media (min-width: 600px) {
  /* ---- 根字号：手机 16px → 平板竖屏 17px ---- */
  html {
    font-size: 17px;
  }

  /* ---- 全局变量覆盖 ---- */
  :root {
    /* 间距 ×1.2 系数（平板更大的留白呼吸感） */
    --space-1: 0.3rem;    /* 4px  → 4.8px */
    --space-2: 0.6rem;    /* 8px  → 9.6px */
    --space-3: 0.9rem;    /* 12px → 14.4px */
    --space-4: 1.2rem;    /* 16px → 19.2px */
    --space-5: 1.5rem;    /* 20px → 24px */
    --space-6: 1.8rem;    /* 24px → 28.8px */
    --space-8: 2.4rem;    /* 32px → 38.4px */
    --space-10: 3rem;     /* 40px → 48px */
    --space-12: 3.6rem;   /* 48px → 57.6px */
    --space-16: 4.8rem;   /* 64px → 76.8px */

    /* 触控目标下限：44px → 48px（该变量被大量内联 min-width/min-height 引用） */
    --touch-min-size: 48px;
  }

  /* ---- 触控目标：所有 button 元素兜底 ≥48px（具体类自有尺寸优先级更高，不会被破坏） ---- */
  button,
  .btn-primary,
  .btn-secondary {
    min-height: 48px;
  }

  /* ---- 核心 CTA ≥56px ---- */
  .drawing-generate-btn,
  .ddl-clay-btn,
  .dialog-send-btn,
  .btn-primary {
    min-height: 56px;
  }

  /* ---- 卡片质感：圆角提升至 --radius-2xl + --surface-glow-* 增强阴影 ---- */
  .home-feature-card,
  .v31-challenge-card,
  .v36-challenge-clay,
  .v36-coach-card,
  .v36-coc-entry,
  .gallery-item,
  .drw-clay-style,
  .drw-clay-input-card,
  .ddl-clay-tools,
  .message-bubble .content {
    border-radius: var(--radius-2xl);
  }

  /* 主要入口卡片叠加品牌色微光，平板大屏上增强层次（悬停/常驻皆宜） */
  .v36-challenge-clay {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04),
                var(--surface-glow-purple);
  }
  .v36-coach-card {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04),
                var(--surface-glow-orange);
  }
  .home-feature-card:hover,
  .gallery-item:hover {
    box-shadow: var(--shadow-clay-raised), var(--surface-glow-blue);
  }
}

/* ---- 横屏根字号：17px → 18px ---- */
@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}


/* ==========================================================================
   P1-1. 首页 home (page-home-v31)
   - 功能卡片 grid 2→3 列
   - 挑战卡片加宽
   - AI 教练建议区全宽
   ========================================================================== */
@media (min-width: 600px) {
  /* 功能卡片网格：2 列 → 3 列（.home-features 基础为 1fr 1fr） */
  .home-features {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  .home-feature-card {
    min-height: 128px;
    padding: var(--space-6) var(--space-4);
  }
  .home-feature-icon {
    font-size: 2.6rem;
  }

  /* 挑战卡片加宽：更大的内边距与图标，充分利用宽屏 */
  .v36-challenge-clay,
  .v31-challenge-card {
    width: 100%;
    padding: var(--space-6);
  }
  .v36-challenge-icon-badge {
    width: 52px;
    height: 52px;
  }
  .v31-challenge-icon {
    font-size: 2.4rem;
  }
  .v31-challenge-name {
    font-size: var(--font-subtitle);
  }

  /* AI 教练建议区全宽 */
  .v36-coach-card {
    width: 100%;
    padding: var(--space-6);
  }

  /* 首页 section 间距放大，配合更宽的容器 */
  .home-v31-section {
    padding: 0 var(--space-5);
    margin-bottom: var(--space-5);
  }

  /* 角色动画区：平板上头像与问候语更有存在感 */
  .hero-emoji {
    font-size: 88px;
    width: 124px;
    height: 124px;
    line-height: 124px;
  }
  .hero-greeting {
    font-size: var(--font-heading);
  }

  /* 最近作品条：更大的圆角与内边距 */
  .v34-artworks-strip {
    border-radius: var(--radius-2xl);
  }
}


/* ==========================================================================
   P1-2. AI 绘画 drawing (page-drawing)
   - 风格选择：单行横滚 → 平铺网格（4+ 列，平板无需滑动即可看全）
   - 输入框加宽
   - 生成按钮全宽（基础已 width:100%，此处保证横屏不被收窄）
   ========================================================================== */
@media (min-width: 600px) {
  /* 风格选择：flex 横滚 → 自适应网格，一行排开（5 个风格在平板竖屏约 4-5 列） */
  .drw-clay-styles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    overflow-x: visible;
    gap: var(--space-3);
  }
  .drw-clay-style {
    min-height: 76px;
    padding: var(--space-3) var(--space-2);
  }

  /* 输入框加宽：更大的输入高度与字号，容器解锁后自然铺满 */
  .drw-clay-textarea {
    min-height: 104px;
    font-size: var(--font-body);
    padding: var(--space-4);
  }
  .drw-clay-input-card {
    padding: var(--space-4);
  }

  /* 生成按钮全宽 + CTA 高度 */
  .drawing-generate-btn {
    width: 100%;
    min-height: 60px;
    font-size: var(--font-subtitle);
  }
}


/* ==========================================================================
   P1-3. 涂鸦 doodle (page-doodle)
   - 画布区域加宽至 90vw（基础 max-width:600px 收窄了解锁）
   - 工具栏按钮 44→52px
   - 颜色面板：单行横滚 → 2 行网格（13 色 → 7+6）
   ========================================================================== */
@media (min-width: 600px) {
  /* 画布加宽：解除 600px 上限，铺到约 90vw（受页面容器 960px 约束） */
  .ddl-clay-canvas-wrap {
    max-width: min(90vw, 960px) !important;
  }
  .doodle-canvas-wrapper {
    max-width: min(90vw, 960px) !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 工具栏操作按钮：48px → 52px（任务口径 44→52，取较大值） */
  .ddl-clay-action,
  .doodle-action-btn {
    min-height: 52px;
    font-size: var(--font-body-sm);
  }

  /* 颜色面板 2 行：13 色 → repeat(7,1fr) = 7+6 两行，平板无需横滑 */
  .ddl-clay-colors {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: visible;
    gap: var(--space-3);
    justify-items: center;
  }
  .ddl-clay-color-dot {
    width: 44px;
    height: 44px;
  }
  /* 兼容旧版 .doodle-color 圆点 */
  .doodle-color {
    width: 40px;
    height: 40px;
  }

  /* 画笔粗细滑杆更易触控 */
  .brush-slider {
    height: 10px;
  }
}


/* ==========================================================================
   P1-4. 对话 dialog (page-dialog)
   - 消息气泡 max-width 70% → 60%（宽屏下避免气泡过长难读）
   - 输入区加宽
   - 快捷卡片 2 列（覆盖 JS 内联的 repeat(3,1fr)）
   ========================================================================== */
@media (min-width: 600px) {
  /* 气泡收窄：88%(基础)/70%(768+) → 60% */
  .message-bubble {
    max-width: 60%;
  }
  .message-bubble .content {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-body);
  }

  /* 输入区加宽：输入框与发送按钮更大的触控面 */
  .dialog-input {
    min-height: 56px;
    font-size: var(--font-body);
    padding: var(--space-3) var(--space-5);
  }
  .dialog-send-btn {
    min-width: 60px;
    min-height: 56px;
  }

  /* 快捷卡片 2 列：覆盖 JS 内联 grid-template-columns（!important 压过 inline style） */
  .refinement-option-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3);
  }
  .refinement-option-chip {
    min-height: 60px;
    font-size: var(--font-subtitle);
    padding: var(--space-4);
  }
}


/* ==========================================================================
   P1-5. 画廊 gallery (page-gallery)
   - grid 2 列 → 3 列
   - 卡片增大（间距/标题/圆角随之放大）
   ========================================================================== */
@media (min-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  .gallery-item {
    border-radius: var(--radius-2xl);
  }
  .gallery-item-title {
    font-size: var(--font-body);
  }
  .gallery-item-info {
    padding: var(--space-3) var(--space-3) var(--space-2);
  }
}

/* 横屏（≥1024px）在安全范围内进一步放大画廊列数与首页网格 */
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .home-features {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ==========================================================================
   P2. 横屏适配 (≥1024px + landscape)
   --------------------------------------------------------------------------
   关键结构事实（已核实，勿臆造类名）:
     - 每个页面 render 时都执行 container.className = 'page page-xxx'，
       即路由容器 #page-container 本身就是 .page。因此左侧导航的内容区
       位移只需加在 #page-container（ID 优先级 1,0,0 > .page 的 0,1,0）。
     - TabBar 真实类名 .tab-bar / .tab-item（tabbar.js 生成），内部图标
       为 .tab-icon-svg（含 svg），文字为 .tab-label，无需改内部结构。
     - style.css @768+ 对 .tab-bar 有 left:0 !important; right:0 !important，
       本文件横屏侧栏必须用 !important 覆盖 right。
   ========================================================================== */

/* ---- P2-0. 竖屏 (≥600px) TabBar 保持底部形态，仅加宽 + 图标/文字增大 ----
   （P0 未处理 tabbar，此处补齐；横屏规则在后方覆盖本块） */
@media (min-width: 600px) {
  .tab-bar {
    max-width: 640px;
    height: 64px;
  }
  .tab-bar .tab-item:not(.tab-item-middle) .tab-icon-svg,
  .tab-bar .tab-item:not(.tab-item-middle) .tab-icon-svg svg {
    width: 32px;
    height: 32px;
  }
  .tab-label {
    font-size: 0.875rem;
  }
}

/* ---- P2-1. 横屏：底部 TabBar → 左侧导航栏 + 内容区右移 ---- */
@media (min-width: 1024px) and (orientation: landscape) {
  .tab-bar {
    position: fixed;
    left: 0 !important;            /* 覆盖 style.css @768+ left:0 !important */
    right: auto !important;        /* 覆盖 style.css @768+ right:0 !important */
    top: 0;
    bottom: 0;
    width: 72px;
    max-width: none;               /* 覆盖 @768+ 520px / @1024+ 600px */
    height: auto;                  /* 基础 56px → 全高 */
    margin: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-1);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    box-shadow: var(--surface-glow-purple), 6px 0 24px rgba(91, 59, 184, 0.08);
  }
  .tab-bar .tab-item {
    flex: 0 0 auto;
    width: 56px;
    min-height: 56px;
    align-self: center;
  }
  /* 中间伙伴按钮的浮起/缩放在纵向排列中不再适用，避免与相邻项重叠 */
  .tab-item-middle,
  .tab-item-partner-float {
    transform: none;
  }

  /* 内容区整体右移，避开 72px 侧栏（#page-container 即 .page 本身） */
  #page-container {
    margin-left: 72px;
  }

  /* 家长模式「回到儿童模式」浮条：从底部居中移到侧栏右下方 */
  .parent-mode-bar {
    left: 84px;
    right: auto;
    bottom: var(--space-4);
    justify-content: flex-start;
  }

  /* ---- 横屏：释放原为底部 tabbar 预留的底部留白（导航已移至左侧） ---- */
  .home-v31-container { padding-bottom: var(--space-6); }
  .doodle-body        { padding-bottom: var(--space-4); }
  .drawing-body       { padding-bottom: var(--space-4); }
  .story-body         { padding-bottom: var(--space-4); }
  .profile-container  { padding-bottom: var(--space-4); }
  .cv4-container      { padding-bottom: var(--space-4); }
  .sub-container      { padding-bottom: var(--space-4); }
  /* dialog 底部留白含内联 120px，需 !important 覆盖 */
  .sd-body            { padding-bottom: var(--space-4) !important; }
  .dialog-container   {
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  /* ---- P2-2. home 横屏双栏：挑战 | 共创 并排，hero / 作品条全宽 ----
     说明：方案中「功能卡片 4 列」(.home-features) 与「AI 教练建议」独立卡片
     均为旧版 DOM，现首页 v3.6 已无这两个结构（教练建议已合并进挑战卡）。
     故以现状最接近的「挑战 | 共创入口」作为并排双栏。 */
  .home-v31-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    align-items: start;
  }
  .home-v31-hero {
    grid-column: 1 / -1;
    max-width: none;               /* 覆盖 @768+ max-width:560px 居中 */
    margin-left: 0;
    margin-right: 0;
  }
  .home-v31-section {
    max-width: none;               /* 覆盖 @768+ max-width:560px 居中 */
    margin-left: 0;
    margin-right: 0;
  }
  .v34-artworks-entrance {
    grid-column: 1 / -1;
  }
  /* 大屏可悬停：入口卡片微浮起 + 品牌辉光 */
  .v36-challenge-clay,
  .v36-coc-entry,
  .v34-artworks-bigcard {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .v36-challenge-clay:hover,
  .v36-coc-entry:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-clay-raised), var(--surface-glow-purple);
  }

  /* ---- P2-3. drawing 横屏双栏：左栏(提示词+风格+快捷+生成) / 右栏(结果+历史) ---- */
  .drawing-body {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: var(--space-4) var(--space-6);
    align-items: start;
    grid-template-areas:
      "coach    coach"
      "input    result"
      "options  result"
      "prompts  result"
      "generate result"
      "history  history";
  }
  #coach-pre-guidance-container { grid-area: coach; }
  .drw-clay-input-card          { grid-area: input; }
  .drawing-options              { grid-area: options; }
  .drawing-recent-prompts       { grid-area: prompts; }
  /* 生成按钮：主态 #drawing-generate / 访客态 #drawing-generate-guest 均为 .drw-clay-btn 直接子元素 */
  .drawing-body > .drw-clay-btn { grid-area: generate; }
  .drw-clay-loading             { grid-area: result; }
  .drw-clay-result              { grid-area: result; }
  .drawing-history              { grid-area: history; }

  /* ---- P2-4. doodle 横屏双栏：左栏(工具/颜色/提示词/风格/生成) / 右栏(画布) ---- */
  .doodle-body {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: var(--space-4) var(--space-5);
    align-items: start;
    max-width: none;               /* 覆盖 @1024+ max-width:900px，画布更宽 */
    /* 关键：.doodle-body 是 flex 子项且 @1024+ 规则留有 margin:0 auto，
       自动外边距会让 grid 容器收缩为 fit-content（约 710px），必须归零才能铺满 */
    margin-left: 0;
    margin-right: 0;
    grid-template-areas:
      "tools  canvas"
      "prompt canvas"
      "styles canvas"
      "gen    canvas";
  }
  .ddl-clay-tools         { grid-area: tools; }
  .doodle-prompt-section  { grid-area: prompt; }
  .doodle-styles-section  { grid-area: styles; }
  /* 生成（变艺术）按钮：主态/访客态均为 .ddl-clay-btn 直接子元素 */
  .doodle-body > .ddl-clay-btn { grid-area: gen; }
  .doodle-canvas-section  { grid-area: canvas; }
  /* 画布占满右栏（解除 P1 的 90vw/960px 上限） */
  .ddl-clay-canvas-wrap {
    max-width: none !important;
    width: 100%;
  }
  .doodle-canvas-wrapper {
    max-width: none !important;
  }
  /* 颜色面板展开为完整色板（左栏内自适应多行） */
  .ddl-clay-colors {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: var(--space-2);
  }

  /* ---- P2-5. dialog 横屏：气泡 50% + 快捷卡 3 列 + 输入区加宽 ---- */
  .message-bubble {
    max-width: 50%;
  }
  .refinement-option-grid {
    grid-template-columns: repeat(3, 1fr) !important;  /* 覆盖 JS 内联与 P1 的 2 列 */
  }
  .dlg-clay-input {
    min-height: 56px;
    font-size: var(--font-body);
  }

  /* ---- P2-6. gallery 横屏：4 列 + 悬停增强 ---- */
  .gallery-v3-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .gal-clay-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .gal-clay-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: var(--shadow-clay-raised), var(--surface-glow-blue);
  }
}

/* 超宽横屏 (≥1366px)：画廊 5 列 */
@media (min-width: 1366px) and (orientation: landscape) {
  .gallery-v3-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}


/* ==========================================================================
   P3. 次级页面加宽
   - 竖屏 (600-1023)：容器解锁加宽、字号/网格放大
   - 横屏 (≥1024)：容器进一步加宽 + 双栏布局
   说明：方案中部分类名为旧版（.sd-cover/.sd-content、.dash-dim-cards-grid、
        coc 角色选择 grid 等已不在当前 DOM），此处一律以实际类名实现，
        内联样式密集处（story-detail）用 :nth-child + !important 兜底。
   ========================================================================== */

/* ---- P3-A. 竖屏平板 (≥600px) 加宽 ---- */
@media (min-width: 600px) {
  /* 次级页面内容容器解锁（style.css 内各有 480/600px 手机硬编码） */
  .dashboard-container,
  .coc-wrapper,
  .cv4-container,
  .challenge-container {
    max-width: min(92vw, 900px);
    margin-left: auto;
    margin-right: auto;
  }

  /* 故事详情：阅读区收拢到舒适宽度 + 正文字号 1.1em
     （正文卡片内层 div 为内联 17px，需 !important 提权） */
  .sd-body {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 直接子选择器，避免命中正文内 _formatStoryText 的孙级占位 div 造成字号叠加 */
  .sd-body > div:nth-child(3) > div {
    font-size: 1.1em !important;
  }

  /* 故事创作：输入卡去掉手机边距，随容器铺满 */
  .sty-clay-input-card {
    margin-left: 0;
    margin-right: 0;
  }

  /* 仪表盘：雷达图增大（DPR 感知，渲染时按 clientWidth 重绘不糊）
     + 维度卡 2 列（当前 DOM 的维度卡为 .dash-radar-legend 内各项） */
  #radar-canvas {
    width: min(420px, 90vw);
  }
  .dash-radar-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  /* 挑战：AI 灵感 3 列；任务网格基础即 2 列（保持不变） */
  .cv4-ai-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 共创：AI 灵感卡由横向滚动 → 3 列网格 */
  .coc-ai-inline-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    gap: var(--space-2);
  }

  /* 表单页（设置/登录/订阅）：容器收拢至 560px，按钮全宽
     （sub-container 的 560 需 !important 覆盖 P0 的 min(92vw,960px)） */
  .settings-container,
  .login-section {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .sub-container {
    max-width: 560px !important;
  }
}

/* ---- P3-B. 横屏 (≥1024px + landscape) 加宽 + 双栏 ---- */
@media (min-width: 1024px) and (orientation: landscape) {
  /* 容器进一步加宽 */
  .dashboard-container,
  .coc-wrapper,
  .cv4-container,
  .challenge-container {
    max-width: min(88vw, 1080px);
  }

  /* 表单页：640px */
  .settings-container,
  .login-section {
    max-width: 640px;
  }
  .sub-container {
    max-width: 640px !important;
  }

  /* 故事详情：左图右文双栏
     （子元素为内联样式 div，结构稳定：1封面 2标题 3正文 4播放器，
       第 5+ 为 TTS 提示/display:none 与固定定位装饰波，统一跨全宽兜底） */
  .sd-body {
    display: grid;
    grid-template-columns: minmax(300px, 420px) 1fr;
    column-gap: var(--space-6);
    align-items: start;
    max-width: none;
    /* .sd-body 为 flex 子项且 P3-A 留有居中 auto 边距，归零避免 grid 收缩为 fit-content */
    margin-left: 0;
    margin-right: 0;
  }
  .sd-body > div:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
  }
  .sd-body > div:nth-child(2) { grid-column: 2; }
  .sd-body > div:nth-child(3) { grid-column: 2; }
  .sd-body > div:nth-child(n+4) { grid-column: 1 / -1; }

  /* 挑战：每日挑战(详情) | AI 灵感 并排，系列/任务网格全宽（任务网格 3 列） */
  .cv4-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    align-items: start;
    grid-template-areas:
      "voice    voice"
      "header   header"
      "intro    intro"
      "progress progress"
      "daily    ai"
      "series   series"
      "grid     grid";
  }
  #challenge-voice-area  { grid-area: voice; }
  .cv4-header            { grid-area: header; }
  #cv4-intro-section     { grid-area: intro; }
  #cv4-progress-section  { grid-area: progress; }
  #cv4-daily-section     { grid-area: daily; }
  #cv4-ai-section        { grid-area: ai; }
  #cv4-series-section    { grid-area: series; }
  #cv4-grid-section      { grid-area: grid; }
  .cv4-challenge-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 仪表盘：雷达图 | 趋势图 并排，其余卡片全宽；趋势画布随列宽
     （.dashboard-container > * 默认全宽，仅两个图表卡分列，避免枚举全部子卡片） */
  .dashboard-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
    align-items: start;
  }
  .dashboard-container > * { grid-column: 1 / -1; }
  #dash-radar-card { grid-column: 1; }
  #dash-trend-card { grid-column: 2; }
  #trend-canvas {
    width: 100%;
  }
  /* 横屏维度卡 3 列（更宽） */
  .dash-radar-legend {
    grid-template-columns: repeat(3, 1fr);
  }
}