/* =========================================================
   书荐童学 · 多主题设计系统
   50+ 组青春活力主题，面向 K12 群体
   配色通过 CSS 变量 + data-theme 属性切换
   颜色变量定义见 themes.css
   ========================================================= */

/* ====== 字体与布局变量（不随主题变化） ====== */
:root {
  /* 字体 */
  --font-cn-serif:  "Noto Serif CJK SC", "Source Han Serif SC", "华文宋体", "STSong", "宋体", "SimSun", "Songti SC", serif;
  --font-cn-sans:   -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", "WenQuanYi Micro Hei", "黑体", "SimHei", sans-serif;
  --font-title:     var(--font-cn-serif);
  --font-body:      var(--font-cn-sans);

  /* 间距 (留白体系) */
  --space-xs:  0.375rem;   /*  6px */
  --space-sm:  0.75rem;    /* 12px */
  --space-md:  1.5rem;     /* 24px */
  --space-lg:  2rem;       /* 32px */
  --space-xl:  3.5rem;     /* 56px */

  /* 圆角 (含蓄) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* 阴影 (若有若无) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

  /* 语义状态色（可在 themes.css 中按主题覆盖） */
  --success:       #16a34a;
  --success-hover: #15803d;
  --success-rgb:   22,163,74;
  --danger:        #dc2626;
  --danger-hover:  #b91c1c;
  --danger-rgb:    220,38,38;
  --warning:       #d97706;

  /* 工具色（中性灰，可随主题微调） */
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
}

/* ====== 基础样式 ====== */
body {
  font-family: var(--font-body);
  color: var(--qian-mo);
  background-color: var(--xuan-zhi);
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--mo);
  letter-spacing: 0.05em;
  font-weight: 600;
}

a {
  color: var(--yan-zhi);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--yan-zhi-hover);
}

img {
  max-width: 100%;
  height: auto;
}

/* 选中文本色 */
::selection {
  background: var(--selection-bg, rgba(var(--yan-zhi-rgb, 139,94,60), 0.2));
  color: var(--mo);
}

/* ====== 宣纸纹理背景 (纯 CSS 模拟) ====== */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(ellipse 1px 1px at 10% 20%, rgba(0,0,0,0.015) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 30% 60%, rgba(0,0,0,0.01) 0%, transparent 100%),
    radial-gradient(ellipse 2px 1px at 50% 30%, rgba(0,0,0,0.008) 0%, transparent 100%),
    radial-gradient(ellipse 1px 2px at 70% 80%, rgba(0,0,0,0.012) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 90% 40%, rgba(0,0,0,0.01) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* ====== 页面通用 Header（合并所有页面头部重复样式） ====== */
.page-header,
.article-detail-header,
.grade-page-header,
.grade-subject-header,
.collection-header,
.article-page-header,
.tools-page-hero,
.book-detail-header {
    background: linear-gradient(135deg, var(--hero-grad-start, #fffaf2) 0%, var(--xuan-zhi) 100%);
    border-bottom: 1px solid var(--dan-mo);
    padding: 2.5rem 0 2rem;
}
.page-header-title,
.article-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: var(--font-title);
    margin-bottom: 0.25rem;
}
.page-header-subtitle,
.page-header-desc,
.article-detail-subtitle {
    color: var(--yan-hui);
    font-size: 0.85rem;
    margin: 0;
}

/* ====== 主内容区 ====== */
.main-content {
  padding-top: 76px;
  min-height: 80vh;
}

/* ====== 导航栏 (宋意简约) ====== */
.navbar {
  background: var(--xue-bai) !important;
  border-bottom: 1px solid var(--dan-mo);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0;
  transition: box-shadow 0.3s;
}

/* 品牌 — 印章风格 */
.navbar-brand {
  padding: 0;
  margin: 0;
}

.brand-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--yan-zhi);
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  border-radius: var(--radius-sm);
  margin-right: 10px;
  flex-shrink: 0;
  /* 印章的隐约飞白效果 */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.brand-text {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mo);
  letter-spacing: 0.1em;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--yan-hui) !important;
  padding: 0.5rem 0.8rem !important;
  position: relative;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.nav-link:hover {
  color: var(--mo) !important;
}
.nav-link.active {
  color: var(--mo) !important;
  font-weight: 600;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.8rem;
  right: 0.8rem;
  height: 2px;
  background: var(--yan-zhi);
  border-radius: 1px;
}

/* 导航搜索框 */
.search-form {
  position: relative;
}
.search-form .form-control {
  border: 1px solid var(--dan-mo);
  background: var(--xuan-zhi);
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--mo);
}
.search-form .form-control:focus {
  border-color: var(--jin);
  box-shadow: 0 0 0 2px rgba(var(--jin-rgb, 196,163,90),0.15);
}
.search-form .btn {
  border: 1px solid var(--dan-mo);
  border-left: none;
  background: var(--xuan-zhi);
  color: var(--yan-hui);
  padding: 0.4rem 0.7rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.search-form .btn:hover {
  background: var(--yan-zhi);
  color: #fff;
  border-color: var(--yan-zhi);
}

/* 下拉菜单 */
.dropdown-menu {
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  background: var(--xue-bai);
  margin-top: 4px !important;
}
.dropdown-item {
  font-size: 0.85rem;
  color: var(--qian-mo);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.8rem;
  letter-spacing: 0.05em;
}
.dropdown-item:hover {
  background: var(--xuan-zhi);
  color: var(--yan-zhi);
}
.dropdown-divider {
  border-color: var(--dan-mo);
  opacity: 0.5;
}

/* ====== Hero 区域 (水墨意境) ====== */
.hero-section {
  position: relative;
  padding: var(--space-xl) 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--xuan-zhi) 0%, var(--hero-grad-end, #EDE7DB) 100%);
  text-align: center;
}

/* 底部水墨晕染 */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background:
    radial-gradient(ellipse 80% 60px at 30% 100%, rgba(0,0,0,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50px at 70% 100%, rgba(0,0,0,0.03) 0%, transparent 70%);
}

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--mo);
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.hero-title .highlight {
  position: relative;
  color: var(--yan-zhi);
  display: inline-block;
}
.hero-title .highlight::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  background: var(--highlight-line, #8C6418);
  border-radius: 2px;
}

.hero-desc {
  color: var(--yan-hui) !important;
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero 搜索框 */
.hero-search {
  position: relative;
}
.hero-search .form-control {
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-size: 1rem;
  padding: 12px 16px;
  background: var(--xue-bai);
  color: var(--mo);
}
.hero-search .form-control:focus {
  border-color: var(--jin);
  box-shadow: 0 0 0 2px rgba(var(--jin-rgb, 196,163,90),0.15);
}
.hero-search .btn-primary {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 24px;
  background: var(--yan-zhi);
  border: none;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 1rem;
}
.hero-search .btn-primary:hover {
  background: var(--yan-zhi-hover);
}

/* Hero 热门标签 */
.hero-tags .badge {
  background: rgba(var(--jin-rgb, 196,163,90),0.12);
  color: var(--yan-hui);
  font-weight: 400;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}
.hero-tags .badge:hover {
  background: var(--jin-light);
  color: var(--mo);
}


/* ====== Section 通用 ====== */
.section-padding {
  padding: var(--space-lg) 0;
}
.section-hidden { display: none !important; }

.section-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--mo);
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--section-line, #A07830);
  margin-top: 8px;
  border-radius: 1px;
}
.text-center .section-title::after {
  margin-left: auto;
  margin-right: auto;
}

/* ====== 年级快速入口 (宋意書籤) ====== */
.grade-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  background: var(--xue-bai);
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.25s;
  position: relative;
}
.grade-chip:hover {
  border-color: var(--jin);
  background: var(--xue-bai);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.grade-chip-text {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--yan-hui);
  letter-spacing: 0.08em;
  font-weight: 500;
  transition: color 0.2s;
}
.grade-chip:hover .grade-chip-text {
  color: var(--mo);
}
.grade-chip-all {
  border-color: var(--jin-light);
}
.grade-chip-all .grade-chip-text {
  color: var(--mo);
}

/* ====== 图书卡片 (宋意书笺) ====== */
.book-card {
  background: var(--xue-bai);
  border: 1px solid var(--dan-mo) !important;
  border-radius: var(--radius-sm);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.book-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--jin-light) !important;
}

/* 顶部装饰线 (hover 时显现) */
.book-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--jin-light), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.book-card:hover::before {
  opacity: 1;
}

.book-card-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--xuan-zhi);
}
.book-card-img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.3s;
background: var(--xue-bai);
}
.book-card:hover .book-card-img {
  transform: scale(1.03);
}

.book-type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.7rem;
  font-weight: 400;
  padding: 0.2rem 0.6rem;
  background: var(--yan-zhi);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.book-card-body {
  padding: 1rem 1rem 0.8rem;
}

.book-grade-tag .badge {
  font-weight: 400;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}
.book-grade-tag .badge.bg-primary {
  background: rgba(var(--yan-zhi-rgb, 139,94,60),0.08) !important;
  color: var(--yan-zhi) !important;
}
.book-grade-tag .badge.text-secondary {
  background: rgba(var(--shui-se-rgb, 140,130,121),0.1) !important;
  color: var(--yan-hui) !important;
}

.book-card-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-card-title a {
  color: var(--mo) !important;
  transition: color 0.2s;
}
.book-card-title a:hover {
  color: var(--yan-zhi) !important;
}

.book-card-author {
  font-size: 0.8rem;
  color: var(--yan-hui) !important;
}

.book-card-summary {
  font-size: 0.8rem;
  color: var(--yan-hui) !important;
  line-height: 1.6;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 价格 */
.book-card .fw-bold.text-primary {
  color: var(--yan-zhi) !important;
  font-family: var(--font-body);
  font-size: 1rem;
}

/* ====== 星级评分 (金星) ====== */
.stars-container {
  display: inline-flex;
  position: relative;
  width: 5.8em;
  height: 1.4em;
  overflow: hidden;
  vertical-align: middle;
  align-items: center;
  line-height: 1;
}
.stars-container::before {
  content: '★★★★★';
  position: absolute;
  top: 0;
  left: 0;
  font-size: inherit;
  color: var(--dan-mo);
  letter-spacing: 0.15em;
}
.stars {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.stars::before {
  content: '★★★★★';
  font-size: inherit;
  color: var(--jin);
  letter-spacing: 0.15em;
}

.rating-num {
  font-size: 0.85em;
  color: var(--yan-hui);
  vertical-align: middle;
}

/* ====== Card 小按钮 ====== */
.btn-sm.btn-outline-primary {
  border: 1px solid var(--dan-mo);
  color: var(--yan-hui);
  font-size: 0.78rem;
  padding: 0.2rem 0.8rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}
.btn-sm.btn-outline-primary:hover {
  border-color: var(--yan-zhi);
  background: var(--yan-zhi);
  color: #fff;
}

/* ====== 特性卡片 (简洁) ====== */
.feature-card {
  background: var(--xue-bai);
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm);
  transition: all 0.3s;
}
.feature-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--jin-light);
}
.feature-card h3 {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mo);
  letter-spacing: 0.05em;
}

.feature-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--xuan-zhi);
  border-radius: 50%;
  border: 1px solid var(--dan-mo);
}
.feature-icon i {
  font-size: 1.5rem;
  color: var(--yan-zhi);
}

/* ====== 书单卡片 (宋册) ====== */
.collection-card {
  background: var(--xue-bai);
  border: 1px solid var(--dan-mo) !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.3s;
}
.collection-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--jin-light) !important;
}

.collection-card-img {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--collection-grad, linear-gradient(135deg, #E8E2D8, #D4C9B8));
}
.collection-card-img::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--collection-overlay, linear-gradient(135deg, rgba(var(--yan-zhi-rgb, 139,94,60),0.08), rgba(var(--jin-rgb, 196,163,90),0.12)));
}

.collection-card-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem 1rem;
}
.collection-card-overlay h3 {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--mo);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.collection-card-overlay .badge {
  background: rgba(var(--jin-rgb, 196,163,90),0.2);
  color: var(--yan-hui);
  font-weight: 400;
  font-size: 0.75rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-sm);
}
.collection-card .card-body {
  padding: 0.8rem 1rem;
}
.collection-card .card-text {
  font-size: 0.8rem;
  color: var(--yan-hui) !important;
  line-height: 1.6;
}

/* ====== 图书详情页 ====== */
.book-detail-cover {
    position: sticky;
    top: 100px;
}
.cover-wrapper {
  position: relative;
  background: var(--xue-bai);
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-wrapper img {
  max-height: 360px;
  object-fit: contain;
}


/* 如需与 tools-page-hero 不同的微调，放这里 */

.book-type-badge-detail {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  background: var(--yan-zhi);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 400;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

/* 图书信息区块 */
.book-section {
  background: var(--xue-bai);
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
}
.book-section h5,
.book-section .book-section-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--mo);
  letter-spacing: 0.05em;
}
.book-section h5 i,
.book-section .book-section-title i {
  color: var(--yan-zhi) !important;
}

.book-section.cn-border {
  border-left: 3px solid var(--jin);
}

.book-info-table td {
  border: none;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--qian-mo);
}
.book-info-table td:first-child {
  color: var(--yan-hui);
  font-weight: 500;
  width: 25%;
}

/* 联盟购买按钮 */
.btn-affiliate {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--yan-hui);
  background: var(--xue-bai);
  transition: all 0.2s;
  text-decoration: none;
}
.btn-affiliate:hover {
  border-color: var(--jin);
  color: var(--mo);
  background: var(--xuan-zhi);
}
.btn-affiliate-jd:hover {
  border-color: var(--yan-zhi);
  color: var(--yan-zhi);
}
.btn-affiliate-tmall:hover {
  border-color: var(--jin);
  color: var(--jin);
}
.btn-affiliate-dd:hover {
  border-color: var(--shui-se);
  color: var(--shui-se);
}

/* 辅助按钮（跟随主题色） */
.btn-ghost {
  color: var(--yan-hui);
  background: transparent;
  border: 1px solid var(--dan-mo);
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover {
  border-color: var(--yan-zhi);
  color: var(--yan-zhi);
  text-decoration: none;
}

/* 主题主操作按钮（替代 Bootstrap btn-primary） */
.btn-theme {
  background: var(--jin);
  color: #fff;
  border: 1px solid var(--jin);
  border-radius: var(--radius-sm);
  padding: 0.375rem 1rem;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-theme:hover {
  background: var(--yan-zhi);
  border-color: var(--yan-zhi);
  color: #fff;
  text-decoration: none;
}
.btn-theme.btn-lg {
  padding: 0.5rem 1.5rem;
  font-size: 1.125rem;
}

/* 评价区 */
.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dan-mo);
  background: var(--xuan-zhi) !important;
}
.review-avatar span {
  font-family: var(--font-title);
  font-size: 0.7rem;
  color: var(--yan-hui) !important;
}

