/* ============================================================================
   PIXEL THEME — 纸感像素风（米白纸底 + 墨黑硬边框 + 墨绿主色）
   ----------------------------------------------------------------------------
   加载顺序：必须在 tailwind.css / ai-llm.css / lesson.css / replica-fix.css 之后。
   参考配色来自用户的「Prompt 工程实验平台」（WorkBuddy/2026-10-16-21-01-08）。

   设计要点：
     1. 中文像素字体 Zpix（font/zpix.woff2），局部启用 + 关闭抗锯齿
     2. 米白纸底 #F2EDE0 / 纯白卡片 #FFFDF7 / 墨黑硬边框 #22201A
     3. 墨绿主强调 #2E6B50，暖橙 #C4552A 做警示，赭黄 #8A6008 做次强调
     4. 全面去圆角、双像素硬边框、3px 3px 0 硬投影（8-bit 视觉）
     5. 像素网格底纹 + 顶部墨绿横幅
     6. 小测验：答对像素彩带庆祝动画；错题逐条原因解释

   对比度（WCAG，基准 = --px-panel2 #F8F3E5）：
     主文字 14.69 AAA | 次文字 8.33 AAA | 弱文字 5.32 AA
     硬边框 14.69 AAA | 墨绿强调 5.68 AA | 正向 4.97 AA
   ============================================================================ */

/* ---------------------------------------------------------------- 1. 像素字体 */
@font-face {
  font-family: 'Zpix';
  src: url('../font/zpix.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- 2. 调色板 */
:root {
  --px-bg:      #E7DFC9;   /* 页面最底（深一档，用于外框/滚动条槽） */
  --px-bg2:     #F2EDE0;   /* 页面主底 · 米白纸感 */
  --px-panel:   #FFFDF7;   /* 卡片 · 纯白纸 */
  --px-panel2:  #F8F3E5;   /* 次级面板 / 内嵌块 */
  --px-line:    #22201A;   /* 硬边框 · 墨黑（像素风的灵魂） */
  --px-line2:   #B8AC8C;   /* 软分隔 / 硬投影颜色 */
  --px-ink:     #22201A;   /* 主文字 · 墨黑 */
  --px-ink2:    #4D4738;   /* 次文字 · 深褐灰 */
  --px-ink3:    #6B6450;   /* 弱文字 · 灰褐（已提亮至 AA） */
  --px-cyan:    #2E6B50;   /* 主强调 · 墨绿 */
  --px-cyan2:   #1F4436;   /* 强调深 · 暗墨绿 */
  --px-wash:    #D9E9DE;   /* 强调浅底 · 淡绿纸 */
  --px-amber:   #8A6008;   /* 次强调 · 赭黄（已提亮至 AA） */
  --px-green:   #38745A;   /* 正向 / 代码绿 */
  --px-coral:   #B2461F;   /* 警示 / 强调橙（对比度 5.0~5.45） */
  --px-purple:  #4E7D66;   /* 辅助 · 灰绿 */
  --px-font:    'Zpix', 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
}

/* ------------------------------------------- 3. 覆写原主题的语义色变量 */
.ai-llm-scope {
  --paper:        var(--px-bg2);
  --paper-deep:   var(--px-bg);
  --paper-card:   var(--px-panel);
  --ink:          var(--px-ink);
  --ink-soft:     var(--px-ink2);
  --ink-faint:    var(--px-ink3);
  --line:         var(--px-line2);
  --accent:       var(--px-cyan);
  --accent-deep:  var(--px-cyan2);
  --accent-warm:  var(--px-coral);
  --accent-wash:  var(--px-wash);
  --brand:        var(--px-amber);
  --chart-blue:   var(--px-cyan);
  --sans:         var(--px-font);
  --serif:        var(--px-font);
  --mono:         'Zpix', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------- 4. 全局底色 + 像素网格 */
html,
body {
  background: var(--px-bg);
  color: var(--px-ink);
}

.app-shell,
.main-content {
  background: var(--px-bg2);
}

/* 像素网格底纹（墨色淡格，纸感纹理） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 32, 26, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 32, 26, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* 保留极淡的横向纸纹（替代原 CRT 扫描线，浅色下扫描线会显脏） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(34, 32, 26, 0.016) 0 1px,
    transparent 1px 4px
  );
}

/* ---------------------------------------------- 5. 去圆角 + 硬边框（8-bit） */
.ai-llm-scope *,
.ai-llm-scope *::before,
.ai-llm-scope *::after {
  border-radius: 0 !important;
}

/* 像素风滚动条 */
.ai-llm-scope ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.ai-llm-scope ::-webkit-scrollbar-track {
  background: var(--px-bg);
  border-left: 2px solid var(--px-line);
}
.ai-llm-scope ::-webkit-scrollbar-thumb {
  background: var(--px-cyan);
  border: 2px solid var(--px-line);
}
.ai-llm-scope ::-webkit-scrollbar-thumb:hover {
  background: var(--px-cyan2);
}

/* ------------------------------------------------------- 6. 像素字体分配 */
/* 原则：像素字体（Zpix）只用于「大字」——标题、编号、按钮、徽标。
   11~14px 的小字一律留给系统无衬线，否则发糊看不清。 */
.ai-llm-scope h1,
.ai-llm-scope h2,
.ai-llm-scope h3,
.ai-llm-scope h4,
.ai-llm-scope h5,
.ai-llm-scope .brand,
.ai-llm-scope .section-title,
.ai-llm-scope .station-head h2,
.ai-llm-scope .station-no,
.ai-llm-scope .lesson-no,
.ai-llm-scope .lesson-num,
.ai-llm-scope .lesson-title,
.ai-llm-scope .rm-dot,
.ai-llm-scope .rm-cap-name,
.ai-llm-scope .next-label,
.ai-llm-scope .next-arrow,
.ai-llm-scope .btn,
.ai-llm-scope .btn-vol,
.ai-llm-scope .quiz-submit,
.ai-llm-scope .quiz-retry,
.ai-llm-scope .quiz-option-key,
.ai-llm-scope .quiz-q-no,
.ai-llm-scope .quiz-verdict,
.ai-llm-scope .takeaway-label,
.ai-llm-scope .crack-label,
.ai-llm-scope .lab-tag,
.ai-llm-scope .vol-badge,
.ai-llm-scope .volume-no,
.ai-llm-scope .vol-hero-sub,
.ai-llm-scope .vol-path-no,
.ai-llm-scope .vol-path-title,
.ai-llm-scope .rm-flag {
  font-family: var(--px-font);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  letter-spacing: 0.02em;
}

/* 小字号 UI 文字 + 正文：系统无衬线，保证可读性 */
.ai-llm-scope .station p,
.ai-llm-scope .lesson-lede,
.ai-llm-scope .section-lede,
.ai-llm-scope .section-kicker,
.ai-llm-scope .quiz-option-text,
.ai-llm-scope .quiz-explain-text,
.ai-llm-scope .quiz-why-item,
.ai-llm-scope .think-q,
.ai-llm-scope .think-answer,
.ai-llm-scope .fig figcaption,
.ai-llm-scope .fig-no,
.ai-llm-scope .recap li,
.ai-llm-scope .next-card p,
.ai-llm-scope .lesson-q,
.ai-llm-scope .lesson-footer,
.ai-llm-scope .lesson-meta,
.ai-llm-scope .sidebar-lesson-item a,
.ai-llm-scope .sidebar-vol-head,
.ai-llm-scope .rail-label,
.ai-llm-scope .rail-item a,
.ai-llm-scope .chip,
.ai-llm-scope .freq-table th,
.ai-llm-scope .freq-table td,
.ai-llm-scope .vol-connector,
.ai-llm-scope .rm-cap-no,
.ai-llm-scope .rm-stop-t,
.ai-llm-scope .step-dot {
  font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 数字 / 等宽带：等宽字体便于对齐阅读 */
.ai-llm-scope .freq-mono,
.ai-llm-scope .freq-pct,
.ai-llm-scope .readout,
.ai-llm-scope .lesson-no {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------ 7. 头部 / 导航 / 顶部墨绿横幅 */
/* 注意：header 是 .ai-llm-scope 的兄弟节点（不在作用域内），必须用全局选择器 */
header#mainHeader > div:first-child {
  background: var(--px-cyan2) !important;
  border-bottom: 4px solid var(--px-line) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
header#mainHeader .brand span,
header#mainHeader a {
  color: #F2EDE0 !important;
}
/* 头部里的普通文本用米白；但打卡胶囊是「浅底深字」，
   必须排除在外，否则会被刷成米白压在米白底上完全看不见 */
header#mainHeader span:not([data-checkin-label]):not([data-checkin-count]) {
  color: #F2EDE0 !important;
}
header#mainHeader > div:first-child {
  box-shadow: none;
}

/* 返回目录按钮 */
.ai-llm-scope header a[href$="index.html"],
header#mainHeader a[href$="index.html"] {
  border: 2px solid var(--px-line) !important;
  background: var(--px-cyan) !important;
  color: #F2EDE0 !important;
  box-shadow: 3px 3px 0 var(--px-line) !important;
  letter-spacing: 0.04em;
}
header#mainHeader a[href$="index.html"]:hover {
  background: #F2EDE0 !important;
  color: var(--px-cyan2) !important;
}

