:root {
  /* ==========================================================================
     中国传统色 · 以宋代（汝窑 / 官窑 / 《营造法式》五彩遍装）取色
     命名方式：传统色名 + 用途
     ========================================================================== */

  /* 底色：宣德纸 / 素绢。刻意用「暖白」而非纯白：
     宋版书用纸偏暖，长时间读诗不刺眼，也有别于现代 UI 的冷白。 */
  --bg: #f6f1e3;            /* 米灰底（素绢） */
  --bg-soft: #fcfaf3;       /* 浅一层（生宣） */
  --card: #fffefa;          /* 卡片：宣纸高光面（与底色拉开明度差） */
  --card-2: #f7f1e1;        /* 次级卡片 */

  /* 主色：雨过天青（汝窑）。原色 #4d7d74 在米底上对比度不足，
     这里压深到 #2f6055，白字/浅底都过 WCAG AA。 */
  --green: #2f6055;         /* 天青（主色，沿用变量名以兼容既有样式） */
  --green-dark: #234b42;    /* 深天青 */
  --green-light: #dbe9e2;   /* 淡天青（浅底） */
  --celadon: #4f7a6e;       /* 汝窑青 */

  /* 点缀：琥珀 / 秋香 / 朱砂 / 缃色，均为宋代常用色（同样加深过） */
  --amber: #a55c19;         /* 琥珀（复习） */
  --amber-light: #f7e6d0;
  --autumn: #8a7327;        /* 秋香色 */
  --red: #a83b32;           /* 朱砂（忘记） */
  --red-light: #f7e5e1;
  --blue: #3d6379;          /* 天水碧（小古文） */
  --blue-light: #dee9ef;
  --gold: #f0cd7c;          /* 缃色（进度环，压在深天青上） */

  --ink: #241d18;           /* 墨（正文） */
  --ink-2: #6b5c4d;         /* 淡墨（次要文字）：原 #7b6d5e 偏浅 */
  --ink-3: #8a7a68;         /* 更淡的辅助文字（说明 / 页脚） */
  --line: #d6c8ad;          /* 界行（描金细线） */
  --radius: 16px;
  --shadow: 0 2px 14px rgba(74, 58, 38, 0.10);
  --shadow-up: 0 -2px 16px rgba(74, 58, 38, 0.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 原生表单控件默认用系统 UI 字体（Windows/安卓上常被解析成 Arial），
   显式继承页面字体，保证中文字形一致、不跳出主题字体 */
button,
input,
select,
textarea {
  font-family: inherit;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  /* 底色见文件末尾「宋式纹样」一节：
     素绢底 + 龟背纹平铺，晕染由 body::before 单独铺一层 */
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.6;
}

.app, #app {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 14px 40px;
}

/* 顶部 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 加上刘海/灵动岛高度，避免标题被状态栏压住 */
  padding: calc(18px + var(--safe-top)) 2px 12px;
}
.brand { display: flex; align-items: center; gap: 10px; }
/* 图标统一用内联 SVG，颜色跟随文字色，缩放不失真 */
.brand-icon { display: inline-flex; color: var(--green); }
.brand-icon svg { width: 26px; height: 26px; }
.brand-text h1 {
  font-size: 19px;
  margin: 0;
  font-weight: 600;
}
.brand-text p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
}
.icon-btn {
  border: none;
  background: var(--card);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn svg { width: 21px; height: 21px; }

/* 卡片 */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 14px;
}

/* 选择器 */
.selector-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.selector-label {
  width: 40px;
  flex: 0 0 40px;
  font-size: 13px;
  color: var(--ink-2);
}
.seg {
  display: flex;
  background: var(--bg);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
}
.seg button.active {
  background: var(--card);
  color: var(--green);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.seg.small button { font-size: 13px; padding: 6px 8px; }
/* 弹层内的注音档位：小尺寸，三档并排不抢正文空间 */
.seg.mini {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--card);
}
.seg.mini button { font-size: 12.5px; padding: 5px 9px; }