/* ====== 书单头部 ====== */
.collection-header {
    position: relative;
}

/* ====== 搜索页 ====== */
.search-page-form .form-control {
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--xue-bai);
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--mo);
}
.search-page-form .form-control:focus {
  border-color: var(--jin);
  box-shadow: 0 0 0 2px rgba(var(--jin-rgb, 196,163,90),0.15);
}
.search-page-form .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 24px;
  background: var(--yan-zhi);
  border: none;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* CN Divider (分隔线装饰) */
.cn-divider {
  text-align: center;
  font-size: 0.8rem;
  color: var(--yan-hui);
  letter-spacing: 0.2em;
  margin: 0.5rem 0 1.5rem;
  position: relative;
}
.cn-divider::before,
.cn-divider::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--dan-mo);
  vertical-align: middle;
  margin: 0 0.8rem;
}

/* ====== 关于页 ====== */
.about-card {
  background: var(--xue-bai);
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm);
  padding: 2rem;
  position: relative;
}
.about-card h3 {
  font-family: var(--font-title);
}
.about-section-title {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mo);
  letter-spacing: 0.05em;
}
.about-advantage-title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mo);
}
.about-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2rem;
  bottom: 2rem;
  width: 3px;
  background: var(--jin);
  border-radius: 2px;
}

/* ====== 底部 ====== */
.footer {
  background: var(--xue-bai) !important;
  border-top: 1px solid var(--dan-mo) !important;
  margin-top: var(--space-lg) !important;
  padding: var(--space-lg) 0 !important;
}
.footer h6 {
  font-family: var(--font-title);
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--mo);
}
.footer-links a {
  color: var(--yan-hui) !important;
  transition: color 0.2s;
  font-size: 0.85rem;
}
.footer-links a:hover {
  color: var(--yan-zhi) !important;
}

/* ====== 面包屑 ====== */
nav[aria-label="breadcrumb"] {
  padding: 0.75rem 0;
}
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: transparent;
  padding: 0;
  margin: 0;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  line-height: 1;
}
.breadcrumb-item a {
  color: var(--yan-hui);
}
.breadcrumb-item.active {
  color: var(--mo);
}
.breadcrumb-item+.breadcrumb-item::before {
  float: none;
  display: inline-block;
  padding: 0 0.4rem;
  color: var(--dan-mo);
  content: "/";
  line-height: 1;
}

/* ====== Bootstrap Overrides (宋意覆盖) ====== */
.text-primary { color: var(--yan-zhi) !important; }
.bg-primary { background-color: var(--yan-zhi) !important; }
/* bg-opacity-10 与自定义 bg-primary 冲突时的修正：用低透明度暖色替代实色 */
.bg-primary.bg-opacity-10 {
  background-color: rgba(var(--yan-zhi-rgb, 139,94,60),0.07) !important;
  border: 1px solid rgba(var(--yan-zhi-rgb, 139,94,60),0.18) !important;
}

.btn-primary {
  background: var(--yan-zhi);
  border: 1px solid var(--yan-zhi);
  border-radius: var(--radius-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.5rem 1.5rem;
  transition: all 0.2s;
}
.btn-primary:hover {
  background: var(--yan-zhi-hover);
  border-color: var(--yan-zhi-hover);
  box-shadow: var(--shadow-sm);
}

.btn-outline-primary {
  border: 1px solid var(--dan-mo);
  color: var(--yan-hui);
  border-radius: var(--radius-sm);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-outline-primary.btn-lg {
  padding: 0.5rem 1.5rem;
  font-size: 1.125rem;
}
.btn-outline-primary:hover {
  border-color: var(--yan-zhi);
  background: var(--yan-zhi);
  color: #fff;
}

.badge.bg-primary {
  background: rgba(var(--yan-zhi-rgb, 139,94,60),0.1) !important;
  color: var(--yan-zhi) !important;
  font-weight: 400;
}

/* ====== 图片占位 ====== */
.placeholder-img {
  background: var(--xuan-zhi);
  border: 1px solid var(--dan-mo);
  border-radius: var(--radius-sm);
}

/* ====== 空状态 ====== */
.text-muted i.bi-inbox {
  color: var(--dan-mo) !important;
}

/* ====== 404 ====== */
.display-1.text-primary {
  color: var(--dan-mo) !important;
  font-family: var(--font-title);
}

/* ====== 卡片动画 (渐进) ====== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.book-card {
  animation: fadeInUp 0.4s ease both;
}
.book-card:nth-child(1) { animation-delay: 0.05s; }
.book-card:nth-child(2) { animation-delay: 0.1s; }
.book-card:nth-child(3) { animation-delay: 0.15s; }
.book-card:nth-child(4) { animation-delay: 0.2s; }
.book-card:nth-child(5) { animation-delay: 0.25s; }
.book-card:nth-child(6) { animation-delay: 0.3s; }
.book-card:nth-child(7) { animation-delay: 0.35s; }
.book-card:nth-child(8) { animation-delay: 0.4s; }

/* ====== 响应式 ====== */
@media (max-width: 768px) {
  :root {
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
  }
  .hero-section {
    padding: var(--space-lg) 0;
    text-align: center;
  }
.book-card-img {
aspect-ratio: 1 / 1;
}
  .page-header-title {
    font-size: 1.3rem;
  }
  .section-title {
    font-size: 1.3rem;
  }
  .navbar .container {
    padding: 0 12px;
  }
  .footer {
    padding: var(--space-lg) 0 !important;
  }
}

@media (max-width: 576px) {
  .hero-search .btn-primary {
    padding: 12px 16px;
    font-size: 0.9rem;
  }
.book-card-img {
aspect-ratio: 1 / 1;
}
  .book-card-body {
    padding: 0.7rem;
  }
  .cover-wrapper {
    padding: 1rem;
  }
}

/* ====== 年级 chip 配色（data-grade 驱动） ====== */
.grade-chip {
    --chip-hover-border: var(--jin);
    --chip-hover-text: var(--mo);
}
.grade-chip[data-grade="0"] {
    /* 学前 — 使用主题金色 */
    --chip-hover-border: var(--jin);
    --chip-hover-text: var(--yan-zhi-hover);
}
.grade-chip[data-grade="1"],.grade-chip[data-grade="2"],
.grade-chip[data-grade="3"],.grade-chip[data-grade="4"],
.grade-chip[data-grade="5"],.grade-chip[data-grade="6"] {
    /* 小学 — 使用主题绿色 */
    --chip-hover-border: var(--he-lv);
    --chip-hover-text: var(--he-lv-hover);
}
.grade-chip[data-grade="7"],.grade-chip[data-grade="8"],
.grade-chip[data-grade="9"] {
    /* 初中 — 使用主题水色 */
    --chip-hover-border: var(--shui-se);
    --chip-hover-text: var(--shui-se);
}
.grade-chip:hover {
    border-color: var(--chip-hover-border);
}
.grade-chip:hover .grade-chip-text {
    color: var(--chip-hover-text);
}
.grade-chip-active {
    border-color: var(--chip-hover-border);
    background: rgba(0,0,0,0.03);
}
.grade-chip-active .grade-chip-text {
    color: var(--chip-hover-text);
    font-weight: 700;
}

/* ====== 移动端底部固定购买栏 ====== */
.mobile-purchase-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--xue-bai);
    border-top: 1px solid var(--dan-mo);
    padding: 10px 16px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    align-items: center;
    gap: 12px;
}
@media (max-width: 991px) {
    .mobile-purchase-bar.is-visible {
        display: flex;
    }
}
.mpb-price {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.mpb-label {
    font-size: 0.7rem;
    color: var(--yan-hui);
}
.mpb-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--yan-zhi);
}
.mpb-btns {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}
.mpb-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--yan-zhi);
    color: #fff;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.mpb-btn:hover { opacity: 0.85; color: #fff; }

/* ====== 回到顶部按钮 ====== */
.back-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1030;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
    color: var(--yan-hui);
    font-size: 1rem;
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--yan-zhi);
    color: #fff;
    border-color: var(--yan-zhi);
}

/* ====== 评分人数 ====== */
.rating-count {
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-left: 4px;
}

/* ====== 文章列表页 Header ====== */
.article-page-count {
    font-size: 0.85rem;
    color: var(--yan-hui);
    white-space: nowrap;
    margin: 0;
}

/* ====== 文章卡片 ====== */
.article-card {
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    background: var(--xue-bai);
}
.article-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.article-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.article-card-img-wrap {
    overflow: hidden;
    aspect-ratio: 2/1;
    background: var(--xuan-zhi);
}
.article-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.article-card:hover .article-card-img {
    transform: scale(1.04);
}
.article-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.article-card-body-compact {
    padding: 14px;
}
.article-card-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    min-height: 22px;
}
.article-card-title {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: var(--mo);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card-title-sm {
    font-size: 0.92rem;
}
.article-card-sub {
    font-size: 0.82rem;
    color: var(--yan-hui);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card-summary {
    font-size: 0.85rem;
    color: var(--yan-hui);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}
.article-card-summary-sm {
    -webkit-line-clamp: 2;
    margin-bottom: 6px;
}
.article-card-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--dan-mo);
}
.article-grade-badge {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.1);
    color: var(--yan-zhi);
    font-weight: 500;
    border: none;
}

/* 标签组件（列表/详情通用）*/
.article-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.article-tag-chip {
    font-size: 0.72rem;
    border: 1px solid var(--dan-mo);
    color: var(--yan-hui);
    background: transparent;
    padding: 1px 7px;
    border-radius: 9px;
    white-space: nowrap;
}
.article-tag-chip-lg {
    font-size: 0.82rem;
    padding: 3px 10px;
}

/* ====== 文章详情页 Header ====== */
.article-detail-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}
.article-cover-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1.75rem;
    aspect-ratio: 2/1;
    background: var(--xuan-zhi);
}
.article-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.article-tags-section {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dan-mo);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* 相关图书区 */
.article-related-books {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--dan-mo);
}
.article-related-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--mo);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.article-related-title::before {
    content: '';
    width: 3px;
    height: 1em;
    background: var(--jin);
    border-radius: 2px;
    flex-shrink: 0;
}
.article-book-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    height: 100%;
}
.article-book-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.article-book-cover {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--xuan-zhi);
}
.article-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.article-book-info {
    padding: 10px;
}
.article-book-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mo);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 3px;
    line-height: 1.35;
}
.article-book-author {
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-bottom: 0;
}
.article-detail-footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dan-mo);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ====== 文章详情正文 ====== */
.article-content {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--qian-mo);
}
.article-content h2 {
    font-size: 1.2rem;
    font-family: var(--font-title);
    color: var(--mo);
    margin-top: 2.2rem;
    margin-bottom: 0.8rem;
    padding: 0.4rem 0.75rem;
    border-left: 3px solid var(--jin);
    background: rgba(var(--jin-rgb, 196,163,90), 0.07);
    border-radius: 0 3px 3px 0;
}
.article-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mo);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.article-content p {
    margin-bottom: 1rem;
}
.article-content ul, .article-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.article-content li {
    margin-bottom: 0.4rem;
}
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.article-content th, .article-content td {
    border: 1px solid var(--dan-mo);
    padding: 9px 12px;
    text-align: left;
}
.article-content th {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.08);
    font-weight: 600;
    color: var(--mo);
    font-family: var(--font-title);
}
.article-content blockquote {
    border-left: 4px solid var(--jin);
    padding: 10px 16px 10px 18px;
    margin: 1.2rem 0;
    background: rgba(var(--jin-rgb, 196,163,90), 0.06);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--yan-hui);
    font-style: italic;
}
.article-content strong {
    color: var(--mo);
}
.article-content code {
    background: var(--dan-mo);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.88em;
}


/* ====== 学科快速导航卡片 ====== */
.section-padding-sm {
    padding: 1.5rem 0;
    background: var(--xue-bai);
    border-bottom: 1px solid var(--dan-mo);
}
.subject-nav-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--mo);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.subject-nav-card:hover {
    border-color: var(--jin);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    color: var(--mo);
}
.subject-nav-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--jin-rgb, 196,163,90),0.15), rgba(var(--jin-rgb, 196,163,90),0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--jin);
    flex-shrink: 0;
}
.subject-nav-icon svg {
    width: 20px;
    height: 20px;
}
.subject-nav-info {
    flex: 1;
    min-width: 0;
}
.subject-nav-name {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-title);
    letter-spacing: 0.05em;
}
.subject-nav-count {
    display: block;
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-top: 2px;
}
.subject-nav-arrow {
    color: var(--yan-hui);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ====== Hero 口碑数据面板 ====== */
/* Panel A — 口碑数据 */
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 8px;
}
.hero-stat-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 28px 16px 22px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.hero-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--jin-light);
}
.hero-stat-num {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--yan-zhi);
    font-family: var(--font-title);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.hero-stat-num small {
    font-size: 1.1rem;
    font-weight: 600;
}
.hero-stat-label {
    display: block;
    font-size: 0.82rem;
    color: var(--yan-hui);
    margin-top: 6px;
    letter-spacing: 0.06em;
}


/* ══════════════════════════════════════
   年级页 · 学科卡片
══════════════════════════════════════ */

.subject-card--empty {
    opacity: 0.45;
    pointer-events: none;
}

/* 年级快速跳转 chip */
.grade-chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--qian-mo);
    background: var(--xuan-zhi);
    border: 1px solid var(--dan-mo);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.grade-chip:hover,
.grade-chip.active {
    background: rgba(var(--jin-rgb), 0.1);
    color: var(--mo);
    border-color: var(--jin);
    text-decoration: none;
}

/* ══════════════════════════════════════
   年级+学科书单页
══════════════════════════════════════ */