/* 阅读进度条：像素分段 */
.ai-llm-scope .reading-bar {
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    var(--px-cyan) 0 8px,
    var(--px-amber) 8px 16px
  );
  box-shadow: 0 1px 0 var(--px-line);
}

/* 侧边栏 */
.ai-llm-scope .lesson-sidebar {
  border-right: 2px solid var(--px-line);
  background: var(--px-bg2);
}

.ai-llm-scope .sidebar-lesson-item a {
  border-left: 4px solid transparent;
}
.ai-llm-scope .sidebar-lesson-item a:hover {
  background: var(--px-panel2) !important;
  border-left-color: var(--px-line2);
}
.ai-llm-scope .sidebar-lesson-item a.active {
  background: var(--px-wash) !important;
  border-left-color: var(--px-cyan);
  color: var(--px-cyan2) !important;
  font-weight: 700;
}

/* 卷/章徽标 */
.ai-llm-scope .sidebar-vol-head .vol-badge {
  background: var(--px-cyan) !important;
  color: #F2EDE0 !important;
  border: 2px solid var(--px-line);
  font-weight: 700;
}

/* 右侧站点导航 */
.ai-llm-scope .lesson-rail {
  border-left: 2px solid var(--px-line);
  background: var(--px-bg2);
}
.ai-llm-scope .rail-list::before {
  border-left: 2px dashed var(--px-line2) !important;
}
.ai-llm-scope .rail-dot {
  border: 2px solid var(--px-line) !important;
  background: var(--px-panel) !important;
}
.ai-llm-scope .rail-item.active .rail-dot {
  background: var(--px-cyan) !important;
  border-color: var(--px-line) !important;
  box-shadow: 2px 2px 0 var(--px-line2);
}
.ai-llm-scope .rail-item.active a {
  color: var(--px-cyan2) !important;
  font-weight: 700;
}
.ai-llm-scope .rail-item.passed .rail-dot {
  background: var(--px-amber) !important;
  border-color: var(--px-line) !important;
}

.ai-llm-scope .lesson-footer {
  border-top: 2px dashed var(--px-line2);
}

/* --------------------------------- 8. 深色块（原为墨黑，现改为墨绿实心横幅） */
.ai-llm-scope .hero-dark,
.ai-llm-scope .interlude,
.ai-llm-scope .vol-hero,
.ai-llm-scope .takeaway {
  background: var(--px-cyan2) !important;
  border: 3px solid var(--px-line) !important;
  box-shadow: 6px 6px 0 var(--px-line2);
  color: #F2EDE0 !important;
}
.ai-llm-scope .interlude p,
.ai-llm-scope .vol-hero-title,
.ai-llm-scope .hero-q,
.ai-llm-scope .takeaway p {
  color: #F2EDE0 !important;
}
.ai-llm-scope .takeaway:before {
  color: var(--px-amber) !important;
  opacity: 0.5;
}
.ai-llm-scope .takeaway p .tk-hl {
  color: var(--px-bg2) !important;
  background: var(--px-cyan);
  padding: 0 5px;
  font-weight: 700;
}

/* 章号 / 实验室标签 */
.ai-llm-scope .volume-no,
.ai-llm-scope .lab-tag {
  background: var(--px-cyan) !important;
  color: #F2EDE0 !important;
  border: 2px solid var(--px-line);
  font-weight: 700;
}