.chips {
  display: flex;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips button {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
}
.chips button.active {
  background: var(--green);
  border-color: var(--green);
  color: #fdfaf2;
  font-weight: 600;
}

/* 今日进度条 */
.today-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 雨过天青：汝窑主色渐变 */
  background: linear-gradient(135deg, #1f443c 0%, #2f6055 50%, #4f7a6e 100%);
  color: #fffdf8;
  box-shadow: 0 3px 18px rgba(35, 75, 66, .30);
  position: relative;
  overflow: hidden;
}
.today-title { font-size: 16px; font-weight: 600; }
.today-sub { font-size: 12.5px; opacity: .88; }
.ring { position: relative; width: 56px; height: 56px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring path { fill: none; stroke-width: 3; stroke-linecap: round; }
.ring-bg { stroke: rgba(255, 255, 255, .28); }
.ring-fg { stroke: var(--gold); transition: stroke-dasharray .4s ease; }
.ring span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* 列表 */
.list { display: flex; flex-direction: column; gap: 10px; }

.item {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border-left: 4px solid transparent;
  position: relative;
}
.item:active { transform: scale(.985); }
.item.review { border-left-color: var(--amber); }
.item.new { border-left-color: var(--green); }
.item.done { opacity: .55; }
.item.done .item-title { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }

.item-index {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.item.review .item-index { background: var(--amber-light); color: var(--amber); }
.item-main { flex: 1; min-width: 0; }
.item-title {
  font-size: 16.5px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.item-meta {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 3px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.item-reason {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green);
  font-weight: 500;
}
.item-reason.review { background: var(--amber-light); color: var(--amber); }
.item-arrow { color: #9db3a9; font-size: 18px; }

/* 进度条小 */
.mbar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  margin-top: 6px;
}
.mbar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8fb3a6, var(--green));
  border-radius: 2px;
  transition: width .3s;
}

/* 全部诗词折叠 */
.all-section { margin-top: 14px; }
.classic-entry { margin-top: 14px; }
.collapse-head {
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 0;
}
.collapse-head .collapse-icon { display: inline-flex; color: var(--green); }
.collapse-head .collapse-icon svg { width: 20px; height: 20px; }
.collapse-head .badge {
  background: var(--green-light);
  color: var(--green);
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.collapse-head .arrow {
  margin-left: auto;
  color: var(--ink-2);
  transition: transform .2s;
}
.collapse-head.open .arrow { transform: rotate(180deg); }
.collapse-body { padding-top: 12px; }

.stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.stat {
  flex: 1;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}
.stat b { display: block; font-size: 18px; color: var(--green); }
.stat.review b { color: var(--amber); }
.stat span { font-size: 11.5px; color: var(--ink-2); }

/* 弹层 */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(46, 36, 26, .48);
  backdrop-filter: blur(2px);
  animation: fade .2s;
}
.modal-box {
  position: relative;
  background: var(--bg-soft);
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding: 22px 20px 26px;
  animation: slideUp .26s cubic-bezier(.2, .8, .3, 1);
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .18);
}
.modal-box.small { border-radius: 22px; max-width: 420px; margin: auto; animation: pop .2s; }
@media (min-width: 700px) {
  .modal { align-items: center; }
  .modal-box { border-radius: 22px; max-height: 86vh; }
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: var(--bg);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}
.modal-head h2 {
  margin: 0 0 8px;
  font-size: 23px;
  letter-spacing: 1px;
  /* 与正文同一条中轴 */
  text-align: center;
}
/* 朝代 / 作者标签跟着正文居中（正文居中后标题行再左对齐会显得歪） */
.modal-head .meta { justify-content: center; }
.meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.tag {
  font-size: 12px;
  background: var(--green-light);
  color: var(--green);
  border-radius: 6px;
  padding: 2px 9px;
  font-weight: 500;
}
.tag.ghost { background: var(--bg); color: var(--ink-2); }

.poem-text {
  font-size: 19px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  /* 正文块自身居中：pre 默认盒宽会吃满容器，max-width: fit-content + margin auto 后整块居中 */
  max-width: fit-content;
  margin: 16px auto;
  /* 行内文字也居中：诗句不满一行（如绝句的起承转合）时按最长句对齐 */
  text-align: center;
  color: #22302a;
  letter-spacing: 1.5px;
}

.modal-progress {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.actions { display: flex; gap: 10px; }
.actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.actions .btn .btn-icon { display: inline-flex; }
.actions .btn .btn-icon svg { width: 17px; height: 17px; }
.btn {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  color: var(--ink);
}
.btn:active { transform: scale(.97); }
.btn.bad { color: var(--red); border-color: #ecd2cd; background: var(--red-light); }
.btn.fuzzy { color: var(--amber); border-color: #ecdcc5; background: var(--amber-light); }
.btn.good { color: #fdfaf2; background: var(--green); border-color: var(--green); }

.hint { font-size: 12px; color: var(--ink-2); margin-top: 12px; text-align: center; }

.settings-item { margin: 14px 0; }
.settings-item .chips { flex-wrap: wrap; }
.settings-item .seg { flex-wrap: wrap; overflow: visible; }
.settings-item label {
  display: block;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-bottom: 8px;
  font-weight: 500;
}
.settings-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.settings-input:focus { border-color: var(--green); background: #fffdf6; }
.settings-input::placeholder { color: #9c8d7b; }
.settings-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

.settings-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ghost-btn { flex: 1; min-width: 90px; padding: 9px; font-size: 13.5px; }
.danger-btn { flex: 1; min-width: 90px; padding: 9px; font-size: 13.5px; color: var(--red); border-color: #ecd2cd; background: var(--red-light); }
.settings-tip {
  font-size: 12px;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 10px;
  padding: 10px;
  line-height: 1.7;
  margin-top: 16px;
}

.foot { text-align: center; font-size: 11.5px; color: var(--ink-3); padding: 10px 0 0; }
/* 版权 + 用户协议 / 隐私条款链接：两行居中，窄屏不挤在一起 */
.foot-copy { display: block; }
.foot-links { display: inline-flex; gap: 6px; margin-top: 6px; }
.foot-links a { color: var(--ink-3); text-decoration: none; }
.foot-links a:hover { color: var(--green); text-decoration: underline; }
.foot-sep { color: #c8bcaa; }

.empty {
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  padding: 30px 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  background: rgba(46, 36, 26, .92);
  color: #fdfaf2;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 999px;
  z-index: 99;
  animation: fade .2s;
}

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(30px); opacity: .4 } to { transform: none; opacity: 1 } }
@keyframes pop { from { transform: scale(.94); opacity: .4 } to { transform: none; opacity: 1 } }

/* ==========================================================================
   iOS / PWA 适配
   ========================================================================== */

:root {
  /* 安全区：iPhone 刘海屏、灵动岛、底部横条。
     非 iOS 设备上 env() 为 0，不影响原有布局。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* 由 js/pwa.js 在 iOS 上写入，修正地址栏收起/展开导致的 100vh 抖动 */
  --app-vh: 1vh;
}

/* 让左右内容避开横屏时的圆角/刘海 */
.app {
  padding-left: calc(14px + var(--safe-left));
  padding-right: calc(14px + var(--safe-right));
}

/* 底部留出横条高度，否则最后一项会被 Home Indicator 压住 */
.app {
  padding-bottom: calc(40px + var(--safe-bottom));
}

/* 底部弹层避开 Home Indicator */
.modal-box {
  padding-bottom: calc(26px + var(--safe-bottom));
}

/* 中间弹出的弹层（设置）也留安全边距 */
.modal-box.small {
  max-height: calc(86 * var(--app-vh));
  margin-bottom: calc(12px + var(--safe-bottom));
}

/* 吐司提示上移，避免被横条遮挡 */
.toast {
  bottom: calc(76px + var(--safe-bottom));
}

/* iOS 输入控件：字号小于 16px 时，聚焦会自动放大页面 */
@media screen and (max-width: 700px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* 防止 iOS 上长按选中文字/弹出放大镜，影响小朋友点击 */
button,
.seg,
.chips {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 允许正文可复制（家长可能想复制诗句） */
.poem-text,
.modal-head h2 {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- 「添加到主屏幕」引导条 ---------- */
.ios-install-tip {
  position: fixed;
  left: calc(12px + var(--safe-left));
  right: calc(12px + var(--safe-right));
  bottom: calc(12px + var(--safe-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-soft);
  border: 1px solid #e5d7b4;
  border-radius: 14px;
  padding: 11px 12px;
  box-shadow: 0 6px 22px rgba(74, 58, 38, .16);
  font-size: 13px;
  line-height: 1.45;
  animation: slideUp .28s cubic-bezier(.2, .8, .3, 1);
}
.ios-install-tip[hidden] { display: none; }

.ios-tip-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}
.ios-tip-icon svg { width: 19px; height: 19px; }
.ios-tip-text { flex: 1; color: #5a4a24; }

.ios-tip-close {
  flex: none;
  border: none;
  background: var(--green);
  color: #fdfaf2;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ios-tip-close:active { opacity: .82; }

/* 已安装到桌面后（standalone）隐藏引导，由 JS 保证，这里兜底 */
@media (display-mode: standalone) {
  .ios-install-tip { display: none !important; }
}

/* 横屏小高度时压缩顶部留白，让内容更早出现 */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { padding-top: calc(8px + var(--safe-top)); }
}

/* 引导条不能盖住弹层里的操作按钮：
   弹层 z-index 为 50，引导条需低于它，否则「忘记/模糊/记住」会被挡住点不到 */
.ios-install-tip {
  z-index: 40;
}

/* 引导条是 fixed 的，会盖住页脚最后一行（版权 + 用户协议 / 隐私条款）。
   出现时补一段底部留白（约 100px 的条 + 12px 底距 + 一点余量），
   保证两个法务链接不会被压住、始终可点。 */
body.has-install-tip .app,
body.has-install-tip #app {
  padding-bottom: calc(100px + 12px + 24px);
}

/* ==========================================================================
   课外必背小古文入口（首页）
   ========================================================================== */
.classic-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  border-left: 4px solid var(--blue);
  transition: transform .15s, box-shadow .15s;
}
.classic-entry:active { transform: scale(.985); }
.classic-icon { display: inline-flex; color: var(--blue); flex: none; }
.classic-icon svg { width: 24px; height: 24px; }
.classic-main { flex: 1; min-width: 0; }
.classic-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.classic-sub {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* 设置里的多行说明 */
.settings-tip p { margin: 0; }
.settings-tip p + p { margin-top: 6px; }

/* ==========================================================================
   弹层正文的阅读辅助：注音 / 朗读
   ========================================================================== */

.modal-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 2px;
}
.modal-tools .mini-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--green);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.modal-tools .mini-btn[data-on="1"] { background: var(--green); border-color: var(--green); color: #fdfaf2; }
.modal-tools .mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-tools .mini-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.modal-tools .mini-btn .btn-icon svg {
  display: block;
  width: 15px;
  height: 15px;
  margin: auto;
}
.modal-tools .mini-btn[data-on="1"] .wave1 { opacity: 1; animation: wavePulse2 1.1s ease-in-out .18s infinite; }
.modal-tools .mini-btn[data-on="1"] .wave2 { opacity: 1; animation: wavePulse2 1.1s ease-in-out infinite; }
.modal-tools .mini-btn[data-on="0"] .wave1,
.modal-tools .mini-btn[data-on="0"] .wave2 { opacity: .38; }
.modal-tools .mini-btn:disabled { opacity: .5; cursor: not-allowed; }
@keyframes wavePulse2 { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

/* 注音正文 */
.poem-text.with-pinyin {
  line-height: 2.3;
  letter-spacing: 1.6px;
  /* 注音渲染成 ruby + <br>，改成 normal 才不会因为保留空白把居中挤歪 */
  white-space: normal;
}
.poem-text ruby { ruby-align: center; }
.poem-text rt {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: .52em;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  line-height: 1.05;
}

/* ==========================================================================
   字体 · 中文 Web Font
   --------------------------------------------------------------------------
   古诗词的「标题 / 朝代 / 作者 / 正文」统一使用 Noto Serif SC（思源宋体）：
   宋体本就源于宋代刻本，笔画顿挫、横细竖粗，最贴合线装书里的诗。
   字体文件用 fontTools 按本应用实际用到的 3016 个字形做了子集化后自托管
   （fonts/ 目录，共约 790 KB），因此：
     - 断网可用（不请求任何第三方 CDN）
     - 苹果 / 安卓 / Windows / Linux 渲染一致，不依赖设备自带中文字体
   其余界面文字用 Noto Sans SC（思源黑体）打头，系统自带黑体兜底。
   ========================================================================== */

@font-face {
  font-family: "Poem Sans SC";
  src: url("../fonts/NotoSansSC-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poem Sans SC";
  src: url("../fonts/NotoSansSC-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poem Serif SC";
  src: url("../fonts/NotoSerifSC-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poem Serif SC";
  src: url("../fonts/NotoSerifSC-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 诗词：标题 / 作者 / 朝代 / 正文 —— 宋体（思源宋体） */
  --font-poem: "Poem Serif SC", "Noto Serif SC", "Source Han Serif SC",
    "Songti SC", "STSong", "SimSun", "Songti TC", "PMingLiU", serif;
  /* 界面：按钮、标签、说明文字 —— 黑体（系统自带即可） */
  --font-ui: "Poem Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* 页面标题 */
.brand-text h1 {
  font-family: var(--font-poem);
  font-weight: 600;
  letter-spacing: 2px;
}

/* 列表里的诗题 / 朝代 / 作者 */
.item-title {
  font-family: var(--font-poem);
  font-weight: 600;
  letter-spacing: .6px;
}
.item-meta {
  font-family: var(--font-poem);
  letter-spacing: .4px;
}

/* 详情弹层：诗题 + 朝代/作者标签 + 正文 */
.modal-head h2,
.poem-text,
.reader-body h2,
.reader-text {
  font-family: var(--font-poem);
}
.tag {
  font-family: var(--font-poem);
}

/* 「本年级本学期全部诗词」等折叠标题也保持宋体，风格统一 */
.collapse-head,
.classic-title,
.group-name {
  font-family: var(--font-poem);
  letter-spacing: .6px;
}

/* ==========================================================================
   底部播放栏（首页 / 小古文页共用）
   --------------------------------------------------------------------------
   视觉取向：宋式美学的「音乐播放器」
    · 贴底占满整宽（不再用 margin 浮起、不再有圆角），像底部弹出的播放器
    · 配色沿用汝窑天青 + 缃色（进度环同色），深色底 + 极细描金分隔线
    · 不用「正在朗读 / 暂停 / 继续 / 下一篇 / 停止」文字，
      播放状态全部交给图标；主信息是当前这一首，下一首降一级显示
   ========================================================================== */
.player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 高度加大：底栏更从容，手指也好按；底部垫上 iPhone 横条安全区 */
  padding: 14px calc(18px + var(--safe-left)) calc(16px + var(--safe-bottom)) calc(18px + var(--safe-right));
  background: linear-gradient(180deg, #26514a 0%, #1c3f38 100%);
  color: #f6f1e3;
  border-top: 1px solid rgba(240, 205, 124, .34);
  box-shadow: 0 -10px 30px rgba(20, 40, 36, .38);
  animation: slideUp .26s cubic-bezier(.2, .8, .3, 1);
}
.player-bar[hidden] { display: none; }

/* 左侧信息区：当前一首大字，下一首小字 */
.pb-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pb-now {
  font-family: var(--font-poem);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.3;
  color: #fdf8ea;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-next {
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(246, 241, 227, .62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-next[hidden] { display: none; }

.pb-controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 图标按钮：圆角方形基座，主按钮描金填色，其余为描边式，层级分明 */
.pb-btn {
  border: none;
  background: transparent;
  color: #f6f1e3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  transition: transform .14s, background .18s, color .18s;
}
.pb-btn svg { display: block; width: 20px; height: 20px; }
.pb-glyph { display: inline-flex; align-items: center; justify-content: center; }
.pb-btn:active { transform: scale(.92); }
.pb-btn:disabled { opacity: .3; cursor: not-allowed; }

/* 上一首 / 下一首 / 停止：低一级的描边按钮 */
.pb-side {
  width: 38px;
  height: 38px;
  background: rgba(253, 248, 234, .07);
  box-shadow: inset 0 0 0 1px rgba(253, 248, 234, .22);
  color: rgba(246, 241, 227, .9);
}
.pb-side svg { width: 17px; height: 17px; }

/* 播放 / 暂停：主按钮，缃色（播放器上的「高光」） */
.pb-toggle {
  width: 46px;
  height: 46px;
  background: var(--gold);
  color: #234b42;
  box-shadow: 0 3px 12px rgba(240, 205, 124, .28);
}
.pb-toggle svg { width: 22px; height: 22px; }
.pb-toggle[data-paused="1"] { background: #f6f1e3; }

/* 播放中：当前一首左侧亮起一缕缃色游标 */
.player-bar:not([data-paused="1"]) .pb-now::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 15px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--gold);
  vertical-align: -2px;
  animation: pbPulse 1.2s ease-in-out infinite;
}
@keyframes pbPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* 有播放栏时，页面底部补留白，避免遮挡页脚与最后一首诗 */
body.has-audio-player .app,
body.has-audio-player #app {
  padding-bottom: calc(150px + var(--safe-bottom));
}
body.has-audio-player .toast { bottom: calc(140px + var(--safe-bottom)); }
body.has-audio-player .ios-install-tip { bottom: calc(112px + var(--safe-bottom)); }

/* 今日任务条里的「朗读（全部）」按钮：圆形播放键，与右侧 0/5 圆环同族 */
.today-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.today-read {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 205, 124, .62);
  background: rgba(253, 248, 234, .12);
  color: #f6f1e3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s, background .18s, color .18s, border-color .18s;
}
.today-read .play-glyph,
.today-read .pause-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.today-read svg {
  display: block;
  width: 19px;
  height: 19px;
  margin: auto;
}
/* 未播放显示 ▶，播放中显示 ⏸：一个圆形播放键说清全部状态，不再配文字 */
.today-read .pause-glyph { display: none; }
.today-read[data-on="1"] .play-glyph { display: none; }
.today-read[data-on="1"] .pause-glyph { display: inline-flex; }
.today-read:active { transform: scale(.94); }
.today-read[data-on="1"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #234b42;
}
.today-read:disabled { opacity: .5; cursor: not-allowed; }

/* 无障碍：只给读屏软件的文字，视觉上不可见 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 列表项右侧的「播放这一首」按钮：圆形播放键 */
.item-read {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .14s, background .18s, color .18s;
}
/* 图标 block 化去掉行内基线留白，flex 里才算真正居中 */
.item-read svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
}
/* 未播放显示 ▶，播放中显示 ⏸ */
.item-read .play-glyph,
.item-read .pause-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.item-read .pause-glyph { display: none; }
.item-read[data-on="1"] .play-glyph { display: none; }
.item-read[data-on="1"] .pause-glyph { display: inline-flex; }
.item-read:active { transform: scale(.94); }
.item-read[data-on="1"] { background: var(--green); border-color: var(--green); color: #fffdf8; }

/* 首页「小古文」入口：设置里可隐藏 */
.classic-entry[hidden] { display: none; }

/* 隐私 / 协议页的「极简速览」 */
.legal-mini {
  margin: 0;
  padding-left: 1.1em;
}
.legal-mini li { margin-bottom: 4px; }

/* 自动朗读时高亮当前这首 */
#today-list .item.reading {
  border-left-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-light), var(--shadow);
}

/* ==========================================================================
   全站导航：顶栏（logo + 跬步 + 页面名）+ 底部三页签
   --------------------------------------------------------------------------
   原先三页各写一份顶栏，标题 / 返回键 / 右侧按钮都不同，用户容易迷路。
   这里统一成一套：
     · 第一行固定是「徽标 + 跬步」——全站一致的身份锚点
     · 第二行是当前页面名或副标题——说清「我现在在哪」
     · 右侧一个动作位：首页是设置，内页是回首页
     · 底部三个页签（古诗词 / 小古文 / 设置）承担页面间跳转
   ========================================================================== */

/* ---------- 宋式纹样 ----------
   龟背纹（六角龟甲 + 内嵌菱花）平铺成底纹，只在极淡处出现；
   云纹点缀在卡片角落。两枚纹样都是内联 SVG data URI，不请求外部资源。 */
:root {
  --pattern-ivory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='72' viewBox='0 0 96 72'%3E%3Cg fill='none' stroke='%235b4a2b' stroke-opacity='.05' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M0 -6.2 10.4 0 0 6.2-10.4 0ZM0 6.2 10.4 12 0 18.2-10.4 12ZM0 18.2 10.4 24 0 30.2-10.4 24ZM0 30.2 10.4 36 0 42.2-10.4 36ZM0 42.2 10.4 48 0 54.2-10.4 48ZM0 54.2 10.4 60 0 66.2-10.4 60ZM0 66.2 10.4 72 0 78.2-10.4 72ZM48-6.2 58.4 0 48 6.2 37.6 0ZM48 6.2 58.4 12 48 18.2 37.6 12ZM48 18.2 58.4 24 48 30.2 37.6 24ZM48 30.2 58.4 36 48 42.2 37.6 36ZM48 42.2 58.4 48 48 54.2 37.6 48ZM48 54.2 58.4 60 48 66.2 37.6 60ZM48 66.2 58.4 72 48 78.2 37.6 72ZM96-6.2 106.4 0 96 6.2 85.6 0ZM96 6.2 106.4 12 96 18.2 85.6 12ZM96 18.2 106.4 24 96 30.2 85.6 24ZM96 30.2 106.4 36 96 42.2 85.6 36ZM96 42.2 106.4 48 96 54.2 85.6 48ZM96 54.2 106.4 60 96 66.2 85.6 60ZM96 66.2 106.4 72 96 78.2 85.6 72Z'/%3E%3Cpath d='M48 24l10.4 6v12L48 48l-10.4-6V30Z' stroke-opacity='.035'/%3E%3Cpath d='M0 36l10.4 6v12L0 60l-10.4-6V42Z' stroke-opacity='.035'/%3E%3Cpath d='M96 36l10.4 6v12L96 60l-10.4-6V42Z' stroke-opacity='.035'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%232f6055' stroke-opacity='.16' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M8 30.5c0-2.6 2.1-4.7 4.7-4.7 1.3 0 2.4.5 3.2 1.3a5 5 0 0 1 8.6-1.6 4.4 4.4 0 0 1 6.1 4 4.3 4.3 0 0 1-.6 2.2'/%3E%3Cpath d='M11.5 35.2c0-1.6 1.3-2.9 2.9-2.9'/%3E%3C/g%3E%3C/svg%3E");
}

/* 页面底：素绢底 + 龟背纹（纹样本身只有 8% 描边不透明度，远看是纸的肌理） */
html, body {
  background-image: var(--pattern-ivory);
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 168px 126px;
}
/* 晕染单独铺一层，保证纹样始终在颜料之下，不被渐变冲淡 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(47, 96, 85, .07), transparent 62%),
    radial-gradient(900px 460px at 92% 4%, rgba(165, 92, 25, .06), transparent 60%);
}
.app, #app { position: relative; z-index: 1; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(14px + var(--safe-top)) 2px 12px;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

/* 徽标：双鱼纹，压在描金细圈的圆形「瓷盘」上 */
.brand-mark,
.brand-icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  background:
    radial-gradient(circle at 32% 26%, #ffffff 0%, var(--card-2) 62%, #f1e7cf 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    inset 0 0 0 2.5px rgba(165, 92, 25, .16),
    var(--shadow);
  text-decoration: none;
}
.brand-icon svg { width: 27px; height: 27px; }

.brand-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand-name-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand-text h1 {
  font-family: var(--font-poem);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
/* 第二行：当前页面名（宋式小字，字距拉开，像书耳的题名） */
.brand-text p,
.brand-sub {
  margin: 1px 0 0;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}

/* 顶栏右侧动作：圆形纸底按钮，与徽标同族 */
.top-act,
.icon-btn {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(214, 200, 173, .7), var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .15s, color .18s, box-shadow .18s;
}
.top-act .top-act-icon { display: inline-flex; }
.top-act svg, .icon-btn svg { width: 20px; height: 20px; display: block; }
.top-act:hover, .icon-btn:hover { color: var(--green); }
.top-act:active, .icon-btn:active { transform: scale(.94); }

/* ---------- 底部三页签 ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  display: flex;
  align-items: stretch;
  padding: 6px calc(6px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(6px + var(--safe-left));
  background: linear-gradient(180deg, rgba(252, 250, 243, .96) 0%, rgba(247, 241, 227, .99) 100%);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(165, 92, 25, .18);
  box-shadow: 0 -6px 22px rgba(74, 58, 38, .10);
  animation: dockIn .26s cubic-bezier(.2, .8, .3, 1);
}
@keyframes dockIn { from { transform: translateY(12px); opacity: .4 } to { transform: none; opacity: 1 } }
/* 顶边描金细线，与底部播放栏同一语言 */
.dock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 205, 124, .7), transparent);
}
.dock-item {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px 6px;
  border-radius: 12px;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .6px;
  cursor: pointer;
  transition: color .18s, background .18s;
  -webkit-user-select: none;
  user-select: none;
}
.dock-icon { display: inline-flex; }
.dock-icon svg { width: 22px; height: 22px; display: block; }
.dock-label { line-height: 1; }
.dock-item:active { background: rgba(47, 96, 85, .07); }
.dock-item.active { color: var(--green); }
/* 选中态：页签顶部一弯缃色弧线（取宋器口沿的弧势），不做方块高亮 */
.dock-item { position: relative; }
.dock-item::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  width: 26px;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), opacity .22s;
}
.dock-item.active::before { transform: translateX(-50%) scaleX(1); opacity: 1; }

/* 有底部页签时，给页面补出底部空间 */
body:not(.no-dock) .app,
body:not(.no-dock) #app {
  padding-bottom: calc(96px + var(--safe-bottom));
}
body:not(.no-dock) .foot { padding-bottom: 4px; }
body:not(.no-dock) .toast { bottom: calc(116px + var(--safe-bottom)); }
body:not(.no-dock) .ios-install-tip { bottom: calc(88px + var(--safe-bottom)); }
/* 底部播放栏优先：它出现时页签让路（播放栏 z-index 更高，页面留白取两者较大值） */
body.has-audio-player:not(.no-dock) .app,
body.has-audio-player:not(.no-dock) #app {
  padding-bottom: calc(196px + var(--safe-bottom));
}
body.has-audio-player .dock { border-top-color: rgba(240, 205, 124, .28); }

/* ==========================================================================
   宋式纹样的用法（点缀，不是贴满）
   --------------------------------------------------------------------------
   三处出现，都是「只在角落露一角」：
     1. 页面底：龟背纹平铺，最淡（见文件开头的 --pattern-ivory）
     2. 今日背诵条：右上角一枚云纹（深底上做浮雕，Safari 不支持 mask 时自动不出）
     3. 卡片：左上 / 右下各一枚角隅纹样，用 mask 让纹样只从角上「透」出来
   纹样全部是内联 SVG data URI，不请求图片、断网也在。
   ========================================================================== */

/* 卡片：角隅点缀。默认不显示，只在带 .card-pat 的卡片上出现 */
.card { position: relative; }
.card-pat::before,
.card-pat::after {
  content: "";
  position: absolute;
  width: 62px;
  height: 62px;
  pointer-events: none;
  background: var(--pattern-cloud);
  background-size: 62px 62px;
  background-repeat: no-repeat;
  opacity: .34;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .30) 38%, transparent 68%);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .30) 38%, transparent 68%);
}
.card-pat::before { top: 8px; left: 8px; }
.card-pat::after {
  bottom: 8px;
  right: 8px;
  transform: rotate(180deg);
}

/* 今日背诵条：深色底上放一枚云纹浮雕（右下角，被圆角裁掉一角） */
.today-bar::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: 116px;
  height: 116px;
  pointer-events: none;
  background-image: var(--pattern-cloud);
  background-size: 58px 58px;
  background-repeat: repeat;
  opacity: .28;
  filter: brightness(3) saturate(0);
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000 0%, rgba(0, 0, 0, .45) 55%, transparent 78%);
  mask-image: radial-gradient(circle at 70% 70%, #000 0%, rgba(0, 0, 0, .45) 55%, transparent 78%);
}

/* 折叠面板 / 小古文入口这类「大卡片」给一点角隅纹样 */
/* 大卡片上的纹样再淡一档：它只是「纸上的一点暗花」，不该被看见 */
.all-section.card-pat::before,
.all-section.card-pat::after,
.classic-entry.card-pat::before,
.classic-entry.card-pat::after { opacity: .26; }

/* ==========================================================================
   按钮分级（宋式：以「描金线 + 纸底」分主次，不靠大色块）
   --------------------------------------------------------------------------
   一级 .btn.primary　　 天青实底，描金细边 —— 一次只该出现一个
   二级 .btn.secondary　 宣纸底 + 天青描边 —— 常规操作
   三级 .btn.ghost-btn　 只留一条界行细线 —— 次要操作（导出 / 导入）
   危险 .btn.danger-btn　 朱砂，仅用于「清空进度」这类不可逆操作
   ========================================================================== */

/* 通用：所有按钮共用一套过渡与按下反馈，手感一致 */
.btn,
.mini-btn,
.seg-toggle,
.group-random,
.reader-nav button,
.trans-read,
.settings-input {
  transition: transform .14s, box-shadow .18s, background .18s, border-color .18s, color .18s;
}
.btn:active,
.mini-btn:active,
.seg-toggle:active,
.reader-nav button:active { transform: scale(.97); }

/* 一级按钮：实底 + 描金内边，主操作一眼可见 */
.btn.primary {
  color: #fdfaf2;
  background: linear-gradient(180deg, var(--celadon) 0%, var(--green) 55%, var(--green-dark) 100%);
  border-color: var(--green-dark);
  box-shadow: inset 0 0 0 1px rgba(240, 205, 124, .32), 0 2px 10px rgba(35, 75, 66, .22);
}
.btn.primary:active { box-shadow: inset 0 0 0 1px rgba(240, 205, 124, .32); }
/* 记住 / 忘记 / 模糊：三档评价沿用旧配色，但补上「描金内边 + 顶部高光」的质感 */
.btn.good {
  background: linear-gradient(180deg, var(--celadon) 0%, var(--green) 60%, var(--green-dark) 100%);
  border-color: var(--green-dark);
  box-shadow: inset 0 0 0 1px rgba(240, 205, 124, .3), 0 2px 10px rgba(35, 75, 66, .20);
}
.btn.fuzzy {
  background: linear-gradient(180deg, #fbeedb 0%, var(--amber-light) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn.bad {
  background: linear-gradient(180deg, #fbeae7 0%, var(--red-light) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* 二 / 三级按钮：纸底描边，按下去的反馈比主按钮轻一档 */
.ghost-btn {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--green);
  border-radius: 10px;
  font-weight: 600;
}
.ghost-btn:hover { border-color: var(--green); }
.danger-btn {
  background: linear-gradient(180deg, #fbeae7 0%, var(--red-light) 100%);
  border: 1px solid #ecd2cd;
  color: var(--red);
  border-radius: 10px;
  font-weight: 600;
}
/* 圆形图标按钮（列表里的播放键）：按下时天青实底，与播放栏同一语言 */
.item-read,
.today-read,
.toolbar .seg-toggle { will-change: transform; }
.item-read:active { box-shadow: inset 0 0 0 1px rgba(47, 96, 85, .25); }

/* 设置里的组合按钮（学段 / 学期 / 范围 / 数量）：选中态加一层描金，层次更清楚 */
.seg button.active {
  box-shadow: inset 0 0 0 1px rgba(165, 92, 25, .18), 0 1px 4px rgba(0, 0, 0, .06);
}
.chips button.active {
  box-shadow: inset 0 0 0 1px rgba(240, 205, 124, .38), 0 2px 8px rgba(35, 75, 66, .18);
}

/* 顶栏 / 底部页签在深色背景上的对比兜底（浏览器不支持 mask 时纹样不出，不影响布局） */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000))) {
  .card-pat::before,
  .card-pat::after,
  .today-bar::after { display: none; }
}