/* ==========================================================================
   化工总控工（高级）刷题系统 —— 全部样式
   风格：iOS 液态玻璃（Glassmorphism）
   ========================================================================== */

/* ---------------- 基础重置 ---------------- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;                 /* 由各视图内部滚动 */
  overscroll-behavior: none;        /* 禁止移动端下拉刷新/橡皮筋 */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  color: #1a1a2e;
  font-size: 15px;
  line-height: 1.5;
  background: linear-gradient(135deg, #e0e7ff 0%, #f0e7ff 40%, #ffe7f0 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- 隐藏所有滚动条 ---------------- */
::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { scrollbar-width: none; -ms-overflow-style: none; }

button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; border: none; background: none; outline: none; }
button { cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ---------------- 背景模糊光斑 ---------------- */
.bg-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; }
.blob.b1 { width: 260px; height: 260px; left: -70px; top: -60px; background: #a5b4fc; }
.blob.b2 { width: 300px; height: 300px; right: -90px; top: 120px; background: #d8b4fe; }
.blob.b3 { width: 280px; height: 280px; left: 20px; bottom: -110px; background: #fbcfe8; }

/* ---------------- 应用容器与视图切换 ---------------- */
.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  height: 100vh;      /* 兼容回退：不支持 dvh 的浏览器 */
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.view { display: none; flex: 1; min-height: 0; }
.view.active { display: flex; flex-direction: column; }

/* 可滚动视图（首页及各列表页） */
#view-home.active,
#view-simple.active,
#view-type.active,
#view-flash.active,
#view-search.active,
#view-wrong.active,
#view-fav.active,
#view-master.active,
#view-note.active,
#view-memo.active,
#view-error.active {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(26px + env(safe-area-inset-bottom));
}

/* 答题页为定高布局，不整体滚动；底部留出固定状态栏的高度 */
#view-quiz.active {
  padding: 0 14px calc(86px + env(safe-area-inset-bottom));
  overflow: hidden;
  position: relative;
}

/* ---------------- 通用毛玻璃卡片 ---------------- */
.glass-card,
.quick-card,
.func-card,
.big-btn,
.tool-card,
.q-card,
.row-card,
.search-box,
.modal-panel,
.flash-face {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(80, 80, 160, 0.10);
}

/* ==========================================================================
   一、首页
   ========================================================================== */
.home-head { padding: 6px 2px 2px; }

.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.app-title { font-size: 22px; font-weight: 700; letter-spacing: 0.3px; }

.app-sub { font-size: 12px; color: #8a8aa8; margin-top: 2px; }
.head-txt { min-width: 0; }

.pill-btn {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.32);
  transition: transform 0.18s ease-out;
}
.pill-btn:active { transform: scale(0.95); }
.pill-btn.ghost {
  color: #6366f1;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(80, 80, 160, 0.10);
}

.update-line { font-size: 12px; color: #8a8aa8; margin-top: 10px; }
.update-line span { font-weight: 700; color: #6366f1; }

/* 顶部横向搜索长条 */
.search-bar {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: 18px;
  font-size: 13px; color: #8a8aa8;
  text-align: left;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(80, 80, 160, 0.10);
  transition: transform 0.18s ease-out;
}
.search-bar:active { transform: scale(0.985); }
.search-bar-ico { font-size: 15px; }
.search-bar-txt { flex: 1; min-width: 0; }
.search-bar-arrow { color: #b9b9d4; font-size: 18px; }

/* 四个快捷入口 */
.quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }

.quick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  border-radius: 18px;
  transition: transform 0.18s ease-out;
}
.quick-card:active { transform: scale(0.95); }

.quick-ico {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 17px;
  color: #fff;
  box-shadow: 0 6px 14px rgba(80, 80, 160, 0.18);
}
.ico-red { background: linear-gradient(135deg, #f87171, #ef4444); }
.ico-amber { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.ico-green { background: linear-gradient(135deg, #34d399, #10b981); }
.ico-blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }

.quick-label { font-size: 11px; color: #4b4b6b; }

.quick-badge {
  position: absolute; top: 6px; right: 8px;
  min-width: 18px; padding: 0 5px;
  border-radius: 999px;
  font-size: 10px; line-height: 16px; text-align: center;
  color: #fff;
  background: rgba(99, 102, 241, 0.92);
}

/* 功能网格 */
.grid-func { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }

.func-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 10px 11px;
  border-radius: 20px;
  text-align: left;
  transition: transform 0.18s ease-out;
}
.func-card:active { transform: scale(0.96); }

.func-ico {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 6px 14px rgba(80, 80, 160, 0.16);
}
.g-indigo { background: linear-gradient(135deg, #818cf8, #6366f1); }
.g-purple { background: linear-gradient(135deg, #c084fc, #a855f7); }
.g-pink   { background: linear-gradient(135deg, #fb7185, #ec4899); }
.g-cyan   { background: linear-gradient(135deg, #67e8f9, #06b6d4); }
.g-blue   { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.g-teal   { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }
.g-green  { background: linear-gradient(135deg, #34d399, #10b981); }
.g-red    { background: linear-gradient(135deg, #f87171, #ef4444); }

.func-title { font-size: 13px; font-weight: 700; }
.func-sub { font-size: 10px; color: #8a8aa8; }

/* 两个大按钮 */
.big-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

.big-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 16px 15px;
  border-radius: 22px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: transform 0.18s ease-out;
}
.big-btn:active { transform: scale(0.97); }
.big-green { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 10px 26px rgba(16, 185, 129, 0.28); }
.big-blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 10px 26px rgba(59, 130, 246, 0.28); }

.big-title { font-size: 15px; font-weight: 700; }
.big-sub { font-size: 12px; opacity: 0.92; }

/* 底部三个小工具 */
.tools-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }

.tool-card {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 6px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #4b4b6b;
  transition: transform 0.18s ease-out;
}
.tool-card:active { transform: scale(0.96); }
.tool-ico { font-size: 14px; }

.foot-note { margin-top: 16px; text-align: center; font-size: 10px; color: #a0a0bd; }

/* ==========================================================================
   二、答题页
   ========================================================================== */
.quiz-head {
  flex: none;
  display: flex; align-items: center; gap: 7px;
  padding: 12px 0 10px;
  min-width: 0;
}

.icon-btn {
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; color: #4b4b6b;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(80, 80, 160, 0.10);
  transition: transform 0.18s ease-out;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn.tiny { width: 32px; height: 32px; font-size: 14px; }

.progress-pill {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #6366f1;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(80, 80, 160, 0.10);
}

.head-spacer { flex: 1; }

.exam-tools { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.exam-tools[hidden] { display: none; }

.timer {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1a1a2e;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.timer.warn { color: #ef4444; background: rgba(254, 226, 226, 0.75); }

.submit-btn {
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.30);
}
.submit-btn:active { transform: scale(0.95); }

/* 题目卡片 + 滑动舞台 */
.quiz-stage { flex: 1; min-height: 0; display: flex; align-items: stretch; touch-action: pan-y; }

.q-card {
  flex: 1;
  min-height: 0;
  display: flex;
  border-radius: 26px;
  padding: 18px 16px;
  overflow: hidden;
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
  will-change: transform;
}

.q-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
}

.q-kp { float: right; font-size: 11px; color: #8a8aa8; margin-top: 2px; }

.q-text { margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.62; }

.opt-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.5;
  color: #1a1a2e;
  background: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(80, 80, 160, 0.08);
  transition: transform 0.16s ease-out, background 0.2s, border-color 0.2s;
}
.opt:active { transform: scale(0.985); }

.opt-key {
  flex: none;
  width: 22px; height: 22px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 12px; font-weight: 700; color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
}

/* 选中（考试模式 / 多选暂存） */
.opt.picked { border-color: #6366f1; background: rgba(99, 102, 241, 0.12); }
.opt.picked .opt-key { color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); }

/* 判分后状态 */
.opt.correct { border-color: #10b981; background: rgba(16, 185, 129, 0.14); }
.opt.correct .opt-key { color: #fff; background: linear-gradient(135deg, #34d399, #10b981); }
.opt.wrong { border-color: #ef4444; background: rgba(239, 68, 68, 0.13); }
.opt.wrong .opt-key { color: #fff; background: linear-gradient(135deg, #f87171, #ef4444); }
.opt.locked { pointer-events: none; }

/* 解析面板 */
.exp-panel {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  font-size: 13px; line-height: 1.66; color: #3f3f5e;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.95);
  animation: expUp 0.3s ease-out both;
}
.exp-panel .exp-title { display: block; font-weight: 700; color: #6366f1; margin-bottom: 4px; }
.exp-panel .exp-ans { color: #10b981; font-weight: 700; }

.multi-bar { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.btn-primary {
  padding: 11px 18px;
  border-radius: 16px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.30);
  transition: transform 0.16s ease-out;
}
.btn-primary:active { transform: scale(0.96); }
.btn-ghost {
  padding: 11px 18px;
  border-radius: 16px;
  font-size: 14px; font-weight: 700; color: #6366f1;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.95);
  transition: transform 0.16s ease-out;
}
.btn-ghost:active { transform: scale(0.96); }

.quiz-tip { flex: none; text-align: center; font-size: 11px; color: #9a9ab8; padding: 8px 0 6px; }

/* 底部状态栏：始终固定在屏幕最下方（收藏 / 笔记 / 对多少 / 错多少） */
.quiz-foot {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(80, 80, 160, 0.10);
}

.foot-btn {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px; font-weight: 600; color: #6366f1;
  background: rgba(99, 102, 241, 0.10);
}
.foot-btn.on { color: #f59e0b; background: rgba(245, 158, 11, 0.14); }

.foot-stat { font-size: 12px; font-weight: 700; }
.stat-ok { color: #10b981; }
.stat-no { color: #ef4444; }
.quiz-foot .foot-stat:first-of-type { margin-left: auto; }

/* ==========================================================================
   三、通用页面头 / 列表页
   ========================================================================== */
.page-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; }
.page-title { flex: 1; font-size: 18px; font-weight: 700; }
.page-head .head-spacer { flex: 1; }

.info-card { padding: 15px 16px; border-radius: 22px; margin-bottom: 12px; }
.info-big { font-size: 15px; font-weight: 700; }
.info-small { font-size: 12px; color: #8a8aa8; margin-top: 6px; line-height: 1.6; }
.err-card { margin-top: 40px; }

.list-hint { font-size: 12px; color: #8a8aa8; margin: 0 2px 10px; }

.list-col { display: flex; flex-direction: column; gap: 10px; }

.row-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: 20px;
  text-align: left;
  transition: transform 0.18s ease-out;
}
.row-card:active { transform: scale(0.98); }

.row-ico {
  flex: none;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  font-size: 16px; color: #fff;
  box-shadow: 0 6px 14px rgba(80, 80, 160, 0.16);
}

.row-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-txt b { font-size: 14px; font-weight: 700; }
.row-txt em { font-style: normal; font-size: 11px; color: #8a8aa8; }
.row-txt .row-q { font-size: 13px; font-weight: 600; line-height: 1.5; display: block; }
.row-txt .row-meta { font-size: 11px; color: #8a8aa8; display: block; margin-top: 3px; }
.row-num { flex: none; font-size: 12px; font-weight: 700; color: #6366f1; }
.row-arrow { flex: none; font-size: 18px; color: #b9b9d4; }

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  color: #6366f1; background: rgba(99, 102, 241, 0.12);
  margin-right: 6px;
}
.tag-ok { color: #10b981; background: rgba(16, 185, 129, 0.14); }
.tag-no { color: #ef4444; background: rgba(239, 68, 68, 0.14); }

.empty-tip { padding: 40px 10px; text-align: center; font-size: 13px; color: #9a9ab8; line-height: 1.8; }

/* ==========================================================================
   四、闪卡
   ========================================================================== */
.flash-stage {
  flex: none;
  height: 58vh;
  min-height: 300px;
  perspective: 1200px;
  touch-action: pan-y;
}

.flash-card {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.4s ease-out;
  will-change: transform;
}
.flash-card.flipped { transform: rotateY(180deg); }

.flash-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 22px 20px;
  border-radius: 28px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.flash-front { background-image: linear-gradient(150deg, rgba(233, 226, 255, 0.86), rgba(255, 255, 255, 0.62)); }
.flash-back { background-image: linear-gradient(150deg, rgba(219, 234, 254, 0.88), rgba(255, 255, 255, 0.62)); transform: rotateY(180deg); }

.flash-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #a855f7, #8b5cf6);
}
.flash-tag.tag-blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }

.flash-title { margin-top: 18px; font-size: 24px; font-weight: 800; line-height: 1.4; }
.flash-hint { margin-top: auto; font-size: 12px; color: #8a8aa8; }

.flash-content {
  margin-top: 14px;
  font-size: 13.5px; line-height: 1.8; color: #33334f;
  overflow-y: auto;
  white-space: pre-line;   /* 知识点按行分条显示 */
  -webkit-overflow-scrolling: touch;
}

.flash-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.flash-progress { font-size: 13px; font-weight: 700; color: #6366f1; }

/* ==========================================================================
   五、搜索
   ========================================================================== */
.search-box {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 18px;
  margin-bottom: 10px;
}
.search-ico { font-size: 15px; }
#searchInput { flex: 1; font-size: 14px; background: transparent; }
.clear-btn { flex: none; width: 24px; height: 24px; border-radius: 50%; color: #8a8aa8; background: rgba(0, 0, 0, 0.05); font-size: 12px; }
.search-count { font-size: 12px; color: #8a8aa8; margin: 0 2px 10px; }

/* ==========================================================================
   六、遮罩层、弹窗、提示
   ========================================================================== */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 26px; }
.overlay[hidden] { display: none; }

.overlay-mask {
  position: absolute; inset: 0;
  background: rgba(40, 40, 80, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-panel, .pause-panel {
  position: relative;
  width: 100%; max-width: 340px;
  padding: 20px 18px 16px;
  border-radius: 26px;
  animation: popIn 0.24s ease-out both;
}

.modal-title { font-size: 17px; font-weight: 700; text-align: center; }
.modal-msg { margin-top: 10px; font-size: 13px; color: #5b5b7d; line-height: 1.66; max-height: 40vh; overflow-y: auto; }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns > button { flex: 1; }

.pause-panel { text-align: center; }
.pause-ico { font-size: 30px; }
.pause-title { margin-top: 8px; font-size: 18px; font-weight: 700; }
.pause-sub { margin-top: 6px; font-size: 12px; color: #8a8aa8; }
.pause-panel .btn-primary { width: 100%; margin-top: 16px; }

.result-panel { text-align: center; }
.result-score {
  margin-top: 8px;
  font-size: 46px; font-weight: 800; line-height: 1.1;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.result-sub { font-size: 12px; color: #8a8aa8; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.result-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 2px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.95);
}
.result-cell b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.result-cell span { font-size: 10px; color: #8a8aa8; }
.result-note { margin-top: 12px; font-size: 11px; color: #8a8aa8; line-height: 1.6; }

.note-input {
  width: 100%; margin-top: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 13px; line-height: 1.6;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.95);
  resize: none;
}

.subject-body { margin-top: 10px; font-size: 13px; color: #5b5b7d; line-height: 1.8; }
.subject-body b { color: #6366f1; }

.toast {
  position: fixed; left: 50%; bottom: 88px; z-index: 90;
  transform: translateX(-50%);
  max-width: 80vw;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 13px; color: #fff; text-align: center;
  background: rgba(40, 40, 80, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: toastUp 0.24s ease-out both;
}
.toast[hidden] { display: none; }

/* ==========================================================================
   七、动画
   ========================================================================== */
@keyframes expUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes toastUp {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* 窄屏微调 */
@media (max-width: 360px) {
  .func-title { font-size: 12px; }
  .quick-label { font-size: 10px; }
  .q-text { font-size: 15px; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- 补充：选项文本、搜索高亮、闪卡切换动画 ---------------- */
.opt-txt { flex: 1; min-width: 0; word-break: break-word; }
.quiz-stage { -webkit-user-select: none; user-select: none; }
mark { padding: 0 2px; border-radius: 4px; color: #4338ca; background: rgba(99, 102, 241, 0.20); }

@keyframes flashSlideNext {
  from { opacity: 0.15; transform: translateX(55%) rotateY(0deg); }
  to { opacity: 1; transform: translateX(0) rotateY(0deg); }
}
@keyframes flashSlidePrev {
  from { opacity: 0.15; transform: translateX(-55%) rotateY(0deg); }
  to { opacity: 1; transform: translateX(0) rotateY(0deg); }
}
.flash-card.slide-next { animation: flashSlideNext 0.24s ease-out; }
.flash-card.slide-prev { animation: flashSlidePrev 0.24s ease-out; }

/* ==========================================================================
   九、列表页纵向滚动修复 + 上一题/下一题按钮 + 闪卡翻转按钮 + 今日答题
   ========================================================================== */

/* 关键修复：flex 子项默认会被压缩，导致内容比屏幕长时容器反而不滚动。
   这些页面全部改为不收缩，交给外层 .view 滚动。 */
#view-home.active > *,
#view-simple.active > *,
#view-type.active > *,
#view-flash.active > *,
#view-search.active > *,
#view-wrong.active > *,
#view-fav.active > *,
#view-master.active > *,
#view-note.active > *,
#view-memo.active > *,
#view-daily.active > *,
#view-error.active > * { flex: 0 0 auto; }

#view-memo.active, #view-daily.active, #view-search.active,
#view-wrong.active, #view-fav.active, #view-master.active, #view-note.active {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 底部栏里的上一题 / 下一题 */
.nav-btn {
  flex: none;
  width: 40px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 17px; font-weight: 700; color: #6366f1;
  background: rgba(99, 102, 241, 0.10);
  transition: transform 0.15s ease-out;
}
.nav-btn:active { transform: scale(0.92); }
.nav-btn.dim { opacity: 0.32; }

/* 闪卡翻转按钮 */
.flash-flip-btn {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border-radius: 18px;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  box-shadow: 0 10px 26px rgba(99, 102, 241, 0.28);
  transition: transform 0.16s ease-out;
}
.flash-flip-btn:active { transform: scale(0.97); }

/* 今日答题 */
.daily-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.daily-cell {
  padding: 14px 8px 12px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(80, 80, 160, 0.10);
}
.daily-cell b { display: block; font-size: 23px; font-weight: 800; line-height: 1.2; }
.daily-cell span { display: block; margin-top: 3px; font-size: 11px; color: #8a8aa8; }
.daily-cell.ok b { color: #10b981; }
.daily-cell.no b { color: #ef4444; }
.daily-cell.time b { color: #6366f1; }

.daily-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 13px; color: #4b4b6b;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.daily-line b { color: #6366f1; }

/* 窄屏时底部栏再紧凑一点 */
@media (max-width: 380px) {
  .foot-btn { padding: 6px 8px; font-size: 11px; }
  .nav-btn { width: 34px; }
}


/* ==========================================================================
   八、答题卡（题号导航）与新增小控件
   ========================================================================== */
.card-btn {
  flex: none;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px; font-weight: 700; color: #6366f1;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(80, 80, 160, 0.10);
  white-space: nowrap;
}
.card-btn:active { transform: scale(0.95); }
.card-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.30);
}

/* 背题模式：卡片轻微提亮，解析面板始终展开 */
.q-card.recite { background: rgba(255, 255, 255, 0.72); }
.q-card.recite .exp-panel { border-color: rgba(99, 102, 241, 0.35); }

.card-panel { max-width: 360px; }
.card-sub { font-size: 12px; font-weight: 600; color: #8a8aa8; margin-left: 4px; }

.card-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 11px; color: #8a8aa8; }
.card-legend .lg { display: flex; align-items: center; gap: 4px; }
.card-legend .lg::before { content: ''; width: 10px; height: 10px; border-radius: 4px; display: inline-block; }
.lg-ok::before { background: linear-gradient(135deg, #34d399, #10b981); }
.lg-no::before { background: linear-gradient(135deg, #f87171, #ef4444); }
.lg-none::before { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(140, 140, 180, 0.35); }
.lg-cur::before { background: #6366f1; }
.lg-done::before { background: linear-gradient(135deg, #818cf8, #6366f1); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}

.card-num {
  height: 38px;
  border-radius: 12px;
  font-size: 13px; font-weight: 700;
  color: #4b4b6b;
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(80, 80, 160, 0.08);
  transition: transform 0.15s ease-out;
}
.card-num:active { transform: scale(0.92); }
.card-num.is-ok { color: #fff; background: linear-gradient(135deg, #34d399, #10b981); border-color: rgba(255, 255, 255, 0.6); }
.card-num.is-no { color: #fff; background: linear-gradient(135deg, #f87171, #ef4444); border-color: rgba(255, 255, 255, 0.6); }
.card-num.is-done { color: #fff; background: linear-gradient(135deg, #818cf8, #6366f1); border-color: rgba(255, 255, 255, 0.6); }
.card-num.is-cur { outline: 2px solid #6366f1; outline-offset: 1px; }

/* 我的斩题：取消斩题按钮 */
.row-cancel {
  flex: none;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px; font-weight: 700; color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}
.row-cancel:active { transform: scale(0.94); }

/* 顶部“清空本地记录”文字按钮 */
.link-btn { font-size: 10px; color: #8a8aa8; text-decoration: underline; padding: 5px 6px; }

/* 窄屏适配 */
@media (max-width: 420px) {
  .quiz-head { gap: 6px; }
  .timer { font-size: 13px; padding: 6px 8px; }
  .submit-btn { padding: 7px 10px; font-size: 12px; }
  .card-btn { padding: 6px 8px; font-size: 11.5px; }
  .progress-pill { padding: 6px 10px; font-size: 12px; }
  .icon-btn { width: 34px; height: 34px; font-size: 18px; }
  .card-grid { grid-template-columns: repeat(5, 1fr); }
}

/* 超窄屏（≤345px）：斩题 / 背题 / 答题卡 收成纯图标，保证不换行不溢出 */
@media (max-width: 345px) {
  .card-btn .btn-lbl { display: none; }
  .card-btn .btn-ico { font-size: 13px; }
  .progress-pill { padding: 6px 8px; font-size: 11.5px; }
}