/* 大号水印数字 */
.ai-llm-scope .volume-head:after,
.ai-llm-scope .station:before {
  color: var(--px-ink) !important;
  opacity: 0.06 !important;
}

/* ------------------------------------------------------ 9. 卡片 / 边框规范 */
/* 这是「清晰」的关键：所有卡片都上墨黑硬边框 + 硬投影 */
.ai-llm-scope .volume-head {
  border-bottom: 4px solid var(--px-line);
}

.ai-llm-scope .station {
  border-bottom: 2px dashed var(--px-line2);
}

.ai-llm-scope .fig-frame,
.ai-llm-scope .quiz-item,
.ai-llm-scope .formula,
.ai-llm-scope .lab,
.ai-llm-scope .think,
.ai-llm-scope .crack,
.ai-llm-scope .book-def,
.ai-llm-scope .next-card,
.ai-llm-scope .vol-nav-card,
.ai-llm-scope .bpx-card,
.ai-llm-scope .bpx-note,
.ai-llm-scope .paper-author-card {
  border: 2px solid var(--px-line) !important;
  background: var(--px-panel) !important;
  box-shadow: 3px 3px 0 var(--px-line2);
}

.ai-llm-scope .quiz-item {
  border-left: 6px solid var(--px-cyan) !important;
  position: relative;
}

.ai-llm-scope .think {
  border-style: dashed !important;
  border-color: var(--px-cyan) !important;
  background: var(--px-panel2) !important;
}
.ai-llm-scope .think:before {
  background: var(--px-panel2) !important;
  color: var(--px-cyan) !important;
  font-weight: 700;
}

.ai-llm-scope .crack {
  border: 2px solid var(--px-line) !important;
  border-left: 6px solid var(--px-coral) !important;
  background: var(--px-panel2) !important;
}
.ai-llm-scope .crack-label {
  color: var(--px-coral) !important;
  font-weight: 700;
}

.ai-llm-scope .next-card {
  border: 2px solid var(--px-line) !important;
}
.ai-llm-scope .next-card:hover {
  background: var(--px-wash) !important;
  box-shadow: 6px 6px 0 var(--px-line);
}
.ai-llm-scope .next-arrow {
  color: var(--px-cyan);
}

/* 内联样式的数据表（多用在课程正文里，原为深色表头）
   统一改为：墨绿表头 + 反白文字，与页面卡片区分开 */
.ai-llm-scope .station table {
  border-collapse: collapse;
}
.ai-llm-scope .station table thead tr {
  background: var(--px-cyan2) !important;
}
.ai-llm-scope .station table thead th {
  color: #F2EDE0 !important;
  border-bottom: 2px solid var(--px-line) !important;
  font-weight: 700;
}
.ai-llm-scope .station table tbody tr:nth-child(even) {
  background: var(--px-panel2) !important;
}
.ai-llm-scope .station table tbody td {
  color: var(--px-ink) !important;
  border-bottom: 1px solid var(--px-line2) !important;
}
/* 表格内的强调色（原为亮橙）改暖橙，并压过内联色 */
.ai-llm-scope .station table strong {
  color: var(--px-coral) !important;
}

/* 列表 / 表格 */
.ai-llm-scope .freq-table {
  border: 2px solid var(--px-line);
}
.ai-llm-scope .freq-table th {
  background: var(--px-wash) !important;
  color: var(--px-cyan2) !important;
  border-bottom: 2px solid var(--px-line) !important;
}
.ai-llm-scope .freq-table td {
  border-bottom: 1px solid var(--px-line2) !important;
}
.ai-llm-scope .freq-table td.word {
  color: var(--px-ink) !important;
}
.ai-llm-scope .freq-head {
  color: var(--px-ink2) !important;
  border-bottom: 2px solid var(--px-line);
}
.ai-llm-scope .freq-bar {
  background: var(--px-bg) !important;
  border: 1px solid var(--px-line2);
}

/* 首页路线图 */
.ai-llm-scope .rm-track:before {
  border-top: 2px dashed var(--px-line2) !important;
}
.ai-llm-scope .rm-dot {
  border: 2px solid var(--px-line) !important;
  background: var(--px-panel) !important;
  color: var(--px-ink3) !important;
}
.ai-llm-scope .rm-stop.ready .rm-dot {
  border-color: var(--px-line) !important;
  color: var(--px-cyan2) !important;
  background: var(--px-wash) !important;
}
.ai-llm-scope .rm-stop:hover .rm-dot,
.ai-llm-scope .rm-stop.end .rm-dot {
  background: var(--px-cyan) !important;
  border-color: var(--px-line) !important;
  color: #F2EDE0 !important;
  box-shadow: 2px 2px 0 var(--px-line2);
}
.ai-llm-scope .rm-stop:hover .rm-stop-t {
  color: var(--px-cyan2) !important;
}
.ai-llm-scope .rm-cap-no {
  color: var(--px-cyan) !important;
  font-weight: 700;
}
.ai-llm-scope .rm-cap-name {
  color: var(--px-ink) !important;
}
.ai-llm-scope .rm-flag {
  background: var(--px-coral) !important;
  color: #F2EDE0 !important;
  border: 2px solid var(--px-line);
}

/* 楼层连线 / 梯级线 */
.ai-llm-scope .stair-thread {
  background: repeating-linear-gradient(
    to bottom,
    var(--px-line2) 0 6px,
    transparent 6px 12px
  ) !important;
  width: 2px !important;
}
.ai-llm-scope .vol-connector:before {
  color: var(--px-cyan) !important;
}

/* 首页课程行 */
.ai-llm-scope .lesson-row:hover {
  background: var(--px-panel2) !important;
}
.ai-llm-scope .step-dot {
  border: 2px solid var(--px-line) !important;
  background: var(--px-panel) !important;
}
.ai-llm-scope .lesson-row.ready .step-dot,
.ai-llm-scope .lesson-row:hover .step-dot {
  background: var(--px-cyan) !important;
  border-color: var(--px-line) !important;
  box-shadow: 2px 2px 0 var(--px-line2);
}
.ai-llm-scope .lesson-no {
  color: var(--px-ink3) !important;
}
.ai-llm-scope .lesson-row.ready .lesson-no,
.ai-llm-scope .lesson-row:hover .lesson-no {
  color: var(--px-cyan2) !important;
  font-weight: 700;
}
.ai-llm-scope .lesson-q:before {
  color: var(--px-cyan) !important;
}