.subject-icon-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--yan-zhi);
}
.subject-icon-lg i {
    font-size: 2.5rem;
    line-height: 1;
}
.subject-icon-lg svg {
    width: 2.5rem;
    height: 2.5rem;
}
/* 学科页年级入口条 */
.subject-grade-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 书型筛选条 */
.book-type-filter {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.btn-filter {
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--dan-mo);
    background: transparent;
    font-size: 0.85rem;
    color: var(--qian-mo);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-filter.active,
.btn-filter:hover {
    background: var(--yan-zhi);
    color: #fff;
    border-color: var(--yan-zhi);
}

/* 书卡封面比例容器 */
.book-cover-wrap.ratio-3x4 {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--xuan-zhi);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.book-cover-wrap.ratio-3x4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 空状态 */
.empty-state-icon {
    font-size: 3rem;
}

/* ====== 分页 ====== */
.pagination-wrap {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
.pagination-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pagination-btn:hover {
    border-color: var(--jin);
    color: var(--yan-zhi);
    background: var(--xue-bai);
}
.pagination-item.active .pagination-btn {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
    font-weight: 600;
}
.pagination-item.disabled .pagination-btn {
    opacity: 0.35;
    pointer-events: none;
}
.pagination-ellipsis span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: var(--yan-hui);
    font-size: 0.9rem;
}

/* ====== 文章分类导航 ====== */
.article-cat-nav {
    background: var(--xue-bai);
    border-bottom: 1px solid var(--dan-mo);
    position: sticky;
    top: 64px;
    z-index: 100;
}
.article-cat-list {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
}
.article-cat-list::-webkit-scrollbar { display: none; }
.article-cat-btn {
    flex-shrink: 0;
    padding: 5px 14px;
    border: 1px solid var(--dan-mo);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--yan-hui);
    background: transparent;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}
.article-cat-btn:hover {
    border-color: var(--jin);
    color: var(--yan-zhi);
}
.article-cat-btn.active {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
    font-weight: 500;
}
.article-cat-chip {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.1);
    color: var(--yan-zhi);
    font-weight: 500;
}
.article-cat-chip-sm {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 8px;
}

/* 文章详情元信息（作者、日期等）*/
.article-meta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.article-meta-info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--yan-hui);
    margin: 0;
    line-height: 1.4;
}
.article-author {
    font-weight: 500;
}
.article-date {
}

/* ====== 文章详情侧边栏 ====== */
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 80px;
}

.sidebar-widget {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.sidebar-widget-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--dan-mo);
}

/* 同分类文章列表 */
.sidebar-article-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.sidebar-article-item {
    border-bottom: 1px solid var(--dan-mo);
}

.sidebar-article-item:last-child {
    border-bottom: none;
}

.sidebar-article-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.6rem 0;
    text-decoration: none;
    color: var(--qian-mo);
    transition: color 0.15s;
}

.sidebar-article-link:hover {
    color: var(--yan-zhi);
}

.sidebar-article-title {
    font-size: 0.88rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.sidebar-more-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    color: var(--yan-zhi);
    text-decoration: none;
    font-weight: 500;
}

.sidebar-more-link:hover {
    color: var(--yan-zhi-hover);
    text-decoration: underline;
}

/* 分类导航网格 */
.sidebar-cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sidebar-cat-btn {
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--dan-mo);
    color: var(--yan-hui);
    text-decoration: none;
    transition: all 0.15s;
    line-height: 1.6;
}

.sidebar-cat-btn:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.05);
}

.sidebar-cat-btn.active {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
}

/* 年级快速入口 */
.sidebar-grade-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sidebar-grade-link {
    font-size: 0.82rem;
    text-align: center;
    padding: 5px 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--dan-mo);
    color: var(--yan-hui);
    text-decoration: none;
    transition: all 0.15s;
}

.sidebar-grade-link:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.05);
}

@media (max-width: 991.98px) {
    .article-sidebar {
        position: static;
    }
}

/* ====== 猜你喜欢 ====== */
.article-recommend {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dan-mo);
}

.article-recommend-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 1rem;
}

.article-recommend-card {
    display: block;
    text-decoration: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--dan-mo);
    background: var(--xue-bai);
    transition: box-shadow 0.18s, transform 0.18s;
    height: 100%;
}

.article-recommend-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.article-recommend-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--xuan-zhi);
}

.article-recommend-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-recommend-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.article-recommend-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--qian-mo);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ══════════════════════════════════════
   工具中心 · 通用
══════════════════════════════════════ */

/* 学科 tab */
.tools-subject-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tools-subject-tab {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--dan-mo);
    background: var(--xue-bai);
    color: var(--qian-mo);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tools-subject-tab.active,
.tools-subject-tab:hover {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
}

/* 工具卡片 */
.tool-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    color: var(--mo);
    height: 100%;
}
.tool-card:hover {
    border-color: var(--jin);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    color: var(--mo);
}
.tool-card--disabled {
    opacity: 0.55;
    cursor: default;
}
.tool-card--disabled:hover {
    border-color: var(--dan-mo);
    box-shadow: none;
    transform: none;
}
.tool-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--jin-rgb, 196,163,90),0.18), rgba(var(--jin-rgb, 196,163,90),0.07));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--jin);
    flex-shrink: 0;
}
.tool-card-body {
    flex: 1;
}
.tool-card-name {
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-title);
    color: var(--mo);
    margin-bottom: 4px;
    letter-spacing: 0.03em;
}
.tool-card-desc {
    font-size: 0.82rem;
    color: var(--yan-hui);
    line-height: 1.55;
    margin: 0;
}
.tool-card-footer {
    margin-top: auto;
}
.tool-card-live-badge {
    font-size: 0.82rem;
    color: var(--yan-zhi);
    font-weight: 600;
}
.tool-card-soon-badge {
    font-size: 0.78rem;
    color: var(--yan-hui);
    background: rgba(0,0,0,0.04);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ══════════════════════════════════════
   书单生成器 · 步骤条
══════════════════════════════════════ */

.booklist-steps {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.booklist-step {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.booklist-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dan-mo);
    color: var(--yan-hui);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.booklist-step.active .booklist-step-num {
    background: var(--yan-zhi);
    color: #fff;
}
.booklist-step-label {
    font-size: 0.82rem;
    color: var(--yan-hui);
    transition: color 0.2s;
}
.booklist-step.active .booklist-step-label {
    color: var(--mo);
    font-weight: 600;
}
.booklist-step-arrow {
    margin: 0 8px;
    color: var(--dan-mo);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   书单生成器 · 筛选区
══════════════════════════════════════ */

.booklist-filter-panel {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}
.booklist-filter-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--yan-hui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.booklist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.booklist-chip {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--dan-mo);
    background: var(--xue-bai);
    color: var(--qian-mo);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}
.booklist-chip.active {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
}
.booklist-chip:hover:not(.active) {
    border-color: var(--jin-light);
    background: rgba(var(--jin-rgb, 196,163,90),0.08);
}

/* ══════════════════════════════════════
   书单生成器 · 书籍网格
══════════════════════════════════════ */

.booklist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .booklist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 480px) {
    .booklist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.booklist-card {
    background: var(--xue-bai);
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.booklist-card:hover {
    border-color: var(--jin-light);
}
.booklist-card.selected {
    border-color: var(--yan-zhi);
    box-shadow: 0 0 0 1px rgba(var(--yan-zhi-rgb, 139,94,60),0.15);
}
.booklist-card-cover {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--xuan-zhi);
}
.booklist-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.booklist-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--yan-zhi);
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.booklist-card-info {
    padding: 8px;
}
.booklist-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mo);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.booklist-card-grade {
    font-size: 0.7rem;
    color: var(--yan-hui);
}
.booklist-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 0;
}

/* ══════════════════════════════════════
   书单生成器 · 操作栏
══════════════════════════════════════ */

.booklist-action-bar {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.booklist-action-info {
    font-size: 0.9rem;
    color: var(--qian-mo);
}
.booklist-generate-btn {
    background: var(--yan-zhi);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 22px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.booklist-generate-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.booklist-generate-btn:not(:disabled):hover {
    background: var(--yan-zhi-hover);
}

/* ══════════════════════════════════════
   书单生成器 · 清单预览
══════════════════════════════════════ */

.booklist-preview {
    background: var(--xue-bai);
    border: 2px solid var(--jin);
    border-radius: var(--radius-md);
    padding: 24px;
}
.booklist-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dan-mo);
}
.booklist-preview-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: var(--font-title);
    margin-bottom: 4px;
}
.booklist-preview-meta {
    font-size: 0.78rem;
    color: var(--yan-hui);
}
.booklist-preview-qr {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--xue-bai);
    display: flex;
    align-items: center;
    justify-content: center;
}
.booklist-preview-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .booklist-preview-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
.preview-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.preview-item-cover {
    width: 40px;
    height: 54px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--xuan-zhi);
}
.preview-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mo);
    line-height: 1.35;
    margin-bottom: 3px;
}
.preview-item-author {
    font-size: 0.75rem;
    color: var(--yan-hui);
    margin-bottom: 2px;
}
.preview-item-grade {
    font-size: 0.72rem;
    color: var(--yan-hui);
}
.booklist-preview-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--dan-mo);
}
.booklist-btn-print {
    background: var(--yan-zhi);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.booklist-btn-print:hover {
    background: var(--yan-zhi-hover);
}
.booklist-btn-link {
    background: var(--xue-bai);
    color: var(--yan-zhi);
    border: 1px solid var(--yan-zhi);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.booklist-btn-link:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

/* ══════════════════════════════════════
   打印样式
══════════════════════════════════════ */

.print-only { display: none; }

.booklist-print-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dan-mo);
}

@media print {
    /* 隐藏非清单内容 */
    .navbar,
    .footer,
    .back-to-top,
    .no-print {
        display: none !important;
    }
    /* main 下除预览区和口算区域外全部隐藏 */
    .main-content > *:not(#previewSection):not(#quizSection):not(#resultSection):not(#configSection) {
        display: none !important;
    }

    /* 仅显示预览区 */
    #previewSection {
        display: block !important;
    }
    .print-only {
        display: flex !important;
    }

    .booklist-preview {
        border: none;
        padding: 0;
    }
    .booklist-preview-header {
        border: 1px solid var(--gray-300);
    }
    body {
        background: var(--xue-bai);
        font-size: 11pt;
    }
    .preview-item-cover {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .booklist-preview-qr img {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    a[href]::after {
        content: none !important;
    }
}

/* ══════════════════════════════════════
   古诗词默写练习 · 选诗区
══════════════════════════════════════ */

.dictation-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--dan-mo);
    margin-bottom: 20px;
}
.dictation-tab {
    padding: 8px 20px;
    border: none;
    background: none;
    color: var(--yan-hui);
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.dictation-tab.active {
    color: var(--yan-zhi);
    border-bottom-color: var(--yan-zhi);
    font-weight: 600;
}
.dictation-poem-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .dictation-poem-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dictation-poem-list { grid-template-columns: 1fr; }
}
.dictation-poem-card {
    background: var(--xue-bai);
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.dictation-poem-card:hover {
    border-color: var(--jin);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.dictation-poem-card-title {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--mo);
    margin-bottom: 4px;
}
.dictation-poem-card-meta {
    font-size: 0.75rem;
    color: var(--yan-hui);
    margin-bottom: 6px;
}
.dictation-poem-card-preview {
    font-family: var(--font-title);
    font-size: 0.82rem;
    color: var(--qian-mo);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dictation-custom-input {
    width: 100%;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-title);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--qian-mo);
    background: var(--xue-bai);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}
.dictation-custom-input:focus {
    border-color: var(--yan-zhi);
}
.dictation-start-btn {
    background: var(--yan-zhi);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: inline-flex;
    align-items: center;
}
.dictation-start-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.dictation-start-btn:not(:disabled):hover {
    background: var(--yan-zhi-hover);
}

/* ══════════════════════════════════════
   古诗词默写练习 · 练习区
══════════════════════════════════════ */

.dictation-poem-name {
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mo);
    margin-right: 10px;
}
.dictation-poem-author {
    font-size: 0.85rem;
    color: var(--yan-hui);
}
.dictation-poem-area {
    font-family: var(--font-title);
    font-size: 1.1rem;
    line-height: 2.8;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px 28px;
}
.dictation-blank {
    display: inline-block;
    border: none;
    border-bottom: 2px solid var(--qian-mo);
    background: transparent;
    text-align: center;
    font-family: var(--font-title);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 2px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    vertical-align: baseline;
    min-width: 1.4em;
}
.dictation-blank:focus {
    border-bottom-color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.05);
}
.dictation-blank.correct {
    border-bottom-color: var(--success);
    color: var(--success);
    background: rgba(var(--success-rgb),0.06);
}
.dictation-blank.wrong {
    border-bottom-color: var(--danger);
    color: var(--danger);
    background: rgba(var(--danger-rgb),0.06);
}
.dictation-blank:disabled {
    cursor: default;
}
.dictation-submit-btn {
    background: var(--yan-zhi);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dictation-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.dictation-submit-btn:not(:disabled):hover {
    background: var(--yan-zhi-hover);
}
.dictation-back-btn {
    background: var(--xue-bai);
    color: var(--yan-zhi);
    border: 1px solid var(--yan-zhi);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
}
.dictation-back-btn:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

/* ══════════════════════════════════════
   古诗词默写练习 · 结果区
══════════════════════════════════════ */

.dictation-score {
    text-align: center;
    padding: 24px 20px 16px;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
}
.dictation-score-num {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: var(--font-title);
    letter-spacing: 0.05em;
}
.dictation-score-label {
    font-size: 0.9rem;
    color: var(--yan-hui);
    margin-top: 6px;
}
.dictation-result-correct {
    color: var(--success);
    font-weight: 700;
    border-bottom: 2px solid var(--success);
}
.dictation-result-wrong {
    color: var(--danger);
    font-weight: 700;
    border-bottom: 2px solid var(--danger);
    text-decoration: line-through;
}
.dictation-result-hint {
    font-size: 0.8em;
    color: var(--success);
    margin-left: 2px;
    font-weight: 600;
}

/* ══════════════════════════════════════
   单位换算器
   ══════════════════════════════════════ */

.uc-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    max-width: 720px;
    margin: 0 auto;
}

/* 类别栏 */
.uc-category-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dan-mo);
}
.uc-cat-btn {
    padding: 6px 14px;
    border: 1px solid var(--dan-mo);
    border-radius: 20px;
    background: transparent;
    color: var(--yan-hui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.uc-cat-btn:hover {
    border-color: var(--jin);
    color: var(--mo);
}
.uc-cat-btn.active {
    background: var(--yan-zhi);
    color: #fff;
    border-color: var(--yan-zhi);
}

/* 换算面板 */
.uc-converter-panel {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.uc-side {
    flex: 1;
    min-width: 0;
}
.uc-label {
    display: block;
    font-size: 0.75rem;
    color: var(--yan-hui);
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}
.uc-unit-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.uc-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-cn-sans);
    color: var(--mo);
    background: var(--xue-bai);
    outline: none;
    transition: border-color 0.15s;
    width: 0;
}
.uc-input:focus {
    border-color: var(--yan-zhi);
}
.uc-input::placeholder {
    color: var(--dan-mo);
    font-weight: 400;
}
.uc-select {
    width: 130px;
    flex-shrink: 0;
    padding: 10px 8px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--qian-mo);
    background: var(--xue-bai);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.uc-select:focus {
    border-color: var(--yan-zhi);
}

/* 结果框（仿输入框样式，只读） */
.uc-result {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-cn-sans);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.04);
    cursor: pointer;
    user-select: all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s;
    line-height: 1.5;
}

