/* ============================================
   收藏本专用样式 - 按需加载
   ============================================ */

/* ----------------------------------------
   页面布局
   ---------------------------------------- *//* 错题本专用样式 - 按需加载 */

/* ============================================
   页面布局样式
   ============================================ *//* AddQuestionDialog.tsx - 添加题目对话框样式 *//* BodyEditor.tsx - 正文编辑器组件样式 *//* Books Common Styles - 收藏本、错题本、笔记本通用样式 */

/* ============================================
   笔记本页面滚动修复
   ============================================ *//* FavoritesItem.tsx - 收藏项组件样式 *//* FolderTree.tsx - 文件夹树组件样式 *//* NotebookDetailDialog.tsx - 笔记详情对话框样式 *//* NotebookFileUpload.tsx - 文件上传组件样式 *//* FormFields.tsx - 表单字段组件样式 *//* NotebookForm.tsx - 笔记表单组件样式 *//* Notebook Questions Layout Styles */

/* Layout Grid - uses CSS variable for dynamic left width *//* NotebookTagManager.tsx - 标签管理器组件样式 *//* Exam Card Styles *//* Welcome Card Styles *//* ============================================
   管理员订单页面特有样式
   ============================================
   公共表格样式已提取到 components/tables.css
   ============================================ */

/* 页面根类 *//* ============================================
   账单页面特有样式
   ============================================
   公共表格样式已提取到 components/tables.css
   ============================================ */

/* 页面根类 *//* ============================================
   出版商订单页面特有样式
   ============================================
   公共表格样式已提取到 components/tables.css
   ============================================ */

/* 页面根类 *//* Plan Module Chart Styles */

/* Level 1 Score Chart *//* Plan Module Drawer Styles */

/* AI Chat Drawer Overlay *//* Plan Module Form Styles */

/* Form Layout *//* Plan Module Styles */

/* Layout *//**
 * 题库模块 - 表单相关样式
 * 
 * 用于题库表单组件的样式定义
 */

/* ========== 表单布局 ========== *//**
 * 题库模块全局样式
 * 
 * 定义题库模块专用的 CSS 变量和样式类
 *//* Student Question Bank Layout Styles */

/* Layout Grid - uses CSS variable for dynamic left width *//* =========================
   BasicInfoCard 组件样式
   ========================= *//* =========================
   ChoiceEditor 组件样式
   ========================= *//* =========================
   Question Editors 组件样式
   ========================= */

/* ExplanationPart *//* =========================
   HelpDrawer 组件样式
   ========================= *//* =========================
   ImportJobsTable 组件样式
   ========================= *//* =========================
   ParsingModal 组件样式
   ========================= *//* Question List Styles */

/* Question Text *//* =========================
   Review Components 样式
   ========================= */

/* ReviewHeader *//* Review Editor Styles *//* =========================
   Review Editors 组件样式
   ========================= */

/* EnglishReadingEditor *//* =========================
   ReviewModal 组件样式
   ========================= *//* 打印视图样式 - A4纸张优化 *//* batch-actions.css - PublisherBatchActions 组件样式 *//* Button Components */

/* Base Button Style *//* ============================================
   DataTable Component Styles - Performance Optimized
   ============================================
   优化要点:
   - 使用 contain 属性隔离大量行的渲染
   - 使用 will-change 优化动画元素
   - 滚动容器添加 overflow-anchor: none
   ============================================ *//* ============================================
   Drawer Components - Performance Optimized
   ============================================
   优化要点:
   - 使用 will-change 提示浏览器优化动画元素
   - 使用 contain 属性隔离渲染
   - 动画仅使用 transform (GPU加速)
   - 避免使用会触发重排的属性
   ============================================ */

/* Drawer Backdrop - 抽屉背景遮罩 *//* Dropdown Selectors Component Styles */
/* Merged from bibliography-dropdown-selector.css and source-dropdown-selector.css */

/* ============================================
   Source Dropdown Selector Styles
   ============================================ *//* EmptyState 组件样式 *//* ============================================
   反馈页面公共样式 - Feedback Components
   ============================================
   提取自 admin-feedback.css, student-feedback.css, publisher-feedback.css
   ============================================ */

/* ============================================
   基础页面布局
   ============================================ *//* =========================
   Advanced Form Controls
   包含: Toggle Switch, Multi Select, Rounded Select, Segmented Tabs
   ========================= */

/* -------------------------
   Toggle Switch Component
   ------------------------- *//* Form Components - Extracted from ui-components.css and learning-setup-dialog.css */

/* Form Layout *//* ImageUpload 组件样式 *//* 学习参数设置对话框样式 */
/* Note: @keyframes fadeIn and @keyframes slideIn are defined in animations.css *//* Loading Component Styles *//* ============================================
   Loading Components - Performance Optimized
   ============================================
   优化要点:
   - 使用 will-change 提示浏览器优化动画元素
   - 旋转动画使用 transform (GPU加速)
   - 脉冲动画使用 opacity
   - 避免使用会触发重排的属性
   ============================================ */

/* 统一加载状态 - 靠上居中 *//* Markdown Editor 专业样式 *//* Message/Alert Components *//* ============================================
   Modal Components - Performance Optimized
   ============================================
   优化要点:
   - 使用 will-change 提示浏览器优化动画元素
   - 使用 contain 属性隔离渲染
   - 动画仅使用 transform 和 opacity (GPU加速)
   ============================================ */

/* Modal Backdrop - 模态框背景遮罩 *//* Question Detail Modal Styles */

/* Meta Info Styles *//* SearchInput Component Styles *//* SearchableMultiSelect Component Styles *//* ============================================
   SlideOver Component Styles - Performance Optimized
   ============================================
   优化要点:
   - 使用 will-change 提示浏览器优化动画元素
   - 使用 contain 属性隔离渲染
   - 动画仅使用 transform 和 opacity (GPU加速)
   ============================================ *//*
 * Subject Selector Component
 * 用途: 科目选择器，支持默认和彩色两种变体
 * 依赖: tokens.css
 */

/* -------------------------
   Block: Subject Selector
   ------------------------- *//* ============================================
   表格组件样式 - Table Components
   ============================================
   提取自 modern-tables.css, ui-components.css, plan.css
   以及订单相关页面样式 (admin-orders.css, billing.css, publisher-orders.css)
   ============================================ */

/* ============================================
   1. 基础表格样式 (.data-table)
   ============================================ *//* TagSelector Component Styles *//* 管理员布局样式 *//* 应用布局样式 *//* 登录页面时的body样式 *//**
 * 移动端基础样式
 * Mobile Base Styles
 *
 * 遵循 z-link 项目移动端开发规范
 * 参考文档: AGENTS.md 第 5 节
 */

/* ========================================
   重置样式 - Reset Styles
   ======================================== *//**
 * 移动端组件样式
 * Mobile Component Styles
 *
 * 遵循 z-link 项目移动端开发规范
 * 参考文档: AGENTS.md 第 5 节
 */


/* ========================================
   卡片组件 - Card
   ======================================== *//**
 * 编辑资料页面样式
 * Edit Profile Page Styles
 *//**
 * 移动端统一表单样式
 * Mobile Form Styles
 *
 * 遵循 z-link 项目移动端开发规范
 * 用于统一注册页和编辑资料页的表单控件样式
 */

/* ========================================
   表单页面容器
   ======================================== *//**
 * 关于我们页面样式
 * Profile About Page Styles
 *//**
 * 离线缓存页面样式
 * Profile Cache Page Styles
 *//**
 * 我的收藏页面样式
 * Profile Favorites Page Styles
 *//**
 * 意见反馈页面样式
 * Profile Feedback Page Styles
 *//**
 * 帮助中心页面样式
 * Profile Help Page Styles
 *//**
 * 我的笔记页面样式
 * Profile Notes Page Styles
 *//**
 * 消息通知页面样式
 * Profile Notifications Page Styles
 *//**
 * 学习报告页面样式
 * Profile Report Page Styles
 *//**
 * 账号与安全页面样式
 * Profile Security Page Styles
 *//**
 * 我的题库页面样式
 * Profile Question Sets Page Styles
 *//* 强制使用亮色主题，覆盖系统暗色模式 *//**
 * 移动端 Toast 提示条样式
 * Mobile Toast Styles
 *//**
 * 移动端 CSS 变量系统
 * Mobile CSS Variables
 *
 * 遵循 z-link 项目移动端开发规范
 * 参考文档: AGENTS.md 第 5 节
 *//* AIModelFormModal 组件样式 *//* AdminBackups 组件样式 *//* ============================================
   管理员反馈页面特有样式
   ============================================
   公共样式已提取到 components/feedback.css
   ============================================ */

/* 页面根类 *//* LogFilterToolbar 组件样式 *//* Notifications 组件样式 *//* AdminOperationLogs 组件样式 *//* PublisherForm 组件样式 *//* PublisherTable 组件样式 *//* ResetPassword 组件样式 *//* BackupSettingsDrawer 组件样式 *//* UserFormModal 组件样式 *//* UserTable 组件样式 *//* AdminUsersLayout 组件样式 *//* AI Chat Components Styles */

/* Chat Message Item Styles *//* AI 组件通用样式 */

/* ==================== AIThoughtFloatingWindow ==================== *//* 学生分析聊天页样式 *//* Hero Section *//* 计划页面样式（学生） *//* PluginRenderer *//* ============================================
   出版商反馈页面特有样式
   ============================================
   公共样式已提取到 components/feedback.css
   ============================================ */

/* 页面根类 - 复用 admin-feedback-page 结构 *//* 学生题库查询条件块美化样式 *//* 响应式设计 - 学生题库查询条件 *//* =========================
   题库页面（Questions）样式
   ========================= *//* ============================================
   学生反馈页面特有样式
   ============================================
   公共样式已提取到 components/feedback.css
   ============================================ */

/* 页面根类 *//* 学习页面局部样式优化 */

/* 底部右侧动作容器：提交与打印并排 *//* ============================================
   通用动画定义 - Global Animations
   集中管理所有关键帧动画，避免重复定义
   ============================================ */

/* ============================================
   Performance Optimization Notes:
   - 所有动画仅使用 transform 和 opacity (GPU加速)
   - will-change 属性在动画类中声明，提示浏览器优化
   - 避免使用会触发重排的属性 (width, height, top, left)
   ============================================ */

/* ============================================
   Fade Animations
   ============================================ *//* ============================================
   通用工具类 - Utility Classes
   ============================================
   集中管理通用工具类，避免重复定义
   ============================================ */

/* ============================================
   Flexbox 布局工具类
   ============================================ */
.plan-page,
.questions-page,
.wrong-questions-page {
  padding: 8px 16px 12px 16px;
  height: calc(100vh - var(--app-header-height, 96px));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-12, 12px);
}

.plan-layout,
.questions-layout {
  display: grid;
  grid-template-columns: 2fr 8fr;
  gap: 15px;
  flex: 1;
  min-height: 0;
  height: 100%;
  position: relative;
}

.plan-content {
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-8);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px;
}

/* ----------------------------------------
   筛选工具栏 - 固定在顶部
   ---------------------------------------- */
.questions-filters {
  flex-shrink: 0;
}

/* 修复筛选器控件靠右布局 - 覆盖全局的 row-reverse */
.wrong-questions-page .filter-toolbar-controls,
.favoritebooks-page .filter-toolbar-controls {
  flex-direction: row;
}

/* ----------------------------------------
   题目列表 - 可滚动区域
   ---------------------------------------- */
.questions-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  margin-top: 10px;
  padding-right: 4px;
}

.list-header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 200px 160px;
  gap: var(--space-16, 16px);
  align-items: center;
  padding: var(--space-16, 16px) var(--space-20, 20px);
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  color: var(--color-white, white);
  border-radius: var(--radius-12, 12px);
  font-size: var(--text-14, 14px);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ----------------------------------------
   题目项
   ---------------------------------------- */
.question-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 200px 160px;
  gap: var(--space-16, 16px);
  align-items: start;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-16, 16px);
  padding: var(--space-20, 20px);
  margin-bottom: var(--space-16, 16px);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.08));
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.question-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-gray-1200, #e5e7eb);
  opacity: 1;
  transition: background 0.3s ease;
}

.question-item:hover {
  box-shadow: var(--shadow-md, 0 8px 25px rgba(0, 0, 0, 0.12));
  border-color: var(--color-indigo-200, #c7d2fe);
}

.question-item:hover::before {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}

.question-item--disabled {
  opacity: 0.6;
}

/* ----------------------------------------
   复选框
   ---------------------------------------- */
.question-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-checkbox input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ----------------------------------------
   题目内容
   ---------------------------------------- */
.question-content {
  padding: 8px var(--space-12, 12px);
  min-width: 0;
}

.question-header {
  display: flex !important;
  gap: 15px !important;
  row-gap: var(--space-12, 12px) !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: var(--space-12, 12px);
  flex-wrap: wrap !important;
}

/* ----------------------------------------
   标签样式
   ---------------------------------------- */
.question-source {
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.my-question {
  background: linear-gradient(135deg, var(--color-blue-500, #3b82f6) 0%, var(--color-blue-600, #2563eb) 100%);
  color: var(--color-white, white);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.admin-question {
  background: linear-gradient(135deg, var(--color-purple-500, #8b5cf6) 0%, var(--color-purple-600, #7c3aed) 100%);
  color: var(--color-white, white);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.question-subject {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.question-type {
  background: linear-gradient(135deg, var(--color-cyan-500, #06b6d4) 0%, var(--color-cyan-600, #0891b2) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.question-difficulty {
  background: linear-gradient(135deg, var(--color-amber-500, #f59e0b) 0%, var(--color-amber-600, #d97706) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.question-grade {
  background: linear-gradient(135deg, var(--color-emerald-500, #10b981) 0%, var(--color-emerald-600, #059669) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* ----------------------------------------
   状态标签
   ---------------------------------------- */
.status-badge {
  color: var(--color-white, #fff);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.books-status-badge--pinned {
  background: #fb923c;
}

/* ----------------------------------------
   题目文本
   ---------------------------------------- */
.question-text {
  color: var(--color-gray-700, #1f2937);
  font-size: var(--text-15, 15px);
  line-height: 1.7;
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-10, 10px);
  border: 1px solid var(--color-gray-1200, #e5e7eb);
  box-shadow: none;
}

.books-question-text {
  display: block;
}

.books-question-text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.question-text--empty {
  color: var(--color-gray-400, #999);
}

/* ----------------------------------------
   底部标签区域
   ---------------------------------------- */
.question-meta {
  display: flex;
  gap: var(--space-16, 16px);
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  color: var(--color-gray-400, #64748b);
  font-size: var(--text-13, 13px);
  margin-top: var(--space-12, 12px);
  padding-top: var(--space-12, 12px);
  border-top: 1px solid var(--color-gray-1100, #e2e8f0);
}

.question-tags {
  display: flex;
  gap: var(--space-12, 12px);
  row-gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.question-tags .tag {
  background: linear-gradient(135deg, var(--color-gray-100, #f3f4f6) 0%, var(--color-gray-200, #e5e7eb) 100%);
  color: var(--color-gray-700, #374151);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-size: var(--text-12, 12px);
  font-weight: 500;
  border: 1px solid var(--color-gray-300, #d1d5db);
}

.question-tags .tag-source {
  background: linear-gradient(135deg, var(--color-blue-50, #eff6ff) 0%, var(--color-blue-100, #dbeafe) 100%);
  color: var(--color-blue-700, #1d4ed8);
  border-color: var(--color-blue-200, #bfdbfe);
}

/* ----------------------------------------
   统计信息
   ---------------------------------------- */
.question-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 10px var(--space-12, 12px);
  background: linear-gradient(135deg, var(--color-gray-1300, #f8fafc) 0%, var(--color-gray-1000, #f1f5f9) 100%);
  border-radius: var(--radius-12, 12px);
  border: 1px solid var(--color-gray-1100, #e2e8f0);
  min-width: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.stat-value {
  font-weight: 700;
  color: var(--color-gray-700, #1e293b);
  font-size: var(--text-20, 20px);
  line-height: 1.2;
}

.stat-value--small {
  font-size: 12px;
}

/* ----------------------------------------
   操作按钮
   ---------------------------------------- */
.question-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  row-gap: 8px;
}

.card-icon-btn {
  appearance: none;
  background: var(--color-slate-100, #f1f5f9);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  color: var(--color-gray-600, #334155);
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.card-icon-btn:hover {
  background: var(--color-slate-200, #e2e8f0);
}

.card-icon-btn.view {
  background: var(--color-amber-500, #f59e0b);
  color: var(--color-white, #fff);
  border-color: var(--color-amber-500, #f59e0b);
}

.card-icon-btn.view:hover {
  background: var(--color-amber-600, #d97706);
  border-color: var(--color-amber-600, #d97706);
}

.card-icon-btn.primary {
  background: var(--primary-color, #3b82f6);
  color: var(--color-white, #fff);
  border-color: var(--primary-color, #3b82f6);
}

.card-icon-btn.primary:hover {
  background: var(--color-blue-600, #2563eb);
  border-color: var(--color-blue-600, #2563eb);
}

.card-icon-btn.secondary {
  background: var(--color-slate-100, #f1f5f9);
  color: var(--color-gray-600, #334155);
  border-color: var(--color-gray-200, #e5e7eb);
}

.card-icon-btn.secondary:hover {
  background: var(--color-slate-200, #e2e8f0);
}

/* ----------------------------------------
   收藏项特定样式
   ---------------------------------------- */
.favorites-item__remove-btn {
  color: var(--color-success, #10b981);
}

/* ----------------------------------------
   响应式
   ---------------------------------------- */
@media (max-width: 768px) {
  .plan-layout,
  .questions-layout {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr !important;
  }

  .plan-content {
    margin-top: 12px;
  }

  .list-header,
  .question-item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .question-stats {
    display: none;
  }
}
.wrong-questions-page {
  padding: 0;
  height: 100%;
}

.wrong-questions-page .plan-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  height: 100%;
  min-height: calc(100vh - var(--app-header-height, 96px) - 24px);
}

.wrong-questions-page .plan-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

/* 筛选工具栏 - 固定在顶部 */
.wrong-questions-page .questions-filters {
  flex-shrink: 0;
}

/* 修复筛选器控件靠右布局 - 覆盖全局的 row-reverse */
.wrong-questions-page .filter-toolbar-controls {
  flex-direction: row;
}

/* 题目列表 - 可滚动区域 */
.wrong-questions-page .questions-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ============================================
   侧边栏样式
   ============================================ */
.wrong-book-sidebar {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 16px;
  overflow-y: auto;
}

.wrong-book-sidebar__header {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1e293b;
}

.wrong-book-sidebar__tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wrong-book-sidebar__grade {
  border-radius: 8px;
  overflow: hidden;
}

.wrong-book-sidebar__grade-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wrong-book-sidebar__grade-header:hover {
  background-color: #f1f5f9;
}

.wrong-book-sidebar__grade-header--expanded {
  background-color: #f8fafc;
}

.wrong-book-sidebar__toggle {
  margin-right: 6px;
  transition: transform 0.2s ease;
}

.wrong-book-sidebar__toggle--expanded {
  transform: rotate(90deg);
}

.wrong-book-sidebar__subjects {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wrong-book-sidebar__subject {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.wrong-book-sidebar__subject:hover {
  background-color: #f1f5f9;
}

.wrong-book-sidebar__subject--selected {
  background-color: #eff6ff;
  color: #2563eb;
}

.wrong-book-sidebar__subject-icon {
  margin-right: 8px;
  font-size: 16px;
}

/* ============================================
   筛选工具栏样式
   ============================================ */
.wrong-book-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.wrong-book-filter-bar__search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

.wrong-book-filter-bar__select {
  min-width: 120px;
}

.wrong-book-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ============================================
   题目列表样式
   ============================================ */
.wrong-question-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.wrong-question-list__header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-weight: 500;
  color: #64748b;
}

.wrong-question-list__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================
   错题项样式
   ============================================ */
.wrong-question-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.wrong-question-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.wrong-question-item--disabled {
  opacity: 0.6;
  background: #f8fafc;
}

.wrong-question-item--selected {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.wrong-question-item__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

.wrong-question-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wrong-question-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wrong-question-item__source {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.wrong-question-item__source--mine {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.wrong-question-item__source--admin {
  background-color: #fef3c7;
  color: #92400e;
}

.wrong-question-item__subject {
  font-size: 13px;
  color: #64748b;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 4px;
}

.wrong-question-item__type {
  font-size: 13px;
  color: #64748b;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 4px;
}

.wrong-question-item__difficulty {
  font-size: 13px;
  color: #f59e0b;
  letter-spacing: 1px;
}

.wrong-question-item__grade {
  font-size: 13px;
  color: #64748b;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 4px;
}

.wrong-question-item__pinned {
  font-size: 12px;
  padding: 2px 8px;
  background: #fb923c;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 500;
}

.wrong-question-item__text {
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
}

.wrong-question-item__text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wrong-question-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wrong-question-item__date {
  font-size: 12px;
  color: #94a3b8;
}

.wrong-question-item__tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wrong-question-item__tag {
  font-size: 12px;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 4px;
}

.wrong-question-item__tag--source {
  background: #fef3c7;
  color: #92400e;
}

/* ============================================
   统计信息样式
   ============================================ */
.wrong-question-item__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 80px;
  padding: 0 12px;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

.wrong-question-item__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wrong-question-item__stat-label {
  font-size: 11px;
  color: #94a3b8;
}

.wrong-question-item__stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

/* ============================================
   操作按钮样式
   ============================================ */
.wrong-question-item__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wrong-question-item__action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: #64748b;
}

.wrong-question-item__action-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.wrong-question-item__action-btn--view:hover {
  background: #eff6ff;
  color: #2563eb;
}

.wrong-question-item__action-btn--pin:hover {
  background: #fef3c7;
  color: #d97706;
}

.wrong-question-item__action-btn--delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

.wrong-question-item__action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================
   标签编辑样式
   ============================================ */
.wrong-question-edit-tags {
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.wrong-question-edit-tags__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ============================================
   按钮样式
   ============================================ */
.wrong-book-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.wrong-book-btn--primary {
  background: #2563eb;
  color: #ffffff;
}

.wrong-book-btn--primary:hover {
  background: #1d4ed8;
}

.wrong-book-btn--secondary {
  background: #f1f5f9;
  color: #64748b;
}

.wrong-book-btn--secondary:hover {
  background: #e2e8f0;
}

.wrong-book-btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* ============================================
   分页样式
   ============================================ */
.wrong-book-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.wrong-book-pagination__info {
  font-size: 14px;
  color: #64748b;
}

.wrong-book-pagination__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================
   空状态样式
   ============================================ */
.wrong-book-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  color: #64748b;
}

.wrong-book-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.wrong-book-empty__title {
  font-size: 18px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.wrong-book-empty__desc {
  font-size: 14px;
  color: #94a3b8;
}

/* ============================================
   加载状态样式
   ============================================ */
.wrong-book-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 16px;
  color: #64748b;
}

.wrong-book-loading__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: wrongBookSpin 1s linear infinite;
}

@keyframes wrongBookSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   响应式样式
   ============================================ */
@media (max-width: 1024px) {
  .wrong-questions-page .plan-layout {
    grid-template-columns: 240px 1fr;
  }
}

@media (max-width: 768px) {
  .wrong-questions-page .plan-layout {
    grid-template-columns: 1fr;
  }

  .wrong-book-sidebar {
    display: none;
  }

  .wrong-book-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .wrong-book-filter-bar__search {
    max-width: none;
  }

  .wrong-question-item {
    flex-direction: column;
  }

  .wrong-question-item__stats {
    flex-direction: row;
    border-left: none;
    border-right: none;
    border-top: 1px solid #e2e8f0;
    padding: 12px 0 0;
    width: 100%;
  }

  .wrong-question-item__actions {
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
  }
}.confirm-popover { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-10); box-shadow: var(--shadow-popover); padding: 10px var(--space-12); z-index: var(--z-popover); }
.confirm-popover.down::before { content: ''; position: absolute; top: -8px; left: var(--space-16); border-left: var(--space-8) solid transparent; border-right: var(--space-8) solid transparent; border-bottom: var(--space-8) solid var(--color-gray-200); }
.confirm-popover.down::after { content: ''; position: absolute; top: -7px; left: var(--space-16); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--color-white); }
.confirm-popover.up::before { content: ''; position: absolute; bottom: -8px; left: var(--space-16); border-left: var(--space-8) solid transparent; border-right: var(--space-8) solid transparent; border-top: var(--space-8) solid var(--color-gray-200); }
.confirm-popover.up::after { content: ''; position: absolute; bottom: -7px; left: var(--space-16); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--color-white); }
.confirm-title { font-size: var(--text-14); font-weight: 600; color: var(--color-slate-900); }
.confirm-sub { font-size: var(--text-12); color: var(--color-slate-500); margin-top: 4px; }
.confirm-actions { display: flex; gap: var(--space-8); justify-content: flex-end; margin-top: 10px; }.import-page { }
.import-page__header { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); margin-bottom: var(--space-16); }
.import-header-row { width: 100%; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.import-title { font-size: var(--text-24); font-weight: 600; color: var(--color-slate-800); }
.import-file-name { font-size: var(--text-24); font-weight: 500; color: var(--color-gray-1600); }
.import-page__subtitle { color: var(--color-gray-1600); font-size: 15px; font-weight: 500; line-height: 1.6; }
.import-summary-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); margin-bottom: 12px; background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%); border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); padding: var(--space-12) var(--space-16); box-shadow: var(--shadow-sm); }
.import-summary-bar__left { display: flex; align-items: center; gap: var(--space-12); }
.import-summary-bar__left .import-back-btn { display: inline-flex; align-items: center; gap: 6px; padding-left: 0; padding-right: 0; color: var(--color-gray-1500); font-weight: 500; }
.import-back-btn, .import-back-btn:link, .import-back-btn:visited, .import-back-btn:hover, .import-back-btn:focus { text-decoration: none; }
.import-back-btn-arrow { font-size: 15px; line-height: 1; }
.import-summary-divider { width: 1px; height: 22px; background: var(--color-gray-200); }
.import-summary-bar__left .btn, .import-summary-bar__left .btn:hover, .import-summary-bar__left .btn:focus { transform: none; box-shadow: none; height: var(--space-36); padding: 0 var(--space-14); }
.import-summary-bar__right { flex: 1; display: flex; justify-content: flex-end; border-left: none; padding-left: 0; }
.import-summary-bar__right .questions-stats { margin: 0; gap: var(--space-12); justify-content: flex-end; }
.import-page__actions { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); padding: var(--space-20); margin-bottom: var(--space-20); box-shadow: var(--shadow-sm); }
.import-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.import-form .form-row { display: flex; flex-direction: column; gap: var(--space-8); }
.form-label { font-size: var(--text-13); color: var(--color-gray-3400); }
.form-input, .form-select, .form-textarea { padding: 10px var(--space-12); border: 1px solid var(--color-gray-300); border-radius: var(--radius-10); background: var(--color-white); font-size: var(--text-14); }
.form-textarea { resize: vertical; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-start; margin-top: var(--space-8); }
.import-page__list .list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.job-list { border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); overflow: hidden; background: var(--color-white); }
.job-list__row { display: grid; grid-template-columns: 0.6fr 2fr 0.8fr 1fr 2fr 0.7fr 1.4fr 1.6fr; gap: var(--space-12); align-items: center; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-gray-100); }
.job-list__row--head { background: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-indigo-500) 100%); color: var(--color-white); font-weight: 600; }
.job-list__row:last-child { border-bottom: none; }
.job-list__cell { font-size: var(--text-14); color: var(--color-gray-1600); }
.job-list__file .file-name { font-weight: 600; color: var(--color-slate-900); }
.job-list__file .file-meta { color: var(--color-slate-500); font-size: var(--text-12); }
.progress-bar-container { width: 100%; }
.progress-bar-track { height: var(--space-8); background: var(--color-gray-200); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar-fill { height: var(--space-8); background: linear-gradient(90deg, var(--color-blue-500), var(--color-green-500)); }
.import-review-page { width: 100%; max-width: none; background: var(--color-white); border-radius: var(--radius-8); }
.import-review-page .questions-list .list-header, .import-review-page .question-item { grid-template-columns: 1fr minmax(120px, 160px); }
.import-review-page .question-item { gap: var(--space-24); }
.import-review-page .question-item { border-color: var(--color-gray-200); box-shadow: var(--shadow-sm); }
.import-review-page .question-item:hover { box-shadow: var(--shadow-filter-hover); }
.import-review-page .question-actions { display: flex; justify-content: flex-start; align-items: center; gap: var(--space-8); }
.import-review-page .question-actions { border-top: none; }
.import-review-page .question-content { border-radius: var(--radius-12); }
.import-review-page .question-content { background: transparent; padding: 0; border: none !important; }
.import-page, .import-review-page, .job-list, .job-list__cell, .draft-list, .draft-list__cell, .draft-preview, .form-input, .form-select, .form-textarea { font-family: SimSun, "宋体", serif; font-size: 10.5pt; line-height: 1.4; }
.draft-list { border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); background: var(--color-white); overflow: hidden; }
.draft-list__row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1.6fr; gap: var(--space-12); align-items: start; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-gray-100); }
.draft-list__row--head { background: linear-gradient(135deg, var(--color-amber-500) 0%, var(--color-orange-500) 100%); color: var(--color-white); font-weight: 600; }
.draft-list__row:last-child { border-bottom: none; }
.draft-list__cell textarea.form-textarea { width: 100%; min-height: var(--height-textarea-min); }
.draft-list__cell .form-select { width: 100%; }
.draft-preview { margin-top: var(--space-8); padding: 10px var(--space-12); border: 1px dashed var(--color-gray-200); border-radius: var(--radius-10); background: var(--color-gray-50); color: var(--color-slate-900); }
.status-badge.approved { background: var(--color-green-500); color: var(--color-white); }
.status-badge.rejected { background: var(--color-red-500); color: var(--color-white); }
.status-badge.draft { background: var(--color-slate-500); color: var(--color-white); }
.review-table { border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); background: var(--color-white); overflow: hidden; }
.review-table__row { display: grid; grid-template-columns: 3fr 1fr; gap: var(--space-12); align-items: start; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-gray-100); }
.review-table__row:hover { background: var(--color-gray-1300); }
.review-table__row--head { background: linear-gradient(135deg, var(--color-blue-100) 0%, var(--color-blue-500) 100%); color: var(--color-white); font-weight: 600; }
.review-table__row:last-child { border-bottom: none; }
.review-table__cell { font-size: var(--text-14); color: var(--color-gray-1600); }
.review-table__cell--fixed { overflow: hidden; }
.review-table__cell:last-child { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); }
.question-fixed { display: flex; flex-direction: column; gap: var(--space-8); }
.question-meta { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tag { display: inline-flex; align-items: center; padding: var(--space-4) var(--space-8); background: var(--color-gray-100); color: var(--color-gray-1600); border-radius: var(--radius-12); font-size: var(--text-12); }
.tag--subject { background: var(--color-purple-100); color: var(--color-purple-800); }
.tag--grade { background: var(--color-blue-200); color: var(--color-blue-900); }
.tag--type { background: var(--color-gray-2600); color: var(--color-amber-800); }
.tag--status { background: var(--color-gray-1200); color: var(--color-gray-3200); }
.tag--status-pending { background: var(--color-gray-1400); color: var(--color-slate-500); }
.tag--status-draft { background: var(--color-blue-100); color: var(--color-blue-800); }
.tag--status-active { background: var(--color-success-100); color: var(--color-success-800); }
.tag--status-archived { background: var(--color-danger-100); color: var(--color-danger-900); }
.question-content { padding: var(--space-12) var(--space-14); border: 1px dashed var(--color-gray-200); border-radius: var(--radius-12); background: #fcfdff; color: var(--color-slate-900); }
.import-review-page .question-content { border: none !important; background: transparent; padding: 0; }
.question-options { display: flex; flex-direction: column; gap: 6px; }
.option-item { display: flex; align-items: center; gap: var(--space-8); }
.option-label { width: var(--width-option-label); font-weight: 600; }
.answer-line, .explain-line { display: flex; align-items: start; gap: var(--space-8); }
.answer-label, .explain-label { width: var(--space-48); color: var(--color-gray-3400); }
.answer-text, .explain-text { color: var(--color-slate-900); }
.import-review-page .question-text, .import-review-page .question-header, .import-review-page .question-subject, .import-review-page .question-type, .import-review-page .question-grade, .import-review-page .question-tags .tag, .import-review-page .status-badge { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif; }
@media (max-width: 960px) {
  .import-header-row { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .import-file-name { font-size: 18px; font-weight: 500; }
  .import-summary-bar { flex-direction: column; align-items: flex-start; gap: var(--space-12); }
  .import-summary-bar__right .questions-stats { justify-content: flex-start; gap: 10px; width: 100%; }
  .import-summary-bar__right { border-left: none; border-top: 1px solid var(--color-gray-200); padding-left: 0; padding-top: var(--space-12); }
}
@media (max-width: 1024px) {
  .job-list__row { grid-template-columns: 0.6fr 1.8fr 0.8fr 1fr 1.8fr 0.7fr 1.2fr 1.4fr; }
  .draft-list__row { grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1.6fr; }
}
@media (max-width: 768px) {
  .import-form { grid-template-columns: 1fr; }
  .job-list__row { grid-template-columns: 0.6fr 1.4fr 0.8fr 1fr 1.6fr 0.8fr 1.2fr 1.2fr; }
  .draft-list__row { grid-template-columns: 1fr; }
  .review-table__row { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .import-review-page .questions-list .list-header, .import-review-page .question-item { grid-template-columns: 1fr; }
  .import-review-page .question-actions { grid-column: 1; margin-top: var(--space-12); justify-content: flex-end; }
}.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: var(--space-20); z-index: var(--z-modal); }
.modal-content { background: var(--color-white); border-radius: var(--radius-12); box-shadow: var(--shadow-modal); overflow: hidden; }
.modal-content.modal-content--wide { max-width: var(--width-modal-wide); width: 95vw; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-16) var(--space-20); border-bottom: 1px solid #f0f0f0; }
.modal--preview .modal-close-btn { display: none; }
.import-review-modal .modal-header { border-bottom: none; }
.review-modal .preview-section .question-meta { border-top: none; padding-top: 0; }
.modal-body { padding: var(--space-16) var(--space-20); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-12); padding: var(--space-12) var(--space-20); border-top: 1px solid #f0f0f0; background: var(--color-white); position: sticky; bottom: 0; z-index: var(--z-modal-footer); }
.section-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.section-col { display: flex; flex-direction: column; gap: var(--space-8); }
.label-text { font-size: var(--text-13); color: var(--color-gray-3400); font-weight: 500; }
.status-radio-group { display: flex; gap: var(--space-16); align-items: center; }
.status-radio-group label { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-3400); }.review-modal { display: flex; flex-direction: column; gap: var(--space-16); }
.review-section { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); padding: var(--space-12) var(--space-14); }
.review-section--meta { background: var(--color-white); }
.meta-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-16); }
.meta-row--four-col { grid-template-columns: minmax(160px, 0.8fr) minmax(320px, 1.6fr) minmax(160px, 0.8fr) minmax(220px, 1fr); }
.meta-col { display: flex; flex-direction: column; gap: 6px; }
.review-modal .meta-row { align-items: center; }
.review-modal .meta-col .label-text { margin-bottom: 6px; }
.meta-col--center { align-items: center; text-align: center; }
.option-edit-row { display: flex; align-items: flex-start; gap: var(--space-8); }
.option-edit-row .btn-danger { writing-mode: horizontal-tb; white-space: nowrap; padding: 6px var(--space-12); min-width: var(--space-56); }
.option-label { width: var(--width-option-label); font-weight: 600; color: var(--color-gray-1600); }
.answer-radio-group, .answer-checkbox-group { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.answer-radio, .answer-checkbox { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--color-gray-1600); white-space: nowrap; }
.answer-radio input, .answer-checkbox input { margin: 0; }
.status-row { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-8); }
.status-row .label-text { margin: 0; }
.status-row--labels { padding-top: 0; }
.status-row--controls { padding-top: 0; }
.review-modal .meta-col .status-row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-12); }
.review-modal .status-row--labels { padding-top: 2px; }
.review-modal .status-row--controls { padding-top: 4px; }
.review-modal .status-radio-group { gap: var(--space-12); }
.review-modal .status-row--labels .label-text:first-child { justify-self: center; }
.review-modal .status-row--controls .status-radio-group { justify-self: center; }
.review-actions { display: flex; justify-content: flex-end; gap: 10px; }
.difficulty-stars { display: inline-flex; gap: 6px; }
.review-modal .meta-col--center .difficulty-stars { justify-content: center; }
.review-modal .meta-col--center { align-items: center; text-align: center; }
.difficulty-star { border: none; background: transparent; cursor: pointer; font-size: var(--text-20); color: var(--color-slate-300); padding: 2px; line-height: 1; }
.difficulty-star--active, .difficulty-star:hover { color: var(--color-amber-500); }
.modal-title { font-size: var(--text-18); font-weight: 600; color: var(--color-slate-900); }
.modal-close-btn { border: none; background: transparent; cursor: pointer; color: var(--color-slate-500); padding: var(--space-4); border-radius: var(--radius-4); width: var(--height-modal-close); height: var(--height-modal-close); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-24); }
.modal-close-btn:hover { background: var(--color-gray-100); color: var(--color-gray-1600); }
.review-modal .question-text { border-left: none; background: var(--color-white); border: 1px solid #f0f0f0; }
.review-modal .options-list { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-8); padding: var(--space-12); }
.review-modal .option-row { display: flex; align-items: flex-start; gap: var(--space-12); padding: 10px var(--space-12); border: 1px solid var(--color-gray-200); border-radius: var(--radius-10); background: #fafafa; margin-bottom: 10px; }
.review-modal .option-row__label { flex: 0 0 var(--width-option-label-circle); width: var(--width-option-label-circle); height: var(--width-option-label-circle); border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-13); color: var(--color-blue-500); background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.25); margin-top: 2px; }
.review-modal .option-row__content { flex: 1; line-height: 1.6; color: var(--color-gray-700); }
.review-modal .option-row__tail { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-8); font-weight: 700; }
.review-modal .icon-check { color: var(--color-orange-600); font-size: var(--text-16); }
.review-modal .status-badge { color: var(--color-slate-900) !important; background: transparent; }
.review-modal .form-input--compact { width: var(--width-form-compact); flex: 0 0 var(--width-form-compact); }
.review-modal .question-explanation { border: 1px solid var(--color-gray-200); border-left: var(--space-4) solid var(--color-amber-500); background: var(--color-gray-3100); border-radius: var(--radius-12); padding: var(--space-12) var(--space-14); box-shadow: var(--shadow-explanation); }
.review-modal .question-explanation h4 { margin-top: 0; margin-bottom: var(--space-8); color: var(--color-amber-800); }
.review-modal .question-explanation .explanation-content { line-height: 1.8; padding-left: var(--space-12); }
@media (max-width: 960px) {
  .meta-row { grid-template-columns: 1fr 1fr; }
  .meta-row--four-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .meta-row { grid-template-columns: 1fr; }
  .option-edit-row { flex-direction: column; }
}

.add-question-dialog__content {
  display: grid;
  row-gap: 14px;
}

.add-question-dialog__form-group {
  display: grid !important;
  grid-template-columns: 50px 1fr !important;
  align-items: center !important;
  column-gap: 8px !important;
}

.add-question-dialog__list-container {
  max-height: 50vh;
  overflow: auto;
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 8px;
  padding: 10px;
}

/* 题目项 - 保持卡片样式 */
.add-question-dialog__question-item {
  display: grid !important;
  grid-template-columns: 1fr 56px !important;
  gap: 12px !important;
  align-items: start !important;
  background: var(--color-white, #fff) !important;
  border: 1px solid var(--color-gray-200, #e5e7eb) !important;
  border-radius: var(--radius-16, 16px) !important;
  padding: var(--space-16, 16px) !important;
  margin-bottom: var(--space-12, 12px) !important;
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.08)) !important;
  position: relative !important;
  overflow: hidden !important;
}

.add-question-dialog__question-item:last-child {
  margin-bottom: 0;
}

/* 左侧装饰条 */
.add-question-dialog__question-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-gray-1200, #e5e7eb);
}

/* 内容区 */
.add-question-dialog__question-item .question-content {
  min-width: 0;
  padding: 0;
}

/* 题目文本 */
.add-question-dialog__question-text {
  max-height: 160px;
  overflow: auto;
  margin: 8px 0 0 0;
  padding: 0;
}

/* 操作区 */
.add-question-dialog__question-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.add-question-dialog__checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.body-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 4px;
}

.body-editor__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.body-editor__content--fixed {
  height: 364px;
  min-height: 364px;
  max-height: 364px;
  flex: none;
}

.body-editor__content--fixed .markdown-editor {
  height: 100%;
}

.body-editor__content--fixed .markdown-editor-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.body-editor__content--fixed .tiptap-editor-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.body-editor__editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.body-editor__error {
  color: var(--color-error, #F44336);
  margin-top: 6px;
  flex-shrink: 0;
}
.notebooks-page .plan-content {
  overflow-y: auto;
}

/* ============================================
   Toast 通知样式
   ============================================ */
.books-toast {
  position: fixed;
  top: calc(var(--app-header-height, 96px) + 2px);
  right: 12px;
  z-index: 3000;
  pointer-events: none;
  background-color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  animation: toastSlideInRight 280ms ease-out;
}

.books-toast--success {
  color: #2563eb;
  border-left: 6px solid #3b82f6;
}

.books-toast--error {
  color: #ef4444;
  border-left: 6px solid #ef4444;
}

/* ============================================
   筛选工具栏样式
   ============================================ */
.books-filter-select {
  padding: 0;
  border: none;
  background: transparent;
}

.books-filter-select--type {
  width: 148px;
}

.books-filter-select--difficulty {
  width: 148px;
}

.books-filter-select--sort {
  width: 160px;
}

.books-filter-select--sort-wide {
  width: 190px;
}

.books-filter-search {
  flex: 1;
  max-width: 420px;
}

.books-filter-search--wide {
  flex: 1;
  max-width: 520px;
}

/* ============================================
   对话框样式
   ============================================ */
.books-dialog {
  width: min(1000px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.books-dialog--tall {
  height: 85vh;
  max-height: 85vh;
}

.books-dialog__header {
  flex-shrink: 0;
}

.books-dialog__title {
  font-size: 18px;
  max-width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.books-dialog__body {
  flex: 1 1 auto;
  overflow-y: auto;
}

.books-dialog__body--flex {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding-bottom: 0;
}

.books-dialog__footer {
  flex-shrink: 0;
}

/* ============================================
   表单样式
   ============================================ */
.books-form-grid {
  display: grid;
  grid-template-columns: 64px 1fr 64px 1fr;
  align-items: center;
  column-gap: 12px;
  min-height: 44px;
}

.books-form-grid--simple {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  column-gap: 8px;
}

.books-form-row {
  display: grid;
  row-gap: 12px;
  flex-shrink: 0;
}

/* ============================================
   页面布局样式
   ============================================ */
.books-page {
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
}

.books-page-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.books-page-header--flex {
  flex-shrink: 0;
}

.books-form-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  flex: 1 1 auto;
  overflow-y: auto;
}

.books-form-card--full {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--app-header-height, 96px) - 24px);
  overflow: hidden;
}

/* ============================================
   题目列表样式
   ============================================ */
.books-question-text {
  display: block;
}

.books-question-text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.books-question-meta {
  display: flex;
  align-items: center;
  justify-content: center;
}

.books-list-header-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.books-list-header-stats {
  flex: 0 0 200px;
  text-align: center;
}

/* ============================================
   难度星级样式
   ============================================ */
.books-difficulty-stars {
  display: inline-flex;
  gap: 6px;
}

.books-difficulty-star {
  font-size: 18px;
}

.books-difficulty-star--filled {
  color: #f59e0b;
}

.books-difficulty-star--empty {
  color: #cbd5e1;
}

/* ============================================
   状态标签样式
   ============================================ */
.books-status-badge--pinned {
  background: #fb923c;
}

/* ============================================
   收藏项样式 (FavoritesItem)
   ============================================ */
.favorites-item__remove-btn {
  color: var(--color-success, #10b981);
}

.question-text--empty {
  color: var(--color-gray-400, #999);
}

.stat-value--small {
  font-size: 12px;
}

/* ============================================
   侧边栏样式
   ============================================ */
.books-sidebar-icon {
  display: flex;
  align-items: center;
  margin-right: 6px;
}

/* Dynamic: color changes based on selection state */
.books-sidebar-icon--selected {
  /* color set via inline style */
}

.books-sidebar-icon--subject {
  margin-right: 6px;
  display: inline-flex;
  vertical-align: middle;
}

.books-sidebar-toggle {
  margin-right: 3px;
}

/* ============================================
   空状态样式
   ============================================ */
.books-empty-block {
  text-align: center;
  padding: 48px 24px;
}

/* ============================================
   复选框样式
   ============================================ */
.books-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ============================================
   笔记编辑页特定样式
   ============================================ */

/* ============================================
   题目列表组件样式 (QuestionList)
   ============================================ */
.books-question-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.books-question-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.books-question-list__item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.books-question-list__item--selected {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.books-question-list__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.notebook-edit-page {
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--app-header-height, 96px) - 24px);
  overflow: hidden;
}

.notebook-edit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.notebook-edit-field {
  margin-top: 12px;
}

/* ============================================
   笔记详情页特定样式
   ============================================ */
.notebook-detail-page {
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
}

.notebook-detail-empty {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.notebook-detail-content {
  padding: 16px;
}

/* ============================================
   笔记本卡片样式
   ============================================ */
.notebook-card__meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 8px;
}

.notebook-card__difficulty {
  margin-left: 6px;
}

/* ============================================   笔记编辑对话框样式   ============================================ */
.notebook-edit-dialog {
  width: min(1000px, 92vw);
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.notebook-edit-dialog__header {
  flex-shrink: 0;
}

.notebook-edit-dialog__title {
  font-size: 18px;
  max-width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-edit-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow: hidden;
  padding-bottom: 0;
}

.notebook-edit-dialog__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notebook-edit-dialog__actions {
  display: flex;
  gap: 12px;
}

/* ============================================   动画   ============================================ */
@keyframes toastSlideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.favorites-item__date {
  font-size: 12px;
}

.favorites-item__remove-btn {
  color: var(--color-success, #10b981);
}

.favorites-item__missing-content {
  color: var(--color-text-muted, #999);
}

.folder-tree__grade-icon {
  margin-right: 3px;
}

.folder-tree__subject-icon {
  margin-right: 6px;
  display: inline-flex;
  vertical-align: middle;
}

.folder-tree__folder-node {
  display: flex;
  align-items: center;
}

.folder-tree__folder-icon {
  margin-left: calc(1.6em + 18px);
}

.folder-tree__rename-input {
  flex: 1 1 auto;
  margin-left: 8px;
  min-width: 0;
}

.folder-tree__folder-actions {
  gap: 6px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.folder-tree__folder-actions--simple {
  gap: 6px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.folder-tree__folder-node:hover .folder-tree__folder-actions--simple {
  opacity: 1;
}

.folder-tree__delete-btn {
  color: var(--color-gray-400, #9ca3af);
  transition: color 0.2s ease;
}

.folder-tree__delete-btn:hover {
  color: var(--color-error, #F44336);
}

.folder-tree__add-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.folder-tree__add-input {
  flex: 1;
  min-width: 0;
}

.notebook-detail-dialog {
  width: min(1000px, 92vw);
  max-height: min(800px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 覆盖 .dialog-content 的 overflow-y: auto，移除外层滚动条 */
.dialog-content.notebook-detail-dialog {
  overflow-y: hidden;
}

.notebook-detail-dialog__header {
  flex-shrink: 0;
}

.notebook-detail-dialog__title {
  font-size: 18px;
  max-width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-detail-dialog__body {
  flex: 1 1 auto;
  overflow-y: auto;
}

.notebook-detail-dialog__footer {
  flex-shrink: 0;
}

.notebook-file-upload {
  padding: 8px 0;
}

.notebook-file-upload__dropzone {
  border: 2px dashed var(--color-border-light, #e2e8f0);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
  opacity: 1;
}

.notebook-file-upload__dropzone--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.notebook-file-upload__dropzone--dragging {
  background: var(--color-primary-light, #eff6ff);
  border-color: var(--color-primary, #3b82f6);
}

.notebook-file-upload__dropzone--has-file {
  background: var(--color-info-light, #f0f9ff);
  border-color: var(--color-primary, #3b82f6);
}

.notebook-file-upload__input {
  display: none;
}

.notebook-file-upload__file-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.notebook-file-upload__file-name {
  color: var(--color-primary, #3b82f6);
  font-weight: 500;
}

.notebook-file-upload__file-size {
  font-size: 12px;
  color: var(--color-text-secondary, #64748b);
  margin-top: 4px;
}

.notebook-file-upload__remove-btn {
  margin-top: 8px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--color-error, #ef4444);
  background: transparent;
  border: 1px solid var(--color-error, #ef4444);
  border-radius: 4px;
  cursor: pointer;
}

.notebook-file-upload__upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.notebook-file-upload__dropzone-text {
  color: var(--color-text-secondary, #64748b);
}

.notebook-file-upload__supported-types {
  font-size: 12px;
  color: var(--color-text-muted, #94a3b8);
  margin-top: 4px;
}

.notebook-file-upload__error {
  color: var(--color-error, #ef4444);
  font-size: 12px;
  margin-top: 8px;
}

.notebook-file-upload__prompt {
  margin-top: 16px;
}

.notebook-file-upload__prompt-textarea {
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
}

.notebook-file-upload__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.form-fields {
  display: grid;
  row-gap: 12px;
  flex-shrink: 0;
}

.form-fields__group {
  display: grid;
  align-items: center;
  column-gap: 12px;
  min-height: 44px;
}

.form-fields__group--full {
  grid-template-columns: 64px 160px 64px 1fr;
}

.form-fields__group--half {
  grid-template-columns: 64px 1fr;
}

.form-fields__label {
  justify-self: start;
  display: flex;
  align-items: center;
}

.form-fields__container {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 44px;
}

.form-fields__error {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  color: var(--color-error, #F44336);
}

.form-fields__required {
  color: var(--color-error, #F44336);
  margin-right: 6px;
}

.form-fields__option-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-fields__star-rating {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.form-fields__star-btn {
  color: var(--color-star-active, #F59E0B) !important;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.form-fields__star-btn--inactive {
  color: var(--color-star-inactive, #CBD5E1) !important;
}

.form-fields__difficulty-container {
  display: flex;
  align-items: center;
  height: 44px;
}

.form-fields__difficulty-half {
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.form-fields__container--summary {
  grid-column: 2 / 3;
}

.form-fields__folder-wrapper {
  display: contents;
}

.form-fields__label--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-fields__container--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.notebook-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 16px;
}
.plan-layout.notebook-layout-grid {
  grid-template-columns: var(--notebook-left-width, 280px) 1fr;
}

/* Resizer - uses CSS variable for dynamic position */
.plan-layout.notebook-layout-grid .plan-resizer.notebook-resizer {
  left: var(--notebook-left-width, 280px);
}

/* Notebook resizer - hidden, only cursor changes */
.plan-layout.notebook-layout-grid .plan-resizer.notebook-resizer {
  background-color: transparent;
  cursor: col-resize;
}

/* Tree Panel */
.notebook-tree {
  position: relative;
}

.notebook-tree-content {
  padding: 24px 16px;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 80px;
}

/* Question Set Card */
.notebook-card {
  margin-bottom: 0;
}

.notebook-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notebook-difficulty-stars {
  margin-left: 6px;
}

.notebook-star {
  color: #cbd5e1;
}

.notebook-star.filled {
  color: #f59e0b;
}

.notebook-excerpt {
  max-height: 200px;
  overflow: hidden;
}

.notebook-date {
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
}

.notebook-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Back Button */
.notebook-back-btn {
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: all 0.2s;
}

.notebook-back-btn:hover {
  color: #1e293b;
}

/* Resizer */
.notebook-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
}

/* Content Panel */
.notebook-content {
  position: relative;
}

/* Body Actions */
.notebook-body-actions {
  justify-content: space-between;
}

/* Excerpt Clamped */
.notebook-excerpt-clamped {
  max-height: 200px;
  overflow: hidden;
}

/* Action Button Danger */
.action-btn-danger {
  margin-right: 10px;
  background-color: #ef4444;
  border-color: #ef4444;
  color: white;
}

/* Notebook Edit Dialog */
.notebook-edit-dialog .dialog-footer {
  flex-shrink: 0;
}

.notebook-tag-manager__tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 32px;
}

.notebook-tag-manager__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

.notebook-tag-manager__tag-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}

.notebook-tag-manager__input-wrapper {
  position: relative;
}

.notebook-tag-manager__input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid var(--color-border, #d1d5db);
}

.notebook-tag-manager__input--error {
  border-color: var(--color-error, #ef4444);
}

.notebook-tag-manager__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background-color: white;
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

.notebook-tag-manager__suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.notebook-tag-manager__suggestion-item--highlighted {
  background-color: var(--color-bg-hover, #f1f5f9);
}

.notebook-tag-manager__error {
  color: var(--color-error, #ef4444);
  font-size: 12px;
  margin-top: 8px;
}

.notebook-tag-manager__hint {
  color: var(--color-text-secondary, #64748b);
  font-size: 12px;
  margin-top: 8px;
}.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-20); padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-gray-200); }
.section-header h2 { font-size: var(--text-20); font-weight: 600; color: #000000; margin: 0; }
.refresh-btn { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-8); padding: var(--space-8) var(--space-16); font-size: var(--text-14); color: var(--color-slate-500); cursor: pointer; transition: var(--transition-base); }
.refresh-btn:hover { background: var(--color-gray-200); color: var(--color-slate-800); }
.activities-list-modern { display: flex; flex-direction: column; gap: var(--space-16); }
.activity-item-modern { display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-16); background: var(--color-gray-50); border-radius: var(--radius-12); border: 1px solid var(--color-gray-200); transition: var(--transition-base); }
.activity-item-modern:hover { background: #f1f5f9; border-color: var(--color-slate-300); }
.activity-icon-modern { width: var(--height-activity-icon); height: var(--height-activity-icon); border-radius: var(--radius-10); display: flex; align-items: center; justify-content: center; font-size: var(--text-18); flex-shrink: 0; }
.activity-content-modern { flex: 1; }
.activity-description { font-size: 15px; color: var(--color-slate-800); font-weight: 500; margin-bottom: var(--space-8); line-height: 1.4; }
.activity-meta { display: flex; align-items: center; gap: var(--space-12); font-size: var(--text-13); }
.activity-user { color: var(--color-slate-500); font-weight: 500; }
.activity-time { color: var(--color-slate-400); }
.activity-priority { padding: 2px var(--space-8); border-radius: var(--radius-12); color: var(--color-white); font-size: var(--text-11); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.content-card--compact {
  margin-bottom: 12px;
}

.exam-rows-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.exam-row {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.exam-row-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exam-row-subject {
  font-weight: 600;
}

.exam-row-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 12px;
  align-items: center;
}

.exam-row-stat {
  font-size: var(--text-14);
}

.exam-row-stat--target {
  color: var(--color-slate-500);
}

.exam-row-stat--actual {
  color: var(--color-sky-500);
}

.exam-totals {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}

/* Wrong Distribution Card Styles */
.wrong-distribution-card {
  margin-bottom: 12px;
}

.wrong-distribution-item {
  margin-bottom: 16px;
}

.wrong-distribution-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.wrong-distribution-label {
  font-weight: 500;
}

.wrong-distribution-value {
  color: var(--color-slate-500);
  font-size: var(--text-14);
}

.wrong-distribution-bar {
  width: 100%;
  height: 8px;
  background-color: var(--color-gray-100);
  border-radius: 4px;
  overflow: hidden;
}

.wrong-distribution-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-red-500), var(--color-rose-500));
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .exam-rows-grid {
    grid-template-columns: 1fr;
  }

  .exam-row-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .exam-totals {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}.admin-overview-modern { padding: 10px; background: var(--color-white); min-height: 100vh; }
.metrics-grid-modern { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--width-metric-card-min), 1fr)); gap: var(--space-24); margin-bottom: var(--space-32); }
.stats-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--width-stats-panel-min), 1fr)); gap: var(--space-24); margin-bottom: var(--space-32); }
.recent-activities-modern { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: var(--radius-12); padding: var(--space-24); box-shadow: 0 var(--space-8) var(--space-32) rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: var(--space-32); }
.quick-actions-modern { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: var(--radius-12); padding: var(--space-24); box-shadow: 0 var(--space-8) var(--space-32) rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
.quick-actions-modern h2 { font-size: var(--text-20); font-weight: 600; color: var(--color-slate-800); margin: 0 0 var(--space-20) 0; padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-gray-200); }
.actions-grid-modern { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); }
.student-dashboard-modern { padding: var(--space-24); background: var(--color-white); min-height: calc(100vh - 80px); border-radius: var(--radius-12); }
.student-dashboard-modern .content-card { background: var(--color-white); border-radius: var(--radius-12); box-shadow: 0 var(--space-8) var(--space-24) rgba(15, 23, 42, 0.08); border: 1px solid var(--color-gray-1200); padding: var(--space-24); margin-bottom: var(--space-24); }
.student-dashboard-modern .content-card--recent-exams { margin-bottom: var(--space-12); margin-top: var(--space-24); }
.student-dashboard-modern .content-card:last-of-type { margin-bottom: 0; }
.admin-overview-modern .content-card { background: var(--color-white); border-radius: var(--radius-12); box-shadow: 0 var(--space-8) var(--space-24) rgba(15, 23, 42, 0.08); border: 1px solid var(--color-gray-1200); padding: var(--space-20) var(--space-24); margin-bottom: var(--space-24); }
.admin-overview-modern .content-card:last-of-type { margin-bottom: 0; }
.student-dashboard-modern .content-card .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-16); }
.admin-overview-modern .content-card .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-16); }
.student-dashboard-modern .content-card .card-title { font-size: var(--text-18); font-weight: 600; color: #000000; }
.admin-overview-modern .content-card .card-title { font-size: var(--text-18); font-weight: 600; color: #000000; }
.student-dashboard-modern .content-card .btn.btn-secondary { min-width: 96px; justify-content: center; }
.admin-overview-modern .content-card .btn.btn-secondary { min-width: 96px; justify-content: center; }
.stats-grid-modern { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--width-stat-card-min), 1fr)); gap: var(--space-16); width: 100%; max-width: none; margin-top: var(--space-20); }

/* Two Column Grid Layout */
.dashboard-two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 992px) {
  .dashboard-two-column-grid {
    grid-template-columns: 1fr;
  }
}.metric-card-modern { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: var(--radius-12); padding: var(--space-24); box-shadow: 0 var(--space-8) var(--space-32) rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); transition: var(--transition-slow); position: relative; overflow: hidden; }
.metric-card-modern:hover { transform: translateY(-4px); box-shadow: 0 var(--space-12) var(--space-40) rgba(0, 0, 0, 0.15); }
.metric-card-modern::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-color, #667eea); }
.metric-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-16); }
.metric-icon-modern { font-size: var(--text-24); width: var(--height-metric-icon); height: var(--height-metric-icon); border-radius: var(--radius-12); display: flex; align-items: center; justify-content: center; background: rgba(102, 126, 234, 0.1); color: var(--card-color, #667eea); }
.metric-title { font-size: var(--text-14); font-weight: 600; color: var(--color-slate-500); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.metric-value-modern { font-size: var(--width-metric-value); font-weight: 700; color: var(--color-slate-800); margin: var(--space-8) 0; line-height: 1; }
.metric-subtitle { font-size: var(--text-14); color: var(--color-slate-500); margin-bottom: var(--space-12); }
.metric-trend { display: flex; align-items: center; gap: 4px; font-size: var(--text-14); font-weight: 600; }
.metric-trend.positive { color: var(--color-green-500); }
.metric-trend.negative { color: var(--color-red-500); }
.metric-trend.neutral { color: var(--color-slate-500); }.stats-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: var(--radius-12); padding: var(--space-24); box-shadow: 0 var(--space-8) var(--space-32) rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-20); padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-gray-200); }
.panel-header h3 { font-size: var(--text-18); font-weight: 600; color: var(--color-slate-800); margin: 0; }
.panel-icon { font-size: var(--text-20); opacity: 0.7; }
.panel-content { display: flex; flex-direction: column; gap: var(--space-16); }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-12) 0; border-bottom: 1px solid #f1f5f9; }
.stat-row:last-child { border-bottom: none; }
.stat-label { font-size: var(--text-14); color: var(--color-slate-500); font-weight: 500; }
.stat-value { font-size: var(--text-16); font-weight: 600; color: var(--color-slate-800); }
.stat-value.positive { color: var(--color-green-500); }
.stat-value.negative { color: var(--color-red-500); }@media (max-width: 1200px) {
  .actions-grid-modern { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .student-dashboard-modern { padding: var(--space-16); }
  .student-dashboard-modern .content-card { padding: var(--space-20); }
  .stats-grid-modern { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-12); width: 100%; max-width: none; }
  .stat-card-modern { padding: var(--space-14); }
  .stat-number-modern { font-size: var(--text-20); }
  .stat-icon-modern { font-size: var(--text-28); }
  .actions-grid-modern { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stat-card-modern { padding: var(--space-12); }
  .stat-number-modern { font-size: var(--text-18); }
  .stat-icon-modern { font-size: var(--text-24); }
  .student-dashboard-modern .content-card { padding: var(--space-16); }
}.stat-card-modern { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: var(--radius-12); padding: var(--space-16); box-shadow: 0 var(--space-8) var(--space-24) rgba(0, 0, 0, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); transition: var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.stat-card-modern::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #667eea, #764ba2); opacity: 0; transition: opacity var(--transition-slow); }
.stat-card-modern:hover::before { opacity: 1; }
.stat-card-modern:hover { transform: translateY(-8px); box-shadow: 0 var(--space-20) var(--space-40) rgba(0, 0, 0, 0.15); }
.stat-card-modern.primary::before { background: linear-gradient(90deg, var(--color-blue-500), #1d4ed8); }
.stat-card-modern.success::before { background: linear-gradient(90deg, var(--color-green-500), #059669); }
.stat-card-modern.warning::before { background: linear-gradient(90deg, var(--color-amber-500), #d97706); }
.stat-card-modern.info::before { background: linear-gradient(90deg, var(--color-cyan-500), var(--color-cyan-600)); }
.stat-card-modern.purple::before { background: linear-gradient(90deg, var(--color-purple-500), var(--color-indigo-500)); }
.stat-card-modern.gradient::before { background: linear-gradient(90deg, #ec4899, #be185d); }
.stat-icon-modern { display: inline-flex; align-items: center; justify-content: center; width: var(--height-metric-icon); height: var(--height-metric-icon); border-radius: var(--radius-12); margin-bottom: var(--space-12); box-shadow: 0 var(--space-8) var(--space-20) rgba(15, 23, 42, 0.12); }
.stat-content-modern { display: flex; flex-direction: column; gap: var(--space-8); }
.student-dashboard-modern .stats-grid-modern .stat-card-modern { box-shadow: none; backdrop-filter: none; border: 1px solid var(--color-gray-1200); }
.student-dashboard-modern .stats-grid-modern .stat-card-modern:hover { transform: none; box-shadow: none; }
.stat-label-modern { font-size: var(--text-14); font-weight: 500; color: var(--color-slate-500); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-number-modern { font-size: var(--width-stat-number); font-weight: 700; color: var(--color-slate-800); line-height: 1; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; }
.stat-trend-modern { font-size: var(--text-12); font-weight: 600; color: var(--color-green-500); background: rgba(16, 185, 129, 0.1); padding: 4px var(--space-8); border-radius: var(--radius-12); display: inline-block; width: fit-content; }.student-dashboard-modern .record-card .btn-light { background: linear-gradient(135deg, var(--color-gray-1200) 0%, var(--color-gray-300) 100%); color: var(--color-gray-700); border: 1px solid var(--color-gray-1200); box-shadow: 0 2px var(--space-8) rgba(209, 213, 219, 0.5); }
.student-dashboard-modern .record-card .btn-light:hover { background: linear-gradient(135deg, var(--color-gray-300) 0%, var(--color-slate-300) 100%); color: var(--color-slate-800); }
.welcome-card-gradient,
.admin-overview-modern .welcome-card-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #4f46e5 100%) !important;
  color: #e5e7eb;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.45);
  border: none;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.welcome-card-grid {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 24px;
  align-items: center;
}

.welcome-card-subtitle {
  font-size: 16px;
  opacity: 0.9;
}

.welcome-card-title {
  font-size: 26px;
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 8px;
}

.welcome-card-description {
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.6;
}

.welcome-card-stats {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.welcome-card-stat-label {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.welcome-card-stat-value {
  font-size: 20px;
  font-weight: 600;
}

.welcome-card-stat-value--income {
  color: #facc15;
}

.welcome-card-stat-value--pending {
  color: #34d399;
}

.actions-grid-modern--admin {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Publisher Welcome Card Variations */
.publisher-dashboard .welcome-card-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #4f46e5 100%);
}

/* Responsive */
@media (max-width: 1200px) {
  .welcome-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .actions-grid-modern--admin {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .actions-grid-modern--admin {
    grid-template-columns: 1fr;
  }

  .welcome-card-title {
    font-size: 22px;
  }
}.feature-doc-loading {
  font-size: 14px;
  color: #64748b;
}

.feature-doc-error {
  font-size: 14px;
  color: #b91c1c;
}

.metrics-grid-modern {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}

.admin-overview-modern .page-container > div:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
  gap: 24px;
  margin-top: 24px;
}

.wrong-distribution-item {
  margin-bottom: 12px;
}

.wrong-distribution-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.wrong-distribution-label {
  font-weight: 500;
}

.wrong-distribution-value {
  color: #6b7280;
  font-size: 14px;
}

.wrong-distribution-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.wrong-distribution-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.cycle-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cycle-session-item {
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cycle-session-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cycle-session-icon--practice {
  background: #dbeafe;
  color: #2563eb;
}

.cycle-session-icon--learning {
  background: #dcfce7;
  color: #16a34a;
}

.cycle-session-content {
  flex: 1;
}

.cycle-session-title {
  font-weight: 500;
}

.cycle-session-meta {
  font-size: 12px;
  color: #6b7280;
}

.exam-row-stat--diff-positive {
  color: #16a34a;
}

.exam-row-stat--diff-negative {
  color: #dc2626;
}

.exam-totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid #e5e7eb;
  display: flex;
  justify-content: space-around;
}

.exam-totals .exam-row-stat {
  text-align: center;
}

.exam-totals-label {
  font-size: 12px;
  color: #6b7280;
}

.exam-totals-value {
  font-size: 20px;
  font-weight: 600;
}

.exam-totals-value--positive {
  color: #16a34a;
}

.exam-totals-value--negative {
  color: #dc2626;
}

.record-card__header--flex {
  display: flex;
  align-items: center;
}

.record-card__title--flex {
  flex: 1;
}

.stats-panels--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.recent-orders-card-item {
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.recent-orders-card-content {
  min-width: 0;
}

.recent-orders-card-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-orders-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.recent-orders-card-price {
  text-align: right;
  white-space: nowrap;
}

.recent-orders-card-price-value {
  font-weight: 600;
  color: #0f172a;
}

.recent-orders-card-income {
  font-size: 12px;
  color: #16a34a;
  margin-top: 2px;
}

.recent-orders-card-settlement {
  font-size: 12px;
  margin-top: 2px;
}

.recent-orders-card-settlement--settled {
  color: #16a34a;
}

.recent-orders-card-settlement--pending {
  color: #f59e0b;
}

.recent-orders-card-empty {
  text-align: center;
  padding: 32px;
  color: #6b7280;
}

.hot-sets-card-item {
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.hot-sets-card-content {
  min-width: 0;
}

.hot-sets-card-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hot-sets-card-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.hot-sets-card-link {
  white-space: nowrap;
}

.hot-sets-card-empty {
  text-align: center;
  padding: 32px;
  color: #6b7280;
}

.activity-icon-modern--dynamic {
  background-color: var(--activity-bg);
  color: var(--activity-color);
}

.activity-priority--dynamic {
  background-color: var(--activity-status-color);
}

.metric-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.metric-icon-modern--dynamic {
  background-color: var(--metric-icon-bg);
  color: var(--metric-icon-color);
}

.metric-value-modern--dynamic {
  color: var(--metric-value-color);
}

.metric-progress {
  margin-top: 12px;
}

.exam-goals-card-empty {
  text-align: center;
  padding: 24px;
  color: #6b7280;
}

.exam-goals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.exam-goals-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.exam-goals-row-subject {
  width: 60px;
  font-weight: 500;
}

.exam-goals-row-target,
.exam-goals-row-actual {
  width: 60px;
  color: #6b7280;
}

.exam-goals-row-diff--positive {
  color: #16a34a;
}

.exam-goals-row-diff--negative {
  color: #dc2626;
}

.exam-goals-totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid #e5e7eb;
  display: flex;
  justify-content: space-around;
}

.exam-goals-totals-item {
  text-align: center;
}

.exam-goals-totals-label {
  font-size: 12px;
  color: #6b7280;
}

.exam-goals-totals-value {
  font-size: 20px;
  font-weight: 600;
}

.exam-goals-totals-value--positive {
  color: #16a34a;
}

.exam-goals-totals-value--negative {
  color: #dc2626;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-bar-track {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-bar-fill--dynamic {
  width: var(--progress-width);
  background-color: var(--progress-color);
  box-shadow: 0 0 10px var(--progress-shadow);
}

.progress-bar-label {
  font-size: 12px;
  color: #6b7280;
  min-width: 40px;
  text-align: right;
}

.stat-card-modern .stat-icon-modern--primary {
  background-color: #eef2ff;
  color: #6366f1;
}

.stat-card-modern .stat-icon-modern--success {
  background-color: #ecfdf3;
  color: #16a34a;
}

.stat-card-modern .stat-icon-modern--warning {
  background-color: #fef3c7;
  color: #d97706;
}

.stat-card-modern .stat-icon-modern--info {
  background-color: #e0f2fe;
  color: #0284c7;
}

.stat-card-modern .stat-icon-modern--purple {
  background-color: #f5f3ff;
  color: #7c3aed;
}

.stat-card-modern .stat-icon-modern--gradient {
  background: linear-gradient(135deg, #e0f2fe, #f5f3ff);
  color: #4f46e5;
}

.stat-card-modern .stat-icon-modern--red-gradient {
  background: linear-gradient(135deg, #fee2e2, #fef9c3);
  color: #b91c1c;
}

.stat-card-modern .stat-icon-modern--sky {
  background-color: #f1f5f9;
  color: #0ea5e9;
}

.stat-card-modern .stat-icon-modern--success-light {
  background-color: #ecfdf5;
  color: #059669;
}
.admin-orders-page {
  /* 继承公共样式 */
}

/* 管理员订单页面特有筛选器布局 */
.admin-orders-page .filters {
  display: flex;
  gap: var(--space-12, 12px);
  margin-bottom: var(--space-12, 12px);
  align-items: center;
  justify-content: space-between;
}

/* 管理员特有的订单详情展开样式 */
.admin-orders-page .order-detail-expand {
  padding: var(--space-16, 16px);
  background-color: var(--color-gray-50, #f9fafb);
  border-top: 1px solid var(--color-gray-200, #e2e8f0);
}

/* 管理员订单统计卡片 */
.admin-orders-page .order-stats-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16, 16px);
  margin-bottom: var(--space-24, 24px);
}

@media (max-width: 1024px) {
  .admin-orders-page .order-stats-card {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .admin-orders-page .order-stats-card {
    grid-template-columns: 1fr;
  }
}
.billing-page {
  /* 继承公共样式 */
}

/* 账单页面特有样式 */
.billing-page .billing-summary {
  background: linear-gradient(135deg, var(--color-primary-50, #eff6ff) 0%, var(--color-primary-100, #dbeafe) 100%);
  border-radius: var(--radius-12, 12px);
  padding: var(--space-24, 24px);
  margin-bottom: var(--space-24, 24px);
}

.billing-page .billing-amount {
  font-size: var(--text-32, 32px);
  font-weight: 700;
  color: var(--color-primary-600, #2563eb);
}

.billing-page .billing-period {
  font-size: var(--text-14, 14px);
  color: var(--color-gray-600, #4b5563);
  margin-top: var(--space-4, 4px);
}

/* 账单明细项 */
.billing-page .billing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-12, 12px) 0;
  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
}

.billing-page .billing-item:last-child {
  border-bottom: none;
}.data-reports-page .stat-card-modern.primary .stat-icon-modern {
  background-color: var(--color-success-100);
  color: var(--color-success-500);
}

.data-reports-page .stat-card-modern.success .stat-icon-modern {
  background-color: var(--color-primary-100);
  color: var(--color-primary-500);
}

.data-reports-page .stat-card-modern.info .stat-icon-modern {
  background-color: var(--color-purple-100);
  color: var(--color-purple-500);
}

.data-reports-page .stat-card-modern.purple .stat-icon-modern {
  background-color: var(--color-success-100);
  color: var(--color-success-600);
}

.data-reports-page .stat-card-modern:not(.primary):not(.success):not(.info):not(.purple) .stat-icon-modern {
  background-color: var(--color-success-100);
  color: var(--color-success-600);
}

.data-reports-page .filter-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.data-reports-page .filter-label {
  font-size: var(--text-14);
  color: var(--color-gray-500);
}

.data-reports-page .date-range {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.data-reports-page .date-sep {
  color: var(--color-gray-500);
}

.data-reports-page .table-container {
  margin-top: var(--space-16);
}

.data-reports-page .empty-cell {
  text-align: center;
  padding: var(--space-16);
}
.publisher-orders-page {
  /* 继承公共样式 */
}

/* 出版商订单页面特有样式 */
.publisher-orders-page .publisher-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16, 16px);
  margin-bottom: var(--space-24, 24px);
}

.publisher-orders-page .stat-card {
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-12, 12px);
  padding: var(--space-20, 20px);
  text-align: center;
}

.publisher-orders-page .stat-value {
  font-size: var(--text-24, 24px);
  font-weight: 700;
  color: var(--color-gray-900, #111827);
}

.publisher-orders-page .stat-label {
  font-size: var(--text-14, 14px);
  color: var(--color-gray-500, #64748b);
  margin-top: var(--space-4, 4px);
}

@media (max-width: 768px) {
  .publisher-orders-page .publisher-stats {
    grid-template-columns: 1fr;
  }
}.publisher-tree .icon-wrapper {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
}

.publisher-tree .count-badge {
  margin-left: auto;
  font-size: var(--text-12);
  color: var(--color-gray-500);
}.admin-settlements-summary .admin-settlements-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-12);
}

.admin-settlements-summary .header-title {
  font-weight: 600;
  color: var(--color-gray-900);
}

.admin-settlements-summary .header-info {
  font-size: var(--text-12);
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.admin-settlements-summary .time-info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: nowrap;
}

.admin-settlements-summary .date-picker-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  white-space: nowrap;
}

.admin-settlements-summary .date-input {
  max-width: 220px;
}.settlement-table .table-wrapper {
  margin-top: var(--space-16);
}

.settlement-table .table-cell-muted {
  font-size: var(--text-12);
  color: var(--color-gray-500);
}

.settlement-table .status-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--text-12);
}

.settlement-table .status-badge.settled {
  color: var(--color-success-700);
  background: var(--color-success-100);
}

.settlement-table .status-badge.pending {
  color: var(--color-warning-700);
  background: var(--color-warning-100);
}

.settlement-table .empty-cell {
  text-align: center;
  padding: var(--space-16);
}.admin-settlements-page .content-section {
  margin-top: var(--space-16);
}

.admin-settlements-page .filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12);
}

.admin-settlements-page .filter-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.admin-settlements-page .table-section {
  margin-top: var(--space-16);
}
.level1-score-chart {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

/* Chart Legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-6);
  padding-top: var(--spacing-4);
}

.chart-legend__series,
.chart-legend__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.chart-legend__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.chart-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid;
  background: white;
}

.chart-legend__line {
  width: 16px;
  height: 0;
  border-top: 2px dashed;
}

.chart-legend__label {
  color: var(--color-gray-600);
}

/* Tooltip Styles */
.chart-tooltip {
  border-radius: var(--radius-md);
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background: white;
  padding: var(--spacing-3);
}

.chart-tooltip__item {
  font-size: var(--font-size-sm);
}

/* Chart Colors */
.chart-color-target {
  stroke: #9ca3af;
}

.chart-color-actual {
  stroke: #3b82f6;
}

.chart-color-tier-1 {
  stroke: #ef4444;
}

.chart-color-tier-2 {
  stroke: #f472b6;
}

.chart-color-tier-3 {
  stroke: #f97316;
}
.ai-chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

/* AI Chat Drawer */
.ai-chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: white;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  z-index: 10000;
  animation: slideIn 0.3s ease-out;
}

/* Note: @keyframes slideInRight is defined in animations.css */

/* Drawer Header */
.ai-chat-drawer__header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-gray-50);
}

.ai-chat-drawer__title {
  margin: 0;
  padding-left: 24px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

.ai-chat-drawer__close {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--spacing-2);
  color: var(--color-gray-400);
  font-size: 24px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-6);
  transition: all 0.2s;
}

.ai-chat-drawer__close:hover {
  color: var(--color-gray-600);
  background: var(--color-gray-200);
}

/* Drawer Content */
.ai-chat-drawer__content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Responsive */
@media (max-width: 768px) {
  .ai-chat-drawer {
    width: 100%;
  }
}
.goal-setting-content {
  padding: var(--spacing-4);
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* Subject Group Form */
.subject-group-form {
  position: relative;
  padding: var(--spacing-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.block-actions {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  display: flex;
  gap: var(--spacing-2);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.2s;
}

.icon-btn:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form Row - scoped to goal-setting-content within modal to avoid conflicts with plan navigation */
.modal-content--plan .goal-setting-content .form-row {
  display: block;
  width: 100%;
  margin-bottom: var(--spacing-4);
}

.modal-content--plan .goal-setting-content .form-row:last-child {
  margin-bottom: 0;
}

/* Form Label - scoped to goal-setting-content within modal to avoid conflicts with plan navigation */
/* Aligned with global forms.css standard */
.modal-content--plan .goal-setting-content .form-row .form-label {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-6);
  font-weight: 500;
  color: var(--color-black);
  font-size: var(--text-14);
}

.modal-content--plan .goal-setting-content .form-row .form-label__text {
  display: block;
  font-weight: 500;
  color: var(--color-black);
  font-size: var(--text-14);
}

/* Form Inputs - scoped to goal-setting-content within modal to avoid conflicts with plan navigation */
/* Aligned with global forms.css standard */
.modal-content--plan .goal-setting-content .form-input,
.modal-content--plan .goal-setting-content .form-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-6);
  font-size: var(--text-14);
  line-height: 1.5;
  color: var(--color-gray-700);
  background: var(--color-white);
  transition: var(--transition-base);
}

.modal-content--plan .goal-setting-content .form-input:focus,
.modal-content--plan .goal-setting-content .form-textarea:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: var(--shadow-filter-focus);
}

.modal-content--plan .goal-setting-content .form-input::placeholder,
.modal-content--plan .goal-setting-content .form-textarea::placeholder {
  color: var(--color-text-muted);
}

.modal-content--plan .goal-setting-content .form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Subject Tags - scoped to goal-setting-content within modal to avoid conflicts with plan navigation */
.modal-content--plan .goal-setting-content .subject-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
}

.modal-content--plan .goal-setting-content .subject-tags--selectable {
  cursor: default;
}

/* Error styles for validation */
.modal-content--plan .goal-setting-content .error-message {
  color: var(--color-error-500);
  font-size: var(--text-13);
  padding: var(--space-8) var(--space-12);
  background: var(--color-error-50);
  border: 1px solid var(--color-error-200);
  border-radius: var(--radius-6);
  margin-bottom: var(--space-8);
}

.modal-content--plan .goal-setting-content .subject-group-form--error {
  border-color: var(--color-error-300);
  background: var(--color-error-50);
}

.modal-content--plan .goal-setting-content .semester-goal-form--error {
  border-color: var(--color-error-300);
  background: var(--color-error-50);
}

/* AI Chat Drawer Styles */
.ai-chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 60%;
  height: 100vh;
  background: var(--color-white);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
}

.ai-chat-drawer__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: calc(var(--z-drawer) - 1);
}

.ai-chat-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.ai-chat-drawer__title {
  margin: 0;
  padding-left: 24px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.ai-chat-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: var(--spacing-2);
  border: none;
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--color-gray-500);
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-chat-drawer__close:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

.ai-chat-drawer__content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ai-chat-drawer__input-area {
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

/* Goal Setting Modal */
.goal-setting-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

.goal-setting-modal__footer-spacer {
  margin-right: auto;
}

/* Score Table */
.score-table__icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--spacing-2);
}

/* Level 2 Edit Form */
.semester-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-4);
}

.semester-goal-card {
  padding: var(--spacing-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.semester-goal-card__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.semester-goal-card__input {
  flex: 1;
}

/* Semester Goal Grid (for Level2EditForm) */
.semester-goal-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 12px;
  align-items: center;
}

/* Flex Align Center */
.flex-align-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-align-center input {
  flex: 1;
}

/* Subject Icon Wrapper */
.subject-icon-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Chart Styles */
.chart-container {
  width: 100%;
  height: 300px;
}

.chart-content {
  padding: var(--spacing-4);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-4);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.chart-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  .ai-chat-drawer {
    width: 100%;
  }

  .semester-goals-grid {
    grid-template-columns: 1fr;
  }
}
.plan-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.plan-layout__left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.plan-layout__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.plan-layout__divider {
  width: 4px;
  cursor: col-resize;
  background: var(--color-gray-200);
  transition: background-color 0.2s;
}

.plan-layout__divider:hover {
  background: var(--color-primary-500);
}

.plan-layout__divider--dragging {
  background: var(--color-primary-600);
}

/* Tree Nodes */
.plan-tree {
  padding: var(--spacing-4);
  overflow-y: auto;
}

.plan-tree__node {
  display: flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s;
}

.plan-tree__node:hover {
  background: var(--color-gray-100);
}

.plan-tree__node--selected {
  background: var(--color-blue-100);
}

.plan-tree__node-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-tree__node-toggle {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.plan-tree__node-children {
  margin-left: var(--spacing-6);
}

/* Node Level Specific Styles */
.plan-tree__node--level-0 {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
}

.plan-tree__node--level-1 {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
}

.plan-tree__node--level-2 {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.plan-tree__node--level-3 {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Custom Node */
.plan-tree__node--custom {
  font-style: italic;
}

.plan-tree__node--custom .plan-tree__node-icon {
  color: var(--color-primary-500);
}

/* Node Actions */
.plan-tree__node-actions {
  margin-left: auto;
  display: flex;
  gap: var(--spacing-1);
  opacity: 0;
  transition: opacity 0.2s;
}

.plan-tree__node:hover .plan-tree__node-actions {
  opacity: 1;
}

.plan-tree__node-action {
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-gray-500);
}

.plan-tree__node-action:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

/* Right Panel */
.plan-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-4);
}

.plan-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--spacing-4);
}

.plan-panel__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.plan-panel__content {
  flex: 1;
  overflow-y: auto;
}

/* Document Styles */
.plan-document {
  padding: var(--spacing-4);
}

.plan-document__section {
  margin-bottom: var(--spacing-6);
}

.plan-document__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 2px solid var(--color-primary-500);
}

.plan-document__subsection {
  margin-bottom: var(--spacing-4);
}

.plan-document__subsection-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

/* Score Table */
.plan-score-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-4);
}

.plan-score-table th,
.plan-score-table td {
  padding: var(--spacing-3);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

.plan-score-table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  background: var(--color-gray-50);
}

.plan-score-table tr:hover {
  background: var(--color-gray-50);
}

/* Subject Tags */
.plan-subject-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.plan-subject-tag--chinese {
  background: var(--color-red-100);
  color: var(--color-red-700);
}

.plan-subject-tag--math {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

.plan-subject-tag--english {
  background: var(--color-purple-100);
  color: var(--color-purple-700);
}

.plan-subject-tag--physics {
  background: var(--color-cyan-100);
  color: var(--color-cyan-700);
}

.plan-subject-tag--chemistry {
  background: var(--color-green-100);
  color: var(--color-green-700);
}

.plan-subject-tag--biology {
  background: var(--color-emerald-100);
  color: var(--color-emerald-700);
}

.plan-subject-tag--history {
  background: var(--color-amber-100);
  color: var(--color-amber-700);
}

.plan-subject-tag--geography {
  background: var(--color-orange-100);
  color: var(--color-orange-700);
}

.plan-subject-tag--politics {
  background: var(--color-pink-100);
  color: var(--color-pink-700);
}

/* Learning Records */
.plan-learning-record {
  padding: var(--spacing-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
}

.plan-learning-record__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.plan-learning-record__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-800);
}

.plan-learning-record__date {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.plan-learning-record__content {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

/* Forms */
.plan-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.plan-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.plan-form__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.plan-form__input {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}

.plan-form__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Toast */
.plan-toast {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  color: white;
  font-weight: var(--font-weight-medium);
  z-index: var(--z-toast);
  animation: plan-toast-slide-in 0.3s ease-out;
}

.plan-toast--success {
  background: var(--color-success-500);
}

.plan-toast--error {
  background: var(--color-error-500);
}

@keyframes plan-toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* AI Chat Drawer */
.plan-ai-drawer {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 400px;
  background: white;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
}

.plan-ai-drawer__header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plan-ai-drawer__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.plan-ai-drawer__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-4);
}

/* Tree Actions Right */
.plan-tree__actions-right {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}

/* Plan Content */
.plan-content {
  overflow: visible;
  padding: 0;
}

.plan-content--visible {
  overflow: visible;
  padding: 0;
}

.plan-tree__grade-icon {
  margin-right: 3px;
}

.plan-tree__subject-icon {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
}

.publisher-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
  gap: 24px;
  margin-top: 24px;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.agreement-checkbox-input {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.agreement-checkbox-label {
  cursor: pointer;
  user-select: none;
}

.ai-model-type-checkboxes {
  display: flex;
  gap: 16px;
}

.ai-model-type-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.content-card--mt-16 {
  margin-top: 16px;
}

.chart-legend__label {
  font-size: 12px;
}

.chart-legend__tiers span {
  font-size: 12px;
}

/* Semester Goal Grid */
.semester-goal-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: center; }
@media (max-width: 640px) { .semester-goal-grid { grid-template-columns: 1fr; } }
.semester-goal-grid select, .semester-goal-grid input { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.semester-goal-grid select:focus, .semester-goal-grid input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.semester-goal-grid label { display: flex; align-items: center; gap: 8px; }
.semester-goal-grid label > input, .semester-goal-grid label > select { flex: 1; }

/* Flex Align Center - for Level2EditForm */
.flex-align-center { display: flex; align-items: center; gap: 8px; }
.flex-align-center input { flex: 1; }

/* Subject Icon Wrapper - for ScoreTable */
.subject-icon-wrapper { display: inline-flex; align-items: center; gap: 6px; }

/* Responsive */
@media (max-width: 768px) {
  .plan-layout {
    flex-direction: column;
  }

  .plan-layout__left {
    width: 100% !important;
    max-height: 40%;
  }

  .plan-layout__divider {
    display: none;
  }

  .plan-ai-drawer {
    width: 100%;
  }
}.practice-records-page .btn { padding: var(--space-8) var(--space-16); border: none; border-radius: var(--radius-6); font-size: var(--text-14); font-weight: 500; cursor: pointer; transition: var(--transition-base); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.practice-records-page .btn:hover { transform: translateY(-1px); box-shadow: 0 4px var(--space-12) rgba(0, 0, 0, 0.15); }
.practice-records-page .btn:active { transform: translateY(0); }
.practice-records-page .btn-sm { padding: 6px var(--space-12); font-size: var(--text-13); }
.practice-records-page .btn-primary { background: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-blue-600) 100%); color: white; box-shadow: 0 2px var(--space-8) rgba(59, 130, 246, 0.25); }
.practice-records-page .filters-toggle { background: var(--color-white); color: var(--color-gray-700); border: 1px solid var(--color-gray-1200); }
.practice-records-page .btn-primary:hover { background: linear-gradient(135deg, var(--color-blue-600) 0%, #1d4ed8 100%); }
.practice-records-page .btn-secondary { background: linear-gradient(135deg, var(--color-gray-600) 0%, #4b5563 100%); color: white; box-shadow: 0 2px var(--space-8) rgba(107, 114, 128, 0.25); }
.practice-records-page .btn-secondary:hover { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); }
.practice-records-page .btn-danger { background: linear-gradient(135deg, var(--color-red-500) 0%, var(--color-red-600) 100%); color: white; box-shadow: 0 2px var(--space-8) rgba(239, 68, 68, 0.25); }
.practice-records-page .btn-danger:hover { background: linear-gradient(135deg, var(--color-red-600) 0%, var(--color-danger-900) 100%); }
.practice-records-page .btn-light { background: linear-gradient(135deg, var(--color-gray-1200) 0%, var(--color-gray-300) 100%); color: var(--color-gray-700); border: 1px solid var(--color-gray-1200); box-shadow: 0 2px var(--space-8) rgba(209, 213, 219, 0.5); }
.practice-records-page .btn-light:hover { background: linear-gradient(135deg, var(--color-gray-300) 0%, var(--color-gray-400) 100%); color: var(--color-slate-800); }
.practice-records-page .btn-info { background: linear-gradient(135deg, var(--color-cyan-500) 0%, var(--color-cyan-600) 100%); color: white; box-shadow: 0 2px var(--space-8) rgba(6, 182, 212, 0.25); }
.practice-records-page .btn-info:hover { background: linear-gradient(135deg, var(--color-cyan-600) 0%, var(--color-cyan-800) 100%); }

/* Load More Button */
.practice-records-page .load-more-container {
  margin-top: var(--space-20);
  text-align: right;
}

.practice-records-page .load-more-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-14);
  color: var(--color-blue-500);
  opacity: 1;
  transition: opacity var(--transition-base);
}

.practice-records-page .load-more-button:hover {
  text-decoration: underline;
}

.practice-records-page .load-more-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}.practice-records-page .record-card { position: relative; background: var(--color-white); border-radius: 14px; border: 1px solid var(--color-gray-1200); box-shadow: 0 4px var(--space-16) rgba(2, 6, 23, 0.06); transition: box-shadow var(--transition-base), transform var(--transition-base); overflow: hidden; }
.practice-records-page .record-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-gray-1200); }
.practice-records-page .record-card--learning, .practice-records-page .record-card--practice { background: var(--color-white); }
.practice-records-page .record-card:hover { transform: translateY(-1px); box-shadow: 0 var(--space-8) var(--space-20) rgba(2, 6, 23, 0.10); }
.practice-records-page .record-card:hover::before, .practice-records-page .record-card:focus::before, .practice-records-page .record-card:focus-within::before { background: var(--color-blue-500); }
.practice-records-page .record-card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) var(--space-16) var(--space-8) var(--space-16); }
.practice-records-page .record-card__title { display: inline-flex; align-items: center; gap: var(--space-8); white-space: nowrap; }
.practice-records-page .record-card__select input[type="checkbox"] { width: var(--height-checkbox); height: var(--height-checkbox); cursor: pointer; }
.practice-records-page .record-card__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-8) var(--space-16) var(--space-12) var(--space-16); }
.practice-records-page .record-card__footer { padding: var(--space-8) var(--space-16) var(--space-12) var(--space-16); }
.practice-records-page .card-actions { display: flex; justify-content: flex-end; gap: var(--space-8); }

/* Learning Record Card Specific Styles */
.practice-records-page .record-card__header {
  display: flex;
  align-items: center;
}

.practice-records-page .record-card__select {
  margin-right: var(--space-8);
}

.practice-records-page .record-card__title {
  flex: 1;
}.practice-records-page .filters-section { background: var(--color-white); padding: var(--space-12) var(--space-16); border-radius: var(--radius-12); margin-bottom: var(--space-12); border: 1px solid var(--color-gray-1200); box-shadow: 0 2px var(--space-8) rgba(2, 6, 23, 0.04); }
.practice-records-page .filters-section.collapsed { display: none; }
.practice-records-page .filters-row { display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap; }
.practice-records-page .filter-group { display: flex; flex-direction: column; gap: 4px; }
.practice-records-page .filter-input { padding: var(--space-12) var(--space-16); border: 2px solid var(--color-gray-200); border-radius: var(--radius-12); font-size: var(--text-14); background: var(--color-white); color: var(--color-gray-1500); min-width: 260px; transition: var(--transition-slow); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04); }
.practice-records-page .filter-input:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 4px var(--space-12) rgba(15, 23, 42, 0.08); }
.practice-records-page .filters-chips { display: flex; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-16) 0 var(--space-16); }
.practice-records-page .chip { display: inline-flex; padding: 4px var(--space-12); border-radius: var(--radius-full); font-size: var(--text-12); color: var(--color-gray-1600); background: rgba(255, 255, 255, 0.6); }
.practice-records-page .chip-clear { background: transparent; color: var(--color-gray-1600); border: 1px dashed rgba(255, 255, 255, 0.6); }
.practice-records-filters { display: flex; gap: var(--space-16); margin-bottom: var(--space-24); padding: var(--space-20); background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-200) 100%); border-radius: var(--radius-12); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); }
.practice-records-filters-row { display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap; width: 100%; }
.practice-search-input { flex: 1; padding: var(--space-12) var(--space-16); border: 2px solid var(--color-gray-200); border-radius: var(--radius-12); font-size: var(--text-14); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); transition: var(--transition-slow); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.practice-search-input:focus { outline: none; border-color: var(--color-blue-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.practice-search-input::placeholder { color: var(--color-slate-400); font-style: italic; }
.practice-filter-select { min-width: 140px; padding: var(--space-12) var(--space-16); border: 2px solid var(--color-gray-200); border-radius: var(--radius-12); font-size: var(--text-14); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); transition: var(--transition-slow); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); cursor: pointer; }
.practice-filter-select:focus { outline: none; border-color: var(--color-blue-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.practice-filter-select:hover { border-color: var(--color-slate-400); transform: translateY(-1px); }.practice-records-page .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-16); padding: var(--space-16) var(--space-20); border-bottom: none; color: var(--color-white); background: linear-gradient(90deg, var(--color-indigo-500) 0%, var(--color-blue-500) 60%, var(--color-sky-500) 100%); border-radius: var(--radius-12); }
.practice-records-page .page-header h1 { margin: 0; font-size: var(--text-28); font-weight: 600; color: var(--color-white); }
.practice-records-page .header-actions { display: flex; gap: var(--space-12); }.practice-records-page { padding: var(--space-24) var(--space-24) var(--space-24) var(--space-20); max-width: 100%; width: 100%; margin: 0 auto; background: var(--color-white); border-radius: var(--radius-12); box-sizing: border-box; }
.practice-records-page .learning-layout { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-12); align-items: start; }
.practice-records-page .learning-stats { padding: 0 var(--space-8) 0 0; width: var(--width-learning-stats); min-width: var(--width-learning-stats); }
.practice-records-page .learning-stats .stats-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
.practice-records-page .learning-content { background: transparent; }
.practice-records-page .content-header { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-20); margin-bottom: var(--space-8); }
.practice-records-page .content-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--color-slate-800); }
.practice-records-page .records-section { background: transparent; border-radius: var(--radius-12); }
.practice-records-page .content-card { background: transparent; border: none; box-shadow: none; }
.practice-records-page .card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-8) var(--space-16) 0 var(--space-16); }
.practice-records-page .cards-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: var(--space-8) var(--space-16) 0 var(--space-16); }
.practice-records-page .select-all { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--text-14); color: var(--color-gray-3400); }
.practice-records-page .select-all input[type="checkbox"] { width: var(--height-checkbox); height: var(--height-checkbox); cursor: pointer; }
.practice-records-page .records-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--width-record-card-min), 1fr)); gap: var(--space-16); padding: 0; }
.practice-records-page .pagination-wrapper { padding: var(--space-8) var(--space-16); opacity: 0.75; background: transparent; }
.practice-records-page .pagination-wrapper.load-more { display: flex; justify-content: flex-end; padding: var(--space-8) 0; }
.practice-records-page .pagination-wrapper.load-more .more-btn { min-width: var(--width-more-btn); border-radius: var(--radius-full); box-shadow: none; }
.practice-records-page .pagination-wrapper.load-more .more-btn .spinner { display: inline-block; width: var(--width-spinner); height: var(--width-spinner); border: 2px solid rgba(255, 255, 255, 0.6); border-top-color: var(--color-white); border-radius: var(--radius-full); margin-left: var(--space-8); animation: pr-spin 0.6s linear infinite; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
.practice-records-page .load-more-sentinel { height: 1px; }
.practice-records-page .pagination-wrapper .pagination-btn { background: transparent; color: var(--color-slate-900); border: none; padding: 6px var(--space-8); }
.practice-records-page .pagination-wrapper .pagination-btn.active { background: rgba(255, 255, 255, 0.5); border-radius: var(--radius-8); }
.practice-records-page .pagination-wrapper .items-per-page-section { display: none; }
.practice-records-page .actions-column { width: var(--width-actions-column); display: flex; gap: var(--space-8); align-items: center; justify-content: flex-start; flex-wrap: nowrap; }
.practice-records-page .actions-column .btn { margin-right: 0; white-space: nowrap; flex-shrink: 0; }

.study-notice-message {
  position: fixed;
  top: 0;
  left: 50%;
  transition: transform 300ms ease;
  z-index: 9999;
  color: #F44336;
  background: transparent;
  padding: 8px 12px;
  font-size: 14px;
}@media (max-width: 768px) {
  .practice-records-page { padding: var(--space-16); }
  .practice-records-page .learning-layout { grid-template-columns: 1fr; }
  .practice-records-page .learning-stats { padding: 0 0 var(--space-8) 0; width: 100%; min-width: auto; }
  .practice-records-page .filters-row { flex-direction: column; align-items: stretch; }
  .practice-records-page .filter-input, .practice-records-page .filter-select { min-width: auto; width: 100%; }
  .practice-records-page .records-grid { grid-template-columns: 1fr 1fr; }
  .practice-records-page .card-actions .btn { padding: 6px var(--space-12); font-size: var(--text-12); }
  .practice-records-filters { flex-direction: column; gap: var(--space-12); padding: var(--space-16); }
  .practice-records-filters-row { flex-direction: column; gap: var(--space-12); }
  .practice-search-input { min-width: auto; width: 100%; }
  .practice-filter-select { min-width: auto; width: 100%; }
}
@media (max-width: 480px) {
  .practice-records-page .page-header h1 { font-size: var(--text-24); }
  .practice-records-page .records-grid { grid-template-columns: 1fr; }
}.practice-records-page .stats-band { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); margin: var(--space-12) 0 var(--space-16) 0; padding: 0 var(--space-20); }
.practice-records-page .stats-band .stats-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); flex: initial; }
.practice-records-page .stats-band .stats-actions { display: inline-flex; gap: var(--space-12); align-items: center; }
.practice-records-page .stat-card { background: var(--color-white); border: 1px solid var(--color-gray-1200); border-radius: 14px; box-shadow: 0 4px var(--space-16) rgba(2, 6, 23, 0.06); padding: var(--space-16); display: flex; flex-direction: column; gap: 4px; }
.practice-records-page .stat-icon { font-size: var(--text-18); line-height: 1; }
.practice-records-page .stat-value { font-size: 22px; font-weight: 700; color: var(--color-slate-800); }
.practice-records-page .stat-label { font-size: var(--text-12); color: var(--color-slate-500); }.practice-records-page .record-type { padding: 4px var(--space-12); border-radius: var(--radius-full); font-weight: 600; font-size: var(--text-12); }
.practice-records-page .record-type.practice { background-color: var(--color-purple-100); color: var(--color-purple-700); }
.practice-records-page .record-type.learning { background-color: var(--color-emerald-500); color: var(--color-emerald-600); }
.practice-records-page .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--space-12); border-radius: var(--radius-full); font-size: var(--text-12); font-weight: 500; background: var(--color-gray-50); color: var(--color-gray-3400); }
.practice-records-page .tag--date { background: var(--color-gray-100); }
.practice-records-page .tag--grade { background: rgba(238, 242, 255, 0.8); color: var(--color-sky-700); }
.practice-records-page .tag--subject { background: rgba(236, 254, 255, 0.8); color: var(--color-sky-600); }
.practice-records-page .tag--phase { background: rgba(253, 230, 138, 0.9); color: var(--color-amber-800); border: 1px solid #fcd34d; }
.practice-records-page .tag--strategy { background: rgba(255, 247, 237, 0.85); color: #c2410c; }
.practice-records-page .tag--strategy.strategy-wrong_first { background: rgba(255, 237, 213, 0.9); color: var(--color-rose-800); border: 1px solid #fdba74; }
.practice-records-page .tag--strategy.strategy-new_first { background: rgba(240, 253, 244, 0.9); color: var(--color-emerald-700); border: 1px solid #86efac; }
.practice-records-page .tag--strategy.strategy-random { background: rgba(239, 246, 255, 0.9); color: var(--color-indigo-900); border: 1px solid #93c5fd; }
.practice-records-page .tag--count { background: rgba(240, 253, 244, 0.85); color: var(--color-emerald-700); }
.practice-records-page .tag--study { background: rgba(224, 231, 255, 0.85); color: var(--color-indigo-800); }
.practice-records-page .accuracy { border-radius: var(--radius-full); padding: 4px var(--space-12); font-size: var(--text-12); font-weight: 500; }
.practice-records-page .accuracy.high { background-color: var(--color-success-100); color: var(--color-emerald-700); }
.practice-records-page .accuracy.medium { background-color: var(--color-gray-3100); color: var(--color-rose-700); }
.practice-records-page .accuracy.low { background-color: rgba(254, 226, 226, 0.9); color: var(--color-rose-700); border: 1px solid #fecaca; }
.practice-records-page .status { padding: 4px var(--space-8); border-radius: 4px; font-weight: 500; font-size: var(--text-13); }
.practice-records-page .status.status-completed { background-color: var(--color-success-100); color: var(--color-emerald-700); }
.practice-records-page .status.status-abandoned { background-color: var(--color-rose-500); color: var(--color-rose-600); }
.practice-records-page .status.status-new { background-color: var(--color-blue-200); color: var(--color-blue-900); }
.practice-records-page .status.status-active { background-color: var(--color-gray-3100); color: var(--color-rose-700); }
.practice-records-page .status.status-studied { background-color: var(--color-blue-100); color: var(--color-indigo-800); }
.practice-records-page .record-type { padding: 4px var(--space-8); border-radius: 4px; font-weight: 500; font-size: var(--text-13); }
.practice-records-page .record-type.practice { background-color: var(--color-purple-100); color: var(--color-purple-700); }
.practice-records-page .record-type.learning { background-color: var(--color-emerald-500); color: var(--color-emerald-600); }
.practice-records-page .strategy { padding: 4px var(--space-8); border-radius: 4px; font-weight: 500; font-size: var(--text-13); background-color: var(--color-gray-100); color: var(--color-gray-3400); }
.qb-form-row {
  display: block;
  margin-bottom: 2px;
}

.qb-form-row--inline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16, 16px);
  margin-bottom: 2px;
}

.qb-form-row--inline .qb-form-group {
  flex: 1;
}

/* ========== 表单标签 ========== */
.qb-form-label {
  display: block;
  font-size: var(--text-14, 14px);
  font-weight: 500;
  color: var(--color-gray-700, #374151);
  margin-bottom: var(--space-8, 8px);
}

.qb-form-label--required::before {
  content: '* ';
  color: var(--color-error-500, #ef4444);
}

/* ========== 表单输入 ========== */
.qb-form-input {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--text-14, 14px);
  line-height: 1.5;
  color: var(--color-gray-900, #111827);
  background-color: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-8, 8px);
  transition: all 0.2s;
}

/* 覆盖 .search-input 的 border: none 样式 */
.search-input.qb-form-input {
  border: 1px solid var(--color-gray-300, #d1d5db);
}

.qb-form-input:hover {
  border-color: var(--color-gray-400, #9ca3af);
}

.qb-form-input:focus {
  outline: none;
  border-color: var(--color-primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.qb-form-input::placeholder {
  color: var(--color-gray-400, #9ca3af);
}

.qb-form-input:disabled {
  background-color: var(--color-gray-50, #f9fafb);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ========== 搜索输入框 ========== */
.qb-search-input {
  border-radius: var(--radius-12, 12px);
  transition: all 0.2s;
}

.qb-search-input:focus {
  border-color: var(--color-primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ========== 表单文本域 ========== */
.qb-form-textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

/* ========== 表单选择器 ========== */
.qb-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 36px;
}

/* ========== 表单错误提示 ========== */
.qb-form-error {
  color: var(--color-error-500, #ef4444);
  font-size: var(--text-12, 12px);
  margin-top: var(--space-4, 4px);
}

.qb-form-error--hidden {
  display: none;
}

/* ========== 表单提示文本 ========== */
.qb-form-hint {
  color: var(--color-gray-500, #6b7280);
  font-size: var(--text-12, 12px);
  margin-top: var(--space-4, 4px);
}

/* ========== 表单组 ========== */
.qb-form-group {
  display: flex;
  flex-direction: column;
}

.qb-form-group--horizontal {
  flex-direction: row;
  align-items: center;
  gap: var(--space-16, 16px);
}

.qb-form-group--horizontal .qb-form-label {
  margin-bottom: 0;
  white-space: nowrap;
}

/* ========== 表单行 ========== */
.qb-form-row-grid {
  display: grid;
  gap: 2px;
}

.qb-form-row-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.qb-form-row-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .qb-form-row-grid--2,
  .qb-form-row-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ========== 图标标签 ========== */
.qb-icon-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qb-icon-label__icon {
  flex-shrink: 0;
}

/* ========== 表单按钮 ========== */
.qb-form-actions {
  display: flex;
  gap: var(--space-12, 12px);
  margin-top: var(--space-24, 24px);
  padding-top: var(--space-24, 24px);
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.qb-form-actions--right {
  justify-content: flex-end;
}

.qb-form-actions--center {
  justify-content: center;
}

/* ========== 表单状态 ========== */
.qb-form-input--error {
  border-color: var(--color-error-500, #ef4444);
}

.qb-form-input--error:focus {
  border-color: var(--color-error-500, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.qb-form-input--success {
  border-color: var(--color-success-500, #16a34a);
}

/* ========== 单选/复选框组 ========== */
.qb-radio-group,
.qb-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12, 12px);
}

.qb-radio-group--inline,
.qb-checkbox-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ========== 文件上传区域 ========== */
.qb-upload-area {
  position: relative;
  border: 2px dashed var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-12, 12px);
  padding: var(--space-24, 24px);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--color-gray-50, #f9fafb);
}

.qb-upload-area:hover {
  border-color: var(--color-primary-500, #3b82f6);
  background-color: rgba(59, 130, 246, 0.05);
}

.qb-upload-area--drag-over {
  border-color: var(--color-primary-500, #3b82f6);
  background-color: rgba(59, 130, 246, 0.1);
}

.qb-upload-area__icon {
  margin-bottom: var(--space-16, 16px);
  color: var(--color-gray-400, #9ca3af);
}

.qb-upload-area__text {
  font-size: var(--text-14, 14px);
  color: var(--color-gray-600, #4b5563);
  margin-bottom: var(--space-8, 8px);
}

.qb-upload-area__hint {
  font-size: var(--text-12, 12px);
  color: var(--color-gray-400, #9ca3af);
}

.qb-upload-area__preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-8, 8px);
  margin-top: var(--space-16, 16px);
}

/* ========== 颜色工具类 ========== */
.qb-text-error {
  color: var(--color-error-500, #ef4444);
}

.qb-text-warning {
  color: var(--color-warning-500, #f59e0b);
}

.qb-text-success {
  color: var(--color-success-500, #16a34a);
}

.qb-text-primary {
  color: var(--color-primary-500, #3b82f6);
}

.qb-text-gray-300 {
  color: var(--color-gray-300, #d1d5db);
}

.qb-text-gray-400 {
  color: var(--color-gray-400, #9ca3af);
}

.qb-text-gray-500 {
  color: var(--color-gray-500, #6b7280);
}

.qb-text-gray-600 {
  color: var(--color-gray-600, #4b5563);
}

.qb-text-gray-700 {
  color: var(--color-gray-700, #374151);
}

.qb-text-gray-900 {
  color: var(--color-gray-900, #111827);
}

/* ========== 背景色工具类 ========== */
.qb-bg-error {
  background-color: var(--color-error-500, #ef4444);
}

.qb-bg-warning {
  background-color: var(--color-warning-500, #f59e0b);
}

.qb-bg-success {
  background-color: var(--color-success-500, #16a34a);
}

.qb-bg-primary {
  background-color: var(--color-primary-500, #3b82f6);
}

.qb-bg-gray-50 {
  background-color: var(--color-gray-50, #f9fafb);
}

.qb-bg-gray-100 {
  background-color: var(--color-gray-100, #f3f4f6);
}

.qb-bg-white {
  background-color: var(--color-white, #ffffff);
}

/* ========== 间距工具类 ========== */
.qb-mt-1 {
  margin-top: var(--space-4, 4px);
}

.qb-mt-2 {
  margin-top: var(--space-8, 8px);
}

.qb-mt-3 {
  margin-top: var(--space-12, 12px);
}

.qb-mt-4 {
  margin-top: var(--space-16, 16px);
}

.qb-mb-1 {
  margin-bottom: var(--space-4, 4px);
}

.qb-mb-2 {
  margin-bottom: var(--space-8, 8px);
}

.qb-mb-3 {
  margin-bottom: var(--space-12, 12px);
}

.qb-mb-4 {
  margin-bottom: var(--space-16, 16px);
}

.qb-p-1 {
  padding: var(--space-4, 4px);
}

.qb-p-2 {
  padding: var(--space-8, 8px);
}

.qb-p-3 {
  padding: var(--space-12, 12px);
}

.qb-p-4 {
  padding: var(--space-16, 16px);
}

/* ========== 字体大小工具类 ========== */
.qb-text-xs {
  font-size: var(--text-12, 12px);
}

.qb-text-sm {
  font-size: var(--text-14, 14px);
}

.qb-text-base {
  font-size: var(--text-16, 16px);
}

.qb-text-lg {
  font-size: var(--text-18, 18px);
}

.qb-text-xl {
  font-size: var(--text-20, 20px);
}

/* ========== 字体粗细工具类 ========== */
.qb-font-normal {
  font-weight: 400;
}

.qb-font-medium {
  font-weight: 500;
}

.qb-font-semibold {
  font-weight: 600;
}

.qb-font-bold {
  font-weight: 700;
}

/* ========== 布局工具类 ========== */
.qb-flex {
  display: flex;
}

.qb-flex-col {
  flex-direction: column;
}

.qb-flex-row {
  flex-direction: row;
}

.qb-items-center {
  align-items: center;
}

.qb-items-start {
  align-items: flex-start;
}

.qb-items-end {
  align-items: flex-end;
}

.qb-justify-center {
  justify-content: center;
}

.qb-justify-between {
  justify-content: space-between;
}

.qb-gap-1 {
  gap: var(--space-4, 4px);
}

.qb-gap-2 {
  gap: var(--space-8, 8px);
}

.qb-gap-3 {
  gap: var(--space-12, 12px);
}

.qb-gap-4 {
  gap: var(--space-16, 16px);
}

.qb-gap-6 {
  gap: var(--space-24, 24px);
}/**
 * 题库模块样式入口
 * 
 * 用于按需加载题库模块样式
 * 通过动态导入此文件，实现样式的按需加载
 */

@import './question-bank.css';
@import './forms.css';
@import './student-question-bank.css';

:root {
  --qb-cart-bg: #f1f5f9;
  --qb-cart-border: #e2e8f0;
  
  --qb-free-bg: #ecfdf5;
  --qb-free-border: #16a34a;
  
  --qb-price-color: var(--color-error-500, #ef4444);
  
  --qb-sidebar-width: 320px;
  --qb-sidebar-min-width: 280px;
  --qb-sidebar-max-width: 480px;
  --qb-resizer-width: 8px;
  
  --qb-card-min-width: 288px;
  --qb-card-height: 234px;
  --qb-card-gap: 16px;
  --qb-card-border-radius: var(--radius-lg, 8px);
  
  --qb-filter-height: 56px;
  --qb-filter-bg: var(--color-gray-50, #f9fafb);
  --qb-filter-border: var(--color-gray-200, #e5e7eb);
}

.question-sets-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.questions-layout {
  display: grid;
  height: 100%;
  position: relative;
}

.plan-tree {
  overflow: auto;
  background: var(--color-gray-50, #f9fafb);
  border-right: 1px solid var(--color-gray-200, #e5e7eb);
}

.plan-content {
  overflow: auto;
  background: var(--color-white, #ffffff);
}

/* ========== 题库卡片按钮变体 ========== */
.card-icon-btn-warning {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

.card-icon-btn-warning:hover {
  background: #d97706;
  border-color: #d97706;
}

.card-icon-btn-success {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

.card-icon-btn-success:hover {
  background: #059669;
  border-color: #059669;
}

.card-icon-btn-primary {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}

.card-icon-btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.card-icon-btn-disabled {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  cursor: default;
}

.card-icon-btn-disabled:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

/* ========== 题库列表网格 ========== */

.plan-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--qb-resizer-width);
  cursor: col-resize;
  z-index: 10;
  background-color: transparent;
}

.plan-resizer--active {
  cursor: col-resize;
}

.question-set-filters {
  display: grid;
  align-items: center;
  gap: var(--space-16, 16px);
  padding: var(--space-16, 16px);
  background: var(--qb-filter-bg);
  border-bottom: 1px solid var(--qb-filter-border);
  min-height: var(--qb-filter-height);
}

.question-set-card {
  position: relative;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--qb-card-border-radius);
  overflow: hidden;
  transition: all 0.2s;
}

.question-set-card:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  transform: translateY(-2px);
}

.question-set-card__cover {
  position: relative;
  width: 100%;
  height: 160px;
  background: var(--color-gray-100, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.question-set-card__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.question-set-card .thumbnail {
  cursor: default;
}

.question-set-card .thumbnail--clickable {
  cursor: zoom-in;
}

.question-set-card__body {
  padding: 0;
}

.question-set-card__title {
  font-size: var(--text-16, 16px);
  font-weight: 600;
  color: var(--color-gray-900, #111827);
  margin-bottom: var(--space-8, 8px);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.question-set-card__meta {
  display: flex;
  gap: var(--space-8, 8px);
  margin-bottom: var(--space-12, 12px);
}

.question-set-card__badge {
  padding: 2px 8px;
  font-size: var(--text-12, 12px);
  border-radius: var(--radius-full, 9999px);
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-600, #6b7280);
}

.question-set-card__price {
  color: var(--qb-price-color);
  font-weight: 600;
  font-size: var(--text-18, 18px);
}

.question-set-card__actions {
  display: flex;
  gap: var(--space-8, 8px);
  margin-top: var(--space-16, 16px);
}

.question-set-card__cart-btn {
  flex: 1;
  padding: var(--space-8, 8px) var(--space-16, 16px);
  border-radius: var(--radius-4, 4px);
  font-size: var(--text-14, 14px);
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  
  &--in-cart {
    background-color: var(--qb-cart-bg);
    color: var(--color-gray-400, #9ca3af);
    border-color: var(--qb-cart-border);
    cursor: default;
  }
  
  &--add {
    background-color: var(--qb-free-bg);
    color: var(--qb-free-border);
    border-color: var(--qb-free-border);
    
    &:hover {
      background-color: var(--qb-free-border);
      color: var(--color-white, #ffffff);
    }
  }
}

.question-set-modal {
  .form-row {
    margin-bottom: var(--space-24, 24px);
  }
  
  .form-label {
    display: block;
    font-size: var(--text-14, 14px);
    font-weight: 500;
    color: var(--color-gray-700, #374151);
    margin-bottom: var(--space-8, 8px);
  }
  
  .form-error {
    color: var(--color-error-500, #ef4444);
    font-size: var(--text-12, 12px);
    margin-top: var(--space-4, 4px);
  }
  
  .form-input {
    width: 100%;
    padding: var(--space-12, 12px);
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-4, 4px);
    font-size: var(--text-14, 14px);
    transition: all 0.2s;
    
    &:focus {
      outline: none;
      border-color: var(--color-primary-500, #3b82f6);
      box-shadow: 0 0 0 3px var(--color-primary-100, rgba(59, 130, 246, 0.1));
    }
  }
  
  .form-textarea {
    min-height: 120px;
    resize: vertical;
  }
  
  .cover-upload {
    position: relative;
    border: 2px dashed var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-lg, 8px);
    padding: var(--space-32, 32px);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      border-color: var(--color-primary-500, #3b82f6);
      background: var(--color-primary-50, rgba(59, 130, 246, 0.05));
    }
  }
  
  .cover-preview {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    background: var(--color-gray-100, #f3f4f6);
  }
}

.question-sets-notice {
  position: fixed;
  top: var(--space-16, 16px);
  right: var(--space-16, 16px);
  z-index: 9999;
  animation: slide-in 0.3s ease-out;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .question-set-filters {
    grid-template-columns: 1fr !important;
  }
  
  .question-set-card {
    min-width: 100%;
  }
  
  .plan-tree {
    display: none;
  }
}

.qb-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qb-text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qb-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qb-hidden {
  display: none !important;
}

.qb-mt-4 {
  margin-top: var(--space-16, 16px);
}

.qb-mb-4 {
  margin-bottom: var(--space-16, 16px);
}

.qb-text-error {
  color: var(--color-error-500, #ef4444);
}

.qb-text-success {
  color: var(--color-success-500, #16a34a);
}

.qb-text-warning {
  color: var(--color-warning-500, #F59E0B);
}

.qb-text-primary {
  color: var(--color-primary-500, #3b82f6);
}

.qb-text-price {
  color: var(--qb-price-color);
}

.qb-bg-error-500 {
  background-color: var(--color-error-500, #ef4444);
}

/* ========== 更多颜色工具类 ========== */
.qb-text-gray-300 {
  color: var(--color-gray-300, #d1d5db);
}

.qb-text-gray-400 {
  color: var(--color-gray-400, #9ca3af);
}

.qb-text-gray-500 {
  color: var(--color-gray-500, #6b7280);
}

.qb-text-gray-600 {
  color: var(--color-gray-600, #4b5563);
}

.qb-text-gray-700 {
  color: var(--color-gray-700, #374151);
}

.qb-text-gray-900 {
  color: var(--color-gray-900, #111827);
}

/* ========== 背景色工具类 ========== */
.qb-bg-gray-50 {
  background-color: var(--color-gray-50, #f9fafb);
}

.qb-bg-gray-100 {
  background-color: var(--color-gray-100, #f3f4f6);
}

.qb-bg-white {
  background-color: var(--color-white, #ffffff);
}

.qb-bg-cart {
  background-color: var(--qb-cart-bg);
}

.qb-bg-free {
  background-color: var(--qb-free-bg);
}

/* ========== 边框工具类 ========== */
.qb-border-gray-200 {
  border-color: var(--color-gray-200, #e5e7eb);
}

.qb-border-gray-300 {
  border-color: var(--color-gray-300, #d1d5db);
}

.qb-border-cart {
  border-color: var(--qb-cart-border);
}

.qb-border-free {
  border-color: var(--qb-free-border);
}

/* ========== 间距工具类 ========== */
.qb-mt-1 {
  margin-top: var(--space-4, 4px);
}

.qb-mt-2 {
  margin-top: var(--space-8, 8px);
}

.qb-mt-3 {
  margin-top: var(--space-12, 12px);
}

.qb-mb-1 {
  margin-bottom: var(--space-4, 4px);
}

.qb-mb-2 {
  margin-bottom: var(--space-8, 8px);
}

.qb-mb-3 {
  margin-bottom: var(--space-12, 12px);
}

.qb-ml-2 {
  margin-left: var(--space-8, 8px);
}

.qb-mr-2 {
  margin-right: var(--space-8, 8px);
}

.qb-p-2 {
  padding: var(--space-8, 8px);
}

.qb-p-3 {
  padding: var(--space-12, 12px);
}

.qb-p-4 {
  padding: var(--space-16, 16px);
}

/* ========== 字体大小工具类 ========== */
.qb-text-xs {
  font-size: var(--text-12, 12px);
}

.qb-text-sm {
  font-size: var(--text-14, 14px);
}

.qb-text-base {
  font-size: var(--text-16, 16px);
}

.qb-text-lg {
  font-size: var(--text-18, 18px);
}

/* ========== 字体粗细工具类 ========== */
.qb-font-normal {
  font-weight: 400;
}

.qb-font-medium {
  font-weight: 500;
}

.qb-font-semibold {
  font-weight: 600;
}

.qb-font-bold {
  font-weight: 700;
}

/* ========== 布局工具类 ========== */
.qb-flex {
  display: flex;
}

.qb-flex-col {
  flex-direction: column;
}

.qb-flex-row {
  flex-direction: row;
}

.qb-inline-flex {
  display: inline-flex;
}

.qb-items-center {
  align-items: center;
}

.qb-items-start {
  align-items: flex-start;
}

.qb-align-middle {
  vertical-align: middle;
}

.qb-justify-center {
  justify-content: center;
}

.qb-justify-between {
  justify-content: space-between;
}

.qb-ml-auto {
  margin-left: auto;
}

.qb-gap-1 {
  gap: var(--space-4, 4px);
}

.qb-gap-1\.5 {
  gap: calc(var(--space-4, 4px) * 1.5);
}

.qb-gap-2 {
  gap: var(--space-8, 8px);
}

.qb-gap-3 {
  gap: var(--space-12, 12px);
}

.qb-gap-4 {
  gap: var(--space-16, 16px);
}

.qb-gap-6 {
  gap: var(--space-24, 24px);
}

/* ========== 尺寸工具类 ========== */
.qb-w-10 {
  width: calc(var(--space-4, 4px) * 10);
}

.qb-h-10 {
  height: calc(var(--space-4, 4px) * 10);
}

.qb-h-4 {
  height: calc(var(--space-4, 4px) * 4);
}

.qb-h-4\.5 {
  height: calc(var(--space-4, 4px) * 4.5);
}

.qb-min-w-4 {
  min-width: calc(var(--space-4, 4px) * 4);
}

.qb-min-w-4\.5 {
  min-width: calc(var(--space-4, 4px) * 4.5);
}

.qb-min-w-55 {
  min-width: 220px;
}

/* ========== 圆角工具类 ========== */
.qb-rounded {
  border-radius: var(--radius-4, 4px);
}

.qb-rounded-lg {
  border-radius: var(--radius-8, 8px);
}

.qb-rounded-xl {
  border-radius: var(--radius-12, 12px);
}

.qb-rounded-full {
  border-radius: var(--radius-full, 9999px);
}

/* ========== 阴影工具类 ========== */
.qb-shadow {
  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.qb-shadow-md {
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.qb-shadow-lg {
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

/* ========== 过渡动画 ========== */
.qb-transition {
  transition: all 0.2s;
}

.qb-transition-colors {
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

/* ========== 光标工具类 ========== */
.qb-cursor-pointer {
  cursor: pointer;
}

.qb-cursor-default {
  cursor: default;
}

/* ========== 宽度工具类 ========== */
.qb-w-full {
  width: 100%;
}

.qb-w-auto {
  width: auto;
}

/* ========== 高度工具类 ========== */
.qb-h-full {
  height: 100%;
}

.qb-h-auto {
  height: auto;
}

/* ========== 溢出处理 ========== */
.qb-overflow-hidden {
  overflow: hidden;
}

.qb-overflow-auto {
  overflow: auto;
}

/* ========== 定位工具类 ========== */
.qb-relative {
  position: relative;
}

.qb-absolute {
  position: absolute;
}

.qb-fixed {
  position: fixed;
}

/* ========== 位置偏移 ========== */
.-qb-top-1 {
  top: calc(var(--space-4, 4px) * -1);
}

.-qb-right-1 {
  right: calc(var(--space-4, 4px) * -1);
}

/* ========== 颜色工具类 ========== */
.qb-z-10 {
  z-index: 10;
}

.qb-z-20 {
  z-index: 20;
}

.qb-z-30 {
  z-index: 30;
}

.qb-z-40 {
  z-index: 40;
}

.qb-z-50 {
  z-index: 50;
}
.plan-layout.question-bank-layout {
  grid-template-columns: var(--question-bank-left-width, 280px) 1fr;
}

/* Resizer - uses CSS variable for dynamic position */
.question-bank-layout .plan-resizer.question-bank-resizer {
  left: var(--question-bank-left-width, 280px);
}

/* Toolbar Actions */
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Question Set Grid Styles */
.question-set-icon {
  margin-right: 6px;
}

.question-set-count {
  margin-left: 8px;
}

.question-set-urgent {
  color: #ef4444;
  font-weight: 600;
}

.question-set-image {
  cursor: zoom-in;
}

/* Modal Styles */
.modal-overlay-high {
  z-index: 2700;
}

.modal-image {
  max-width: 90vw;
  max-height: 80vh;
  display: block;
}

/* Form Styles */
.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-col {
  flex: 1;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #374151;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
}

.form-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #94a3b8;
}

/* Question Card Styles */
.question-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.question-card-meta {
  margin-top: 8px;
  font-size: 12px;
  color: #94a3b8;
}

/* Status Badge */
.status-badge-custom {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Action Buttons */
.action-btn-danger {
  margin-right: 10px;
  background-color: #ef4444;
  border-color: #ef4444;
  color: white;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

/* Loading State */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #6b7280;
}

/* Help Mask */
.questions-help-mask {
  position: fixed;
  top: var(--app-header-height, 64px);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2600;
}

.questions-help-mask--open {
  opacity: 1;
  pointer-events: auto;
}

/* Help Drawer */
.questions-help-drawer {
  position: fixed;
  top: var(--app-header-height, 64px);
  right: 0;
  height: calc(100vh - var(--app-header-height, 64px));
  width: 50vw;
  max-width: 50vw;
  background-color: #ffffff;
  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.25);
  border-left: 1px solid #e2e8f0;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 2601;
  display: flex;
  flex-direction: column;
}

.questions-help-drawer--open {
  transform: translateX(0);
}

.questions-help-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.questions-help-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.questions-help-drawer-footer {
  padding: 10px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  background-color: #ffffff;
}

.questions-help-content {
  padding: 16px 20px 20px;
  flex: 1;
  overflow-y: auto;
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
}

.questions-help-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #94a3b8;
}

/* Store Header */
.store-header-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}

.store-tabs-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Cart Modal */
.cart-modal-custom {
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.cart-modal-body {
  overflow-y: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-empty-state {
  padding: 16px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

.cart-item-price {
  font-size: 14px;
  font-weight: 600;
  color: #ef4444;
  min-width: 80px;
  text-align: right;
}

/* Question Set Sidebar */
.question-set-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.question-set-sidebar-content {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.sidebar-card {
  margin: 0;
}

.sidebar-tabs {
  margin-bottom: 0;
  width: 100%;
}

.sidebar-footer {
  padding: 10px;
}

.sidebar-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Question Set Elements */
.question-set-checkbox {
  margin-right: 6px;
}

.question-set-count {
  margin-left: 8px;
}

.question-set-urgent {
  color: #ef4444;
  font-weight: 600;
}

.question-set-image {
  cursor: zoom-in;
}.tooltip { position: relative; display: inline-block; }
.tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--color-gray-3200); color: var(--color-white); padding: var(--space-8) var(--space-12); border-radius: var(--radius-6); font-size: var(--text-12); white-space: nowrap; z-index: var(--z-tooltip); opacity: 0; animation: var(--animation-tooltip) forwards; }
.option-item-modern, .fill-answer-item-modern { animation: var(--animation-fade); }
.tag-modern { animation: var(--animation-bounce); }
.saving-indicator { animation: var(--animation-pulse); }
/* Note: All keyframe animations are defined in animations.css:
   - fadeIn, fadeInScale, fadeOut
   - slideIn, slideInRight, slideUp
   - spin, pulse, pulse-soft
   - bounceIn, tooltipFadeIn
*/.form-card-modern { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-radius: var(--radius-12); box-shadow: var(--shadow-card-modern); border: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden; transition: var(--transition-scale); }
.form-card-modern:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover-modern); }
.card-header-modern { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-24) var(--space-32); background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.card-icon { display: flex; align-items: center; justify-content: center; width: var(--width-card-icon); height: var(--width-card-icon); background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%); border: 2px solid rgba(102, 126, 234, 0.2); border-radius: var(--radius-12); color: var(--color-gray-3500); box-shadow: var(--shadow-icon); font-size: var(--text-22); font-weight: normal; opacity: 1; filter: brightness(1.1) saturate(1.5) contrast(1.2); text-shadow: none; transition: var(--transition-scale); }
.card-icon:hover { transform: scale(1.05); box-shadow: var(--shadow-icon-hover); border-color: rgba(102, 126, 234, 0.4); background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-3600) 100%); }
.card-title h3 { margin: 0; font-size: var(--text-20); font-weight: 700; color: var(--color-gray-3200); }
.card-title p { margin: var(--space-4) 0 0 0; font-size: var(--text-14); color: var(--color-gray-500); }
.card-content-modern { padding: var(--space-32); }@media (prefers-color-scheme: dark) { .student-question-create-modern { background: linear-gradient(135deg, var(--color-gray-3200) 0%, var(--color-gray-1600) 100%); } .form-card-modern { background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); } .card-header-modern { background: linear-gradient(135deg, var(--color-gray-1600) 0%, var(--color-gray-3400) 100%); } .card-title h3 { color: var(--color-gray-50); } .input-modern, .select-modern, .content-textarea-modern, .explanation-textarea-modern { background: var(--color-gray-1600); border-color: var(--color-gray-3400); color: var(--color-gray-50); } .content-preview-modern, .explanation-preview-modern { background: var(--color-gray-1600); border-color: var(--color-gray-3400); color: var(--color-gray-50); } }.content-editor-modern { display: flex; flex-direction: column; gap: var(--space-16); }
.editor-toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-12) var(--space-16); background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-8); }
.toolbar-group { display: flex; align-items: center; gap: var(--space-8); }
.toolbar-label { font-size: var(--text-14); color: var(--color-gray-500); font-weight: 500; }
.format-tag { padding: var(--space-4) var(--space-8); background: var(--color-primary-500); color: var(--color-white); border-radius: var(--radius-4); font-size: var(--text-12); font-weight: 500; }
.editor-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); min-height: var(--height-editor); }
.editor-pane, .preview-pane { display: flex; flex-direction: column; gap: var(--space-8); }
.editor-label { font-size: var(--text-14); font-weight: 600; color: var(--color-gray-700); }
.content-textarea-modern, .explanation-textarea-modern { width: 100%; padding: var(--space-16); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-12); font-size: var(--text-14); font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; resize: vertical; min-height: var(--height-textarea); transition: var(--transition-hover); box-sizing: border-box; }
.content-textarea-modern:focus, .explanation-textarea-modern:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-filter-focus); }
.content-preview-modern, .explanation-preview-modern { padding: var(--space-16); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-12); background: var(--color-white); min-height: var(--height-textarea); overflow-y: auto; }
.preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--color-gray-1900); text-align: center; gap: var(--space-16); }
.preview-placeholder svg { opacity: 0.5; }.form-field-modern { display: flex; flex-direction: column; gap: var(--space-8); }
.field-label-modern { display: flex; align-items: center; gap: var(--space-4); font-weight: 600; color: var(--color-gray-700); font-size: var(--text-14); }
.required-mark { color: var(--color-red-500); font-weight: 700; }
.input-wrapper-modern { position: relative; }
.input-modern { width: 100%; padding: var(--space-14) var(--space-16); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-12); font-size: var(--text-16); background: var(--color-white); transition: var(--transition-hover); box-sizing: border-box; }
.input-modern:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-filter-focus); transform: translateY(-1px); }
.input-modern:hover { border-color: var(--color-gray-300); }
.select-wrapper-modern { position: relative; }
.select-modern { width: 100%; padding: var(--space-14) var(--space-16); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-12); font-size: var(--text-16); background: var(--color-white); cursor: pointer; transition: var(--transition-hover); appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right var(--space-12) center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: var(--space-48); }
.select-modern:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-filter-focus); }
.select-modern:hover { border-color: var(--color-gray-300); }
.input-error { border-color: var(--color-red-500) !important; box-shadow: var(--shadow-error) !important; }
.error-message { color: var(--color-red-500); font-size: var(--text-12); margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-4); }
.input-success { border-color: var(--color-success-500) !important; box-shadow: var(--shadow-success) !important; }
.success-message { color: var(--color-success-500); font-size: var(--text-12); margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-4); }.create-header-modern { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: var(--space-16) var(--space-32); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: var(--z-header); flex-shrink: 0; box-shadow: var(--shadow-header); border-radius: var(--radius-12) var(--radius-12) 0 0; margin-bottom: 0; }
.header-left { display: flex; align-items: center; gap: var(--space-24); }
.back-btn-modern { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-8); color: var(--color-gray-500); text-decoration: none; font-weight: 500; transition: var(--transition-hover); cursor: pointer; }
.back-btn-modern:hover { background: var(--color-gray-200); color: var(--color-gray-600); transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.header-title h1 { margin: 0; font-size: var(--text-24); font-weight: 700; color: #000000; }
.header-subtitle { margin: var(--space-4) 0 0 0; font-size: var(--text-14); color: var(--color-gray-500); }
.header-actions { display: flex; align-items: center; gap: var(--space-16); }
.saving-indicator { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16); background: var(--color-warning-100); border: 1px solid var(--color-warning-400); border-radius: var(--radius-6); color: var(--color-warning-800); font-size: var(--text-14); }
.spinner { width: var(--space-16); height: var(--space-16); border: 2px solid var(--color-warning-400); border-top: 2px solid transparent; border-radius: var(--radius-full); animation: var(--animation-spin); }.student-question-create-modern { display: flex; flex-direction: column; padding: 0; min-height: auto; background: var(--color-white); }
.create-content-modern { flex: 1; padding: 0; max-width: none; margin: 0; position: relative; width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: var(--radius-12); box-shadow: var(--shadow-card-modern); border: 1px solid rgba(255, 255, 255, 0.2); overflow: visible; }
.form-container-modern { display: flex; flex-direction: column; gap: var(--space-32); padding: var(--space-32) calc(var(--space-80) * 2); }
.form-grid-modern { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--width-form-min), 1fr)); gap: var(--space-24); }
.basic-info-layout { display: flex; flex-direction: column; gap: var(--space-24); }
.info-row { display: flex; gap: var(--space-32); align-items: flex-start; }
.info-row .form-field-modern { flex: 1; }.options-container-modern { display: flex; flex-direction: column; gap: var(--space-16); }
.option-item-modern { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-12); background: var(--color-white); transition: var(--transition-hover); }
.option-item-modern:hover { border-color: var(--color-primary-500); box-shadow: var(--shadow-option-hover); }
.option-header { display: flex; justify-content: space-between; align-items: center; }
.option-title { margin-left: var(--space-8); font-weight: 600; color: var(--color-gray-700); }
.student-question-create-modern .option-badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-12); background: var(--color-blue-100); color: var(--color-indigo-700); border: 1px solid var(--color-gray-1200); border-radius: var(--radius-8); font-weight: 700; font-size: var(--text-14); line-height: 1; box-sizing: border-box; max-width: 100%; }
.student-question-create-modern .option-label { display: flex; align-items: center; justify-content: center; width: var(--width-option-badge); height: var(--width-option-badge); background: var(--color-blue-100); color: var(--color-indigo-700); border: 1px solid var(--color-gray-1200); border-radius: var(--radius-8); font-weight: 700; font-size: var(--text-14); }
.remove-option-btn, .remove-fill-btn { display: flex; align-items: center; justify-content: center; width: var(--width-remove-btn); height: var(--width-remove-btn); background: var(--color-danger-100); border: 1px solid var(--color-red-600); border-radius: var(--radius-8); color: var(--color-red-600); cursor: pointer; transition: var(--transition-hover); }
.remove-option-btn:hover, .remove-fill-btn:hover { background: var(--color-red-600); transform: scale(1.05); }
.option-content { display: flex; gap: var(--space-16); align-items: center; }
.option-input-modern { flex: 1; padding: var(--space-12) var(--space-16); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-8); font-size: var(--text-14); transition: var(--transition-hover); }
.option-input-modern:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-filter-focus); }
.correct-answer-toggle { display: flex; align-items: center; gap: var(--space-6); cursor: pointer; padding: var(--space-6) var(--space-12); border-radius: var(--radius-6); border: 1px solid var(--color-gray-1200); background: var(--color-gray-50); transition: var(--transition-hover); }
.correct-answer-toggle:hover { background: var(--color-blue-100); }
.toggle-text { font-size: var(--text-14); font-weight: 500; color: var(--color-gray-700); }
.add-option-btn-modern, .add-fill-btn-modern { display: flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-16); border: 2px dashed var(--color-gray-300); border-radius: var(--radius-12); background: var(--color-white); color: var(--color-gray-600); cursor: pointer; transition: var(--transition-hover); font-weight: 500; }
.add-option-btn-modern:hover, .add-fill-btn-modern:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); background: var(--color-gray-50); transform: translateY(-1px); }
.fill-answers-container-modern { display: flex; flex-direction: column; gap: var(--space-16); }
.fill-answer-item-modern { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-12); background: var(--color-white); transition: var(--transition-hover); }
.fill-answer-item-modern:hover { border-color: var(--color-primary-500); box-shadow: var(--shadow-option-hover); }
.fill-answer-header { display: flex; justify-content: space-between; align-items: center; }
.fill-number { padding: var(--space-8) var(--space-16); background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%); color: var(--color-white); border-radius: var(--radius-8); font-weight: 600; font-size: var(--text-14); }
.fill-answer-input-modern { width: 100%; padding: var(--space-12) var(--space-16); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-8); font-size: var(--text-14); transition: var(--transition-hover); box-sizing: border-box; }
.fill-answer-input-modern:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-filter-focus); }@media (max-width: 768px) { .create-header-modern { padding: var(--space-16); flex-direction: column; gap: var(--space-16); align-items: flex-start; } .header-left { flex-direction: column; gap: var(--space-16); align-items: flex-start; } .create-content-modern { padding: var(--space-16); } .info-row { flex-direction: column; gap: var(--space-24); } .subject-selector-modern, .subject-selector-rows, .type-selector-modern, .grade-selector-modern, .difficulty-selector-modern { flex-direction: column; } .editor-container { grid-template-columns: 1fr; } .bottom-actions-modern { flex-direction: column; gap: var(--space-16); } .actions-container { flex-direction: column; gap: var(--space-16); } .primary-actions { width: 100%; flex-direction: column; } .btn-cancel-modern, .btn-save-modern, .btn-save-continue-modern { width: 100%; justify-content: center; } }.subject-selector-rows { display: flex; flex-direction: column; gap: var(--space-8); }
.subject-selector-modern { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
.subject-btn { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8) var(--space-12); border: 2px solid rgba(139, 92, 246, 0.2); border-radius: var(--radius-8); background: rgba(255, 255, 255, 0.8); color: var(--color-gray-600); font-size: var(--text-14); font-weight: 500; cursor: pointer; transition: var(--transition-scale); backdrop-filter: blur(10px); }
.subject-btn:hover { border-color: rgba(139, 92, 246, 0.4); background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.subject-btn.active { border-color: var(--color-purple-500); background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600)); color: var(--color-white); box-shadow: var(--shadow-btn-active); }
.subject-icon { font-size: var(--text-18); filter: brightness(1.3) saturate(1.6) contrast(1.2); text-shadow: 0 1px var(--space-2) rgba(0, 0, 0, 0.2); }
.subject-text { font-weight: 600; }
.type-selector-modern { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
.type-btn { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8) var(--space-12); border: 2px solid rgba(139, 92, 246, 0.2); border-radius: var(--radius-8); background: rgba(255, 255, 255, 0.8); color: var(--color-gray-600); font-size: var(--text-14); font-weight: 500; cursor: pointer; transition: var(--transition-scale); backdrop-filter: blur(10px); height: var(--space-40); box-sizing: border-box; }
.type-btn:hover { border-color: rgba(139, 92, 246, 0.4); background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.type-btn.active { border-color: var(--color-purple-500); background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600)); color: var(--color-white); box-shadow: var(--shadow-btn-active); }
.type-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--space-20); height: var(--space-20); font-size: var(--text-18); line-height: var(--space-20); filter: brightness(1.3) saturate(1.6) contrast(1.2); text-shadow: 0 1px var(--space-2) rgba(0, 0, 0, 0.2); }
.type-text { line-height: var(--space-20); font-weight: 600; }
.grade-selector-modern { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
.grade-btn { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8) var(--space-12); border: 2px solid rgba(59, 130, 246, 0.2); border-radius: var(--radius-8); background: rgba(255, 255, 255, 0.8); color: var(--color-gray-600); font-size: var(--text-14); font-weight: 500; cursor: pointer; transition: var(--transition-scale); backdrop-filter: blur(10px); }
.grade-btn:hover { border-color: rgba(59, 130, 246, 0.4); background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.grade-btn.active { border-color: var(--color-blue-500); background: linear-gradient(135deg, var(--color-blue-500), var(--color-blue-600)); color: var(--color-white); box-shadow: var(--shadow-btn-active); }
.grade-icon { font-size: var(--text-18); filter: brightness(1.3) saturate(1.6) contrast(1.2); text-shadow: 0 1px var(--space-2) rgba(0, 0, 0, 0.2); }
.grade-text { font-weight: 600; }
.difficulty-selector-modern { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.difficulty-btn { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-12); background: var(--color-white); cursor: pointer; transition: var(--transition-hover); min-width: var(--width-difficulty); }
.difficulty-btn:hover { border-color: var(--color-primary-500); transform: translateY(-1px); }
.difficulty-btn.active { border-color: var(--color-primary-500); background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%); color: var(--color-white); }
.stars { display: flex; gap: var(--space-1); }
.star-filled { color: var(--color-warning-400); }
.star-empty { color: var(--color-gray-300); }
.difficulty-text { font-size: var(--text-12); font-weight: 500; }

.basic-info-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.basic-info-card__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.basic-info-card__select-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.basic-info-card__select-icon {
  display: inline-flex;
  align-items: center;
}

.basic-info-card__status-hint {
  color: var(--color-gray-500, #64748b);
  font-size: 12px;
  margin-top: 6px;
}

.choice-editor__label {
  margin-bottom: 8px;
}

.choice-editor__delete-btn {
  margin-left: 8px;
}

.choice-editor__add-btn {
  margin-top: 8px;
}

.choice-editor__answer-label {
  margin-top: 12px;
}
.explanation-part__video-field {
  margin-top: 16px;
}

.explanation-part__video-hint {
  margin-left: 8px;
  color: var(--color-gray-500, #64748b);
  font-size: 12px;
}

.explanation-part__video-container {
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  margin-bottom: 8px;
}

.explanation-part__video {
  width: 100%;
  max-height: 360px;
  display: block;
}

.explanation-part__file-input {
  display: none;
}

/* EnglishReadingPart */
.english-reading-part__questions {
  margin-top: 12px;
}

/* EnglishFillWordsPart */
.english-fill-words-part__answer-label {
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--color-gray-500, #64748b);
}

.english-fill-words-part__answer-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 6px;
  outline: none;
}

.english-fill-words-part__questions {
  margin-top: 12px;
}

/* EnglishGroupContextCard */
.english-group-context-card__questions {
  margin-bottom: 12px;
}

.english-group-context-card__question-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 10px;
  background: var(--color-gray-50, #fafafa);
  margin-top: 8px;
}

.english-group-context-card__question-item--option {
  margin-bottom: 6px;
  margin-top: 0;
}

.english-group-context-card__question-number {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--primary-color, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.english-group-context-card__question-content {
  flex: 1;
  line-height: 1.6;
  color: var(--color-gray-700, #374151);
  padding: 6px 12px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--color-white, #fff);
}

.english-group-context-card__add-btn {
  margin-top: 6px;
}

.english-group-context-card__sub-question {
  margin-bottom: 12px;
}

.english-group-context-card__sub-question-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.english-group-context-card__sub-question-content {
  padding: 8px 12px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--color-white, #fff);
  margin-bottom: 8px;
}

.english-group-context-card__sub-question-options {
  margin-top: 6px;
}

.english-group-context-card__best-option {
  font-weight: 600;
  color: #a16207;
  background: #fff8db;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 2px 8px;
}

.english-group-context-card__fill-answer-label {
  font-weight: 600;
}

.english-group-context-card__fill-answer-value {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--color-white, #fff);
}

.english-group-context-card__correct-indicator {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.english-group-context-card__correct-indicator span {
  color: #cf1322;
}

/* EnglishBestOptionPart */
.english-best-option-part__option-content--row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.english-best-option-part__option-content--block {
  display: block;
}

.english-best-option-part__option-input {
  flex: 1;
}

.english-best-option-part__checkbox {
  position: static;
  opacity: 1;
  pointer-events: auto;
}

.english-best-option-part__answer-label {
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--color-gray-500, #64748b);
}

.english-best-option-part__answer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.english-best-option-part__answer-option {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  background: var(--color-gray-50, #f8fafc);
  border-radius: 4px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
}

.english-best-option-part__answer-option-label {
  font-weight: 500;
}

.english-best-option-part__questions {
  margin-top: 12px;
}

/* EnglishClozePart */
.english-cloze-part__options-container {
  margin-top: 12px;
}

.english-cloze-part__option-content {
  flex-direction: row;
  align-items: center;
}

.english-cloze-part__option-input {
  flex: 1;
}

.english-cloze-part__correct-toggle {
  margin-left: 12px;
  margin-bottom: 0;
}

.english-cloze-part__questions {
  margin-top: 12px;
}

.help-drawer__admin-content {
  padding: 16px 20px 12px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.import-jobs-table__file-size {
  font-size: 12px;
  color: var(--color-gray-500, #64748b);
}

.parsing-modal__content {
  padding: 1px 8px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.parsing-modal__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
}

.parsing-modal__spinner {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 3px solid var(--color-gray-200, #e2e8f0);
  border-top-color: var(--primary-color, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Note: @keyframes spin is defined in animations.css */

.parsing-modal__status-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-800, #1e293b);
}

.parsing-modal__status-desc {
  font-size: 13px;
  color: var(--color-gray-500, #64748b);
  margin-top: 4px;
}

.parsing-modal__warning {
  background: var(--color-orange-50, #fff7ed);
  border: 1px solid var(--color-orange-100, #ffedd5);
  border-radius: 6px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-orange-700, #c2410c);
  margin: 0 8px;
}

.parsing-modal__warning-icon {
  font-size: 16px;
}

.parsing-modal__thought-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.parsing-modal__thought-header {
  background: var(--color-gray-50, #f8fafc);
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-600, #475569);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.parsing-modal__receiving-badge {
  color: var(--color-green-500, #10b981);
  display: flex;
  align-items: center;
  gap: 4px;
}

.parsing-modal__receiving-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green-500, #10b981);
}

.parsing-modal__thought-content {
  background: var(--color-white, #ffffff);
  padding: 20px 24px;
  height: 400px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
}

.parsing-modal__thought-content .markdown-body p {
  margin-bottom: 0.8em;
}

.parsing-modal__thought-content .markdown-body ol {
  padding-left: 2em;
  margin-left: 0;
}

.parsing-modal__thought-content .markdown-body ul {
  padding-left: 2em;
  margin-left: 0;
}

.parsing-modal__empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400, #94a3b8);
  gap: 12px;
}

.parsing-modal__empty-icon {
  font-size: 24px;
  opacity: 0.5;
}
.question-text-preview {
  max-height: 200px;
  overflow: auto;
}

/* Question Preview Modal */
.preview-option-item {
  margin-bottom: 12px;
}

.preview-option-label {
  font-weight: 600;
  margin-bottom: 6px;
}

.preview-answer-section {
  margin-top: 6px;
}

.preview-answer-label {
  font-weight: 600;
}

.preview-answer-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
}

.preview-answer-tag.correct {
  background: #dcfce7;
  color: #166534;
}

.preview-answer-tag.incorrect {
  background: #fee2e2;
  color: #991b1b;
}

/* Modal Meta Info */
.modal-meta-row {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.modal-meta-item {
  flex: 1;
}

.modal-meta-item.wide {
  flex: 2;
}

/* Video Section in Modal */
.modal-video-section {
  margin-top: 12px;
}

.modal-video-container {
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid #e2e8f0;
}

.modal-video-player {
  width: 100%;
  max-height: 360px;
  display: block;
}

/* Layout Styles */
.question-list-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
}

.question-list-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
}

/* Sidebar Styles */
.question-list-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Import Modal Styles */
.import-modal-content {
  max-height: 70vh;
  overflow-y: auto;
}

.import-step {
  margin-bottom: 24px;
}

.import-step-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
}

.import-step-desc {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 16px;
}

.import-file-input {
  display: none;
}

.import-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.import-file-label:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.import-file-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.import-file-text {
  font-size: 14px;
  color: #6b7280;
}

.import-progress {
  margin-top: 16px;
}

.import-progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.import-progress-fill {
  height: 100%;
  background: #3b82f6;
  transition: width 0.3s;
}

.import-progress-text {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
  text-align: center;
}

/* Status Badge Colors */
.status-badge-draft {
  background-color: #f3f4f6;
  color: #6b7280;
}

.status-badge-published {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge-archived {
  background-color: #fef3c7;
  color: #92400e;
}

/* Preview Modal Styles */
.preview-prompt-box {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 8px;
}

.preview-answer-box {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.preview-explanation-box {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.review-header__meta {
  margin-left: 8px;
  color: var(--color-gray-500, #64748b);
  font-size: 14px;
}

/* ReviewForm */
.review-form__fieldset {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.review-form__meta-inputs {
  display: flex;
  gap: 10px;
}

/* ReviewPreview */
.review-preview {
  min-height: 60vh;
  padding: 16px 20px;
}

.review-preview__meta {
  padding: 12px;
  margin-bottom: 16px;
  background: var(--color-gray-50, #fafafa);
  border: 1px solid var(--color-gray-100, #f0f0f0);
  border-radius: 6px;
}

.review-preview__meta-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.review-preview__meta-row:last-child {
  margin-bottom: 0;
}

.review-preview__meta-item {
  display: flex;
  align-items: center;
}

.review-preview__meta-label {
  font-weight: 500;
  color: var(--color-gray-600, #595959);
  margin-right: 6px;
  font-size: 13px;
}

.review-preview__meta-value {
  color: var(--color-gray-800, #262626);
  font-size: 13px;
}

/* ReviewModal body */
.review-modal__body {
  min-height: 60vh;
  padding: 16px 20px;
}

/* ImportJobsTable status badge - dynamic color handled by inline style */
.import-jobs-table__status-badge {
  /* backgroundColor and color set via inline style */
}

/* ImportFilterToolbar */
.import-filter-toolbar__select {
  padding: 0;
  border: none;
  background: transparent;
}

/* QuestionSetLayout custom property */
.question-set-layout {
  /* --question-bank-left-width set via inline style */
}

/* QuestionFormatters status badge */
.question-formatters__status-badge {
  /* backgroundColor set via inline style */
}

/* =========================
   ReviewPreview Component Styles
   ========================= */

/* Status Badge with dynamic colors */
.review-preview__status-badge {
  font-size: 13px;
}

.review-preview__status-badge--active {
  background-color: rgba(16, 185, 129, 0.13);
  color: #10b981;
}

.review-preview__status-badge--archived {
  background-color: rgba(100, 116, 139, 0.13);
  color: #64748b;
}

.review-preview__status-badge--draft {
  background-color: rgba(59, 130, 246, 0.13);
  color: #3b82f6;
}

/* Question Content Section */
.review-preview__content-section {
  margin-bottom: 16px;
}

.review-preview__question-text {
  padding: 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

/* English Group Preview */
.review-preview__english-group {
  margin-bottom: 16px;
}

.review-preview__options-list {
  margin-bottom: 12px;
}

.review-preview__options-label {
  font-weight: 600;
  margin-bottom: 6px;
}

/* Option Row */
.review-preview__option-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafafa;
  margin-bottom: 6px;
}

.review-preview__option-row--large {
  padding: 10px 12px;
  margin-bottom: 10px;
}

.review-preview__option-label {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.review-preview__option-label--spaced {
  margin-top: 2px;
}

.review-preview__option-content {
  flex: 1;
  line-height: 1.6;
  color: #374151;
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.review-preview__option-content--large {
  padding: 8px 16px;
}

.review-preview__option-tail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.review-preview__icon-check {
  color: #cf1322;
}

/* Question Item */
.review-preview__question-item {
  margin-bottom: 12px;
}

.review-preview__question-title {
  font-weight: 600;
  margin-bottom: 6px;
  white-space: pre;
}

.review-preview__best-answer-tag {
  font-weight: 600;
  color: #a16207;
  background: #fff8db;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 2px 8px;
}

.review-preview__answer-tag {
  font-weight: 600;
  color: #a16207;
  background: #fff8db;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 2px 8px;
}

/* Explanation Content */
.review-preview__explanation-content {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.review-preview__explanation-placeholder {
  color: #8c8c8c;
  font-style: italic;
}

/* Question Options Section */
.review-preview__question-options {
  margin-bottom: 12px;
}

/* Answer Section */
.review-preview__answer-section {
  margin-bottom: 16px;
}

.review-preview__answer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.review-preview__answer-badge {
  background: #fff8db;
  border: 1px solid #fde68a;
  color: #a16207;
  border-radius: 16px;
  padding: 4px 10px;
  font-weight: 700;
}

.review-preview__answer-text {
  background: #fff8db;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 12px 16px;
  line-height: 1.7;
}

/* Explanation Section */
.review-preview__explanation-section {
  padding: 0;
  padding-left: 12px;
  border-radius: 0;
  background-color: transparent;
  border: none;
  line-height: 1.8;
}
.review-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.review-editor-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-editor-title {
  margin: 0;
  font-size: 18px;
}

.review-editor-filename {
  color: #64748b;
}

.review-editor-empty {
  padding: 16px;
  color: #64748b;
}

.review-form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Review Action Bar */
.review-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
}

.review-action-bar-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Review Form Meta Row */
.meta-row--four-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.form-input--compact {
  padding: 6px 10px;
  font-size: 14px;
  width: 100%;
}

/* Toggle Switch in Review Form */
.review-toggle-switch {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  position: relative;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.review-toggle-switch--active {
  background: #3b82f6;
}

.review-toggle-switch--inactive {
  background: #e5e7eb;
}

.review-toggle-switch-dot {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: left 0.2s ease;
}

.review-toggle-switch-dot--left {
  left: 2px;
}

.review-toggle-switch-dot--right {
  left: 18px;
}

/* Status Badge Colors */
.status-badge--active {
  background-color: #4CAF50;
  color: white;
}

.status-badge--draft {
  background-color: #FF9800;
  color: white;
}

.status-badge--archived {
  background-color: #9E9E9E;
  color: white;
}

/* Plan Layout Grid */
.plan-layout {
  display: grid;
  grid-template-columns: var(--question-bank-left-width, 280px) 1fr;
}

/* Review Draft List */
.question-header {
  margin-bottom: 8px;
}

.question-tags {
  margin-top: 10px;
}

.review-draft-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.review-draft-status--pending {
  background-color: #f59e0b20;
  color: #b45309;
}

.review-draft-status--draft {
  background-color: #3b82f620;
  color: #3b82f6;
}

.review-draft-status--active {
  background-color: #10b98120;
  color: #10b981;
}

.review-draft-status--archived {
  background-color: #64748b20;
  color: #64748b;
}

.btn-delete-draft {
  margin-left: 8px;
}

/* Question Bank Layout */
.questions-layout {
  display: grid;
  grid-template-columns: var(--question-bank-left-width, 280px) 1fr;
  gap: 0;
}

/* Review Preview Styles */
.review-preview__question-text {
  margin-bottom: 8px;
}

.review-preview__answer-tag {
  display: inline-block;
  padding: 4px 8px;
  background: #f0f9ff;
  color: #0369a1;
  border-radius: 4px;
  font-size: 14px;
}

.review-preview__best-answer-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}
.english-reading-editor__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.english-reading-editor__passage {
  padding: 10px 16px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--color-white, #fff);
}

.english-reading-editor__questions {
  margin-top: 8px;
}

.english-reading-editor__option-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.english-reading-editor__option-input {
  height: 32px;
  flex: 1;
}

.english-reading-editor__correct-toggle {
  white-space: nowrap;
}

.english-reading-editor__add-btn {
  margin-top: 12px;
}

.english-reading-editor__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

/* EnglishFillWordsEditor */
.english-fill-words-editor {
  display: block;
  padding: 0;
  background: transparent;
  min-height: auto;
}

.english-fill-words-editor__passage {
  padding: 10px 16px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--color-white, #fff);
}

.english-fill-words-editor__answer-section {
  margin-top: 12px;
}

.english-fill-words-editor__label {
  margin-bottom: 6px;
}

.english-fill-words-editor__answer-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 6px;
  font-size: 14px;
}

.english-fill-words-editor__explanation-section {
  margin-top: 12px;
}

.english-fill-words-editor__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

/* EnglishBestOptionEditor */
.english-best-option-editor__pool-label {
  margin-bottom: 8px;
}

.english-best-option-editor__pool {
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--color-white, #fff);
}

.english-best-option-editor__pool-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.english-best-option-editor__pool-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.english-best-option-editor__pool-item-input {
  flex: 1;
  height: 32px;
}

.english-best-option-editor__pool-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

.english-best-option-editor__questions {
  margin-top: 12px;
}

.english-best-option-editor__question-label {
  margin-bottom: 6px;
}

.english-best-option-editor__explanation {
  margin-top: 12px;
}

.english-best-option-editor__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

/* EnglishClozeEditor */
.english-cloze-editor {
  display: block;
  padding: 0;
  background: transparent;
  min-height: auto;
}

.english-cloze-editor__passage {
  padding: 10px 16px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--color-white, #fff);
}

.english-cloze-editor__questions {
  margin-top: 12px;
}

.english-cloze-editor__option-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.english-cloze-editor__option-input {
  height: 32px;
  flex: 1;
}

.english-cloze-editor__correct-toggle {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.english-cloze-editor__toggle-text {
  font-size: 13px;
  color: var(--color-gray-600, #475569);
}

.english-cloze-editor__add-btn {
  margin-top: 12px;
}

.english-cloze-editor__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.review-modal__footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--color-gray-100, #f0f0f0);
  background: var(--color-gray-50, #fafafa);
}

.review-modal__footer-left {
  display: flex;
  gap: 8px;
  align-items: center;
}

.review-modal__footer-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.review-modal__preview-btn {
  background-color: var(--color-orange-400, #f59e0b) !important;
  color: var(--color-gray-700, #334155) !important;
  border-color: var(--color-orange-400, #f59e0b) !important;
}

.review-modal__footer--start {
  justify-content: flex-start;
}

.review-modal__body {
  min-height: 60vh;
  padding: 16px 20px;
}

.print-view {
  display: none;
}

/* 打印时显示 */
@media print {
  /* 首先隐藏所有内容 */
  body > * {
    display: none !important;
  }
  
  /* 显示打印视图容器（Portal 渲染到 body 下） */
  body > .print-view-container,
  body > .print-view-container .print-view {
    display: block !important;
  }
  
  /* 禁用旧的学习打印样式 */
  body > .print-view-container .study-page,
  body > .print-view-container .study-content,
  body > .print-view-container .question-section,
  body > .print-view-container .study-question-item {
    display: none !important;
  }
  
  /* 打印视图样式 */
  body > .print-view-container {
    position: static;
    width: 100%;
    background: white;
  }
  
  body > .print-view-container .print-view {
    width: 210mm;
    margin: 0 auto;
    padding: 15mm;
    box-sizing: border-box;
    background: white;
    color: black;
    font-family: "SimSun", "宋体", serif;
    font-size: 12pt;
    line-height: 1.8;
  }
  
  /* 打印头部 - 首页不显示 */
  .print-header {
    display: none;
  }
  
  /* 打印页脚 - 末页不显示 */
  .print-footer {
    display: none;
  }
  
  /* 题目样式 */
  .print-question-item {
    margin-bottom: 16pt;
    padding-bottom: 0;
    border-bottom: none;
    page-break-inside: avoid;
  }
  
  .print-question-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    page-break-inside: auto;
  }
  
  .question-header {
    display: flex;
    align-items: flex-start;
    gap: 6pt;
    margin-bottom: 8pt;
    flex-wrap: nowrap;
    page-break-after: avoid;
  }
  
  .question-number {
    font-weight: bold;
    font-size: 12px;
    min-width: 20pt;
    flex-shrink: 0;
  }
  
  .question-content-inline {
    flex: 1;
    font-size: 12px;
    line-height: 2.2;
  }
  
  .question-content-inline > div,
  .question-content-inline .markdown-preview {
    display: inline;
    margin: 0;
    padding: 0;
  }
  
  .question-content-inline p {
    display: inline;
    margin: 0;
    text-indent: 0;
    font-size: 12px;
    line-height: 2.2;
    padding: 0;
  }
  
  .question-content-inline p:first-child {
    margin-left: 0;
    padding-left: 0;
  }
  
  .question-content-inline p + p::before {
    content: ' ';
  }
  
  .question-options-wrapper {
    margin-left: 0;
    padding-left: 0;
  }
  
  .print-options {
    margin: 0;
    margin-left: 20pt;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4pt 12pt;
  }
  
  .print-options.horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4pt 12pt;
  }
  
  .print-options.vertical {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4pt 12pt;
  }
  
  .print-option {
    display: flex;
    align-items: baseline;
    gap: 6pt;
    font-size: 12px;
    line-height: 1.4;
  }
  
  .option-label {
    font-weight: bold;
    min-width: 16pt;
    flex-shrink: 0;
    font-size: 12px;
  }
  
  .option-content {
    flex: 1;
    font-size: 12px;
    line-height: 1.4;
  }
  
  .option-content .markdown-preview {
    margin: 0;
    padding: 0;
  }
  
  .option-content p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
  }
  
  /* 问答题答题区域 */
  .essay-answer-space {
    margin-top: 8pt;
    min-height: 60mm;
    background-image: repeating-linear-gradient(
      transparent,
      transparent 1.5mm,
      #ddd 1.5mm,
      #ddd 2mm
    );
    background-size: 100% 3.5mm;
  }
  
  .print-question-item:last-child .essay-answer-space {
    page-break-inside: auto;
  }
  
  /* 打印页脚 */
  .print-footer {
    text-align: center;
    margin-top: 20pt;
    padding-top: 10pt;
    font-size: 9pt;
    color: #999;
  }
  
  /* 图片处理 */
  .print-view img {
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
  }
  
  /* 数学公式 */
  .print-view .katex {
    font-size: 1em;
  }
  
  /* 表格处理 */
  .print-view table {
    width: 100%;
    border-collapse: collapse;
    margin: 10pt 0;
    page-break-inside: avoid;
  }
  
  .print-view th,
  .print-view td {
    border: 0.5pt solid #333;
    padding: 6pt;
    text-align: left;
  }
  
  .print-view th {
    background: #f0f0f0;
    font-weight: bold;
  }
}

/* 屏幕预览模式 */
@media screen {
  .print-view-container {
    display: none;
  }
  
  .print-view-container.preview {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    overflow-y: auto;
    background: white;
    padding: 20px;
  }
  
  .print-view-container.preview .print-view {
    display: block;
    max-width: 210mm;
    margin: 0 auto;
    padding: 20px;
    background: white;
    color: black;
    font-family: "SimSun", "宋体", serif;
    font-size: 14px;
    line-height: 1.8;
  }
  
  .print-view-container.preview .print-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #333;
  }
  
  .print-view-container.preview .print-title {
    font-size: 24px;
    margin: 0 0 15px 0;
  }
  
  .print-view-container.preview .print-meta {
    display: flex;
    justify-content: space-between;
    color: #666;
  }
  
  .print-view-container.preview .print-question-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  
  .print-view-container.preview .question-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .print-view-container.preview .question-number {
    font-weight: bold;
    font-size: 16px;
  }
  
  .print-view-container.preview .question-type-badge {
    font-size: 12px;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 4px;
    color: #666;
  }
  
  .print-view-container.preview .print-options.horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
  
  .print-view-container.preview .print-options.vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .print-view-container.preview .print-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  
  .print-view-container.preview .option-label {
    font-weight: bold;
    min-width: 24px;
  }
  
  .print-view-container.preview .print-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 15px;
    color: #999;
  }
}

/* 英语阅读理解题组样式 */
@media print {
  /* 题组容器 - 允许在内部断页，不强制新页开始 */
  .print-question-group {
    margin-bottom: 16pt;
    page-break-inside: auto;
  }

  /* 短文/文章区域 - 允许内部断页 */
  .print-group-passage {
    margin-bottom: 12pt;
    padding: 12pt;
    background: #fafafa;
    border: none;
    border-radius: 4pt;
    font-size: 11pt;
    line-height: 2;
    text-align: justify;
    page-break-inside: auto;
  }

  .print-group-passage .markdown-preview {
    margin: 0;
    padding: 0;
  }

  .print-group-passage p {
    margin: 0 0 8pt 0;
    text-indent: 2em;
    font-size: 11pt;
    line-height: 2;
  }

  .print-group-passage p:last-child {
    margin-bottom: 0;
  }

  /* 题组内的小题 */
  .print-group-question {
    margin-bottom: 10pt;
    margin-left: 0;
    page-break-inside: avoid;
  }

  .print-group-question .question-header {
    margin-bottom: 6pt;
  }

  .print-group-question .question-number {
    font-size: 11pt;
  }

  .print-group-question .question-content-inline {
    font-size: 11pt;
    line-height: 1.8;
  }

  .print-group-question .print-options {
    margin-left: 20pt;
  }

  .print-group-question .print-option {
    font-size: 11pt;
  }
}

/* 屏幕预览模式下的题组样式 */
@media screen {
  .print-view-container.preview .print-question-group {
    margin-bottom: 30px;
  }

  .print-view-container.preview .print-group-passage {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    line-height: 2;
    text-align: justify;
  }

  .print-view-container.preview .print-group-passage p {
    margin: 0 0 12px 0;
    text-indent: 2em;
  }

  .print-view-container.preview .print-group-passage p:last-child {
    margin-bottom: 0;
  }

  .print-view-container.preview .print-group-question {
    margin-bottom: 16px;
    padding-left: 0;
  }

  .print-view-container.preview .print-group-question .question-content-inline {
    font-size: 14px;
  }
}.answer-section { margin-top: var(--space-24); padding: var(--space-16); background: var(--color-gray-50); border-radius: var(--radius-8); border-left: 4px solid var(--color-blue-500); }
.answer-section h4 { margin: 0 0 var(--space-12) 0; color: var(--color-blue-900); font-size: var(--text-14); font-weight: 600; }
.answer-content { color: var(--color-gray-700); line-height: 1.6; }
.answer-content p { margin: 0 0 var(--space-8) 0; }
.answer-content p:last-child { margin-bottom: 0; }
.correctness-indicator { display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-8); border-radius: var(--radius-4); font-size: var(--text-12); font-weight: 500; margin-left: var(--space-8); }
.correctness-indicator.correct { background: var(--color-success-100); color: var(--color-success-800); }
.correctness-indicator.wrong { background: var(--color-danger-100); color: var(--color-danger-800); }
.reference-answer { margin: var(--space-16) 0; padding: var(--space-12); background: var(--color-gray-50); border-radius: var(--radius-6); border-left: 4px solid var(--color-gray-1200); }
.reference-answer strong { color: var(--color-gray-700); font-weight: 600; }
.question-answer-section.wrong-answer .reference-answer { background: var(--color-error-bg); border-left-color: var(--color-red-600); }
.question-answer-section.wrong-answer .reference-answer strong { color: var(--color-red-600); font-weight: 900; font-size: var(--text-16); text-shadow: 0 1px var(--space-2) rgba(220, 38, 38, 0.1); }
.answer-section { margin: var(--space-12) 0 var(--space-16); }
.answer-badges { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.answer-badge { background: var(--color-gray-3000); border: 1px solid var(--color-warning-400); color: var(--color-gray-2300); border-radius: var(--radius-full); padding: var(--space-4) var(--space-12); font-weight: 700; }
.answer-text { background: var(--color-gray-3000); border: 1px solid var(--color-warning-400); border-radius: var(--radius-6); padding: var(--space-12) var(--space-16); line-height: 1.7; color: var(--color-gray-700); }
.question-explanation { margin-top: var(--space-12); border: 1px solid var(--color-gray-200); border-left: 4px solid var(--color-warning-400); background: var(--color-gray-3100); border-radius: var(--radius-12); padding: var(--space-12) var(--space-16); box-shadow: var(--shadow-question); }
.question-explanation h4 { margin: 0 0 var(--space-8) 0; color: var(--color-gray-2200); font-size: var(--text-16); font-weight: 600; }
.explanation-content { padding-left: var(--space-12); line-height: 1.8; min-height: var(--space-60); }
.qm-icon-btn { position: absolute; right: var(--space-12); top: 50%; transform: translateY(-50%); width: var(--width-qm-icon); height: var(--width-qm-icon); border-radius: var(--radius-full); border: none; background: rgba(255, 255, 255, 0.9); color: var(--color-gray-2100); box-shadow: 0 var(--space-2) var(--space-6) rgba(0, 0, 0, 0.15); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.qm-icon-btn:hover:not(:disabled) { background: var(--color-white); }
.qm-icon-btn:disabled { opacity: 0.6; cursor: not-allowed; }.study-page { padding: var(--space-32) calc(var(--space-80) * 2); }
.study-content { margin-bottom: var(--space-32); flex: 1; overflow-y: auto; }
.question-section { display: block; margin-bottom: var(--space-40); background: var(--color-white); border-radius: var(--radius-8); box-shadow: var(--shadow-card-hover); border: 1px solid var(--color-gray-1200); overflow: hidden; }
.question-type-section { margin-bottom: var(--space-40); background: var(--color-white); border-radius: var(--radius-8); box-shadow: var(--shadow-card-hover); border: 1px solid var(--color-gray-1200); overflow: hidden; }
.study-page .section-title { background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%); color: var(--color-white); padding: var(--space-16) var(--space-24); margin: 0; font-size: var(--text-18) !important; font-weight: 600; position: relative; }
.section-header { background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%); color: var(--color-white); padding: var(--space-16) var(--space-24); }
.study-page .section-header h2 { margin: 0; font-size: var(--text-18) !important; font-weight: 600; }
.questions-list { padding: 0; }

/* 英语题组样式 */
.english-question-group { margin-bottom: var(--space-16); }
.english-question-group:last-child { margin-bottom: 0; }

/* 短文/文章区域样式 - 与选项左对齐 */
.group-passage { 
  margin: var(--space-16) 0; 
  padding: var(--space-16) var(--space-24); 
  background: var(--color-gray-1100); 
  border: none; 
  border-radius: var(--radius-8); 
  font-size: var(--text-14); 
  line-height: 1.8; 
  text-align: justify; 
}

.group-passage .markdown-preview {
  padding: 0;
  background: transparent;
  margin-bottom: 0 !important;
}

.group-passage .markdown-preview p {
  margin-bottom: 0 !important;
}.study-footer { position: sticky; bottom: 0; background: var(--color-white); padding: var(--space-24); border-radius: var(--radius-8); box-shadow: 0 -2px var(--space-12) rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-32); }
.floating-actions-left { position: fixed; bottom: var(--space-24); left: var(--space-24); display: flex; gap: var(--space-12); z-index: var(--z-floating); }
.floating-actions-right { position: fixed; bottom: var(--space-24); right: var(--space-24); display: flex; gap: var(--space-12); z-index: var(--z-floating); }
.floating-btn { width: var(--width-floating); height: var(--width-floating); border-radius: var(--radius-full); border: none; background: var(--color-white); box-shadow: var(--shadow-floating); color: var(--color-gray-700); font-size: var(--text-24); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.floating-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-floating-hover); }
.floating-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.floating-btn--primary { background: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-blue-600) 100%); color: var(--color-white); }
.floating-btn--secondary { background: var(--color-white); border: 1px solid var(--color-gray-200); }
.floating-btn--success { background: var(--color-success-800); color: var(--color-white); box-shadow: 0 6px var(--space-24) rgba(21, 128, 61, 0.35); }
.floating-btn--success:hover:not(:disabled) { box-shadow: 0 var(--space-12) var(--space-24) rgba(21, 128, 61, 0.5); }
.floating-btn--warning { background: var(--color-warning-400); color: var(--color-white); box-shadow: 0 6px var(--space-24) rgba(245, 158, 11, 0.35); }
.floating-btn--warning:hover:not(:disabled) { box-shadow: 0 var(--space-12) var(--space-24) rgba(245, 158, 11, 0.5); }
.floating-btn svg { display: block; }
@media (max-width: 768px) { .floating-btn { width: var(--width-floating); height: var(--width-floating); font-size: var(--text-24); } }
@media print { .floating-actions-left, .floating-actions-right { display: none !important; } }
.progress-info { color: var(--color-gray-700); font-size: var(--text-14); }.manual-grading { margin-top: var(--space-12); display: flex; gap: var(--space-8); align-items: center; }
.manual-grading-label { font-size: var(--text-13); color: var(--color-gray-700); font-weight: 500; }
.grading-btn { padding: var(--space-4) var(--space-12); border: 1px solid; border-radius: var(--radius-4); font-size: var(--text-12); font-weight: 500; cursor: pointer; transition: var(--transition-base); }
.grading-btn.correct { border-color: var(--color-success-500); color: var(--color-success-500); background: var(--color-white); }
.grading-btn.correct:hover, .grading-btn.correct.active { background: var(--color-success-500); color: var(--color-white); }
.grading-btn.wrong { border-color: var(--color-red-600); color: var(--color-red-600); background: var(--color-white); }
.grading-btn.wrong:hover, .grading-btn.wrong.active { background: var(--color-red-600); color: var(--color-white); }
.result-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-8); border-radius: var(--radius-4); font-size: var(--text-12); font-weight: 700; margin-left: var(--space-8); text-shadow: 0 1px var(--space-2) rgba(0, 0, 0, 0.1); }
.result-badge.correct { background: var(--color-success-100); color: var(--color-success-800); border: 1px solid var(--color-success-500); }
.result-badge.wrong { background: var(--color-danger-100); color: var(--color-danger-800); border: 1px solid var(--color-red-600); font-weight: 900; font-size: var(--text-13); text-shadow: 0 1px var(--space-2) rgba(220, 38, 38, 0.2); }
.question-result-badges { display: flex; align-items: center; gap: var(--space-8); }
.manual-judgment { margin: var(--space-16) 0; padding: var(--space-12); background: var(--color-gray-1300); border-radius: var(--radius-6); border: 1px solid var(--color-gray-1200); }
.manual-judgment label { display: block; margin-bottom: var(--space-8); font-weight: 600; color: var(--color-gray-700); }
.judgment-buttons { display: flex; gap: var(--space-8); }
.judgment-btn { padding: var(--space-6) var(--space-12); border: 2px solid; border-radius: var(--radius-6); font-size: var(--text-13); font-weight: 600; cursor: pointer; transition: var(--transition-base); background: var(--color-white); }
.judgment-btn.correct { border-color: var(--color-success-500); color: var(--color-success-500); }
.judgment-btn.correct:hover, .judgment-btn.correct.active { background: var(--color-success-500); color: var(--color-white); transform: translateY(-1px); box-shadow: var(--shadow-correct); }
.judgment-btn.wrong { border-color: var(--color-red-600); color: var(--color-red-600); font-weight: 700; }
.judgment-btn.wrong:hover, .judgment-btn.wrong.active { background: var(--color-red-600); color: var(--color-white); transform: translateY(-1px); box-shadow: var(--shadow-wrong); font-weight: 900; }
.correct-indicator { color: var(--color-success-500); font-weight: 700; margin-left: var(--space-8); font-size: var(--text-14); }.study-header { background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%); color: var(--color-white); padding: var(--space-24); border-radius: var(--radius-12); box-shadow: var(--shadow-lg); margin-bottom: var(--space-24); border: 1px solid var(--color-glass-border); }
.study-header-content { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; }
.study-header .btn:disabled { opacity: 0.55; filter: saturate(70%); cursor: not-allowed; }
.btn-back { background: var(--color-glass); color: var(--color-white); border: 1px solid var(--color-glass-border); padding: var(--space-8) var(--space-16); border-radius: var(--radius-8); font-size: var(--text-14); font-weight: 500; cursor: pointer; transition: var(--transition-slow); white-space: nowrap; flex-shrink: 0; }
.btn-back:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.study-meta { display: flex; flex-wrap: wrap; gap: var(--space-16); flex: 1; }
.meta-item { display: flex; align-items: center; gap: var(--space-6); background: var(--color-glass); padding: var(--space-6) var(--space-12); border-radius: var(--radius-6); font-size: var(--text-13); transition: var(--transition-slow); white-space: nowrap; }
.meta-item:hover { background: rgba(255, 255, 255, 0.15); }
.meta-label { font-weight: 500; opacity: 0.9; }
.meta-value { font-weight: 600; }.fill-blank-input, .essay-input { margin-top: var(--space-4); }
.fill-blank-input textarea, .essay-input textarea { width: 100%; padding: var(--space-12); border: 2px solid var(--color-gray-1200); border-radius: var(--radius-6); font-size: var(--text-14); line-height: 1.5; resize: vertical; transition: border-color var(--transition-base); }
.fill-blank-input textarea:focus, .essay-input textarea:focus { outline: none; border-color: var(--color-blue-500); box-shadow: var(--shadow-filter-focus); }.study-question-options { display: grid; width: 100%; max-width: none; margin-top: 0; margin-left: var(--space-24); padding-right: var(--space-24); column-gap: var(--space-12); row-gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-question-options.auto-layout-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-question-options.auto-layout-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-question-options.auto-layout-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-option-label { display: grid; grid-template-columns: var(--space-16) 1fr auto; align-items: center; gap: var(--space-8); cursor: pointer; padding: var(--space-6) var(--space-12); margin-right: var(--space-16); border: none; border-radius: var(--radius-6); transition: background-color var(--transition-fast), border-color var(--transition-fast); background: transparent; position: relative; width: 100%; max-width: none; box-sizing: border-box; }
.study-option-label:hover { background-color: var(--color-gray-1300); box-shadow: none; }
.study-option-label input[type="radio"]:checked + .study-option-text, .study-option-label input[type="checkbox"]:checked + .study-option-text { color: var(--color-blue-900); font-weight: 500; }
.study-option-label:has(input:checked) { background-color: var(--color-gray-2800); box-shadow: none; }
.study-option-label input[type="radio"], .study-option-label input[type="checkbox"] { margin: 0; cursor: pointer; width: var(--space-16); height: var(--space-16); flex-shrink: 0; margin-top: 0; align-self: center; accent-color: var(--color-blue-500); }
.study-option-text { flex: 1; line-height: 1.4; color: var(--color-gray-700); margin-left: 0; width: 100%; word-wrap: break-word; overflow-wrap: break-word; align-self: center; }
.study-option-label .correct-indicator, .study-option-label .wrong-indicator { align-self: center; }
.study-option-label .markdown-preview { background: transparent; padding: 0; line-height: 1.4; }
.study-option-label .markdown-preview p { margin: 0; }
.study-option-text p { margin: 0; }
@media screen and (max-width: 768px) { .study-question-options, .study-question-options.auto-layout-2, .study-question-options.auto-layout-4 { grid-template-columns: 1fr; } }@media print { @page { size: A4 portrait; margin: var(--space-8) var(--space-8) var(--space-16) var(--space-8); @bottom-right { content: "第 " counter(page) " 页"; font-size: var(--text-12); color: var(--color-gray-600); font-family: SimSun, "宋体", serif; margin-bottom: var(--space-4); padding-bottom: var(--space-2); } } body, html { background: var(--color-white) !important; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); line-height: 1.4 !important; overflow: visible !important; } .study-header, .study-footer, .markdown-toolbar, .markdown-editor-tabs, .btn, .result-badge, .manual-judgment, .app-header { display: none !important; } .study-page { padding: 0; background: var(--color-white) !important; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); margin: 0 !important; max-width: none !important; width: 100% !important; } .study-content { box-shadow: none !important; border: none; column-count: 1; column-gap: 0; column-rule: none; column-fill: auto; -moz-column-fill: auto; max-width: 100%; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); width: 100% !important; margin: 0 !important; } .question-section { box-shadow: none !important; border: none !important; page-break-inside: auto; break-inside: auto; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); } .question-type-section { box-shadow: none !important; border: none !important; page-break-inside: auto; break-inside: auto; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); } .study-question-item { break-inside: auto; page-break-inside: auto; border-bottom: none !important; padding: var(--space-4) var(--space-2) !important; font-size: var(--text-12); line-height: 1.2 !important; font-family: SimSun, "宋体", serif !important; margin: var(--space-2) 0 !important; } .study-question-content { margin-bottom: 0 !important; } .study-question-header { gap: 0 !important; } .study-question-number { min-width: var(--space-24) !important; margin-right: 0 !important; } .study-question-options { margin-left: var(--space-24) !important; } .study-question-content > p:first-child { margin-top: 0 !important; } .study-question-content p { margin-top: 0 !important; margin-bottom: 0 !important; } .study-question-content .markdown-preview { padding: 0 !important; } .study-question-text { margin-bottom: var(--space-2) !important; line-height: 1.2 !important; } .section-title { background: var(--color-white) !important; color: var(--color-gray-1500) !important; border-bottom: none !important; column-span: none; page-break-inside: avoid; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); font-weight: bold !important; padding-bottom: var(--space-2) !important; } .study-question-options { display: grid; column-gap: var(--space-2) !important; row-gap: var(--space-2) !important; margin-top: 0 !important; margin-left: var(--space-32) !important; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); grid-template-columns: 1fr 1fr !important; } .study-question-options.auto-layout-1 { grid-template-columns: 1fr 1fr !important; } .study-question-options.auto-layout-2 { grid-template-columns: 1fr 1fr !important; } .study-question-options.auto-layout-4 { grid-template-columns: 1fr 1fr !important; } .study-option-label { word-break: break-word; hyphens: auto; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); } .study-option-label.short-option { max-width: 120mm; } .study-option-label.medium-option { max-width: 80mm; } .study-option-label.long-option { max-width: 60mm; } .study-option-label { display: block !important; padding: var(--space-1) var(--space-2) !important; border: none !important; box-shadow: none !important; background: transparent !important; font-family: SimSun, "宋体", serif !important; font-size: var(--text-12); line-height: 1.1 !important; margin: 0 !important; } .study-option-label input[type="radio"], .study-option-label input[type="checkbox"] { display: none; } .fill-blank-input .markdown-editor, .essay-input .markdown-editor, .essay-input .essay-answer-preview { display: none !important; } .fill-blank-input::after { content: ''; display: block; min-height: 35mm; background-image: repeating-linear-gradient(transparent, transparent var(--space-4), var(--color-gray-1200) var(--space-4), var(--color-gray-1200) var(--space-6)); background-size: 100% var(--space-6); } .essay-input::after { content: ''; display: block; min-height: 80mm; background-image: repeating-linear-gradient(transparent, transparent var(--space-6), var(--color-gray-1200) var(--space-6), var(--color-gray-1200) var(--space-8)); background-size: 100% var(--space-8); } .fill-blank-input::after { display: none !important; min-height: 0 !important; background: none !important; } .study-content { padding-bottom: 0 !important; } .question-section:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } .question-section:last-child .study-question-item:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } .question-section:last-child .study-question-item:last-child .study-question-content { margin-bottom: 0 !important; } .question-section:last-child .study-question-item:last-child .study-question-options { margin-bottom: 0 !important; } .question-section:last-child .study-question-item:last-child .essay-input::after { display: none !important; min-height: 0 !important; background: none !important; } .print-first-page-info { display: none !important; } .print-first-page-info .info-item { display: none !important; } @page :first { margin-top: 0; } *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } * { scrollbar-width: none !important; -ms-overflow-style: none !important; } }.study-question-item { display: block; border-bottom: none; padding: var(--space-16); width: 100%; max-width: none; box-sizing: border-box; }
.study-question-item:last-child { border-bottom: none; }
.study-question-header { display: flex; align-items: baseline; gap: 0.25em; margin-bottom: var(--space-1); line-height: 2; }
.study-question-header :is(.markdown-preview, .markdown-preview p) { line-height: 2 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.study-question-number { font-weight: 600; color: var(--color-gray-700); font-size: var(--text-16); min-width: var(--space-32); flex-shrink: 0; margin-top: 0; line-height: 1.4; }
.study-question-type-badge { background: var(--color-blue-100); color: var(--color-gray-2000); padding: var(--space-4) var(--space-8); border-radius: var(--radius-4); font-size: var(--text-12); font-weight: 500; }
.study-question-content { display: inline; margin-bottom: 0; width: auto; max-width: none; box-sizing: border-box; }
.study-question-content > p:first-child { margin-top: 0; }
.study-question-content p { margin-top: 0; }
.study-question-text { margin-bottom: var(--space-12); line-height: 1.6; color: var(--color-gray-700); }
.study-question-text p { margin: 0 0 var(--space-12) 0; }
.study-question-text img { max-width: 100%; height: auto; border-radius: var(--radius-4); margin: var(--space-12) 0; }
.katex { font-size: 1.1em; }
.katex-display { margin: var(--space-16) 0; }

/* 覆盖 Markdown 组件的默认 padding */
.study-question-content .markdown-preview {
  padding: 0;
  margin: 0;
}

.study-question-content .markdown-preview p {
  margin: 0;
}@media (max-width: 768px) { .study-page { padding: var(--space-12); } .study-header { flex-direction: column; gap: var(--space-24); } .study-meta { flex-direction: column; gap: var(--space-8); } .study-actions { width: 100%; justify-content: stretch; } .study-actions .btn { flex: 1; justify-content: center; } .question-content { margin-left: 0; } .question-header { flex-wrap: wrap; } .study-footer { flex-direction: column; gap: var(--space-16); } .study-footer .btn-large { width: 100%; justify-content: center; } }.loading { display: flex; justify-content: center; align-items: center; height: var(--space-200); font-size: var(--text-16); color: var(--color-gray-700); }
.error-page { text-align: center; padding: var(--space-60) var(--space-24); background: var(--color-white); border-radius: var(--radius-8); box-shadow: var(--shadow-card-hover); }
.error-page h2 { color: var(--color-red-600); margin-bottom: var(--space-12); }
.error-page p { color: var(--color-gray-700); margin-bottom: var(--space-24); }.study-page.submitted .study-question-item { position: relative; }
.study-page.submitted .study-question-header { padding-right: var(--space-120); }
.study-page.submitted .study-option-label { pointer-events: none; }
.study-page.submitted .study-option-label.user-selected { background-color: var(--color-gray-2400); border: 2px solid var(--color-blue-500); }
.study-page.submitted .study-option-label.correct-answer { background-color: var(--color-gray-2500); border: 2px solid var(--color-success-500); }
.study-page.submitted .study-option-label.wrong-answer { background-color: var(--color-gray-2900); border: 2px solid var(--color-red-600); }
.study-page.submitted .fill-blank-input textarea, .study-page.submitted .essay-input textarea { background-color: var(--color-gray-1300); border-color: var(--color-gray-300); pointer-events: none; }
.single-choice .question-type-badge { background: var(--color-gray-2400); color: var(--color-blue-900); }
.multiple-choice .question-type-badge { background: var(--color-gray-2500); color: var(--color-success-800); }
.fill-blank .question-type-badge { background: var(--color-gray-2600); color: var(--color-warning-800); }
.essay .question-type-badge { background: var(--color-gray-2700); color: var(--color-red-900); }

/* AI Review Button */
.question-summary .ai-review-container {
  margin-top: var(--space-8);
  text-align: right;
}

.question-summary .ai-review-button {
  padding: var(--space-4) var(--space-14);
  font-size: var(--text-12);
  border-radius: var(--radius-full);
}.summary-section { margin-top: var(--space-16); padding: var(--space-12); background: var(--color-warning-100); border-radius: var(--radius-6); border: 1px solid var(--color-warning-400); }
.summary-section label { display: block; font-size: var(--text-13); font-weight: 500; color: var(--color-warning-800); margin-bottom: var(--space-6); }
.summary-section textarea { width: 100%; padding: var(--space-8); border: 1px solid var(--color-warning-400); border-radius: var(--radius-4); font-size: var(--text-13); line-height: 1.4; resize: vertical; min-height: var(--space-60); background: var(--color-white); }
.summary-section textarea:focus { outline: none; border-color: var(--color-warning-400); box-shadow: 0 0 0 var(--space-2) rgba(245, 158, 11, 0.1); }
.btn-success { background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-800) 100%); color: var(--color-white); box-shadow: 0 var(--space-2) var(--space-4) rgba(16, 185, 129, 0.3); }
.btn-success:hover:not(:disabled) { background: linear-gradient(135deg, var(--color-success-800) 0%, var(--color-success-800) 100%); box-shadow: 0 var(--space-4) var(--space-8) rgba(16, 185, 129, 0.4); transform: translateY(-1px); }
.btn-success:disabled { background: var(--color-gray-1100); box-shadow: none; cursor: not-allowed; transform: none; }

.batch-actions-bar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-16);
  background-color: var(--color-blue-100);
  border-radius: var(--radius-4);
  margin-bottom: var(--space-16);
}

.batch-actions-bar__count {
  font-size: var(--text-14);
  color: var(--color-text-tertiary);
}
.btn {
  padding: var(--space-10) var(--space-20);
  border-radius: var(--radius-6);
  font-size: var(--text-14);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-base);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
  background: var(--color-blue-500);
  color: var(--color-white);
  border-color: var(--color-blue-500);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-blue-600);
  border-color: var(--color-blue-600);
  box-shadow: var(--shadow-btn-hover);
}

/* Secondary Button */
.btn-secondary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

/* Light Button */
.btn-light {
  background: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}

.btn-light:hover:not(:disabled) {
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  border-color: var(--color-slate-300);
  box-shadow: var(--shadow-md);
}

/* Link Button */
.btn-link {
  background: transparent;
  color: var(--color-blue-600);
  border: none;
  padding: 0;
  box-shadow: none;
}

.btn-link:hover:not(:disabled) {
  background: transparent;
  color: var(--color-blue-800);
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}

/* Danger Button */
.btn-danger {
  background: var(--color-error-500);
  color: var(--color-white);
  border-color: var(--color-error-500);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
  box-shadow: var(--shadow-error);
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-6) var(--space-12);
  font-size: var(--text-13);
  border-radius: var(--radius-4);
}

.btn-lg {
  padding: var(--space-12) var(--space-24);
  font-size: var(--text-16);
  border-radius: var(--radius-8);
}

/* Responsive Styles */
@media (max-width: 640px) {
  .btn {
    width: 100%;
  }
}

.data-table-wrapper {
  width: 100%;
  overflow-x: auto;
  /* 优化水平滚动性能 */
  overflow-anchor: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  /* 隔离表格渲染，优化大量数据行 */
  contain: layout;
}

/* Size variants */
.data-table--sm {
  font-size: 13px;
}

.data-table--sm th,
.data-table--sm td {
  padding: 8px 12px;
}

.data-table--md {
  font-size: 14px;
}

.data-table--md th,
.data-table--md td {
  padding: 12px 16px;
}

.data-table--lg {
  font-size: 15px;
}

.data-table--lg th,
.data-table--lg td {
  padding: 16px 20px;
}

/* Header styles */
.data-table thead {
  background-color: #f9fafb;
  /* 固定头部位置 */
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table th {
  font-weight: 600;
  color: #374151;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  contain: layout;
}

.data-table__header-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sortable header */
.data-table__sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
  will-change: background-color;
}

.data-table__sortable:hover {
  background-color: #f3f4f6;
}

.data-table__sort-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: color 0.2s ease;
  will-change: color;
}

.data-table__sort-icon--active {
  color: #3b82f6;
}

/* Body styles */
.data-table tbody {
  /* 对大量行使用 content-visibility 优化 */
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

.data-table tbody tr {
  transition: background-color 0.2s ease;
  will-change: background-color;
  /* 每行独立渲染 */
  contain: layout paint;
}

.data-table tbody tr:hover {
  background-color: #f9fafb;
}

.data-table td {
  border-bottom: 1px solid #e5e7eb;
  color: #4b5563;
}

/* Striped rows */
.data-table--striped tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.data-table--striped tbody tr:nth-child(even):hover {
  background-color: #f3f4f6;
}

/* Bordered table */
.data-table--bordered {
  border: 1px solid #e5e7eb;
}

.data-table--bordered th,
.data-table--bordered td {
  border-right: 1px solid #e5e7eb;
}

.data-table--bordered th:last-child,
.data-table--bordered td:last-child {
  border-right: none;
}

/* Checkbox cell */
.data-table__checkbox-cell {
  width: 48px;
  text-align: center;
}

.data-table__checkbox-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Expand cell */
.data-table__expand-cell {
  width: 40px;
  text-align: center;
}

.data-table__expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6b7280;
  transition: transform 0.2s ease, color 0.2s ease;
  will-change: transform, color;
}

.data-table__expand-btn:hover {
  color: #374151;
}

.data-table__expand-btn--expanded {
  transform: rotate(90deg);
}

/* Actions cell */
.data-table__actions-cell {
  width: auto;
  white-space: nowrap;
}

.data-table__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-table__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 13px;
  color: #3b82f6;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  will-change: background-color;
}

.data-table__action-btn:hover {
  background-color: #eff6ff;
}

.data-table__action-btn--danger {
  color: #ef4444;
}

.data-table__action-btn--danger:hover {
  background-color: #fef2f2;
}

.data-table__action-btn--disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.data-table__action-btn--disabled:hover {
  background-color: transparent;
}

/* Selected row */
.data-table__row--selected {
  background-color: #eff6ff !important;
}

.data-table__row--selected:hover {
  background-color: #dbeafe !important;
}

/* Expanded row */
.data-table__expanded-row {
  background-color: #f9fafb;
}

.data-table__expanded-content {
  padding: 16px;
}

/* Loading state */
.data-table__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: #6b7280;
  gap: 12px;
}

.data-table__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: data-table-spin 0.8s linear infinite;
  will-change: transform;
}

@keyframes data-table-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Empty state */
.data-table__empty-row {
  background-color: transparent !important;
}

.data-table__empty-row:hover {
  background-color: transparent !important;
}

.data-table__empty-cell {
  padding: 48px 16px;
  text-align: center;
  border-bottom: none;
}

/* Virtual scrolling optimization */
.data-table--virtual tbody {
  content-visibility: auto;
  contain-intrinsic-size: 0 1000px;
}

.data-table--virtual tbody tr {
  contain: strict;
  content-visibility: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .data-table-wrapper {
    border-radius: 0;
  }

  .data-table--md th,
  .data-table--md td {
    padding: 10px 12px;
  }

  .data-table__actions {
    flex-wrap: wrap;
  }
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  z-index: 1100;
  will-change: opacity;
  /* 隔离渲染，防止影响外部布局 */
  contain: layout paint;
}

.drawer-backdrop.closing {
  animation: fadeOut 0.2s ease-out forwards;
}

/* Drawer Panel - 抽屉面板 */
.drawer-panel {
  width: min(60vw, 100%);
  max-width: 60vw;
  background: #ffffff;
  box-shadow: -12px 0 30px rgba(15, 23, 42, 0.25);
  border-radius: 16px 0 0 16px;
  display: flex;
  flex-direction: column;
  /* 使用 transform 进行滑入动画，GPU加速 */
  transform: translateX(0);
  will-change: transform;
  animation: drawerSlideIn 0.3s ease-out;
  /* 严格隔离复杂抽屉内容 */
  contain: layout paint style;
}

.drawer-panel.closing {
  animation: drawerSlideOut 0.2s ease-out forwards;
}

/* Drawer Header - 抽屉头部 */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
  /* 隔离头部布局计算 */
  contain: layout;
}

.drawer-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

/* Drawer Close Button */
.drawer-close-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 22px;
  line-height: 1;
  will-change: background-color, color;
}

.drawer-close-btn:hover {
  background: #e5e7eb;
  color: #111827;
}

/* Drawer Body - 抽屉内容区 */
.drawer-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  /* 优化滚动性能 */
  overflow-anchor: none;
}

/* Drawer with large content optimization */
.drawer-panel--large .drawer-body {
  /* 对大量内容使用 content-visibility */
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ============================================
   Drawer Variants
   ============================================ */

/* Small drawer - 窄抽屉 */
.drawer-panel--small {
  width: min(400px, 100%);
  max-width: 400px;
}

/* Large drawer - 宽抽屉 */
.drawer-panel--large {
  width: min(80vw, 100%);
  max-width: 80vw;
}

/* Full-width drawer on mobile */
@media (max-width: 768px) {
  .drawer-panel {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    /* 移动端从底部滑入 */
    animation: drawerSlideUp 0.3s ease-out;
  }

  .drawer-panel.closing {
    animation: drawerSlideDown 0.2s ease-out forwards;
  }
}

/* ============================================
   Drawer Animations (Mobile)
   ============================================ */

@keyframes drawerSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes drawerSlideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* ============================================
   Drawer Stack Context Management
   确保抽屉层级正确
   ============================================ */

.drawer-stack-item {
  will-change: transform;
  transform: translateZ(0);
}

/* ============================================
   Drawer Content Sections
   用于复杂抽屉的内容分区
   ============================================ */

.drawer-section {
  margin-bottom: 20px;
  /* 隔离各区块渲染 */
  contain: content;
}

.drawer-section:last-child {
  margin-bottom: 0;
}

.drawer-section__title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.source-dropdown-selector {
  position: relative;
  width: 100%;
}

.source-dropdown-selector .source-input-container {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: white;
  transition: all 0.2s ease;
}

.source-dropdown-selector .source-input-container:focus-within {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
}

.source-dropdown-selector .source-item {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.source-dropdown-selector .source-remove {
  margin-left: 6px;
  background: none;
  border: none;
  color: #334155;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.source-dropdown-selector .source-remove:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

.source-dropdown-selector .source-input {
  flex: 1;
  min-width: 160px;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 4px 0;
}

.source-dropdown-selector .dropdown-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.source-dropdown-selector .dropdown-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

.source-dropdown-selector .source-option {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.2s ease;
}

.source-dropdown-selector .source-option:hover {
  background: #f8f9fa;
}

.source-dropdown-selector .source-option:last-child {
  border-bottom: none;
}

.source-dropdown-selector .create-new {
  background: #f0fff4;
  border-left: 3px solid #10b981;
}

.source-dropdown-selector .create-new:hover {
  background: #ecfdf5;
}

.source-dropdown-selector .source-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.source-dropdown-selector .source-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.source-dropdown-selector .create-new .source-name {
  color: #10b981;
}

.source-dropdown-selector .source-meta {
  font-size: 12px;
  color: #999;
}

.source-dropdown-selector .loading-item,
.source-dropdown-selector .no-options {
  padding: 16px 12px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* ============================================
   Bibliography Dropdown Selector Styles
   ============================================ */

.searchable-multi-select .source-option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.searchable-multi-select .source-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.searchable-multi-select .source-name {
  font-weight: 500;
  color: #333;
  margin-right: 6px;
}

.searchable-multi-select .tag {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: 4px;
}

.searchable-multi-select .tag-private {
  background: #fef3c7;
  color: #d97706;
}

.searchable-multi-select .tag-public {
  background: #dbeafe;
  color: #2563eb;
}

.searchable-multi-select .source-meta {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.searchable-multi-select .source-actions {
  display: flex;
  gap: 4px;
}

.searchable-multi-select .icon-btn {
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  padding: 4px;
}

.searchable-multi-select .icon-btn:hover {
  opacity: 1;
  background: #f3f4f6;
  border-radius: 4px;
}

.searchable-multi-select .icon-btn.danger:hover {
  color: red;
  background: #fee2e2;
}

.searchable-multi-select .source-edit-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.searchable-multi-select .source-edit-input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 12px;
}

.searchable-multi-select .btn-xs {
  padding: 2px 6px;
  font-size: 12px;
  border: 1px solid #ccc;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.searchable-multi-select .btn-primary {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
  min-height: 200px;
  text-align: center;
  width: 100%;
  grid-column: 1 / -1;
  box-sizing: border-box;
}

/* 变体样式 */
.empty-state--compact {
  padding: 24px 16px;
  min-height: 120px;
  gap: 12px;
}

.empty-state--card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 尺寸样式 */
.empty-state--small {
  padding: 24px 16px;
  min-height: 120px;
}

.empty-state--small .empty-state__title {
  font-size: 14px;
}

.empty-state--small .empty-state__desc {
  font-size: 12px;
}

.empty-state--large {
  padding: 60px 32px;
  min-height: 280px;
}

.empty-state--large .empty-state__title {
  font-size: 20px;
}

.empty-state--large .empty-state__desc {
  font-size: 16px;
  max-width: 400px;
}

/* 子元素样式 */
.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.empty-state__title {
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.empty-state__desc {
  font-size: 14px;
  color: #64748b;
  max-width: 320px;
  line-height: 1.5;
}

.empty-state__action {
  margin-top: 8px;
}

.feedback-page {
  padding-bottom: var(--space-40, 40px);
}

/* ============================================
   状态徽章 - 反馈类型
   ============================================ */

.feedback-page .status-badge {
  display: inline-block;
  padding: var(--space-2, 2px) var(--space-8, 8px);
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-12, 12px);
  font-weight: 500;
}

.feedback-page .status-pending {
  background-color: var(--color-warning-100, #fef9c3);
  color: var(--color-warning-800, #854d0e);
}

.feedback-page .status-replied {
  background-color: var(--color-success-100, #dcfce7);
  color: var(--color-success-800, #166534);
}

.feedback-page .status-confirmed {
  background-color: var(--color-danger-100, #fee2e2);
  color: var(--color-danger-800, #b91c1c);
  margin-left: var(--space-4, 4px);
}

.feedback-page .status-adopted {
  background-color: var(--color-blue-200, #bfdbfe);
  color: var(--color-blue-900, #1e3a8a);
  margin-left: var(--space-4, 4px);
}

.feedback-page .status-success {
  background-color: var(--color-success-100, #dcfce7);
  color: var(--color-success-800, #166534);
}

.feedback-page .status-warning {
  background-color: var(--color-warning-100, #fef9c3);
  color: var(--color-warning-800, #854d0e);
}

.feedback-page .status-danger {
  background-color: var(--color-danger-100, #fee2e2);
  color: var(--color-danger-900, #7f1d1d);
}

.feedback-page .status-info {
  background-color: var(--color-info-100, #dbeafe);
  color: var(--color-info-800, #1e40af);
}

/* ============================================
   反馈类型徽章
   ============================================ */

.feedback-page .type-badge {
  padding: var(--space-2, 2px) var(--space-6, 6px);
  border-radius: var(--radius-4, 4px);
  font-size: var(--text-12, 12px);
}

.feedback-page .type-bug {
  background-color: var(--color-danger-100, #fee2e2);
  color: var(--color-danger-800, #b91c1c);
}

.feedback-page .type-suggestion {
  background-color: var(--color-success-100, #dcfce7);
  color: var(--color-success-800, #166534);
}

/* ============================================
   用户信息
   ============================================ */

.feedback-page .user-info {
  display: flex;
  flex-direction: column;
}

.feedback-page .user-name {
  font-weight: 500;
  font-size: var(--text-13, 13px);
}

.feedback-page .user-role {
  font-size: var(--text-11, 11px);
  color: var(--color-slate-500, #64748b);
}

.feedback-page .role-student {
  color: var(--color-blue-500, #3b82f6);
}

.feedback-page .role-publisher {
  color: var(--color-purple-400, #c084fc);
}

.feedback-page .user-realname {
  margin-right: var(--space-4, 4px);
}

/* ============================================
   反馈内容
   ============================================ */

.feedback-page .feedback-content-cell {
  max-width: var(--width-feedback-max, 400px);
}

.feedback-page .content-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.feedback-page .content-clamp-2 {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.feedback-page .feedback-content-card {
  margin-top: var(--space-16, 16px);
  padding: 0;
  overflow: hidden;
}

/* ============================================
   附件相关
   ============================================ */

.feedback-page .admin-attachments-preview {
  margin-top: var(--space-4, 4px);
  display: flex;
  gap: var(--space-4, 4px);
}

.feedback-page .attachment-link {
  cursor: pointer;
  font-size: var(--text-14, 14px);
}

.feedback-page .attachment-chip {
  font-size: var(--text-12, 12px);
  padding: var(--space-2, 2px) var(--space-6, 6px);
  background-color: var(--color-gray-100, #f3f4f6);
  border-radius: var(--radius-4, 4px);
  display: flex;
  align-items: center;
  gap: var(--space-4, 4px);
  cursor: pointer;
}

.feedback-page .feedback-attachments {
  margin-top: var(--space-8, 8px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8, 8px);
}

.feedback-page .feedback-attachment-item {
  padding: var(--space-4, 4px) var(--space-8, 8px);
  background-color: var(--color-gray-100, #f3f4f6);
  border-radius: var(--radius-4, 4px);
  font-size: var(--text-12, 12px);
  display: flex;
  align-items: center;
  gap: var(--space-6, 6px);
}

.feedback-page .feedback-attachment-name {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-gray-800, #1f2937);
  text-decoration: underline;
}

.feedback-page .feedback-attachment-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-red-500, #ef4444);
}

.feedback-page .attachments-row {
  margin-top: var(--space-6, 6px);
  display: flex;
  gap: var(--space-4, 4px);
  flex-wrap: wrap;
}

/* ============================================
   回复相关
   ============================================ */

.feedback-page .reply-block {
  margin-top: var(--space-8, 8px);
  padding: var(--space-8, 8px);
  background-color: var(--color-gray-50, #f9fafb);
  border-radius: var(--radius-4, 4px);
  font-size: var(--text-13, 13px);
  border-left: 2px solid var(--color-blue-500, #3b82f6);
}

.feedback-page .reply-label {
  font-weight: 500;
  color: var(--color-blue-500, #3b82f6);
  margin-bottom: var(--space-2, 2px);
}

.feedback-page .reply-clamp {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.feedback-page .reply-time {
  margin-top: var(--space-4, 4px);
  font-size: var(--text-12, 12px);
  color: var(--color-gray-500, #64748b);
}

.feedback-page .no-reply {
  color: var(--color-gray-400, #9ca3af);
  font-size: var(--text-12, 12px);
}

.feedback-page .status-confirmed-badge {
  margin-top: var(--space-4, 4px);
  font-size: var(--text-12, 12px);
  color: var(--color-green-600, #16a34a);
}

.feedback-page .status-adopted-badge {
  margin-top: var(--space-4, 4px);
  font-size: var(--text-12, 12px);
  color: var(--color-green-500, #22c55e);
}

/* ============================================
   回复表单
   ============================================ */

.feedback-page .reply-form .original-feedback {
  margin-bottom: var(--space-16, 16px);
  padding: var(--space-12, 12px);
  background-color: var(--color-gray-50, #f9fafb);
  border-radius: var(--radius-8, 8px);
}

.feedback-page .reply-form .feedback-meta {
  font-size: var(--text-12, 12px);
  color: var(--color-text-tertiary, #9ca3af);
  margin-bottom: var(--space-4, 4px);
}

.feedback-page .reply-form .feedback-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

/* ============================================
   拖放上传区域
   ============================================ */

.feedback-page .feedback-dropzone {
  border: 1px dashed var(--color-gray-400, #9ca3af);
  border-radius: var(--radius-8, 8px);
  padding: var(--space-12, 12px) var(--space-16, 16px);
  font-size: var(--text-13, 13px);
  color: var(--color-slate-500, #64748b);
  cursor: pointer;
  background-color: var(--color-gray-50, #f9fafb);
  transition: var(--transition-base, all 0.2s ease);
}

.feedback-page .feedback-dropzone--active {
  border-color: var(--color-blue-500, #3b82f6);
  background-color: var(--color-blue-100, #dbeafe);
  color: var(--color-blue-800, #1e40af);
}

/* ============================================
   表单元素
   ============================================ */

.feedback-page .feedback-type-group {
  display: flex;
  gap: var(--space-24, 24px);
  align-items: center;
}

.feedback-page .feedback-type-label {
  font-size: var(--text-14, 14px);
  color: var(--color-gray-600, #4b5563);
  white-space: nowrap;
}

.feedback-page .required-star {
  color: var(--color-red-500, #ef4444);
  margin-left: var(--space-4, 4px);
}

.feedback-page .radio-card {
  display: flex;
  align-items: center;
  gap: var(--space-6, 6px);
  white-space: nowrap;
}

.feedback-page .file-input-hidden {
  display: none;
}

.feedback-page .filter-select--reset {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.feedback-page .textarea-resize-v {
  width: 100%;
  resize: vertical;
}

/* ============================================
   空状态
   ============================================ */

.feedback-page .empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-40, 40px) 0;
  color: var(--color-gray-1100, #374151);
}

.feedback-page .empty-block__icon {
  margin-bottom: var(--space-16, 16px);
  opacity: 0.8;
}

.feedback-page .empty-block__title {
  font-size: var(--text-16, 16px);
  font-weight: 500;
  color: var(--color-slate-500, #64748b);
  margin-bottom: var(--space-8, 8px);
}

.feedback-page .empty-block__desc {
  font-size: var(--text-14, 14px);
}
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.toggle-switch--small { width: 36px; height: 20px; }
.toggle-switch--medium { width: 44px; height: 24px; }
.toggle-switch--large { width: 56px; height: 32px; }

.toggle-switch__track {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-color: var(--color-gray-1200, #e5e7eb);
  transition: background-color 0.2s ease;
}

.toggle-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 50%);
  height: calc(100% - 4px);
  aspect-ratio: 1 / 1;
  max-width: calc(100% - 4px);
  background-color: var(--color-white, #fff);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: left 0.2s ease;
}

.toggle-switch--small .toggle-switch__thumb { top: 2px; left: 2px; }
.toggle-switch--medium .toggle-switch__thumb { top: 2px; left: 2px; }
.toggle-switch--large .toggle-switch__thumb { top: 3px; left: 3px; }

.toggle-switch--checked .toggle-switch__track {
  background-color: var(--primary-color, #3b82f6);
}

.toggle-switch--checked.toggle-switch--small .toggle-switch__thumb {
  left: calc(100% - 18px);
}
.toggle-switch--checked.toggle-switch--medium .toggle-switch__thumb {
  left: calc(100% - 22px);
}
.toggle-switch--checked.toggle-switch--large .toggle-switch__thumb {
  left: calc(100% - 29px);
}

.toggle-switch--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -------------------------
   Multi Select Component
   ------------------------- */
.multi-select {
  position: relative;
  width: 100%;
}

.multi-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px var(--space-12, 12px);
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-12, 12px);
  background: var(--color-white, #ffffff);
  cursor: pointer;
  transition: var(--transition-base, all 0.2s ease);
  min-height: 40px;
}

.multi-select-trigger:hover {
  border-color: var(--color-gray-400, #9ca3af);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.multi-select-trigger.open {
  border-color: var(--color-primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.multi-select-trigger.disabled {
  background-color: var(--color-gray-50, #f9fafb);
  color: var(--color-gray-400, #9ca3af);
  cursor: not-allowed;
}

.multi-select-display {
  flex: 1;
  text-align: left;
}

.multi-select-display .placeholder {
  color: var(--color-gray-400, #9ca3af);
  font-size: var(--text-14, 14px);
}

.multi-select-display .selected {
  color: var(--color-gray-700, #374151);
  font-size: var(--text-14, 14px);
  font-weight: 500;
}

.multi-select-arrow {
  margin-left: 8px;
  color: var(--color-gray-500, #6b7280);
  transition: transform 0.2s ease;
}

.multi-select-arrow .rotated {
  transform: rotate(180deg);
}

.multi-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-12, 12px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  margin-top: 4px;
  animation: dropdownSlideIn 0.2s ease-out;
  max-height: 300px;
  overflow: hidden;
  min-width: 100%;
  width: auto;
}

/* Note: @keyframes dropdownSlideIn is defined in animations.css */

.multi-select-options {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

.multi-select-option {
  display: flex;
  align-items: center;
  padding: 8px var(--space-12, 12px);
  cursor: pointer;
  transition: background-color 0.2s ease;
  gap: 8px;
}

.multi-select-option:hover {
  background-color: var(--color-gray-100, #f1f5f9);
}

.multi-select-option.selected {
  background-color: var(--color-primary-50, #eff6ff);
  color: var(--color-primary-500, #3b82f6);
}

.multi-select-option .option-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.multi-select-option .option-label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.multi-select-footer {
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  padding: 6px 8px;
  background: var(--color-gray-50, #f8fafc);
}

.multi-select-footer .selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.multi-select-footer .selected-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-sky-100, #e0f2fe);
  color: var(--color-sky-700, #0369a1);
  font-size: var(--text-12, 12px);
}

.multi-select-footer .selected-tag .tag-remove {
  border: none;
  background: transparent;
  color: inherit;
  margin-left: 4px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* -------------------------
   Rounded Select Component
   ------------------------- */
.rounded-select {
  position: relative;
  width: 100%;
}

.rounded-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-12, 12px);
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-12, 12px);
  background: var(--color-white, white);
  color: var(--color-gray-700, #374151);
  cursor: pointer;
  transition: var(--transition-base, all 0.2s ease);
}

.rounded-select-trigger.open {
  border-color: var(--color-primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.rounded-select-value {
  font-size: var(--text-14, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.rounded-select-arrow {
  display: flex;
  align-items: center;
  color: var(--color-gray-500, #6b7280);
}

.rounded-select-arrow .rotated {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.rounded-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-white, white);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-12, 12px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  z-index: 2000;
  overflow: hidden;
}

.rounded-select-option {
  padding: 10px var(--space-12, 12px);
  font-size: var(--text-14, 14px);
  color: var(--color-gray-700, #374151);
  cursor: pointer;
  transition: background 0.2s ease;
}

.rounded-select-option:hover {
  background: var(--color-gray-50, #f8fafb);
}

.rounded-select-option.selected {
  background: var(--color-primary-50, #eff6ff);
  color: var(--color-primary-700, #1d4ed8);
}

/* Specific States for Question Filters */
.questions-filters.locked { opacity: 0.6; }
.rounded-select[aria-disabled="true"] .rounded-select-trigger { background: var(--color-gray-50, #f9fafb); color: var(--color-gray-400, #9ca3af); border-color: var(--color-gray-200, #e5e7eb); cursor: not-allowed; }
.rounded-select[aria-disabled="true"] .rounded-select-arrow { color: var(--color-gray-300, #cbd5e1); }
.questions-filters .search-input:disabled { background: var(--color-gray-50, #f9fafb); color: var(--color-gray-400, #9ca3af); cursor: not-allowed; }
.questions-filters .sort-order-btn:disabled { cursor: not-allowed; background: var(--color-gray-50, #f9fafb); color: var(--color-gray-400, #9ca3af); border-color: var(--color-gray-200, #e5e7eb); }

/* -------------------------
   Segmented Tabs Component
   ------------------------- */
.segmented-tabs { display: flex; width: fit-content; gap: 8px; align-items: center; margin-bottom: var(--space-12, 12px); }
.segmented-tabs { background: var(--color-white, #ffffff); border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-12, 12px); padding: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.content-card > .segmented-tabs,
.content-page > .segmented-tabs {
  margin-top: 10px;
}
.segmented-tabs--center { justify-content: center; margin: 0 auto; }
.segmented-tabs--inline { background: transparent; border: none; padding: 0; box-shadow: none; }
.segmented-tabs--gray { background: var(--color-gray-100, #f3f4f6); border: none; padding: 3px; border-radius: 6px; box-shadow: none; }
.segmented-tabs .segmented-tab { border: none; box-shadow: none; }

/* 灰色主Tab视觉：未选中同背景，选中白色悬浮 */
.segmented-tabs--gray .segmented-tab { background: transparent; color: #000000; font-weight: 500; }
.segmented-tabs--gray .segmented-tab:hover { background: transparent; }
.segmented-tabs--gray .segmented-tab--active { background: var(--color-white, #ffffff); color: #000000; border: 1px solid var(--color-gray-200, #e5e7eb); box-shadow: 0 8px 16px rgba(0,0,0,0.08); }
.segmented-tabs--gray .segmented-tab:nth-child(1) .segmented-tab__icon { color: var(--color-blue-500, #3b82f6); }
.segmented-tabs--gray .segmented-tab:nth-child(2) .segmented-tab__icon { color: var(--color-green-500, #22c55e); }

.segmented-tabs--sm .segmented-tab { height: 32px; padding: 0 var(--space-12, 12px); border-radius: 4px; font-size: var(--text-13, 13px); }
.segmented-tabs--md .segmented-tab { height: 36px; padding: 0 var(--space-14, 14px); border-radius: 6px; font-size: var(--text-14, 14px); }
.segmented-tabs--lg .segmented-tab { height: 40px; padding: 0 var(--space-16, 16px); border-radius: 6px; font-size: var(--text-15, 15px); }
.segmented-tab { display: inline-flex; align-items: center; gap: 8px; border: none; background: var(--color-white, #ffffff); color: #000000; font-weight: 600; cursor: pointer; transition: all 0.15s ease; box-shadow: none; }
.segmented-tab:hover { background: var(--color-gray-100, #f5f7fa); }

/* -------------------------
   Utilities
   ------------------------- */
/* 内容分割线 */
.content-divider {
  height: 0;
  border-top: 1px solid var(--color-gray-300, #cbd5e1);
  background: transparent;
  margin: var(--space-12, 12px) 0;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-group label,
.form-label {
  display: block;
  font-weight: 500;
  color: var(--color-black);
  font-size: var(--text-14);
}

.form-label.required::after {
  content: ' *';
  color: var(--color-error-500);
}

/* Form Inputs */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-6);
  font-size: var(--text-14);
  transition: var(--transition-base);
  background: var(--color-white);
  color: var(--color-gray-700);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: var(--shadow-filter-focus);
}

.form-input.disabled,
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--color-gray-50);
  color: var(--color-text-muted);
  cursor: not-allowed;
  border-color: var(--color-gray-200);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--color-error-500);
  box-shadow: var(--shadow-error);
}

/* Helper Text */
.form-help,
.help-text {
  margin-top: var(--space-6);
  font-size: var(--text-12);
  color: var(--color-text-muted);
}

.error-message {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-12);
  color: var(--color-error-500);
}

/* Checkbox & Radio */
.checkbox-group,
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-6);
  transition: var(--transition-base);
}

.checkbox-label:hover,
.radio-label:hover {
  background-color: var(--color-gray-50);
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
  margin-right: var(--space-8);
  width: var(--space-16);
  height: var(--space-16);
  cursor: pointer;
}

/* Password Input Wrapper */
.password-input-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: var(--space-10);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-2);
  border-radius: var(--radius-4);
  transition: var(--transition-base);
}

.password-toggle:hover {
  color: var(--color-gray-700);
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: var(--space-12);
  justify-content: flex-end;
  margin-top: var(--space-8);
}

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column;
  }
}

/* Form Layout Components */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--form-row-min-width), 1fr));
  gap: var(--form-row-gap);
  margin-bottom: var(--form-row-gap);
}

.form-actions-right {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
  margin-top: var(--space-24);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-gray-200);
}

.profile-form,
.password-form {
  display: flex;
  flex-direction: column;
  gap: var(--form-row-gap);
}

.image-upload {
  width: 100%;
}

.image-upload__header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.image-upload__label {
  font-size: 12px;
  color: var(--color-gray-600);
}

.image-upload__clear {
  font-size: 12px;
  color: var(--primary-color);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.image-upload__clear:hover {
  text-decoration: underline;
}

.image-upload__clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.image-upload__area {
  position: relative;
  width: 100%;
  min-height: 120px;
  border: 2px dashed var(--color-gray-300);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}

.image-upload__area:hover {
  border-color: var(--primary-color);
  background-color: var(--color-gray-50);
}

.image-upload__area--has-image {
  border-style: solid;
  border-color: var(--color-gray-200);
  padding: 0;
}

.image-upload__area--has-image:hover {
  border-color: var(--primary-color);
}

.image-upload__area--uploading,
.image-upload__area--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.image-upload__input {
  display: none;
}

/* 加载状态 */
.image-upload__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
}

.image-upload__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: image-upload-spin 1s linear infinite;
}

@keyframes image-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.image-upload__loading-text {
  font-size: 14px;
  color: var(--color-gray-500);
}

/* 预览状态 - 等比例缩略图模式 */
.image-upload__preview {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-gray-100, #f3f4f6);
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-upload__preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.image-upload__preview:hover .image-upload__preview-img {
  transform: scale(1.05);
}

.image-upload__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 12px;
}

.image-upload__preview:hover .image-upload__overlay {
  opacity: 1;
}

.image-upload__overlay-text {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

/* 占位状态 */
.image-upload__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--color-gray-400);
}

.image-upload__placeholder-text {
  font-size: 14px;
  color: var(--color-gray-600);
}

.image-upload__hint {
  font-size: 12px;
  opacity: 0.8;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.dialog-content {
  background: var(--color-white, white);
  border-radius: var(--radius-12, 12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 550px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideIn 0.3s ease-out;
}

.learning-setup-dialog .dialog-content {
  max-height: 85vh;
}

.learning-setup-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-20, 20px) var(--space-24, 24px);
  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
}

.learning-setup-dialog .dialog-header h2 {
  margin: 0;
  font-size: var(--text-20, 20px);
  font-weight: 600;
  color: #000000;
}

.learning-setup-dialog .dialog-close {
  background: none;
  border: none;
  font-size: var(--text-24, 24px);
  color: var(--color-gray-500, #64748b);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-4, 4px);
  transition: var(--transition-base, all 0.2s ease);
}

.learning-setup-dialog .dialog-close:hover {
  background-color: var(--color-gray-100, #f1f5f9);
  color: var(--color-gray-700, #374151);
}

.learning-setup-dialog .dialog-body {
  padding: var(--space-24, 24px);
}

.preview-dialog .dialog-header {
  padding: var(--space-12, 12px) var(--space-16, 16px);
}

.preview-dialog .dialog-body {
  padding: 8px var(--space-16, 16px) var(--space-16, 16px);
  overflow-x: hidden;
}

.preview-dialog .markdown-preview {
  padding-top: 8px;
  max-width: 860px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: var(--text-15, 15px);
  color: var(--color-gray-800, #1f2937);
  overflow-wrap: anywhere;
}

.preview-dialog .markdown-preview > :first-child {
  margin-top: 8px;
}

.preview-dialog .markdown-preview h1,
.preview-dialog .markdown-preview h2,
.preview-dialog .markdown-preview h3 {
  color: var(--color-gray-900, #111827);
  margin-top: var(--space-20, 20px);
  margin-bottom: 10px;
  font-weight: 700;
}

.preview-dialog .markdown-preview h1 {
  font-size: var(--text-22, 22px);
  border-bottom: 2px solid var(--color-gray-200, #e5e7eb);
  padding-bottom: 8px;
}

.preview-dialog .markdown-preview h2 {
  font-size: var(--text-18, 18px);
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
  padding-bottom: 6px;
}

.preview-dialog .markdown-preview h3 {
  font-size: var(--text-16, 16px);
}

.preview-dialog .markdown-preview p {
  margin: 0 0 var(--space-12, 12px) 0;
}

.preview-dialog .markdown-preview blockquote {
  border-left: 4px solid var(--color-primary-500, #3b82f6);
  background: var(--color-gray-50, #f8fafc);
  padding: 10px var(--space-14, 14px);
  margin: var(--space-12, 12px) 0;
  color: var(--color-gray-600, #475569);
}

.preview-dialog .markdown-preview ul,
.preview-dialog .markdown-preview ol {
  padding-left: 22px;
  margin: 10px 0 var(--space-12, 12px) 0;
}

.preview-dialog .markdown-preview li {
  margin-bottom: 6px;
}

.preview-dialog .markdown-preview code {
  background: var(--color-gray-100, #f1f5f9);
  color: var(--color-red-600, #e11d48);
  padding: 2px 6px;
  border-radius: var(--radius-4, 4px);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--text-13, 13px);
  word-break: break-word;
}

.preview-dialog .markdown-preview pre {
  background: var(--color-gray-900, #0f172a);
  color: var(--color-gray-200, #e2e8f0);
  padding: var(--space-14, 14px);
  border-radius: var(--radius-8, 8px);
  margin: var(--space-12, 12px) 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden;
}

.preview-dialog .markdown-preview pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.preview-dialog .markdown-preview img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto;
}

.preview-dialog .markdown-preview table {
  width: 100%;
  border-collapse: collapse;
}

.preview-dialog .markdown-preview th,
.preview-dialog .markdown-preview td {
  border: 1px solid var(--color-gray-200, #e5e7eb);
  padding: 8px;
  text-align: left;
  word-break: break-word;
}

.preview-dialog .markdown-preview .katex-display {
  overflow-x: hidden;
  max-width: 100%;
}

/* 基础表单样式继承自 components/forms.css，此处仅保留差异 */

.learning-setup-dialog .form-group {
  margin-bottom: var(--space-20, 20px);
}

.learning-setup-dialog .form-label {
  margin-bottom: 8px;
}

.learning-setup-dialog .form-select,
.learning-setup-dialog .form-input {
  border-radius: var(--radius-12, 12px);
}


/* 多选下拉框样式 */
.learning-setup-dialog .form-select.multi-select {
  min-height: 120px;
  padding: 8px;
}

.learning-setup-dialog .form-select.multi-select option {
  padding: 8px var(--space-12, 12px);
  margin: 2px 0;
  border-radius: var(--radius-4, 4px);
  cursor: pointer;
}

.learning-setup-dialog .form-select.multi-select option:checked {
  background: linear-gradient(135deg, var(--color-primary-500, #3b82f6) 0%, var(--color-primary-600, #2563eb) 100%);
  color: var(--color-white, white);
}

.learning-setup-dialog .form-select.multi-select option:hover {
  background-color: var(--color-gray-100, #f1f5f9);
}

.learning-setup-dialog .form-select.multi-select option:checked:hover {
  background: linear-gradient(135deg, var(--color-primary-600, #2563eb) 0%, var(--color-primary-700, #1d4ed8) 100%);
}

/* 帮助文本样式 */
.learning-setup-dialog .help-text {
  margin-top: 6px;
  font-size: var(--text-12, 12px);
  color: var(--color-gray-500, #64748b);
  font-style: italic;
}

.learning-setup-dialog .error-message {
  display: block;
  margin-top: 4px;
  font-size: var(--text-12, 12px);
  color: var(--color-red-500, #ef4444);
}

/* 复选框/单选框样式继承自 components/forms.css */

.learning-setup-dialog .checkbox-text,
.learning-setup-dialog .radio-text {
  font-size: var(--text-14, 14px);
  color: var(--color-gray-700, #374151);
}

/* footer 样式（与全局 .modal-footer 保持一致）*/
.learning-setup-dialog .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12, 12px);
  padding: var(--space-20, 20px);
  border-top: 1px solid var(--color-gray-200, #e5e8f0);
  background: var(--color-white, white);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* 取消按钮统一使用全局 btn btn-secondary 样式 */



/* 响应式设计 */
@media (max-width: 768px) {
  .dialog-content {
    width: 95%;
    margin: var(--space-20, 20px);
  }

  .learning-setup-dialog .dialog-header,
  .learning-setup-dialog .dialog-body {
    padding: var(--space-16, 16px);
  }
  .learning-setup-dialog .dialog-footer { padding: var(--space-16, 16px); }

  .learning-setup-dialog .form-select.multi-select {
    min-height: 100px;
  }
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 200px;
  background: transparent;
  margin: 0;
  box-sizing: border-box;
}

/* Size variants */
.loading--sm {
  min-height: 120px;
  padding: 24px 16px;
}

.loading--sm .loading-spinner {
  font-size: 13px;
  gap: 8px;
}

.loading--sm .loading-spinner::before {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.loading--md {
  min-height: 200px;
  padding: 48px 24px;
}

.loading--md .loading-spinner {
  font-size: 14px;
  gap: 10px;
}

.loading--md .loading-spinner::before {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.loading--lg {
  min-height: 280px;
  padding: 60px 32px;
}

.loading--lg .loading-spinner {
  font-size: 16px;
  gap: 12px;
}

.loading--lg .loading-spinner::before {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

/* Fullscreen variant */
.loading--fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100vh;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
}

/* Spinner */
.loading-spinner {
  display: flex;
  align-items: center;
  color: #3b82f6;
  font-weight: 500;
}

.loading-spinner::before {
  content: '';
  display: inline-block;
  border-style: solid;
  border-color: #3b82f6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}

.loading-spinner__text {
  white-space: nowrap;
}

/* Animation */
@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Inline loading for table cells */
.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
}

.loading-inline::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}
.loading-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
  width: 100%;
  min-height: 200px;
  grid-column: 1 / -1;
  background: transparent;
  margin: 0;
  box-sizing: border-box;
  /* 隔离加载容器渲染 */
  contain: layout paint;
}

.loading-spinner {
  color: var(--color-primary-500, #667eea);
  font-size: var(--text-16, 16px);
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Loading Spinner Icon - 旋转图标 */
.loading-spinner__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  /* 提示浏览器优化旋转动画 */
  will-change: transform;
}

/* Loading Spinner with Pulse - 脉冲效果 */
.loading-spinner--pulse {
  animation: pulse 2s ease-in-out infinite;
  will-change: opacity;
}

/* Loading Dots - 点状加载动画 */
.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.loading-dots__dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary-500, #667eea);
  border-radius: 50%;
  animation: loadingDotPulse 1.4s ease-in-out infinite both;
  will-change: transform, opacity;
}

.loading-dots__dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots__dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loadingDotPulse {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Loading Bar - 进度条 */
.loading-bar {
  width: 100%;
  height: 4px;
  background-color: var(--color-gray-1200, #e5e7eb);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  contain: paint;
}

.loading-bar__progress {
  height: 100%;
  background-color: var(--color-primary-500, #667eea);
  border-radius: 2px;
  /* 使用 transform 进行动画，GPU加速 */
  transform-origin: left;
  will-change: transform;
  transition: transform 0.3s ease-out;
}

.loading-bar--indeterminate .loading-bar__progress {
  width: 40%;
  animation: loadingBarIndeterminate 1.5s ease-in-out infinite;
}

@keyframes loadingBarIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(300%);
  }
}

/* Loading Skeleton - 骨架屏 */
.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-1200, #e5e7eb) 25%,
    var(--color-gray-1100, #f3f4f6) 50%,
    var(--color-gray-1200, #e5e7eb) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  will-change: background-position;
  border-radius: 4px;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Loading Overlay - 全屏加载遮罩 */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* 隔离渲染 */
  contain: layout paint;
}

.loading-overlay__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--color-gray-1200, #e5e7eb);
  border-top-color: var(--color-primary-500, #667eea);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  will-change: transform;
}

/* Loading Card - 卡片加载状态 */
.loading-card {
  padding: 24px;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-12, 12px);
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.08));
}

.loading-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.loading-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.loading-card__title {
  height: 16px;
  width: 60%;
  border-radius: 4px;
}

.loading-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loading-card__line {
  height: 12px;
  border-radius: 4px;
}

.loading-card__line--short {
  width: 40%;
}

.loading-card__line--medium {
  width: 70%;
}

.loading-card__line--long {
  width: 100%;
}

/* 分页样式已移动到 components/pagination.css */
.markdown-editor {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* 紧凑模式：用于内嵌于选项、填空等场景，减少视觉占用 */
.markdown-editor.compact .markdown-editor-header,
.markdown-editor.compact .markdown-editor-footer {
  display: none;
}

.markdown-editor.compact .markdown-toolbar {
  padding: 4px 8px;
  gap: 4px;
  border-bottom: 1px solid #e2e8f0;
}

.markdown-editor.compact .toolbar-button {
  height: 28px;
  min-width: 28px;
  font-size: 12px;
  padding: 4px 6px;
}

.markdown-editor.compact .markdown-textarea,
.markdown-editor.compact .markdown-preview {
  padding: 12px;
  font-size: 13px;
}

.markdown-editor:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 编辑器头部 */
.markdown-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.markdown-editor-label {
  font-weight: 600;
  color: #334155;
  font-size: 14px;
  margin: 0;
}

.markdown-editor-label.wrong-answer-label {
  color: #dc2626;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}

/* 标签页切换（保留占位样式，当前不显示具体按钮） */
.markdown-editor-tabs {
  display: none;
}

/* 工具栏 */
.markdown-toolbar {
  display: flex;
  gap: 2px;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.toolbar-button {
  padding: 6px 8px;
  border: none;
  background: #ffffff;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}

.toolbar-button:hover {
  background: #e2e8f0;
  color: #334155;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.toolbar-button:active {
  transform: translateY(0);
  background: #cbd5e1;
}

/* 数学公式与清除按钮使用与其他按钮一致的风格 */

/* 编辑器内容区域 */
.markdown-editor-content {
  position: relative;
  transition: all 0.3s ease;
}

.markdown-editor-content.focused {
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* 文本输入框 */
.markdown-textarea {
  width: 100%;
  padding: 16px;
  border: none;
  outline: none;
  resize: vertical;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
  background: #ffffff;
  transition: all 0.3s ease;
}

.markdown-textarea::placeholder {
  color: #94a3b8;
  font-style: italic;
}

.markdown-textarea:focus {
  background: #fefefe;
}

/* 预览区域 */
.markdown-preview {
  padding: 16px;
  background: #ffffff;
  color: #334155;
  line-height: 1.7;
  font-size: 14px;
  overflow-y: auto;
}

.markdown-preview.markdown-preview--slideover {
  padding-top: 0px;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
  color: #1e293b;
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 600;
}

.markdown-preview.markdown-preview--slideover h1,
.markdown-preview.markdown-preview--slideover h2,
.markdown-preview.markdown-preview--slideover h3,
.markdown-preview.markdown-preview--slideover h4,
.markdown-preview.markdown-preview--slideover h5,
.markdown-preview.markdown-preview--slideover h6 {
  margin-top: 12px;
}

.markdown-preview h1 {
  font-size: 24px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
}

.markdown-preview h2 {
  font-size: 20px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
}

.markdown-preview h3 {
  font-size: 18px;
}

.markdown-preview p {
  margin-bottom: 12px;
}

.markdown-preview code {
  background: #f1f5f9;
  color: #e11d48;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.markdown-preview pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 16px 0;
}

.markdown-preview pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.markdown-preview blockquote {
  border-left: 4px solid #3b82f6;
  background: #f8fafc;
  margin: 16px 0;
  padding: 12px 16px;
  color: #475569;
  font-style: italic;
}

.markdown-preview ul,
.markdown-preview ol {
  margin: 12px 0;
  padding-left: 24px;
}

.markdown-preview li {
  margin-bottom: 4px;
}

.markdown-preview a {
  color: #3b82f6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.markdown-preview a:hover {
  border-bottom-color: #3b82f6;
}

.markdown-preview strong {
  font-weight: 600;
  color: #1e293b;
}

.markdown-preview em {
  font-style: italic;
  color: #475569;
}

.markdown-preview img {
  max-width: 88%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0.8em auto;
  border: 1px solid #e2e8f0;
  cursor: zoom-in;
}

.markdown-preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  display: block;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.markdown-preview thead th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 600;
}

.markdown-preview th,
.markdown-preview td {
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.markdown-preview tbody tr:nth-child(odd) {
  background: #fbfdff;
}

/* 编辑器底部 */
.markdown-editor-footer {
  padding: 8px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.markdown-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.tip-text {
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.char-count {
  color: #94a3b8;
  font-weight: 500;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .markdown-editor-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .markdown-editor-tabs {
    align-self: stretch;
    justify-content: center;
  }
  
  .markdown-toolbar {
    padding: 6px 8px;
  }
  
  .toolbar-button {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .markdown-textarea,
  .markdown-preview {
    padding: 12px;
    font-size: 13px;
  }
  
  .markdown-tips {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .markdown-editor {
    background: #1e293b;
    border-color: #334155;
  }
  
  .markdown-editor-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-bottom-color: #475569;
  }
  
  .markdown-editor-label {
    color: #e2e8f0;
  }
  
  .markdown-toolbar {
    background: #1e293b;
    border-bottom-color: #475569;
  }
  
  .toolbar-button {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
  }
  
  .toolbar-button:hover {
    background: #475569;
    color: #e2e8f0;
  }
  
  .markdown-textarea {
    background: #1e293b;
    color: #e2e8f0;
  }
  
  .markdown-textarea::placeholder {
    color: #64748b;
  }
  
  .markdown-preview {
    background: #1e293b;
    color: #cbd5e1;
  }
  
  .markdown-editor-footer {
    background: #1e293b;
    border-top-color: #475569;
  }
  
  .tip-text {
    color: #94a3b8;
  }
  
  .char-count {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
  }
}

/* 动画效果 - 使用全局 fadeInUp 动画 */
.markdown-editor-content {
  animation: fadeInUp 0.3s ease;
}

/* 滚动条样式 */
.markdown-textarea::-webkit-scrollbar,
.markdown-preview::-webkit-scrollbar {
  width: 8px;
}

.markdown-textarea::-webkit-scrollbar-track,
.markdown-preview::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.markdown-textarea::-webkit-scrollbar-thumb,
.markdown-preview::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.markdown-textarea::-webkit-scrollbar-thumb:hover,
.markdown-preview::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Tiptap Editor Styles */
.tiptap-editor-content .ProseMirror {
  outline: none;
  min-height: inherit;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; /* Keep monospace for editor feel or change to sans-serif */
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
}

.tiptap-editor-content .ProseMirror p {
  margin-bottom: 0.8em;
}

.tiptap-editor-content .ProseMirror h1,
.tiptap-editor-content .ProseMirror h2,
.tiptap-editor-content .ProseMirror h3 {
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #1e293b;
}

.tiptap-editor-content .ProseMirror ul,
.tiptap-editor-content .ProseMirror ol {
  padding-left: 1.5em;
  margin-bottom: 0.8em;
}

.tiptap-editor-content .ProseMirror blockquote {
  border-left: 4px solid #3b82f6;
  background: #f8fafc;
  padding: 0.5em 1em;
  margin: 0.8em 0;
  color: #475569;
  font-style: italic;
}

.tiptap-editor-content .ProseMirror code {
  background: #f1f5f9;
  color: #e11d48;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}

.tiptap-editor-content .ProseMirror pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0.8em 0;
}

.tiptap-editor-content .ProseMirror pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.tiptap-editor-content .ProseMirror img {
  max-width: 88%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0.8em auto;
  border: 1px solid #e2e8f0;
}

.tiptap-editor-content .ProseMirror a {
  color: #3b82f6;
  text-decoration: underline;
  cursor: pointer;
}

.tiptap-editor-content .ProseMirror table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  display: block;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.tiptap-editor-content .ProseMirror thead th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 600;
}

.tiptap-editor-content .ProseMirror th,
.tiptap-editor-content .ProseMirror td {
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.tiptap-editor-content .ProseMirror tbody tr:nth-child(odd) {
  background: #fbfdff;
}

/* Layout Override */
.markdown-editor {
  width: 100%;
}

.markdown-editor .markdown-preview {
  width: 100%;
}
.message {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.message.success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.message.error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay-light, rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 1000);
  animation: fadeIn 0.2s ease-out;
  will-change: opacity;
  padding: 20px;
  box-sizing: border-box;
  /* 隔离渲染，防止影响外部布局 */
  contain: layout paint;
}

.modal-backdrop.closing {
  animation: fadeOut 0.2s ease-out forwards;
}

/* Modal Content - 模态框内容 */
.modal-content {
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-12, 12px);
  box-shadow: var(--shadow-modal, 0 8px 30px rgba(0, 0, 0, 0.15));
  width: 100%;
  height: auto;
  max-width: min(500px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  position: relative;
  /* 严格隔离，优化复杂模态框性能 */
  contain: layout paint style;
}

.modal-content.closing {
  animation: slideOut 0.2s ease-out forwards;
}

/* 学习参数弹窗窄版：比默认宽度缩小约 40% */
.modal-content.learning-setup-dialog {
  max-width: min(500px, calc(100vw - 40px));
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16, 16px) var(--space-24, 20px);
  border-bottom: 1px solid var(--color-gray-1200, #e5e7eb);
  background: var(--color-gray-1300, #f9fafb);
  flex-shrink: 0;
  contain: layout;
}

.modal-title {
  margin: 0;
  font-size: var(--text-16, 18px);
  font-weight: 600;
  color: #000000;
}

.modal-close-btn {
  background: none;
  border: none;
  padding: var(--space-4, 4px);
  cursor: pointer;
  color: var(--color-gray-500, #6b7280);
  border-radius: var(--radius-6, 6px);
  transition: var(--transition-base, all 0.2s ease);
  flex-shrink: 0;
  will-change: background-color, color;
}

.modal-close-btn:hover {
  background: var(--color-gray-1200, #e5e7eb);
  color: var(--color-gray-700, #374151);
}

.modal-body {
  padding: var(--space-24, 24px);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  /* 优化大量内容的滚动性能 */
  overflow-anchor: none;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-gray-1200, #e5e7eb);
  background: var(--color-white, #ffffff);
  flex-shrink: 0;
  contain: layout;
}

/* 添加题目对话框 - 紧凑表单布局 */
.add-question-modal .form-group {
  margin: 0 !important;
  gap: 0 !important;
}

/* ============================================
   useModalLayout Hook Components
   ============================================ */

/* Dialog Overlay */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
  will-change: opacity;
  backdrop-filter: blur(2px);
  /* 隔离渲染 */
  contain: layout paint;
}

.dialog-overlay.closing {
  animation: fadeOut 0.2s ease-out forwards;
}

/* Dialog Content */
.dialog-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: min(1000px, 92vw);
  height: auto;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: slideIn 0.3s ease-out;
  will-change: transform, opacity;
  /* 严格隔离复杂对话框 */
  contain: layout paint style;
}

.dialog-content.closing {
  animation: slideOut 0.2s ease-out forwards;
}

/* Dialog Header */
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  contain: layout;
}

.dialog-header__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  max-width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-header__close {
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: background-color 0.2s;
  will-change: background-color;
}

.dialog-header__close:hover {
  background-color: #f1f5f9;
}

/* Dialog Body */
.dialog-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 优化滚动性能 */
  overflow-anchor: none;
}

/* Dialog Footer */
.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  contain: layout;
}

.dialog-footer--right {
  justify-content: flex-end;
}

.dialog-footer--left {
  justify-content: flex-start;
}

.dialog-footer--space-between {
  justify-content: space-between;
}

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.form-row--full-width {
  width: 100%;
}

.form-row__label {
  text-align: right;
  font-weight: 500;
  color: #4b5563;
  align-self: flex-start;
  padding-top: 8px;
}

.form-row__label--block {
  margin-bottom: 8px;
  font-weight: 500;
  color: #4b5563;
  display: block;
}

.form-row__required {
  color: #ef4444;
  margin-left: 4px;
}

.form-row__control {
  min-width: 0;
  position: relative;
}

.form-row__error {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  font-size: 12px;
  color: #ef4444;
  line-height: 1.4;
  pointer-events: none;
}

/* ============================================
   Large Content Modal Optimizations
   用于包含大量内容的模态框
   ============================================ */

.modal-content--large .modal-body,
.dialog-content--large .dialog-body {
  /* 对大量内容使用 content-visibility */
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* ============================================
   Modal Stack Context Management
   确保模态框层级正确
   ============================================ */

.modal-stack-item {
  will-change: transform;
  transform: translateZ(0);
}.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.pagination-wrapper.load-more {
  justify-content: center;
  border-top: none;
}

/* 左侧 - 总条数 */
.pagination-left {
  flex-shrink: 0;
}

.pagination-total {
  font-size: 14px;
  color: #374151;
}

/* 右侧 - 分页导航区域 */
.pagination-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 每页条数选择器 */
.pagination-size-selector {
  flex-shrink: 0;
}

.pagination-size-selector .rounded-select {
  min-width: 90px;
}

/* 分页导航 */
.pagination-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 左右箭头 */
.pagination-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: #374151;
  transition: color 0.2s ease;
}

.pagination-arrow:hover:not(.disabled) {
  color: #3b82f6;
}

.pagination-arrow.disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

/* 页码区域 */
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 页码文字 */
.pagination-page {
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.pagination-page:hover:not(.active):not(.ellipsis) {
  color: #3b82f6;
}

.pagination-page.active {
  color: #3b82f6;
  font-weight: 500;
}

.pagination-page.ellipsis {
  cursor: default;
  color: #9ca3af;
}

/* 加载更多模式 */
.pagination-btn.more-btn {
  padding: 8px 24px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn.more-btn:hover:not(:disabled) {
  border-color: #9ca3af;
  background: #f9fafb;
}

.pagination-btn.more-btn:disabled {
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* 打印样式 */
@media print {
  .pagination-wrapper {
    display: none !important;
  }
}

/* 响应式 */
@media (max-width: 640px) {
  .pagination-wrapper {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }

  .pagination-right {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.meta-item-flex-1 {
  flex: 1;
}

.meta-item-flex-2 {
  flex: 2;
}

.meta-tag-source {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  color: #3730a3;
  display: inline-block;
}

.meta-tag-knowledge {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  color: #334155;
  display: inline-block;
  margin-right: 6px;
}

/* Video Section Styles */
.video-section {
  margin-top: 12px;
}

.video-container {
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid #e2e8f0;
}

.video-player {
  width: 100%;
  max-height: 360px;
  display: block;
}

/* Personal Summary Section Styles */
.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.summary-header-title {
  margin: 0;
}

.summary-edit-area {
  margin-bottom: 8px;
}

.summary-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-btn-small {
  padding: 4px 12px;
  font-size: 12px;
}

.summary-btn-group {
  display: flex;
  gap: 8px;
}

.summary-display-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.summary-display-title {
  margin: 0;
}

.summary-edit-btn-small {
  padding: 2px 8px;
  font-size: 12px;
}

/* Summary Edit Styles */
.summary-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.summary-edit-title {
  margin: 0;
}

.summary-editor-wrapper {
  margin-bottom: 8px;
}

.summary-edit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-gradient-btn-small {
  padding: 4px 12px;
  font-size: 12px;
}

.summary-edit-buttons {
  display: flex;
  gap: 8px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.search-input-wrapper:hover {
  border-color: #d1d5db;
}

.search-input-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Plain mode - no wrapper border, integrates with page styles */
.search-input-wrapper.search-input--plain {
  border: none;
  background: transparent;
  border-radius: 0;
}

.search-input-wrapper.search-input--plain:hover,
.search-input-wrapper.search-input--plain:focus-within {
  border: none;
  box-shadow: none;
}

.search-input-wrapper.search-input--plain .search-input {
  /* Inherit styles from page's .search-input */
  width: 100%;
}

/* Size variants */
.search-input--sm {
  height: 32px;
}

.search-input--sm .search-input {
  font-size: 13px;
  padding: 0 8px;
}

.search-input--md {
  height: 40px;
}

.search-input--md .search-input {
  font-size: 14px;
  padding: 0 12px;
}

.search-input--lg {
  height: 48px;
}

.search-input--lg .search-input {
  font-size: 15px;
  padding: 0 14px;
}

/* Input */
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: #1f2937;
  width: 100%;
  min-width: 0;
}

.search-input::placeholder {
  color: #9ca3af;
}

.search-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Disabled state */
.search-input-wrapper:has(.search-input:disabled) {
  background-color: #f9fafb;
  cursor: not-allowed;
}

.searchable-multi-select {
  position: relative;
  width: 100%;
}

/* Dropdown Portal Styles */
.searchable-dropdown-portal {
  z-index: 9999;
  background-color: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  animation: dropdownSlideIn 0.2s ease-out;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.searchable-multi-select .input-container {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  transition: all 0.2s ease;
  cursor: text;
}

.searchable-multi-select .input-container:hover {
  border-color: #cbd5e1;
}

.searchable-multi-select .input-container:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.searchable-multi-select .input-container.disabled {
  background: #f3f4f6;
  cursor: not-allowed;
}

.searchable-multi-select .selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.searchable-multi-select .selected-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.searchable-multi-select .remove-btn {
  margin-left: 6px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.searchable-multi-select .remove-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
  transform: scale(1.1);
}

.searchable-multi-select .search-input {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 4px 0;
  background: transparent;
}

/* Portal dropdown styles - these are rendered outside the component */
.searchable-dropdown-portal .dropdown-header {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.searchable-dropdown-portal .dropdown-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

.searchable-dropdown-portal .dropdown-option {
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f1f5f9;
}

.searchable-dropdown-portal .dropdown-option:last-child {
  border-bottom: none;
}

.searchable-dropdown-portal .dropdown-option:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding-left: 20px;
}

.searchable-dropdown-portal .dropdown-option.selected {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
}

.searchable-dropdown-portal .create-new {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0284c7;
  font-weight: 600;
}

.searchable-dropdown-portal .create-new:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0369a1;
}

.searchable-dropdown-portal .create-text {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.searchable-dropdown-portal .create-text::before {
  content: '+';
  font-size: 16px;
  font-weight: 700;
}

.searchable-dropdown-portal .loading-item,
.searchable-dropdown-portal .no-options {
  padding: 16px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.searchable-dropdown-portal .option-default {
  display: flex;
  flex-direction: column;
}

/* TagDropdownSelector specific styles - Flattened BEM naming */
.tag-option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-direction: row;
  width: 100%;
}

.tag-option-content .tag-name {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
  flex: 1;
}

.tag-option-content .tag-usage {
  font-size: 11px;
  color: #64748b;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  flex-shrink: 0;
}

/* Use increased specificity instead of deep nesting */
.dropdown-option:hover .tag-option-content .tag-usage {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4338ca;
}

.slide-over-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  visibility: hidden;
  transition: visibility 0.3s linear;
  /* 隔离遮罩层渲染 */
  contain: layout paint;
}

.slide-over-overlay.open {
  visibility: visible;
}

.slide-over-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  will-change: opacity;
}

.slide-over-overlay.open .slide-over-backdrop {
  opacity: 1;
}

.slide-over-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  /* 使用 transform 进行滑入动画，GPU加速 */
  transition: transform 0.3s ease-in-out;
  will-change: transform;
  max-width: 100%;
  /* 严格隔离面板内容 */
  contain: layout paint style;
}

.slide-over-panel.right {
  right: 0;
  transform: translateX(100%);
}

.slide-over-panel.left {
  left: 0;
  transform: translateX(-100%);
}

.slide-over-panel.open {
  transform: translateX(0);
}

.slide-over-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  contain: layout;
}

.slide-over-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.slide-over-close {
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
  will-change: background-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-over-close:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.slide-over-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  /* 优化滚动性能 */
  overflow-anchor: none;
}

/* Large content optimization */
.slide-over-panel--large .slide-over-body {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

.slide-over-panel.home-feature-slideover .slide-over-body {
  padding-top: 8px;
}

.slide-over-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
  flex-shrink: 0;
  contain: layout;
}

/* Size variants */
.slide-over-panel--small {
  width: min(400px, 100%);
}

.slide-over-panel--medium {
  width: min(600px, 100%);
}

.slide-over-panel--large {
  width: min(800px, 100%);
}

/* Mobile optimization */
@media (max-width: 768px) {
  .slide-over-panel {
    width: 100% !important;
  }
}.status-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* Size variants */
.status-badge--sm {
  padding: 2px 8px;
  font-size: 12px;
}

.status-badge--md {
  padding: 4px 12px;
  font-size: 13px;
}

.status-badge--lg {
  padding: 6px 16px;
  font-size: 14px;
}

/* Color variants - filled */
.status-badge--default {
  background-color: #f3f4f6;
  color: #374151;
}

.status-badge--success {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge--warning {
  background-color: #fef3c7;
  color: #92400e;
}

.status-badge--error {
  background-color: #fee2e2;
  color: #991b1b;
}

.status-badge--info {
  background-color: #e0f2fe;
  color: #0369a1;
}

.status-badge--pending {
  background-color: #f3e8ff;
  color: #6b21a8;
}

/* Color variants - outline */
.status-badge--outline.status-badge--default {
  background-color: transparent;
  border: 1px solid #374151;
}

.status-badge--outline.status-badge--success {
  background-color: transparent;
  border: 1px solid #166534;
}

.status-badge--outline.status-badge--warning {
  background-color: transparent;
  border: 1px solid #92400e;
}

.status-badge--outline.status-badge--error {
  background-color: transparent;
  border: 1px solid #991b1b;
}

.status-badge--outline.status-badge--info {
  background-color: transparent;
  border: 1px solid #0369a1;
}

.status-badge--outline.status-badge--pending {
  background-color: transparent;
  border: 1px solid #6b21a8;
}

/* Dot indicator */
.status-badge__dot {
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge--sm .status-badge__dot {
  width: 6px;
  height: 6px;
}

.status-badge--md .status-badge__dot {
  width: 8px;
  height: 8px;
}

.status-badge--lg .status-badge__dot {
  width: 10px;
  height: 10px;
}

/* Hover effect for interactive badges */
.status-badge--interactive:hover {
  opacity: 0.8;
  cursor: pointer;
}
.subject-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* -------------------------
   Element: Subject Button
   ------------------------- */
.subject-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  background: var(--color-gray-50);
  color: inherit;
  font-size: var(--text-14);
  cursor: pointer;
  transition: var(--transition-base);
}

.subject-btn:hover {
  border-color: var(--color-purple-400);
  background: var(--color-purple-100);
}

.subject-btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* State: Active */
.subject-btn.is-active {
  background: var(--color-purple-100);
  border-color: var(--color-purple-400);
  color: var(--color-purple-700);
}

/* Element: Icon */
.subject-btn__icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-6);
}

/* -------------------------
   Modifier: Colored Variant
   ------------------------- */
.subject-btn--colored {
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-full);
  font-size: var(--text-16);
}

.subject-btn--colored .subject-btn__icon {
  margin-right: var(--space-4);
}

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 640px) {
  .subject-selector {
    gap: var(--space-6);
  }

  .subject-btn {
    padding: var(--space-6) var(--space-10);
    font-size: var(--text-13);
  }

  .subject-btn--colored {
    padding: var(--space-8) var(--space-12);
    font-size: var(--text-14);
  }
}

.data-table {
  width: calc(100% - 20px);
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 4px;
  margin-left: 10px;
  margin-right: 10px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

/* 简化表格变体 */
.data-table--simple {
  border-collapse: collapse;
  box-shadow: none;
  border-radius: 0;
  border: none;
}

.data-table th,
.data-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.2s ease;
  color: #000000;
}

.data-table th {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  font-weight: 600;
  color: #000000;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e2e8f0;
}

.data-table th:first-child {
  border-top-left-radius: 8px;
}

.data-table th:last-child {
  border-top-right-radius: 8px;
}

.data-table tbody tr {
  transition: all 0.3s ease;
  background: #ffffff;
}

.data-table tbody tr:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Flattened row selectors using BEM-like approach */
.data-table__row--last td:first-child {
  border-bottom-left-radius: 8px;
}

.data-table__row--last td:last-child {
  border-bottom-right-radius: 8px;
}

.data-table__row--last td {
  border-bottom: none;
}

/* ============================================
   2. 表格操作按钮
   ============================================ */

.data-table .btn {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  margin: 0 2px;
}

.data-table .btn--link {
  padding: 0 4px;
  border-radius: 0;
  margin: 0 2px;
}

.data-table .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.data-table .btn--link:hover {
  transform: none;
  box-shadow: none;
}

/* ============================================
   3. 表格状态徽章
   ============================================ */

.data-table td span[style*="color"] {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   4. 表格复选框
   ============================================ */

.data-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #d1d5db;
  transition: all 0.2s ease;
  cursor: pointer;
}

.data-table input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.data-table input[type="checkbox"]:hover {
  border-color: #3b82f6;
  transform: scale(1.1);
}

/* ============================================
   5. 审核表格 (Admin Import)
   ============================================ */

.review-table {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.review-table__row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.review-table__row:hover {
  background: #f9fafb;
}

.review-table__row--head {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: #fff;
  font-weight: 600;
}

.review-table__row:last-child {
  border-bottom: none;
}

.review-table__cell {
  font-size: 14px;
  color: #334155;
}

.review-table__cell--fixed {
  overflow: hidden;
}

.review-table__cell:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================
   6. 分数表格 (Plan Page)
   ============================================ */

.score-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d1d5db;
}

.score-table th {
  background: #f3f4f6;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #d1d5db;
}

.score-table td {
  padding: 12px;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.score-table td.positive {
  color: #059669;
}

.score-table td.negative {
  color: #dc2626;
}

.score-table td.zero {
  color: #111827;
}

.score-table tr:last-child td {
  border-bottom: none;
}

/* ============================================
   7. 订单页面表格公共样式
   提取自 admin-orders.css, billing.css, publisher-orders.css
   ============================================ */

/* 表格区域 */
.table-section {
  margin: var(--space-24, 24px) 0;
}

/* 表格单元格 - 柔和文字 */
.table-cell-muted {
  color: var(--color-gray-500, #64748b);
  font-size: var(--text-12, 12px);
}

/* 集合元信息 */
.set-meta {
  color: var(--color-gray-500, #64748b);
  font-size: var(--text-12, 12px);
}

.set-item {
  margin-bottom: var(--space-4, 4px);
}

/* 订单状态徽章 */
.order-status-badge {
  color: var(--color-success-700, #15803d);
  background: var(--color-success-100, #dcfce7);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--text-12, 12px);
}

.order-status-badge--pending {
  color: var(--color-warning-700, #a16207);
  background: var(--color-warning-100, #fef9c3);
}

.order-status-badge--paid {
  color: var(--color-success-700, #15803d);
  background: var(--color-success-100, #dcfce7);
}

.order-status-badge--refunded {
  color: var(--color-danger-700, #b91c1c);
  background: var(--color-danger-100, #fee2e2);
}

/* ============================================
   8. 过滤器布局
   ============================================ */

/* 过滤器行 */
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
  justify-content: flex-end;
  width: 100%;
}

/* 过滤器区域 */
.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12, 12px);
}

.filter-left {
  display: flex;
  gap: var(--space-12, 12px);
  align-items: center;
}

/* 日期分隔符 */
.date-separator {
  color: var(--color-gray-500, #64748b);
}

/* 过滤器标签 */
.filter-label {
  font-size: var(--text-14, 14px);
  color: var(--color-gray-500, #64748b);
}

/* 过滤器选择器 */
.filter-select {
  padding: 0;
  border: none;
  background: transparent;
}

.filter-settlement-select {
  min-width: 160px;
}

/* ============================================
   9. 操作按钮组
   ============================================ */

.action-buttons {
  display: flex;
  gap: var(--space-8, 8px);
}

/* ============================================
   10. 空状态区域
   ============================================ */

.empty-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-24, 24px);
}

.tag-selector {
  position: relative;
  width: 100%;
}

.tag-selector .tag-input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  cursor: text;
  transition: all 0.2s ease;
}

.tag-selector .tag-input-container:hover {
  border-color: #cbd5e1;
}

.tag-selector .tag-input-container:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tag-selector .selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-right: 8px;
}

.tag-selector .tag-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 20px;
  font-size: 13px;
  color: white;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  transition: all 0.2s ease;
}

.tag-selector .tag-remove {
  margin-left: 6px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.tag-selector .tag-remove:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
  transform: scale(1.1);
}

.tag-selector .tag-input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 4px 0;
}

.tag-selector .tag-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  animation: tagDropdownSlideIn 0.2s ease-out;
}

@keyframes tagDropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tag-selector .dropdown-header {
  padding: 10px 14px;
  font-size: 12px;
  color: #64748b;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-selector .tag-suggestion {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f1f5f9;
}

.tag-selector .tag-suggestion:last-child {
  border-bottom: none;
}

.tag-selector .tag-suggestion:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding-left: 20px;
}

.tag-selector .tag-suggestion.selected {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
}

.tag-selector .tag-name {
  color: #374151;
  font-weight: 500;
}

.tag-selector .tag-usage {
  color: #64748b;
  font-size: 11px;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tag-selector .tag-suggestion:hover .tag-usage {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4338ca;
}

.tag-selector .create-new {
  color: #3b82f6;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tag-selector .create-new::before {
  content: '+';
  font-size: 16px;
  font-weight: 700;
}

.tag-selector .no-suggestions {
  padding: 16px;
  color: #64748b;
  font-size: 14px;
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}.welcome-card {
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.45);
  border: none;
  margin-bottom: 24px;
  color: #e5e7eb;
}

/* 水平布局（左右两栏） */
.welcome-card--horizontal {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 24px;
  align-items: center;
}

.welcome-card__header {
  max-width: 600px;
}

.welcome-card--horizontal .welcome-card__header {
  max-width: none;
}

.welcome-card__subtitle {
  font-size: 16px;
  opacity: 0.9;
}

.welcome-card__title {
  font-size: 26px;
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.welcome-card__description {
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.6;
}

.welcome-card__stats {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.welcome-card__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.welcome-card__stat-label {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.welcome-card__stat-value {
  font-size: 20px;
  font-weight: 600;
}

.welcome-card__stat-value--income {
  color: #facc15;
}

.welcome-card__stat-value--pending {
  color: #34d399;
}

/* 操作按钮区域 - 垂直布局 */
.welcome-card__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

/* 水平布局下的操作按钮 - 使用 flex 不换行 */
.welcome-card--horizontal .welcome-card__actions {
  margin-top: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  min-width: 0;
}

.welcome-card--horizontal .welcome-card__action {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.welcome-card__action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.welcome-card__action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.welcome-card__action-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.welcome-card__action-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.welcome-card__action-content h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.welcome-card__action-content p {
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.welcome-card__action-arrow {
  font-size: 18px;
  color: #9ca3af;
  font-weight: 300;
  flex-shrink: 0;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .welcome-card--horizontal {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .welcome-card--horizontal .welcome-card__actions {
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .welcome-card--horizontal .welcome-card__action {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .welcome-card {
    padding: 20px;
  }

  .welcome-card__title {
    font-size: 22px;
  }

  .welcome-card__stats {
    gap: 12px;
  }

  .welcome-card--horizontal .welcome-card__actions,
  .welcome-card__actions {
    flex-direction: column;
  }

  .welcome-card--horizontal .welcome-card__action {
    flex: 1 1 100%;
    min-width: auto;
  }
}

/* 变体：紧凑模式 */
.welcome-card--compact {
  padding: 20px;
}

.welcome-card--compact .welcome-card__title {
  font-size: 22px;
}

.welcome-card--compact .welcome-card__actions {
  margin-top: 16px;
}

.welcome-card--compact .welcome-card__action {
  padding: 12px;
}
.admin-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #f8fafc;
}

.admin-sidebar {
  width: 250px;
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.admin-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* 
   全局页面容器样式修正
   解决页面内容贴边问题，提供统一的内边距
*/
.page-container,
.content-page {
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* 
   嵌套容器处理
   当页面容器被嵌套使用时（如在Tab页中），取消内边距以避免双重缩进
*/
.content-page .page-container,
.page-container .page-container,
.content-page .content-page,
.admin-settings-page .page-container {
  padding: 0;
}
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f1f5f9; /* Slate-100 as global background */
}

/* 内容区域容器 - 白底圆角卡片 */
.app-body {
  display: flex;
  flex: 1;
  margin: 10px; /* 上下左右 100px 边距 */
  background: #ffffff;
  border-radius: 16px; /* 圆角 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden; /* 内部内容滚动 */
  overflow-x: hidden;
  position: relative;
  /* 计算高度：总高度 - Header高度(70px) - 上下边距(200px) */
  height: calc(100vh - 70px - 200px);
}

/* 全屏模式（如Onboarding）去除边距和圆角 */
.app-body.app-body--full {
  margin: 0;
  border-radius: 0;
  height: 100vh;
  box-shadow: none;
}

/* 侧边栏样式 */
.sidebar {
  width: 240px;
  background: #ffffff;
  border-right: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: #ffffff;
  padding: 0; /* 内部内容可能有自己的padding */
}

/* 侧边栏导航菜单样式 */
.nav-menu {
  list-style: none;
  padding: 16px;
  margin: 0;
}

.nav-menu li {
  margin-bottom: 4px;
}

.nav-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 14px;
}

.nav-menu li a:hover {
  background-color: #f8fafc;
  color: #1e293b;
}

.nav-menu li.active a {
  background-color: #eef2ff; /* Indigo-50 */
  color: #4f46e5; /* Indigo-600 */
  font-weight: 600;
}

.nav-menu .menu-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

/* 头部导航样式 */
.app-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  height: 70px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* 主页头部样式 */
.home-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-container {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.logo-link:hover {
  transform: translateY(-1px);
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.logo-icon:hover {
  transform: scale(1.05);
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

/* 主页头部的logo文字样式 */
.home-header .logo-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 公测期logo金黄色（必须在 home-header .logo-text 之后，才能覆盖它） */
.home-header .logo-text--beta {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 应用内头部的beta模式金色（覆盖 app-header 内的 logo-text 样式） */
.app-header .logo-text--beta {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #4a5568;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-link.nav-link--active {
  color: #3b82f6;
  font-weight: 700;
  background: #eef2ff;
  box-shadow: none;
  border: none;
}
.nav-link.nav-link--active::before {
  left: -100%;
  opacity: 0;
}
.nav-link.nav-link--active:focus { box-shadow: none; outline: none; }

.nav-item-with-submenu { position: relative; }
.submenu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  z-index: 1000;
  min-width: 160px;
}
.submenu-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
}
.submenu-item:hover { background: #f1f5f9; color: #111827; }
.submenu-item.active { background: #eef2ff; color: #3b82f6; font-weight: 700; }

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: left 0.3s ease;
  z-index: -1;
  opacity: 0.1;
}

.nav-link:hover::before {
  left: 0;
}

.nav-link:hover {
  color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.nav-link svg {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
}

.nav-link:hover svg {
  transform: scale(1.1);
}

.nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}

.nav-item-with-submenu > .nav-link {
  background: transparent;
  border: none;
}
.nav-item-with-submenu > .nav-link:focus { outline: none; }

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.user-menu:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-circle {
  width: 100%;
  height: 100%;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.avatar-circle:hover {
  transform: scale(1.05);
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.username {
  font-weight: 600;
  color: #2d3748;
  font-size: 0.9rem;
}

.user-role {
  font-size: 0.75rem;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
}

.logout-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.logout-btn svg {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
}

.logout-btn:hover svg {
  transform: scale(1.1);
}

.auth-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.login-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  color: white;
}

.login-btn svg {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
}

.login-btn:hover svg {
  transform: scale(1.1);
}

/* 用户菜单下拉样式 */
.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
  animation: menuFadeIn 0.2s ease-out;
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-menu-items {
  padding: 8px 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  transition: all 0.15s ease;
}

.user-menu-item:hover {
  background: #f9fafb;
  color: #111827;
}

.user-menu-item svg {
  color: #6b7280;
  flex-shrink: 0;
}

.user-menu-item:hover svg {
  color: #374151;
}

.user-menu-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}

.logout-item {
  color: #dc2626 !important;
}

.logout-item:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.logout-item svg {
  color: #dc2626 !important;
}

.logout-item:hover svg {
  color: #b91c1c !important;
}

/* 用户信息区域样式 */
.user-section {
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  box-shadow: none;
}

.user-info:hover {
  transform: scale(1.06);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar svg {
  color: #4f46e5;
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.user-info:hover .user-avatar svg {
  color: #3730a3;
  transform: scale(1.05);
}

.vip-badge {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #b45309;
  background-color: #fef3c7;
  border: 1px solid #fed7aa;
  box-shadow: none;
  white-space: nowrap;
}

/* 头部导航响应式设计 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 1rem;
  }
  
  .header-center {
    flex: 0;
    margin: 0 1rem;
  }
  
  .main-nav {
    display: none; /* 移动端暂时隐藏菜单 */
  }
  
  .header-right {
    gap: 0.5rem;
  }
  
  .user-menu {
    padding: 0.25rem;
    background: transparent;
    border: none;
  }
  
  .user-details, .user-role {
    display: none;
  }
}
body.login-page {
  overflow: hidden;
}

/* 导航页强制无滚动 */
body.onboarding-page {
  overflow: hidden;
  height: 100vh;
}

/* 应用根容器样式 - 使用特异性替代 !important */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 主内容区域样式 */
.app .main-content {
  flex: 1;
  overflow-y: auto;
  max-height: calc(var(--viewport-height-100) - var(--height-header)); /* 减去header高度 */
}

/* 计划页面专用：禁用主内容区域滚动，让子容器滚动 */
.app .main-content.no-global-scroll {
  overflow-y: hidden;
  max-height: none;
  height: calc(var(--viewport-height-100) - var(--height-header));
}

.main-content.no-global-scroll {
  overflow-y: hidden;
}

/* Onboarding 全屏主容器高度，不扣除Header */
.app .main-content.onboarding-full {
  height: 100vh;
  overflow: hidden;
}

.plan-no-browser-scroll {
  overflow-y: hidden;
}

/* 容器样式 */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* 首页样式 */
.home-page {
  /* 移除固定高度限制 */
}.mobile-ai__welcome {
  background: linear-gradient(180deg, #E6F7FF 0%, #FFFFFF 100%);
  border-radius: var(--mobile-radius-xl);
  padding: var(--mobile-space-lg);
  margin-bottom: var(--mobile-space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mobile-ai__welcome-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1890FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mobile-space-md);
  color: #ffffff;
  font-size: 28px;
}

.mobile-ai__welcome-title {
  font-size: var(--mobile-font-xl);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-ai__welcome-desc {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  line-height: var(--mobile-line-height-relaxed);
}

.mobile-ai__quick {
  margin-bottom: var(--mobile-space-lg);
}

.mobile-ai__quick-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-md);
}

.mobile-ai__quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mobile-space-md);
}

.mobile-ai__quick-card {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-md);
  box-shadow: var(--mobile-shadow-sm);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-ai__quick-card:active {
  transform: scale(0.97);
}

.mobile-ai__quick-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mobile-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: var(--mobile-space-sm);
}

.mobile-ai__quick-icon--parse {
  background: #E6F7FF;
  color: #1890FF;
}

.mobile-ai__quick-icon--explain {
  background: #F6FFED;
  color: #52C41A;
}

.mobile-ai__quick-icon--plan {
  background: #FFF7E6;
  color: #FAAD14;
}

.mobile-ai__quick-icon--analyze {
  background: #F9F0FF;
  color: #722ED1;
}

.mobile-ai__quick-label {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
}

.mobile-ai__quick-desc {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: 2px;
}

.mobile-ai__history {
  margin-bottom: var(--mobile-space-lg);
}

.mobile-ai__history-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-md);
}

.mobile-ai__history-list {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  overflow: hidden;
}

.mobile-ai__history-item {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md);
  border-bottom: 1px solid var(--mobile-border-light);
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
}

.mobile-ai__history-item:last-child {
  border-bottom: none;
}

.mobile-ai__history-item:active {
  background-color: var(--mobile-bg-tertiary);
}

.mobile-ai__history-content {
  flex: 1;
  min-width: 0;
}

.mobile-ai__history-item-title {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-ai__history-item-meta {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: 2px;
  display: flex;
  gap: var(--mobile-space-sm);
}

.mobile-ai__history-arrow {
  color: var(--mobile-text-tertiary);
  margin-left: var(--mobile-space-sm);
}

.mobile-ai__chat {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mobile-bg-secondary);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.mobile-ai__chat-header {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md);
  padding-top: calc(var(--mobile-space-md) + var(--mobile-safe-area-top));
  background: var(--mobile-bg-primary);
  border-bottom: 1px solid var(--mobile-border-light);
}

.mobile-ai__chat-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--mobile-text-primary);
  cursor: pointer;
  margin-right: var(--mobile-space-sm);
}

.mobile-ai__chat-title {
  flex: 1;
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-ai__chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mobile-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-md);
}

.mobile-ai__bubble {
  max-width: 80%;
  padding: var(--mobile-space-md);
  border-radius: var(--mobile-radius-lg);
  font-size: var(--mobile-font-md);
  line-height: var(--mobile-line-height-relaxed);
  word-break: break-word;
}

.mobile-ai__bubble--ai {
  align-self: flex-start;
  background: #F5F5F5;
  color: var(--mobile-text-primary);
  border-bottom-left-radius: var(--mobile-radius-sm);
}

.mobile-ai__bubble--user {
  align-self: flex-end;
  background: #1890FF;
  color: #ffffff;
  border-bottom-right-radius: var(--mobile-radius-sm);
}

.mobile-ai__input {
  display: flex;
  align-items: flex-end;
  gap: var(--mobile-space-sm);
  padding: var(--mobile-space-md);
  padding-bottom: calc(var(--mobile-space-md) + var(--mobile-safe-area-bottom));
  background: var(--mobile-bg-primary);
  border-top: 1px solid var(--mobile-border-light);
}

.mobile-ai__input-camera {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--mobile-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-ai__input-field {
  flex: 1;
  min-height: 36px;
  max-height: 100px;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  border: 1px solid var(--mobile-border-medium);
  border-radius: 20px;
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-primary);
  resize: none;
  outline: none;
  -webkit-appearance: none;
  line-height: var(--mobile-line-height-normal);
}

.mobile-ai__input-field:focus {
  border-color: #1890FF;
}

.mobile-ai__input-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--mobile-transition-fast);
}

.mobile-ai__input-send--active {
  background: #1890FF;
  color: #ffffff;
}

.mobile-ai__input-send--inactive {
  background: #BFBFBF;
  color: #ffffff;
  cursor: not-allowed;
}

.mobile-ai__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-xxl);
  text-align: center;
}

.mobile-ai__empty-icon {
  font-size: 48px;
  margin-bottom: var(--mobile-space-md);
}

.mobile-ai__empty-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-ai__empty-desc {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}@keyframes mobileFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mobileFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes mobileSlideInRight {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes mobileSlideInLeft {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes mobileSlideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes mobileSlideInDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes mobileScaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes mobileRipple {
  from { transform: scale(0); opacity: 0.5; }
  to { transform: scale(4); opacity: 0; }
}

@keyframes mobilePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes mobileShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes mobileBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes mobileSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.mobile-animate-fade-in { animation: mobileFadeIn 0.3s ease-out; }
.mobile-animate-slide-up { animation: mobileSlideInUp 0.3s ease-out; }
.mobile-animate-slide-right { animation: mobileSlideInRight 0.3s ease-out; }
.mobile-animate-scale-in { animation: mobileScaleIn 0.2s ease-out; }
.mobile-animate-pulse { animation: mobilePulse 2s infinite; }
.mobile-animate-shake { animation: mobileShake 0.5s; }
.mobile-animate-bounce { animation: mobileBounce 1s infinite; }
.mobile-animate-spin { animation: mobileSpin 1s linear infinite; }
.mobile-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: #F5F5F5;
  padding: 24px;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.mobile-auth-page--register {
  padding-top: 0;
}

.mobile-auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 40px;
}

.mobile-auth-logo__image {
  width: 64px;
  height: 64px;
  border-radius: var(--mobile-radius-lg);
  margin-bottom: var(--mobile-space-md);
}

.mobile-auth-logo__title {
  font-size: 24px;
  font-weight: var(--mobile-font-bold);
  color: #262626;
  margin-bottom: var(--mobile-space-xs);
}

.mobile-auth-logo__subtitle {
  font-size: 14px;
  font-weight: var(--mobile-font-normal);
  color: #8C8C8C;
}

.mobile-auth-logo__beta-notice {
  font-size: var(--mobile-font-xs);
  color: #ef4444;
  margin-top: var(--mobile-space-sm);
  margin-bottom: var(--mobile-space-lg);
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  background: rgba(239, 68, 68, 0.08);
  border-radius: var(--mobile-radius-sm);
  line-height: var(--mobile-line-height-normal);
}

.mobile-auth-form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mobile-auth-tabs {
  display: flex;
  align-items: center;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-md);
  padding: 4px;
  margin-bottom: var(--mobile-space-lg);
  border: 1px solid var(--mobile-border-light);
}

.mobile-auth-tab {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--mobile-radius-sm);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
}

.mobile-auth-tab--active {
  background: #1890FF;
  color: var(--mobile-text-inverse);
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
}

.mobile-auth-tab:active:not(.mobile-auth-tab--active) {
  opacity: 0.6;
}

.mobile-auth-input {
  display: flex;
  align-items: center;
  height: 56px;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-md);
  border: 1px solid var(--mobile-border-medium);
  padding: 0 var(--mobile-space-md);
  margin-bottom: var(--mobile-space-md);
  transition: border-color var(--mobile-transition-fast),
              box-shadow var(--mobile-transition-fast);
}

.mobile-auth-input:focus-within {
  border-color: #1890FF;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
}

.mobile-auth-input--error {
  border-color: var(--mobile-error);
}

.mobile-auth-input--error:focus-within {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.mobile-auth-input__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobile-text-tertiary);
  margin-right: var(--mobile-space-sm);
  flex-shrink: 0;
}

.mobile-auth-input__field {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: transparent;
  -webkit-appearance: none;
}

.mobile-auth-input__field::placeholder {
  color: var(--mobile-text-tertiary);
}

.mobile-auth-input__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--mobile-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-auth-input__action:active {
  opacity: 0.6;
}

.mobile-auth-input__code-btn {
  white-space: nowrap;
  font-size: var(--mobile-font-sm);
  color: #1890FF;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--mobile-space-xs) var(--mobile-space-sm);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-auth-input__code-btn:disabled {
  color: var(--mobile-text-tertiary);
  cursor: not-allowed;
}

.mobile-auth-error {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-error);
  margin-bottom: var(--mobile-space-md);
  padding: 0 var(--mobile-space-xs);
}

.mobile-auth-submit {
  width: 100%;
  height: 48px;
  background: #1890FF;
  color: var(--mobile-text-inverse);
  border: none;
  border-radius: var(--mobile-radius-md);
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--mobile-transition-fast),
              transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  margin-top: var(--mobile-space-sm);
}

.mobile-auth-submit:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.mobile-auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-auth-submit__loading {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: mobile-auth-spin 0.8s linear infinite;
  margin-right: var(--mobile-space-sm);
}

@keyframes mobile-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--mobile-space-md);
  margin-bottom: var(--mobile-space-xl);
}

.mobile-auth-links__item {
  font-size: var(--mobile-font-sm);
  color: #1890FF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-auth-links__item:active {
  opacity: 0.6;
}

.mobile-auth-links__text {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
}

.mobile-auth-links__link {
  color: #1890FF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-auth-links__link:active {
  opacity: 0.6;
}

.mobile-auth-agreement {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--mobile-space-md);
  padding: 0 var(--mobile-space-xs);
}

.mobile-auth-agreement__checkbox {
  width: 20px;
  height: 20px;
  border-radius: var(--mobile-radius-sm);
  border: 1.5px solid var(--mobile-border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: var(--mobile-space-sm);
  margin-top: 1px;
  transition: background-color var(--mobile-transition-fast),
              border-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-auth-agreement__checkbox--checked {
  background: #1890FF;
  border-color: #1890FF;
}

.mobile-auth-agreement__check {
  width: 14px;
  height: 14px;
  color: #ffffff;
}

.mobile-auth-agreement__text {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  line-height: var(--mobile-line-height-normal);
}

.mobile-auth-agreement__link {
  color: #1890FF;
  text-decoration: none;
}

.mobile-auth-divider {
  display: flex;
  align-items: center;
  margin: var(--mobile-space-lg) 0;
}

.mobile-auth-divider__line {
  flex: 1;
  height: 1px;
  background: var(--mobile-border-light);
}

.mobile-auth-divider__text {
  padding: 0 var(--mobile-space-md);
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
}

.mobile-auth-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-space-xl);
}

.mobile-auth-social--updated {
  gap: var(--mobile-space-xl);
}

.mobile-auth-social__item {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  border: none;
  padding: 0;
  outline: none;
}

.mobile-auth-social__item:active {
  transform: scale(0.95);
}

.mobile-auth-social__item--wechat {
  background: #07C160;
}

.mobile-auth-social__item--qq {
  background: #12B7F5;
}

.mobile-auth-social__item--alipay {
  background: #1677FF;
}

.mobile-auth-social__icon {
  width: 28px;
  height: 28px;
  color: #ffffff;
}

.mobile-auth-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--mobile-space-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-auth-qrcode__icon {
  width: 40px;
  height: 40px;
  color: var(--mobile-text-tertiary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-auth-qrcode__text {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
}

.mobile-auth-remember {
  display: flex;
  align-items: center;
  margin-bottom: var(--mobile-space-md);
  padding: 0 var(--mobile-space-xs);
}

.mobile-auth-remember__checkbox {
  width: 18px;
  height: 18px;
  border-radius: var(--mobile-radius-sm);
  border: 1.5px solid var(--mobile-border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: var(--mobile-space-sm);
  transition: background-color var(--mobile-transition-fast),
              border-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-auth-remember__checkbox--checked {
  background: #1890FF;
  border-color: #1890FF;
}

.mobile-auth-remember__check {
  width: 12px;
  height: 12px;
  color: #ffffff;
}

.mobile-auth-remember__text {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-auth-grade {
  margin-bottom: var(--mobile-space-md);
  padding: 0 var(--mobile-space-xs);
}

.mobile-auth-grade__label {
  display: block;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin-bottom: var(--mobile-space-sm);
}

.mobile-auth-grade__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mobile-space-sm);
}

.mobile-auth-grade__tag {
  padding: 12px;
  border-radius: 16px;
  border: none;
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  background: #F5F5F5;
  color: #595959;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-auth-grade__tag:active {
  transform: scale(0.96);
}

.mobile-auth-grade__tag--active {
  background: #1890FF;
  color: #ffffff;
}

.mobile-auth-grade__error {
  display: block;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-error);
  margin-top: var(--mobile-space-xs);
}

/* ===== 扫码登录页面样式 ===== */

.mobile-scan-login {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mobile-bg-primary);
  padding: 0;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-scan-login__content {
  flex: 1;
  padding: var(--mobile-space-lg);
  padding-top: calc(44px + var(--mobile-space-lg));
  overflow-y: auto;
}

/* 相机预览区域 */
.mobile-scan-login__camera-section {
  margin-bottom: var(--mobile-space-xl);
}

.mobile-scan-login__camera {
  width: 100%;
  height: 280px;
  background: #262626;
  border-radius: var(--mobile-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mobile-space-md);
  position: relative;
  overflow: hidden;
}

.mobile-scan-login__camera-icon {
  width: 64px;
  height: 64px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--mobile-space-md);
}

.mobile-scan-login__camera-hint {
  font-size: var(--mobile-font-md);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.mobile-scan-login__camera-btn {
  width: 100%;
  height: 48px;
  background: #1890FF;
  color: var(--mobile-text-inverse);
  border: none;
  border-radius: var(--mobile-radius-md);
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--mobile-transition-fast),
              transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-scan-login__camera-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.mobile-scan-login__camera-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 手动输入区域 */
.mobile-scan-login__manual {
  background: var(--mobile-bg-secondary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-lg);
  margin-bottom: var(--mobile-space-lg);
}

.mobile-scan-login__manual-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-bold);
  color: var(--mobile-text-primary);
  margin: 0 0 var(--mobile-space-xs) 0;
}

.mobile-scan-login__manual-hint {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin: 0 0 var(--mobile-space-md) 0;
  line-height: 1.5;
}

.mobile-scan-login__input-wrapper {
  margin-bottom: var(--mobile-space-md);
}

.mobile-scan-login__input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-md);
  padding: 0 var(--mobile-space-md);
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-primary);
  outline: none;
  transition: border-color var(--mobile-transition-fast),
              box-shadow var(--mobile-transition-fast);
  -webkit-appearance: none;
}

.mobile-scan-login__input:focus {
  border-color: #1890FF;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
}

.mobile-scan-login__input::placeholder {
  color: var(--mobile-text-tertiary);
}

.mobile-scan-login__input:disabled {
  background: #F5F5F5;
  cursor: not-allowed;
}

.mobile-scan-login__input-wrapper--error .mobile-scan-login__input {
  border-color: var(--mobile-error);
}

.mobile-scan-login__input-error {
  display: block;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-error);
  margin-top: var(--mobile-space-xs);
}

.mobile-scan-login__submit {
  width: 100%;
  height: 48px;
  background: #1890FF;
  color: var(--mobile-text-inverse);
  border: none;
  border-radius: var(--mobile-radius-md);
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--mobile-transition-fast),
              transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-scan-login__submit:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.mobile-scan-login__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 状态提示 */
.mobile-scan-login__status {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md);
  border-radius: var(--mobile-radius-md);
  margin-bottom: var(--mobile-space-lg);
}

.mobile-scan-login__status-icon {
  flex-shrink: 0;
  margin-right: var(--mobile-space-sm);
}

.mobile-scan-login__status-text {
  font-size: var(--mobile-font-md);
  line-height: 1.5;
}

.mobile-scan-login__status-loading {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(24, 144, 255, 0.2);
  border-top-color: #1890FF;
  border-radius: 50%;
  animation: mobile-scan-spin 0.8s linear infinite;
  margin-right: var(--mobile-space-sm);
}

@keyframes mobile-scan-spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-scan-login__status--success {
  background: rgba(82, 196, 26, 0.1);
  color: #52C41A;
  border: 1px solid rgba(82, 196, 26, 0.3);
}

.mobile-scan-login__status--error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--mobile-error);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.mobile-scan-login__status--scanning {
  background: rgba(24, 144, 255, 0.1);
  color: #1890FF;
  border: 1px solid rgba(24, 144, 255, 0.3);
}

/* 使用说明 */
.mobile-scan-login__tips {
  background: #FAFAFA;
  border-radius: var(--mobile-radius-md);
  padding: var(--mobile-space-md);
}

.mobile-scan-login__tips-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin: 0 0 var(--mobile-space-sm) 0;
}

.mobile-scan-login__tips-list {
  margin: 0;
  padding-left: var(--mobile-space-md);
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  line-height: 1.8;
}

.mobile-scan-login__tips-list li {
  margin-bottom: var(--mobile-space-xs);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--mobile-font-family);
  font-size: var(--mobile-font-md);
  line-height: var(--mobile-line-height-normal);
  color: var(--mobile-text-primary);
  background-color: var(--mobile-bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 移动端视口优化 */
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#root,
#react-target {
  height: 100%;
  width: 100%;
}

/* ========================================
   移动端特定优化 - Mobile Optimizations
   ======================================== */

/* 禁用文本选择（可选） */
.mobile-no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* 启用文本选择 */
.mobile-selectable {
  -webkit-user-select: text;
  user-select: text;
}

/* 禁用点击高亮 */
.mobile-no-tap-highlight {
  -webkit-tap-highlight-color: transparent;
}

/* 平滑滚动 */
.mobile-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 隐藏滚动条但保持滚动功能 */
.mobile-scrollable::-webkit-scrollbar {
  display: none;
}

.mobile-scrollable {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========================================
   触摸反馈 - Touch Feedback
   ======================================== */

/* 按钮点击效果 */
.mobile-button {
  transition: opacity var(--mobile-transition-fast),
              transform var(--mobile-transition-fast);
}

.mobile-button:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 列表项点击效果 */
.mobile-list-item {
  transition: background-color var(--mobile-transition-fast);
}

.mobile-list-item:active {
  background-color: var(--mobile-bg-tertiary);
}

/* 卡片点击效果 */
.mobile-card {
  transition: transform var(--mobile-transition-fast),
              box-shadow var(--mobile-transition-fast);
}

.mobile-card:active {
  transform: translateY(-1px);
  box-shadow: var(--mobile-shadow-md);
}

/* ========================================
   基础布局 - Base Layout
   ======================================== */

/* Flex 布局工具类 */
.mobile-flex {
  display: flex;
}

.mobile-flex-col {
  display: flex;
  flex-direction: column;
}

.mobile-flex-1 {
  flex: 1;
}

.mobile-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-flex-wrap {
  flex-wrap: wrap;
}

/* 安全区域适配 */
.mobile-safe-top {
  padding-top: var(--mobile-safe-area-top);
}

.mobile-safe-bottom {
  padding-bottom: var(--mobile-safe-area-bottom);
}

.mobile-safe-left {
  padding-left: var(--mobile-safe-area-left);
}

.mobile-safe-right {
  padding-right: var(--mobile-safe-area-right);
}

/* ========================================
   iOS 特定样式 - iOS Specific
   ======================================== */

/* iOS 状态栏适配 */
@supports (-webkit-touch-callout: none) {
  /* iOS 设备 */
  .mobile-ios-status-bar {
    padding-top: max(var(--mobile-safe-area-top), 20px);
  }

  /* iOS 底部安全区域 */
  .mobile-ios-bottom-bar {
    padding-bottom: max(var(--mobile-safe-area-bottom), 20px);
  }
}

/* ========================================
   Android 特定样式 - Android Specific
   ======================================== */

/* Android 返回键处理 */
@media (hover: none) and (pointer: coarse) {
  /* 触摸设备 */
  .mobile-touch-device {
    cursor: pointer;
  }
}

/* ========================================
   工具类 - Utility Classes
   ======================================== */

/* 隐藏元素 */
.mobile-hidden {
  display: none !important;
}

.mobile-invisible {
  visibility: hidden;
}

/* 全屏 */
.mobile-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* 文本截断 */
.mobile-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 固定定位 */
.mobile-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.mobile-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* ========================================
   动画 - Animations
   ======================================== */

/* 淡入 */
@keyframes mobile-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mobile-fade-in {
  animation: mobile-fade-in var(--mobile-transition-normal);
}

/* 滑入 */
@keyframes mobile-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mobile-slide-up {
  animation: mobile-slide-up var(--mobile-transition-normal);
}

/* 页面切换 */
@keyframes mobile-page-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mobile-page-in {
  animation: mobile-page-in var(--mobile-transition-normal);
}.mobile-safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.mobile-safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-safe-area-left {
  padding-left: env(safe-area-inset-left);
}

.mobile-safe-area-right {
  padding-right: env(safe-area-inset-right);
}

@supports (padding: max(0px)) {
  .mobile-notch-aware {
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
  }
}

@media screen and (max-width: 374px) {
  .mobile-compact .mobile-home__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mobile-compact .mobile-practice__grid {
    grid-template-columns: 1fr;
  }
  .mobile-compact .mobile-profile__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
  .mobile-landscape .mobile-tab-bar {
    height: 48px;
  }
  .mobile-landscape .mobile-header {
    height: 44px;
  }
}

.mobile-scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* 鸿蒙系统滚动兼容性修复 */
.mobile-layout {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

.mobile-layout__body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.mobile-content {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* 确保内容区域有足够的高度以触发滚动 */
.mobile-content__inner {
  min-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-tab-bar-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  padding-bottom: 40px; /* 底部留白，确保最后的内容可见 */
}

@media screen and (max-width: 768px) {
  .mobile-input,
  .mobile-search input,
  .mobile-filter input {
    font-size: 16px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .mobile-border-hairline {
    border-width: 0.5px;
  }
}

.mobile-card {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  padding: var(--mobile-space-md);
  margin-bottom: var(--mobile-space-md);
  transition: transform var(--mobile-transition-fast),
              box-shadow var(--mobile-transition-fast);
}

.mobile-card:last-child {
  margin-bottom: 0;
}

.mobile-card--clickable:active {
  transform: translateY(-1px);
  box-shadow: var(--mobile-shadow-md);
}

.mobile-card--no-padding {
  padding: 0;
}

.mobile-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mobile-space-sm);
}

.mobile-card__title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
}

.mobile-card__subtitle {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
}

.mobile-card__content {
  color: var(--mobile-text-secondary);
  line-height: var(--mobile-line-height-relaxed);
}

.mobile-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--mobile-space-md);
  padding-top: var(--mobile-space-md);
  border-top: 1px solid var(--mobile-border-light);
}

/* ========================================
   按钮组件 - Button
   ======================================== */

.mobile-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  line-height: 1.5;
  border: none;
  border-radius: var(--mobile-radius-md);
  cursor: pointer;
  transition: transform 0.1s ease,
              box-shadow 0.1s ease,
              opacity var(--mobile-transition-fast),
              background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-button:active {
  transform: scale(0.97);
}

.mobile-button__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

.mobile-button:active .mobile-button__ripple {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: 0s;
}

.mobile-button--primary {
  background: var(--mobile-primary);
  color: var(--mobile-text-inverse);
}

.mobile-button--secondary {
  background: var(--mobile-bg-tertiary);
  color: var(--mobile-text-primary);
}

.mobile-button--ghost {
  background: transparent;
  color: var(--mobile-primary);
  border: 1px solid var(--mobile-primary);
}

.mobile-button--danger {
  background: var(--mobile-error);
  color: var(--mobile-text-inverse);
}

.mobile-button--small {
  padding: var(--mobile-space-xs) var(--mobile-space-sm);
  font-size: var(--mobile-font-sm);
}

.mobile-button--large {
  padding: var(--mobile-space-md) var(--mobile-space-lg);
  font-size: var(--mobile-font-lg);
  width: 100%;
}

.mobile-button--full-width {
  width: 100%;
}

.mobile-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-button__icon {
  margin-right: var(--mobile-space-xs);
}

.mobile-button__icon--right {
  margin-right: 0;
  margin-left: var(--mobile-space-xs);
}

/* ========================================
   列表组件 - List
   ======================================== */

.mobile-list {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  overflow: hidden;
}

.mobile-list-item {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md);
  border-bottom: 1px solid var(--mobile-border-light);
  transition: background-color var(--mobile-transition-fast);
  cursor: pointer;
}

.mobile-list-item:last-child {
  border-bottom: none;
}

.mobile-list-item:active {
  background-color: var(--mobile-bg-tertiary);
}

.mobile-list-item__icon {
  width: 24px;
  height: 24px;
  margin-right: var(--mobile-space-md);
  color: var(--mobile-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-list-item__content {
  flex: 1;
  min-width: 0;
}

.mobile-list-item__title {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-list-item__subtitle {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-list-item__extra {
  margin-left: var(--mobile-space-md);
  color: var(--mobile-text-tertiary);
  font-size: var(--mobile-font-sm);
}

.mobile-list-item__arrow {
  margin-left: var(--mobile-space-sm);
  color: var(--mobile-text-tertiary);
}

/* ========================================
   表单组件 - Form
   ======================================== */

.mobile-form-group {
  margin-bottom: var(--mobile-space-md);
}

.mobile-form-label {
  display: block;
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-form-label--required::after {
  content: '*';
  color: var(--mobile-error);
  margin-left: var(--mobile-space-xs);
}

.mobile-input {
  width: 100%;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-primary);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-md);
  transition: border-color var(--mobile-transition-fast),
              box-shadow var(--mobile-transition-fast);
  -webkit-appearance: none;
}

.mobile-input:focus {
  outline: none;
  border-color: var(--mobile-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.mobile-input::placeholder {
  color: var(--mobile-text-tertiary);
}

.mobile-input:disabled {
  background: var(--mobile-bg-tertiary);
  cursor: not-allowed;
}

.mobile-form-error {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-error);
  margin-top: var(--mobile-space-xs);
}

.mobile-textarea {
  min-height: 100px;
  resize: vertical;
}

/* ========================================
   导航组件 - Navigation
   ======================================== */

/* 顶部导航栏 */
.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mobile-header-height);
  background: var(--mobile-bg-primary);
  border-bottom: 1px solid var(--mobile-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mobile-space-md);
  padding-top: var(--mobile-safe-area-top);
  z-index: 100;
}

.mobile-header__left,
.mobile-header__right {
  display: flex;
  align-items: center;
  min-width: 60px;
}

.mobile-header__right {
  justify-content: flex-end;
}

.mobile-header__title {
  flex: 1;
  text-align: center;
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-header__back {
  display: flex;
  align-items: center;
  color: var(--mobile-primary);
  font-size: var(--mobile-font-md);
  cursor: pointer;
  padding: var(--mobile-space-xs);
  margin-left: calc(-1 * var(--mobile-space-xs));
}

.mobile-header__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.mobile-header__icon-btn {
  background: none;
  border: none;
  color: var(--mobile-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* 底部标签栏 */
.mobile-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--mobile-tab-bar-height) + var(--mobile-safe-area-bottom));
  background: var(--mobile-bg-primary);
  border-top: 1px solid var(--mobile-border-light);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding-bottom: var(--mobile-safe-area-bottom);
  z-index: 100;
}

.mobile-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--mobile-tab-bar-height);
  padding: var(--mobile-space-xs) 0;
  cursor: pointer;
  transition: color var(--mobile-transition-fast);
  color: var(--mobile-text-tertiary);
}

.mobile-tab-item--active {
  color: var(--mobile-primary);
}

.mobile-tab-item__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.mobile-tab-item__label {
  font-size: 10px;
  font-weight: var(--mobile-font-medium);
}

.mobile-tab-item__badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--mobile-error);
  color: var(--mobile-text-inverse);
  font-size: 10px;
  font-weight: var(--mobile-font-bold);
  border-radius: var(--mobile-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   内容区域 - Content
   ======================================== */

.mobile-content {
  flex: 1;
  min-height: 0; /* 必须：允许 flex 子元素高度小于内容高度，使滚动生效 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--mobile-bg-secondary);
}

.mobile-content--with-header {
  padding-top: calc(var(--mobile-header-height) + var(--mobile-safe-area-top));
}

.mobile-content--with-tab-bar {
  padding-bottom: calc(var(--mobile-tab-bar-height) + var(--mobile-safe-area-bottom));
}

.mobile-content__inner {
  padding: var(--mobile-space-md);
}

/* ========================================
   布局容器 - Layout
   ======================================== */

.mobile-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* 动态视口高度 */
  width: 100%;
  overflow: hidden;
}

.mobile-layout__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ========================================
   空状态 - Empty State
   ======================================== */

.mobile-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-xl);
  text-align: center;
}

.mobile-empty-state__icon {
  width: 80px;
  height: 80px;
  margin-bottom: var(--mobile-space-md);
  color: var(--mobile-text-tertiary);
}

.mobile-empty-state__title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-sm);
}

.mobile-empty-state__description {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-secondary);
  margin-bottom: var(--mobile-space-lg);
}

/* ========================================
   加载状态 - Loading
   ======================================== */

.mobile-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-xl);
}

.mobile-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--mobile-border-light);
  border-top-color: var(--mobile-primary);
  border-radius: 50%;
  animation: mobile-spin 0.8s linear infinite;
}

@keyframes mobile-spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-loading__text {
  margin-top: var(--mobile-space-md);
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-edit-profile__avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--mobile-space-xl) 0 var(--mobile-space-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-edit-profile__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--mobile-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobile-text-secondary);
  overflow: hidden;
  position: relative;
}

.mobile-edit-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-edit-profile__avatar-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: var(--mobile-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobile-text-inverse);
  border: 2px solid var(--mobile-bg-primary);
}

.mobile-edit-profile__avatar-label {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-primary);
  margin-top: var(--mobile-space-sm);
}

.mobile-edit-profile__select {
  appearance: none;
  -webkit-appearance: none;
}

.mobile-edit-profile__subjects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mobile-space-sm);
}

.mobile-edit-profile__subject-btn {
  padding: var(--mobile-space-xs) var(--mobile-space-md);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-full);
  background: var(--mobile-bg-primary);
  color: var(--mobile-text-secondary);
  font-size: var(--mobile-font-sm);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-edit-profile__subject-btn--active {
  border-color: var(--mobile-primary);
  background: rgba(79, 70, 229, 0.1);
  color: var(--mobile-primary);
  font-weight: var(--mobile-font-medium);
}

.mobile-edit-profile__readonly-hint {
  display: block;
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: var(--mobile-space-xs);
}.mobile-error-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 32px 24px;
  background: #fff;
  border-radius: 12px;
  margin: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-error-boundary__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fee2e2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

.mobile-error-boundary__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px;
}

.mobile-error-boundary__message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px;
  text-align: center;
  word-break: break-word;
}

.mobile-error-boundary__retry-btn {
  padding: 12px 32px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.mobile-error-boundary__retry-btn:hover {
  background: #2563eb;
}

.mobile-error-boundary__retry-btn:active {
  background: #1d4ed8;
}

.mobile-form-page {
  background: var(--mobile-bg-secondary);
  min-height: 100%;
}

.mobile-form-page__content {
  padding: var(--mobile-space-md);
  padding-bottom: calc(var(--mobile-space-xl) + var(--mobile-safe-area-bottom));
}

/* ========================================
   表单分组
   ======================================== */

.mobile-form-section {
  margin-bottom: var(--mobile-space-lg);
}

.mobile-form-section__title {
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-secondary);
  margin-bottom: var(--mobile-space-sm);
  padding-left: var(--mobile-space-xs);
}

/* ========================================
   表单控件组
   ======================================== */

.mobile-form-group {
  margin-bottom: var(--mobile-space-md);
}

.mobile-form-group:last-child {
  margin-bottom: 0;
}

.mobile-form-label {
  display: block;
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-form-label--required::after {
  content: '*';
  color: var(--mobile-error);
  margin-left: 2px;
}

/* ========================================
   输入框样式
   ======================================== */

.mobile-input {
  width: 100%;
  height: 48px;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-primary);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-lg);
  transition: all var(--mobile-transition-fast);
  -webkit-appearance: none;
}

.mobile-input:focus {
  outline: none;
  border-color: var(--mobile-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.mobile-input::placeholder {
  color: var(--mobile-text-tertiary);
}

.mobile-input:disabled {
  background: var(--mobile-bg-tertiary);
  color: var(--mobile-text-secondary);
  cursor: not-allowed;
}

.mobile-input--error {
  border-color: var(--mobile-error);
}

.mobile-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* 带图标的输入框 */
.mobile-input__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.mobile-input__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  background: var(--mobile-bg-primary);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-lg);
  transition: all var(--mobile-transition-fast);
}

.mobile-input__field:focus-within {
  border-color: var(--mobile-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.mobile-input__field--error {
  border-color: var(--mobile-error);
}

.mobile-input__field--error:focus-within {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.mobile-input__control {
  flex: 1;
  height: 100%;
  padding: 0 var(--mobile-space-md);
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
}

.mobile-input__control::placeholder {
  color: var(--mobile-text-tertiary);
}

.mobile-input__control:disabled {
  color: var(--mobile-text-secondary);
  cursor: not-allowed;
}

.mobile-input__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  color: var(--mobile-text-tertiary);
  flex-shrink: 0;
}

.mobile-input__icon--left {
  padding-left: var(--mobile-space-sm);
}

.mobile-input__icon--right {
  padding-right: var(--mobile-space-sm);
}

.mobile-input__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  color: var(--mobile-text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mobile-transition-fast);
}

.mobile-input__toggle:active {
  color: var(--mobile-primary);
}

/* 错误提示 */
.mobile-form-error {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-error);
  margin-top: var(--mobile-space-xs);
  padding-left: var(--mobile-space-xs);
}

/* 只读提示 */
.mobile-form-hint {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: var(--mobile-space-xs);
  padding-left: var(--mobile-space-xs);
}

/* ========================================
   选择标签组
   ======================================== */

.mobile-select-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mobile-space-sm);
}

.mobile-select-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-secondary);
  background: var(--mobile-bg-primary);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-full);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}

.mobile-select-tag:active {
  transform: scale(0.95);
}

.mobile-select-tag--active {
  color: var(--mobile-primary);
  background: rgba(79, 70, 229, 0.1);
  border-color: var(--mobile-primary);
}

/* ========================================
   科目选择网格
   ======================================== */

.mobile-subjects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mobile-space-sm);
}

@media (max-width: 375px) {
  .mobile-subjects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mobile-subject-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-sm);
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-secondary);
  background: var(--mobile-bg-primary);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-full);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}

.mobile-subject-btn:active {
  transform: scale(0.95);
}

.mobile-subject-btn--active {
  color: var(--mobile-primary);
  background: rgba(79, 70, 229, 0.1);
  border-color: var(--mobile-primary);
}

/* ========================================
   下拉选择器
   ======================================== */

.mobile-select {
  width: 100%;
  height: 48px;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  padding-right: 40px;
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-lg);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.mobile-select:focus {
  outline: none;
  border-color: var(--mobile-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.mobile-select:disabled {
  background-color: var(--mobile-bg-tertiary);
  color: var(--mobile-text-secondary);
  cursor: not-allowed;
}

/* ========================================
   头像上传区域
   ======================================== */

.mobile-avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--mobile-space-lg) 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-avatar-upload__container {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--mobile-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform var(--mobile-transition-fast);
}

.mobile-avatar-upload:active .mobile-avatar-upload__container {
  transform: scale(0.95);
}

.mobile-avatar-upload__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-avatar-upload__placeholder {
  color: var(--mobile-text-tertiary);
}

.mobile-avatar-upload__overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: var(--mobile-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobile-text-inverse);
  border: 2px solid var(--mobile-bg-primary);
  box-shadow: var(--mobile-shadow-sm);
}

.mobile-avatar-upload__label {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-primary);
  margin-top: var(--mobile-space-sm);
  font-weight: var(--mobile-font-medium);
}

/* ========================================
   协议同意区域
   ======================================== */

.mobile-form-agreement {
  display: flex;
  align-items: flex-start;
  gap: var(--mobile-space-sm);
  padding: var(--mobile-space-sm) 0;
}

.mobile-form-agreement__text {
  flex: 1;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  line-height: var(--mobile-line-height-normal);
}

.mobile-form-agreement__link {
  color: var(--mobile-primary);
  text-decoration: none;
  font-weight: var(--mobile-font-medium);
}

.mobile-form-agreement__link:active {
  opacity: 0.7;
}

/* ========================================
   表单底部
   ======================================== */

.mobile-form-footer {
  text-align: center;
  margin-top: var(--mobile-space-lg);
  padding-top: var(--mobile-space-md);
}

.mobile-form-footer__text {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-form-footer__link {
  color: var(--mobile-primary);
  text-decoration: none;
  font-weight: var(--mobile-font-medium);
  margin-left: var(--mobile-space-xs);
}

.mobile-form-footer__link:active {
  opacity: 0.7;
}

/* ========================================
   卡片内表单
   ======================================== */

.mobile-card .mobile-form-group {
  margin-bottom: var(--mobile-space-lg);
}

.mobile-card .mobile-form-group:last-child {
  margin-bottom: 0;
}.mobile-home {
  min-height: 100%;
  padding-bottom: var(--mobile-space-lg);
}

.mobile-home__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: var(--mobile-space-md);
}

.mobile-home__topbar-title {
  font-size: var(--mobile-font-xl);
  font-weight: var(--mobile-font-bold);
  color: var(--mobile-text-primary);
}

.mobile-home__topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
}

.mobile-home__topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--mobile-text-secondary);
  border-radius: var(--mobile-radius-full);
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-home__topbar-btn:active {
  background-color: var(--mobile-bg-tertiary);
}

.mobile-home__stats {
  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
  border-radius: var(--mobile-radius-xl);
  padding: var(--mobile-space-lg);
  margin-bottom: var(--mobile-space-md);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-home__stats:active {
  transform: scale(0.98);
}

.mobile-home__stats-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-space-lg);
  margin-bottom: var(--mobile-space-sm);
}

.mobile-home__stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-home__stats-number {
  font-size: 32px;
  font-weight: var(--mobile-font-bold);
  color: #ffffff;
  line-height: var(--mobile-line-height-tight);
}

.mobile-home__stats-label {
  font-size: var(--mobile-font-sm);
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--mobile-space-xs);
}

.mobile-home__stats-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
}

.mobile-home__stats-streak {
  text-align: center;
  font-size: var(--mobile-font-sm);
  color: rgba(255, 255, 255, 0.9);
  margin-top: var(--mobile-space-sm);
}

.mobile-home__action {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mobile-space-md);
  box-shadow: var(--mobile-shadow-sm);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-home__action:active {
  transform: scale(0.98);
}

.mobile-home__action-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mobile-space-xs);
}

.mobile-home__action-btn {
  width: 200px;
  height: 44px;
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  border-radius: var(--mobile-radius-xl);
  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-home__action-btn:active {
  opacity: 0.85;
}

.mobile-home__action-subtitle {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
}

.mobile-home__section-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
}

.mobile-home__goals {
  margin-bottom: var(--mobile-space-md);
}

.mobile-home__goals-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-md);
}

.mobile-home__goals-scroll {
  display: flex;
  gap: var(--mobile-space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--mobile-space-sm);
  scrollbar-width: none;
}

.mobile-home__goals-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-home__goal-card {
  flex-shrink: 0;
  width: 120px;
  height: 140px;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-space-xs);
  box-shadow: var(--mobile-shadow-sm);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-home__goal-card:active {
  transform: scale(0.96);
}

.mobile-home__goal-card--completed {
  border: 1px solid #52C41A;
}

.mobile-home__goal-card-icon {
  font-size: 28px;
  line-height: 1;
}

.mobile-home__goal-card-subject {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
}

.mobile-home__goal-card-progress {
  width: 100%;
  margin-top: var(--mobile-space-xs);
}

.mobile-home__goal-card-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--mobile-bg-tertiary);
  border-radius: var(--mobile-radius-full);
  overflow: hidden;
}

.mobile-home__goal-card-progress-fill {
  height: 100%;
  background: #1890FF;
  border-radius: var(--mobile-radius-full);
  transition: width var(--mobile-transition-normal);
}

.mobile-home__goal-card--completed .mobile-home__goal-card-progress-fill {
  background: #52C41A;
}

.mobile-home__goal-card-count {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
}

.mobile-home__goal-card-done {
  color: #52C41A;
  font-weight: var(--mobile-font-medium);
}

.mobile-home__recent {
  margin-bottom: var(--mobile-space-md);
}

.mobile-home__recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mobile-space-md);
}

.mobile-home__recent-more {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-home__recent-more:active {
  color: var(--mobile-text-secondary);
}

.mobile-home__recent-empty {
  text-align: center;
  padding: var(--mobile-space-xl);
  color: var(--mobile-text-tertiary);
  font-size: var(--mobile-font-sm);
}

.mobile-home__recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-sm);
}

.mobile-home__recent-item {
  display: flex;
  align-items: center;
  height: 80px;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-md);
  box-shadow: var(--mobile-shadow-sm);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-home__recent-item:active {
  transform: scale(0.98);
}

.mobile-home__recent-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  margin-right: var(--mobile-space-md);
}

.mobile-home__recent-item-content {
  flex: 1;
  min-width: 0;
}

.mobile-home__recent-item-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-home__recent-item-stats {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
}

.mobile-home__recent-item-time {
  flex-shrink: 0;
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-left: var(--mobile-space-sm);
  max-width: 80px;
  text-align: right;
}

.mobile-home__achievements {
  margin-bottom: var(--mobile-space-md);
}

.mobile-home__achievements-scroll {
  display: flex;
  gap: var(--mobile-space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--mobile-space-md);
  padding-bottom: var(--mobile-space-sm);
  scrollbar-width: none;
}

.mobile-home__achievements-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-home__badge {
  flex-shrink: 0;
  width: 72px;
  height: 80px;
  border-radius: var(--mobile-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-space-xs);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-home__badge:active {
  transform: scale(0.95);
}

.mobile-home__badge--unlocked {
  background: #FFFBE6;
}

.mobile-home__badge--locked {
  background: #F5F5F5;
  filter: grayscale(100%);
  opacity: 0.6;
}

.mobile-home__badge-icon {
  font-size: 28px;
  line-height: 1;
}

.mobile-home__badge-name {
  font-size: 11px;
  color: var(--mobile-text-secondary);
  text-align: center;
  line-height: 1.2;
}

.mobile-home__section {
  margin-bottom: var(--mobile-space-md);
}

.mobile-home__chart {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-md);
  box-shadow: var(--mobile-shadow-sm);
}

.mobile-home__distribution {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-md);
  box-shadow: var(--mobile-shadow-sm);
}

.mobile-home__distribution-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  color: var(--mobile-text-tertiary);
  font-size: var(--mobile-font-sm);
}

.mobile-home__distribution-legend-text {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-secondary);
}

/* 图表降级显示（Recharts 在鸿蒙 WebView 中不兼容时的 fallback） */
.mobile-home__chart-fallback {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-xl) var(--mobile-space-lg);
  text-align: center;
  box-shadow: var(--mobile-shadow-sm);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-space-sm);
}

.mobile-home__chart-fallback__title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-secondary);
}

.mobile-home__chart-fallback__desc {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
}.mobile-image-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: mobile-image-picker-fade-in var(--mobile-transition-fast) ease;
}

@keyframes mobile-image-picker-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mobile-image-picker__sheet {
  width: 100%;
  max-height: 80vh;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-xl) var(--mobile-radius-xl) 0 0;
  padding: var(--mobile-space-lg);
  padding-bottom: calc(var(--mobile-space-lg) + var(--mobile-safe-area-bottom) + var(--mobile-tab-bar-height));
  animation: mobile-image-picker-slide-up var(--mobile-transition-normal) ease;
  overflow-y: auto;
}

@keyframes mobile-image-picker-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mobile-image-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mobile-space-lg);
}

.mobile-image-picker__title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
}

.mobile-image-picker__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--mobile-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-image-picker__close:active {
  opacity: 0.6;
}

.mobile-image-picker__options {
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-md);
}

.mobile-image-picker__option {
  height: 80px;
  display: flex;
  align-items: center;
  gap: var(--mobile-space-md);
  padding: 0 var(--mobile-space-lg);
  background: var(--mobile-bg-secondary);
  border: 1px solid var(--mobile-border-light);
  border-radius: var(--mobile-radius-lg);
  cursor: pointer;
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-image-picker__option:active {
  background: var(--mobile-bg-tertiary);
}

.mobile-image-picker__option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-image-picker__option svg {
  color: var(--mobile-primary);
  flex-shrink: 0;
}

.mobile-image-picker__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mobile-space-lg);
}

.mobile-image-picker__preview-image {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: var(--mobile-radius-md);
}

.mobile-image-picker__actions {
  display: flex;
  gap: var(--mobile-space-md);
  width: 100%;
}

.mobile-image-picker__action-btn {
  flex: 1;
  height: 44px;
  border-radius: var(--mobile-radius-lg);
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-image-picker__action-btn:active {
  opacity: 0.8;
}

.mobile-image-picker__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-image-picker__action-btn--primary {
  background: var(--mobile-primary);
  color: var(--mobile-text-inverse);
  border: none;
}

.mobile-image-picker__action-btn--ghost {
  background: none;
  color: var(--mobile-text-secondary);
  border: 1px solid var(--mobile-border-medium);
}

.mobile-image-picker__fallback {
  text-align: center;
  padding: var(--mobile-space-xxl) var(--mobile-space-md);
  color: #8C8C8C;
  font-size: var(--mobile-font-md);
}

.mobile-image-picker__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-space-sm);
  padding: var(--mobile-space-md);
  color: var(--mobile-text-secondary);
  font-size: var(--mobile-font-sm);
}

.mobile-image-picker__loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--mobile-border-light);
  border-top-color: var(--mobile-primary);
  border-radius: 50%;
  animation: mobile-image-picker-spin 0.8s linear infinite;
}

@keyframes mobile-image-picker-spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-image-picker__error {
  text-align: center;
  padding: var(--mobile-space-sm);
  color: #ef4444;
  font-size: var(--mobile-font-sm);
  line-height: var(--mobile-line-height-normal);
}

.mobile-image-picker__error-actions {
  margin-top: var(--mobile-space-md);
  display: flex;
  gap: var(--mobile-space-md);
  justify-content: center;
}

.mobile-image-picker__error-btn {
  padding: var(--mobile-space-sm) var(--mobile-space-lg);
  border-radius: var(--mobile-radius-lg);
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-semibold);
  cursor: pointer;
  border: none;
  transition: opacity var(--mobile-transition-fast);
  min-height: 40px;
}

.mobile-image-picker__error-btn:first-child {
  background: #f3f4f6;
  color: #6b7280;
}

.mobile-image-picker__error-btn:last-child {
  background: #4f46e5;
  color: #ffffff;
}

.mobile-image-picker__error-btn:active {
  opacity: 0.7;
}.mobile-knowledge__header-actions {
  display: flex;
  gap: var(--mobile-space-sm);
  align-items: center;
}

.mobile-knowledge__header-btn {
  background: none;
  border: none;
  color: var(--mobile-text-secondary);
  cursor: pointer;
  padding: var(--mobile-space-xs);
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__search {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--mobile-space-md);
  background: #F5F5F5;
  border-radius: 20px;
  margin-bottom: var(--mobile-space-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__search-icon {
  flex-shrink: 0;
  color: var(--mobile-text-tertiary);
  margin-right: var(--mobile-space-sm);
}

.mobile-knowledge__search-placeholder {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
}

.mobile-knowledge__search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mobile-bg-secondary);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.mobile-knowledge__search-overlay-header {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  padding-top: calc(var(--mobile-space-sm) + var(--mobile-safe-area-top));
  background: var(--mobile-bg-primary);
  border-bottom: 1px solid var(--mobile-border-light);
}

.mobile-knowledge__search-overlay-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--mobile-space-md);
  background: #F5F5F5;
  border-radius: 20px;
}

.mobile-knowledge__search-overlay-icon {
  flex-shrink: 0;
  color: var(--mobile-text-tertiary);
  margin-right: var(--mobile-space-sm);
}

.mobile-knowledge__search-overlay-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  min-width: 0;
}

.mobile-knowledge__search-overlay-input::placeholder {
  color: var(--mobile-text-tertiary);
}

.mobile-knowledge__search-overlay-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: var(--mobile-text-tertiary);
  color: #ffffff;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__search-overlay-cancel {
  border: none;
  background: none;
  color: var(--mobile-text-link);
  font-size: var(--mobile-font-md);
  cursor: pointer;
  padding: var(--mobile-space-xs);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__search-overlay-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mobile-space-md);
}

.mobile-knowledge__search-history {
  margin-bottom: var(--mobile-space-lg);
}

.mobile-knowledge__search-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mobile-space-sm);
}

.mobile-knowledge__search-history-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
}

.mobile-knowledge__search-history-clear {
  border: none;
  background: none;
  color: var(--mobile-text-tertiary);
  font-size: var(--mobile-font-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__search-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mobile-space-sm);
}

.mobile-knowledge__search-history-item {
  padding: var(--mobile-space-xs) var(--mobile-space-md);
  background: var(--mobile-bg-tertiary);
  border-radius: var(--mobile-radius-xl);
  border: none;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__search-hot {
  margin-bottom: var(--mobile-space-lg);
}

.mobile-knowledge__search-hot-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  display: block;
  margin-bottom: var(--mobile-space-sm);
}

.mobile-knowledge__search-hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mobile-space-sm);
}

.mobile-knowledge__search-hot-tag {
  padding: var(--mobile-space-xs) var(--mobile-space-md);
  background: var(--mobile-bg-tertiary);
  border-radius: var(--mobile-radius-xl);
  border: none;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__search-results {
  display: flex;
  flex-direction: column;
}

.mobile-knowledge__search-result-item {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md);
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  margin-bottom: var(--mobile-space-sm);
  box-shadow: var(--mobile-shadow-sm);
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__search-result-item:active {
  background-color: var(--mobile-bg-tertiary);
}

.mobile-knowledge__search-result-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mobile-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: var(--mobile-space-md);
  flex-shrink: 0;
  background: #E6F7FF;
}

.mobile-knowledge__search-result-content {
  flex: 1;
  min-width: 0;
}

.mobile-knowledge__search-result-title {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-knowledge__search-result-meta {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: 2px;
}

.mobile-knowledge__search-result-arrow {
  color: var(--mobile-text-tertiary);
  margin-left: var(--mobile-space-sm);
  font-size: 18px;
}

.mobile-knowledge__entries {
  display: flex;
  gap: var(--mobile-space-md);
  margin-bottom: var(--mobile-space-lg);
}

.mobile-knowledge__entry-card {
  flex: 1;
  height: 120px;
  border-radius: var(--mobile-radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.mobile-knowledge__entry-card:active {
  transform: scale(0.97);
}

.mobile-knowledge__entry-card--notebook {
  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
  color: #ffffff;
}

.mobile-knowledge__entry-card--knowledge {
  background: linear-gradient(135deg, #52C41A 0%, #73D13D 100%);
  color: #ffffff;
}

.mobile-knowledge__entry-card--favorites {
  background: linear-gradient(135deg, #FAAD14 0%, #FFC53D 100%);
  color: #ffffff;
}

.mobile-knowledge__entry-icon {
  font-size: 32px;
  margin-bottom: var(--mobile-space-sm);
}

.mobile-knowledge__entry-label {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
}

.mobile-knowledge__entry-count {
  font-size: var(--mobile-font-xs);
  opacity: 0.8;
  margin-top: 2px;
}

.mobile-knowledge__section {
  margin-bottom: var(--mobile-space-lg);
}

.mobile-knowledge__section-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-md);
}

.mobile-knowledge__recent-list {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  overflow: hidden;
}

.mobile-knowledge__recent-item {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md);
  border-bottom: 1px solid var(--mobile-border-light);
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
}

.mobile-knowledge__recent-item:last-child {
  border-bottom: none;
}

.mobile-knowledge__recent-item:active {
  background-color: var(--mobile-bg-tertiary);
}

.mobile-knowledge__recent-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mobile-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: var(--mobile-space-md);
  flex-shrink: 0;
}

.mobile-knowledge__recent-icon--note {
  background: #E6F7FF;
  color: #1890FF;
}

.mobile-knowledge__recent-icon--knowledge {
  background: #F6FFED;
  color: #52C41A;
}

.mobile-knowledge__recent-icon--favorite {
  background: #FFF7E6;
  color: #FAAD14;
}

.mobile-knowledge__recent-content {
  flex: 1;
  min-width: 0;
}

.mobile-knowledge__recent-title {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-knowledge__recent-meta {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: 2px;
}

.mobile-knowledge__recent-arrow {
  color: var(--mobile-text-tertiary);
  margin-left: var(--mobile-space-sm);
}

.mobile-knowledge__subject {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  overflow: hidden;
}

.mobile-knowledge__subject-item {
  display: flex;
  align-items: center;
  height: 80px;
  padding: var(--mobile-space-md);
  border-bottom: 1px solid var(--mobile-border-light);
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
}

.mobile-knowledge__subject-item:last-child {
  border-bottom: none;
}

.mobile-knowledge__subject-item:active {
  background-color: var(--mobile-bg-tertiary);
}

.mobile-knowledge__subject-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--mobile-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: var(--mobile-space-md);
  flex-shrink: 0;
  background: var(--mobile-bg-tertiary);
}

.mobile-knowledge__subject-info {
  flex: 1;
  min-width: 0;
}

.mobile-knowledge__subject-name {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
}

.mobile-knowledge__subject-stats {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: 2px;
}

.mobile-knowledge__subject-arrow {
  color: var(--mobile-text-tertiary);
  margin-left: var(--mobile-space-sm);
  font-size: 18px;
}

.mobile-knowledge__tip {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
  padding: var(--mobile-space-md);
  background: #E6F7FF;
  border-radius: var(--mobile-radius-lg);
  margin-bottom: var(--mobile-space-md);
  font-size: var(--mobile-font-sm);
  color: #1890FF;
}

.mobile-knowledge__tip-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.mobile-knowledge__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-xxl);
  text-align: center;
}

.mobile-knowledge__empty-icon {
  font-size: 48px;
  margin-bottom: var(--mobile-space-md);
}

.mobile-knowledge__empty-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-knowledge__empty-desc {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-knowledge__note-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mobile-knowledge__note-detail {
  width: 100%;
  max-height: 90vh;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-xl) var(--mobile-radius-xl) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mobile-knowledge-slide-up 0.3s ease;
}

@keyframes mobile-knowledge-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mobile-knowledge__note-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-md);
  border-bottom: 1px solid var(--mobile-border-light);
  flex-shrink: 0;
}

.mobile-knowledge__note-detail-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: var(--mobile-space-sm);
}

.mobile-knowledge__note-detail-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--mobile-bg-tertiary);
  color: var(--mobile-text-secondary);
  border-radius: var(--mobile-radius-full);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__note-detail-close:active {
  background: var(--mobile-border-light);
}

.mobile-knowledge__note-detail-meta {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-md);
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  flex-shrink: 0;
}

.mobile-knowledge__note-detail-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mobile-space-md);
}

.mobile-knowledge__note-detail-body .markdown-preview {
  font-size: var(--mobile-font-sm);
  line-height: var(--mobile-line-height-relaxed);
  color: var(--mobile-text-primary);
}

.mobile-knowledge__note-detail-body .markdown-preview img {
  max-width: 100%;
  border-radius: var(--mobile-radius-md);
  cursor: zoom-in;
}

.mobile-knowledge__note-detail-body .markdown-preview .katex-display {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mobile-space-sm) 0;
}

.mobile-knowledge__note-detail-body .markdown-preview .katex {
  font-size: 1.1em;
}

.mobile-knowledge__image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-knowledge__image-viewer-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-knowledge__image-viewer-close {
  position: absolute;
  top: calc(var(--mobile-safe-area-top) + var(--mobile-space-md));
  right: var(--mobile-space-md);
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--mobile-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.mobile-knowledge__image-viewer-close:active {
  background: rgba(255, 255, 255, 0.3);
}

.mobile-knowledge__image-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: var(--mobile-space-xl);
}.mobile-lazy-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  padding: var(--mobile-space-lg);
}

.mobile-lazy-loader__spinner {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
}

.mobile-lazy-loader__dot {
  width: 8px;
  height: 8px;
  background: var(--mobile-primary);
  border-radius: 50%;
  animation: mobileLazyBounce 1.4s ease-in-out infinite both;
}

.mobile-lazy-loader__dot--1 {
  animation-delay: 0s;
}

.mobile-lazy-loader__dot--2 {
  animation-delay: 0.15s;
}

.mobile-lazy-loader__dot--3 {
  animation-delay: 0.3s;
}

.mobile-lazy-loader__text {
  margin-top: var(--mobile-space-md);
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
  line-height: var(--mobile-line-height-normal);
}

@keyframes mobileLazyBounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
}.mobile-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-lg, 24px);
  gap: var(--mobile-space-md, 16px);
}

.mobile-loading-spinner--fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1000;
}

.mobile-loading-spinner__ring {
  position: relative;
  display: inline-block;
}

.mobile-loading-spinner__ring--small {
  width: 24px;
  height: 24px;
}

.mobile-loading-spinner__ring--medium {
  width: 36px;
  height: 36px;
}

.mobile-loading-spinner__ring--large {
  width: 48px;
  height: 48px;
}

.mobile-loading-spinner__circle {
  width: 100%;
  height: 100%;
  border: 3px solid var(--mobile-border-light, #e2e8f0);
  border-top-color: var(--mobile-primary, #4f46e5);
  border-radius: 50%;
  animation: mobileSpin 0.8s linear infinite;
}

.mobile-loading-spinner__text {
  font-size: var(--mobile-font-sm, 14px);
  color: var(--mobile-text-secondary, #64748b);
  margin: 0;
}@keyframes mobile-offline-slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mobile-offline-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mobile-offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-inverse);
  animation: mobile-offline-slide-down 300ms ease-out;
  padding-top: var(--mobile-safe-area-top);
}

.mobile-offline-indicator--offline {
  background-color: #F5222D;
}

.mobile-offline-indicator--syncing {
  background-color: #1890FF;
}

.mobile-offline-indicator--pending {
  background-color: #FAAD14;
  cursor: pointer;
}

.mobile-offline-indicator--pending:active {
  opacity: 0.8;
}

.mobile-offline-indicator__text {
  line-height: 1;
}

.mobile-offline-indicator__spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: mobile-offline-spinner 600ms linear infinite;
  margin-right: var(--mobile-space-xs);
}

.mobile-offline-indicator__action {
  margin-left: var(--mobile-space-xs);
  text-decoration: underline;
  cursor: pointer;
}.mobile-practice {
  background: #F5F5F5;
  padding-bottom: var(--mobile-space-lg);
}

.mobile-practice__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-md);
  background: var(--mobile-bg-primary);
}

.mobile-practice__header-title {
  font-size: var(--mobile-font-xl);
  font-weight: var(--mobile-font-bold);
  color: var(--mobile-text-primary);
}

.mobile-practice__header-actions {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-md);
}

.mobile-practice__header-icon {
  width: 24px;
  height: 24px;
  color: var(--mobile-text-secondary);
  cursor: pointer;
  transition: color var(--mobile-transition-fast);
}

.mobile-practice__header-icon:active {
  color: var(--mobile-primary);
}

.mobile-practice__continue {
  margin: var(--mobile-space-md);
  padding: var(--mobile-space-lg);
  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
  border-radius: var(--mobile-radius-lg);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.mobile-practice__continue-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-practice__continue-subtitle {
  font-size: var(--mobile-font-sm);
  opacity: 0.85;
  margin-bottom: var(--mobile-space-md);
}

.mobile-practice__continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-sm) var(--mobile-space-lg);
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border: none;
  border-radius: var(--mobile-radius-full);
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  transition: background var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-practice__continue-btn:active {
  background: rgba(255, 255, 255, 0.4);
}

.mobile-practice__continue-progress {
  margin-top: var(--mobile-space-md);
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.mobile-practice__continue-progress-bar {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition: width var(--mobile-transition-normal);
}

.mobile-practice__quick-entries {
  display: flex;
  gap: var(--mobile-space-md);
  padding: 0 var(--mobile-space-md);
  margin-bottom: var(--mobile-space-lg);
}

.mobile-practice__entry-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast),
              box-shadow var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-practice__entry-card:active {
  transform: translateY(-1px);
  box-shadow: var(--mobile-shadow-md);
}

.mobile-practice__entry-icon {
  font-size: 28px;
  margin-bottom: var(--mobile-space-sm);
}

.mobile-practice__entry-label {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-primary);
  font-weight: var(--mobile-font-medium);
}

.mobile-practice__section {
  padding: 0 var(--mobile-space-md);
  margin-bottom: var(--mobile-space-lg);
}

.mobile-practice__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mobile-space-md);
}

.mobile-practice__section-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
}

.mobile-practice__section-more {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
  cursor: pointer;
}

.mobile-practice__set-list {
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-sm);
}

.mobile-practice__set-item {
  display: flex;
  align-items: center;
  height: 100px;
  padding: var(--mobile-space-md);
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast),
              box-shadow var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-practice__set-item:active {
  transform: translateY(-1px);
  box-shadow: var(--mobile-shadow-md);
}

.mobile-practice__set-item--desktop-only {
  opacity: 0.8;
  background: #FAFAFA;
}

.mobile-practice__set-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mobile-radius-md);
  background: #E6F7FF;
  margin-right: var(--mobile-space-md);
  flex-shrink: 0;
}

.mobile-practice__set-item-icon svg {
  width: 24px;
  height: 24px;
  color: #1890FF;
}

.mobile-practice__set-item-content {
  flex: 1;
  min-width: 0;
}

.mobile-practice__set-item-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--mobile-space-xs);
}

.mobile-practice__set-item-stats {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-secondary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-practice__set-item-progress {
  height: 4px;
  background: #E8E8E8;
  border-radius: 2px;
  overflow: hidden;
}

.mobile-practice__set-item-progress-bar {
  height: 100%;
  background: #1890FF;
  border-radius: 2px;
  transition: width var(--mobile-transition-normal);
}

.mobile-practice__set-item-tag {
  flex-shrink: 0;
  margin-left: var(--mobile-space-sm);
  font-size: var(--mobile-font-xs);
  padding: 2px 8px;
  border-radius: var(--mobile-radius-sm);
  background: #E6F7FF;
  color: #1890FF;
}

.mobile-practice__set-item-tag--desktop {
  background: #FFF7E6;
  color: #FA8C16;
}

.mobile-practice__recommend {
  margin: 0 var(--mobile-space-md);
  padding: var(--mobile-space-lg);
  background: linear-gradient(135deg, #722ED1 0%, #9254DE 100%);
  border-radius: var(--mobile-radius-lg);
  color: #ffffff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-practice__recommend:active {
  opacity: 0.9;
}

.mobile-practice__recommend-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-practice__recommend-desc {
  font-size: var(--mobile-font-sm);
  opacity: 0.85;
}

.mobile-practice__filter {
  margin: 0 var(--mobile-space-md) var(--mobile-space-md);
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  overflow: hidden;
}

.mobile-practice__filter-header {
  padding: var(--mobile-space-sm) var(--mobile-space-md);
}

.mobile-practice__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mobile-space-xs);
  padding: var(--mobile-space-xs) var(--mobile-space-md);
  border: 1px solid var(--mobile-border-light);
  border-radius: var(--mobile-radius-full);
  background: var(--mobile-bg-primary);
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-practice__filter-toggle--active {
  border-color: #1890FF;
  color: #1890FF;
}

.mobile-practice__filter-toggle:active {
  opacity: 0.7;
}

.mobile-practice__filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--mobile-radius-full);
  background: #1890FF;
  color: #ffffff;
  font-size: 10px;
  font-weight: var(--mobile-font-bold);
}

.mobile-practice__filter-body {
  padding: 0 var(--mobile-space-md) var(--mobile-space-md);
}

.mobile-practice__filter-group {
  margin-bottom: var(--mobile-space-md);
}

.mobile-practice__filter-group:last-child {
  margin-bottom: 0;
}

.mobile-practice__filter-group-label {
  display: block;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-practice__filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mobile-space-xs);
}

.mobile-practice__filter-tag {
  padding: 6px 12px;
  border-radius: var(--mobile-radius-full);
  border: none;
  font-size: var(--mobile-font-xs);
  cursor: pointer;
  background: #F5F5F5;
  color: #595959;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-practice__filter-tag:active {
  transform: scale(0.96);
}

.mobile-practice__filter-tag--active {
  background: #1890FF;
  color: #ffffff;
}

.mobile-study__question-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--mobile-space-sm);
  padding: var(--mobile-space-lg);
}

.mobile-study__question-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mobile-radius-md);
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  background: #F5F5F5;
  color: var(--mobile-text-primary);
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-study__question-cell:active {
  transform: scale(0.95);
}

.mobile-study__question-cell--current {
  background: #1890FF;
  color: #ffffff;
}

.mobile-study__question-cell--correct {
  background: #52C41A;
  color: #ffffff;
}

.mobile-study__question-cell--wrong {
  background: #F5222D;
  color: #ffffff;
}

.mobile-study__popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mobile-study__popup {
  width: 100%;
  max-height: 70vh;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-xl) var(--mobile-radius-xl) 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--mobile-safe-area-bottom);
}

.mobile-study__popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-md) var(--mobile-space-lg);
  border-bottom: 1px solid var(--mobile-border-light);
  position: sticky;
  top: 0;
  background: var(--mobile-bg-primary);
  z-index: 1;
}

.mobile-study__popup-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
}

.mobile-study__popup-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--mobile-text-tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-study__option--checkbox .mobile-study__option-key {
  border-radius: var(--mobile-radius-sm);
}

.mobile-study__true-false {
  display: flex;
  gap: var(--mobile-space-md);
  margin-bottom: var(--mobile-space-md);
}

.mobile-study__true-false-btn {
  flex: 1;
  height: 64px;
  border: 2px solid #E8E8E8;
  border-radius: var(--mobile-radius-lg);
  background: var(--mobile-bg-primary);
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-study__true-false-btn:active {
  transform: scale(0.98);
}

.mobile-study__true-false-btn--selected {
  border-color: #1890FF;
  background: #E6F7FF;
  color: #1890FF;
}

.mobile-study__true-false-btn--correct {
  border-color: #52C41A;
  background: #F6FFED;
  color: #52C41A;
}

.mobile-study__true-false-btn--wrong {
  border-color: #F5222D;
  background: #FFF1F0;
  color: #F5222D;
}

.mobile-study__submit-btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--mobile-radius-md);
  background: #1890FF;
  color: #ffffff;
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  margin-bottom: var(--mobile-space-md);
}

.mobile-study__submit-btn:active {
  opacity: 0.8;
}

.mobile-study__submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-study__type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--mobile-radius-sm);
  background: #E6F7FF;
  color: #1890FF;
  font-size: var(--mobile-font-xs);
  font-weight: var(--mobile-font-medium);
}

.mobile-study {
  background: #F5F5F5;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.mobile-study__offline-hint {
  background-color: #FFF7E6;
  color: #D48806;
  font-size: var(--mobile-font-xs);
  padding: var(--mobile-space-xs) var(--mobile-space-md);
  text-align: center;
  border-bottom: 1px solid #FFE58F;
}

.mobile-study__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  background: var(--mobile-bg-primary);
  border-bottom: 1px solid var(--mobile-border-light);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-study__header-left {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
  min-width: 0;
}

.mobile-study__header-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mobile-text-primary);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-study__header-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-study__header-progress {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  flex-shrink: 0;
  margin: 0 var(--mobile-space-sm);
}

.mobile-study__header-actions {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
  flex-shrink: 0;
}

.mobile-study__header-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mobile-text-secondary);
  -webkit-tap-highlight-color: transparent;
}

.mobile-study__header-action--active {
  color: #FAAD14;
}

.mobile-study__content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mobile-space-md);
  padding-bottom: 80px;
}

.mobile-study__meta {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-md);
  margin-bottom: var(--mobile-space-md);
}

.mobile-study__meta-item {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-study__question {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-lg);
  margin-bottom: var(--mobile-space-md);
  box-shadow: var(--mobile-shadow-sm);
}

.mobile-study__question-content {
  font-size: var(--mobile-font-md);
  line-height: var(--mobile-line-height-relaxed);
  color: var(--mobile-text-primary);
}

.mobile-study__options {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-study__option {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--mobile-bg-primary);
  border: 1.5px solid #E8E8E8;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-study__option:active {
  transform: scale(0.98);
}

.mobile-study__option--selected {
  background: #E6F7FF;
  border-color: #1890FF;
}

.mobile-study__option--correct {
  background: #F6FFED;
  border-color: #52C41A;
}

.mobile-study__option--wrong {
  background: #FFF1F0;
  border-color: #F5222D;
}

.mobile-study__option-key {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F5F5F5;
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin-right: var(--mobile-space-md);
  flex-shrink: 0;
}

.mobile-study__option--selected .mobile-study__option-key {
  background: #1890FF;
  color: #ffffff;
}

.mobile-study__option--correct .mobile-study__option-key {
  background: #52C41A;
  color: #ffffff;
}

.mobile-study__option--wrong .mobile-study__option-key {
  background: #F5222D;
  color: #ffffff;
}

.mobile-study__option-content {
  flex: 1;
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  line-height: var(--mobile-line-height-normal);
}

.mobile-study__option-icon {
  width: 20px;
  height: 20px;
  margin-left: var(--mobile-space-sm);
  flex-shrink: 0;
}

.mobile-study__analysis {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-lg);
  margin-bottom: var(--mobile-space-md);
  box-shadow: var(--mobile-shadow-sm);
}

.mobile-study__analysis-header {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-sm);
}

.mobile-study__analysis-answer {
  font-size: var(--mobile-font-sm);
  color: #52C41A;
  margin-bottom: var(--mobile-space-sm);
}

.mobile-study__analysis-explanation {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  line-height: var(--mobile-line-height-relaxed);
}

.mobile-study__nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--mobile-bg-primary);
  border-top: 1px solid var(--mobile-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mobile-space-lg);
  padding-bottom: var(--mobile-safe-area-bottom);
  z-index: 10;
}

.mobile-study__nav-prev {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-secondary);
  cursor: pointer;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  -webkit-tap-highlight-color: transparent;
}

.mobile-study__nav-prev:active {
  color: var(--mobile-text-primary);
}

.mobile-study__nav-prev:disabled {
  color: var(--mobile-text-tertiary);
  cursor: not-allowed;
}

.mobile-study__nav-indicator {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
}

.mobile-study__nav-next {
  padding: var(--mobile-space-sm) var(--mobile-space-lg);
  background: #1890FF;
  color: #ffffff;
  border: none;
  border-radius: var(--mobile-radius-full);
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-study__nav-next:active {
  opacity: 0.8;
}

.mobile-study__nav-next--complete {
  background: #52C41A;
}

.mobile-study__nav-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-about__logo-card {
  text-align: center;
  padding: var(--mobile-space-xl) var(--mobile-space-lg);
}

.mobile-about__logo {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--mobile-space-md);
  background: linear-gradient(135deg, var(--mobile-primary) 0%, #6366f1 100%);
  border-radius: var(--mobile-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobile-text-inverse);
}

.mobile-about__app-name {
  font-size: var(--mobile-font-xl);
  font-weight: var(--mobile-font-bold);
  color: var(--mobile-text-primary);
  margin: 0 0 var(--mobile-space-xs);
}

.mobile-about__version {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin: 0;
}

.mobile-about__section-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin: 0 0 var(--mobile-space-md);
}

.mobile-about__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mobile-space-md);
}

.mobile-about__feature-item {
  text-align: center;
}

.mobile-about__feature-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-about__feature-desc {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-about__link-card {
  margin-bottom: var(--mobile-space-md);
}

.mobile-about__link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-sm) 0;
  color: var(--mobile-text-primary);
}

.mobile-about__link-label {
  font-size: var(--mobile-font-md);
}

.mobile-about__footer {
  text-align: center;
  padding: var(--mobile-space-lg) 0;
}

.mobile-about__footer p {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin: 0;
}

.mobile-cache__section-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-secondary);
  margin: 0 0 var(--mobile-space-md);
}

.mobile-cache__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mobile-space-md);
  margin-bottom: var(--mobile-space-md);
}

.mobile-cache__stat-item {
  text-align: center;
  padding: var(--mobile-space-md);
  background: var(--mobile-bg-tertiary);
  border-radius: var(--mobile-radius-md);
}

.mobile-cache__stat-value {
  font-size: var(--mobile-font-xl);
  font-weight: var(--mobile-font-bold);
  color: var(--mobile-primary);
}

.mobile-cache__stat-label {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
}

.mobile-cache__space {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  padding-top: var(--mobile-space-md);
  border-top: 1px solid var(--mobile-border-light);
}

.mobile-favorites__card {
  margin-bottom: var(--mobile-space-md);
  position: relative;
}

.mobile-favorites__card-icon {
  position: absolute;
  top: var(--mobile-space-md);
  right: var(--mobile-space-md);
  color: var(--mobile-primary);
}

.mobile-favorites__card-preview {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-primary);
  line-height: var(--mobile-line-height-relaxed);
  margin: 0 0 var(--mobile-space-sm);
  padding-right: var(--mobile-space-xl);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mobile-favorites__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--mobile-space-sm);
  border-top: 1px solid var(--mobile-border-light);
}

.mobile-favorites__card-type {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-secondary);
}

.mobile-favorites__card-date {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
}

.mobile-feedback__label {
  display: block;
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-sm);
}

.mobile-feedback__type-selector {
  display: flex;
  gap: var(--mobile-space-sm);
}

.mobile-feedback__type-btn {
  flex: 1;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-md);
  background: var(--mobile-bg-primary);
  color: var(--mobile-text-secondary);
  font-size: var(--mobile-font-sm);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-feedback__type-btn--active {
  border-color: var(--mobile-primary);
  background: rgba(79, 70, 229, 0.1);
  color: var(--mobile-primary);
  font-weight: var(--mobile-font-medium);
}

.mobile-feedback__char-count {
  text-align: right;
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: var(--mobile-space-xs);
}

.mobile-help__search {
  position: relative;
  margin-bottom: var(--mobile-space-md);
}

.mobile-help__search-icon {
  position: absolute;
  right: var(--mobile-space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--mobile-text-tertiary);
  pointer-events: none;
}

.mobile-help__section-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin: 0 0 var(--mobile-space-md);
}

.mobile-help__faq-item {
  padding: var(--mobile-space-md) 0;
  border-bottom: 1px solid var(--mobile-border-light);
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.mobile-help__faq-item:last-child {
  border-bottom: none;
}

.mobile-help__faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  font-weight: var(--mobile-font-medium);
}

.mobile-help__faq-answer {
  margin-top: var(--mobile-space-sm);
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  line-height: var(--mobile-line-height-relaxed);
  animation: mobile-help-fade-in 0.2s ease;
}

@keyframes mobile-help-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-notes__card {
  margin-bottom: var(--mobile-space-md);
}

.mobile-notes__card-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin: 0 0 var(--mobile-space-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-notes__card-preview {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  line-height: var(--mobile-line-height-relaxed);
  margin: 0 0 var(--mobile-space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mobile-notes__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--mobile-space-sm);
  border-top: 1px solid var(--mobile-border-light);
}

.mobile-notes__card-date {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
}

.mobile-notifications__section-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-secondary);
  margin: 0 0 var(--mobile-space-md);
}

.mobile-notifications__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-md) 0;
  border-bottom: 1px solid var(--mobile-border-light);
}

.mobile-notifications__row:last-child {
  border-bottom: none;
}

.mobile-notifications__label {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
}

.mobile-notifications__row--time {
  flex-wrap: wrap;
  gap: var(--mobile-space-sm);
}

.mobile-notifications__time-input {
  padding: var(--mobile-space-xs) var(--mobile-space-sm);
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-tertiary);
  border: 1px solid var(--mobile-border-light);
  border-radius: var(--mobile-radius-md);
  -webkit-appearance: none;
}

/* Toggle switch styling */
.mobile-toggle {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
}

.mobile-toggle__switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--mobile-border-medium);
  border-radius: var(--mobile-radius-full);
  border: none;
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-toggle__switch--active {
  background: var(--mobile-primary);
}

.mobile-toggle__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform var(--mobile-transition-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mobile-toggle__switch--active::after {
  transform: translateX(20px);
}

.mobile-report__filter-bar {
  display: flex;
  gap: var(--mobile-space-sm);
  margin-bottom: var(--mobile-space-md);
  padding: var(--mobile-space-xs);
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
}

.mobile-report__filter-btn {
  flex: 1;
  padding: var(--mobile-space-sm);
  border: none;
  border-radius: var(--mobile-radius-md);
  background: transparent;
  color: var(--mobile-text-secondary);
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-report__filter-btn--active {
  background: var(--mobile-primary);
  color: var(--mobile-text-inverse);
}

.mobile-report__stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mobile-space-sm);
  margin-bottom: var(--mobile-space-md);
}

.mobile-report__stat-card {
  text-align: center;
  padding: var(--mobile-space-md) var(--mobile-space-sm);
}

.mobile-report__stat-value {
  font-size: var(--mobile-font-xxl);
  font-weight: var(--mobile-font-bold);
  color: var(--mobile-primary);
}

.mobile-report__stat-label {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
}

.mobile-report__section-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-secondary);
  margin: 0 0 var(--mobile-space-md);
}

.mobile-report__subject-bars {
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-md);
}

.mobile-report__subject-bar {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
}

.mobile-report__subject-name {
  width: 50px;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-primary);
  flex-shrink: 0;
}

.mobile-report__subject-bar-track {
  flex: 1;
  height: 12px;
  background: var(--mobile-bg-tertiary);
  border-radius: var(--mobile-radius-full);
  overflow: hidden;
}

.mobile-report__subject-bar-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  background-color: var(--bar-color, var(--mobile-primary));
  border-radius: var(--mobile-radius-full);
  transition: width 0.4s ease;
}

.mobile-report__subject-percent {
  width: 40px;
  text-align: right;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  flex-shrink: 0;
}

.mobile-report__weak-points {
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-md);
}

.mobile-report__weak-point {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-sm);
}

.mobile-report__weak-point-name {
  width: 80px;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-primary);
  flex-shrink: 0;
}

.mobile-report__weak-point-bar-track {
  flex: 1;
  height: 8px;
  background: var(--mobile-bg-tertiary);
  border-radius: var(--mobile-radius-full);
  overflow: hidden;
}

.mobile-report__weak-point-bar-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  background: var(--mobile-error);
  border-radius: var(--mobile-radius-full);
  transition: width 0.4s ease;
}

.mobile-report__weak-point-error-rate {
  width: 40px;
  text-align: right;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-error);
  font-weight: var(--mobile-font-medium);
  flex-shrink: 0;
}

.mobile-security__section-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-secondary);
  margin: 0 0 var(--mobile-space-md);
}

.mobile-security__info-item {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md) 0;
  border-bottom: 1px solid var(--mobile-border-light);
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-security__info-item:last-child {
  border-bottom: none;
}

.mobile-security__info-item:active {
  opacity: 0.7;
}

.mobile-security__info-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mobile-radius-md);
  background: var(--mobile-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobile-primary);
  margin-right: var(--mobile-space-md);
  flex-shrink: 0;
}

.mobile-security__info-icon--danger {
  color: var(--mobile-error);
}

.mobile-security__info-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mobile-security__info-label {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
}

.mobile-security__info-label--danger {
  color: var(--mobile-error);
}

.mobile-security__info-value {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
}

.mobile-security__info-description {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: var(--mobile-space-xs);
}

.mobile-security__arrow {
  color: var(--mobile-text-tertiary);
  margin-left: var(--mobile-space-sm);
  flex-shrink: 0;
}

.mobile-security__danger-card {
  margin-top: var(--mobile-space-lg);
}

.mobile-sets__card {
  margin-bottom: var(--mobile-space-md);
}

.mobile-sets__card-content {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-md);
}

.mobile-sets__card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--mobile-radius-md);
  background: rgba(79, 70, 229, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobile-primary);
  flex-shrink: 0;
}

.mobile-sets__card-info {
  flex: 1;
  min-width: 0;
}

.mobile-sets__card-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin: 0 0 var(--mobile-space-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-sets__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-sets__status {
  padding: var(--mobile-space-xs) var(--mobile-space-sm);
  border-radius: var(--mobile-radius-full);
  font-size: var(--mobile-font-xs);
}

.mobile-sets__status--active {
  background: rgba(79, 70, 229, 0.1);
  color: var(--mobile-primary);
}

.mobile-sets__status--completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}.mobile-profile__user {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-xl);
  box-shadow: var(--mobile-shadow-sm);
  padding: var(--mobile-space-lg);
  margin-bottom: var(--mobile-space-md);
  display: flex;
  align-items: center;
  gap: var(--mobile-space-md);
}

.mobile-profile__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: var(--mobile-font-xxl);
  font-weight: var(--mobile-font-bold);
  flex-shrink: 0;
  overflow: hidden;
}

.mobile-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-profile__avatar--clickable {
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.mobile-profile__avatar--clickable:active {
  opacity: 0.8;
}

.mobile-profile__avatar--clickable::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--mobile-primary);
  border-radius: 50%;
  border: 2px solid var(--mobile-bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

.mobile-profile__avatar-loading {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: mobile-profile-avatar-spin 0.8s linear infinite;
}

@keyframes mobile-profile-avatar-spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-profile__user-info {
  flex: 1;
  min-width: 0;
}

.mobile-profile__name {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-profile__detail {
  font-size: var(--mobile-font-sm);
  color: #8C8C8C;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-profile__edit-btn {
  padding: var(--mobile-space-xs) var(--mobile-space-md);
  border-radius: var(--mobile-radius-full);
  background: var(--mobile-bg-tertiary);
  color: var(--mobile-text-primary);
  font-size: var(--mobile-font-sm);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-profile__edit-btn:active {
  opacity: 0.8;
}

.mobile-profile__stats {
  display: flex;
  gap: var(--mobile-space-md);
  margin-bottom: var(--mobile-space-md);
}

.mobile-profile__stats-item {
  flex: 1;
  height: 100px;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-profile__stats-value {
  font-size: var(--mobile-font-xxl);
  font-weight: var(--mobile-font-bold);
  color: var(--mobile-text-primary);
}

.mobile-profile__stats-label {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
}

.mobile-profile__menu {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  box-shadow: var(--mobile-shadow-sm);
  overflow: hidden;
  margin-bottom: var(--mobile-space-md);
}

.mobile-profile__menu-title {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
  padding: var(--mobile-space-md) var(--mobile-space-md) var(--mobile-space-xs);
  font-weight: var(--mobile-font-medium);
}

.mobile-profile__menu-item {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md);
  border-bottom: 1px solid var(--mobile-border-light);
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-profile__menu-item:last-child {
  border-bottom: none;
}

.mobile-profile__menu-item:active {
  background-color: var(--mobile-bg-tertiary);
}

.mobile-profile__menu-item-icon {
  font-size: 18px;
  margin-right: var(--mobile-space-md);
  width: 24px;
  text-align: center;
}

.mobile-profile__menu-item-label {
  flex: 1;
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
}

.mobile-profile__menu-item-extra {
  margin-left: var(--mobile-space-sm);
}

.mobile-profile__menu-item-arrow {
  color: var(--mobile-text-tertiary);
  margin-left: var(--mobile-space-xs);
  font-size: 16px;
}

.mobile-profile__menu-item-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--mobile-border-medium);
  border-radius: var(--mobile-radius-full);
  border: none;
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-profile__menu-item-switch--active {
  background: #1890FF;
}

.mobile-profile__menu-item-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform var(--mobile-transition-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mobile-profile__menu-item-switch--active::after {
  transform: translateX(20px);
}

.mobile-profile__logout {
  width: 100%;
  padding: var(--mobile-space-md);
  border-radius: var(--mobile-radius-lg);
  background: var(--mobile-bg-primary);
  color: var(--mobile-error);
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  border: none;
  cursor: pointer;
  box-shadow: var(--mobile-shadow-sm);
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  margin-bottom: var(--mobile-space-md);
}

.mobile-profile__logout:active {
  opacity: 0.8;
}

.mobile-profile__footer {
  text-align: center;
  padding: var(--mobile-space-md) 0 var(--mobile-space-lg);
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
}.mobile-pull-to-refresh {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-pull-to-refresh__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-space-sm, 8px);
  overflow: hidden;
  transition: height 0.2s ease;
  color: var(--mobile-text-secondary, #64748b);
}

.mobile-pull-to-refresh__icon {
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.mobile-pull-to-refresh__icon--spinning {
  animation: mobileSpin 0.8s linear infinite;
}

.mobile-pull-to-refresh__text {
  font-size: var(--mobile-font-sm, 13px);
  white-space: nowrap;
}

.mobile-pull-to-refresh__content {
  min-height: 100%;
}.mobile-reminder {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.mobile-reminder__sheet {
  width: 100%;
  max-height: 85dvh;
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-xl) var(--mobile-radius-xl) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mobile-reminder-slide-up 0.3s ease;
}

@keyframes mobile-reminder-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mobile-reminder__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-md) var(--mobile-space-lg);
  border-bottom: 1px solid var(--mobile-border-light);
  flex-shrink: 0;
}

.mobile-reminder__header h3 {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
  margin: 0;
}

.mobile-reminder__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--mobile-bg-tertiary);
  color: var(--mobile-text-secondary);
  font-size: var(--mobile-font-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-reminder__close:active {
  background: var(--mobile-border-light);
}

.mobile-reminder__content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mobile-space-md) var(--mobile-space-lg);
  padding-bottom: calc(var(--mobile-space-lg) + var(--mobile-safe-area-bottom));
}

.mobile-reminder__section {
  margin-bottom: var(--mobile-space-lg);
}

.mobile-reminder__section-title {
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-tertiary);
  margin-bottom: var(--mobile-space-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-reminder__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-md) 0;
  border-bottom: 1px solid var(--mobile-border-light);
}

.mobile-reminder__row:last-child {
  border-bottom: none;
}

.mobile-reminder__label {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  flex: 1;
}

.mobile-reminder__toggle {
  position: relative;
  width: 48px;
  height: 28px;
  background: #BFBFBF;
  border-radius: var(--mobile-radius-full);
  border: none;
  cursor: pointer;
  transition: background-color var(--mobile-transition-fast);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-reminder__toggle--active {
  background: #1890FF;
}

.mobile-reminder__toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform var(--mobile-transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.mobile-reminder__toggle--active::after {
  transform: translateX(20px);
}

.mobile-reminder__time-input {
  width: 100px;
  padding: var(--mobile-space-xs) var(--mobile-space-sm);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-md);
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-primary);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.mobile-reminder__time-input:focus {
  outline: none;
  border-color: #1890FF;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.mobile-reminder__form {
  background: var(--mobile-bg-secondary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-md);
  margin-top: var(--mobile-space-sm);
}

.mobile-reminder__form-row {
  display: flex;
  gap: var(--mobile-space-sm);
  margin-bottom: var(--mobile-space-sm);
}

.mobile-reminder__form-row:last-child {
  margin-bottom: 0;
}

.mobile-reminder__form-input {
  flex: 1;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-md);
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-primary);
  -webkit-tap-highlight-color: transparent;
}

.mobile-reminder__form-input:focus {
  outline: none;
  border-color: #1890FF;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.mobile-reminder__form-select {
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  border: 1px solid var(--mobile-border-medium);
  border-radius: var(--mobile-radius-md);
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  background: var(--mobile-bg-primary);
  min-width: 90px;
  -webkit-tap-highlight-color: transparent;
}

.mobile-reminder__form-select:focus {
  outline: none;
  border-color: #1890FF;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.mobile-reminder__form-button {
  width: 100%;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  border: none;
  border-radius: var(--mobile-radius-md);
  background: #1890FF;
  color: #ffffff;
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  cursor: pointer;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-reminder__form-button:active {
  opacity: 0.8;
}

.mobile-reminder__list {
  margin-top: var(--mobile-space-sm);
}

.mobile-reminder__list-item {
  display: flex;
  align-items: center;
  padding: var(--mobile-space-md);
  background: var(--mobile-bg-secondary);
  border-radius: var(--mobile-radius-md);
  margin-bottom: var(--mobile-space-sm);
}

.mobile-reminder__list-item:last-child {
  margin-bottom: 0;
}

.mobile-reminder__list-item-info {
  flex: 1;
  min-width: 0;
}

.mobile-reminder__list-item-title {
  font-size: var(--mobile-font-md);
  color: var(--mobile-text-primary);
  font-weight: var(--mobile-font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-reminder__list-item-meta {
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
  margin-top: 2px;
}

.mobile-reminder__list-item-delete {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--mobile-error);
  font-size: var(--mobile-font-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: var(--mobile-space-sm);
  transition: background-color var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-reminder__list-item-delete:active {
  background: rgba(239, 68, 68, 0.1);
}

.mobile-reminder__empty {
  text-align: center;
  padding: var(--mobile-space-xl);
  color: var(--mobile-text-tertiary);
  font-size: var(--mobile-font-sm);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* 恢复亮色主题变量 */
    --mobile-bg-primary: #ffffff !important;
    --mobile-bg-secondary: #f8fafc !important;
    --mobile-bg-tertiary: #f1f5f9 !important;
    
    --mobile-text-primary: #1e293b !important;
    --mobile-text-secondary: #64748b !important;
    --mobile-text-tertiary: #94a3b8 !important;
    
    --mobile-border-light: #e2e8f0 !important;
    --mobile-border-medium: #cbd5e1 !important;
    --mobile-border-dark: #94a3b8 !important;
    
    --mobile-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    --mobile-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    --mobile-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  }
}

/* 或者完全禁用暗色模式 */
/* 
@media (prefers-color-scheme: dark) {
  html, body, * {
    filter: invert(0) hue-rotate(0deg) !important;
  }
}
*/

.mobile-toast {
  position: fixed;
  top: calc(var(--mobile-safe-area-top) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 10000;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: var(--mobile-radius-lg);
  font-size: var(--mobile-font-sm);
  font-weight: var(--mobile-font-medium);
  line-height: var(--mobile-line-height-normal);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mobile-toast--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 成功样式 */
.mobile-toast--success {
  background: rgba(16, 185, 129, 0.95);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* 错误样式 */
.mobile-toast--error {
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.mobile-toast__message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 图标样式 */
.mobile-toast--success .mobile-toast__message::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.mobile-toast--error .mobile-toast__message::before {
  content: '✕';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}.mobile-page-transition {
  /* 参与 flex 布局链，使 .mobile-content 能正确滚动 */
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 必须：约束子元素高度，使 .mobile-content 的 overflow-y: auto 生效 */
  
  /* 动画属性 */
  transition-property: opacity, transform;
  transition-duration: var(--transition-duration, 300ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 简化动画，避免 transform 干扰滚动 */
.mobile-page-transition--fade {
  opacity: 0;
}

.mobile-page-transition--fade.mobile-page-transition--visible {
  opacity: 1;
  transform: none !important;
}

.mobile-page-transition--slide {
  opacity: 0;
  transform: translateX(0) !important;
}

.mobile-page-transition--slide.mobile-page-transition--visible {
  opacity: 1;
}

.mobile-page-transition--scale {
  opacity: 0;
  transform: none !important;
}

.mobile-page-transition--scale.mobile-page-transition--visible {
  opacity: 1;
}

.mobile-gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-page-transition,
  .mobile-animate-fade-in,
  .mobile-animate-slide-up,
  .mobile-animate-slide-right,
  .mobile-animate-scale-in,
  .mobile-animate-pulse,
  .mobile-animate-shake,
  .mobile-animate-bounce,
  .mobile-animate-spin {
    animation: none !important;
    transition: none !important;
  }
}

:root {
  /* ========================================
     颜色系统 - Color System
     ======================================== */

  /* 主色调 */
  --mobile-primary: #4f46e5;
  --mobile-primary-light: #6366f1;
  --mobile-primary-dark: #4338ca;
  --mobile-primary-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);

  /* 辅助色 */
  --mobile-secondary: #64748b;
  --mobile-success: #10b981;
  --mobile-warning: #f59e0b;
  --mobile-error: #ef4444;
  --mobile-info: #3b82f6;

  /* 背景色 */
  --mobile-bg-primary: #ffffff;
  --mobile-bg-secondary: #f8fafc;
  --mobile-bg-tertiary: #f1f5f9;
  --mobile-bg-dark: #0f172a;

  /* 文字色 */
  --mobile-text-primary: #1e293b;
  --mobile-text-secondary: #64748b;
  --mobile-text-tertiary: #94a3b8;
  --mobile-text-inverse: #ffffff;
  --mobile-text-link: #4f46e5;

  /* 边框色 */
  --mobile-border-light: #e2e8f0;
  --mobile-border-medium: #cbd5e1;
  --mobile-border-dark: #94a3b8;

  /* ========================================
     间距系统 - Spacing System
     ======================================== */
  --mobile-space-xs: 4px;
  --mobile-space-sm: 8px;
  --mobile-space-md: 16px;
  --mobile-space-lg: 24px;
  --mobile-space-xl: 32px;
  --mobile-space-xxl: 48px;

  /* ========================================
     字体系统 - Typography System
     ======================================== */
  --mobile-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* 字体大小 */
  --mobile-font-xs: 12px;
  --mobile-font-sm: 14px;
  --mobile-font-md: 16px;
  --mobile-font-lg: 18px;
  --mobile-font-xl: 20px;
  --mobile-font-xxl: 24px;
  --mobile-font-xxxl: 32px;

  /* 字体粗细 */
  --mobile-font-normal: 400;
  --mobile-font-medium: 500;
  --mobile-font-semibold: 600;
  --mobile-font-bold: 700;

  /* 行高 */
  --mobile-line-height-tight: 1.25;
  --mobile-line-height-normal: 1.5;
  --mobile-line-height-relaxed: 1.75;

  /* ========================================
     圆角系统 - Border Radius System
     ======================================== */
  --mobile-radius-sm: 4px;
  --mobile-radius-md: 8px;
  --mobile-radius-lg: 12px;
  --mobile-radius-xl: 16px;
  --mobile-radius-full: 9999px;

  /* ========================================
     阴影系统 - Shadow System
     ======================================== */
  --mobile-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --mobile-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --mobile-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* ========================================
     安全区域 - Safe Area (适配刘海屏)
     ======================================== */
  --mobile-safe-area-top: env(safe-area-inset-top, 0px);
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-area-left: env(safe-area-inset-left, 0px);
  --mobile-safe-area-right: env(safe-area-inset-right, 0px);

  /* ========================================
     布局尺寸 - Layout Dimensions
     ======================================== */
  --mobile-header-height: 44px;
  --mobile-tab-bar-height: 56px;
  --mobile-content-max-width: 100%;

  /* ========================================
     动画 - Animations
     ======================================== */
  --mobile-transition-fast: 150ms ease;
  --mobile-transition-normal: 250ms ease;
  --mobile-transition-slow: 350ms ease;

  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --mobile-min-touch-target: 44px;
  --mobile-input-min-font: 16px;
}

/* ========================================
   暗黑模式支持 - Dark Mode Support
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --mobile-bg-primary: #0f172a;
    --mobile-bg-secondary: #1e293b;
    --mobile-bg-tertiary: #334155;

    --mobile-text-primary: #f8fafc;
    --mobile-text-secondary: #cbd5e1;
    --mobile-text-tertiary: #64748b;

    --mobile-border-light: #334155;
    --mobile-border-medium: #475569;
    --mobile-border-dark: #64748b;

    --mobile-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --mobile-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --mobile-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  }
}.mobile-virtual-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-virtual-list__content {
  position: relative;
}

.mobile-virtual-list__viewport {
  will-change: transform;
}.mobile-wrongbook__stats {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-xl);
  box-shadow: var(--mobile-shadow-sm);
  padding: var(--mobile-space-md);
  margin-bottom: var(--mobile-space-md);
  height: 120px;
  display: flex;
  align-items: center;
}

.mobile-wrongbook__stats-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-wrongbook__stats-value {
  font-size: var(--mobile-font-xxl);
  font-weight: var(--mobile-font-bold);
  color: #262626;
  line-height: var(--mobile-line-height-tight);
}

.mobile-wrongbook__stats-value--pending {
  color: #FAAD14;
}

.mobile-wrongbook__stats-value--resolved {
  color: #52C41A;
}

.mobile-wrongbook__stats-label {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin-top: var(--mobile-space-xs);
}

.mobile-wrongbook__header-actions {
  display: flex;
  gap: var(--mobile-space-sm);
  align-items: center;
}

.mobile-wrongbook__header-btn {
  background: none;
  border: none;
  color: var(--mobile-text-secondary);
  cursor: pointer;
  padding: var(--mobile-space-xs);
  -webkit-tap-highlight-color: transparent;
}

.mobile-wrongbook__refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-space-xs);
  height: 0;
  overflow: hidden;
  transition: height var(--mobile-transition-normal);
  color: var(--mobile-text-secondary);
  font-size: var(--mobile-font-sm);
}

.mobile-wrongbook__refresh--visible {
  height: 44px;
}

.mobile-wrongbook__refresh-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--mobile-transition-fast);
  font-size: var(--mobile-font-md);
}

.mobile-wrongbook__refresh-arrow--up {
  transform: rotate(180deg);
}

.mobile-wrongbook__refresh-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--mobile-border-medium);
  border-top-color: #1890FF;
  border-radius: 50%;
  animation: mobile-refresh-spin 0.6s linear infinite;
}

@keyframes mobile-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-wrongbook__refresh-text {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-wrongbook__filter {
  display: flex;
  gap: var(--mobile-space-sm);
  overflow-x: auto;
  padding-bottom: var(--mobile-space-sm);
  margin-bottom: var(--mobile-space-xs);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mobile-wrongbook__filter::-webkit-scrollbar {
  display: none;
}

.mobile-wrongbook__filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mobile-space-xs);
  padding: var(--mobile-space-xs) var(--mobile-space-md);
  border-radius: var(--mobile-radius-xl);
  font-size: var(--mobile-font-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  border: none;
  background: #F5F5F5;
  color: #595959;
  -webkit-tap-highlight-color: transparent;
}

.mobile-wrongbook__filter-tag--active {
  background: #1890FF;
  color: #ffffff;
}

.mobile-wrongbook__filter-count {
  font-size: var(--mobile-font-xs);
  opacity: 0.8;
}

.mobile-wrongbook__list {
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-sm);
}

.mobile-wrongbook__item {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-md);
  box-shadow: var(--mobile-shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--mobile-space-md);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
}

.mobile-wrongbook__item:active {
  transform: translateY(-1px);
}

.mobile-wrongbook__item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mobile-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.mobile-wrongbook__item-icon--wrong {
  background: #FFF1F0;
  color: #F5222D;
}

.mobile-wrongbook__item-icon--resolved {
  background: #F6FFED;
  color: #52C41A;
}

.mobile-wrongbook__item-content {
  flex: 1;
  min-width: 0;
}

.mobile-wrongbook__item-subject {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-wrongbook__item-point {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-wrongbook__item-meta {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-md);
  margin-top: var(--mobile-space-xs);
  font-size: var(--mobile-font-xs);
  color: var(--mobile-text-tertiary);
}

.mobile-wrongbook__item-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--mobile-radius-full);
  font-size: var(--mobile-font-xs);
  font-weight: var(--mobile-font-medium);
}

.mobile-wrongbook__item-status--pending {
  background: #FFF7E6;
  color: #FAAD14;
}

.mobile-wrongbook__item-status--resolved {
  background: #F6FFED;
  color: #52C41A;
}

.mobile-wrongbook__load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-md);
}

.mobile-wrongbook__load-more-text {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-tertiary);
}

.mobile-wrongbook__bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--mobile-space-md);
  padding-bottom: calc(var(--mobile-space-md) + var(--mobile-safe-area-bottom));
  background: var(--mobile-bg-primary);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
  z-index: 50;
}

.mobile-wrongbook__review-btn {
  width: 100%;
  padding: var(--mobile-space-md);
  border-radius: var(--mobile-radius-lg);
  background: #1890FF;
  color: #ffffff;
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-medium);
  border: none;
  cursor: pointer;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-wrongbook__review-btn:active {
  opacity: 0.85;
}

.mobile-wrongbook__review {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mobile-bg-secondary);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.mobile-wrongbook__review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mobile-space-md);
  padding-top: calc(var(--mobile-space-md) + var(--mobile-safe-area-top));
  background: var(--mobile-bg-primary);
  border-bottom: 1px solid var(--mobile-border-light);
  gap: var(--mobile-space-sm);
}

.mobile-wrongbook__review-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
}

.mobile-wrongbook__review-progress {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
  margin-left: auto;
}

.mobile-wrongbook__review-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--mobile-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-wrongbook__review-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--mobile-text-primary);
  cursor: pointer;
  font-size: var(--mobile-font-lg);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-wrongbook__review-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mobile-space-md);
}

.mobile-wrongbook__review-question {
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-space-lg);
  margin-bottom: var(--mobile-space-md);
}

.mobile-wrongbook__review-empty-content {
  color: var(--mobile-text-tertiary);
}

.mobile-wrongbook__review-actions {
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-sm);
  padding: var(--mobile-space-md);
  padding-bottom: calc(var(--mobile-space-md) + var(--mobile-safe-area-bottom));
  background: var(--mobile-bg-primary);
  border-top: 1px solid var(--mobile-border-light);
}

.mobile-wrongbook__review-hint-btn,
.mobile-wrongbook__review-answer-btn {
  width: 100%;
  padding: var(--mobile-space-sm) var(--mobile-space-md);
  border-radius: var(--mobile-radius-md);
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  border: 1px solid var(--mobile-border-medium);
  background: var(--mobile-bg-primary);
  color: var(--mobile-text-primary);
  cursor: pointer;
  transition: all var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-wrongbook__review-hint-btn:active,
.mobile-wrongbook__review-answer-btn:active {
  background: var(--mobile-bg-tertiary);
}

.mobile-wrongbook__review-result-btns {
  display: flex;
  gap: var(--mobile-space-md);
}

.mobile-wrongbook__review-correct-btn {
  flex: 1;
  padding: var(--mobile-space-md);
  border-radius: var(--mobile-radius-md);
  background: #52C41A;
  color: #ffffff;
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  border: none;
  cursor: pointer;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-wrongbook__review-correct-btn:active {
  opacity: 0.85;
}

.mobile-wrongbook__review-wrong-btn {
  flex: 1;
  padding: var(--mobile-space-md);
  border-radius: var(--mobile-radius-md);
  background: #F5222D;
  color: #ffffff;
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-medium);
  border: none;
  cursor: pointer;
  transition: opacity var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-wrongbook__review-wrong-btn:active {
  opacity: 0.85;
}

.mobile-wrongbook__mode-select {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mobile-space-md);
  padding: var(--mobile-space-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-wrongbook__mode-card {
  display: flex;
  align-items: center;
  gap: var(--mobile-space-md);
  height: 80px;
  padding: var(--mobile-space-md);
  background: var(--mobile-bg-primary);
  border-radius: var(--mobile-radius-lg);
  border: none;
  box-shadow: var(--mobile-shadow-sm);
  cursor: pointer;
  transition: transform var(--mobile-transition-fast);
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}

.mobile-wrongbook__mode-card:active {
  transform: scale(0.98);
}

.mobile-wrongbook__mode-card-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-wrongbook__mode-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mobile-wrongbook__mode-card-title {
  font-size: var(--mobile-font-md);
  font-weight: var(--mobile-font-semibold);
  color: var(--mobile-text-primary);
}

.mobile-wrongbook__mode-card-desc {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.mobile-wrongbook__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mobile-space-xxl);
  text-align: center;
}

.mobile-wrongbook__empty-icon {
  font-size: 48px;
  margin-bottom: var(--mobile-space-md);
}

.mobile-wrongbook__empty-title {
  font-size: var(--mobile-font-lg);
  font-weight: var(--mobile-font-medium);
  color: var(--mobile-text-primary);
  margin-bottom: var(--mobile-space-xs);
}

.mobile-wrongbook__empty-desc {
  font-size: var(--mobile-font-sm);
  color: var(--mobile-text-secondary);
}

.ai-model-form__model-type-group {
  display: flex;
  gap: var(--space-16);
}

.ai-model-form__model-type-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  white-space: nowrap;
}.admin-aimodels__api-url {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-aimodels__status {
  padding: 4px 8px;
  border-radius: var(--radius-4);
  font-size: var(--text-12);
}

.admin-aimodels__status--enabled {
  background-color: #d4edda;
  color: #155724;
}

.admin-aimodels__status--disabled {
  background-color: #f8d7da;
  color: #721c24;
}

.admin-aimodels__filter-select {
  width: 140px;
}

.admin-aimodels__filter-select--status {
  width: 120px;
}

.admin-backups__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-20);
  padding: 4px var(--space-10);
}

.admin-backups__toolbar-actions {
  display: flex;
  gap: var(--space-12);
}

.admin-backups__icon {
  margin-right: 6px;
}

.admin-backups__filename {
  font-family: monospace;
}

.admin-backups__status-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-backups__remote-status {
  font-size: var(--text-11);
  color: var(--color-gray-500);
}

.admin-backups__modal-content {
  padding: var(--space-16);
}

.admin-backups__warning-text {
  color: var(--color-red-600);
  font-weight: 600;
  margin-bottom: var(--space-12);
}

.admin-backups__modal-desc {
  margin-bottom: var(--space-16);
}

.admin-backups__filename-highlight {
  font-family: monospace;
  font-weight: 600;
}

.admin-backups__modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.admin-backups__upload-section {
  padding: var(--space-16);
}

.admin-backups__upload-file-group {
  margin-bottom: var(--space-16);
}

.admin-backups__upload-success {
  margin-bottom: var(--space-16);
  font-size: var(--text-13);
  color: var(--color-emerald-600);
}
.admin-feedback-page {
  /* 继承 feedback-page 基础样式 */
}

/* 管理员特有的表格操作列宽度 */
.admin-feedback-page .actions-cell {
  min-width: 120px;
}

/* 管理员批量操作栏 */
.admin-feedback-page .batch-actions-bar {
  margin-bottom: var(--space-16, 16px);
  padding: var(--space-12, 12px) var(--space-16, 16px);
  background-color: var(--color-gray-50, #f9fafb);
  border-radius: var(--radius-8, 8px);
  display: flex;
  align-items: center;
  gap: var(--space-12, 12px);
}.admin-users-filters { display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-24); padding: var(--space-24); background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%); border-radius: var(--radius-12); border: 1px solid var(--color-gray-200); box-shadow: var(--shadow-filter); }
.admin-aimodels-filters { display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-24); padding: var(--space-24); background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%); border-radius: var(--radius-12); border: 1px solid var(--color-gray-200); box-shadow: var(--shadow-filter); }
.admin-search-input { flex: 1; min-width: var(--width-search); padding: var(--space-12) var(--space-16); border: 2px solid var(--color-gray-200); border-radius: var(--radius-12); font-size: var(--text-14); background: var(--color-white); transition: var(--transition-slow); box-shadow: var(--shadow-card); }
.admin-search-input:focus { outline: none; border-color: var(--color-blue-500); box-shadow: var(--shadow-filter-focus), var(--shadow-card); transform: translateY(-1px); }
.admin-search-input::placeholder { color: var(--color-gray-1100); font-style: italic; }
.admin-filter-select { padding: var(--space-12) var(--space-16); border: 2px solid var(--color-gray-200); border-radius: var(--radius-12); font-size: var(--text-14); background: var(--color-white); color: var(--color-gray-700); cursor: pointer; transition: var(--transition-slow); box-shadow: var(--shadow-card); min-width: var(--width-filter-select); }
.admin-date-input { border: none; outline: none; font-size: var(--text-14); background: transparent; min-width: var(--width-filter-date); }
.admin-date-input::-webkit-calendar-picker-indicator { cursor: pointer; }
.admin-date-range-separator { font-size: var(--text-12); color: var(--color-gray-700); }
.admin-date-range { position: relative; }
.admin-date-range-display { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16); border-radius: var(--radius-12); border: 2px solid var(--color-gray-200); background: var(--color-white); cursor: pointer; font-size: var(--text-14); color: var(--color-gray-700); box-shadow: var(--shadow-card); transition: var(--transition-base); }
.admin-date-range-display:hover { border-color: var(--color-gray-1700); box-shadow: var(--shadow-filter-hover); transform: translateY(-1px); }
.admin-date-range-label { white-space: nowrap; }
.admin-date-range-icon { display: flex; align-items: center; justify-content: center; color: var(--color-gray-1800); }
.admin-date-range-panel { position: fixed; top: auto; left: auto; margin-top: 0; padding: var(--space-12) var(--space-16); border-radius: var(--radius-12); background: var(--color-white); box-shadow: var(--shadow-trial-hint); border: 1px solid var(--color-gray-200); z-index: var(--z-filter-panel); min-width: var(--width-filter-panel); }
.admin-date-range-actions { display: flex; justify-content: flex-end; gap: var(--space-8); }
.admin-date-range-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.admin-date-range-month { font-size: var(--text-14); font-weight: 600; color: var(--color-gray-1500); }
.admin-date-range-nav { border: none; background: transparent; cursor: pointer; font-size: var(--text-16); color: var(--color-gray-700); padding: var(--space-2) var(--space-4); border-radius: var(--radius-6); }
.admin-date-range-nav:hover { background: var(--color-gray-1200); color: var(--color-gray-1500); }
.admin-date-range-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--text-12); color: var(--color-gray-1900); text-align: center; margin-bottom: var(--space-4); }
.admin-date-range-weekdays span { padding: var(--space-2) 0; }
.admin-date-range-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); margin-bottom: var(--space-8); }
.admin-date-range-calendars { display: flex; gap: var(--space-16); }
.admin-date-range-calendar { flex: 1; }
.admin-date-cell { border: none; background: transparent; cursor: pointer; padding: var(--space-4) 0; font-size: var(--text-13); border-radius: var(--radius-full); color: var(--color-gray-1500); }
.admin-date-cell--muted { color: var(--color-gray-300); }
.admin-date-cell--start, .admin-date-cell--end { background: var(--color-gray-1800); color: var(--color-white); }
.admin-date-cell--in-range { background: var(--color-blue-100); color: var(--color-gray-1500); }
.admin-filter-select:focus { outline: none; border-color: var(--color-blue-500); box-shadow: var(--shadow-filter-focus), var(--shadow-card); transform: translateY(-1px); }
.admin-filter-select:hover { border-color: var(--color-gray-1700); transform: translateY(-1px); box-shadow: var(--shadow-filter-hover); }
.admin-filter-select option { padding: var(--space-8); background: var(--color-white); color: var(--color-gray-700); }
@media (max-width: 768px) { .admin-users-filters { flex-direction: column; align-items: stretch; gap: var(--space-12); padding: var(--space-16); } .admin-aimodels-filters { flex-direction: column; align-items: stretch; gap: var(--space-12); padding: var(--space-16); } .admin-search-input { min-width: auto; } .admin-filter-select { min-width: auto; } }

.log-filter__select {
  padding: 0;
  border: none;
  background: transparent;
  min-width: 140px;
}

.log-filter__select--module {
  min-width: 160px;
}

.admin-notifications__filter-select {
  padding: 0;
  border: none;
  background: transparent;
}

.admin-notifications__content-preview {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-operation-logs__content {
  margin-top: var(--space-16);
}

.admin-operation-logs__loading {
  padding: var(--space-24);
  text-align: center;
}

.admin-operation-logs__pagination-wrapper {
  padding: var(--space-16);
}

.publisher-form__checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.publisher-form__checkbox-label {
  margin-bottom: 0;
}

.publisher-form__rate-hint {
  color: var(--color-text-tertiary);
}

.publisher-table__name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.publisher-table__logo {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-4);
  object-fit: cover;
}

.publisher-table__status {
  font-weight: bold;
}

.publisher-table__status--active {
  color: #52c41a;
}

.publisher-table__status--inactive {
  color: #faad14;
}

.reset-password__container {
  position: relative;
  display: flex;
  align-items: center;
}

.reset-password__input {
  flex: 1;
  padding-right: 40px;
}

.reset-password__toggle-btn {
  position: absolute;
  right: var(--space-12);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-4);
  color: var(--color-gray-500);
}

.reset-password__error-message {
  text-align: center;
  padding: 20px 0;
}

.reset-password__user-info {
  margin-bottom: var(--space-16);
  padding: var(--space-12);
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
  font-size: var(--text-14);
}

.reset-password__user-info-title {
  margin: 0 0 var(--space-8) 0;
  font-weight: 500;
}

.reset-password__user-info-row {
  margin: var(--space-4) 0;
}

.reset-password__message {
  margin-bottom: var(--space-16);
}

.backup-settings-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
}

.backup-settings-drawer__section {
  margin-bottom: var(--space-32);
}

.backup-settings-drawer__section-title {
  font-size: var(--text-16);
  font-weight: 600;
  margin-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-gray-200);
  padding-bottom: var(--space-8);
}

.backup-settings-drawer__form-group {
  margin-bottom: var(--space-16);
}

.backup-settings-drawer__form-group--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.backup-settings-drawer__form-group--header .form-label {
  margin-bottom: 0;
}

.backup-settings-drawer__preset-card {
  background: var(--color-gray-50);
  padding: var(--space-16);
  border-radius: var(--radius-8);
}

.backup-settings-drawer__preset-group {
  margin-bottom: var(--space-12);
}

.backup-settings-drawer__preset-label {
  font-size: var(--text-13);
}

.backup-settings-drawer__preset-buttons {
  display: flex;
  gap: var(--space-8);
}

.backup-settings-drawer__cron-label {
  font-size: var(--text-13);
}

.backup-settings-drawer__cron-input {
  font-family: monospace;
}

.backup-settings-drawer__cron-hint {
  font-size: var(--text-12);
  color: var(--color-gray-500);
  margin-top: var(--space-4);
}

.backup-settings-drawer__next-run {
  margin-top: var(--space-12);
  font-size: var(--text-13);
  color: var(--color-emerald-600);
}

.backup-settings-drawer__keep-count-group {
  margin-top: var(--space-24);
}

.backup-settings-drawer__keep-count-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.backup-settings-drawer__keep-count-input {
  width: 100px;
}

.backup-settings-drawer__keep-count-unit {
  color: var(--color-gray-500);
  font-size: var(--text-14);
}

.backup-settings-drawer__storage-local {
  margin-bottom: var(--space-16);
}

.backup-settings-drawer__storage-local-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.backup-settings-drawer__storage-local-label {
  font-size: var(--text-14);
  font-weight: 500;
}

.backup-settings-drawer__storage-local-badge {
  font-size: var(--text-12);
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  padding: 2px var(--space-6);
  border-radius: var(--radius-4);
}

.backup-settings-drawer__storage-local-desc {
  font-size: var(--text-13);
  color: var(--color-gray-500);
}

.backup-settings-drawer__remote-section {
  border-top: 1px dashed var(--color-gray-200);
  padding-top: var(--space-16);
  margin-top: var(--space-16);
}

.backup-settings-drawer__remote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12);
}

.backup-settings-drawer__remote-header .form-label {
  margin-bottom: 0;
}

.backup-settings-drawer__remote-servers {
  margin-top: var(--space-16);
}

.backup-settings-drawer__servers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12);
}

.backup-settings-drawer__servers-title {
  font-weight: 600;
  font-size: var(--text-14);
}

.backup-settings-drawer__empty-servers {
  color: var(--color-gray-400);
  font-size: var(--text-13);
  text-align: center;
  padding: var(--space-8);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-6);
}

.backup-settings-drawer__servers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.backup-settings-drawer__server-card {
  background: var(--color-gray-50);
  padding: var(--space-16);
  border-radius: var(--radius-8);
  border: 1px solid var(--color-gray-200);
}

.backup-settings-drawer__server-grid-2fr-1fr {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.backup-settings-drawer__server-grid-1fr-1fr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.backup-settings-drawer__server-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-8);
}

.backup-settings-drawer__server-actions-hint {
  font-size: var(--text-12);
  color: var(--color-gray-500);
}

.required-star {
  color: var(--color-red-600);
}

.user-form-modal__form-row {
  display: block;
}

.user-form-modal__rate-hint {
  color: var(--color-text-tertiary);
}

.user-table__lock-reason {
  font-size: var(--text-12);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.admin-users-layout__selection-bar {
  margin-bottom: var(--space-20);
  padding: var(--space-12);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-4);
}

.admin-users-layout__selection-actions {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-8);
}

.admin-users-layout__empty-state {
  text-align: center;
  padding: var(--space-40);
  color: var(--color-text-tertiary);
}

.admin-users-layout__selection-bar {
  margin-bottom: 20px;
  padding: 12px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.admin-users-layout__selection-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.admin-users-layout__empty-text {
  text-align: center;
  padding: 40px;
  color: #666;
}
.chat-message-paragraph {
  margin: 0 0 8px 0;
  line-height: 1.6;
}

.chat-reasoning-details {
  margin-bottom: var(--space-12, 12px);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-8, 8px);
  overflow: hidden;
}

.chat-reasoning-summary {
  padding: 8px var(--space-12, 12px);
  background: var(--color-gray-50, #f9fafb);
  cursor: pointer;
  font-size: var(--text-13, 13px);
  color: var(--color-gray-500, #6b7280);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-reasoning-icon {
  font-size: var(--text-16, 16px);
}

.chat-reasoning-status {
  font-size: var(--text-12, 12px);
  opacity: 0.7;
}

.chat-reasoning-content {
  padding: var(--space-12, 12px);
  background: var(--color-gray-50, #f8fafc);
  font-size: var(--text-13, 13px);
  color: var(--color-gray-600, #4b5563);
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  max-height: 300px;
  overflow-y: auto;
}

.chat-inline-code {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 4px;
  border-radius: var(--radius-4, 4px);
}

.chat-thinking-cursor {
  display: inline-block;
  width: 6px;
  height: 14px;
  background: var(--color-primary-500, #3b82f6);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s infinite;
}

/* Note: @keyframes blink is defined in animations.css */

/* Study AI Chat Drawer Styles */
.ai-chat-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

.ai-chat-drawer-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.ai-chat-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: var(--color-white, white);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease-out;
}

/* Note: @keyframes slideInRight is defined in animations.css */

.ai-chat-drawer-header {
  padding: var(--space-16, 16px);
  border-bottom: 1px solid var(--color-gray-100, #f1f5f9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-gray-50, #f8fafc);
}

.ai-chat-drawer-title {
  margin: 0;
  font-size: var(--text-18, 18px);
  font-weight: 600;
  color: var(--color-gray-700, #334155);
}

.ai-chat-drawer-close {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  color: var(--color-gray-400, #94a3b8);
  font-size: var(--text-18, 18px);
  line-height: 1;
}

.ai-chat-drawer-content {
  flex: 1;
  overflow: hidden;
}

.ai-thought-window {
  position: fixed;
  bottom: 405px;
  right: 24px;
  width: 360px;
  max-height: 500px;
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--color-gray-200);
  z-index: 10000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: ai-slideIn 0.3s ease-out;
}

.ai-thought-window__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-gray-50);
}

.ai-thought-window__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-gray-800);
  font-size: 14px;
}

.ai-thought-window__close {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  color: var(--color-slate-400);
  font-size: 18px;
  line-height: 1;
}

.ai-thought-window__content {
  padding: 16px;
  font-size: 14px;
  color: var(--color-gray-800);
  overflow-y: auto;
  line-height: 1.6;
  flex: 1;
  background: var(--color-white);
}

.ai-thought-window__thinking {
  margin-bottom: 16px;
}

.ai-thought-window__thinking-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-gray-100);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  user-select: none;
}

.ai-thought-window__thinking-content {
  margin-top: 8px;
  padding: 12px;
  background: var(--color-gray-50);
  border-radius: 8px;
  border: 1px solid var(--color-gray-200);
  font-size: 13px;
  color: var(--color-gray-500);
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

.ai-thought-window__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-gray-100);
  background: var(--color-white);
  display: flex;
  justify-content: flex-end;
}

.ai-thought-window__accept-btn {
  background: var(--color-blue-500);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
  transition: background 0.2s;
}

.ai-thought-window__accept-btn:hover {
  background: var(--color-blue-600);
}

.ai-thought-window__empty {
  color: var(--color-slate-400);
  font-style: italic;
}

.ai-thought-window__no-content {
  color: var(--color-slate-400);
  text-align: center;
  padding: 20px 0;
}

/* Markdown 渲染样式 */
.ai-thought-window__markdown p {
  margin-bottom: 0.8em;
}

.ai-thought-window__markdown ul,
.ai-thought-window__markdown ol {
  padding-left: 1.5em;
  margin-bottom: 0.8em;
}

.ai-thought-window__markdown li {
  margin-bottom: 0.3em;
}

.ai-thought-window__markdown h1 {
  font-size: 1.3em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.6em;
}

.ai-thought-window__markdown h2 {
  font-size: 1.2em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.6em;
}

.ai-thought-window__markdown h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.6em;
}

.ai-thought-window__code-block {
  display: block;
  background: var(--color-gray-50);
  padding: 1em;
  border-radius: 6px;
  font-size: 0.9em;
  overflow-x: auto;
  border: 1px solid var(--color-gray-200);
}

.ai-thought-window__code-inline {
  background: var(--color-gray-100);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--color-gray-600);
}

/* ==================== AIHelpDrawer ==================== */

.ai-help-drawer {
  padding: 20px;
  color: var(--color-gray-800);
}

.ai-help-drawer__intro {
  margin-bottom: 24px;
}

.ai-help-drawer__intro-text {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.ai-help-drawer__step {
  margin-bottom: 24px;
}

.ai-help-drawer__step-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.ai-help-drawer__step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-blue-500);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 16px;
  flex-shrink: 0;
}

.ai-help-drawer__step-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-800);
  margin: 0;
}

.ai-help-drawer__step-body {
  padding-left: 44px;
}

.ai-help-drawer__paragraph {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0 0 8px;
}

.ai-help-drawer__note {
  font-size: 13px;
  color: var(--color-gray-500);
  font-style: italic;
}

.ai-help-drawer__register-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-top: 8px;
}

.ai-help-drawer__settings-btn {
  margin-top: 8px;
  margin-bottom: 8px;
}

.ai-help-drawer__warning {
  background: var(--color-yellow-50);
  border: 1px solid var(--color-yellow-200);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

/* ==================== AIAssistantModal ==================== */

.ai-assistant-modal__info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.ai-assistant-modal__info-title {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #334155;
}

.ai-assistant-modal__info-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

.ai-assistant-modal__warning-box {
  margin-bottom: 16px;
  padding: 12px;
  background: #fee2e2;
  border: 1px solid #ef4444;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 14px;
}

.ai-assistant-modal__warning-text {
  margin-bottom: 8px;
}

.ai-assistant-modal__guide-btn {
  font-size: 12px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #ef4444;
  color: #ef4444;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ai-assistant-modal__guide-btn:hover {
  background: #fef2f2;
}

.ai-assistant-modal__drop-zone {
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.ai-assistant-modal__drop-zone--dragging {
  background: #eff6ff;
  border-color: #3b82f6;
}

.ai-assistant-modal__drop-zone--has-file {
  background: #f0f9ff;
  border-color: #3b82f6;
}

.ai-assistant-modal__drop-zone--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.ai-assistant-modal__file-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.ai-assistant-modal__file-name {
  color: #3b82f6;
  font-weight: 500;
}

.ai-assistant-modal__file-size {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.ai-assistant-modal__drop-text {
  color: #64748b;
}

.ai-assistant-modal__drop-hint {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

.ai-assistant-modal__prompt-area {
  margin-top: 16px;
}

.ai-assistant-modal__prompt-input {
  min-height: 64px;
  resize: vertical;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}

.ai-assistant-modal__prompt-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-assistant-modal__file-input {
  display: none;
}

.ai-help-drawer__warning {
  background: var(--color-yellow-50);
  border: 1px solid var(--color-yellow-200);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.ai-help-drawer__warning-header {
  font-weight: 600;
  color: var(--color-amber-800);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-help-drawer__warning-text {
  font-size: 14px;
  color: var(--color-yellow-700);
  margin: 0;
  line-height: 1.5;
}

.ai-help-drawer__recommendation {
  margin-top: 10px;
  padding: 10px;
  background: var(--color-white);
  border-radius: 6px;
  border: 1px dashed var(--color-amber-500);
}

.ai-help-drawer__recommendation-label {
  font-size: 13px;
  color: var(--color-amber-800);
  margin-bottom: 4px;
}

.ai-help-drawer__model-code {
  background: var(--color-gray-100);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--color-amber-500);
  font-weight: bold;
  font-size: 13px;
  display: block;
  word-break: break-all;
}

.ai-help-drawer__config-list {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-help-drawer__config-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-gray-600);
}

.ai-help-drawer__config-label {
  color: var(--color-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-help-drawer__config-value {
  color: var(--color-gray-800);
  font-weight: 500;
}

.ai-help-drawer__config-code {
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--color-blue-600);
  word-break: break-all;
}

/* ==================== AIProcessFloatingWindow ==================== */

.ai-process-window {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 320px;
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-gray-200);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: ai-slideIn 0.3s ease-out;
}

.ai-process-window__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-gray-50);
}

.ai-process-window__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-gray-800);
}

.ai-process-window__close {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  color: var(--color-slate-400);
  font-size: 18px;
  line-height: 1;
}

.ai-process-window__content {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.ai-process-window__error {
  padding: 12px;
  background: var(--color-danger-100);
  border: 1px solid var(--color-danger-100);
  border-radius: 6px;
  color: var(--color-error-500);
  font-size: 14px;
  display: flex;
  gap: 8px;
}

.ai-process-window__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-process-window__step {
  display: flex;
  gap: 12px;
}

.ai-process-window__step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.ai-process-window__step-icon--completed {
  background: var(--color-success-100);
  color: var(--color-emerald-600);
}

.ai-process-window__step-icon--processing {
  background: var(--color-info-100);
  color: var(--color-sky-600);
}

.ai-process-window__step-icon--failed {
  background: var(--color-danger-100);
  color: var(--color-red-600);
}

.ai-process-window__step-icon--pending {
  background: var(--color-gray-100);
  color: var(--color-slate-400);
}

.ai-process-window__step-content {
  flex: 1;
}

.ai-process-window__step-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.ai-process-window__step-label--pending {
  color: var(--color-slate-400);
}

.ai-process-window__step-label--active {
  color: var(--color-gray-800);
}

.ai-process-window__step-message {
  font-size: 12px;
  color: var(--color-gray-500);
}

.ai-process-window__progress-track {
  height: 2px;
  background: var(--color-gray-100);
  margin-top: 6px;
  border-radius: 2px;
  overflow: hidden;
}

.ai-process-window__progress-bar {
  height: 100%;
  background: var(--color-blue-500);
}

/* ==================== AIGradientButton ==================== */

.ai-gradient-btn {
  background: linear-gradient(135deg, var(--color-indigo-500) 0%, var(--color-purple-500) 100%);
  color: var(--color-white);
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3), 0 2px 4px -1px rgba(99, 102, 241, 0.15);
  transform: translateY(0);
  transition: all 0.2s ease;
  outline: none;
  opacity: 1;
}

.ai-gradient-btn:hover:not(:disabled) {
  box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4), 0 4px 6px -2px rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

.ai-gradient-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* ==================== Animations ==================== */

@keyframes ai-slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.analysis-chat-page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-16, 16px);
  padding: var(--space-24, 24px);
  box-sizing: border-box;
  height: calc(100vh - var(--app-header-height, 96px));
  overflow: hidden;
  max-width: 100vw;
}

.analysis-chat-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-16, 16px);
  border: 1px solid var(--color-gray-1200, #e5e7eb);
  padding: var(--space-12, 12px);
  min-height: 0;
  overflow: hidden;
}

.analysis-chat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.analysis-chat-app-name {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
  font-size: var(--text-16, 16px);
  font-weight: 600;
  color: var(--color-gray-1500, #111827);
}

.analysis-chat-help-btn {
  color: var(--color-gray-500, #6b7280);
  padding: var(--space-4, 4px);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.analysis-chat-new-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-4, 4px);
  color: var(--color-gray-500, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.analysis-chat-new-btn:hover {
  color: var(--color-gray-1500, #111827);
}

.analysis-chat-search input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-12, 12px);
  border: 1px solid var(--color-gray-1200, #e1e5e9);
  font-size: var(--text-13, 13px);
  background-color: var(--color-gray-1300, #f9fafb);
  margin-bottom: 8px;
}

.analysis-chat-search input:focus {
  outline: none;
  border-color: var(--color-primary-500, #667eea);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 2px 8px rgba(15, 23, 42, 0.08);
  background-color: var(--color-white, #ffffff);
}

.analysis-chat-groups-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4, 4px);
  margin-bottom: var(--space-4, 4px);
  font-size: var(--text-13, 13px);
  color: var(--color-gray-500, #6b7280);
}

.analysis-chat-link {
  border: none;
  background: transparent;
  color: var(--color-blue-500, #3b82f6);
  cursor: pointer;
  font-size: var(--text-12, 12px);
  padding: 0;
}

.analysis-chat-group-item {
  padding: 6px 8px;
  padding-right: 28px;
  border-radius: var(--radius-10, 10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.analysis-chat-group-item--hover {
  background: var(--color-gray-1000, #f1f5f9);
  box-shadow: inset 0 0 0 1px var(--color-gray-1100, #e2e8f0);
}

.analysis-chat-group-main {
  display: flex;
  align-items: center;
  gap: 6px;
}

.analysis-chat-group-name {
  font-size: var(--text-13, 13px);
  color: var(--color-gray-1500, #111827);
}



.analysis-chat-group-action-container {
  position: absolute;
  top: 50%;
  right: var(--space-4, 4px);
  transform: translateY(-50%);
  display: none;
}

.analysis-chat-group-item--hover .analysis-chat-group-action-container {
  display: block;
}

.analysis-chat-group-item--menu-open .analysis-chat-group-action-container {
  display: block !important;
}

.analysis-chat-sidebar-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.analysis-chat-sidebar-content--batch-mode {
  padding-bottom: 120px;
}

.analysis-chat-groups-list {
  margin-bottom: 8px;
  max-height: 140px;
  overflow-y: auto;
}

.analysis-chat-sessions-title {
  margin-top: 6px;
  margin-bottom: var(--space-4, 4px);
  font-size: var(--text-13, 13px);
  color: var(--color-gray-500, #6b7280);
}

.analysis-chat-sessions-list {
  padding-right: var(--space-4, 4px);
}

.analysis-chat-session-item {
  border-radius: var(--radius-10, 10px);
  padding: 10px var(--space-12, 12px);
  margin-bottom: var(--space-4, 4px);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
}

.analysis-chat-session-item:hover {
  background: var(--color-indigo-50, #f3f4ff);
  border-color: var(--color-indigo-100, #e0e7ff);
}

.analysis-chat-session-item--active {
  background: linear-gradient(135deg, var(--color-indigo-50, #eef2ff) 0%, var(--color-sky-100, #e0f2fe) 100%);
  border-color: var(--color-indigo-500, #6366f1);
}

.analysis-chat-session-title {
  font-size: var(--text-13, 13px);
  font-weight: 500;
  color: var(--color-gray-1500, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: var(--space-24, 24px);
  width: 100%;
}

.analysis-chat-session-action-container {
  position: absolute;
  top: 50%;
  right: var(--space-4, 4px);
  transform: translateY(-50%);
  display: none;
}

.analysis-chat-session-item:hover .analysis-chat-session-action-container {
  display: block;
}

.analysis-chat-session-item--menu-open .analysis-chat-session-action-container {
  display: block !important;
}

.analysis-chat-session-item--menu-open {
  z-index: 20;
}

.analysis-chat-empty {
  font-size: var(--text-12, 12px);
  color: var(--color-gray-300, #9ca3af);
  padding: var(--space-12, 12px) var(--space-4, 4px);
}

.analysis-chat-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-16, 16px);
  border: 1px solid var(--color-gray-1200, #e5e7eb);
  padding: var(--space-16, 16px);
  min-height: 0;
  overflow: hidden;
}

.analysis-chat-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.analysis-chat-main-title {
  font-size: var(--text-18, 18px);
  font-weight: 600;
  color: var(--color-gray-1500, #111827);
}

.analysis-chat-main-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analysis-chat-model-select {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-1200, #e5e7eb);
  font-size: var(--text-13, 13px);
  background: var(--color-gray-1300, #f9fafb);
  min-width: 180px;
}

.analysis-chat-model-select:focus {
  outline: none;
  border-color: var(--color-primary-500, #667eea);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: var(--color-white, #ffffff);
}

.analysis-chat-welcome {
  padding: var(--space-24, 24px) 8px 8px;
}

.analysis-chat-welcome-text {
  font-size: var(--text-24, 24px);
  font-weight: 700;
  margin-bottom: var(--space-4, 4px);
}

.analysis-chat-welcome-subtitle {
  font-size: var(--text-13, 13px);
  color: var(--color-gray-500, #6b7280);
  margin-bottom: var(--space-16, 16px);
}

.analysis-chat-quick-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.analysis-chat-quick-topic {
  border-radius: 999px;
  border: 1px solid var(--color-gray-1100, #e2e8f0);
  background: var(--color-gray-1300, #f9fafb);
  font-size: var(--text-12, 12px);
  padding: 6px 10px;
  cursor: pointer;
}

.analysis-chat-quick-topic:hover {
  background: var(--color-indigo-50, #eef2ff);
  border-color: var(--color-indigo-200, #c7d2fe);
}

.analysis-chat-messages-wrapper {
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-12, 12px);
  background: var(--color-gray-1300, #f9fafb);
  padding: var(--space-12, 12px);
  margin-top: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.analysis-chat-loading {
  font-size: var(--text-13, 13px);
  color: var(--color-gray-500, #6b7280);
}

.analysis-chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-20, 20px);
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.analysis-chat-message {
  display: flex;
  gap: var(--space-12, 12px);
  align-items: flex-start;
  padding: 8px 0;
}

.analysis-chat-message--user {
  flex-direction: row-reverse;
}

.analysis-chat-message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-13, 13px);
  background: var(--color-gray-200, #e5e7eb);
  color: var(--color-gray-700, #374151);
}

.analysis-chat-message--assistant .analysis-chat-message-avatar {
  background: var(--color-blue-500, #3b82f6);
  color: var(--color-white, #ffffff);
}

.analysis-chat-message-content {
  max-width: 70%;
  padding: 8px var(--space-12, 12px);
  border-radius: var(--radius-12, 12px);
  font-size: var(--text-14, 14px);
  line-height: 1.6;
  background: var(--color-white, #ffffff);
  color: var(--color-gray-1500, #111827);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.analysis-chat-message-content ul,
.analysis-chat-message-content ol {
  margin: 8px 0;
  padding-left: var(--space-24, 24px);
  list-style-position: outside;
}

.analysis-chat-message-content li {
  margin-bottom: var(--space-4, 4px);
}

.analysis-chat-message-content pre {
  background: var(--color-gray-100, #f3f4f6);
  padding: var(--space-12, 12px);
  border-radius: var(--radius-8, 8px);
  overflow-x: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--text-13, 13px);
}

.analysis-chat-message-content blockquote {
  border-left: 4px solid var(--color-gray-200, #e5e7eb);
  padding-left: var(--space-12, 12px);
  margin: 8px 0;
  color: var(--color-gray-500, #6b7280);
}

.analysis-chat-message-content h1,
.analysis-chat-message-content h2,
.analysis-chat-message-content h3,
.analysis-chat-message-content h4 {
  margin: var(--space-16, 16px) 0 8px 0;
  font-weight: 600;
  line-height: 1.4;
}

.analysis-chat-message-content h1 { font-size: 1.4em; }
.analysis-chat-message-content h2 { font-size: 1.25em; }
.analysis-chat-message-content h3 { font-size: 1.1em; }

.analysis-chat-message-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: var(--text-13, 13px);
  table-layout: fixed;
}

.analysis-chat-message-content th,
.analysis-chat-message-content td {
  border: 1px solid var(--color-gray-200, #e5e7eb);
  padding: 6px 10px;
  text-align: left;
}

.analysis-chat-message-content th {
  background: var(--color-gray-1300, #f9fafb);
  font-weight: 600;
}

.analysis-chat-message--user .analysis-chat-message-content {
  background: var(--color-indigo-600, #4f46e5);
  color: var(--color-white, #ffffff);
}

.analysis-chat-message--user .analysis-chat-message-content pre {
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-white, #ffffff);
}

.analysis-chat-message--user .analysis-chat-message-content code {
  color: var(--color-white, #ffffff);
}

.analysis-chat-message--user .analysis-chat-message-content blockquote {
  border-left-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.analysis-chat-message--user .analysis-chat-message-content th,
.analysis-chat-message--user .analysis-chat-message-content td {
  border-color: rgba(255, 255, 255, 0.2);
}

.analysis-chat-message--user .analysis-chat-message-content th {
  background: rgba(255, 255, 255, 0.1);
}

.analysis-chat-input-panel {
  border-top: 1px solid var(--color-gray-100, #f1f5f9);
  padding: var(--space-16, 16px);
  padding-top: 8px;
  background: var(--color-white, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analysis-chat-input-hint {
  font-size: var(--text-12, 12px);
  color: var(--color-gray-500, #6b7280);
}

.analysis-chat-input-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analysis-chat-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: flex-end;
}

.analysis-chat-input {
  width: 100%;
  padding: 10px var(--space-12, 12px);
  border-radius: var(--radius-12, 12px);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  font-size: var(--text-14, 14px);
  resize: none;
  background: var(--color-gray-1300, #f9fafb);
}

.analysis-chat-input:focus {
  outline: none;
  border-color: var(--color-primary-500, #667eea);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: var(--color-white, #ffffff);
}

.analysis-chat-send-btn {
  align-self: stretch;
  border-radius: 999px;
  font-size: var(--text-14, 14px);
}

.analysis-chat-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--color-indigo-50, #f3f4ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-indigo-600, #4f46e5);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.analysis-chat-icon-btn:hover {
  background: var(--color-indigo-100, #e0e7ff);
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
  transform: translateY(-1px);
}

.analysis-chat-icon-btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.analysis-chat-group-add-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-black, #000000);
  padding: 0;
}

.analysis-chat-sidebar {
  position: relative;
}

.analysis-chat-resizer {
  position: absolute;
  top: 0;
  right: -8px;
  width: 16px;
  height: 100%;
  cursor: col-resize;
  z-index: 100;
  background: transparent;
}

/* GroupMenu & SessionMenu Styles */
.analysis-chat-group-menu-fixed,
.analysis-chat-session-menu-fixed {
  background-color: var(--color-white, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-8, 8px);
  padding: var(--space-4, 4px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 2px);
  border: 1px solid var(--color-gray-200, #e2e8f0);
}

.analysis-chat-group-menu-fixed {
  width: 100px;
}

.analysis-chat-session-menu-fixed {
  width: 140px;
}

.analysis-chat-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
  padding: var(--space-6, 6px) var(--space-8, 8px);
  font-size: var(--text-12, 12px);
  color: var(--color-gray-700, #374151);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-4, 4px);
}

.analysis-chat-menu-item--danger {
  color: var(--color-red-500, #ef4444);
}

/* SessionList Component Styles */
.analysis-chat-session-title {
  display: flex;
  align-items: center;
}

.analysis-chat-session-pin {
  margin-right: var(--space-4, 4px);
  color: var(--color-blue-500, #3b82f6);
  flex-shrink: 0;
}

.analysis-chat-session-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-chat-session-more {
  color: var(--color-gray-400, #9ca3af);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2, 2px);
}

.analysis-chat-checkbox {
  pointer-events: none;
}

.analysis-chat-input-row {
  position: relative;
}

.analysis-chat-mention-menu {
  position: absolute;
  bottom: 100%;
  left: var(--space-12, 12px);
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-8, 8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--space-6, 6px);
  margin-bottom: var(--space-12, 12px);
  z-index: 50;
  min-width: 160px;
}

.analysis-chat-mention-header {
  padding: var(--space-4, 4px) var(--space-8, 8px);
  font-size: var(--text-12, 12px);
  color: var(--color-gray-400, #9ca3af);
  border-bottom: 1px solid var(--color-gray-50, #f3f4f6);
  margin-bottom: var(--space-4, 4px);
}

.analysis-chat-mention-option {
  padding: var(--space-8, 8px) var(--space-12, 12px);
  cursor: pointer;
  border-radius: var(--radius-4, 4px);
  color: var(--color-gray-700, #374151);
  font-size: var(--text-13, 13px);
  font-weight: 500;
  background: transparent;
}

.analysis-chat-mention-option--active {
  background: var(--color-gray-50, #f3f4f6);
}

/* ============================================
   Move To Group Modal Styles
   ============================================ */

.move-to-group-content {
  padding: var(--space-16, 16px) 0;
}

.move-to-group-select-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-12, 12px);
}

.move-to-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-10, 10px);
  background: var(--color-indigo-50, #eef2ff);
  color: var(--color-indigo-600, #4f46e5);
  flex-shrink: 0;
}

.move-to-group-select {
  flex: 1;
}

.move-to-group-select .rounded-select-trigger {
  height: 44px;
  padding: 0 var(--space-16, 16px);
  border-radius: var(--radius-12, 12px);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  background: var(--color-white, #ffffff);
  font-size: var(--text-14, 14px);
}

.move-to-group-select .rounded-select-trigger:hover {
  border-color: var(--color-indigo-300, #a5b4fc);
}

.move-to-group-select .rounded-select-trigger.open {
  border-color: var(--color-indigo-500, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.move-to-group-select .rounded-select-dropdown {
  border-radius: var(--radius-10, 10px);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  margin-top: var(--space-4, 4px);
}

.move-to-group-select .rounded-select-option {
  padding: var(--space-10, 10px) var(--space-16, 16px);
  font-size: var(--text-14, 14px);
  color: var(--color-gray-700, #374151);
}

.move-to-group-select .rounded-select-option:hover {
  background: var(--color-gray-50, #f9fafb);
}

.move-to-group-select .rounded-select-option.selected {
  background: var(--color-indigo-50, #eef2ff);
  color: var(--color-indigo-700, #4338ca);
  font-weight: 500;
}

/* ============================================
   Batch Operations Bar Styles
   ============================================ */

.analysis-chat-batch-bar {
  display: flex;
  flex-direction: column;
  padding: var(--space-12, 12px) var(--space-16, 16px);
  background: var(--color-white, #ffffff);
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  gap: var(--space-12, 12px);
}

/* 第一层：全选与取消 */
.analysis-chat-batch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12, 12px);
}

.analysis-chat-batch-select-all {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
  cursor: pointer;
  font-size: var(--text-14, 14px);
  color: var(--color-gray-700, #374151);
  user-select: none;
}

.analysis-chat-batch-select-all:hover {
  color: var(--color-indigo-600, #4f46e5);
}

.analysis-chat-batch-select-all input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-indigo-600, #4f46e5);
}

.analysis-chat-batch-cancel {
  padding: var(--space-4, 4px) var(--space-8, 8px);
  font-size: var(--text-13, 13px);
  color: var(--color-gray-500, #6b7280);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.analysis-chat-batch-cancel:hover {
  color: var(--color-gray-700, #374151);
}

/* 第二层：按钮区 */
.analysis-chat-batch-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
  width: 100%;
}

.analysis-chat-batch-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-6, 6px);
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-600, #475569);
  cursor: pointer;
  transition: all 0.2s ease;
}

.analysis-chat-batch-icon-btn:hover:not(:disabled) {
  background: var(--color-gray-200, #e5e7eb);
  color: var(--color-gray-800, #1e293b);
}

.analysis-chat-batch-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.analysis-chat-batch-icon-btn.danger {
  color: var(--color-gray-600, #475569);
}

.analysis-chat-batch-icon-btn.danger:hover:not(:disabled) {
  background: var(--color-gray-200, #e5e7eb);
  color: var(--color-gray-800, #1e293b);
}

/* ============================================
   Chat Message Copy Button Styles
   ============================================ */

.chat-message-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-12, 12px);
  padding-top: var(--space-8, 8px);
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.chat-message-copy-btn {
  display: flex;
  align-items: center;
  gap: var(--space-4, 4px);
  padding: var(--space-6, 6px) var(--space-12, 12px);
  font-size: var(--text-13, 13px);
  color: var(--color-gray-500, #6b7280);
  background: transparent;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-6, 6px);
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-message-copy-btn:hover {
  background: var(--color-gray-50, #f9fafb);
  color: var(--color-gray-700, #374151);
  border-color: var(--color-gray-300, #d1d5db);
}.feedback-layout__page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-24);
}

.feedback-layout__header-actions {
  display: flex;
  gap: var(--space-12);
}

.feedback-form {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-24);
}

.feedback-form__form-group {
  margin-bottom: var(--space-24);
}

.feedback-form__form-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
  font-weight: 500;
  color: var(--color-text-primary);
}

.feedback-form__radio-group {
  display: flex;
  gap: var(--space-24);
}

.feedback-form__radio-card {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-12);
  cursor: pointer;
  transition: var(--transition-base);
  flex: 1;
}

.feedback-form__radio-card:hover {
  border-color: var(--primary-color);
}

.feedback-form__radio-card--active {
  border-color: var(--primary-color);
  background-color: var(--primary-color-alpha);
}

.feedback-form__radio-input {
  display: none;
}

.feedback-form__radio-content {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.feedback-form__radio-icon {
  font-size: var(--text-24);
}

.feedback-form__radio-info {
  display: flex;
  flex-direction: column;
}

.feedback-form__radio-title {
  font-weight: 600;
  color: var(--color-text-primary);
}

.feedback-form__radio-desc {
  font-size: var(--text-13);
  color: var(--color-text-secondary);
}

.feedback-form__textarea-wrapper {
  position: relative;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-12);
  background-color: var(--color-white);
  transition: var(--transition-input);
}

.feedback-form__textarea-wrapper:focus-within {
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 var(--space-4) rgba(59, 130, 246, 0.1);
}

.feedback-form__textarea-wrapper--drag-over {
  border-color: var(--primary-color);
  background-color: var(--color-blue-100);
}

.feedback-form__input {
  width: 100%;
  padding: var(--space-12);
  border: none;
  background: transparent;
  resize: vertical;
  font-family: inherit;
  min-height: 150px;
}

.feedback-form__input:focus {
  outline: none;
  box-shadow: none;
}

.feedback-form__input-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  border-top: 1px solid var(--border-color);
  background-color: var(--color-gray-50);
  border-bottom-left-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
}

.feedback-form__action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  border: none;
  background: none;
  border-radius: var(--radius-4);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--text-13);
  transition: var(--transition-base);
}

.feedback-form__action-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--primary-color);
}

.feedback-form__upload-area {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.feedback-form__upload-hint {
  font-size: var(--text-12);
  color: var(--color-text-secondary);
}

.feedback-form__drag-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-8);
  z-index: 10;
}

.feedback-form__drag-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  color: var(--primary-color);
  font-weight: 500;
}

.feedback-form__char-count {
  text-align: right;
  font-size: var(--text-12);
  color: var(--color-text-secondary);
}

.feedback-form__attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.feedback-form__attachment-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-8);
  border: 1px solid var(--border-color);
  background-color: var(--color-gray-50);
  cursor: pointer;
  transition: var(--transition-base);
}

.feedback-form__attachment-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.feedback-form__attachment-preview {
  width: var(--space-40);
  height: var(--space-40);
  border-radius: var(--radius-8);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.feedback-form__attachment-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-form__pdf-icon {
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--color-red-500);
}

.feedback-form__attachment-info {
  flex: 1;
  min-width: 0;
}

.feedback-form__attachment-name {
  font-size: var(--text-14);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedback-form__attachment-size {
  font-size: var(--text-12);
  color: var(--color-text-secondary);
}

.feedback-form__remove-attachment {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--text-18);
  padding: var(--space-4);
  border-radius: var(--radius-4);
}

.feedback-form__remove-attachment:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.feedback-form__uploading-indicator {
  margin-top: var(--space-8);
  font-size: var(--text-13);
  color: var(--color-text-secondary);
}

.feedback-form__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.feedback-list {
  margin-top: var(--space-24);
}

.feedback-list__card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-16);
}

.feedback-list__feedback-card {
  position: relative;
}

.feedback-list__feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12);
}

.feedback-list__feedback-meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.feedback-list__feedback-date {
  font-size: var(--text-12);
  color: var(--color-text-secondary);
}

.feedback-list__feedback-content {
  font-size: var(--text-14);
  color: var(--color-text-primary);
  margin-bottom: var(--space-12);
  white-space: pre-wrap;
}

.feedback-list__attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.feedback-list__attachment-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-8);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition-base);
  background: var(--color-white);
}

.feedback-list__attachment-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  border-color: var(--primary-color);
}

.feedback-list__attachment-preview-box {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-8);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-50);
}

.feedback-list__attachment-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-list__pdf-icon-box {
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--color-red-500);
  background-color: var(--color-rose-500);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-4);
}

.feedback-list__attachment-name-tooltip {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: rgba(15, 23, 42, 0.9);
  color: var(--color-white);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-4);
  font-size: var(--text-11);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-base);
}

.feedback-list__attachment-thumb:hover .feedback-list__attachment-name-tooltip {
  opacity: 1;
}

.feedback-list__feedback-reply {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px dashed var(--border-color);
  font-size: var(--text-14);
}

.feedback-list__reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.feedback-list__reply-label {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.feedback-list__reply-date {
  font-size: var(--text-12);
  color: var(--color-text-secondary);
}

.feedback-list__reply-content {
  color: var(--color-text-primary);
  white-space: pre-wrap;
}

.feedback-list__status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-12);
  font-weight: 500;
}

.feedback-list__status-danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-800);
}

.feedback-list__status-success {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
}

.feedback-list__status-warning {
  background-color: var(--color-yellow-100);
  color: var(--color-yellow-800);
}

.feedback-list__empty-state {
  padding: var(--space-40) 0;
  text-align: center;
  color: var(--color-text-secondary);
}

.feedback-list__empty-icon {
  font-size: var(--text-32);
  margin-bottom: var(--space-8);
}

.feedback-list__loading-state {
  padding: var(--space-40) 0;
  text-align: center;
  color: var(--color-text-secondary);
}
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
}

.hero-pattern {
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, white 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, white 2px, transparent 2px);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

.hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-24, 24px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero-content {
  color: var(--color-white, white);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px var(--space-16, 16px);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-size: var(--text-12, 12px);
  font-weight: 500;
  margin-bottom: var(--space-24, 24px);
  backdrop-filter: blur(10px);
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-24, 24px);
  display: flex;
  flex-direction: column;
}

.hero-title-accent {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-title-accent--clickable {
  cursor: pointer;
}

.hero-subtitle {
  font-size: var(--text-20, 1.25rem);
  line-height: 1.6;
  margin-bottom: var(--space-32, 32px);
  opacity: 0.9;
  max-width: 500px;
}

.hero-stats {
  display: flex;
  gap: var(--space-32, 32px);
  margin-bottom: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: var(--text-32, 2rem);
  font-weight: 700;
  color: #ffd700;
  white-space: nowrap;
}

.hero-stats .stat-label {
  font-size: var(--text-14, 0.875rem);
  opacity: 1;
  color: var(--color-white, #ffffff);
}

.hero-actions {
  display: flex;
  gap: var(--space-16, 16px);
  align-items: center;
}

.btn-hero {
  padding: var(--space-16, 16px) var(--space-32, 32px);
  font-size: var(--text-18, 1.1rem);
  font-weight: 600;
  border-radius: var(--radius-12, 12px);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-base, all 0.3s ease);
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Hero Visual */
.hero-visual {
  position: relative;
  height: 500px;
}

.hero-image {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-20, 20px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating-card {
  position: absolute;
  background: var(--color-white, white);
  border-radius: var(--radius-12, 12px);
  padding: var(--space-16, 16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: var(--space-12, 12px);
  animation: float 6s ease-in-out infinite;
}

.floating-card.card-1 {
  top: 14%;
  left: 8%;
  animation-delay: 0s;
}

.floating-card.card-2 {
  top: 45%;
  right: 8%;
  animation-delay: 4s;
}

.floating-card.card-3 {
  bottom: 12%;
  left: 18%;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.card-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-1300, #f8fafc);
  border-radius: var(--radius-8, 8px);
  filter: brightness(1.2) saturate(1.5) contrast(1.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.card-content {
  flex: 1;
}

.card-title {
  font-weight: 600;
  color: var(--color-gray-900, #1a202c);
  margin-bottom: var(--space-4, 4px);
}

.card-subtitle {
  font-size: var(--text-14, 0.875rem);
  color: var(--color-gray-400, #64748b);
}

.progress-bar {
  width: 80px;
  height: 4px;
  background: var(--color-gray-1100, #e2e8f0);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600));
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Features Section */
.features-section {
  padding: 120px 0;
  background: var(--color-white, white);
}

.home-page .features-section .section-title {
  color: #ffd700;
  font-size: var(--text-52, 3.25rem);
}

.home-page .features-section .section-subtitle {
  color: var(--color-white, #ffffff);
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.section-title {
  font-size: var(--text-48, 3rem);
  font-weight: 700;
  color: var(--color-gray-900, #1a202c);
  margin-bottom: var(--space-16, 16px);
}

.section-subtitle {
  font-size: var(--text-20, 1.25rem);
  color: var(--color-gray-400, #64748b);
  max-width: 600px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-32, 32px);
}

.feature-card {
  background: var(--color-white, white);
  border-radius: var(--radius-16, 16px);
  padding: var(--space-32, 32px);
  text-align: center;
  border: 1px solid var(--color-gray-1100, #e2e8f0);
  transition: var(--transition-base, all 0.3s ease);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg, 0 20px 40px rgba(0, 0, 0, 0.1));
  border-color: var(--color-primary-500, #667eea);
}

.feature-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-24, 24px);
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  border-radius: var(--radius-20, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.feature-icon-wrapper::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--color-white, white);
  border-radius: var(--radius-18, 18px);
}

.feature-icon {
  font-size: 2rem;
  position: relative;
  z-index: 1;
}

.feature-title {
  font-size: var(--text-24, 1.5rem);
  font-weight: 600;
  color: var(--color-gray-900, #1a202c);
  margin-bottom: var(--space-16, 16px);
}

.feature-description {
  color: var(--color-gray-400, #64748b);
  line-height: 1.6;
  margin-bottom: var(--space-24, 24px);
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-500, #667eea);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-base, all 0.2s ease);
}

.feature-link:hover {
  color: var(--color-primary-600, #764ba2);
  gap: var(--space-12, 12px);
}

/* CTA Section */
.cta-section {
  padding: 120px 0;
  background: linear-gradient(135deg, var(--color-gray-900, #1a202c) 0%, var(--color-gray-800, #2d3748) 100%);
  color: var(--color-white, white);
  text-align: center;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-size: var(--text-48, 3rem);
  font-weight: 700;
  margin-bottom: var(--space-24, 24px);
  line-height: 1.2;
}

.cta-subtitle {
  font-size: var(--text-20, 1.25rem);
  opacity: 0.9;
  margin-bottom: 40px;
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16, 16px);
}

.cta-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16, 16px);
}

.btn-large {
  padding: var(--space-20, 20px) 40px;
  font-size: var(--text-20, 1.2rem);
  font-weight: 600;
  border-radius: var(--radius-12, 12px);
}

.cta-note {
  font-size: var(--text-14, 0.875rem);
  opacity: 0.7;
}

.cta-beian {
  font-size: var(--text-14, 0.875rem);
  color: var(--color-gray-400, #94a3b8);
  margin-top: var(--space-24, 24px);
  text-align: center;
}.login-container { display: flex; justify-content: center; align-items: center; width: var(--viewport-100); height: var(--viewport-height-100); background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%); background-size: cover; background-attachment: fixed; }
body.login-page .login-container { position: fixed; top: 0; left: 0; overflow: hidden; z-index: var(--z-login); }
.login-form { background: var(--color-white); padding: var(--space-40); border-radius: var(--radius-12); box-shadow: var(--shadow-login); width: var(--percent-90); max-width: var(--width-login-max); max-height: var(--height-95vh); overflow-y: auto; position: relative; }
.login-form-wide { max-width: var(--width-login-wide); }
.login-form h2 { text-align: center; margin-bottom: var(--space-50); color: var(--color-text-primary); font-size: var(--text-24); font-weight: 600; }
.form-group { margin-bottom: var(--space-24); }
.form-group label { display: block; margin-bottom: var(--space-8); font-weight: 500; color: var(--color-text-secondary); }
.form-group input, .form-group select { width: 100%; padding: var(--space-12); border: 2px solid var(--color-gray-300); border-radius: var(--radius-12); font-size: var(--text-14); transition: var(--transition-slow); }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--color-primary-500); }
.form-tips { background-color: var(--color-gray-50); border: 1px solid var(--color-gray-300); border-radius: var(--radius-6); padding: var(--space-12); margin-top: var(--space-8); margin-bottom: var(--space-24); }
.form-tips p { margin: 0; font-size: var(--text-12); color: var(--color-gray-600); line-height: 1.4; }
.form-tips p:not(:last-child) { margin-bottom: var(--space-4); }
.subjects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--width-subject-min), 1fr)); gap: var(--space-8); margin-top: var(--space-8); }
.checkbox-label { display: flex; align-items: center; font-weight: normal !important; cursor: pointer; padding: var(--space-8); border-radius: var(--radius-6); transition: var(--transition-base); }
.checkbox-label:hover { background-color: var(--color-gray-50); }
.checkbox-label input[type="checkbox"] { width: auto; margin-right: var(--space-8); }
.error-message { color: var(--color-error-500); background-color: var(--color-error-bg); padding: var(--space-12); border-radius: var(--radius-6); border-left: 4px solid var(--color-error-500); margin-bottom: var(--space-24); }
.form-actions { display: flex; gap: var(--space-12); margin-top: var(--space-24); }
.form-actions button { flex: 1; padding: var(--space-12) var(--space-24); border: none; border-radius: var(--radius-8); font-size: var(--text-14); font-weight: 500; cursor: pointer; transition: var(--transition-slow); }
.form-actions button[type="submit"] { background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%); color: var(--color-white); }
.form-actions button[type="submit"]:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.form-actions button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
.form-actions button[type="button"] { background: var(--color-gray-50); color: var(--color-text-tertiary); border: 2px solid var(--color-gray-300); }
.form-actions button[type="button"]:hover { background: var(--color-gray-900); border-color: var(--color-gray-1000); }
.form-links { margin-top: var(--space-12); display: flex; justify-content: center; gap: var(--space-16); font-size: var(--text-13); }
.form-links .link-button { background: none; border: none; padding: 0; color: var(--color-gray-700); cursor: pointer; }
.form-links .link-button:hover { color: var(--color-blue-600); text-decoration: underline; }

/* Tab switching for login modes */
.login-tabs { display: flex; gap: var(--space-8); margin-bottom: var(--space-24); background: var(--color-gray-50); border-radius: var(--radius-8); padding: var(--space-4); }
.login-tab { flex: 1; padding: var(--space-10) var(--space-16); border: none; background: transparent; border-radius: var(--radius-6); font-size: var(--text-14); font-weight: 500; color: var(--color-text-tertiary); cursor: pointer; transition: var(--transition-base); }
.login-tab:hover { color: var(--color-text-primary); }
.login-tab--active { background: var(--color-white); color: var(--color-primary-500); box-shadow: var(--shadow-sm); }

/* QR code display */
.login-qrcode { display: flex; flex-direction: column; align-items: center; padding: var(--space-24) 0; }
.login-qrcode__container { width: 200px; height: 200px; border: 2px solid var(--color-gray-300); border-radius: var(--radius-12); display: flex; align-items: center; justify-content: center; background: var(--color-white); margin-bottom: var(--space-16); }
.login-qrcode__container canvas { display: block; }
.login-qrcode__expired { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-error-500); }
.login-qrcode__expired svg { margin-bottom: var(--space-8); }
.login-qrcode__hint { font-size: var(--text-13); color: var(--color-text-secondary); text-align: center; margin-top: var(--space-8); }
.login-qrcode__refresh { margin-top: var(--space-12); padding: var(--space-8) var(--space-16); background: var(--color-primary-500); color: var(--color-white); border: none; border-radius: var(--radius-6); font-size: var(--text-13); cursor: pointer; transition: var(--transition-base); }
.login-qrcode__refresh:hover { background: var(--color-primary-600); }
.login-qrcode__status { font-size: var(--text-14); color: var(--color-text-secondary); margin-top: var(--space-8); }
.login-qrcode__status--success { color: var(--color-success-500); }

/* SMS code input */
.login-sms { display: flex; gap: var(--space-12); align-items: center; }
.login-sms__code-input { flex: 1; }
.login-sms__send-btn { padding: var(--space-12) var(--space-16); background: var(--color-primary-500); color: var(--color-white); border: none; border-radius: var(--radius-8); font-size: var(--text-14); cursor: pointer; transition: var(--transition-base); white-space: nowrap; min-width: 110px; }
.login-sms__send-btn:hover:not(:disabled) { background: var(--color-primary-600); }
.login-sms__send-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* SSO buttons */
.login-sso { margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--color-gray-300); }
.login-sso__title { font-size: var(--text-13); color: var(--color-text-tertiary); text-align: center; margin-bottom: var(--space-16); }
.login-sso__buttons { display: flex; justify-content: center; gap: var(--space-16); }
.login-sso__btn { width: 48px; height: 48px; border: 2px solid var(--color-gray-300); border-radius: var(--radius-8); background: var(--color-white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-base); }
.login-sso__btn:hover { border-color: var(--color-primary-500); transform: translateY(-2px); }
.login-sso__btn svg { width: 24px; height: 24px; }
.login-sso__btn--wechat { color: #07C160; }
.login-sso__btn--wechat:hover { border-color: #07C160; }
.login-sso__btn--alipay { color: #1677FF; }
.login-sso__btn--alipay:hover { border-color: #1677FF; }
.plan-page { padding: 8px 16px 12px 16px; height: calc(100vh - var(--app-header-height, 96px)); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: var(--color-white, #ffffff); border-radius: var(--radius-12, 12px); }
.plan-layout { display: grid; grid-template-columns: 2fr 8fr; gap: 15px; flex: 1; min-height: 0; height: 100%; position: relative; }

.plan-resizer { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 20; background: transparent; }

@media (max-width: 768px) {
  .plan-layout { display: flex; flex-direction: column; grid-template-columns: 1fr !important; }
  .plan-resizer { display: none; }
  .plan-tree { height: auto; }
  .plan-content { margin-top: 12px; }
}

.plan-tree { background: var(--color-white, #ffffff); border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-8); padding: 12px; height: 100%; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.plan-content { background: var(--color-white, #ffffff); border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-8); height: 100%; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 12px; }

.plan-tree__level { margin-bottom: 8px; }
.plan-tree__node { padding: 8px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.plan-tree__node-icon { display: inline-flex; align-items: center; margin-right: 6px; }
.plan-tree__node--grade { font-weight: 700; }
.plan-tree__node--semester { display: flex; align-items: center; justify-content: space-between; }
.plan-tree__node--exam { margin: 4px 0; display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
.plan-tree__node--selected { color: var(--primary-color, #3b82f6); font-weight: 700; text-decoration: none; }

.plan-tree__children { margin-left: 12px; }
.plan-tree__children--collapsed { display: none; }
.plan-tree__actions { display: none; gap: 8px; }
.plan-tree__node--semester:hover .plan-tree__actions { display: inline-flex; }
.plan-tree__exam-actions { display: none; gap: 6px; }
.plan-tree__node--exam:hover .plan-tree__exam-actions { display: inline-flex; }
.plan-tree__add-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.plan-input { flex: 1; border: 1px solid var(--primary-color, #3b82f6); border-radius: 6px; padding: 6px 8px; outline: none; }
.plan-input:focus { border-color: var(--primary-color, #3b82f6); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }

.btn-small { padding: 2px 8px; font-size: 12px; line-height: 1.4; height: auto; }
.plan-tree__actions .btn-small { height: calc(1em * 1.4 + 6px); }

/* 展开/收缩切换按钮 */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; padding: 0; border: none; background: transparent; color: var(--color-slate-500); border-radius: 4px; cursor: pointer; }
.icon-btn:hover { color: var(--color-gray-800, #1e293b); background: transparent !important; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.plan-tree__toggle { margin-right: 2px; }
.plan-tree__add-btn { margin-left: auto; display: none; }
.plan-tree__node--subject { display: flex; align-items: center; }
.plan-tree__node:hover .plan-tree__add-btn { display: inline-flex; }
.plan-tree__folder-actions { display: none; }
.plan-tree__node:hover .plan-tree__folder-actions { display: inline-flex; }
.plan-tree__node--folder .folder-icon { display: inline-flex; }
.plan-tree__node--folder .folder-name { display: inline-flex; }
.plan-tree__node--folder.drag-over { background: var(--color-gray-100, #f1f5f9); border-radius: 6px; }
.plan-tree__node--folder.dragging { opacity: 0.7; }
.plan-tree__node--folder { white-space: nowrap; }

/* 右侧区域占位 */
.plan-content__placeholder { padding: 16px; color: var(--color-slate-500); }
.plan-breadcrumb { display: flex; gap: 6px; align-items: center; margin-top: 8px; color: var(--color-gray-700, #334155); font-weight: 600; }
.plan-breadcrumb__sep { color: var(--color-gray-400, #94a3b8); }

/* 目标与计划右侧面板 */
.goal-plan-panel { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.goal-plan-panel__header { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--color-gray-1200, #e5e7eb); }
.goal-plan-panel__header h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--color-text-primary, #333); }
.goal-plan-panel__setting-btn { padding: 8px 16px; background: var(--primary-color, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.goal-plan-panel__setting-btn:hover { background: var(--color-blue-600, #2563eb); }
.goal-plan-panel__content { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; }

/* 隐藏滚动条，悬停时显示（仅在有溢出时出现） */
.plan-tree { scrollbar-width: none; }
.plan-tree:hover { scrollbar-width: thin; }
.plan-tree::-webkit-scrollbar { width: 0; height: 0; }
.plan-tree:hover::-webkit-scrollbar { width: 8px; height: 8px; }
.plan-tree::-webkit-scrollbar-thumb { background-color: var(--color-slate-300, #cbd5e1); border-radius: 8px; }
.plan-tree::-webkit-scrollbar-track { background: transparent; }

.plan-content { scrollbar-width: thin; overscroll-behavior: contain; }
.plan-content::-webkit-scrollbar { width: 8px; height: 8px; }
.plan-content::-webkit-scrollbar-thumb { background-color: var(--color-slate-300, #cbd5e1); border-radius: 8px; }
.plan-content::-webkit-scrollbar-track { background: transparent; }

.question-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
  gap: 16px;
  padding: 6px 0;
}
.question-set-card { border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 10px; background: var(--color-white, #fff); padding: 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); position: relative; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.question-set-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-gray-200, #e5e7eb); }
.question-set-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2, 6, 23, 0.10); }
.question-set-card:hover::before, .question-set-card:focus::before, .question-set-card:focus-within::before { background: var(--primary-color, #3b82f6); }
.question-set-card--selected::before { background: var(--primary-color, #3b82f6); }
.question-set-card__header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.question-set-card__header .header-left { display: flex; align-items: center; gap: 6px; color: var(--color-gray-500, #64748b); font-size: 12px; }
.question-set-card__header .header-right { display: flex; align-items: center; gap: 8px; }
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  color: var(--color-gray-700, #374151);
  background: var(--color-gray-50, #f8fafc);
  white-space: nowrap;
}
.badge-grade { background: var(--color-indigo-100, #eef2ff); color: var(--color-indigo-700, #4338ca); }
.badge-subject { background: var(--color-sky-100, #e0f2fe); color: var(--color-sky-800, #075985); }
.badge-status.draft { background: var(--color-orange-100, #fff7ed); color: var(--color-orange-800, #9a3412); }
.badge-status.active { background: var(--color-emerald-100, #ecfdf5); color: var(--color-emerald-700, #166534); }
.badge-status.archived { background: var(--color-gray-100, #f3f4f6); color: var(--color-gray-700, #374151); }
.question-set-card__titlebar { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.question-set-card__titlebar .titlebar-left { display: inline-flex; align-items: center; gap: 6px; }
.question-set-card__titlebar .titlebar-main { display: inline-flex; align-items: baseline; gap: 6px; }
.question-set-card__titlebar .set-type-text { color: var(--color-gray-500, #64748b); }
.question-set-card__titlebar .title-text { font-weight: 600; color: var(--color-gray-900, #111827); }
.question-set-card__titlebar .price-text { color: var(--color-teal-700, #0f766e); font-weight: 600; }
.question-set-card__titlebar .time-text { color: var(--color-gray-500, #64748b); display: block; width: 100%; margin-top: 4px; font-size: 11px; }
.question-set-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.question-set-card__main { display: flex; align-items: flex-start; gap: 10px; }
.notebook-excerpt { position: relative; height: 120px; border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 8px; background: repeating-linear-gradient(to bottom, var(--color-white, #ffffff) 0, var(--color-white, #ffffff) 26px, var(--color-gray-50, #f8fafc) 26px, var(--color-gray-50, #f8fafc) 27px); padding: 10px 12px 10px 42px; color: var(--color-gray-700, #374151); font-size: 13px; line-height: 1.7; overflow: hidden; }
.notebook-excerpt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; border-right: 1px solid var(--color-gray-200, #e5e7eb); background-image: linear-gradient(to bottom, var(--color-orange-50, #fff7ed) 0, var(--color-orange-100, #ffedd5) 100%), radial-gradient(circle at 12px 14px, var(--color-slate-300, #cbd5e1) 0 4px, transparent 5px); background-size: 100% 100%, 28px 28px; background-repeat: no-repeat, repeat-y; }
.notebook-excerpt.markdown-preview { padding: 10px 12px 10px 42px; font-size: 12px; line-height: 1.6; overflow: hidden; }
.notebook-excerpt.markdown-preview h1 { font-size: 16px; margin-top: 8px; margin-bottom: 6px; }
.notebook-excerpt.markdown-preview h2 { font-size: 14px; margin-top: 6px; margin-bottom: 4px; }
.notebook-excerpt.markdown-preview h3 { font-size: 13px; margin-top: 4px; margin-bottom: 4px; }
.notebook-excerpt.markdown-preview p { margin: 0 0 6px 0; }
.notebook-excerpt.markdown-preview ul,
.notebook-excerpt.markdown-preview ol { margin: 6px 0; padding-left: 18px; }
.notebook-excerpt.markdown-preview blockquote { margin: 6px 0; padding: 8px 10px; }
.notebook-excerpt.markdown-preview pre { margin: 8px 0; padding: 10px; font-size: 11px; }
.notebook-excerpt.markdown-preview code { font-size: 11px; }
.card-icon-btn.view { background: var(--color-amber-500, #f59e0b); color: var(--color-white, #fff); border-color: var(--color-amber-500, #f59e0b); }
.card-icon-btn.view:hover { background: var(--color-amber-600, #d97706); border-color: var(--color-amber-600, #d97706); }
.question-set-card .thumbnail { width: 90px; height: 120px; border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 8px; background: var(--color-gray-50, #f8fafc); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.question-set-card .thumbnail img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.question-set-card .thumbnail .thumbnail-placeholder { color: var(--color-gray-400, #94a3b8); font-size: 12px; }
.question-set-card__info { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-gray-700, #374151); }
.question-set-card__info-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.question-set-card__info-title { font-size: 14px; font-weight: 700; color: var(--primary-color, #033c97); }
.question-set-card__info-item { color: var(--color-amber-500, #eab308); }
.question-set-card__logo {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--color-blue-50, #eff6ff);
  color: var(--color-blue-700, #1d4ed8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.question-set-card .body-left {
  font-size: 12px;
  color: var(--color-gray-700, #374151);
  line-height: 1.6;
  min-height: 60px;
  max-height: 60px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.question-set-card .body-left.placeholder-text { color: var(--color-gray-400, #94a3b8); }
.question-set-card .body-left p { margin: 0 0 4px 0; }
.question-set-card .body-left img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; object-position: center center; cursor: zoom-in; filter: none; }
.question-set-card .body-actions { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.questions-page .question-set-card .body-actions.body-actions--right { justify-content: flex-end; }
.question-set-card .actions-left { display: flex; align-items: center; gap: 5px; }
.question-set-card .actions-right { display: flex; align-items: center; gap: 5px; }
.card-icon-btn { appearance: none; background: var(--color-slate-100, #f1f5f9); border: 1px solid var(--color-gray-200, #e5e7eb); color: var(--color-gray-600, #334155); padding: 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.card-icon-btn:hover { background: var(--color-slate-200, #e2e8f0); }
.card-icon-btn.ghost { background: transparent; border: 0; color: var(--color-gray-500, #64748b); }
.card-icon-btn.primary { background: var(--primary-color, #3b82f6); color: var(--color-white, #fff); border-color: var(--primary-color, #3b82f6); }
.card-icon-btn.primary:hover { background: var(--color-blue-600, #2563eb); border-color: var(--color-blue-600, #2563eb); }
.card-icon-btn.success { background: var(--color-emerald-500, #10b981); color: var(--color-white, #fff); border-color: var(--color-emerald-500, #10b981); }
.card-icon-btn.success:hover { background: var(--color-emerald-600, #059669); border-color: var(--color-emerald-600, #059669); }
.card-icon-btn.warning { background: var(--color-amber-500, #f59e0b); color: var(--color-white, #fff); border-color: var(--color-amber-500, #f59e0b); }
.card-icon-btn.warning:hover { background: var(--color-amber-600, #d97706); border-color: var(--color-amber-600, #d97706); }
.card-icon-btn.danger { background: var(--color-red-500, #ef4444); color: var(--color-white, #fff); border-color: var(--color-red-500, #ef4444); }
.card-icon-btn.danger:hover { background: var(--color-red-600, #dc2626); border-color: var(--color-red-600, #dc2626); }
.question-set-modal { max-width: 860px; width: 100%; background: var(--color-white, #fff); border-radius: 10px; }

/* 确认弹层样式（跟随按钮旁） */
.confirm-popover { position: fixed; background: var(--color-white, #fff); border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 8px; box-shadow: 0 8px 16px rgba(2,6,23,0.08); padding: 10px; z-index: 2000; }
.confirm-popover__row { display: flex; gap: 8px; align-items: center; color: var(--color-gray-600, #334155); font-size: 13px; }
.confirm-popover__text { white-space: normal; word-break: break-word; }
.confirm-popover__icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--color-red-600, #dc2626); }
.confirm-popover__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.btn.btn-xs { padding: 4px 8px; font-size: 12px; border-radius: 6px; }

/* 图片浏览弹窗 */
.image-viewer-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40px;
}

.image-viewer-modal {
  position: relative;
  background: transparent;
  border-radius: 8px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-viewer-modal__close {
  position: absolute;
  top: -36px;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-white, #fff);
  transition: background 0.2s;
}

.image-viewer-modal__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.image-viewer-modal__image {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.goal-plan-panel__content { scrollbar-width: thin; overscroll-behavior: contain; }
.goal-plan-panel__content::-webkit-scrollbar { width: 8px; height: 8px; }
.goal-plan-panel__content::-webkit-scrollbar-thumb { background-color: var(--color-slate-300, #cbd5e1); border-radius: 8px; }
.goal-plan-panel__content::-webkit-scrollbar-track { background: transparent; }
.goal-plan-panel__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--color-gray-500, #6b7280); }
.goal-plan-panel__placeholder-icon { font-size: 48px; margin-bottom: 16px; }

/* 格式化文档样式 */
.goal-plan-document { padding: 12px 24px 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.goal-plan-document__header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--color-gray-200, #e5e7eb); }
.goal-plan-document__header h1 { font-size: 24px; font-weight: 700; color: var(--color-text-primary, #333); margin: 0 0 8px 0; }
.goal-plan-document__meta { display: flex; gap: 16px; font-size: 14px; color: var(--color-gray-500, #6b7280); }
.goal-plan-document__section { margin-bottom: 24px; }
.goal-plan-document__section h2 { font-size: 18px; font-weight: 600; color: var(--color-gray-700, #374151); margin: 0 0 12px 0; }
.goal-plan-document__section h3 { font-size: 16px; font-weight: 600; color: var(--color-gray-600, #4b5563); margin: 12px 0 8px 0; }
.goal-plan-document__content { background: var(--color-gray-50, #f9fafb); padding: 16px; border-radius: 8px; border: 1px solid var(--color-gray-200, #e5e7eb); }

/* 选科显示 */
.subject-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.subject-tag { background: var(--primary-color, #3b82f6); color: var(--color-white, white); padding: 4px 12px; border-radius: 16px; font-size: 14px; font-weight: 500; }

/* 可选择的科目标签 */
.subject-tags--selectable { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.subject-tags--selectable .subject-tag {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-700, #374151);
  border: 1px solid var(--color-gray-300, #d1d5db);
  cursor: pointer;
  transition: all 0.2s ease;
}
.subject-tags--selectable .subject-tag:hover { background: var(--color-gray-200, #e5e7eb); }
.subject-tags--selectable .subject-tag.active {
  background: var(--primary-color, #3b82f6);
  color: var(--color-white, white);
  border-color: var(--primary-color, #3b82f6);
}
.subject-tag .subject-icon { margin-right: 4px; }

/* 成绩目标 */
.score-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1024px) {
  .score-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .score-targets { grid-template-columns: 1fr; }
}
.score-target { background: var(--color-white, white); padding: 16px; border-radius: 6px; border: 1px solid var(--color-gray-300, #d1d5db); }
.score-target h3 { color: var(--color-gray-800, #1f2937); margin: 0 0 8px 0; }
.score-target p { margin: 4px 0; color: var(--color-gray-700, #374151); }
.score-target p.positive { color: var(--color-emerald-600, #059669); }



.score-target p.negative { color: var(--color-red-600, #dc2626); }
.score-target p.zero { color: var(--color-gray-900, #111827); }
.university-list { margin: 8px 0; padding-left: 20px; }
.university-list li { color: var(--color-gray-500, #6b7280); margin: 2px 0; }

/* 学阶规划摘要 */
.grade-summary { background: var(--color-white, white); padding: 12px; border-radius: 6px; border: 1px solid var(--color-gray-300, #d1d5db); margin-bottom: 12px; }
.grade-summary h3 { color: var(--color-gray-800, #1f2937); margin: 0 0 8px 0; }
.grade-summary p { color: var(--color-gray-500, #6b7280); margin: 4px 0; }
.semester-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.semester-item { background: var(--color-gray-200, #e5e7eb); color: var(--color-gray-700, #374151); padding: 4px 8px; border-radius: 4px; font-size: 12px; }

/* 科目分组 */
.subject-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1024px) {
  .subject-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .subject-groups { grid-template-columns: 1fr; }
}
.subject-group { background: var(--color-white, white); padding: 16px; border-radius: 6px; border: 1px solid var(--color-gray-300, #d1d5db); }
.subject-group h3 { color: var(--color-gray-800, #1f2937); margin: 0 0 12px 0; }
.key-goals ul { margin: 8px 0; padding-left: 20px; }
.key-goals li { color: var(--color-gray-700, #374151); margin: 4px 0; }
.goal-description { color: var(--color-gray-500, #6b7280); font-size: 14px; }
.learning-plan { margin-top: 12px; }
.learning-plan p { color: var(--color-gray-700, #374151); line-height: 1.6; }

/* 学期成绩表格 */
.score-table { width: 100%; border-collapse: collapse; background: var(--color-white, white); border-radius: 6px; overflow: hidden; border: 1px solid var(--color-gray-300, #d1d5db); }
.score-table th { background: var(--color-gray-100, #f3f4f6); padding: 12px; text-align: left; font-weight: 600; color: var(--color-gray-700, #374151); border-bottom: 1px solid var(--color-gray-300, #d1d5db); }
.score-table td { padding: 12px; color: var(--color-gray-700, #374151); border-bottom: 1px solid var(--color-gray-200, #e5e7eb); }
.score-table td.positive { color: var(--color-emerald-600, #059669); }
.score-table td.negative { color: var(--color-red-600, #dc2626); }
.score-table td.zero { color: var(--color-gray-900, #111827); }
.score-table tr:last-child td { border-bottom: none; }
.positive { color: var(--color-emerald-600, #059669); font-weight: 600; }
.negative { color: var(--color-red-600, #dc2626); font-weight: 600; }
.zero { color: var(--color-gray-900, #111827); font-weight: 600; }
.total-score { margin-top: 16px; padding: 16px; background: var(--color-gray-100, #f3f4f6); border-radius: 6px; }
.total-score p { margin: 4px 0; font-weight: 600; }

/* 月考汇总卡片 */
.exam-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.exam-summary-card { background: var(--color-white, #fff); border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.exam-summary-header { font-weight: 600; color: var(--color-gray-800, #1f2937); }
.exam-summary-meta { font-size: 12px; color: var(--color-gray-500, #6b7280); }
.exam-summary-stats { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.exam-summary-stats .positive { color: var(--color-emerald-600, #059669); }
.exam-summary-stats .negative { color: var(--color-red-600, #dc2626); }
.exam-summary-stats .zero { color: var(--color-gray-900, #111827); }

/* 学习总结 */
.learning-summary { background: var(--color-white, white); padding: 16px; border-radius: 6px; border: 1px solid var(--color-gray-300, #d1d5db); }
.learning-summary p { color: var(--color-gray-700, #374151); line-height: 1.6; margin: 0; }
.learning-summary ul,
.learning-summary ol { margin: 0; padding-left: 1.25em; }
.learning-summary li { margin: 0; line-height: 1.6; }

/* 空字段显示 */
.empty-field { color: var(--color-gray-400, #9ca3af); font-style: italic; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--color-gray-300, #d1d5db); }

/* 节点信息 */
.node-info p { margin: 8px 0; color: var(--color-gray-700, #374151); }
.node-info strong { color: var(--color-gray-800, #1f2937); }

/* 功能说明 */
.function-description ul { margin: 8px 0; padding-left: 20px; }
.function-description li { color: var(--color-gray-500, #6b7280); margin: 4px 0; }

/* 模态框样式 */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: var(--color-white, white); border-radius: 12px; width: 90%; max-width: 800px; max-height: 90vh; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; }
.modal-content.modal-content--plan { overflow: visible; max-width: 800px; }
.modal-content.modal-content--plan .modal-body { max-height: none; overflow: visible; flex: 1; overflow-y: auto; }
.modal-content.modal-content--plan .modal-footer { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.modal-content.modal-content--plan .modal-header { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.modal-overlay { overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--color-gray-200, #e5e7eb); }
.modal-header h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--color-text-primary, #333); }
.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-gray-500, #6b7280); padding: 4px; }
.modal-close:hover { color: var(--color-gray-700, #374151); }
.modal-body { padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--color-gray-200, #e5e7eb); position: sticky; bottom: 0; background: var(--color-white, white); z-index: 10; }

/* 表单样式 */
.goal-setting-content { display: flex; flex-direction: column; gap: 24px; }
.form-section { background: var(--color-white, #ffffff); padding: 20px; border-radius: 8px; border: 1px solid var(--color-gray-200, #e5e7eb); }
.key-goal-form input { flex: 1; }

/* 学习记录卡片 */
.records-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 4px 0; }
.records-grid--compact { gap: 10px; }
.record-card { position: relative; background: var(--color-white, #ffffff); border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 10px; box-shadow: 0 2px 10px rgba(2, 6, 23, 0.06); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.record-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-gray-200, #e5e7eb); }
.record-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2, 6, 23, 0.10); }
.record-card:hover::before, .record-card:focus::before, .record-card:focus-within::before { background: var(--primary-color, #3b82f6); }
.record-card__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
.record-card__title { display: inline-flex; align-items: center; gap: 8px; }
.record-card__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px 12px; }
.record-card__footer { padding: 8px 12px; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #f8fafc; color: #475569; }
.tag--date { background: #f1f5f9; }
.tag--grade { background: rgba(238, 242, 255, 0.8); color: #4f46e5; }
.tag--subject { background: rgba(236, 254, 255, 0.8); color: #0891b2; }
.tag--strategy { background: rgba(255, 247, 237, 0.85); color: #c2410c; }
.tag--strategy.strategy-wrong_first { background: rgba(255, 237, 213, 0.9); color: #9a3412; border: 1px solid #fdba74; }
.tag--strategy.strategy-new_first { background: rgba(240, 253, 244, 0.9); color: #166534; border: 1px solid #86efac; }
.tag--strategy.strategy-random { background: rgba(239, 246, 255, 0.9); color: #1e3a8a; border: 1px solid #93c5fd; }
.tag--count { background: rgba(240, 253, 244, 0.85); color: #166534; }
.tag--study { background: rgba(224, 231, 255, 0.85); color: #3730a3; }
.accuracy { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 500; }
.accuracy.high { background: #ecfdf5; color: #065f46; border: 1px solid #86efac; }
.accuracy.medium { background: #f1f5f9; color: #1f2937; border: 1px solid #cbd5e1; }
.accuracy.low { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.key-goal-form .btn { margin-left: auto; }
.form-section h3 { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #374151; }
.form-section h4 { margin: 12px 0 8px 0; font-size: 14px; font-weight: 600; color: #4b5563; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 500; color: #374151; margin-bottom: 6px; }
.form-row--inline label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.form-row .admin-date-range { width: 100%; }
.form-row .admin-date-range-display { width: 100%; box-sizing: border-box; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

.subject-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.subject-checkbox { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; }
.subject-checkbox input { width: auto; }
.score-target-form, .subject-group-form, .semester-goal-form { background: white; padding: 16px; border-radius: 6px; border: 1px solid #d1d5db; margin-bottom: 16px; }
.subject-group-form { position: relative; }
.subject-checkboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.key-goal-form { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.subject-group-delete { position: absolute; top: 8px; right: 8px; }
.total-score-display { background: #ecfdf5; padding: 12px; border-radius: 6px; border: 1px solid #10b981; margin-top: 12px; }
.summary-textarea { min-height: 160px; resize: vertical; width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 10px; padding: 12px; font-size: 14px; }


.semester-goal-grid { display: grid !important; grid-template-columns: auto 1fr 1fr !important; gap: 12px; align-items: center; }
@media (max-width: 640px) { .semester-goal-grid { grid-template-columns: 1fr !important; } }
.semester-goal-grid select, .semester-goal-grid input { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.semester-goal-grid select:focus, .semester-goal-grid input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.semester-goal-grid > label { display: flex; align-items: center; gap: 8px; }
.semester-goal-grid > label > input, .semester-goal-grid > label > select { flex: 1; }
.subject-display { display: flex; align-items: center; }
.summary-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.required-star { color: #ef4444; margin-left: 4px; }

/* Flex Align Center - for Level2EditForm */
.flex-align-center { display: flex; align-items: center; gap: 8px; }
.flex-align-center input { flex: 1; }

/* Subject Icon Wrapper - for ScoreTable */
.subject-icon-wrapper { display: inline-flex; align-items: center; gap: 6px; }

/* 日期范围样式 */
.date-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.date-range input { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; width: 100%; }
.date-range input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.date-sep { color: #6b7280; }
.grid-span-2 { grid-column: 2 / span 2; }

/* 按钮样式 */
.btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.btn-primary { background: #3b82f6; color: white; }
.btn-primary:hover { background: #2563eb; }
.btn-secondary { background: #6b7280; color: white; }
.btn-secondary:hover { background: #4b5563; }
.btn-danger { background: #ef4444; color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-light {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  color: #374151;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(209, 213, 219, 0.5);
}
.btn-light:hover {
  background: linear-gradient(135deg, #d1d5db 0%, #cbd5e1 100%);
  color: #1f2937;
}
.btn-sm { padding: 4px 8px; font-size: 12px; }
.subject-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.subject-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; font-weight: 500; color: #374151; }
.subject-icon { font-size: 16px; }
.subject-tag--chinese { border-color: #c4b5fd; background: #f5f3ff; }
.subject-tag--math { border-color: #93c5fd; background: #eff6ff; }
.subject-tag--english { border-color: #86efac; background: #f0fdf4; }
.subject-tag--physics { border-color: #f0abfc; background: #fdf4ff; }
.subject-tag--chemistry { border-color: #fde68a; background: #fffbeb; }
.subject-tag--biology { border-color: #86efac; background: #f0fdf4; }
.subject-tag--history { border-color: #fca5a5; background: #fff1f2; }
.subject-tag--geography { border-color: #93c5fd; background: #eff6ff; }
.subject-tag--politics { border-color: #a8a29e; background: #f5f5f4; }
.tier-select { display: flex; flex-wrap: wrap; gap: 8px; }
.tier-chip { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; cursor: pointer; }
.tier-chip.active { background: #ede9fe; border-color: #a78bfa; color: #6b21a8; }
.score-target-display { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tier-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; }

/* ==================== 内联样式迁移 ==================== */

/* PlanRootNode */
.plan-tree__node-content { display: inline-flex; align-items: center; }
.plan-tree__node-icon-wrapper { margin-right: 6px; }

/* PlanGradeNode */
.plan-tree__node-main { display: inline-flex; align-items: center; }
.plan-tree__grade-icon-wrapper { margin-right: 6px; }

/* PlanLevel2Node */
.plan-tree__toggle--nested { margin-right: 2px; }
.plan-tree__level2-icon-wrapper { margin-right: 6px; }
.plan-tree__add-btn--level2 { margin-left: 8px; }

/* PlanLevel3Node */
.plan-tree__level3-icon-wrapper { margin-right: 6px; }

/* PanelHeader */
.panel-header__icon-wrapper { margin-right: 8px; }

/* Level1ScoreChart */
.level1-score-chart { width: 100%; height: 360px; }
.chart-legend { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; }
.chart-legend__series { display: flex; justify-content: center; gap: 16px; }
.chart-legend__tiers { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.chart-legend__item { display: flex; align-items: center; gap: 4px; }
.chart-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid; background-color: #fff; }
.chart-legend__line { display: inline-block; width: 12px; height: 0; border-top: 2px dashed; }
.chart-legend__label { color: #374151; }

/* Level3ScoreTable */
.score-table__trend--positive { color: #059669; }
.score-table__trend--negative { color: #dc2626; }
.score-table__trend--zero { color: #111827; }
.plugin-renderer__error {
  padding: 20px;
  color: red;
  text-align: center;
}

/* ReviewForm Toggle */
.review-form__toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  position: relative;
  padding: 0;
}

.review-form__toggle-knob {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.publisher-feedback-page {
  padding-bottom: var(--space-40, 40px);
}

/* 出版商反馈特有的状态样式 */
.publisher-feedback-page .status-badge {
  display: inline-block;
  padding: var(--space-2, 2px) var(--space-8, 8px);
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-12, 12px);
  font-weight: 500;
}

.publisher-feedback-page .status-success {
  background-color: var(--color-success-100, #dcfce7);
  color: var(--color-success-800, #166534);
}

.publisher-feedback-page .status-warning {
  background-color: var(--color-warning-100, #fef9c3);
  color: var(--color-warning-800, #854d0e);
}

.publisher-feedback-page .status-danger {
  background-color: var(--color-danger-100, #fee2e2);
  color: var(--color-danger-800, #b91c1c);
}

/* 出版商拖放上传区域 */
.publisher-feedback-page .feedback-dropzone {
  border: 1px dashed var(--color-gray-400, #9ca3af);
  border-radius: var(--radius-8, 8px);
  padding: var(--space-12, 12px) var(--space-16, 16px);
  font-size: var(--text-13, 13px);
  color: var(--color-slate-500, #64748b);
  cursor: pointer;
  background-color: var(--color-gray-50, #f9fafb);
  transition: var(--transition-base, all 0.2s ease);
}

.publisher-feedback-page .feedback-dropzone--active {
  border-color: var(--color-blue-500, #3b82f6);
  background-color: var(--color-blue-100, #dbeafe);
  color: var(--color-blue-800, #1e40af);
}

/* 出版商特有的反馈列表布局 */
.publisher-feedback-page .feedback-list-item {
  padding: var(--space-16, 16px);
  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
}

.publisher-feedback-page .feedback-list-item:last-child {
  border-bottom: none;
}
.questions-filters .filter-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16, 16px);
  align-items: center;
  width: 100%;
}

/* 学生题库、笔记本等使用 FilterToolbar 的页面：强制横向排布筛选控件 */
.filter-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 页面特定的 filter-toolbar 样式 - 扁平化选择器 */
.question-sets-page .filter-toolbar-row,
.notebooks-page .filter-toolbar-row,
.favoritebooks-page .filter-toolbar-row,
.wrong-questions-page .filter-toolbar-row,
.admin-aimodels-page .filter-toolbar-row,
.admin-users-page .filter-toolbar-row,
.admin-feedback-page .filter-toolbar-row,
.admin-operation-logs-page .filter-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 页面特定的 filter-toolbar-controls 样式 */
.filter-toolbar-controls {
  flex-wrap: nowrap;
}

.question-sets-page .filter-toolbar-controls,
.notebooks-page .filter-toolbar-controls,
.favoritebooks-page .filter-toolbar-controls,
.wrong-questions-page .filter-toolbar-controls,
.admin-aimodels-page .filter-toolbar-controls,
.admin-users-page .filter-toolbar-controls,
.admin-feedback-page .filter-toolbar-controls,
.admin-operation-logs-page .filter-toolbar-controls {
  flex-wrap: nowrap;
}

.questions-filters.admin-sets-page .filter-toolbar-controls {
  flex-wrap: wrap;
}

.questions-filters .filter-row.filter-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12, 12px);
}

.filter-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.filter-toolbar-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-direction: row-reverse;
}

.questions-filters.admin-sets-page .filter-toolbar-controls {
  flex-wrap: wrap;
}

/* 通用筛选器输入框样式 - 修复CURD页面输入框无样式问题 */
.questions-filters .search-input {
  padding: 10px var(--space-12, 12px);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-12, 12px);
  background-color: var(--color-white, #ffffff);
  color: var(--color-gray-900, #111827);
  font-size: var(--text-14, 14px);
  line-height: 20px;
  transition: var(--transition-base, all 0.2s ease);
  min-width: 240px;
}

.questions-filters .search-input:focus {
  outline: none;
  border-color: var(--color-primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.questions-filters .search-input::placeholder {
  color: var(--color-gray-400, #9ca3af);
}

/* 书目筛选控件样式统一为圆角输入风格 */
.source-dropdown-selector .source-input-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-12, 12px);
  background-color: var(--color-white, #ffffff);
  min-width: 220px;
  max-width: 320px;
}

.source-dropdown-selector .source-item {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-14, 14px);
  color: var(--color-gray-900, #111827);
}

.source-dropdown-selector .source-input {
  border: none;
  outline: none;
  flex: 1 1 auto;
  min-width: 80px;
  font-size: var(--text-14, 14px);
  line-height: 20px;
  background: transparent;
}

.source-dropdown-selector .source-input::placeholder {
  color: var(--color-gray-400, #9ca3af);
}

/* —— 笔记本页 & 学习记录页：恢复筛选容器的卡片化渲染 —— */
.notebooks-page .questions-filters,
.practice-records-page .questions-filters {
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-12, 12px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
  padding: var(--space-12, 12px);
  min-height: auto;
}

.notebooks-page .questions-filters:hover,
.practice-records-page .questions-filters:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.notebooks-page .questions-filters .filter-row,
.practice-records-page .questions-filters .filter-row {
  gap: var(--space-12, 12px);
  align-items: center;
}

.question-sets-page .questions-filters {
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-12, 12px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
  padding: var(--space-12, 12px);
  min-height: auto;
  width: 100%;
}

/* 学生端自录题库：固定筛选下拉的宽度，避免随选项长度抖动 */
.student-question-sets-page .rounded-select {
  min-width: 140px;
  max-width: 140px;
}

/* 学生笔记本页：固定筛选下拉宽度，避免随选项最长值变化 */
.notebooks-page .rounded-select {
  min-width: 140px;
  max-width: 140px;
}

/* 题库商城筛选器购物车按钮：与卡片上的一致，使用图标和角标 */
.questions-filters .btn-cart {
  box-shadow: none;
}

.question-sets-page .questions-filters:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.question-sets-page .questions-filters .filter-row {
  display: grid;
  justify-content: start;
  align-items: center;
  gap: var(--space-12, 12px);
  grid-auto-flow: column;
  width: 100%;
}

.question-sets-page .questions-filters .search-input {
  grid-column: auto;
  width: auto;
  min-width: 280px;
  max-width: 420px;
}

/* 学生端题库页面：类型和状态控件宽度与管理员端保持一致 */
.question-sets-page .rounded-select {
  min-width: 140px;
  max-width: 140px;
}

.questions-page .questions-filters--question-list .rounded-select {
  min-width: 140px;
  max-width: 140px;
}

.question-sets-page .multi-filter-group {
  width: 100%;
  min-width: 200px;
  max-width: 320px;
}

.questions-page .plan-tree .publisher-search-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-12, 12px);
  border: 1px solid var(--color-gray-1200, #e1e5e9);
  font-size: var(--text-13, 13px);
  background-color: var(--color-white, #ffffff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.questions-page .plan-tree .publisher-search-input:focus {
  outline: none;
  border-color: var(--color-primary-500, #667eea);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(15, 23, 42, 0.08);
  background-color: var(--color-white, #ffffff);
}

@media (max-width: 960px) {
  .question-sets-page .questions-filters .filter-row {
    grid-auto-flow: row;
  }
  .question-sets-page .questions-filters .search-input {
    width: 100%;
    max-width: none;
  }
}

.wrong-questions-page .questions-filters {
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-12, 12px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
  padding: var(--space-12, 12px);
  min-height: auto;
}

.wrong-questions-page .questions-filters:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.wrong-questions-page .questions-filters .filter-row:not(.filter-toolbar-row) {
  display: grid;
  justify-content: start;
  align-items: center;
  gap: var(--space-12, 12px);
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: none;
}

.wrong-questions-page .questions-filters .search-input {
  grid-column: auto;
  width: auto;
  min-width: 260px;
  max-width: 380px;
}

@media (max-width: 960px) {
  .wrong-questions-page .questions-filters .filter-row {
    grid-auto-flow: row;
  }
  .wrong-questions-page .questions-filters .search-input {
    width: 100%;
    max-width: none;
  }
}

.questions-filters.admin-sets-page .filter-row:not(.filter-toolbar-row) {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: var(--space-12, 12px);
  width: 100%;
  grid-template-columns: none;
}

.questions-filters.admin-sets-page .rounded-select {
  width: auto;
  min-width: 120px;
}

.questions-filters.admin-sets-page .search-input {
  min-width: 280px;
  max-width: 420px;
}

.questions-filters .btn {
  white-space: nowrap;
}

@media (max-width: 960px) {
  .questions-filters.admin-sets-page .filter-row {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
  .questions-filters.admin-sets-page .search-input {
    width: 100%;
    max-width: none;
  }
  .questions-filters.admin-sets-page .rounded-select {
    width: 100%;
  }
}

.admin-users-page .questions-filters .filter-row {
  grid-template-columns: auto 1fr;
}

.admin-users-page .questions-filters .search-input {
  width: auto;
  min-width: 260px;
  max-width: 360px;
}

@media (max-width: 960px) {
  .admin-users-page .questions-filters .search-input {
    width: 100%;
    max-width: none;
  }
}

.admin-feedback-page .questions-filters .search-input {
  width: auto;
  min-width: 260px;
  max-width: 360px;
}

@media (max-width: 960px) {
  .admin-feedback-page .questions-filters .search-input {
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 1200px) {
  .questions-filters .filter-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-12, 12px);
  }

  .questions-filters .search-input {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
}

@media (max-width: 768px) {
  .questions-filters .filter-row {
    grid-template-columns: 1fr;
    gap: var(--space-12, 12px);
  }

  .questions-filters .search-input,
  .questions-filters .filter-row select {
    padding: 10px var(--space-14, 14px);
    font-size: 16px; /* 防止iOS缩放 */
  }

  .questions-filters .filter-row select {
    padding-right: 36px;
    background-size: 14px;
    background-position: right 10px center;
  }
}

@media (max-width: 480px) {
  .questions-filters {
    padding: var(--space-12, 12px);
    margin-bottom: var(--space-12, 12px);
  }

  .questions-filters .filter-row {
    gap: 10px;
  }
}

/* 题库页临时模态覆盖层（仅此页使用） - 使用全局 modals.css */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24, 24px);
  z-index: 1000;
}

.modal {
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-12, 12px);
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.18), 0 8px 20px rgba(2, 6, 23, 0.12);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-body { background: var(--color-white, #ffffff); }

@media (max-width: 960px) {
  .questions-list .list-header,
  .question-item {
    grid-template-columns: 50px 1fr;
  }

  .question-stats,
  .question-actions {
    grid-column: 2;
    margin-top: var(--space-12, 12px);
  }

  .question-stats {
    display: flex;
    gap: var(--space-12, 12px);
    flex-wrap: wrap;
  }

  .stat-item {
    flex: 1;
    min-width: 120px;
  }
}

@media (max-width: 640px) {
  .questions-list .list-header,
  .question-item {
    grid-template-columns: 1fr;
    gap: var(--space-12, 12px);
  }

  .question-checkbox {
    position: absolute;
    top: var(--space-16, 16px);
    right: var(--space-16, 16px);
  }

  .question-item {
    position: relative;
    padding: 20px 50px 20px 20px;
  }

  .question-content,
  .question-stats,
  .question-actions {
    grid-column: 1;
  }

  .question-actions {
    justify-content: flex-start;
    margin-top: var(--space-16, 16px);
    padding-top: var(--space-16, 16px);
    border-top: 1px solid var(--color-gray-200, #e2e8f0);
  }

  .btn-sm {
    flex: 1;
    max-width: 120px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
}

@media (max-width: 640px) {
  .questions-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12, 12px);
  }
  .questions-filters .filter-group {
    width: 100%;
  }
  .questions-filters .filter-group select {
    flex: 1 1 45%;
    min-width: unset;
  }
}

.admin-settlements-page {
  margin-top: 8px;
}

.admin-settlements-body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-16, 16px);
  align-items: flex-start;
}

.admin-settlements-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-12, 12px);
}

.admin-settlements-summary {
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--color-gray-1200, #e5e7eb);
  border-radius: var(--radius-8, 8px);
  padding: 10px var(--space-12, 12px);
  background: var(--color-white, #ffffff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12, 12px);
}

.admin-settlements-summary-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16, 16px);
}

.admin-settlements-summary-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-12, 12px);
  margin-bottom: 0;
}

.admin-settlements-summary-grid {
  display: flex;
  flex-wrap: nowrap;
  margin-left: auto;
  justify-content: flex-end;
  gap: 8px;
  font-size: var(--text-13, 13px);
  color: var(--color-gray-700, #374151);
}

.summary-item {
  padding: 8px 10px;
  border-radius: var(--radius-6, 6px);
  background: var(--color-gray-50, #f9fafb);
  border: 1px solid var(--color-gray-200, #e5e7eb);
}

.summary-item__label {
  color: #000000;
  margin-bottom: 4px;
}

.summary-item__value {
  font-weight: 600;
  color: var(--color-gray-900, #111827);
}

.admin-settlements-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-settlements-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12, 12px);
  margin-bottom: 8px;
}

.admin-settlements-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.admin-settlements-filters .search-input {
  width: 200px;
}

.plan-page.settlements-page {
  height: calc(100vh - var(--app-header-height, 96px) - 100px);
}

@media (max-width: 1024px) {
  .admin-settlements-summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-settlements-summary-grid {
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px) {
  .settlements-layout.admin-settlements-body { grid-template-columns: 1fr; }
}

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  font-size: var(--text-14, 14px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-gray-100, #f5f5f5);
  color: var(--color-gray-800, #333);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.questions-page {
  padding: var(--space-24, 24px);
  width: 100%;
  max-width: none;
  margin: 0; /* 让列表容器完全适应屏幕宽度 */
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-12, 12px);
}

/* 题库左右布局 */
.questions-layout { display: grid; grid-template-columns: 280px 1fr; gap: 15px; align-items: start; }
.questions-layout .plan-tree { background: var(--color-white, #fff); border: 1px solid var(--color-gray-1200, #e5e7eb); border-radius: var(--radius-12, 12px); padding: var(--space-12, 12px); overflow-y: auto; max-height: calc(100vh - var(--app-header-height, 96px) - 24px); }
.questions-content { display: flex; flex-direction: column; min-height: 0; }
.plan-tree__node { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--color-text-primary, #333); }
.plan-tree__node:hover { background: var(--color-gray-1000, #f1f5f9); }
.plan-tree__node--selected { color: var(--primary-color, #3b82f6); font-weight: 700; background: var(--color-blue-100, #eef2ff); }
.questions-layout .plan-tree__children { margin-left: 0; padding-left: calc(1em + 7px); border-left: none; }
.plan-tree__toggle { margin-left: 0; margin-right: 2px; border: none; background: transparent; color: var(--color-gray-400, #64748b); cursor: pointer; }
.plan-tree__toggle:hover { background: transparent; }
.plan-tree__node--grade { gap: 4px; }
.plan-tree__node--folder.drag-over { background: var(--color-gray-1000, #f1f5f9); border-radius: 8px; }
@media (max-width: 1024px) { .questions-layout { grid-template-columns: 1fr; } .questions-tree { max-height: none; } }

/* 管理员页面统一纯白背景 */
.admin-users-page {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-12, 12px);
}

.admin-users-page .questions-filters {
  margin-top: 4px;
  margin-bottom: var(--space-12, 12px);
}

.admin-users-page .data-table {
  margin-top: var(--space-12, 12px);
  margin-bottom: var(--space-16, 16px);
}

.admin-aimodels-page {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-12, 12px);
}

/* 设置页内嵌的 AI 模型卡片复用外层 content-card 间距 */
.admin-settings-page .content-card .admin-aimodels-page {
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
}

.questions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16, 16px);
}

.questions-header h1 {
  font-size: var(--text-22, 22px);
  font-weight: 600;
  color: #000000;
  margin: 0;
}

.questions-header .header-actions {
  display: flex;
  gap: var(--space-12, 12px);
}

.questions-filters {
  background: transparent;
  border: none;
  border-radius: var(--radius-16, 16px);
  padding: 6px var(--space-12, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12, 12px);
  flex-wrap: wrap;
  margin-bottom: 4px;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
  min-height: 0;
}

/* 题目列表页：保留更大的筛选区留白 */
.questions-filters.questions-filters--question-list {
  padding: var(--space-20, 20px);
  gap: var(--space-16, 16px);
  margin-bottom: 10px;
  min-height: 72px;
}

.questions-filters:hover {
  box-shadow: none;
}

.questions-filters .search-box {
  flex: 1 1 300px;
}

.questions-filters .search-box input {
  width: 100%;
  padding: 10px var(--space-12, 12px);
  border: 1px solid var(--color-gray-1200, #e1e5e9);
  border-radius: var(--radius-8, 8px);
  font-size: var(--text-14, 14px);
}

.questions-filters .filter-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.questions-filters .filter-group select {
  padding: 10px var(--space-12, 12px);
  border: 1px solid var(--color-gray-1200, #e1e5e9);
  border-radius: var(--radius-8, 8px);
  background: var(--color-white, #fff);
  font-size: var(--text-14, 14px);
  min-width: 140px;
}

.questions-filters .sort-order-btn {
  padding: 10px 14px;
  border: 1px solid var(--color-gray-1200, #e1e5e9);
  border-radius: var(--radius-8, 8px);
  background: var(--color-gray-1300, #f8f9fa);
  cursor: pointer;
}

.bulk-actions {
  background: var(--color-amber-100, #fff7e6);
  border: 1px solid var(--color-amber-200, #ffe58f);
  border-radius: var(--radius-8, 8px);
  padding: var(--space-12, 12px) var(--space-16, 16px);
  margin: var(--space-12, 12px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bulk-actions .bulk-buttons {
  display: flex;
  gap: 8px;
}

.questions-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16, 16px);
  margin: var(--space-16, 16px) 0;
  justify-content: flex-start;
  align-items: stretch;
}

.questions-stats .stat-item {
  background: linear-gradient(135deg, var(--color-white, #fff) 0%, var(--color-gray-1300, #f8fafc) 100%);
  border: 1px solid var(--color-gray-1100, #e2e8f0);
  border-radius: var(--radius-12, 12px);
  padding: var(--space-16, 16px) var(--space-20, 20px);
  text-align: center;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
  transition: var(--transition-base, all 0.2s ease);
  min-width: 120px;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.questions-stats .stat-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
  border-color: var(--color-blue-500, #3b82f6);
}

.questions-stats .stat-item .stat-label {
  color: var(--color-gray-400, #64748b);
  font-size: var(--text-13, 13px);
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
  white-space: nowrap;
}

.questions-stats .stat-item .stat-value {
  font-weight: 700;
  color: var(--color-gray-700, #1e293b);
  font-size: var(--text-20, 20px);
  line-height: 1.2;
}

.questions-list {
  margin-top: 10px;
}

/* 题库详情页题目列表：让筛选器与表格左右对齐，并将垂直空间压缩约一半 */
.questions-page .content-card {
  padding-top: 10px;
  padding-bottom: var(--space-12, 12px);
}

.questions-page .questions-filters.questions-filters--question-list {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 0 6px 0;
  margin-bottom: 8px;
  min-height: 48px;
}

.questions-page .questions-filters.questions-filters--question-list .filter-row.filter-toolbar-row {
  padding: 0;
}

.questions-page .questions-filters.questions-filters--question-list + .bulk-actions {
  margin-top: 6px;
}

.questions-page .questions-list {
  margin-top: 8px;
}

.questions-list .list-header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 120px 160px;
  gap: var(--space-16, 16px);
  align-items: center;
  padding: var(--space-16, 16px) var(--space-20, 20px);
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  color: var(--color-white, white);
  border-radius: var(--radius-12, 12px);
  font-size: var(--text-14, 14px);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  margin-bottom: 8px;
}

.question-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 120px 160px;
  gap: var(--space-16, 16px);
  align-items: start;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-16, 16px);
  padding: var(--space-20, 20px);
  margin-bottom: var(--space-16, 16px);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.08));
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.question-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-gray-1200, #e5e7eb);
  opacity: 1;
  transition: background 0.3s ease;
}

.question-item:hover {
  box-shadow: var(--shadow-md, 0 8px 25px rgba(0, 0, 0, 0.12));
  border-color: var(--color-indigo-200, #c7d2fe);
}

.question-item:hover::before {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}

.question-item.selected {
  border-color: var(--color-primary-500);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.25);
  background: linear-gradient(135deg, var(--color-blue-50, #f8faff) 0%, var(--color-gray-1000, #f1f5f9) 100%);
}

.question-item.selected::before {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}

.question-item.preview-open::before {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}
.question-item.preview-open {
  border-color: var(--color-indigo-200, #c7d2fe);
  box-shadow: var(--shadow-md, 0 8px 25px rgba(0, 0, 0, 0.12));
}

/* 稳定题库页头部按钮尺寸，避免预览时抖动 */
.questions-header .btn {
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
}
.questions-header .btn-primary:hover,
.questions-header .btn-secondary:hover,
.questions-header .btn-danger:hover {
  transform: none;
  box-shadow: none;
}

.questions-list .question-item .question-content {
  padding: 8px var(--space-12, 12px);
  min-width: 0;
}

.questions-list .question-item .question-content .question-header {
  display: flex !important;
  gap: 15px !important;
  row-gap: var(--space-12, 12px) !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: var(--space-12, 12px);
  flex-wrap: wrap !important;
}

.question-subject {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.question-type {
  background: linear-gradient(135deg, var(--color-cyan-500, #06b6d4) 0%, var(--color-cyan-600, #0891b2) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.question-difficulty {
  background: linear-gradient(135deg, var(--color-amber-500, #f59e0b) 0%, var(--color-amber-600, #d97706) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.question-grade {
  background: linear-gradient(135deg, var(--color-emerald-500, #10b981) 0%, var(--color-emerald-600, #059669) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.status-badge {
  color: var(--color-white, #fff);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.status-badge.enabled {
  background-color: #10b981;
  color: #ffffff;
}

.status-badge.disabled {
  background-color: #6b7280;
  color: #ffffff;
}

/* 题目来源标签样式 - 统一风格 */
.question-source {
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* 平台自营 - 紫色系 */
.source-platform {
  background: linear-gradient(135deg, var(--color-purple-500, #8b5cf6) 0%, var(--color-purple-600, #7c3aed) 100%);
  color: var(--color-white, white);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* 我的题目/我的题库 - 蓝色系 */
.source-mine {
  background: linear-gradient(135deg, var(--color-blue-500, #3b82f6) 0%, var(--color-blue-600, #2563eb) 100%);
  color: var(--color-white, white);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* 出版商标签 - 橙色系 */
.source-publisher {
  background: linear-gradient(135deg, var(--color-orange-500, #f97316) 0%, var(--color-orange-600, #ea580c) 100%);
  color: var(--color-white, white);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

/* 学生题目 - 青色系 */
.source-student {
  background: linear-gradient(135deg, var(--color-teal-500, #14b8a6) 0%, var(--color-teal-600, #0d9488) 100%);
  color: var(--color-white, white);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}

/* 旧类名兼容 - 映射到新样式 */
.admin-question {
  background: linear-gradient(135deg, var(--color-purple-500, #8b5cf6) 0%, var(--color-purple-600, #7c3aed) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.my-question {
  background: linear-gradient(135deg, var(--color-blue-500, #3b82f6) 0%, var(--color-blue-600, #2563eb) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.student-question {
  background: linear-gradient(135deg, var(--color-teal-500, #14b8a6) 0%, var(--color-teal-600, #0d9488) 100%);
  color: var(--color-white, white);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  font-size: var(--text-12, 12px);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}

.question-text {
  color: var(--color-gray-700, #1f2937);
  font-size: var(--text-15, 15px);
  line-height: 1.7;
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-10, 10px);
  border: 1px solid var(--color-gray-1200, #e5e7eb);
  box-shadow: none;
}

.question-text .katex {
  font-size: 1.05em;
}

.question-text .katex-display {
  margin: 10px 0;
  text-align: center;
}

.question-meta {
  display: flex;
  gap: var(--space-16, 16px);
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  color: var(--color-gray-400, #64748b);
  font-size: var(--text-13, 13px);
  margin-top: var(--space-12, 12px);
  padding-top: var(--space-12, 12px);
  border-top: 1px solid var(--color-gray-1100, #e2e8f0);
}

.questions-list .question-item .question-tags {
  display: flex !important;
  gap: var(--space-12, 12px) !important;
  row-gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 8px var(--space-12, 12px);
}

.question-tags .tag {
  background: linear-gradient(135deg, var(--color-gray-100, #f3f4f6) 0%, var(--color-gray-200, #e5e7eb) 100%);
  color: var(--color-gray-700, #374151);
  padding: 6px var(--space-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-size: var(--text-12, 12px);
  font-weight: 500;
  border: 1px solid var(--color-gray-300, #d1d5db);
  transition: var(--transition-base, all 0.2s ease);
}

.question-tags .tag:hover {
  background: linear-gradient(135deg, var(--color-gray-200, #e5e7eb) 0%, var(--color-gray-300, #d1d5db) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 10px var(--space-12, 12px);
  background: linear-gradient(135deg, var(--color-gray-1300, #f8fafc) 0%, var(--color-gray-1000, #f1f5f9) 100%);
  border-radius: var(--radius-12, 12px);
  border: 1px solid var(--color-gray-1100, #e2e8f0);
  min-width: 0;
}


.question-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap; /* 强制不换行 */
  row-gap: 8px;
}

.question-actions .btn-sm {
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.btn-sm {
  padding: 8px var(--space-16, 16px);
  font-size: var(--text-12, 12px);
  border-radius: var(--radius-20, 20px);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--transition-base, all 0.3s ease);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-success {
  background: linear-gradient(135deg, var(--color-emerald-500, #10b981) 0%, var(--color-emerald-600, #059669) 100%);
  color: var(--color-white, #fff);
}

.btn-success:hover {
  background: linear-gradient(135deg, var(--color-emerald-600, #059669) 0%, var(--color-emerald-700, #047857) 100%);
}

.btn-warning {
  background: linear-gradient(135deg, var(--color-amber-500, #f59e0b) 0%, var(--color-amber-600, #d97706) 100%);
  color: var(--color-white, #fff);
}

.btn-warning:hover {
  background: linear-gradient(135deg, var(--color-amber-600, #d97706) 0%, var(--color-amber-700, #b45309) 100%);
}

.btn-danger {
  background: linear-gradient(135deg, var(--color-red-500, #ef4444) 0%, var(--color-red-600, #dc2626) 100%);
  color: var(--color-white, #fff);
}

.btn-danger:hover {
  background: linear-gradient(135deg, var(--color-red-600, #dc2626) 0%, var(--color-red-700, #b91c1c) 100%);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-blue-500, #3b82f6) 0%, var(--color-blue-600, #2563eb) 100%);
  color: var(--color-white, #fff);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-blue-600, #2563eb) 0%, var(--color-blue-700, #1d4ed8) 100%);
}

.status-select {
  padding: 8px 10px;
  border: 1px solid var(--color-gray-1200, #e1e5e9);
  border-radius: var(--radius-8, 8px);
  font-size: var(--text-12, 12px);
  background: var(--color-white, #fff);
}

/* =========================
   题目预览弹窗样式
   ========================= */

/* 题目预览弹窗容器 */
.question-preview-modal {
  max-width: 800px;
  width: 90vw;
}

/* 元信息区域 */
.question-preview-modal .question-meta {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--color-gray-50, #f9fafb);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
}

.question-preview-modal .meta-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.question-preview-modal .meta-row:last-child {
  margin-bottom: 0;
}

.question-preview-modal .meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.question-preview-modal .meta-label {
  color: #000000;
  font-size: var(--text-13, 13px);
}

.question-preview-modal .meta-value {
  color: #000000;
  font-size: var(--text-13, 13px);
  font-weight: 500;
}

.question-preview-modal .meta-placeholder {
  color: var(--color-gray-400, #9ca3af);
  font-size: var(--text-13, 13px);
}

/* 关闭按钮样式 - 无边框 */
.question-preview-modal .close-btn {
  border: none;
  background: transparent;
  color: var(--color-gray-500, #6b7280);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s ease;
}

.question-preview-modal .close-btn:hover {
  color: var(--color-gray-700, #374151);
}

/* 题目内容区域 */
.question-preview-modal .question-content-section {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
}

.question-preview-modal .question-content-section h4,
.question-preview-modal .question-options h4,
.question-preview-modal .answer-section h4,
.question-preview-modal .question-explanation h4,
.question-preview-modal .video-section h4,
.question-preview-modal .question-tags h4 {
  margin: 0 0 12px 0;
  font-size: var(--text-14, 14px);
  font-weight: 600;
  color: #000000;
}

/* 选项区域 */
.question-preview-modal .question-options {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
}

.question-preview-modal .options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-preview-modal .option-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color-gray-50, #f9fafb);
}

.question-preview-modal .option-row__label {
  font-weight: 600;
  color: #000000;
  min-width: 24px;
}

.question-preview-modal .option-row__content {
  flex: 1;
}

.question-preview-modal .option-row__tail {
  color: var(--color-green-600, #16a34a);
}

.question-preview-modal .icon-check {
  font-size: 16px;
}

/* 英语题组预览 */
.question-preview-modal .english-group-preview {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
}

.question-preview-modal .preview-option-item {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--color-gray-50, #f9fafb);
  border-radius: 6px;
}

.question-preview-modal .preview-option-item:last-child {
  margin-bottom: 0;
}

.question-preview-modal .preview-option-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #000000;
}

.question-preview-modal .preview-prompt-box {
  padding: 12px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 6px;
  margin-bottom: 8px;
}

.question-preview-modal .preview-answer-section {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 6px;
}

.question-preview-modal .preview-answer-label {
  font-weight: 600;
  color: #000000;
}

.question-preview-modal .preview-answer-box {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 12px;
  background: var(--color-green-100, #dcfce7);
  color: var(--color-green-800, #166534);
  border-radius: 4px;
  font-weight: 500;
}

.question-preview-modal .preview-explanation-box {
  margin-top: 8px;
  padding: 12px;
  background: var(--color-amber-50, #fffbeb);
  border: 1px solid var(--color-amber-200, #fde68a);
  border-radius: 6px;
}

/* 答案区域 */
.question-preview-modal .answer-section {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
}

.question-preview-modal .answer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.question-preview-modal .answer-badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-green-100, #dcfce7);
  color: var(--color-green-800, #166534);
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--text-14, 14px);
}

.question-preview-modal .answer-text {
  padding: 12px;
  background: transparent;
  border-radius: 6px;
}

.question-preview-modal .answer-text .markdown-preview {
  background: transparent;
}

/* 解析区域 */
.question-preview-modal .question-explanation {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-amber-50, #fffbeb);
  border: 1px solid var(--color-amber-200, #fde68a);
  border-radius: 8px;
}

.question-preview-modal .explanation-content {
  line-height: 1.8;
  background: transparent;
}

.question-preview-modal .explanation-content .markdown-preview {
  background: transparent;
}

.question-preview-modal .explanation-placeholder {
  color: var(--color-gray-400, #9ca3af);
  font-style: italic;
  padding: 12px;
  text-align: center;
}

/* 视频区域 */
.question-preview-modal .video-section {
  margin-bottom: 16px;
}

.question-preview-modal .video-container {
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--color-gray-200, #e5e7eb);
}

.question-preview-modal .video-player {
  width: 100%;
  max-height: 360px;
  display: block;
}

/* 标签区域 */
.question-preview-modal .question-tags {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
}

.question-preview-modal .tags-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.question-preview-modal .tag-item {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-gray-100, #f3f4f6);
  color: #000000;
  border-radius: 12px;
  font-size: var(--text-12, 12px);
  font-weight: 500;
}

.question-preview-modal .tag-item.tag-source {
  background: var(--color-indigo-100, #e0e7ff);
  color: #000000;
}

/* 题目信息区域 */
.question-preview-modal .question-info {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--color-gray-50, #f9fafb);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
}

.question-preview-modal .info-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.question-preview-modal .info-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.question-preview-modal .info-label {
  color: #000000;
  font-size: var(--text-13, 13px);
}

.question-preview-modal .info-value {
  color: #000000;
  font-size: var(--text-13, 13px);
}.admin-setup-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.active-badge {
  font-size: var(--text-12);
  color: var(--color-success-800);
}

.form-group-flex-center {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.form-label-no-margin {
  margin-bottom: 0;
}

.settings-subtitle {
  margin: var(--space-12) 0 var(--space-8);
  font-size: var(--text-14);
  color: var(--color-slate-500);
  font-weight: var(--font-medium);
}

.form-grid-3cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-8);
}

.form-grid-2col-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-12);
}

.form-group .form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-13);
}

.form-checkbox-label-wide {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-13);
}

.help-text-error {
  margin-top: var(--space-8);
  color: var(--color-danger-800);
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-6);
  border: none;
  cursor: pointer;
  font-size: var(--text-14);
  font-weight: 500;
  transition: var(--transition-base);
}

.mode-badge--active {
  background: var(--color-blue-600);
  color: var(--color-white);
}

.mode-badge--inactive {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

.settings-actions-flex {
  display: flex;
  gap: var(--space-8);
}

.settings-actions-group {
  display: flex;
  gap: var(--space-8);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.settings-card-mt-16 {
  margin-top: var(--space-16);
}

.settings-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-24);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-gray-200);
}

.form-checkbox-label-large {
  font-size: var(--text-16);
  font-weight: 600;
  cursor: pointer;
}

.checkbox-grid-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}

.checkbox-grid-row input[type="checkbox"] {
  grid-row: 1;
  grid-column: 1;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checkbox-grid-label {
  grid-row: 1;
  grid-column: 2;
  font-size: var(--text-13);
  font-weight: 500;
  cursor: pointer;
}

.checkbox-grid-help {
  grid-row: 2;
  grid-column: 2;
  font-size: 12px;
  color: #6b7280;
}

.checkbox-grid-header {
  grid-template-columns: auto 1fr auto;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-16);
}

.checkbox-grid-header .checkbox-grid-label {
  font-size: var(--text-16);
  font-weight: 600;
}

.checkbox-grid-header .active-badge {
  grid-row: 1;
  grid-column: 3;
}.strategy-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.strategy-option__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.strategy-option__icon--wrong_first {
  background-color: var(--color-indigo-100, #eef2ff);
  color: var(--color-indigo-700, #4f46e5);
}

.strategy-option__icon--note_first {
  background-color: var(--color-yellow-100);
  color: var(--color-amber-500);
}

.strategy-option__icon--favorite_first {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
}

.strategy-option__icon--new_first {
  background-color: #ecfdf3;
  color: var(--color-success-800);
}

.strategy-option__icon--random {
  background-color: var(--color-info-100);
  color: var(--color-sky-600);
}

.strategy-option__icon--confirm-wrong {
  color: var(--color-red-500);
}

.strategy-option__icon--confirm-note {
  color: var(--color-amber-500);
}

.strategy-option__icon--confirm-new {
  color: var(--color-blue-500);
}

.strategy-option__icon--confirm-random {
  color: var(--color-purple-500);
}.sso-callback-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100, #f5f5f5);
  padding: var(--space-24, 24px);
}

.sso-callback-card {
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-12, 12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: var(--space-40, 40px) var(--space-32, 32px);
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.sso-callback-card--error {
  border-top: 4px solid var(--color-error, #ef4444);
}

.sso-callback-card--success {
  border-top: 4px solid var(--color-success, #22c55e);
}

.sso-callback__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-gray-200, #e5e7eb);
  border-top-color: var(--color-primary-500, #3b82f6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--space-16, 16px);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.sso-callback__icon {
  color: var(--color-gray-400, #9ca3af);
  margin-bottom: var(--space-16, 16px);
}

.sso-callback-card--error .sso-callback__icon {
  color: var(--color-error, #ef4444);
}

.sso-callback-card--success .sso-callback__icon {
  color: var(--color-success, #22c55e);
}

.sso-callback__text {
  font-size: var(--text-16, 16px);
  color: var(--color-text-primary, #111827);
  margin: 0 0 var(--space-24, 24px);
}

.sso-callback__text--error {
  color: var(--color-error, #ef4444);
}

.sso-callback__text--success {
  color: var(--color-success, #22c55e);
}

.sso-callback__retry {
  display: inline-block;
  padding: var(--space-12, 12px) var(--space-24, 24px);
  background: var(--color-primary-500, #3b82f6);
  color: var(--color-white, #ffffff);
  border: none;
  border-radius: var(--radius-8, 8px);
  font-size: var(--text-14, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-base, all 0.2s);
}

.sso-callback__retry:hover {
  background: var(--color-primary-600, #2563eb);
  transform: translateY(-1px);
}
.student-feedback-page {
  /* 继承 feedback-page 基础样式 */
}

/* 学生反馈表单特有样式 */
.student-feedback-page .feedback-form-section {
  max-width: 800px;
  margin: 0 auto;
}

/* 学生反馈历史列表 */
.student-feedback-page .feedback-history-list {
  margin-top: var(--space-24, 24px);
}

/* 学生反馈卡片 */
.student-feedback-page .feedback-card {
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-12, 12px);
  padding: var(--space-16, 16px);
  margin-bottom: var(--space-16, 16px);
  background-color: var(--color-white, #ffffff);
  transition: box-shadow 0.2s ease;
}

.student-feedback-page .feedback-card:hover {
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}.onboarding-shell { display: flex; align-items: center; justify-content: center; padding: var(--space-32) var(--space-16); height: var(--viewport-height-100); width: var(--viewport-100); box-sizing: border-box; overflow: hidden; }
.onboarding-frame { width: min(var(--width-onboarding-max), 90vw); aspect-ratio: 1.618 / 1; max-height: var(--height-90vh); background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); box-shadow: var(--shadow-onboarding); overflow: hidden; }
.onboarding-content { display: grid; grid-template-columns: 1fr 0.9fr; height: 100%; }
@media (max-width: 900px) { .onboarding-content { grid-template-columns: 1fr; } .onboarding-right { display: none; } }
.onboarding-left { position: relative; padding: var(--space-18); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-12); overflow: hidden; min-height: 0; background: var(--color-white); }
.title-row { display: flex; align-items: baseline; justify-content: space-between; }
.title-main { font-size: var(--text-16); font-weight: 700; color: #000000; }
.title-sub { font-size: var(--text-13); color: var(--color-slate-500); }
.card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); padding: var(--space-16); }
.tag-group { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tag-btn { padding: var(--space-8) var(--space-12); border-radius: 20px; border: 1px solid var(--color-gray-200); background: var(--color-gray-50); cursor: pointer; }
.tag-btn.active { background: var(--color-purple-100); border-color: var(--color-purple-400); color: var(--color-purple-800); }
.subtitle { margin: var(--space-12) 0 var(--space-8); font-size: var(--text-14); color: var(--color-slate-500); }
.help-text { margin-top: var(--space-8); color: var(--color-gray-1100); font-size: var(--text-13); }
.actions { margin-top: var(--space-16); display: flex; justify-content: flex-end; }
.btn { padding: var(--space-8) var(--space-16); border-radius: var(--radius-8); border: 1px solid var(--color-gray-200); }
.btn.btn-primary { background: var(--color-primary-500); color: var(--color-white); border-color: var(--color-primary-500); }
.btn.btn-secondary { background: var(--color-gray-100); color: var(--color-gray-1600); }
.other-section { display: flex; flex-direction: column; gap: var(--space-16); }
.other-row { display: flex; flex-direction: column; gap: var(--space-6); }
.other-row label { color: var(--color-slate-500); font-size: var(--text-14); }
.rounded-input { padding: var(--space-8) var(--space-16); border: 2px solid var(--color-gray-200); border-radius: var(--radius-12); background: var(--color-white); font-size: var(--text-14); transition: var(--transition-base); }
.rounded-input:focus { outline: none; border-color: var(--color-blue-500); box-shadow: var(--shadow-focus); }
.key-goal-input { margin-top: var(--space-6); }
.textarea-rounded { padding: var(--space-8) var(--space-16); border: 2px solid var(--color-gray-200); border-radius: var(--radius-12); background: var(--color-white); font-size: var(--text-14); transition: var(--transition-base); resize: vertical; }
.textarea-rounded:focus { outline: none; border-color: var(--color-blue-500); box-shadow: var(--shadow-focus); }
.onboarding-right { position: relative; }
.illustration { height: 100%; display: grid; grid-template-rows: auto auto 1fr; align-items: start; justify-items: start; padding: var(--space-24); color: var(--color-white); background: radial-gradient(1200px 600px at 0% 0%, var(--color-primary-500) 0%, transparent 40%), radial-gradient(900px 900px at 100% 100%, var(--color-primary-600) 0%, transparent 40%), linear-gradient(135deg, var(--color-blue-500), var(--color-purple-400)); }
.welcome-title { font-size: var(--text-28); font-weight: 400; line-height: 1.2; margin-bottom: var(--space-8); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.welcome-hint { font-size: var(--text-16); font-weight: 400; line-height: 1.8; margin-bottom: var(--space-16); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); }
.step-hint-card { width: 100%; max-width: var(--width-preview-max); background: var(--color-glass); border: 1px solid var(--color-glass-border); color: var(--color-white); border-radius: var(--radius-12); padding: var(--space-12) var(--space-16); backdrop-filter: blur(var(--space-6)); box-shadow: var(--shadow-step-hint); font-size: var(--text-14); line-height: 1.7; }
.trial-hint-pill { margin-top: var(--space-12); padding: var(--space-8) var(--space-18); border-radius: 24px; background: rgba(251,191,36,0.95); color: var(--color-gray-1500); font-size: var(--text-13); font-weight: 500; box-shadow: var(--shadow-trial-hint); max-width: var(--width-preview-max); }
.preview-thumb { margin-top: var(--space-12); width: 100%; max-width: var(--width-preview-max); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-12); padding: var(--space-8); cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-8); }
.preview-thumb img { width: 100%; height: var(--width-thumb); object-fit: cover; border-radius: var(--radius-8); cursor: zoom-in; }
.preview-thumb__caption { color: var(--color-white); font-size: var(--text-12); opacity: 0.9; }
.preview-thumb.preview-thumb--empty { display: flex; justify-content: center; align-items: center; min-height: var(--width-thumb); }
.preview-thumb.preview-thumb--empty::after { content: '暂无预览图片'; color: var(--color-white); opacity: 0.8; font-size: var(--text-12); }
.image-modal-overlay { position: fixed; inset: 0; background: var(--color-overlay-light); display: flex; align-items: center; justify-content: center; z-index: var(--z-image-modal); }
.image-modal-content { position: relative; background: transparent; border-radius: 0; padding: 0; max-width: var(--percent-92); max-height: var(--height-86vh); box-shadow: none; }
.image-modal-content img { max-width: var(--percent-92); max-height: var(--height-86vh); border-radius: var(--radius-8); display: block; cursor: zoom-out; user-select: none; }
.image-modal-content.image-modal-content--zoomed { overflow: auto; }
.image-modal-content.image-modal-content--zoomed img { transform: scale(1.35); cursor: zoom-out; }
.image-modal-close { position: absolute; right: var(--space-8); top: var(--space-4); border: none; background: #000; color: var(--color-white); font-size: var(--text-16); cursor: pointer; border-radius: 999px; width: var(--space-28); height: var(--space-28); display: flex; align-items: center; justify-content: center; }
.onboarding-left-scroll { overflow-y: auto; min-height: 0; }
.onboarding-left-actions { display: flex; justify-content: flex-end; gap: var(--space-8); }
.onboarding-left .actions { display: none; }
.quote-block { place-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.quote-text { font-weight: 700; text-align: center; line-height: 1.3; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); font-family: 'STXingkai', 'Xingkai SC', 'FZShuTi', 'KaiTi', 'cursive', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.quote-author { margin-top: var(--space-8); font-size: var(--text-14); opacity: 0.9; font-family: 'STXingkai', 'Xingkai SC', 'FZShuTi', 'KaiTi', 'cursive', serif; }
.goal-setting-content { display: flex; flex-direction: column; gap: var(--space-12); }
.form-section { display: flex; flex-direction: column; gap: var(--space-12); }
.step4-fullwidth-row { width: 100%; box-sizing: border-box; }
.step4-fullwidth-row.form-row { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); }
.step4-fullwidth-row label { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; color: var(--color-slate-500); font-size: var(--text-14); }
.step4-fullwidth-row select,
.step4-fullwidth-row .rounded-input { width: 100%; box-sizing: border-box; }
.step4-fullwidth-row .admin-date-range { width: 100%; }
.step4-fullwidth-row .admin-date-range-display { width: 100%; display: flex; flex-wrap: nowrap; gap: var(--space-8); }
.step4-fullwidth-row .admin-date-input { flex: 1; min-width: 80px; text-align: center; }
.step4-fullwidth-row .admin-date-range-panel { min-width: 360px; }
.step4-fullwidth-row .admin-date-range-calendars { gap: var(--space-12); }
.step4-fullwidth-row .admin-date-range-calendar { min-width: 140px; }
.step4-fullwidth-row .admin-date-range-month { white-space: nowrap; }
.step4-fullwidth-row .admin-date-cell--start,
.step4-fullwidth-row .admin-date-cell--end { background: var(--color-blue-100); color: var(--color-gray-1500); }
.subject-group-card { padding: var(--space-16); }
.subject-group-card .subject-group-form { position: relative; }
.subject-group-card .form-row { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-8); }
.subject-group-card .form-row label { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; color: var(--color-slate-500); font-size: var(--text-14); }
.subject-group-card .form-row .field-label { color: var(--color-slate-500); font-size: var(--text-14); text-align: left; align-self: flex-start; }
.subject-group-card .rounded-input,
.subject-group-card .textarea-rounded { width: 100%; box-sizing: border-box; }
.subject-group-card .subject-tags { width: 100%; }
.subject-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.key-goal-form { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-8); align-items: center; }
.block-actions { position: absolute; top: -12px; right: var(--space-8); display: flex; gap: 0; opacity: 0; pointer-events: none; transition: var(--transition-fast); background: var(--color-white); padding: 0 4px; }
.subject-group-form { position: relative; }
.subject-group-form:hover .block-actions, .subject-group-form:focus-within .block-actions { opacity: 1; pointer-events: auto; }
.key-goal-form .icon-btn { opacity: 0; pointer-events: none; transition: var(--transition-fast); }
.key-goal-form:hover .icon-btn, .key-goal-form:focus-within .icon-btn { opacity: 1; pointer-events: auto; }
.date-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-8); align-items: center; }
.date-sep { color: var(--color-slate-500); }
.semester-goal-form { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); padding: var(--space-12) var(--space-16); }
.semester-goal-grid { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-16); align-items: center; }
.subject-display { display: flex; align-items: center; min-height: 40px; }
.subject-tag--goal-row { padding: var(--space-6) var(--space-12); font-size: var(--text-14); }
.subject-tag--goal-row .subject-icon { font-size: var(--text-16); }
.goal-input { height: 40px; font-size: var(--text-14); padding: var(--space-8) var(--space-12); width: 100%; box-sizing: border-box; }
.semester-goal-grid label { display: flex; flex-direction: row; align-items: center; gap: var(--space-8); margin: 0; }
.semester-goal-grid label:first-child { justify-content: flex-start; }
.date-range input.rounded-input { height: 40px; font-size: var(--text-14); }

@keyframes toastSlideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.settings-toast {
  position: fixed;
  top: calc(var(--app-header-height, 96px) + 2px);
  right: 12px;
  z-index: 3000;
  pointer-events: none;
  background-color: var(--color-white);
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  border-left: 6px solid var(--color-blue-500);
  animation: toastSlideInRight 280ms ease-out;
}

.settings-toast--success {
  color: var(--color-blue-500);
}

.settings-toast--error {
  color: var(--color-red-500);
  border-left-color: var(--color-red-500);
}

.icon-inline-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.subject-icon-inline {
  display: inline-flex;
  align-items: center;
}

.group-icon-inline {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-6);
}

.grade-icon-inline {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-6);
}

.btn-ml-8 {
  margin-left: var(--space-8);
}

.subtitle-mt-0 {
  margin-top: 0;
}

.ai-models-wrapper {
  margin-top: 16px;
}.settings-page { padding: var(--space-24) var(--space-40) var(--space-32); background: var(--color-white); border-radius: var(--radius-12); }
.settings-inner { max-width: var(--width-settings-max); margin: 0 auto; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: var(--space-16); }
.settings-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-8); padding: var(--space-16); }
.settings-title { margin: 0 0 var(--space-8); font-size: var(--text-16); }
.settings-subtitle { margin: var(--space-12) 0 var(--space-8); font-size: var(--text-14); color: var(--color-slate-500); }
.tag-group { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tag-btn { padding: var(--space-8) var(--space-12); border-radius: 20px; border: 1px solid var(--color-gray-200); background: var(--color-gray-50); cursor: pointer; }
.tag-btn.active { background: var(--color-purple-100); border-color: var(--color-purple-400); color: var(--color-purple-800); }
.settings-footer { margin-top: var(--space-16); display: flex; justify-content: flex-end; }
.other-section { display: flex; flex-direction: column; gap: var(--space-16); }
.other-row { display: flex; flex-direction: column; gap: var(--space-6); }
.other-row label { color: var(--color-slate-500); font-size: var(--text-14); }
.other-row select, .other-row input { padding: var(--space-8) var(--space-12); border: 1px solid var(--color-gray-200); border-radius: var(--radius-6); }
.required::after { content: ' *'; color: var(--color-red-500); }
.tiers-list { display: flex; flex-direction: column; gap: var(--space-12); }
.tier-item { position: relative; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-12); padding: var(--space-12); box-shadow: var(--shadow-sm); transition: var(--transition-base); }
.tier-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tier-grid { display: grid; grid-template-columns: minmax(var(--width-tier-min), var(--width-tier-max)) 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 640px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-col-right { display: flex; flex-direction: column; gap: var(--space-8); }
.tier-actions { position: absolute; top: -10px; right: var(--space-8); display: flex; gap: var(--space-6); background: transparent; padding: 0; border-radius: var(--radius-6); opacity: 0; pointer-events: none; transition: var(--transition-fast); }
.tier-item:hover .tier-actions, .tier-item:focus-within .tier-actions { opacity: 1; pointer-events: auto; }
.tier-row { display: flex; align-items: center; gap: var(--space-8); }
.tier-name-input { flex: 1; border: 1px solid var(--color-gray-200); border-radius: var(--radius-6); padding: var(--space-6) var(--space-8); }
.tier-score-input { width: 80px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-6); padding: var(--space-6) var(--space-8); text-align: center; }
.tier-name-input:focus, .tier-score-input:focus, .uni-add-row input:focus { outline: none; border-color: var(--color-blue-500); box-shadow: none; }
.universities { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-8); }
.uni-tag { display: inline-flex; align-items: center; gap: var(--space-4); background: var(--color-gray-100); border: 1px solid var(--color-gray-200); border-radius: var(--radius-full); padding: var(--space-4) 10px; }
.tag-close { border: none; background: transparent; cursor: pointer; color: var(--color-slate-500); opacity: 0; pointer-events: none; transition: var(--transition-fast); }
.uni-tag:hover .tag-close { opacity: 1; pointer-events: auto; }
.uni-add-row { position: relative; width: 100%; }
.uni-add-row input { width: 100%; border: 1px solid var(--color-gray-200); border-radius: var(--radius-6); padding: var(--space-6) 32px var(--space-6) var(--space-8); }
.uni-add-row .icon-btn { position: absolute; right: var(--space-6); top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: var(--transition-fast); }
.uni-add-row:hover .icon-btn, .uni-add-row:focus-within .icon-btn { opacity: 1; pointer-events: auto; }
.tiers-actions { margin-top: var(--space-8); }
.difficulty-stars { display: flex; gap: var(--space-4); }
.star-rating { display: flex; gap: var(--space-4); }
.star { font-size: 18px; color: var(--color-gray-400); background: transparent; border: none; cursor: pointer; line-height: 1; }
.star.filled { color: var(--color-warning-400); }
.star:hover { transform: scale(1.05); }
.icon-btn { background: transparent; border: none; cursor: pointer; padding: var(--space-4); border-radius: var(--radius-4); color: var(--color-slate-500); }
.icon-btn:hover:not(:disabled) { background: var(--color-gray-100); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }.tiers-list { display: flex; flex-direction: column; gap: 12px; }
.tier-item { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.2s ease; }
.tier-item:hover { box-shadow: 0 6px 20px rgba(59,130,246,0.15); transform: translateY(-1px); }
.tier-grid { display: grid; grid-template-columns: minmax(220px, 260px) 1fr; gap: 12px; align-items: start; }
@media (max-width: 640px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-col-right { display: flex; flex-direction: column; gap: 8px; }
.tier-actions { position: absolute; top: -10px; right: 8px; display: flex; gap: 6px; background: transparent; padding: 0; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.tier-item:hover .tier-actions, .tier-item:focus-within .tier-actions { opacity: 1; pointer-events: auto; }
.tier-row { display: flex; align-items: center; gap: 8px; }
.tier-name-input { flex: 1; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; }
.tier-score-input { width: 80px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; text-align: center; }
.tier-name-input:focus, .tier-score-input:focus, .uni-add-row input:focus { outline: none; border-color: #60a5fa; box-shadow: none; }
.universities { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.uni-tag { display: inline-flex; align-items: center; gap: 4px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px 10px; }
.tag-close { border: none; background: transparent; cursor: pointer; color: #64748b; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.uni-tag:hover .tag-close { opacity: 1; pointer-events: auto; }
.uni-add-row { position: relative; width: 100%; }
.uni-add-row input { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 32px 6px 8px; }
.uni-add-row .icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.uni-add-row:hover .icon-btn, .uni-add-row:focus-within .icon-btn { opacity: 1; pointer-events: auto; }
.icon-btn { background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 4px; color: #64748b; }
.icon-btn:hover:not(:disabled) { background: #f1f5f9; }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.footer-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12, 12px);
}

/* 试卷模式开关容器：头部右侧 */
.paper-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 逐题模式 Overlay 样式 */
.question-mode-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-mode-container {
  background: var(--color-gray-50, #f8fafc);
  width: min(1040px, 96vw);
  max-height: 90vh;
  border-radius: var(--radius-10, 10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.question-mode-content {
  padding: 0 var(--space-20, 20px) var(--space-16, 16px) var(--space-20, 20px);
  overflow-y: auto;
  overflow-x: hidden; /* 避免横向滚动条 */
  flex: 1 1 auto; /* 使底部区贴底 */
}

.qm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12, 12px);
  padding-top: 0;
}
.qm-title { font-weight: 600; font-size: var(--text-18, 18px); color: var(--color-gray-900, #111827); }
.qm-progress { color: var(--color-gray-500, #6b7280); font-size: var(--text-14, 14px); }

.question-mode-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 10px;
  background: var(--color-gray-50, #f8fafc);
  margin-top: 0;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}
.question-mode-footer .left-actions,
.question-mode-footer .right-actions { display: inline-flex; gap: 10px; align-items: center; }
.question-mode-footer .left-actions { margin-left: var(--space-20, 20px); }
.question-mode-footer .right-actions { margin-right: var(--space-20, 20px); }

/* 下一题按钮：蓝色背景，仅作用于右侧的次级按钮 */
.question-mode-footer .right-actions .btn.btn-secondary {
  background: var(--color-blue-600, #2563eb);
  color: var(--color-white, #ffffff);
  border-color: var(--color-blue-700, #1d4ed8);
}

.question-mode-footer .right-actions .btn.btn-secondary:hover:not(:disabled) {
  background: var(--color-blue-700, #1d4ed8);
  border-color: var(--color-blue-800, #1e40af);
}

.question-mode-footer .right-actions .btn.btn-secondary:disabled {
  background: var(--color-blue-300, #93c5fd);
  color: var(--color-white, #ffffff);
  border-color: var(--color-blue-300, #93c5fd);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .question-mode-container { width: 96vw; max-height: 92vh; }
}

/* 打印时隐藏逐题模式窗口 */
@media print {
  .question-mode-overlay { display: none !important; }
}

/* 逐题模式内，限制选项区域宽度以避免溢出 */
.question-mode-container .study-question-options {
  grid-template-columns: 1fr 1fr !important;
  margin-left: var(--space-20, 20px);
  margin-bottom: var(--space-12, 12px);
}

/* 固定两列，无视自动排版类 */
.question-mode-container .study-question-options.auto-layout-1,
.question-mode-container .study-question-options.auto-layout-2,
.question-mode-container .study-question-options.auto-layout-4 {
  grid-template-columns: 1fr 1fr !important;
}

.question-mode-container .study-option-label { max-width: 100%; }
.question-mode-container .study-option-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 逐题模式：错误标记样式 */
.wrong-indicator { color: var(--color-red-600, #dc2626); font-weight: 700; margin-left: 8px; font-size: var(--text-14, 14px); }

.qm-header {
  background: transparent;
  border-top-left-radius: var(--radius-10, 10px);
  border-top-right-radius: var(--radius-10, 10px);
  padding: var(--space-12, 12px) 0;
}

.qm-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-18, 18px);
  font-weight: 600;
  color: var(--color-gray-900, #0f172a);
}

.qm-title::before {
  content: '🎯';
  font-size: var(--text-18, 18px);
}

.qm-progress {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--color-primary-50, #eef2ff);
  color: var(--color-primary-800, #1e40af);
  border: 1px solid var(--color-primary-100, #dbeafe);
  border-radius: 999px;
  font-size: var(--text-13, 13px);
  font-weight: 600;
}

.question-mode-container .study-question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-100, #e0e7ff);
  color: var(--color-primary-900, #1e3a8a);
}

.question-mode-container .study-question-content {
  color: var(--color-gray-900, #0f172a);
}

.question-mode-container .study-question-content.markdown-preview {
  background: var(--color-gray-50, #f8fafc);
  padding: var(--space-12, 12px);
  border-radius: var(--radius-8, 8px);
}

.question-mode-container .study-question-content .markdown-preview {
  background: var(--color-gray-50, #f8fafc);
  padding: var(--space-12, 12px);
  border-radius: var(--radius-8, 8px);
}

.question-mode-container .study-option-label {
  border: none;
  background: transparent;
}

.question-mode-container .study-option-label:hover {
  background-color: var(--color-gray-50, #f9fafb);
}

.question-mode-container .study-option-label:has(input:checked) {
  background-color: var(--color-primary-50, #eef2ff);
}

.question-mode-container .question-answer-section {
  margin-top: var(--space-12, 12px);
  padding: var(--space-12, 12px);
  background: transparent; /* 最外层透明 */
  border-radius: 0; /* 去掉卡片圆角 */
  border-left: none; /* 去掉卡片左边框 */
  margin-bottom: var(--space-12, 12px);
}

.question-mode-container .question-answer-section.wrong-answer {
  background: transparent; /* 保持透明 */
}

.question-mode-container .question-answer-section.correct-answer {
  background: transparent; /* 保持透明 */
}

.question-mode-container .question-answer-section .markdown-preview {
  background: transparent; /* 解析内容容器透明，统一由外层背景呈现 */
}

/* 解析内容块：使用淡黄色作为内层背景，外层保持透明 */
.question-mode-container .question-explanation {
  background: var(--color-yellow-50, #fffbeb); /* 与整题预览保持一致 */
  border: 1px solid var(--color-yellow-200, #FDE68A);
  border-radius: var(--radius-6, 6px);
  padding: var(--space-12, 12px);
}

.question-mode-container .study-question-content .markdown-preview {
  background: var(--color-gray-50, #f8fafc);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Fade In with slide up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In with scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   Slide Animations
   ============================================ */

/* Slide in from top (default) */
@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide in from right (for drawers) */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide out to right (for drawers closing) */
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide up animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide out to right */
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Toast animation: slide in from right */
@keyframes toastSlideInRight {
  0% { opacity: 0; transform: translateX(16px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Dropdown slide animation */
@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Rotation Animations
   ============================================ */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Spin utility class - 用于加载动画 */
.animate-spin {
  animation: spin 1s linear infinite;
  will-change: transform;
}

/* ============================================
   Pulse & Blink Animations
   ============================================ */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Alternative pulse with different opacity */
@keyframes pulse-soft {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.animate-pulse {
  animation: pulse 2s infinite;
  will-change: opacity;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================
   Bounce Animations
   ============================================ */

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   Tooltip Animations
   ============================================ */

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================
   Modal & Overlay Animations
   ============================================ */

@keyframes modalBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalBackdropFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalContentScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalContentScaleOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
}

/* ============================================
   Drawer Animations
   ============================================ */

@keyframes drawerSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes drawerSlideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* ============================================
   Animation Utility Classes
   ============================================ */

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
  will-change: opacity;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-out;
  will-change: opacity;
}

.animate-slide-in {
  animation: slideIn 0.3s ease-out;
  will-change: transform, opacity;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
  will-change: transform, opacity;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
  will-change: transform, opacity;
}

.animate-bounce-in {
  animation: bounceIn 0.5s ease-out;
  will-change: transform, opacity;
}

/* Modal animation classes */
.animate-modal-backdrop-in {
  animation: modalBackdropFadeIn 0.2s ease-out;
  will-change: opacity;
}

.animate-modal-backdrop-out {
  animation: modalBackdropFadeOut 0.2s ease-out;
  will-change: opacity;
}

.animate-modal-content-in {
  animation: modalContentScaleIn 0.3s ease-out;
  will-change: transform, opacity;
}

.animate-modal-content-out {
  animation: modalContentScaleOut 0.2s ease-out;
  will-change: transform, opacity;
}

/* Drawer animation classes */
.animate-drawer-in {
  animation: drawerSlideIn 0.3s ease-out;
  will-change: transform;
}

.animate-drawer-out {
  animation: drawerSlideOut 0.2s ease-out;
  will-change: transform;
}

/* Dropdown animation classes */
.animate-dropdown-in {
  animation: dropdownSlideIn 0.2s ease-out;
  will-change: transform, opacity;
}

/* Toast animation classes */
.animate-toast-in {
  animation: toastSlideInRight 0.3s ease-out;
  will-change: transform, opacity;
}

/* ============================================
   Content Visibility Optimization
   用于长列表和大量内容的性能优化
   ============================================ */

.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ============================================
   Containment for Performance
   用于隔离复杂组件的渲染
   ============================================ */

.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

.contain-content {
  contain: content;
}

.contain-strict {
  contain: strict;
}@media screen {
  html, body { height: 100%; overflow: hidden; overflow-x: hidden; }
  body { overscroll-behavior-y: none; }
}

/* Tooltip 样式已移动到 components/tooltips.css */


/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全局默认文本颜色 */
body {
  color: #000000;
}:root {
  /* Primary Colors */
  --color-primary-500: #667eea;
  --color-primary-600: #764ba2;

  /* Blue Colors */
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-100: #eff6ff;
  --color-blue-200: #dbeafe;
  --color-blue-800: #1d4ed8;
  --color-blue-900: #1e40af;

  /* Indigo Colors */
  --color-indigo-500: #6366f1;
  --color-indigo-600: #5a67d8;
  --color-indigo-700: #4f46e5;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #1e3a8a;

  /* Green/Success Colors */
  --color-green-500: #22c55e;
  --color-success-500: var(--color-green-500);
  --color-success-100: #dcfce7;
  --color-success-800: #166534;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;

  /* Warning/Orange/Amber Colors */
  --color-warning-400: #fb923c;
  --color-warning-100: #fef9c3;
  --color-warning-800: #854d0e;
  --color-amber-500: #f59e0b;
  --color-amber-800: #78350f;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;

  /* Info/Cyan/Sky Colors */
  --color-info-500: #3b82f6;
  --color-info-100: #e0f2fe;
  --color-info-800: #0369a1;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-800: #0e7490;
  --color-cyan-900: #0891b2;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;

  /* Danger/Error/Rose/Red Colors */
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-error-500: var(--color-red-500);
  --color-error-bg: #fdf2f2;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #831843;
  --color-danger-100: #fee2e2;
  --color-danger-800: #b91c1c;
  --color-danger-900: #991b1b;

  /* Purple Colors */
  --color-purple-100: #ede9fe;
  --color-purple-400: #a78bfa;
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7c3aed;
  --color-purple-700: #6d28d9;
  --color-purple-800: #5b21b6;

  /* Yellow Colors */
  --color-yellow-50: #fffbeb;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fde68a;
  --color-yellow-500: #eab308;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;

  /* Gray Colors - Standardized Naming */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #374151;
  --color-gray-800: #1e293b;
  --color-gray-900: #1a202c;

  /* Legacy gray aliases (for backward compatibility) */
  --color-gray-1200: var(--color-gray-200);
  --color-gray-1300: var(--color-gray-50);
  --color-gray-1400: var(--color-gray-100);
  --color-gray-1500: var(--color-gray-900);
  --color-gray-1600: var(--color-gray-700);
  --color-gray-1700: var(--color-slate-300);
  --color-gray-1900: var(--color-gray-400);
  --color-gray-3200: var(--color-gray-800);
  --color-gray-3300: var(--color-gray-500);
  --color-gray-3400: var(--color-gray-600);
  --color-gray-3500: var(--color-gray-900);
  --color-gray-3600: var(--color-gray-100);

  /* Slate Colors */
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* Background & Surface Colors */
  --color-white: #ffffff;
  --color-bg-soft: #f8f9fa;
  --color-black: #000000;

  /* Text Colors */
  --color-text-primary: #333;
  --color-text-secondary: #555;
  --color-text-tertiary: #666;
  --color-text-muted: #6b7280;

  /* Semantic Aliases - Primary color now uses blue */
  --primary-color: var(--color-blue-500);

  /* Overlay & Glass Effects */
  --color-overlay: rgba(0, 0, 0, 0.8);
  --color-overlay-light: rgba(0, 0, 0, 0.6);
  --color-glass: rgba(255, 255, 255, 0.18);
  --color-glass-border: rgba(255, 255, 255, 0.25);
  --color-shadow-primary: rgba(102, 126, 234, 0.4);

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 999px;

  /* Typography */
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-28: 28px;
  --text-36: 36px;

  /* Widths */
  --width-login-max: 500px;
  --width-login-wide: 720px;
  --width-subject-min: 120px;
  --width-feedback-max: 400px;
  --width-admin-max: 1200px;
  --width-search: 240px;
  --width-onboarding-max: 900px;
  --width-preview-max: 480px;
  --width-thumb: 110px;
  --width-filter-select: 140px;
  --width-filter-date: 120px;
  --width-filter-panel: 520px;
  --width-floating: 44px;
  --width-qm-icon: 36px;
  --width-card-icon: 48px;
  --width-option-badge: 28px;
  --width-remove-btn: 32px;
  --width-floating-action: 56px;
  --width-difficulty: 80px;
  --width-form-min: 300px;
  --width-modal-wide: 1680px;
  --width-option-label: 24px;
  --width-option-label-circle: 28px;
  --width-form-compact: 110px;
  --width-record-card-min: 350px;
  --width-learning-stats: 115px;
  --width-actions-column: 180px;
  --width-spinner: 14px;
  --width-more-btn: 88px;
  --width-metric-card-min: 300px;
  --width-stats-panel-min: 350px;
  --width-action-card-min: 280px;
  --width-stat-card-min: 220px;
  --width-settings-max: 800px;
  --width-tier-min: 220px;
  --width-tier-max: 260px;

  /* Heights */
  --height-editor: 300px;
  --height-textarea: 200px;
  --height-textarea-min: 120px;
  --height-modal-close: 32px;
  --height-checkbox: 16px;
  --height-metric-icon: 48px;
  --height-activity-icon: 40px;
  --height-progress-bar: 8px;
  --height-progress-mini: 6px;
  --height-90vh: 90vh;
  --height-86vh: 86vh;
  --height-95vh: 95vh;
  --height-header: 70px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 20px rgba(59, 130, 246, 0.15);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 2px 10px rgba(0, 0, 0, 0.2);
  --shadow-login: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 5px 15px rgba(102, 126, 234, 0.4);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 2px rgba(59, 130, 246, 0.25);
  --shadow-onboarding: 0 10px 30px rgba(17, 24, 39, 0.12);
  --shadow-step-hint: 0 4px 12px rgba(17, 24, 39, 0.18);
  --shadow-trial-hint: 0 6px 18px rgba(15, 23, 42, 0.35);
  --shadow-filter: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-filter-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);
  --shadow-filter-hover: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-floating: 0 6px 20px rgba(0, 0, 0, 0.15);
  --shadow-floating-hover: 0 10px 24px rgba(59, 130, 246, 0.25);
  --shadow-success-hover: 0 4px 8px rgba(16, 185, 129, 0.4);
  --shadow-warning-hover: 0 4px 8px rgba(245, 158, 11, 0.4);
  --shadow-question: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-correct: 0 2px 4px rgba(22, 163, 74, 0.2);
  --shadow-wrong: 0 2px 4px rgba(220, 38, 38, 0.3);
  --shadow-header: 0 2px var(--space-12) rgba(0, 0, 0, 0.1);
  --shadow-card-modern: 0 4px var(--space-16) rgba(0, 0, 0, 0.08);
  --shadow-card-hover-modern: 0 6px var(--space-24) rgba(0, 0, 0, 0.12);
  --shadow-icon: 0 4px var(--space-16) rgba(102, 126, 234, 0.15);
  --shadow-icon-hover: 0 6px var(--space-24) rgba(102, 126, 234, 0.25);
  --shadow-btn-hover: 0 4px var(--space-12) rgba(139, 92, 246, 0.15);
  --shadow-btn-active: 0 4px var(--space-16) rgba(139, 92, 246, 0.3);
  --shadow-option-hover: 0 4px var(--space-12) rgba(102, 126, 234, 0.1);
  --shadow-floating-action: 0 4px var(--space-24) rgba(102, 126, 234, 0.3);
  --shadow-floating-action-hover: 0 6px var(--space-32) rgba(102, 126, 234, 0.4);
  --shadow-bottom: 0 -4px var(--space-24) rgba(0, 0, 0, 0.1);
  --shadow-error: 0 0 0 var(--space-2) rgba(239, 68, 68, 0.1);
  --shadow-success: 0 0 0 var(--space-2) rgba(16, 185, 129, 0.1);
  --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.15);
  --shadow-popover: 0 8px 24px rgba(2, 6, 23, 0.18);
  --shadow-explanation: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Transitions */
  --transition-base: all 0.2s ease;
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.3s ease;
  --transition-input: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  --transition-hover: all 0.2s ease;
  --transition-scale: all 0.3s ease;

  /* Animations */
  --animation-spin: 1s linear infinite;
  --animation-pulse: 2s infinite;
  --animation-fade: 0.3s ease-out;
  --animation-bounce: 0.3s ease-out;
  --animation-tooltip: 0.2s ease-out;

  /* Z-Index */
  --z-modal: 2000;
  --z-login: 1000;
  --z-image-modal: 1000;
  --z-filter-panel: 50;
  --z-floating: 900;
  --z-header: 100;
  --z-tooltip: 1000;
  --z-floating-action: 1000;
  --z-popover: 4000;
  --z-modal-footer: 5;

  /* Misc */
  --size-modal-close: 40px;
  --percent-90: 90%;
  --percent-92: 92%;
  --percent-95: 95%;
  --viewport-100: 100vw;
  --viewport-height-100: 100vh;

  /* App Layout */
  --app-header-height: 96px;
  --border-color: #e5e7eb;

  /* Container */
  --container-max-width: 1200px;
  --container-padding: 24px;

  /* Form */
  --form-row-gap: 20px;
  --form-row-min-width: 250px;
}

.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-flex-column { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }

/* 对齐工具类 */
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }

.u-justify-center { justify-content: center; }
.u-justify-start { justify-content: flex-start; }
.u-justify-end { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-justify-around { justify-content: space-around; }

/* 通用 Flex 组合 */
.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.u-flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 间距工具类 */
.u-gap-4 { gap: var(--space-4, 4px); }
.u-gap-6 { gap: var(--space-6, 6px); }
.u-gap-8 { gap: var(--space-8, 8px); }
.u-gap-12 { gap: var(--space-12, 12px); }
.u-gap-16 { gap: var(--space-16, 16px); }
.u-gap-24 { gap: var(--space-24, 24px); }

/* ============================================
   间距工具类 - Margin & Padding
   ============================================ */

/* Margin Top */
.u-mt-4 { margin-top: var(--space-4, 4px); }
.u-mt-8 { margin-top: var(--space-8, 8px); }
.u-mt-12 { margin-top: var(--space-12, 12px); }
.u-mt-16 { margin-top: var(--space-16, 16px); }
.u-mt-24 { margin-top: var(--space-24, 24px); }

/* Margin Bottom */
.u-mb-4 { margin-bottom: var(--space-4, 4px); }
.u-mb-8 { margin-bottom: var(--space-8, 8px); }
.u-mb-12 { margin-bottom: var(--space-12, 12px); }
.u-mb-16 { margin-bottom: var(--space-16, 16px); }
.u-mb-24 { margin-bottom: var(--space-24, 24px); }

/* Margin Left */
.u-ml-4 { margin-left: var(--space-4, 4px); }
.u-ml-8 { margin-left: var(--space-8, 8px); }
.u-ml-16 { margin-left: var(--space-16, 16px); }

/* Margin Right */
.u-mr-4 { margin-right: var(--space-4, 4px); }
.u-mr-8 { margin-right: var(--space-8, 8px); }

/* Padding */
.u-p-8 { padding: var(--space-8, 8px); }
.u-p-12 { padding: var(--space-12, 12px); }
.u-p-16 { padding: var(--space-16, 16px); }
.u-p-24 { padding: var(--space-24, 24px); }

/* ============================================
   文本工具类
   ============================================ */

/* 文本对齐 */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

/* 文本截断 */
.u-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行文本截断 */
.u-text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 字体大小 */
.u-text-12 { font-size: var(--text-12, 12px); }
.u-text-13 { font-size: var(--text-13, 13px); }
.u-text-14 { font-size: var(--text-14, 14px); }
.u-text-16 { font-size: var(--text-16, 16px); }
.u-text-18 { font-size: var(--text-18, 18px); }

/* 字体粗细 */
.u-font-medium { font-weight: 500; }
.u-font-semibold { font-weight: 600; }
.u-font-bold { font-weight: 700; }

/* 文本颜色 */
.u-text-muted { color: var(--color-slate-500, #64748b); }
.u-text-primary { color: var(--color-primary-500, #3b82f6); }
.u-text-success { color: var(--color-success-500, #10b981); }
.u-text-warning { color: var(--color-warning-500, #f59e0b); }
.u-text-danger { color: var(--color-danger-500, #ef4444); }

/* ============================================
   组件工具类
   ============================================ */

/* 卡片基础样式 */
.u-card {
  background: #fff;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-12, 12px);
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.08));
}

/* 徽章基础样式 */
.u-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  white-space: nowrap;
}

/* 输入框紧凑样式 */
.u-input-compact {
  width: 50px;
  height: 32px;
  padding: 0 var(--space-8, 8px);
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-4, 4px);
  font-size: var(--text-14, 14px);
  text-align: center;
}

/* 按钮紧凑样式 */
.u-btn-compact {
  min-width: 50px;
  height: 32px;
  font-size: var(--text-13, 13px);
}

/* 左侧强调条 */
.u-accent-left {
  position: relative;
}

.u-accent-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 12px 0 0 12px;
}

.u-accent-left:hover::before,
.u-accent-left:focus-within::before {
  opacity: 1;
}

/* ============================================
   空状态组件
   ============================================ */

.empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
  min-height: 200px;
  text-align: center;
  width: 100%;
  grid-column: 1 / -1;
  box-sizing: border-box;
}

.empty-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.empty-block__title {
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.empty-block__desc {
  font-size: 14px;
  color: #64748b;
  max-width: 320px;
  line-height: 1.5;
}

/* ============================================
   确认对话框组件
   ============================================ */

.confirm-popover {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 8px 10px;
}

.confirm-popover__row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.confirm-popover__icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fef3c7;
  color: #d97706;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.confirm-popover__text {
  font-size: 13px;
  color: #334155;
  white-space: nowrap;
}

.confirm-popover__actions {
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ============================================
   滑动通知组件
   ============================================ */

.slide-notice {
  position: fixed;
  top: calc(var(--app-header-height, 96px) + 2px);
  right: 12px;
  z-index: 10002;
  pointer-events: none;
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  border-left: 6px solid;
  animation: toastSlideInRight 280ms ease-out;
}

/* ============================================
   图片预览模态框
   ============================================ */

.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-overlay, rgba(0, 0, 0, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 2000);
  padding: 40px;
}

.image-preview-modal .preview-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.image-preview-modal .preview-content img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.image-preview-modal .close-preview {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ============================================
   状态徽章
   ============================================ */

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-12, 12px);
  font-weight: 500;
}

.status-success {
  background-color: var(--color-success-100, #dcfce7);
  color: var(--color-success-800, #166534);
}

.status-warning {
  background-color: var(--color-warning-100, #fef9c3);
  color: var(--color-warning-800, #854d0e);
}

.status-danger {
  background-color: var(--color-danger-100, #fee2e2);
  color: var(--color-danger-800, #b91c1c);
}

.status-info {
  background-color: var(--color-info-100, #dbeafe);
  color: var(--color-info-800, #1e40af);
}

.status-pending {
  background-color: var(--color-warning-100, #fef9c3);
  color: var(--color-warning-800, #854d0e);
}

/* ============================================
   表格单元格工具类
   ============================================ */

.table-cell-muted {
  color: var(--color-gray-500, #64748b);
  font-size: var(--text-12, 12px);
}

/* ============================================
   其他工具类
   ============================================ */

.u-full-width { width: 100%; }
.u-full-height { height: 100%; }

.u-cursor-pointer { cursor: pointer; }
.u-pointer-events-none { pointer-events: none; }

.u-position-relative { position: relative; }
.u-position-absolute { position: absolute; }
.u-position-fixed { position: fixed; }

.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto { overflow: auto; }

.u-white-space-nowrap { white-space: nowrap; }

/* 隐藏元素 */
.u-hidden { display: none !important; }
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}/* All CSS files are now imported directly in main.tsx to avoid @import warnings */