/* 胶囊按钮 */
.ai-llm-scope .chip {
  border: 2px solid var(--px-line);
  padding: 3px 10px;
}
.ai-llm-scope .chip-ready {
  background: var(--px-panel2) !important;
  color: var(--px-ink2) !important;
  border-color: var(--px-line) !important;
}
.ai-llm-scope .chip-go,
.ai-llm-scope .chip-go:hover {
  background: var(--px-cyan) !important;
  color: #F2EDE0 !important;
  border: 2px solid var(--px-line) !important;
  box-shadow: 2px 2px 0 var(--px-line);
  font-weight: 700;
}
.ai-llm-scope .chip-go:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--px-line);
}
.ai-llm-scope .chip-soon {
  border-color: var(--px-line2) !important;
  color: var(--px-ink3) !important;
}

/* 按钮 */
.ai-llm-scope .btn-primary,
.ai-llm-scope .btn-vol,
.ai-llm-scope .quiz-submit,
.ai-llm-scope .bpx-btn,
.ai-llm-scope .think-btn {
  color: #F2EDE0 !important;
  background: var(--px-cyan) !important;
  border: 2px solid var(--px-line) !important;
  box-shadow: 3px 3px 0 var(--px-line);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ai-llm-scope .btn-primary:hover,
.ai-llm-scope .btn-vol:hover,
.ai-llm-scope .quiz-submit:hover:not(:disabled),
.ai-llm-scope .bpx-btn:hover,
.ai-llm-scope .think-btn:hover {
  background: var(--px-cyan2) !important;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--px-line);
}
.ai-llm-scope .quiz-submit:disabled {
  background: var(--px-bg) !important;
  border-color: var(--px-line2) !important;
  color: var(--px-ink3) !important;
  box-shadow: none;
  cursor: not-allowed;
}
.ai-llm-scope .btn-ink,
.ai-llm-scope .btn-ghost {
  background: var(--px-panel) !important;
  border: 2px solid var(--px-line) !important;
  color: var(--px-ink) !important;
}
.ai-llm-scope .btn-ink:hover,
.ai-llm-scope .btn-ghost:hover {
  background: var(--px-wash) !important;
  color: var(--px-cyan2) !important;
}

/* 代码 / 公式 / katex */
.ai-llm-scope .katex,
.ai-llm-scope .kx,
.ai-llm-scope code {
  color: var(--px-ink) !important;
}
.ai-llm-scope .formula {
  border: 2px solid var(--px-line) !important;
  border-left: 6px solid var(--px-cyan) !important;
  color: var(--px-ink) !important;
}
.ai-llm-scope .formula .f-hl {
  color: var(--px-cyan2) !important;
  font-weight: 700;
}
.ai-llm-scope .formula .f-dim {
  color: var(--px-ink3) !important;
}

/* 首字下沉：保留放大首字版式，墨绿 + 像素硬描边 */
.ai-llm-scope .station > p:first-of-type .dropcap-letter {
  color: var(--px-cyan) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-font-smoothing: none;
  text-shadow: 2px 2px 0 rgba(34, 32, 26, 0.28);
}

/* 强调文字 */
.ai-llm-scope strong {
  color: var(--px-cyan2) !important;
}
.ai-llm-scope .station p strong,
.ai-llm-scope .fig figcaption strong {
  color: var(--px-cyan2) !important;
}
.ai-llm-scope em {
  color: var(--px-coral) !important;
  font-style: normal;
  font-weight: 700;
}
.ai-llm-scope a {
  color: var(--px-cyan);
}
.ai-llm-scope a:hover {
  color: var(--px-cyan2);
}
/* 墨绿块内的强调不要串色 */
.ai-llm-scope .chip-go strong,
.ai-llm-scope .btn-primary strong,
.ai-llm-scope .takeaway strong,
.ai-llm-scope .interlude strong,
.ai-llm-scope .hero-dark strong {
  color: inherit !important;
}

/* SVG 图表内文字：不回退到像素字体。
   图表标签本来只有 11~13px，像素字体在这个尺寸下发糊；
   保留原 HTML 的 font-family（Noto Sans SC / JetBrains Mono + 系统回退）更清晰。 */
.ai-llm-scope .fig svg text {
  font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ai-llm-scope .fig svg text[font-family*="Mono"] {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 选中文字 */
.ai-llm-scope ::selection {
  background: var(--px-cyan);
  color: #F2EDE0;
}

/* ------------------------------------------- 10. 小测验：判分与逐条解释 */
.ai-llm-scope .quiz-option {
  background: var(--px-panel) !important;
  border: 2px solid var(--px-line) !important;
  color: var(--px-ink) !important;
}
.ai-llm-scope .quiz-option:hover:not(:disabled) {
  border-color: var(--px-cyan) !important;
  background: var(--px-wash) !important;
}
.ai-llm-scope .quiz-option-key {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-line) !important;
  color: var(--px-ink2) !important;
  font-weight: 700;
}
.ai-llm-scope .quiz-option.is-active {
  border-color: var(--px-cyan) !important;
  box-shadow: 3px 3px 0 var(--px-line2);
}
.ai-llm-scope .quiz-option.is-active .quiz-option-key {
  background: var(--px-cyan) !important;
  border-color: var(--px-line) !important;
  color: #F2EDE0 !important;
}
.ai-llm-scope .quiz-option.is-correct {
  border-color: var(--px-cyan2) !important;
  background: var(--px-wash) !important;
  color: var(--px-ink) !important;
}
.ai-llm-scope .quiz-option.is-correct .quiz-option-key {
  background: var(--px-cyan2) !important;
  border-color: var(--px-line) !important;
  color: #F2EDE0 !important;
}
.ai-llm-scope .quiz-option.is-wrong {
  border-color: var(--px-coral) !important;
  background: #F7E0D2 !important;
}
.ai-llm-scope .quiz-option.is-wrong .quiz-option-key {
  background: var(--px-coral) !important;
  border-color: var(--px-line) !important;
  color: #F2EDE0 !important;
}
.ai-llm-scope .quiz-mark {
  color: inherit;
  font-weight: 700;
}

.ai-llm-scope .quiz-explain {
  border-top: 2px dashed var(--px-line2) !important;
}
.ai-llm-scope .quiz-verdict.ok {
  color: var(--px-cyan2) !important;
}
.ai-llm-scope .quiz-verdict.no {
  color: var(--px-coral) !important;
}
.ai-llm-scope .quiz-verdict-ans {
  color: var(--px-coral) !important;
  border: 2px solid var(--px-coral);
  padding: 1px 8px;
}
.ai-llm-scope .quiz-explain-text {
  color: var(--px-ink) !important;
  background: var(--px-panel2);
  border-left: 5px solid var(--px-cyan);
  padding: 12px 14px;
  margin-top: 10px;
}
.ai-llm-scope .quiz-retry {
  color: var(--px-ink) !important;
  background: var(--px-panel) !important;
  border: 2px solid var(--px-line) !important;
  box-shadow: 3px 3px 0 var(--px-line2);
}
.ai-llm-scope .quiz-retry:hover {
  background: var(--px-wash) !important;
  color: var(--px-cyan2) !important;
}

/* 错误选项逐条解释面板 */
.quiz-why {
  margin-top: 14px;
  border: 2px solid var(--px-line);
  background: var(--px-panel2);
  box-shadow: 3px 3px 0 var(--px-line2);
}
.quiz-why-h {
  font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #F2EDE0;
  background: var(--px-coral);
  border-bottom: 2px solid var(--px-line);
  padding: 8px 12px;
}
.quiz-why-item {
  display: flex;
  gap: 11px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--px-line2);
  font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.78;
  color: var(--px-ink2);
}
.quiz-why-item:last-child {
  border-bottom: 0;
}
.quiz-why-key {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
  font-weight: 700;
  background: #F7E0D2;
  color: var(--px-coral);
  border: 2px solid var(--px-line);
}
.quiz-why-item.is-picked .quiz-why-key {
  background: var(--px-coral);
  color: #F2EDE0;
}
.quiz-why-opt {
  color: var(--px-ink);
  font-weight: 700;
}