/* 互换按钮列 */
.uc-swap-col {
    display: flex;
    align-items: center;
    padding-bottom: 0;
}
.uc-swap-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--dan-mo);
    border-radius: 50%;
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uc-swap-btn:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

/* 常用换算参考 */
.uc-reference {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--dan-mo);
}
.uc-reference-title {
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-bottom: 8px;
}
.uc-reference-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.uc-ref-item {
    font-size: 0.8rem;
    color: var(--qian-mo);
    font-family: var(--font-cn-sans);
    letter-spacing: 0.02em;
}

/* 换算类别的学习提示文字 */
.uc-reference-desc {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.05);
    border-left: 3px solid var(--qian-jin);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--yan-hui);
    font-family: var(--font-cn-sans);
}

/* ══════════════════════════════════════
   口算生成器
   ══════════════════════════════════════ */

.arith-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    max-width: 640px;
    margin: 0 auto;
}

.arith-config-row {
    margin-bottom: 18px;
}

.arith-label {
    display: block;
    font-size: 0.82rem;
    color: var(--yan-hui);
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.arith-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.arith-chip {
    padding: 6px 14px;
    border: 1px solid var(--dan-mo);
    border-radius: 20px;
    background: transparent;
    color: var(--yan-hui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.arith-chip:hover {
    border-color: var(--jin);
    color: var(--mo);
}

.arith-chip.active {
    background: var(--yan-zhi);
    color: #fff;
    border-color: var(--yan-zhi);
}

.arith-config-action {
    text-align: center;
    margin-top: 20px;
}

.arith-start-btn {
    background: var(--yan-zhi);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.arith-start-btn:hover {
    background: var(--yan-zhi-hover);
}

/* 答题区 */

.arith-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--yan-hui);
}

.arith-timer {
    font-family: var(--font-cn-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

.arith-quiz-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    margin-bottom: 16px;
}

.arith-question-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dan-mo);
    break-inside: avoid;
}

.arith-question-row:nth-last-child(-n+2) {
    border-bottom: none;
}

.arith-question-row:only-child {
    border-bottom: 1px solid var(--dan-mo);
}


.arith-q-text {
    font-family: var(--font-cn-sans);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mo);
    min-width: 100px;
    letter-spacing: 0.03em;
}

.arith-answer-input {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-cn-sans);
    color: var(--mo);
    text-align: center;
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}

.arith-answer-input::-webkit-outer-spin-button,
.arith-answer-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.arith-answer-input:focus {
    border-color: var(--yan-zhi);
}

.arith-input-correct {
    border-color: var(--success) !important;
    color: var(--success) !important;
    background: rgba(var(--success-rgb),0.06);
}

.arith-input-wrong {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    background: rgba(var(--danger-rgb),0.06);
}

.arith-quiz-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.arith-submit-btn {
    background: var(--yan-zhi);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 22px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.arith-submit-btn:hover {
    background: var(--yan-zhi-hover);
}

.arith-back-btn {
    background: var(--xue-bai);
    color: var(--yan-zhi);
    border: 1px solid var(--yan-zhi);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.arith-back-btn:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

/* 结果区 */

.arith-result-score {
    text-align: center;
    padding: 20px 16px;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.arith-result-num {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: var(--font-title);
    letter-spacing: 0.05em;
}

.arith-result-label {
    font-size: 0.9rem;
    color: var(--yan-hui);
    margin-top: 6px;
}

.arith-wrong-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--dan-mo);
    font-size: 0.88rem;
    flex-wrap: wrap;
}

.arith-wrong-q {
    font-weight: 600;
    color: var(--mo);
    min-width: 80px;
}

.arith-wrong-your {
    color: var(--danger);
}

.arith-wrong-ans {
    color: var(--success);
    font-weight: 600;
}

/* 打印按钮 */
.arith-print-btn {
    background: var(--gray-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 22px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.arith-print-btn:hover {
    background: var(--gray-700);
}

/* 打印样式（口算） */
@media print {
    /* 打印时只显示标记为 data-print-show 的 section */
    #configSection, #quizSection, #resultSection { display: none !important; }
    #configSection[data-print-show],
    #quizSection[data-print-show],
    #resultSection[data-print-show] { display: block !important; }

    .navbar, .footer, .breadcrumb, .tools-page-hero,
    #configSection, .arith-quiz-footer,
    #backConfigBtn, #retryBtn, #backFromResultBtn, #generateBtn,
    .arith-submit-btn, .arith-print-btn, .arith-back-btn,
    .arith-start-btn, .arith-config-action {
        display: none !important;
    }
    .arith-card {
        box-shadow: none;
        border: 1px solid var(--gray-300);
        max-width: 100%;
        padding: 16px;
    }
    .arith-quiz-body {
        grid-template-columns: 1fr 1fr;
        gap: 4px 16px;
    }
    .arith-question-row {
        border: 1px solid var(--gray-200);
        page-break-inside: avoid;
    }
    .arith-answer-input {
        border: none;
        border-bottom: 1px solid var(--gray-400);
        background: transparent;
        color: var(--mo);
    }
}

/* ══════════════════════════════════════
   随机点名器
   ══════════════════════════════════════ */

.picker-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}

.picker-card-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.picker-label {
    display: block;
    font-size: 0.82rem;
    color: var(--yan-hui);
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.picker-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--mo);
    background: var(--xuan-zhi);
    resize: vertical;
    outline: none;
    font-family: var(--font-cn-sans);
    transition: border-color 0.15s;
}

.picker-textarea:focus {
    border-color: var(--yan-zhi);
}

.picker-name-count {
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-top: 6px;
}

.picker-name-count span {
    font-weight: 700;
    color: var(--yan-zhi);
}

.picker-btn {
    padding: 7px 16px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.picker-btn:hover {
    border-color: var(--jin);
    color: var(--mo);
}

.picker-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.picker-btn-outline {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
}

.picker-btn-outline:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

.picker-btn-lg {
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 700;
}

.picker-btn-primary {
    background: var(--yan-zhi);
    color: #fff;
    border-color: var(--yan-zhi);
}

.picker-btn-primary:hover {
    background: var(--yan-zhi-hover);
    color: #fff;
}

.picker-btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.picker-btn-danger:hover {
    background: var(--danger-hover);
    color: #fff;
}

.picker-display {
    width: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    background: var(--xuan-zhi);
    padding: 20px;
}

.picker-result-text {
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 8vw, 3.2rem);
    font-weight: 700;
    color: var(--yan-zhi);
    text-align: center;
    letter-spacing: 0.08em;
    transition: all 0.05s;
    line-height: 1.3;
}

.picker-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.picker-history {
    width: 100%;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--dan-mo);
}

.picker-history-title {
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.picker-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.picker-history-tag {
    padding: 4px 10px;
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.08);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--yan-hui);
}

/* ══════════════════════════════════════
   单词闪卡
   ══════════════════════════════════════ */

.fc-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    max-width: 480px;
    margin: 0 auto;
}

.fc-label {
    display: block;
    font-size: 0.82rem;
    color: var(--yan-hui);
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.fc-deck-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.fc-deck-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.fc-deck-btn:hover {
    border-color: var(--jin);
    background: var(--xuan-zhi);
}

.fc-deck-btn.active {
    border-color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

.fc-deck-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mo);
}

.fc-deck-count {
    font-size: 0.78rem;
    color: var(--yan-hui);
}

.fc-config-action {
    text-align: center;
}

.fc-start-btn {
    background: var(--yan-zhi);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fc-start-btn:hover {
    background: var(--yan-zhi-hover);
}

.fc-start-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 进度 */

.fc-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.82rem;
    color: var(--yan-hui);
}

.fc-stat-badges {
    display: flex;
    gap: 6px;
}

.fc-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}

.fc-badge-known {
    background: rgba(var(--success-rgb),0.1);
    color: var(--success);
}

.fc-badge-unknown {
    background: rgba(var(--danger-rgb),0.1);
    color: var(--danger);
}

.fc-progress-bar {
    height: 4px;
    background: var(--dan-mo);
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}

.fc-progress-fill {
    height: 100%;
    background: var(--he-lv);
    border-radius: 2px;
    transition: width 0.3s;
}

/* 闪卡翻转 */

.fc-flip-card {
    perspective: 1000px;
    cursor: pointer;
    margin-bottom: 18px;
}

.fc-flip-inner {
    position: relative;
    width: 100%;
    min-height: 220px;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.fc-flip-inner.flipped {
    transform: rotateX(180deg);
}

.fc-flip-front,
.fc-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    background: var(--xuan-zhi);
    padding: 28px 20px;
}

.fc-flip-back {
    transform: rotateX(180deg);
}

.fc-word {
    font-family: var(--font-cn-sans);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--mo);
    letter-spacing: 0.03em;
    margin-bottom: 12px;
    text-align: center;
}

.fc-hint {
    font-size: 0.75rem;
    color: var(--dan-mo);
    letter-spacing: 0.05em;
}

.fc-meaning {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--yan-zhi);
    margin-bottom: 10px;
    text-align: center;
}

.fc-example {
    font-size: 0.85rem;
    color: var(--yan-hui);
    text-align: center;
    line-height: 1.5;
    max-width: 280px;
}

/* 操作按钮 */

.fc-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 12px;
}

.fc-btn {
    padding: 8px 20px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.fc-btn:hover {
    border-color: var(--jin);
    color: var(--mo);
}

.fc-btn-outline {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
}

.fc-btn-outline:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

.fc-btn-known {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.fc-btn-known:hover {
    background: var(--success-hover);
    color: #fff;
    border-color: var(--success-hover);
}

.fc-btn-unknown {
    background: var(--xue-bai);
    color: var(--danger);
    border-color: var(--danger);
}

.fc-btn-unknown:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.fc-nav-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.fc-finish-row {
    text-align: center;
}

/* 报告区 */

.fc-report-title {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mo);
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.fc-report-stats {
    text-align: center;
    padding: 16px;
    background: var(--xuan-zhi);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.fc-report-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: var(--font-title);
}

.fc-report-desc {
    font-size: 0.9rem;
    color: var(--yan-hui);
    margin-top: 6px;
}

.fc-report-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 10px;
}

.fc-report-word-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--dan-mo);
}

.fc-report-word-en {
    font-family: var(--font-cn-sans);
    font-weight: 600;
    color: var(--mo);
}

.fc-report-word-cn {
    color: var(--yan-hui);
}

/* ══════════════════════════════════════
   古诗文背诵助手
   ══════════════════════════════════════ */

.rc-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    max-width: 560px;
    margin: 0 auto;
}

.rc-label {
    display: block;
    font-size: 0.82rem;
    color: var(--yan-hui);
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.rc-poem-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 18px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.rc-poem-list::-webkit-scrollbar {
    width: 4px;
}
.rc-poem-list::-webkit-scrollbar-thumb {
    background: var(--dan-mo);
    border-radius: 2px;
}

.rc-poem-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.rc-poem-btn:hover {
    border-color: var(--jin);
    background: var(--xuan-zhi);
}

.rc-poem-btn.active {
    border-color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

.rc-poem-btn-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mo);
}

.rc-poem-btn-meta {
    font-size: 0.75rem;
    color: var(--yan-hui);
    margin-top: 2px;
}

.rc-config-action {
    text-align: center;
}

.rc-start-btn {
    background: var(--yan-zhi);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rc-start-btn:hover {
    background: var(--yan-zhi-hover);
}

.rc-start-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 学习区顶部 */

.rc-study-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.rc-header-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dan-mo);
    border-radius: 50%;
    background: var(--xue-bai);
    color: var(--yan-hui);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.rc-header-btn:hover {
    border-color: var(--jin);
    color: var(--mo);
}

.rc-poem-title-display {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mo);
    letter-spacing: 0.05em;
}

.rc-poem-author-display {
    font-size: 0.8rem;
    color: var(--yan-hui);
}

.rc-speak-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--dan-mo);
    border-radius: 50%;
    background: var(--xue-bai);
    color: var(--yan-zhi);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.rc-speak-btn:hover {
    background: var(--yan-zhi);
    color: #fff;
    border-color: var(--yan-zhi);
}

/* 模式 Tab */

.rc-mode-tabs {
    display: flex;
    gap: 4px;
    background: var(--xuan-zhi);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    padding: 3px;
    margin-bottom: 20px;
}

.rc-mode-tab {
    flex: 1;
    padding: 7px 10px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--yan-hui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.rc-mode-tab:hover {
    color: var(--mo);
}

.rc-mode-tab.active {
    background: var(--xue-bai);
    color: var(--yan-zhi);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* 诗歌展示 */

.rc-poem-display {
    padding: 24px 16px;
    background: var(--xuan-zhi);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    min-height: 180px;
}

.rc-line {
    font-family: var(--font-title);
    font-size: 1.3rem;
    line-height: 2.2;
    color: var(--mo);
    text-align: center;
    letter-spacing: 0.08em;
    transition: all 0.3s;
}

.rc-line-done {
    color: var(--success);
    font-size: 1.1rem;
}

.rc-line-current {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--yan-zhi);
}

.rc-line-pending {
    color: var(--dan-mo);
    font-size: 1rem;
}

.rc-line-hint {
    font-size: 0.78rem;
    color: var(--yan-hui);
    text-align: center;
    margin-top: 6px;
    font-family: var(--font-cn-sans);
}

.rc-cursor {
    display: inline-block;
    animation: rc-blink 1s step-end infinite;
    color: var(--yan-zhi);
    font-weight: 700;
}

@keyframes rc-blink {
    50% { opacity: 0; }
}

.rc-char {
    display: inline-block;
    padding: 0 1px;
}

.rc-char-blank {
    display: inline-block;
    width: 1.3em;
    text-align: center;
    color: var(--yan-zhi);
    font-weight: 700;
    border-bottom: 2px solid var(--yan-zhi);
    margin: 0 2px;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 0;
}

.rc-char-blank:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.1);
    border-radius: 2px;
}

.rc-char-revealed {
    color: var(--success);
    font-weight: 600;
}

