/* ============================================================
   OI伴学 · AI 视觉语言层 (AI Theme / Components)
   作用：承载「UI 设计检查优化稿」的组件实现。
   原则：纯增量，不重写现有类（如 .app-header / .card / .main-tab-link），
        新增语义类可直接套用到 #home、#companion 等页面，逐步替换。
   依赖：必须在 tokens.css 之后引入。
   关键设计决策：
     · 练习/学习 → 蓝 (var(--brand))
     · AI 伴学   → 靛 (var(--ai))，图标块用 --ai-50 底 + --ai 描边
     · 图标统一用 SVG（见 .icon / .icon-ai），不再使用 emoji
   ============================================================ */

/* —— 通用图标块（替代 emoji 图标） —— */
.icon-tile {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-50); flex-shrink: 0;
}
.icon-tile svg { width: 24px; height: 24px; }
.icon-tile--ai { background: var(--ai-50); }
.icon-tile--ai svg { stroke: var(--ai); }
.icon-tile--sm { width: 36px; height: 36px; border-radius: var(--r-sm); }
.icon-tile--sm svg { width: 22px; height: 22px; }

/* ============================================================
   Hero 主视觉（落地页）
   ============================================================ */
.hero-panel {
  width: 100%;
  border-radius: var(--r-xl);
  padding: 48px;
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.hero-panel__title {
  font-size: var(--fs-hero); font-weight: 700; color: #fff; line-height: 1.25;
  margin: 0;
}
.hero-panel__sub {
  font-size: var(--fs-md); color: rgba(255, 255, 255, 0.92); line-height: 1.6;
  max-width: 640px; margin: 0;
}
.hero-panel__cta { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.hero-panel__stats {
  display: flex; gap: var(--sp-8); align-items: center; margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat__num { font-size: var(--fs-2xl); font-weight: 700; color: #fff; }
.hero-stat__label { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   区块标题
   ============================================================ */
.section-head { margin-bottom: var(--sp-4); }
.section-head__title {
  font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin: 0 0 var(--sp-1);
}
.section-head__sub {
  font-size: var(--fs-base); color: var(--text-tertiary); margin: 0;
}

/* ============================================================
   卡片网格（响应式 wrap）
   ============================================================ */
.card-grid {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: stretch;
}
.card-grid > * { flex: 1 1 280px; }

/* 信息卡（计划 / 继续练习 / 薄弱点 等） */
.info-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.info-card__head {
  display: flex; align-items: center; justify-content: space-between;
}
.info-card__title { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin: 0; }
.info-card__meta { font-size: var(--fs-sm); color: var(--text-tertiary); }

/* 进度条 */
.progress {
  width: 100%; height: 6px; border-radius: var(--r-pill);
  background: var(--bg-alt); overflow: hidden;
}
.progress__fill { height: 100%; border-radius: var(--r-pill); background: var(--brand); }
.progress__fill--ai { background: var(--ai); }

/* 内嵌信息盒 */
.info-box {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
}

/* ============================================================
   AI 伴学卡（靛色语言，与练习卡视觉区分）
   ============================================================ */
.ai-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.ai-card__name { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin: 0; }
.ai-card__desc {
  font-size: var(--fs-sm); color: var(--text-tertiary); line-height: 1.55; margin: 0;
}

/* AI 入口按钮（看板里的导师答疑 / 规划 / 诊断 / 出题） */
.ai-entry {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--card-alt); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .15s ease, transform .15s ease;
  flex: 1 1 280px;
}
.ai-entry:hover { border-color: var(--ai-100); transform: translateY(-1px); }
.ai-entry__text { display: flex; flex-direction: column; gap: 2px; }
.ai-entry__title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.ai-entry__desc { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* 快捷入口（蓝色语言，与 AI 区分） */
.quick-entry {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); height: 48px;
  border-radius: var(--r-md); background: var(--card-alt);
  border: 1px solid var(--border); cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
  flex: 1 1 280px;
}
.quick-entry:hover { border-color: var(--brand-100); transform: translateY(-1px); }
.quick-entry__title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }

/* ============================================================
   标签 / 徽章
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; height: 28px;
  padding: 0 var(--sp-3); border-radius: var(--r-pill);
  background: var(--bg-alt); color: var(--text-secondary);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
}
.chip--warning { background: var(--warning-50); color: var(--warning-text); }
.chip--ai { background: var(--ai-50); color: var(--ai-dark); }

.badge-countdown {
  display: inline-flex; align-items: center; height: 30px;
  padding: 0 var(--sp-3); border-radius: var(--r-pill);
  background: var(--danger-50); color: var(--danger);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}

/* 链接型文字（查看完整计划 ›） */
.link-action {
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand);
  cursor: pointer; text-decoration: none; align-self: flex-start;
}
.link-action--ai { color: var(--ai); }

/* ============================================================
   按钮
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 var(--sp-6); border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn--sm { height: 38px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost-light {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
}
.btn-ghost-light:hover { border-color: #fff; }
.btn-outline {
  background: var(--card); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--bg-alt); color: var(--text); }
.btn-ai { background: var(--ai); color: #fff; }
.btn-ai:hover { background: var(--ai-dark); }

/* ============================================================
   主题切换按钮（导航栏右侧）
   ============================================================ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--card-alt); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.theme-toggle:hover { border-color: var(--brand-100); color: var(--brand); }
.theme-toggle svg { width: 20px; height: 20px; }

/* 导航 tab / AI 按钮内的 SVG 图标尺寸 */
.main-tab-link .tab-icon svg { width: 18px; height: 18px; display: block; }
.header-ai-btn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* ============================================================
   伴学看板区块升级（直接套用新卡片语言，覆盖多数区块）
   ============================================================ */
.companion-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4);
}
.companion-section-title {
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
  margin: 0 0 var(--sp-4); display: flex; align-items: baseline; gap: var(--sp-2);
}
.companion-section-title .section-sub {
  font-size: var(--fs-sm); font-weight: 400; color: var(--text-tertiary);
}
.companion-hero {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.hero-greet { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }

/* 目标链路（保留结构，去掉 emoji 后用纯文字 + 状态色） */
.goal-flag {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--ai-50); color: var(--ai-dark);
  font-size: var(--fs-xs); font-weight: 600;
}
.goal-countdown {
  display: inline-flex; align-items: center; height: 26px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); background: var(--danger-50); color: var(--danger);
  font-size: var(--fs-sm); font-weight: 600;
}
.goal-countdown.urgent { background: var(--danger-50); color: var(--danger); }