/* --------------------------------------------- 11. 答对庆祝动画（像素彩带） */
.px-celebrate {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}
.px-celebrate i {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 8px;
  display: block;
  animation: pxFall 1.25s cubic-bezier(0.32, 0.72, 0.42, 1) forwards;
}
@keyframes pxFall {
  0% {
    transform: translate3d(0, -24px, 0) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx, 0px), 240px, 0) rotate(var(--rot, 90deg));
    opacity: 0;
  }
}

/* 像素星爆 */
.px-burst {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 7;
  animation: pxBurst 0.62s ease-out forwards;
  background: var(--px-cyan);
}
@keyframes pxBurst {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(0.2);
    opacity: 0;
  }
}

/* 鼓励语横幅 */
.px-praise {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 14px;
  font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: #F2EDE0;
  background: var(--px-cyan2);
  border: 2px solid var(--px-line);
  box-shadow: 4px 4px 0 var(--px-line2);
  animation: pxPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.px-praise-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--px-amber);
  color: #F2EDE0;
  border: 2px solid var(--px-line);
  font-weight: 700;
}
@keyframes pxPop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  62% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 答对时整个题目卡片轻微脉冲 */
.px-quiz-pass {
  animation: pxPass 0.5s ease-out;
}
@keyframes pxPass {
  0% {
    box-shadow: 3px 3px 0 var(--px-line2), 0 0 0 0 rgba(46, 107, 80, 0.5);
  }
  100% {
    box-shadow: 3px 3px 0 var(--px-line2), 0 0 0 16px rgba(46, 107, 80, 0);
  }
}

/* ------------------------------------------------------- 12. 全景图 iframe */
.ai-llm-scope .transformer-panorama {
  border: 3px solid var(--px-line);
  box-shadow: 5px 5px 0 var(--px-line2);
  background: var(--px-panel);
}
.ai-llm-scope .transformer-panorama iframe {
  filter: none;
}

/* 尊重「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  .px-celebrate,
  .px-burst {
    display: none !important;
  }
  .px-praise,
  .px-quiz-pass {
    animation: none !important;
  }
}
/* ============================================================================
   13. 学习打卡 · 集邮印章 / 纪念卡片 / 解锁提示
   ----------------------------------------------------------------------------
   设计语汇沿用本站像素风：墨黑硬边框 + 3px 硬投影 + 墨绿实心 + 米白纸底。
   未解锁 = 虚线灰框 + 灰剪影；已解锁 = 墨绿实心 + 反白字 + 点亮动效。
   ============================================================================ */

/* ---- 印章网格（集邮拼图式）---- */
.px-stamp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
}

.px-stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 8px 11px;
  border: 2px dashed var(--px-line2);
  background: var(--px-panel2);
  color: var(--px-ink3);
  text-align: center;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.px-stamp:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--px-line2);
  background: var(--px-panel);
  color: var(--px-ink2);
}

/* 印章圆盘 */
.px-stamp-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--px-font);
  -webkit-font-smoothing: none;
  font-size: 24px;
  line-height: 1;
  border: 2px dashed var(--px-line2);
  background: var(--px-bg);
  color: var(--px-ink3);
  position: relative;
}
.px-stamp-no {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--px-ink3);
}
.px-stamp-title {
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 600;
  color: inherit;
}