/* 模式控制按钮 */

.rc-mode-controls {
    margin-bottom: 16px;
    min-height: 36px;
}

.rc-mode-btn {
    padding: 7px 18px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rc-mode-btn:hover {
    border-color: var(--jin);
    color: var(--mo);
}

.rc-mode-btn-primary {
    background: var(--yan-zhi);
    color: #fff;
    border-color: var(--yan-zhi);
}

.rc-mode-btn-primary:hover {
    background: var(--yan-zhi-hover);
    color: #fff;
}

.rc-mode-btn-outline {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
}

.rc-mode-btn-outline:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

.rc-stat {
    font-size: 0.8rem;
    color: var(--yan-hui);
    margin-left: 12px;
}

.rc-study-footer {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid var(--dan-mo);
}

.rc-finish-btn {
    padding: 6px 16px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rc-finish-btn:hover {
    border-color: var(--jin);
    color: var(--mo);
}

@media (max-width: 600px) {
    .rc-card {
        padding: 16px;
    }
    .rc-poem-list {
        grid-template-columns: 1fr;
        max-height: 300px;
    }
    .rc-line {
        font-size: 1.1rem;
        line-height: 2;
    }
    .rc-poem-display {
        padding: 16px 12px;
    }
}

@media (max-width: 600px) {
    .uc-card {
        padding: 16px;
    }
    .uc-converter-panel {
        flex-direction: column;
        gap: 10px;
    }
    .uc-swap-col {
        align-self: center;
        padding-bottom: 0;
    }
    .uc-swap-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    .uc-select {
        width: 110px;
    }
    .uc-cat-btn {
        font-size: 0.78rem;
        padding: 5px 10px;
    }
    .uc-input,
    .uc-result {
        font-size: 1rem;
        padding: 8px 10px;
    }

    /* 口算移动端 */
    .arith-card {
        padding: 16px;
    }
    .arith-quiz-body {
        grid-template-columns: 1fr;
    }
    .arith-question-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 闪卡移动端 */
    .fc-card {
        padding: 16px;
    }
    .fc-word {
        font-size: 1.6rem;
    }
    .fc-meaning {
        font-size: 1.3rem;
    }
}

/* ══════════════════════════════════════
   查字典 / 部首检字
   ══════════════════════════════════════ */

.dc-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    max-width: 600px;
    margin: 0 auto;
}

/* Tab */

.dc-tabs {
    display: flex;
    gap: 4px;
    background: var(--xuan-zhi);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    padding: 3px;
    margin-bottom: 20px;
}

.dc-tab {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--yan-hui);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.dc-tab:hover {
    color: var(--mo);
}

.dc-tab.active {
    background: var(--xue-bai);
    color: var(--yan-zhi);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dc-tab-content {
    display: none;
}

.dc-tab-content.active {
    display: block;
}

/* 搜索框 */

.dc-search-box {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.dc-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    color: var(--mo);
    background: var(--xue-bai);
    outline: none;
    transition: border-color 0.15s;
}

.dc-search-input:focus {
    border-color: var(--yan-zhi);
}

.dc-search-input::placeholder {
    color: var(--yan-hui);
    opacity: 0.6;
}

.dc-search-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    color: var(--yan-hui);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.dc-search-btn:hover {
    border-color: var(--jin);
    color: var(--mo);
}

/* 分区标题 */

.dc-section-title {
    font-size: 0.82rem;
    color: var(--yan-hui);
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}

/* 汉字网格 */

.dc-char-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 40px;
}

.dc-char-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    font-size: 1.3rem;
    font-family: var(--font-title);
    color: var(--mo);
    cursor: pointer;
    transition: all 0.12s;
}

.dc-char-btn:hover {
    border-color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
    transform: scale(1.08);
}

/* 部首网格 */

.dc-radical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
    margin-bottom: 16px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.dc-radical-grid::-webkit-scrollbar {
    width: 4px;
}

.dc-radical-grid::-webkit-scrollbar-thumb {
    background: var(--dan-mo);
    border-radius: 2px;
}

.dc-radical-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px 4px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    cursor: pointer;
    transition: all 0.12s;
}

.dc-radical-btn:hover {
    border-color: var(--jin);
    background: var(--xuan-zhi);
}

.dc-radical-btn.active {
    border-color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

.dc-radical-char {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mo);
}

.dc-radical-count {
    font-size: 0.68rem;
    color: var(--yan-hui);
    margin-top: 1px;
}

/* 笔画网格 */

.dc-stroke-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.dc-stroke-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    cursor: pointer;
    transition: all 0.12s;
    min-width: 60px;
}

.dc-stroke-btn:hover {
    border-color: var(--jin);
    background: var(--xuan-zhi);
}

.dc-stroke-btn.active {
    border-color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

.dc-stroke-num {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mo);
}

.dc-stroke-count {
    font-size: 0.68rem;
    color: var(--yan-hui);
    margin-top: 1px;
}

/* 部首/笔画下的汉字区 */

.dc-radical-char-section,
.dc-stroke-char-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--dan-mo);
}

/* 结果展示区 */

.dc-result {
    margin-top: 20px;
    padding: 20px;
    background: var(--xuan-zhi);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    text-align: center;
}

.dc-char-large {
    font-family: var(--font-title);
    font-size: 4rem;
    line-height: 1.2;
    color: var(--mo);
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}

.dc-info-grid {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
}

.dc-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dc-info-label {
    font-size: 0.72rem;
    color: var(--yan-hui);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

.dc-info-value {
    font-size: 1.05rem;
    color: var(--mo);
    font-weight: 600;
}

/* 组词标签 */

.dc-word-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.dc-word-tag {
    display: inline-block;
    padding: 5px 14px;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: 20px;
    font-size: 0.88rem;
    color: var(--mo);
    transition: all 0.12s;
}

.dc-word-tag:hover {
    border-color: var(--jin);
    background: var(--xuan-zhi);
}

/* 历史记录 */

.dc-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dc-history-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dan-mo);
    border-radius: 50%;
    background: var(--xue-bai);
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--yan-hui);
    cursor: pointer;
    transition: all 0.12s;
}

.dc-history-btn:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

/* 移动端 */

@media (max-width: 600px) {
    .dc-card {
        padding: 16px;
    }
    .dc-tab {
        font-size: 0.78rem;
        padding: 6px 6px;
        gap: 3px;
    }
    .dc-char-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    .dc-char-large {
        font-size: 3rem;
    }
    .dc-info-grid {
        gap: 16px;
    }
    .dc-radical-grid {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
        max-height: 240px;
    }
}

/* ══════════════════════════════════════
   成语接龙 / 猜成语
   ══════════════════════════════════════ */

/* Tab */
.idiom-tabs {
    display: flex;
    gap: 4px;
    background: var(--xuan-zhi);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    padding: 3px;
    margin-bottom: 20px;
}

.idiom-tab {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--yan-hui);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.idiom-tab:hover { color: var(--mo); }

.idiom-tab.active {
    background: var(--xue-bai);
    color: var(--yan-zhi);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.idiom-tab-content { display: none; }
.idiom-tab-content.active { display: block; }

.idiom-section-title {
    font-size: 0.82rem;
    color: var(--yan-hui);
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}

/* ---- 公用按钮 ---- */
.idiom-chain-btn {
    padding: 8px 16px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    color: var(--mo);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.idiom-chain-btn:hover {
    border-color: var(--jin);
    background: var(--xuan-zhi);
}

.btn-primary {
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--yan-zhi);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}

.btn-primary:hover {
    background: var(--yan-zhi);
    transform: translateY(-1px);
}

/* ---- 消息 ---- */
.idiom-msg-success { color: var(--success); }
.idiom-msg-error { color: var(--danger); }
.idiom-msg-warn { color: var(--warning); }
.idiom-msg-info { color: var(--yan-zhi); }

/* ============================================
   成语接龙
   ============================================ */

.idiom-difficulty {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--yan-hui);
    margin-bottom: 16px;
}

.idiom-diff-btn {
    padding: 4px 14px;
    border: 1px solid var(--dan-mo);
    border-radius: 14px;
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.12s;
}

.idiom-diff-btn:hover { border-color: var(--jin); color: var(--mo); }
.idiom-diff-btn.active {
    border-color: var(--yan-zhi);
    background: var(--yan-zhi);
    color: #fff;
}

.idiom-chain-status {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--yan-hui);
    margin-bottom: 16px;
}

.idiom-chain-status strong {
    color: var(--mo);
    font-size: 1rem;
}

.idiom-chain-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    margin-bottom: 14px;
}

.idiom-chain-current {
    margin-bottom: 18px;
}

.idiom-chain-label {
    font-size: 0.78rem;
    color: var(--yan-hui);
    display: block;
    margin-bottom: 6px;
}

.idiom-chain-word {
    font-family: var(--font-title);
    font-size: 2.4rem;
    display: block;
    color: var(--mo);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.idiom-chain-hint {
    font-size: 0.88rem;
    color: var(--yan-hui);
}

.idiom-chain-hint strong {
    color: var(--yan-zhi);
    font-size: 1.1rem;
}

.idiom-chain-input-row {
    display: flex;
    gap: 8px;
    max-width: 360px;
    margin: 0 auto;
}

.idiom-chain-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-align: center;
    color: var(--mo);
    background: var(--xue-bai);
    outline: none;
    transition: border-color 0.15s;
}

.idiom-chain-input:focus { border-color: var(--yan-zhi); }

.idiom-chain-submit {
    white-space: nowrap;
}

.idiom-chain-msg {
    margin-top: 10px;
    font-size: 0.88rem;
    min-height: 1.3em;
}

.idiom-chain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.idiom-chain-history {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 16px;
    max-height: 200px;
    overflow-y: auto;
}

.idiom-chain-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.idiom-chain-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--xuan-zhi);
    border-radius: 16px;
    font-size: 0.85rem;
}

.idiom-chain-round {
    background: var(--yan-zhi);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.idiom-chain-word-item {
    font-family: var(--font-title);
    color: var(--mo);
    letter-spacing: 0.04em;
}

/* ============================================
   看图猜成语 (Emoji)
   ============================================ */

.idiom-emoji-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 14px;
}

.idiom-emoji-prompt {
    font-size: 3.5rem;
    line-height: 1.3;
    margin-bottom: 10px;
    letter-spacing: 8px;
}

.idiom-emoji-desc {
    font-size: 0.88rem;
    color: var(--yan-hui);
    margin-bottom: 18px;
}

.idiom-emoji-input-row {
    display: flex;
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}

.idiom-emoji-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-align: center;
    color: var(--mo);
    background: var(--xue-bai);
    outline: none;
    transition: border-color 0.15s;
}

.idiom-emoji-input:focus { border-color: var(--yan-zhi); }

.idiom-emoji-submit { white-space: nowrap; }

.idiom-emoji-msg {
    margin-top: 10px;
    font-size: 0.88rem;
    min-height: 1.3em;
}

.idiom-emoji-hint {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--yan-hui);
    background: var(--xuan-zhi);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
}

.idiom-emoji-status {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--yan-hui);
    margin-bottom: 14px;
}

.idiom-emoji-status strong { color: var(--mo); }

.idiom-emoji-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ============================================
   字谜猜成语
   ============================================ */

.idiom-char-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 14px;
}

.idiom-char-puzzle {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.idiom-char-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-family: var(--font-title);
    font-size: 1.8rem;
    color: var(--mo);
    background: var(--xue-bai);
}

.idiom-char-miss {
    border-color: var(--yan-zhi);
    border-style: dashed;
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.05);
    color: var(--yan-zhi);
    font-size: 2rem;
    animation: idiomPulse 1.5s ease-in-out infinite;
}

@keyframes idiomPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.idiom-char-correct {
    border-color: var(--success);
    background: rgba(var(--success-rgb),0.08);
    color: var(--success);
}

.idiom-char-desc {
    font-size: 0.85rem;
    color: var(--yan-hui);
    margin-bottom: 18px;
}

.idiom-char-input-row {
    display: flex;
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}

.idiom-char-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-align: center;
    color: var(--mo);
    background: var(--xue-bai);
    outline: none;
    transition: border-color 0.15s;
}

.idiom-char-input:focus { border-color: var(--yan-zhi); }

.idiom-char-submit { white-space: nowrap; }

.idiom-char-msg {
    margin-top: 10px;
    font-size: 0.88rem;
    min-height: 1.3em;
}

.idiom-char-hint {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--yan-hui);
    background: var(--xuan-zhi);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
}

.idiom-char-status {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--yan-hui);
    margin-bottom: 14px;
}

.idiom-char-status strong { color: var(--mo); }

.idiom-char-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
}

.idiom-char-answer {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}

.idiom-char-full {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.idiom-char-meaning {
    font-size: 0.88rem;
    color: var(--yan-hui);
    line-height: 1.6;
}

/* 移动端 */
@media (max-width: 600px) {
    .idiom-tab {
        font-size: 0.78rem;
        padding: 6px 6px;
        gap: 3px;
    }
    .idiom-chain-card,
    .idiom-emoji-card,
    .idiom-char-card {
        padding: 18px 14px;
    }
    .idiom-chain-word {
        font-size: 1.8rem;
    }
    .idiom-emoji-prompt {
        font-size: 2.5rem;
    }
    .idiom-char-slot {
        width: 46px;
        height: 46px;
        font-size: 1.4rem;
    }
    .idiom-chain-input-row,
    .idiom-emoji-input-row,
    .idiom-char-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .idiom-chain-actions,
    .idiom-emoji-actions,
    .idiom-char-actions {
        flex-wrap: wrap;
    }
}

/* ============================================
   分数可视化 — fraction
   ============================================ */

.fr-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 20px;
}

.fr-inputs {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.fr-fraction-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.fr-label {
    font-size: 0.82rem;
    color: var(--yan-hui);
    font-weight: 500;
}

.fr-fraction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fr-num, .fr-den {
    width: 64px;
    text-align: center;
    padding: 8px 4px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-family: var(--font-title);
    color: var(--mo);
    background: var(--xue-bai);
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
.fr-num::-webkit-inner-spin-button,
.fr-den::-webkit-inner-spin-button { display: none; }
.fr-num:focus, .fr-den:focus { border-color: var(--yan-zhi); }

.fr-vline {
    width: 48px;
    height: 2px;
    background: var(--mo);
    border-radius: 1px;
}

.fr-operator-select {
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
}

.fr-operator {
    padding: 8px 12px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mo);
    background: var(--xue-bai);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.fr-operator:focus { border-color: var(--yan-zhi); }

.fr-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.fr-btn {
    padding: 8px 20px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--yan-hui);
    background: var(--xue-bai);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.04em;
}
.fr-btn:hover { border-color: var(--jin); color: var(--mo); }
.fr-btn-primary {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
}
.fr-btn-primary:hover { background: var(--yan-zhi-hover); color: #fff; }
.fr-btn-secondary:hover { background: var(--xuan-zhi); }

.fr-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--xuan-zhi);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}
.fr-result-label {
    color: var(--yan-hui);
    font-weight: 500;
}
.fr-result-text {
    color: var(--mo);
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 600;
}