/* AI 伴学中枢卡片网格：复用 .ai-entry 视觉 */
.companion-hub-grid {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
}
.companion-hub-grid .hub-card { flex: 1 1 200px; text-decoration: none; }

/* 伴学中心空态 / 提示（保持原结构，仅统一语气） */
.companion-next-empty, .companion-empty p, .planner-empty {
  color: var(--text-tertiary); font-size: var(--fs-sm); line-height: 1.6;
}

/* ============================================================
   主用户页（#agents / #practice / #learn / #stats 学情诊断）
   图标与卡片升级：用 SVG 替换 emoji，套用双色语义。
   ============================================================ */

/* 行内 SVG 图标（替代 emoji 前缀）：标题 / 标签 / 按钮文字前 */
.svg-ic {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -4px; margin-right: 6px;
}
.svg-ic--sm { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.svg-ic--ai { color: var(--ai); }
.svg-ic--brand { color: var(--brand); }

/* —— #agents AI 助手 hub —— */
.agent-page-header h1 { display: flex; align-items: center; gap: 10px; }
.agent-page-header h1 .svg-ic { width: 28px; height: 28px; margin: 0; color: var(--ai); }
.agent-card { display: flex; flex-direction: column; gap: 10px; }
.agent-card-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ai-50); flex-shrink: 0;
}
.agent-card-icon svg { width: 26px; height: 26px; stroke: var(--ai); }
.agent-profile-badge { display: inline-flex; align-items: center; gap: 4px; }

/* —— #practice 练习：模式图标 / 分析标签 / 题型标签 —— */
.mode-icon svg { width: 32px; height: 32px; }
.analysis-label { display: flex; align-items: center; }
.q-type { display: inline-flex; align-items: center; }
.q-type .svg-ic, .q-code-label .svg-ic { margin-right: 5px; }
.q-code-label { display: flex; align-items: center; }

/* —— #learn 学习：分段标签 / 分析小节标题 —— */
.seg-tab { display: inline-flex; align-items: center; }
.seg-tab .svg-ic { margin-right: 6px; }

/* —— #stats 学情诊断：区块标题 / 报告分类标题 —— */
.diag-section h3, .ai-report-block-title { display: flex; align-items: center; gap: 8px; }
.diag-section h3 .svg-ic,
.ai-report-block-title .svg-ic { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
/* 诊断数据驱动标记：优先度星 / 树锁（用文本星与 SVG 锁，避免 emoji） */
.kp-stars { color: var(--warning); letter-spacing: 2px; font-size: 13px; }
.tree-lock { display: inline-flex; align-items: center; color: var(--danger); }

/* ============================================================
   深色适配：本层所有颜色均走 tokens，自动跟随 data-theme。
   仅补一处：Hero 渐变在暗色下略降饱和，避免过亮。
   ============================================================ */
:root[data-theme="dark"] .hero-panel {
  background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .hero-panel {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
  }
}