/* 已解锁态 */
.px-stamp.is-done {
  border: 2px solid var(--px-line);
  background: var(--px-wash);
  color: var(--px-cyan2);
  box-shadow: 3px 3px 0 var(--px-line2);
}
.px-stamp.is-done .px-stamp-ico {
  border: 2px solid var(--px-line);
  background: var(--px-cyan);
  color: #F2EDE0;
  box-shadow: 2px 2px 0 var(--px-line);
  animation: pxStampIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.px-stamp.is-done .px-stamp-no {
  color: var(--px-cyan2);
}
.px-stamp.is-done .px-stamp-title {
  color: var(--px-ink);
}
/* 已解锁的右上角勾 */
.px-stamp.is-done:after {
  content: "\2713";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #F2EDE0;
  background: var(--px-cyan2);
  border: 2px solid var(--px-line);
}

@keyframes pxStampIn {
  0%   { transform: scale(0.4) rotate(-14deg); opacity: 0; }
  62%  { transform: scale(1.14) rotate(3deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

/* ---- 进度条 ---- */
.px-progress {
  border: 2px solid var(--px-line);
  background: var(--px-bg);
  height: 26px;
  position: relative;
  overflow: hidden;
}
.px-progress-fill {
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--px-cyan) 0 8px,
    var(--px-cyan2) 8px 16px
  );
  transition: width 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.px-progress-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--px-ink);
  text-shadow: 0 0 3px var(--px-panel), 0 0 3px var(--px-panel);
  pointer-events: none;
}

/* ---- 纪念卡片（集邮大卡）---- */
.px-card {
  position: relative;
  border: 3px solid var(--px-line);
  background: var(--px-panel);
  box-shadow: 6px 6px 0 var(--px-line2);
  padding: 26px 26px 22px;
  overflow: hidden;
}
/* 卡片内层虚线描边（集邮册质感） */
.px-card:before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--px-line2);
  pointer-events: none;
}
.px-card-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--px-line);
  z-index: 1;
}
.px-card-kicker {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--px-cyan);
}
.px-card-title {
  font-family: var(--px-font);
  -webkit-font-smoothing: none;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.2;
  color: var(--px-ink);
  margin: 6px 0 0;
}
.px-card-title .px-card-title-em {
  color: var(--px-cyan2);
}
.px-card-sub {
  font-size: 13px;
  color: var(--px-ink2);
  margin: 7px 0 0;
  line-height: 1.7;
}
/* 印章总量徽标 */
.px-card-count {
  flex: none;
  text-align: center;
  border: 2px solid var(--px-line);
  background: var(--px-wash);
  padding: 8px 16px;
  box-shadow: 3px 3px 0 var(--px-line2);
}
.px-card-count b {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 30px;
  line-height: 1.05;
  color: var(--px-cyan2);
}
.px-card-count span {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--px-ink2);
}

/* 卡片主体：左边印章阵列，右边署名/说明 */
.px-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  margin-top: 18px;
}
@media (min-width: 780px) {
  .px-card-body { grid-template-columns: 1fr 240px; }
}

/* 分组印章区块 */
.px-stamp-section + .px-stamp-section { margin-top: 18px; }
.px-stamp-section-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--px-line2);
}
.px-stamp-section-h strong {
  font-size: 14px;
  color: var(--px-ink);
}
.px-stamp-section-h em {
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--px-cyan2);
}

/* 署名 / 完成度侧栏 */
.px-card-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-content: start;
}
.px-card-side-box {
  border: 2px solid var(--px-line);
  background: var(--px-panel2);
  padding: 11px 13px;
}
.px-card-side-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--px-ink3);
  margin-bottom: 6px;
}
.px-name-input {
  width: 100%;
  border: 2px solid var(--px-line);
  background: var(--px-panel);
  color: var(--px-ink);
  font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 7px 9px;
  outline: none;
}
.px-name-input:focus {
  border-color: var(--px-cyan);
  box-shadow: 2px 2px 0 var(--px-line2);
}
.px-name-input::placeholder { color: var(--px-ink3); font-weight: 400; }

/* 完成态印章（集齐时盖在卡片上） */
.px-card-seal {
  border: 3px solid var(--px-cyan2);
  background: var(--px-cyan2);
  color: #F2EDE0;
  text-align: center;
  padding: 12px 8px;
  font-family: var(--px-font);
  -webkit-font-smoothing: none;
  box-shadow: 3px 3px 0 var(--px-line2);
  animation: pxStampIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.px-card-seal b {
  display: block;
  font-size: 20px;
  line-height: 1.25;
}
.px-card-seal span {
  display: block;
  margin-top: 3px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.px-card-seal.is-locked {
  border-color: var(--px-line2);
  background: transparent;
  color: var(--px-ink3);
  box-shadow: none;
  animation: none;
}
.px-card-seal.is-locked b { color: var(--px-ink3); }

/* 卡片底部信息条 */
.px-card-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 13px;
  border-top: 2px dashed var(--px-line2);
  font-size: 12px;
  color: var(--px-ink3);
}
.px-card-foot .px-card-foot-mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ---- 打卡页顶部统计 ---- */
.px-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 11px;
  margin-top: 16px;
}
.px-stat {
  border: 2px solid var(--px-line);
  background: var(--px-panel);
  padding: 11px 13px;
  box-shadow: 3px 3px 0 var(--px-line2);
}
.px-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--px-ink3);
}
.px-stat-val {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--px-cyan2);
  margin-top: 3px;
}
.px-stat-val small {
  font-size: 13px;
  color: var(--px-ink3);
}

/* ---- header 打卡状态胶囊 ---- */
.px-checkin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--px-line);
  background: var(--px-panel);
  color: var(--px-ink2);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.px-checkin-chip:hover {
  background: var(--px-wash);
  color: var(--px-cyan2);
}
.px-checkin-chip .px-checkin-dot {
  width: 9px;
  height: 9px;
  background: var(--px-line2);
  border: 1px solid var(--px-line);
}
.px-checkin-chip.is-done {
  background: var(--px-cyan);
  border-color: var(--px-line);
  color: #F2EDE0;
}
.px-checkin-chip.is-done .px-checkin-dot {
  background: #F2EDE0;
}

/* ---- 解锁浮动提示条 ---- */
.px-unlock-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 400;
  width: min(360px, calc(100vw - 40px));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 36px 14px 14px;
  border: 3px solid var(--px-line);
  background: var(--px-panel);
  box-shadow: 6px 6px 0 var(--px-line2);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.32s ease;
}
.px-unlock-toast.in {
  transform: translateY(0);
  opacity: 1;
}
.px-unlock-toast.is-final {
  background: var(--px-wash);
}
.px-unlock-stamp {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--px-font);
  -webkit-font-smoothing: none;
  font-size: 24px;
  line-height: 1;
  color: #F2EDE0;
  background: var(--px-cyan);
  border: 2px solid var(--px-line);
  box-shadow: 2px 2px 0 var(--px-line);
}
.px-unlock-body { min-width: 0; }
.px-unlock-h {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--px-ink);
  line-height: 1.45;
}
.px-unlock-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--px-ink2);
  line-height: 1.6;
}
.px-unlock-sub a {
  color: var(--px-cyan2);
  font-weight: 700;
  text-decoration: none;
}
.px-unlock-sub a:hover { text-decoration: underline; }
.px-unlock-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  color: var(--px-ink2);
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
}
.px-unlock-close:hover {
  border-color: var(--px-line);
  background: var(--px-wash);
  color: var(--px-cyan2);
}

/* 印章星爆 */
.px-stamp-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  pointer-events: none;
  animation: pxSpark 0.85s ease-out forwards;
}
@keyframes pxSpark {
  0%   { transform: translate3d(0, 0, 0) scale(1);   opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), var(--dy, 0), 0) scale(0.2); opacity: 0; }
}