/* ---- 图表区 ---- */
.fr-chart-area {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.fr-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dan-mo);
    padding-bottom: 8px;
}

.fr-tab {
    padding: 6px 20px;
    border: none;
    background: none;
    font-size: 0.88rem;
    color: var(--yan-hui);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    font-weight: 500;
}
.fr-tab:hover { color: var(--mo); background: var(--xuan-zhi); }
.fr-tab.active {
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.08);
    font-weight: 600;
}

.fr-view { display: none; }
.fr-view.active { display: block; }

.fr-chart-title {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

/* ---- 圆饼图 ---- */
.fr-pie-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fr-pie-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fr-pie-col canvas {
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
}

.fr-pie-label {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mo);
}

.fr-pie-operator {
    font-size: 2rem;
    font-weight: 700;
    color: var(--yan-zhi);
    padding: 0 4px;
}

/* ---- 长条图 ---- */
.fr-bar-container {
    max-width: 500px;
    margin: 0 auto;
}

.fr-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.fr-bar-label {
    width: 70px;
    font-size: 0.85rem;
    font-family: var(--font-title);
    color: var(--mo);
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
}

.fr-bar-track {
    flex: 1;
    height: 28px;
    background: var(--xuan-zhi);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--dan-mo);
    position: relative;
}

.fr-bar-fill {
    height: 100%;
    background: var(--yan-zhi);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.fr-bar-fill-b {
    background: var(--shui-se);
}

.fr-bar-fill-r {
    background: var(--jin);
}

.fr-bar-pct {
    width: 48px;
    font-size: 0.8rem;
    color: var(--yan-hui);
    text-align: left;
    flex-shrink: 0;
}

/* ---- 细分格子 ---- */
.fr-bar-detail {
    max-width: 560px;
    margin: 0 auto;
}

.fr-bar-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fr-bar-detail-label {
    width: 70px;
    font-size: 0.78rem;
    color: var(--yan-hui);
    text-align: right;
    flex-shrink: 0;
}

.fr-bar-detail-track {
    flex: 1;
    display: flex;
    gap: 1px;
    height: 18px;
    align-items: stretch;
}

.fr-bar-detail-seg {
    flex: 1;
    border-radius: 2px;
    transition: background 0.2s;
    min-width: 6px;
}

/* ---- 例题区 ---- */
.fr-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.fr-examples-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 12px;
    text-align: center;
}

.fr-example-btn {
    padding: 6px 14px;
    border: 1px solid var(--dan-mo);
    border-radius: 16px;
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-title);
}
.fr-example-btn:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

/* ---- 知识点 ---- */
.fr-tips {
    background: rgba(var(--shui-se-rgb), 0.06);
    border-color: var(--shui-se);
}

.fr-tip-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--qian-mo);
    line-height: 2;
}
.fr-tip-list li strong {
    color: var(--mo);
}

/* 移动端适配 */
@media (max-width: 600px) {
    .fr-inputs {
        flex-direction: column;
        align-items: center;
    }
    .fr-pie-container {
        flex-direction: column;
        gap: 16px;
    }
    .fr-pie-col canvas {
        width: 160px;
        height: 160px;
    }
    .fr-pie-operator {
        font-size: 1.5rem;
    }
    .fr-bar-label {
        width: 54px;
        font-size: 0.78rem;
    }
    .fr-bar-detail-label {
        display: none;
    }
    .fr-num, .fr-den {
        width: 56px;
    }
    .fr-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .fr-btn {
        text-align: center;
    }
}

/* ============================================
   几何图形演示 — geometry
   ============================================ */

.geo-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 4px;
}

.geo-tab {
    flex: 1;
    max-width: 160px;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 0.9rem;
    color: var(--yan-hui);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.geo-tab:hover { color: var(--mo); background: var(--xuan-zhi); }
.geo-tab.active {
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.08);
    font-weight: 600;
}

.geo-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 20px;
}

.geo-inputs {
    display: none;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.geo-inputs.active { display: flex; }

.geo-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.geo-label {
    font-size: 0.82rem;
    color: var(--yan-hui);
    font-weight: 500;
}

.geo-input {
    width: 64px;
    text-align: center;
    padding: 8px 4px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-family: var(--font-title);
    color: var(--mo);
    background: var(--xue-bai);
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
.geo-input::-webkit-inner-spin-button,
.geo-input::-webkit-outer-spin-button { display: none; }
.geo-input:focus { border-color: var(--yan-zhi); }

.geo-btn-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
    width: 100%;
}

.geo-btn {
    padding: 8px 22px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--yan-hui);
    background: var(--xue-bai);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.04em;
}
.geo-btn:hover { border-color: var(--jin); color: var(--mo); }
.geo-btn-primary {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
}
.geo-btn-primary:hover { background: var(--yan-zhi-hover); color: #fff; }
.geo-btn-secondary:hover { background: var(--xuan-zhi); }

/* ---- Canvas ---- */
.geo-canvas-wrap {
    text-align: center;
    margin-bottom: 16px;
}

.geo-canvas-wrap canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xuan-zhi);
}

/* ---- 结果网格 ---- */
.geo-result-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-top: 1px solid var(--dan-mo);
    padding-top: 16px;
}

.geo-result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.geo-result-label {
    font-size: 0.78rem;
    color: var(--yan-hui);
}

.geo-result-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--mo);
    font-family: var(--font-title);
}

.geo-highlight {
    color: var(--yan-zhi);
}

.geo-formula {
    color: var(--shui-se);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---- 公式速查 ---- */
.geo-formula-grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.geo-formula-card {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    padding: 14px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: all 0.15s;
    background: var(--xue-bai);
}
.geo-formula-card.active {
    border-color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.04);
}

.geo-formula-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 8px;
}

.geo-formula-body {
    font-size: 0.82rem;
    color: var(--qian-mo);
    line-height: 1.8;
}
.geo-formula-body strong {
    color: var(--yan-zhi);
}

/* ---- 例题 ---- */
.geo-examples-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 12px;
    text-align: center;
}

.geo-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.geo-example-btn {
    padding: 6px 14px;
    border: 1px solid var(--dan-mo);
    border-radius: 16px;
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-title);
}
.geo-example-btn:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60),0.06);
}

/* ---- 响应式 ---- */
@media (max-width: 600px) {
    .geo-tabs { flex-wrap: wrap; }
    .geo-tab { max-width: none; flex: 1 0 auto; }
    .geo-inputs { flex-direction: column; align-items: center; }
    .geo-result-grid { grid-template-columns: repeat(2, 1fr); }
    .geo-formula-grid { flex-direction: column; align-items: center; }
    .geo-formula-card { max-width: 100%; }
}

/* ============================================
   元素周期表 — periodic-table
   ============================================ */

.pt-srch-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.pt-srch {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    padding: 10px 14px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--xue-bai);
    outline: none;
    transition: border-color 0.15s;
}
.pt-srch:focus { border-color: var(--yan-zhi); }

.pt-filter {
    padding: 10px 14px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--xue-bai);
    outline: none;
    color: var(--mo);
    cursor: pointer;
}
.pt-filter:focus { border-color: var(--yan-zhi); }

/* ---- 网格 ---- */
.pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.pt-cell {
    padding: 6px 4px;
    border: 2px solid;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    user-select: none;
}
.pt-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); }

.pt-cell-n {
    font-size: 0.65rem;
    color: var(--yan-hui);
    line-height: 1;
}
.pt-cell-sym {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mo);
    line-height: 1.2;
}
.pt-cell-name {
    font-size: 0.7rem;
    color: var(--qian-mo);
    line-height: 1;
}
.pt-cell-mass {
    font-size: 0.6rem;
    color: var(--yan-hui);
    line-height: 1;
}

.pt-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--yan-hui);
    font-size: 0.9rem;
}

/* ---- 弹窗 ---- */
.pt-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pt-modal-overlay.active { display: flex; }

.pt-modal {
    background: var(--xue-bai);
    border-radius: var(--radius-md);
    max-width: 380px;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.pt-modal-close {
    position: absolute;
    top: 8px; right: 12px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--yan-hui);
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}

.pt-modal-head {
    padding: 20px 20px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pt-modal-symbol {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--mo);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
}

.pt-modal-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mo);
}
.pt-modal-en {
    font-size: 0.82rem;
    color: var(--yan-hui);
}

.pt-modal-body {
    padding: 14px 20px 20px;
}

.ptm-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--dan-mo);
    font-size: 0.85rem;
}
.ptm-row:last-of-type { border-bottom: none; }

.ptm-label { color: var(--yan-hui); }
.ptm-row span:last-child { color: var(--mo); font-weight: 500; }

.ptm-desc {
    margin-top: 12px;
    padding: 10px;
    background: var(--xuan-zhi);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--mo);
    line-height: 1.6;
}

@media (max-width: 600px) {
    .pt-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; }
    .pt-cell-sym { font-size: 1rem; }
    .pt-cell-name { font-size: 0.6rem; }
    .pt-cell-mass { font-size: 0.55rem; }
}

/* ============================================
   物理公式速查 — physics
   ============================================ */

.ph-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.ph-tab {
    padding: 10px 18px;
    border: none;
    background: none;
    font-size: 0.85rem;
    color: var(--yan-hui);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    font-weight: 500;
}
.ph-tab:hover { color: var(--mo); background: var(--xuan-zhi); }
.ph-tab.active { color: var(--yan-zhi); background: rgba(var(--yan-zhi-rgb, 139,94,60),0.08); font-weight: 600; }

.ph-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
}

.ph-formula-card { margin-bottom: 12px; }

.ph-formula-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 6px;
}

.ph-formula-eq {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: "Times New Roman", serif;
    padding: 8px 12px;
    background: var(--xuan-zhi);
    border-radius: var(--radius-sm);
    text-align: center;
    margin-bottom: 8px;
}

.ph-formula-desc {
    font-size: 0.85rem;
    color: var(--qian-mo);
    margin-bottom: 6px;
}

.ph-formula-unit {
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-bottom: 8px;
}

.ph-formula-vars {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ph-var-tag {
    font-size: 0.75rem;
    background: var(--xuan-zhi);
    padding: 3px 8px;
    border-radius: 10px;
    color: var(--yan-hui);
}
.ph-var-tag em {
    font-style: normal;
    font-weight: 600;
    color: var(--mo);
}

/* ---- 计算器 ---- */
.ph-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 14px;
}

.ph-calc-row { margin-bottom: 12px; }

.ph-calc-select {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--xue-bai);
    outline: none;
    color: var(--mo);
}

.ph-calc-inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ph-calc-field {
    flex: 1;
    min-width: 120px;
}

.ph-calc-field label {
    display: block;
    font-size: 0.78rem;
    color: var(--yan-hui);
    margin-bottom: 4px;
}

.ph-calc-input {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-align: center;
    outline: none;
    background: var(--xue-bai);
}
.ph-calc-input:focus { border-color: var(--yan-zhi); }

.ph-calc-result {
    text-align: center;
    padding: 14px;
    background: var(--xuan-zhi);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}

.ph-calc-label {
    font-size: 0.85rem;
    color: var(--yan-hui);
}

.ph-calc-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: var(--font-title);
}

.ph-btn {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--yan-zhi);
    border-radius: var(--radius-sm);
    background: var(--yan-zhi);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.ph-btn:hover { background: var(--yan-zhi-hover); }

/* ============================================
   番茄计时器 — timer
   ============================================ */

.tm-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 20px;
}

.tm-card-main { text-align: center; }

.tm-mode {
    font-size: 0.85rem;
    color: var(--yan-hui);
    margin-bottom: 6px;
    font-weight: 500;
}

.tm-display {
    font-size: 4rem;
    font-weight: 700;
    font-family: "Courier New", monospace;
    color: var(--mo);
    margin: 6px 0;
    transition: color 0.3s;
    letter-spacing: 4px;
}

.tm-round {
    font-size: 0.82rem;
    color: var(--qian-mo);
    margin-bottom: 16px;
}

.tm-progress-wrap {
    height: 6px;
    background: var(--dan-mo);
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
}

.tm-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--success), var(--warning), var(--danger));
    border-radius: 3px;
    transition: width 0.3s;
}

.tm-ctrl {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tm-btn {
    padding: 10px 22px;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
}
.tm-btn:hover { border-color: var(--jin); color: var(--mo); }
.tm-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tm-btn-primary {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
}
.tm-btn-primary:hover { background: var(--yan-zhi-hover); color: #fff; }
.tm-btn-primary:disabled { opacity: 0.4; }

.tm-custom-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.tm-custom-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tm-custom-field label {
    font-size: 0.78rem;
    color: var(--yan-hui);
}

.tm-input {
    width: 60px;
    text-align: center;
    padding: 6px 4px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    outline: none;
    background: var(--xue-bai);
    -moz-appearance: textfield;
}
.tm-input::-webkit-inner-spin-button,
.tm-input::-webkit-outer-spin-button { display: none; }
.tm-input:focus { border-color: var(--yan-zhi); }

/* ---- 统计 ---- */
.tm-stats-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mo);
    text-align: center;
    margin-bottom: 12px;
}

.tm-stats-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.tm-stat-item {
    text-align: center;
}

.tm-stat-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: var(--font-title);
}

.tm-stat-label {
    font-size: 0.78rem;
    color: var(--yan-hui);
}

/* ============================================
   打卡/习惯追踪 — habits
   ============================================ */

.hb-card {
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.hb-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 14px;
}

.hb-nav-btn {
    background: none;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    color: var(--yan-hui);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hb-nav-btn:hover { border-color: var(--jin); color: var(--mo); }

.hb-month-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mo);
    min-width: 120px;
    text-align: center;
}

.hb-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.75rem;
    color: var(--yan-hui);
    margin-bottom: 6px;
    font-weight: 500;
}

.hb-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.hb-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--xue-bai);
    border: 1px solid transparent;
    font-size: 0.75rem;
    color: var(--mo);
    transition: all 0.1s;
    position: relative;
    min-height: 36px;
}