/* localStorage 不可用提示（file:// 打开时） */
.px-storage-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 2px solid var(--px-coral);
  background: #F7E0D2;
  color: var(--px-ink);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.7;
  margin-top: 14px;
}
.px-storage-warn b { color: var(--px-coral); }
.px-storage-warn code {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  background: var(--px-panel);
  border: 1px solid var(--px-line2);
  padding: 0 4px;
}

/* 打卡页的操作区 */
.px-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.px-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #F2EDE0;
  background: var(--px-cyan);
  border: 2px solid var(--px-line);
  box-shadow: 3px 3px 0 var(--px-line);
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
}
.px-btn:hover {
  background: var(--px-cyan2);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--px-line);
}
.px-btn.is-ghost {
  background: var(--px-panel);
  color: var(--px-ink);
  box-shadow: 3px 3px 0 var(--px-line2);
}
.px-btn.is-ghost:hover {
  background: var(--px-wash);
  color: var(--px-cyan2);
}
.px-btn.is-danger {
  background: var(--px-panel);
  color: var(--px-coral);
  border-color: var(--px-coral);
  box-shadow: 3px 3px 0 var(--px-line2);
}
.px-btn.is-danger:hover {
  background: #F7E0D2;
  color: var(--px-coral);
}

/* ---- 打印 / 导出：只留纪念卡片 ---- */
@media print {
  body::before,
  body::after { display: none !important; }
  header#mainHeader,
  .px-actions,
  .px-storage-warn,
  .lesson-footer,
  .px-card-foot .px-no-print,
  .px-print-hide { display: none !important; }
  .app-shell, .main-content, body { background: #fff !important; }
  .px-card {
    box-shadow: none;
    border-color: #22201A;
    page-break-inside: avoid;
  }
  .px-card:before { border-color: #B8AC8C; }
  .px-stamp, .px-stamp.is-done, .px-card-count, .px-card-seal {
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-stamp.is-done .px-stamp-ico,
  .px-card-seal { animation: none !important; }
  .px-stamp-spark { display: none !important; }
  .px-unlock-toast { transition: opacity 0.2s ease; transform: none; }
}

/* ---- 首页打卡横幅 ---- */
.px-checkin-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 44px;
  padding: 20px 24px;
  border: 3px solid var(--px-line);
  background: var(--px-panel);
  box-shadow: 5px 5px 0 var(--px-line2);
}
.px-checkin-banner-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.px-checkin-banner-stamp {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-family: var(--px-font);
  -webkit-font-smoothing: none;
  font-size: 28px;
  line-height: 1;
  color: #F2EDE0;
  background: var(--px-cyan);
  border: 3px solid var(--px-line);
  box-shadow: 3px 3px 0 var(--px-line);
}
.px-checkin-banner-kicker {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--px-cyan);
  margin: 0;
}
.px-checkin-banner-title {
  font-family: var(--px-font);
  -webkit-font-smoothing: none;
  font-size: 20px;
  line-height: 1.35;
  color: var(--px-ink);
  margin: 4px 0 0;
}
.px-checkin-banner-sub {
  font-size: 13px;
  color: var(--px-ink2);
  margin: 5px 0 0;
  line-height: 1.65;
}
.px-checkin-banner-sub strong {
  color: var(--px-cyan2);
}
.px-checkin-banner-side {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
@media (max-width: 620px) {
  .px-checkin-banner { gap: 16px; padding: 16px; }
  .px-checkin-banner-side { flex-basis: 100%; }
}

/* ============================================================================
   14. 打卡组件在 .ai-llm-scope 内的颜色修正
   ----------------------------------------------------------------------------
   背景：`.ai-llm-scope a { color: var(--px-cyan) }` 特异度是 (0,1,1)，
   高于 `.px-btn` / `.px-stamp` 的 (0,1,0)，会把链接按钮的文字刷成墨绿，
   压在墨绿底上导致不可见。这里用同等/更高特异度覆盖回来。
   ============================================================================ */
.ai-llm-scope a.px-btn {
  color: #F2EDE0;
}
.ai-llm-scope a.px-btn:hover {
  color: #F2EDE0;
}
.ai-llm-scope a.px-btn.is-ghost {
  color: var(--px-ink);
}
.ai-llm-scope a.px-btn.is-ghost:hover {
  color: var(--px-cyan2);
}
.ai-llm-scope a.px-btn.is-danger {
  color: var(--px-coral);
}
.ai-llm-scope a.px-btn.is-danger:hover {
  color: var(--px-coral);
}
/* 印章卡片（未解锁灰、已解锁墨绿） */
.ai-llm-scope a.px-stamp {
  color: var(--px-ink3);
}
.ai-llm-scope a.px-stamp:hover {
  color: var(--px-ink2);
}
.ai-llm-scope a.px-stamp.is-done {
  color: var(--px-cyan2);
}
.ai-llm-scope a.px-stamp.is-done .px-stamp-title {
  color: var(--px-ink);
}
/* 解锁提示条里的链接 */
.ai-llm-scope .px-unlock-sub a,
.px-unlock-sub a {
  color: var(--px-cyan2);
}
/* NEXT 引导链接 */
.ai-llm-scope #nextStamp a {
  color: var(--px-cyan2);
}
/* 印章内文字不受链接色影响 */
.ai-llm-scope a.px-stamp .px-stamp-ico {
  color: var(--px-ink3);
}
.ai-llm-scope a.px-stamp.is-done .px-stamp-ico {
  color: #F2EDE0;
}

/* ============================================================================
   15. 学习花束 · 花朵卡片 · 花束舞台
   ----------------------------------------------------------------------------
   17 种像素鲜花取代原「单字印章」。花束随解锁逐朵开放，集齐成一整束。
   设计语汇沿用：墨黑硬边框 + 硬投影 + 米白纸底 + 墨绿叶片。
   ============================================================================ */

/* ---- 花束舞台（纪念卡顶部）---- */
.px-bouquet-stage {
  display: flex;
  justify-content: center;
  padding: 6px 0 18px;
}
.px-bouquet-frame {
  position: relative;
  display: inline-block;
  padding: 16px 20px 14px;
  border: 2px dashed var(--px-line2);
  background: linear-gradient(to bottom, #FBF7EE 0%, #F3EEE1 100%);
}
/* 花束底部地面投影，增加「插在瓶里」的实感 */
.px-bouquet-frame:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 56%;
  height: 6px;
  background: rgba(34, 32, 26, 0.10);
  filter: blur(0.5px);
}
.px-bouquet {
  display: block;
  max-width: 100%;
  height: auto;
}
.px-bouquet.is-compact {
  display: block;
}

/* 花朵生长动效：解锁的花从花心「弹」出来 */
.px-bq-flower.is-bloom {
  animation: pxBloom 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--d, 0s);
  transform-box: fill-box;
  transform-origin: center bottom;
}
@keyframes pxBloom {
  0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.10) rotate(2deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

/* ---- 花朵卡片（按章分组的明细列表）---- */
.px-flower-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.px-flower-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px 11px;
  border: 2px dashed var(--px-line2);
  background: var(--px-panel2);
  color: var(--px-ink3);
  text-align: center;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.px-flower-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--px-line2);
  background: var(--px-panel);
}
.px-flower-card-art {
  display: block;
  line-height: 0;
  margin-bottom: 4px;
}
.px-flower-card-art svg {
  display: block;
}
/* 已开放：实心墨黑硬边框 + 淡绿底 + 打勾 */
.px-flower-card.is-bloom {
  border: 2px solid var(--px-line);
  background: var(--px-wash);
  box-shadow: 3px 3px 0 var(--px-line2);
}
.px-flower-card.is-bloom .px-flower-card-art svg {
  filter: drop-shadow(1px 1px 0 rgba(34, 32, 26, 0.18));
}
.px-flower-card.is-bloom:after {
  content: "\2713";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #F2EDE0;
  background: var(--px-cyan2);
  border: 2px solid var(--px-line);
}
.px-flower-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--px-ink3);
}
.px-flower-card.is-bloom .px-flower-card-name {
  color: var(--px-cyan2);
}
.px-flower-card-en {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--px-ink3);
  opacity: 0.8;
}
.px-flower-card-no {
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--px-ink3);
}
.px-flower-card.is-bloom .px-flower-card-no {
  color: var(--px-cyan2);
}
.px-flower-card-title {
  font-size: 11.5px;
  line-height: 1.45;
  color: inherit;
}

/* ---- 附录说明（打卡页底部，避免用户以为漏了）---- */
.px-appendix-note {
  margin-top: 20px;
  padding: 11px 14px;
  border: 2px dashed var(--px-line2);
  background: var(--px-panel2);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--px-ink2);
}
.px-appendix-note b {
  color: var(--px-ink);
}
.px-appendix-note a {
  color: var(--px-cyan2);
  font-weight: 700;
}

/* ---- 打印：花束与花朵都能印清楚 ---- */
@media print {
  .px-bouquet-frame {
    border-color: #B8AC8C;
    background: #fff;
  }
  .px-bouquet-frame:after { display: none; }
  .px-flower-card,
  .px-flower-card.is-bloom {
    box-shadow: none !important;
    background: #fff !important;
  }
  .px-flower-card.is-bloom { background: #D9E9DE !important; }
  .px-bq-flower.is-bloom { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .px-bq-flower.is-bloom { animation: none !important; }
}

/* ---- 首页横幅里的小版花束 ---- */
.px-checkin-banner-bouquet {
  flex: none;
  width: 132px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 4px 0 0;
  overflow: hidden;
}
.px-checkin-banner-bouquet .px-bouquet {
  display: block;
  max-width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .px-checkin-banner-bouquet { width: 104px; }
}
@media (max-width: 620px) {
  .px-checkin-banner-bouquet { width: 88px; }
}

/* ---- 解锁提示条：像素花图标（替换原单字印章）---- */
.px-unlock-stamp.px-unlock-flower {
  background: var(--px-panel);
  padding: 2px;
  line-height: 0;
}
.px-unlock-stamp.px-unlock-flower svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* header 胶囊在深绿头部里：需要比 `header#mainHeader span` 更高的特异度，
   否则文字会被刷成米白、压在米白底上完全看不见 */
header#mainHeader a.px-checkin-chip,
header#mainHeader a.px-checkin-chip span {
  color: var(--px-ink) !important;
}
header#mainHeader a.px-checkin-chip:hover,
header#mainHeader a.px-checkin-chip:hover span {
  color: var(--px-cyan2) !important;
}
header#mainHeader a.px-checkin-chip.is-done,
header#mainHeader a.px-checkin-chip.is-done span {
  color: #F2EDE0 !important;
}
/* 胶囊里的进度数字弱化一档，但仍要可读 */
header#mainHeader a.px-checkin-chip [data-checkin-count] {
  opacity: 0.72;
}

/* ============================================================================
   16. 附录页头部胶囊的「参考资料」态
   ----------------------------------------------------------------------------
   附录不属于花束清单，随时可读、不需要按顺序解锁。
   胶囊必须与课程页的「学习中 / 已打卡」在视觉上区分开，
   否则会被误读成「附录也要排在前面的课之后才能看」。
   ============================================================================ */
.px-checkin-chip.is-ref {
  background: var(--px-panel2);
  border-color: var(--px-line2);
  border-style: dashed;
  color: var(--px-ink2);
}
.px-checkin-chip.is-ref .px-checkin-dot {
  background: transparent;
  border: 1px dashed var(--px-line2);
}
.px-checkin-chip.is-ref:hover {
  background: var(--px-wash);
  border-color: var(--px-line);
  color: var(--px-cyan2);
}
/* 头部规则带 !important，这里同步提权 */
header#mainHeader a.px-checkin-chip.is-ref,
header#mainHeader a.px-checkin-chip.is-ref span {
  color: var(--px-ink2) !important;
}
header#mainHeader a.px-checkin-chip.is-ref:hover,
header#mainHeader a.px-checkin-chip.is-ref:hover span {
  color: var(--px-cyan2) !important;
}

/* ---- 路线图上的「随时可读」标签：中性色，不能用红色 ----
   红色在本站语义是「警示 / 错误」（答错、清空进度），
   而附录标签表达的是「无门槛、随时进」，必须用中性色，
   否则会被误读成「这里有问题」或「被标记了」。 */
.ai-llm-scope .rm-flag:not(.end) {
  background: var(--px-panel2) !important;
  color: var(--px-ink2) !important;
  border: 1px dashed var(--px-line2) !important;
  box-shadow: none;
}