.hb-day-empty { background: none; }

.hb-day-today {
    border-color: var(--yan-zhi);
    font-weight: 600;
}

.hb-day-checked {
    background: rgba(var(--success-rgb), 0.08);
}
.hb-day-full {
    background: rgba(var(--success-rgb), 0.18);
    font-weight: 600;
}

.hb-day-num { line-height: 1; }

.hb-day-dots {
    font-size: 0.55rem;
    color: var(--yan-zhi);
    line-height: 1;
    margin-top: 1px;
}

.hb-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mo);
    margin-bottom: 12px;
}

/* ---- 习惯列表 ---- */
.hb-habits { margin-bottom: 12px; }

.hb-habit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dan-mo);
}
.hb-habit-row:last-child { border-bottom: none; }

.hb-habit-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--mo);
    font-weight: 500;
}

.hb-habit-btn {
    padding: 4px 12px;
    border: 1px solid var(--dan-mo);
    border-radius: 14px;
    background: var(--xue-bai);
    font-size: 0.78rem;
    color: var(--yan-hui);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.hb-habit-btn:hover { border-color: var(--jin); }
.hb-habit-btn.checked {
    background: rgba(var(--success-rgb),0.1);
border-color: var(--success);
color: var(--success);
}

.hb-habit-streak {
    font-size: 0.75rem;
    color: var(--yan-hui);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}

/* ---- 添加习惯 ---- */
.hb-add-row {
    display: flex;
    gap: 8px;
}

.hb-add-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--dan-mo);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    outline: none;
    background: var(--xue-bai);
}
.hb-add-input:focus { border-color: var(--yan-zhi); }

.hb-add-btn {
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--yan-zhi);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
}
.hb-add-btn:hover { background: var(--yan-zhi-hover); }

/* ---- 月度统计 ---- */
.hb-summary {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hb-summary-item {
    text-align: center;
}

.hb-summary-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--yan-zhi);
    font-family: var(--font-title);
}

.hb-summary-label {
    font-size: 0.78rem;
    color: var(--yan-hui);
}

@media (max-width: 600px) {
    .hb-weekday-row { font-size: 0.65rem; }
    .hb-day { font-size: 0.65rem; min-height: 30px; }
    .hb-habit-row { flex-wrap: wrap; gap: 6px; }
    .hb-habit-streak { min-width: auto; }
    .tm-display { font-size: 3rem; }
    .tm-stats-grid { gap: 20px; }
    .ph-calc-inputs { flex-direction: column; }
}

/* ====== 搜索高亮样式 ====== */
/* bleve 全文检索高亮 & 年级/科目文本高亮 */
mark {
  background: rgba(var(--jin-rgb, 196,163,90), 0.25); /* 哑金浅底 — 与设计系统 jin 色呼应 */
  color: inherit;
  padding: 0.1em 0.2em;
  border-radius: 2px;
  font-weight: 600;
}

/* ====== Markdown 渲染内容样式 ====== */
/* 用于详情页的 Introduction、UserComments、RecommendReason 等 Markdown 渲染区域 */
.md-content p {
    margin-bottom: 0.75rem;
}
.md-content p:last-child {
    margin-bottom: 0;
}
.md-content h1, .md-content h2, .md-content h3,
.md-content h4, .md-content h5, .md-content h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.md-content h1 { font-size: 1.25rem; }
.md-content h2 { font-size: 1.15rem; }
.md-content h3 { font-size: 1.05rem; }
.md-content ul, .md-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}
.md-content ul { list-style-type: disc; }
.md-content ol { list-style-type: decimal; }
.md-content li {
    margin-bottom: 0.25rem;
    line-height: 1.7;
}
.md-content blockquote {
    border-left: 3px solid var(--cn-red, #c41e3a);
    padding-left: 1rem;
    margin: 0.75rem 0;
    color: var(--gray-600);
}
.md-content code {
    background: rgba(0,0,0,0.06);
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
}
.md-content pre {
    background: var(--gray-100);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 0.75rem;
}
.md-content pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
}
.md-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}
.md-content th, .md-content td {
    border: 1px solid var(--gray-300);
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.md-content th {
    background: var(--gray-100);
    font-weight: 600;
}
.md-content a {
    color: var(--cn-red, #c41e3a);
    text-decoration: none;
}
.md-content a:hover {
    text-decoration: underline;
}
.md-content hr {
    border: none;
    border-top: 1px solid var(--gray-300);
    margin: 1rem 0;
}
.md-content strong {
    font-weight: 600;
}
.md-content del {
    text-decoration: line-through;
    color: var(--yan-hui);
}

/* ====== 主题切换器 UI ====== */
.theme-switcher {
    position: fixed;
    bottom: 130px;
    right: 20px;
    z-index: 1050;
}

.theme-trigger {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--dan-mo);
    background: var(--xue-bai);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    padding: 0;
}
.theme-trigger:hover {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    transform: scale(1.08);
    box-shadow: var(--shadow-lg);
}
.theme-trigger:hover .theme-trigger-icon {
    filter: brightness(10);
}
.theme-trigger-icon {
    font-size: 1.2rem;
    line-height: 1;
    transition: filter 0.25s;
}

.theme-panel {
    position: absolute;
    bottom: 54px;
    right: 0;
    width: 360px;
    max-height: 0;
    overflow: hidden;
    background: var(--xue-bai);
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s;
    opacity: 0;
    pointer-events: none;
}
.theme-panel.is-open {
    max-height: 75vh;
    opacity: 1;
    pointer-events: auto;
}

.theme-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dan-mo);
    position: sticky;
    top: 0;
    background: var(--xue-bai);
    z-index: 1;
}
.theme-panel-title {
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mo);
    letter-spacing: 0.08em;
}
.theme-panel-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--yan-hui);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
.theme-panel-close:hover {
    color: var(--yan-zhi);
}

.theme-panel-body {
    padding: 4px 8px 8px;
    max-height: calc(75vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 分组标签 */
.theme-group {
    margin-bottom: 4px;
}
.theme-group-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--yan-hui);
    letter-spacing: 0.06em;
    padding: 8px 4px 4px;
    border-bottom: 1px solid var(--dan-mo);
    margin-bottom: 6px;
}

.theme-group-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.theme-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
}
.theme-item:hover {
    border-color: var(--jin-light);
    background: var(--xuan-zhi);
    transform: translateY(-1px);
}
.theme-item.active {
    border-color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.06);
}

.theme-item-preview {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.06);
    display: inline-block;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.08);
}

/* 52 组主题预览色块 — 使用各主题的主色 */
.theme-item-preview[data-preview-theme="classic"]       { background: #8B5E3C; }
.theme-item-preview[data-preview-theme="sakura"]        { background: #D4687A; }
.theme-item-preview[data-preview-theme="summer"]        { background: #E07040; }
.theme-item-preview[data-preview-theme="citrus"]        { background: #D88830; }
.theme-item-preview[data-preview-theme="strawberry"]    { background: #C8506A; }
.theme-item-preview[data-preview-theme="sunset"]        { background: #C84848; }
.theme-item-preview[data-preview-theme="peach"]         { background: #D07068; }
.theme-item-preview[data-preview-theme="coral"]         { background: #C85868; }
.theme-item-preview[data-preview-theme="candy"]         { background: #C03060; }
.theme-item-preview[data-preview-theme="terracotta"]    { background: #B86040; }
.theme-item-preview[data-preview-theme="rose"]          { background: #B85868; }
.theme-item-preview[data-preview-theme="apricot"]       { background: #C89048; }
.theme-item-preview[data-preview-theme="cinnamon"]      { background: #906040; }
.theme-item-preview[data-preview-theme="pomegranate"]   { background: #B04040; }
.theme-item-preview[data-preview-theme="caramel"]       { background: #9A7040; }
.theme-item-preview[data-preview-theme="tangerine"]     { background: #C87030; }
.theme-item-preview[data-preview-theme="mahogany"]      { background: #784838; }
.theme-item-preview[data-preview-theme="sunflower"]     { background: #C8B030; }
.theme-item-preview[data-preview-theme="wheat"]         { background: #A89038; }
.theme-item-preview[data-preview-theme="forest"]        { background: #488848; }
.theme-item-preview[data-preview-theme="mint"]          { background: #309888; }
.theme-item-preview[data-preview-theme="bamboo"]        { background: #589058; }
.theme-item-preview[data-preview-theme="olive"]         { background: #788840; }
.theme-item-preview[data-preview-theme="sand"]          { background: #908060; }
.theme-item-preview[data-preview-theme="jade"]          { background: #408870; }
.theme-item-preview[data-preview-theme="moss"]          { background: #607848; }
.theme-item-preview[data-preview-theme="tea"]           { background: #807050; }
.theme-item-preview[data-preview-theme="honey"]         { background: #B89838; }
.theme-item-preview[data-preview-theme="azure"]         { background: #2880C0; }
.theme-item-preview[data-preview-theme="galaxy"]        { background: #6040B0; }
.theme-item-preview[data-preview-theme="ocean"]         { background: #009098; }
.theme-item-preview[data-preview-theme="aurora"]        { background: #009880; }
.theme-item-preview[data-preview-theme="lavender"]      { background: #7060A0; }
.theme-item-preview[data-preview-theme="fjord"]         { background: #4080A0; }
.theme-item-preview[data-preview-theme="cobalt"]        { background: #3050A0; }
.theme-item-preview[data-preview-theme="raindrop"]      { background: #4878A8; }
.theme-item-preview[data-preview-theme="sapphire"]      { background: #2858B0; }
.theme-item-preview[data-preview-theme="periwinkle"]    { background: #5868B0; }
.theme-item-preview[data-preview-theme="arctic"]        { background: #3890A8; }
.theme-item-preview[data-preview-theme="twilight"]      { background: #484888; }
.theme-item-preview[data-preview-theme="glacier"]       { background: #4098B8; }
.theme-item-preview[data-preview-theme="amethyst"]      { background: #684898; }
.theme-item-preview[data-preview-theme="deepsea"]       { background: #2060A0; }
.theme-item-preview[data-preview-theme="eyecare-green"] { background: #4A7856; }
.theme-item-preview[data-preview-theme="eyecare-warm"]  { background: #8A7050; }
.theme-item-preview[data-preview-theme="eyecare-sepia"] { background: #786848; }
.theme-item-preview[data-preview-theme="eyecare-beige"] { background: #887860; }
.theme-item-preview[data-preview-theme="eyecare-dim"]   { background: #707868; }
.theme-item-preview[data-preview-theme="eyecare-mint"]  { background: #488878; }
.theme-item-preview[data-preview-theme="cvd-protan"]    { background: #2878B0; }
.theme-item-preview[data-preview-theme="cvd-deutan"]    { background: #3058A8; }
.theme-item-preview[data-preview-theme="cvd-tritan"]    { background: #A85028; }

.theme-item-name {
    font-size: 0.62rem;
    color: var(--yan-hui);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    line-height: 1.2;
}
.theme-item.active .theme-item-name {
    color: var(--yan-zhi);
    font-weight: 600;
}

/* 主题切换器响应式 */
@media (max-width: 576px) {
    .theme-switcher {
        bottom: 90px;
        right: 12px;
    }
    .theme-trigger {
        width: 38px;
        height: 38px;
    }
    .theme-trigger-icon {
        font-size: 1rem;
    }
    .theme-panel {
        width: calc(100vw - 24px);
        right: -6px;
        max-height: 0;
    }
    .theme-panel.is-open {
        max-height: 80vh;
    }
    .theme-group-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 3px;
    }
    .theme-item {
        padding: 5px 1px;
    }
    .theme-item-preview {
        width: 26px;
        height: 26px;
    }
    .theme-item-name {
        font-size: 0.56rem;
    }
}

/* ====== 主题切换过渡动画 ====== */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease,
                fill 0.35s ease,
                stroke 0.35s ease !important;
}

/* ====== Facet 筛选栏 ====== */
.facet-bar {
    background: rgba(var(--jin-rgb), 0.04);
    border-radius: var(--radius, 8px);
    padding: 16px 20px;
    border: 1px solid rgba(var(--jin-rgb), 0.1);
}
.facet-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}
.facet-group:last-child {
    margin-bottom: 0;
}
.facet-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    white-space: nowrap;
    min-width: 36px;
    padding-top: 4px;
}
.facet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.facet-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 0.82rem;
    border-radius: 20px;
    border: 1px solid rgba(var(--jin-rgb), 0.2);
    background: var(--card-bg, #fff);
    color: var(--text-primary, #333);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.5;
}
.facet-chip:hover {
    border-color: var(--jin, #c4a35a);
    background: rgba(var(--jin-rgb), 0.08);
    text-decoration: none;
    color: var(--text-primary, #333);
}
.facet-chip.active {
    background: var(--jin, #c4a35a);
    color: #fff;
    border-color: var(--jin, #c4a35a);
}
.facet-chip.active .facet-count {
    color: rgba(255,255,255,0.85);
}
.facet-count {
    font-size: 0.72rem;
    color: var(--text-muted, #999);
    font-weight: 400;
}

/* ====== 搜索建议下拉 ====== */
.suggest-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(var(--jin-rgb), 0.15);
    border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    max-height: 320px;
    overflow-y: auto;
}
.search-page-form {
    position: relative;
}
.suggest-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--text-primary, #333);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--jin-rgb), 0.06);
    transition: background 0.15s;
    text-align: left;
}
.suggest-item i {
    flex-shrink: 0;
    margin-right: 8px;
}
.suggest-item span,
.suggest-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suggest-item:last-child {
    border-bottom: none;
}
.suggest-item:hover,
.suggest-item.active {
    background: rgba(var(--jin-rgb), 0.08);
    text-decoration: none;
    color: var(--text-primary, #333);
}

/* ====== 搜索页面左右布局 ====== */
.search-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* 左侧筛选栏 */
.search-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
}

.facet-panel {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(var(--jin-rgb), 0.12);
    border-radius: var(--radius, 12px);
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.facet-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--jin-rgb), 0.1);
}

.facet-section {
    margin-bottom: 20px;
}

.facet-section:last-child {
    margin-bottom: 0;
}

.facet-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    margin-bottom: 10px;
}

.facet-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.facet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary, #333);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.facet-item:hover {
    background: rgba(var(--jin-rgb), 0.06);
    text-decoration: none;
    color: var(--text-primary, #333);
}

.facet-item.active {
    background: rgba(var(--jin-rgb), 0.12);
    color: var(--jin, #c4a35a);
    font-weight: 500;
}

.facet-name {
    flex: 1;
}

.facet-badge {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
    background: rgba(var(--jin-rgb), 0.08);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.facet-item.active .facet-badge {
    background: rgba(var(--jin-rgb), 0.2);
    color: var(--jin, #c4a35a);
}

/* 右侧结果区域 */
.search-results {
    flex: 1;
    min-width: 0;
}

/* 排序栏 */
.sort-bar {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(var(--jin-rgb), 0.1);
    border-radius: var(--radius, 8px);
    padding: 12px 16px;
}

.sort-options {
    display: flex;
    gap: 8px;
}

.sort-option {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sort-option:hover {
    background: rgba(var(--jin-rgb), 0.06);
    text-decoration: none;
    color: var(--text-primary, #333);
}

.sort-option.active {
    background: rgba(var(--jin-rgb), 0.12);
    color: var(--jin, #c4a35a);
    font-weight: 500;
}

/* 图书列表（每本书一行） */
.book-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.book-list-item {
    display: flex;
    gap: 20px;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(var(--jin-rgb), 0.1);
    border-radius: var(--radius, 12px);
    padding: 20px;
    transition: all 0.2s ease;
}

.book-list-item:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-color: rgba(var(--jin-rgb), 0.2);
}

/* 封面区域 */
.book-list-cover {
    width: 140px;
    flex-shrink: 0;
    position: relative;
}

.book-list-img-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.book-list-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.book-list-item:hover .book-list-img {
    transform: scale(1.03);
}

.book-list-type {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.7rem;
    padding: 4px 8px;
    background: var(--jin, #c4a35a);
    color: #fff;
    border-radius: 4px;
    font-weight: 500;
}

/* 内容区域 */
.book-list-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.book-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.book-list-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

.book-list-title a:hover {
    color: var(--jin, #c4a35a) !important;
}

/* 评分 */
.book-list-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rating-score {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--jin, #c4a35a);
}

.rating-stars {
    color: var(--jin);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
    vertical-align: middle;
}

/* 元信息 */
.book-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    padding: 4px 10px;
    background: rgba(var(--jin-rgb), 0.04);
    border-radius: 6px;
}

.meta-item i {
    color: var(--jin, #c4a35a);
}

.meta-grade {
    background: rgba(var(--jin-rgb), 0.08);
    color: var(--jin, #c4a35a);
    font-weight: 500;
}

/* 摘要 */
.book-list-summary {
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 推荐理由 */
.book-list-recommend {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    padding: 10px 12px;
    background: var(--jin-light, #E8D090);
    border-radius: 8px;
    margin-bottom: 16px;
}

.book-list-recommend i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* 底部区域 */
.book-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--jin-rgb), 0.08);
}

.book-list-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-current {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--danger);
}

.price-unknown {
    font-size: 0.9rem;
    color: var(--text-muted, #999);
}

.book-list-actions {
    display: flex;
    gap: 12px;
}

/* 查看详情按钮 - 优雅风格 */
.btn-detail {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--yan-zhi, #6b8f9e);
    background: transparent;
    border: 1.5px solid var(--yan-zhi, #6b8f9e);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.btn-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--shui-se-rgb, 107,143,158), 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-detail:hover {
    background: var(--yan-zhi, #6b8f9e);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--shui-se-rgb, 107,143,158), 0.3);
}

.btn-detail:hover::before {
    left: 100%;
}

.btn-detail:active {
    transform: translateY(0);
}

/* 去购买按钮 - 渐变活力风格 */
.btn-buy {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    background: var(--danger);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(var(--danger-rgb, 220,38,38), 0.3);
}

.btn-buy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.btn-buy:hover {
    background: var(--danger-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--danger-rgb, 220,38,38), 0.4);
}

.btn-buy:hover::after {
    width: 200px;
    height: 200px;
}

.btn-buy:active {
    transform: translateY(0);
}

/* 技术指标展示（炫技） */
.tech-metrics {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(var(--jin-rgb), 0.08);
    border: 1px solid rgba(var(--jin-rgb), 0.15);
    border-radius: 20px;
    color: var(--text-secondary, #666);
    font-family: 'SF Mono', Monaco, monospace;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tech-badge:hover {
    background: rgba(var(--jin-rgb), 0.12);
    border-color: rgba(var(--jin-rgb), 0.25);
}

.tech-badge i {
    color: var(--jin, #c4a35a);
    font-size: 0.7rem;
}

/* 查询类型标签样式 */
.tech-badge-fuzzy {
    background: rgba(var(--danger-rgb), 0.1);
    border-color: rgba(var(--danger-rgb), 0.2);
    color: var(--danger);
}

.tech-badge-fuzzy i {
    color: var(--danger);
}

.tech-badge-match {
    background: rgba(var(--success-rgb), 0.1);
    border-color: rgba(var(--success-rgb), 0.2);
    color: var(--success);
}

.tech-badge-match i {
    color: var(--success);
}

/* 响应式适配 */
@media (max-width: 991px) {
    .search-layout {
        flex-direction: column;
    }

    .search-sidebar {
        width: 100%;
        position: static;
    }

    .facet-panel {
        padding: 16px;
    }

    .facet-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .facet-item {
        flex: 0 0 auto;
    }

    .book-list-item {
        flex-direction: column;
        gap: 16px;
    }

    .book-list-cover {
        width: 120px;
        margin: 0 auto;
    }

    .book-list-header {
        flex-direction: column;
        gap: 8px;
    }

    .book-list-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .book-list-actions {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .book-list-meta {
        gap: 8px;
    }

    .meta-item {
        font-size: 0.8rem;
        padding: 3px 8px;
    }

    .book-list-title {
        font-size: 1rem;
    }

    .sort-options {
        flex-wrap: wrap;
    }
}

/* =========================================================
   书单推荐页 · Collection Pages
   ========================================================= */

/* ---- 列表页：学段标签 ---- */
.collection-phase-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.collection-phase-tab {
    padding: 0.45rem 1.4rem;
    border: 1px solid var(--dan-mo);
    border-radius: 24px;
    background: var(--xue-bai);
    color: var(--yan-hui);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}
.collection-phase-tab:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
}
.collection-phase-tab.active {
    background: var(--yan-zhi);
    border-color: var(--yan-zhi);
    color: #fff;
}

/* ---- 列表页：年级卡片网格 ---- */
.collection-group-col {
    display: block;
}
.collection-group {
    padding: 1.5rem;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-lg, 12px);
    background: var(--xue-bai);
    transition: box-shadow 0.2s, transform 0.2s;
}
.collection-group:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.07);
    transform: translateY(-2px);
}
.collection-group-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mo);
    font-family: var(--font-title);
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.collection-view-all {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--dan-mo);
    color: var(--yan-hui);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    padding: 0.3rem 1rem;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.collection-view-all:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.05);
}

.collection-subject-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border: 1px solid var(--dan-mo);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--yan-hui);
    text-decoration: none;
    transition: all 0.15s;
    background: var(--xue-bai);
}
.collection-subject-tag:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.06);
    transform: translateY(-1px);
}
.collection-subject-tag.active {
    border-color: var(--yan-zhi);
    color: #fff;
    background: var(--yan-zhi);
}
.collection-subject-tag small {
    opacity: 0.7;
}
.collection-subject-tag.active small {
    opacity: 0.9;
    color: #fff;
}

/* ---- 详情页：导读 ---- */
.collection-intro {
    padding: 1.25rem;
    background: rgba(var(--jin-rgb, 196,163,90), 0.08);
    border-radius: var(--radius-lg, 12px);
    border-left: 3px solid var(--jin);
}

/* ---- 详情页：图书卡片列表 ---- */
.collection-book-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: book-rank;
}
.collection-book-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-lg, 12px);
    background: var(--xue-bai);
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s, transform 0.15s;
    counter-increment: book-rank;
    text-decoration: none;
    color: inherit;
}
.collection-book-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transform: translateY(-1px);
    border-color: rgba(var(--yan-zhi-rgb, 139,94,60), 0.2);
}

/* 封面+排名 组合 */
.collection-book-cover-wrap {
    flex-shrink: 0;
    position: relative;
    width: 200px;
    height: 200px;
}

/* 排名标记（覆盖在封面左上角） */
.collection-book-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.collection-book-rank.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
}
.collection-book-rank.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #fff;
}
.collection-book-rank.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #A0522D);
    color: #fff;
}
.collection-book-rank.rank-top10 {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.9);
    color: #fff;
}
.collection-book-rank.rank-normal {
    background: rgba(120, 120, 120, 0.85);
    color: #fff;
}

/* 封面图 */
.collection-book-cover {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-lg, 12px);
    object-fit: cover;
    border: 1px solid var(--dan-mo);
    background: var(--xuan-zhi);
    transition: transform 0.15s, box-shadow 0.15s;
}
.collection-book-cover:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* 图书信息 */
.collection-book-info {
    flex: 1;
    min-width: 0;
}
.collection-book-name {
    display: block;
    font-weight: 600;
    color: var(--mo);
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
    margin-bottom: 0.4rem;
}
.collection-book-name:hover {
    color: var(--yan-zhi);
}

/* 元信息行：年级 科目 类型 作者 出版社 评分 */
.collection-book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--yan-hui);
    margin-bottom: 0.5rem;
}
.collection-book-meta .collection-book-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
}
.collection-book-meta .collection-book-tag.tag-grade {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.08);
    color: var(--yan-zhi);
}
.collection-book-meta .collection-book-tag.tag-subject {
    background: rgba(var(--shui-se-rgb, 107,143,158), 0.1);
    color: var(--shui-se);
}
.collection-book-meta .collection-book-tag.tag-type {
    background: rgba(var(--jin-rgb, 196,163,90), 0.12);
    color: var(--yan-hui);
}
.collection-book-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* 评分 */
.collection-book-rating-score {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--yan-zhi);
    line-height: 1;
}
.collection-book-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.72rem;
    color: var(--jin);
    line-height: 1;
    vertical-align: middle;
}
.collection-book-stars .bi-star-fill {
    color: var(--jin);
}
.collection-book-stars .bi-star-half {
    color: var(--jin);
}
.collection-book-stars .bi-star {
    color: var(--dan-mo);
}

/* 推荐理由 */
.collection-book-reason {
    font-size: 0.84rem;
    color: var(--yan-hui);
    line-height: 1.7;
    margin: 0;
    padding: 0.6rem 0.75rem;
    background: rgba(var(--jin-rgb, 196,163,90), 0.05);
    border-radius: 6px;
    border-left: 2px solid rgba(var(--jin-rgb, 196,163,90), 0.3);
}
.collection-book-reason p {
    margin: 0;
}
.collection-book-reason .md-content p {
    margin: 0;
}

/* 操作链接 */
.collection-book-action {
    margin-top: 0.5rem;
}
.collection-book-action a {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--dan-mo);
    color: var(--yan-hui);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    padding: 0.2rem 0.7rem;
    text-decoration: none;
    transition: all 0.15s;
}
.collection-book-action a:hover {
    border-color: var(--yan-zhi);
    color: var(--yan-zhi);
}

/* ---- 保留表格样式（兼容旧版） ---- */
.collection-table {
    font-size: 0.92rem;
}
.collection-table thead th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--yan-hui);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--dan-mo);
    padding: 0.6rem 0.5rem;
}
.collection-table tbody tr {
    transition: background 0.15s;
}
.collection-table tbody tr:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.03);
}
.collection-book-title {
    color: var(--mo);
    font-weight: 500;
    transition: color 0.15s;
}
.collection-book-title:hover {
    color: var(--yan-zhi);
}

/* ---- 排名徽章（保留表格版） ---- */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
}
.rank-badge-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 165, 0, 0.3);
}
.rank-badge-2 {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #fff;
    box-shadow: 0 2px 6px rgba(160, 160, 160, 0.3);
}
.rank-badge-3 {
    background: linear-gradient(135deg, #CD7F32, #A0522D);
    color: #fff;
    box-shadow: 0 2px 6px rgba(160, 82, 45, 0.3);
}
.rank-badge-top10 {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.12);
    color: var(--yan-zhi);
}
.rank-badge-normal {
    background: var(--dan-mo);
    color: var(--yan-hui);
}

/* ---- 展开按钮（保留兼容） ---- */
.btn-expand-reason {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--yan-hui);
    border-radius: 50%;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-expand-reason:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.1);
    color: var(--yan-zhi);
}

/* ---- 展开行：推荐理由（保留兼容） ---- */
.collection-reason-content {
    padding: 1rem 1rem 1rem 3.5rem;
    background: rgba(var(--jin-rgb, 196,163,90), 0.05);
    border-bottom: 1px solid var(--dan-mo);
}
.collection-reason-row:not(.d-none) + tr.collection-book-row td {
    border-top: none;
}

/* ---- 侧边栏 ---- */
.sidebar-card {
    padding: 1rem 1.25rem;
    border: 1px solid var(--dan-mo);
    border-radius: var(--radius-lg, 12px);
    background: var(--xue-bai);
}
.sidebar-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mo);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dan-mo);
}
.sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-links li {
    margin-bottom: 0.2rem;
}
.sidebar-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--yan-hui);
    text-decoration: none;
    transition: all 0.15s;
}
.sidebar-links a:hover {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.06);
    color: var(--yan-zhi);
}
.sidebar-links a.active {
    background: rgba(var(--yan-zhi-rgb, 139,94,60), 0.1);
    color: var(--yan-zhi);
    font-weight: 600;
}
.sidebar-links-compact a {
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
}

/* ---- 响应式 ---- */
@media (max-width: 767.98px) {
    .collection-group {
        padding: 1rem;
    }
    .collection-intro {
        padding: 1rem;
    }
    .collection-reason-content {
        padding: 0.75rem;
    }
    .collection-table {
        font-size: 0.85rem;
    }
    .rank-badge {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    .collection-book-card {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    .collection-book-cover-wrap {
        width: 120px;
        height: 120px;
    }
    .collection-book-cover {
        width: 120px;
        height: 120px;
    }
    .collection-book-rank {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
        top: 4px;
        left: 4px;
    }
    .collection-phase-tabs {
        gap: 0.3rem;
    }
    .collection-phase-tab {
        padding: 0.35rem 1rem;
        font-size: 0.82rem;
    }
}
@media (max-width: 575.98px) {
    .collection-book-card {
        flex-direction: column;
        gap: 0.75rem;
    }
    .collection-book-cover-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .collection-book-cover {
        width: 100%;
        height: 100%;
    }
    .collection-book-rank {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    .collection-book-stars {
        font-size: 0.7rem;
    }
    .collection-book-meta {
        font-size: 0.75rem;
    }
}