/* style.css — 复古时间轴叙事风(博物馆展板风格)
   纸本印刷感 / 低饱和复古色 / 衬线字体 / 横向时间轴导航
   语义类 API 保持不变:.btn-primary / .app-card / .nav-item / .bg-accent-* 等,
   全站仍由 settings.js applyAccent 写入的 --accent-* 变量驱动 */

/* ========== 设计令牌 ========== */
:root {
  /* 强调色(默认「墨绿」,由 settings.js applyAccent 覆盖) */
  --accent-solid: #53624a;
  --accent-solid-hover: #45523d;
  --accent-bar: #6d7c5e;
  --accent-soft-bg: #e4e6d6;
  --accent-soft-text: #45523d;
  --accent-soft-bg-dark: rgba(140,152,116,0.18);
  --accent-soft-text-dark: #b3bf98;
  --accent-tint: 109,124,94;
  --accent-bg: rgba(109,124,94,0.12);
  --accent-text: #53624a;
  --accent-text-dark: #b3bf98;

  /* 纸本与墨色 */
  --paper: #f2ebd8;                 /* 米白底 */
  --paper-card: #faf4e3;            /* 展板纸面 */
  --ink: #2e2a20;                   /* 墨色 */
  --ink-soft: rgba(46,42,32,0.62);  /* 浅墨(说明文字) */
  --ink-faint: rgba(46,42,32,0.40); /* 淡墨(编号/图注) */
  --ink-line: rgba(46,42,32,0.38);  /* 墨线(边框/时间轴) */

  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', Georgia, 'Times New Roman', 'SimSun', serif;
  --font-caps: Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif;

  --card-border: var(--ink-line);
  /* 展板:内嵌双线框 + 柔和投影 */
  --card-shadow:
    inset 0 0 0 3px var(--paper-card),
    inset 0 0 0 4px rgba(46,42,32,0.22),
    0 10px 22px -16px rgba(46,40,26,0.55);
  --card-shadow-hover:
    inset 0 0 0 3px var(--paper-card),
    inset 0 0 0 4px rgba(46,42,32,0.30),
    0 16px 30px -16px rgba(46,40,26,0.6);
}
html.dark {
  --paper: #211a11;
  --paper-card: #2b2316;
  --ink: #e6dcc3;
  --ink-soft: rgba(230,220,195,0.60);
  --ink-faint: rgba(230,220,195,0.40);
  --ink-line: rgba(230,220,195,0.30);
  --card-shadow:
    inset 0 0 0 3px var(--paper-card),
    inset 0 0 0 4px rgba(230,220,195,0.18),
    0 12px 24px -16px rgba(0,0,0,0.7);
  --card-shadow-hover:
    inset 0 0 0 3px var(--paper-card),
    inset 0 0 0 4px rgba(230,220,195,0.26),
    0 18px 32px -16px rgba(0,0,0,0.75);
}

/* ========== 全局背景:博物馆展墙照片 + 米白面纱 + 纸纹颗粒 ========== */
body {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.30 0 0 0 0 0.25 0 0 0 0 0.16 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(242,235,216,0.42), rgba(242,235,216,0.62)),
    url("../assets/bg.jpg");
  background-size: auto, cover, cover;
  background-position: center center;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-serif);
}
html.dark body {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.82 0 0 0 0 0.76 0 0 0 0 0.60 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(24,19,12,0.74), rgba(24,19,12,0.86)),
    url("../assets/bg.jpg");
  background-size: auto, cover, cover;
  background-position: center center;
  background-attachment: fixed;
  color: var(--ink);
}

::selection { background: rgba(var(--accent-tint), 0.25); }

/* ========== 顶栏:博物馆牌匾 ========== */
.app-header {
  background: rgba(242,235,216,0.70);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 3px double var(--ink-line);
}
html.dark .app-header { background: rgba(33,26,17,0.72); }

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-seal-img {
  width: 36px; height: 36px; flex: none;
  object-fit: contain;
  transform: rotate(-2deg);
  filter: drop-shadow(0 1px 2px rgba(46,40,26,0.25));
}
html.dark .brand-seal-img { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-sub {
  font-family: var(--font-caps);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
  white-space: nowrap;
}
.header-date {
  font-family: var(--font-caps);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* ========== 顶栏搜索 ========== */
.search-box { position: relative; }
.search-input {
  width: 168px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-family: var(--font-serif);
  color: var(--ink);
  background: rgba(250,244,227,0.6);
  border: 1px solid var(--ink-line);
  border-radius: 6px;
  transition: width 0.18s ease;
}
.search-input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.search-input:focus { width: 224px; }
html.dark .search-input { background: rgba(43,35,22,0.6); }
.search-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 300px; max-height: 66vh; overflow-y: auto;
  padding: 6px; z-index: 40;
}
.search-group + .search-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--card-border); }
.search-group-label {
  padding: 3px 8px 2px;
  font-family: var(--font-caps);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.search-item { display: block; width: 100%; text-align: left; padding: 5px 8px; border-radius: 6px; transition: background 0.12s ease; }
.search-item:hover { background: var(--accent-bg); }
.search-item-title { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item-snippet { display: block; font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 主页 logo:印章(透明底 PNG) */
.brand-logo {
  width: 64px; height: 64px; flex: none;
  object-fit: contain;
  transform: rotate(-2deg);
  filter: drop-shadow(0 2px 3px rgba(46,40,26,0.28));
}
html.dark .brand-logo { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.theme-toggle {
  font-family: var(--font-serif);
  font-size: 11px; line-height: 1;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  background: var(--paper-card);
  color: var(--ink);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent-solid); color: var(--accent-text); }
html.dark .theme-toggle:hover { color: var(--accent-text-dark); }
.nav-burger {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  background: var(--paper-card);
  color: var(--ink);
  font-size: 15px; line-height: 1;
}

/* ========== 导航:横向长卷时间轴(桌面)/ 纵向时间轴(移动端) ========== */
.app-nav { position: relative; }
.nav-track { position: relative; display: flex; }
@media (min-width: 768px) {
  .nav-track {
    justify-content: space-between;
    padding-top: 0; padding-bottom: 10px;
    /* 时间轴主线:双线,纵向上穿过节点圆心 */
    background-image:
      linear-gradient(var(--ink-line), var(--ink-line)),
      linear-gradient(var(--ink-line), var(--ink-line));
    background-size: 100% 1px, 100% 1px;
    background-position: 0 29px, 0 32px;
    background-repeat: no-repeat;
  }
  .nav-item {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 6px 10px 0;
  }
  .nav-idx { height: 13px; margin-bottom: 2px; }
  .nav-dot { margin: 4px 0 6px; }
}
@media (max-width: 767px) {
  .app-nav {
    position: absolute; z-index: 20; left: 0; right: 0;
    background: rgba(250,244,227,0.82);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 3px double var(--ink-line);
    box-shadow: 0 16px 30px -18px rgba(46,40,26,0.55);
  }
  html.dark .app-nav { background: rgba(43,35,22,0.82); }
  .nav-track {
    flex-direction: column;
    align-items: stretch;
    padding-top: 6px; padding-bottom: 12px;
    /* 纵向时间轴主线 */
    background-image:
      linear-gradient(var(--ink-line), var(--ink-line)),
      linear-gradient(var(--ink-line), var(--ink-line));
    background-size: 1px 100%, 1px 100%;
    background-position: 24px 0, 27px 0;
    background-repeat: no-repeat;
  }
  .nav-item { flex-direction: row; align-items: center; gap: 10px; padding: 9px 10px; }
  .nav-dot { order: 1; margin-left: 1px; }
  .nav-idx { order: 2; }
  .nav-label { order: 3; }
}

/* 导航项 = 时间轴节点 */
.nav-item {
  display: flex;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-item:hover { color: var(--ink); }
.nav-idx {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.nav-dot {
  width: 11px; height: 11px; flex: none;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-line);
  position: relative; z-index: 1;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.nav-item:hover .nav-dot { border-color: var(--ink); transform: scale(1.12); }
.nav-label {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.nav-item.active { color: var(--accent-text); }
html.dark .nav-item.active { color: var(--accent-text-dark); }
.nav-item.active .nav-label { font-weight: 700; }
.nav-item.active .nav-idx { color: var(--accent-text); }
html.dark .nav-item.active .nav-idx { color: var(--accent-text-dark); }
.nav-item.active .nav-dot {
  background: var(--accent-solid);
  border-color: var(--accent-solid-hover);
  transform: scale(1.15);
}

/* ========== 主区 ========== */
.app-main h1, .app-main h2, .app-main h3, .app-main h4 {
  font-family: var(--font-serif);
  color: var(--ink);
}

/* ========== 卡片:博物馆展板(毛玻璃纸面 + 内嵌双线框) ========== */
.app-card {
  background: rgba(250,244,227,0.55);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
html.dark .app-card { background: rgba(43,35,22,0.55); }
a.app-card, button.app-card, .app-card.clickable { cursor: pointer; }
.app-card.clickable:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
  border-color: rgba(var(--accent-tint), 0.55);
}

/* ========== 强调色语义类(消费 CSS 变量,设置里换色即时生效) ========== */
.btn-primary {
  background: var(--accent-solid);
  color: #f6efdc;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 2px;
  letter-spacing: 0.06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px -2px rgba(40,32,18,0.5);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn-primary:hover { background: var(--accent-solid-hover); }
.btn-primary:active { transform: translateY(0.5px); }
html.dark .btn-primary { color: #f3ecd8; border-color: rgba(0,0,0,0.4); }

.text-accent { color: var(--accent-solid); }
html.dark .text-accent { color: var(--accent-text-dark); }
.bg-accent { background: var(--accent-solid); color: #f6efdc; }
.bg-accent-bar { background: var(--accent-bar); }
.border-accent { border-color: var(--accent-solid) !important; }

.bg-accent-soft {
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
}
html.dark .bg-accent-soft {
  background: var(--accent-soft-bg-dark);
  color: var(--accent-soft-text-dark);
}

/* 列表选中行(笔记列表等) */
.item-active {
  background: rgba(var(--accent-tint), 0.12) !important;
  border-color: var(--accent-solid) !important;
}
html.dark .item-active { background: rgba(var(--accent-tint), 0.20) !important; }

/* 标签 chip(笔记内) */
.tag-chip {
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
  border-radius: 2px;
}
html.dark .tag-chip {
  background: var(--accent-soft-bg-dark);
  color: var(--accent-soft-text-dark);
}

/* checkbox / radio 跟随强调色 */
.checkbox-accent { accent-color: var(--accent-solid); width: 1rem; height: 1rem; }

/* 输入框聚焦 */
input:focus, textarea:focus, select:focus {
  outline: 2px solid rgba(var(--accent-tint), 0.55);
  outline-offset: -1px;
  border-color: var(--accent-solid);
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(96,84,60,0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(96,84,60,0.65); }
:root[data-widget-theme="dark"] ::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb { background: rgba(230,220,195,0.25); }

/* 隐藏滚动条工具 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ========== 过渡 ========== */
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* ========== 舒尔特方格 ========== */
.schulte-cell {
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s ease, transform 0.05s ease;
}
.schulte-cell:active { transform: scale(0.96); }

/* ========== Markdown 预览 ========== */
.markdown-preview { line-height: 1.8; }
.markdown-preview h1 { font-size: 1.5em; font-weight: 700; margin: 0.6em 0 0.4em; letter-spacing: 0.02em; }
.markdown-preview h2 { font-size: 1.3em; font-weight: 700; margin: 0.6em 0 0.4em; }
.markdown-preview h3 { font-size: 1.15em; font-weight: 700; margin: 0.5em 0 0.3em; }
.markdown-preview p { margin: 0.4em 0; }
.markdown-preview ul, .markdown-preview ol { margin: 0.4em 0; padding-left: 1.5em; }
.markdown-preview li { margin: 0.2em 0; }
.markdown-preview code {
  background: rgba(46,42,32,0.10);
  padding: 0.1em 0.3em;
  border-radius: 2px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.9em;
}
html.dark .markdown-preview code { background: rgba(230,220,195,0.14); }
.markdown-preview pre {
  background: rgba(46,42,32,0.06);
  border: 1px solid var(--ink-line);
  padding: 0.7em 0.9em;
  border-radius: 2px;
  overflow-x: auto;
  margin: 0.5em 0;
}
html.dark .markdown-preview pre { background: rgba(0,0,0,0.32); }
.markdown-preview pre code { background: transparent; padding: 0; }
.markdown-preview blockquote {
  border-left: 3px solid var(--accent-bar);
  padding-left: 0.8em;
  color: var(--ink-soft);
  margin: 0.5em 0;
}
.markdown-preview a { color: var(--accent-text); text-decoration: underline; }
html.dark .markdown-preview a { color: var(--accent-text-dark); }

/* ========== 阅读器(本地书):米白纸张 ========== */
.reader-shell {
  position: fixed; inset: 0; z-index: 60;
  background: #f6f0dd;
  color: #2e2a20;
  display: flex; flex-direction: column;
  font-family: var(--font-serif);
}
html.dark .reader-shell {
  background: #221b12;
  color: #e0d6bd;
}
.reader-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 3px double rgba(46,42,32,0.3);
  background: rgba(246,240,221,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.dark .reader-toolbar {
  border-bottom-color: rgba(230,220,195,0.25);
  background: rgba(34,27,18,0.85);
}
.reader-body {
  flex: 1; overflow-y: auto;
  padding: 28px 20px 80px;
  line-height: 1.9;
  font-size: var(--reader-font-size, 18px);
}
@media (min-width: 768px) {
  .reader-body { max-width: 720px; margin: 0 auto; width: 100%; padding: 40px 32px 100px; }
}
.reader-body.txt { white-space: pre-wrap; word-break: break-word; }
.reader-body ::selection, .reader-body::selection { background: rgba(var(--accent-tint), 0.28); }
.reader-select-pop {
  position: fixed; z-index: 61;
  padding: 4px 10px; border-radius: 2px;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.reader-select-pop button {
  background: transparent; border: 0; color: inherit;
  padding: 2px 4px; font-size: 12px; line-height: 1.4;
}
.reader-select-pop button + button { margin-left: 6px; border-left: 1px solid rgba(255,255,255,0.4); padding-left: 10px; }

/* 阅读器:听书控制条 */
.reader-tts-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(46,42,32,0.18);
  background: rgba(var(--accent-tint), 0.12);
  font-size: 13px;
}
html.dark .reader-tts-bar { border-bottom-color: rgba(230,220,195,0.15); }
.reader-tts-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgb(var(--accent-tint));
  color: #fff; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.reader-tts-rate {
  border: 1px solid rgba(46,42,32,0.3); background: transparent;
  color: inherit; border-radius: 999px; padding: 3px 12px; font-size: 12px;
}
html.dark .reader-tts-rate { border-color: rgba(230,220,195,0.35); }
.reader-tts-prog { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.reader-body .reader-tts-current {
  background: rgba(var(--accent-tint), 0.16);
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(var(--accent-tint), 0.16);
  transition: background 0.25s ease;
}

/* 书摘集 */
.reader-excerpt-quote {
  border-left: 3px solid rgb(var(--accent-tint));
  padding-left: 10px;
  white-space: pre-wrap; word-break: break-word;
}

/* 阅读器:目录/书签侧边面板 */
.reader-panel {
  position: fixed; top: 52px; right: 0; bottom: 0; z-index: 61;
  width: min(320px, 86vw);
  background: #fbf7ea;
  border-left: 1px solid rgba(46,42,32,0.25);
  box-shadow: -6px 0 18px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  font-family: var(--font-serif);
}
html.dark .reader-panel {
  background: #2a2317;
  border-left-color: rgba(230,220,195,0.2);
}
.reader-panel-head {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(46,42,32,0.18);
}
html.dark .reader-panel-head { border-bottom-color: rgba(230,220,195,0.15); }
.reader-panel-head button {
  padding: 4px 12px; border-radius: 8px; font-size: 13px;
  color: inherit; background: transparent; border: 0;
}
.reader-panel-head button.on {
  background: rgba(var(--accent-tint), 0.25);
  font-weight: 600;
}
.reader-panel-close {
  margin-left: auto; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px 8px;
  opacity: 0.6;
}
.reader-panel-close:hover { opacity: 1; }
.reader-panel-list { flex: 1; overflow-y: auto; padding: 6px 0 20px; }
.reader-panel-empty {
  padding: 28px 16px; text-align: center;
  font-size: 12px; opacity: 0.55; line-height: 1.8;
}
.reader-panel-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  padding: 8px 14px; font-size: 13px; line-height: 1.5;
  background: transparent; border: 0; color: inherit;
  border-bottom: 1px dashed rgba(46,42,32,0.12);
}
html.dark .reader-panel-item { border-bottom-color: rgba(230,220,195,0.1); }
.reader-panel-item:hover { background: rgba(var(--accent-tint), 0.14); }
.reader-panel-item-sub { font-size: 11px; opacity: 0.5; margin-left: 6px; }
.reader-panel-del {
  flex-shrink: 0; cursor: pointer; font-size: 11px;
  color: #b0483e; padding: 2px 4px;
}
.reader-panel-add {
  display: block; width: calc(100% - 20px); margin: 8px 10px;
  padding: 8px 0; border-radius: 8px; font-size: 13px;
  border: 1px dashed rgba(46,42,32,0.4); background: transparent; color: inherit;
}
html.dark .reader-panel-add { border-color: rgba(230,220,195,0.35); }
.reader-panel-add:hover { background: rgba(var(--accent-tint), 0.14); }

/* ========== 移动端底部标签栏(≤767px 显示,桌面端由顶部导航承担) ==========
   共 8 个标签,常态显示 4 个(每项屏宽 1/4),整条可左右滑动,切换页面自动跟随 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;       /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;    /* 旧 Edge 隐藏滚动条 */
  background: var(--paper-card);
  border-top: 1px solid var(--ink-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar::-webkit-scrollbar { display: none; }  /* Chrome/Safari 隐藏滚动条 */
.tabbar-item {
  flex: 0 0 25%;              /* 常态恰好 4 项占满屏宽 */
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 6px;
  background: transparent; border: 0; color: inherit;
  font-size: 10px; line-height: 1.2; opacity: 0.62;
  cursor: pointer;
  scroll-snap-align: center;
}
.tabbar { scroll-snap-type: x proximity; }
.tabbar-item .tab-ico {
  width: 22px; height: 22px; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.tabbar-item .tab-ico svg { width: 100%; height: 100%; display: block; }
.tabbar-item.active { opacity: 1; color: var(--accent-text); font-weight: 600; }
html.dark .tabbar-item.active { color: var(--accent-text-dark); }
@media (max-width: 767px) {
  /* 给底部标签栏让位,避免正文最后内容被遮挡 */
  .app-main { padding-bottom: 88px; }
}

/* ========== 个人中心:左侧竖向功能栏(上下滑动) + 右侧内容 ========== */
.profile-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.profile-side {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 72vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 84px;
  padding: 8px;
  border-radius: 12px;
  background: var(--paper-card);
  border: 1px solid var(--ink-line);
}
.profile-side-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px;
  border-radius: 10px;
  background: transparent; border: 0;
  font-size: 12px; line-height: 1.3; color: inherit; opacity: 0.68;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.profile-side-item:hover { opacity: 1; }
.profile-side-item.active {
  opacity: 1; font-weight: 600; color: var(--accent-text);
  background: rgba(var(--accent-tint), 0.16);
}
html.dark .profile-side-item.active { color: var(--accent-text-dark); }
.profile-side-ico { font-size: 18px; line-height: 1; }
.profile-side-badge {
  position: absolute; top: 4px; right: 8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #f43f5e; color: #fff;
  font-size: 10px; line-height: 16px; text-align: center;
}
.profile-content { flex: 1; min-width: 0; }
.tabbar-item .tab-badge {
  position: absolute; top: 3px; right: calc(50% - 22px);
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: #f43f5e; color: #fff;
  font-size: 9px; line-height: 15px; text-align: center;
}
.tabbar-item { position: relative; }
@media (max-width: 767px) {
  .profile-side { flex-basis: 78px; max-height: 60vh; }
}

/* ========== 游戏卡片首页(图标位待用户供图,暂用文字卡片) ========== */
.game-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  transition: transform .15s ease;
}
.game-card:hover { transform: translateY(-2px); }
.game-card-face {
  display: flex; align-items: center; justify-content: center;
  min-height: 84px; padding: 8px;
  border: 1px dashed rgba(46,42,32,0.35);
  border-radius: 10px;
  font-size: 20px; font-weight: 700; letter-spacing: 2px;
  color: var(--accent-text);
  background: rgba(var(--accent-tint), 0.08);
  text-align: center;
}
html.dark .game-card-face { border-color: rgba(230,220,195,0.3); color: var(--accent-text-dark); }
.game-card-desc { font-size: 12px; line-height: 1.5; opacity: 0.72; }
.game-card-best { font-size: 11px; opacity: 0.55; }

/* ========== 卷首画:线稿版画插画带(贯穿主视觉的历史插画底图) ========== */
.scroll-frieze {
  height: 58px;
  border-top: 1px solid var(--ink-line);
  border-bottom: 3px double var(--ink-line);
  background-color: rgba(250,244,227,0.55);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64'%3E%3Cg fill='none' stroke='%232e2a20' stroke-width='1' opacity='0.45'%3E%3Cpath d='M0 54H1200'/%3E%3Cpath d='M0 57.5H1200' opacity='0.6'/%3E%3Cpath d='M0 54C120 38 240 46 360 42S620 24 760 40S1060 30 1200 44'/%3E%3Cpath d='M0 54C180 46 300 50 460 48S700 36 880 46S1120 40 1200 48' opacity='0.5'/%3E%3Ccircle cx='985' cy='18' r='8'/%3E%3Cpath d='M985 4v5M985 27v5M971 18h5M994 18h5M975 8l3.5 3.5M995 8l-3.5 3.5M975 28l3.5-3.5M995 28l-3.5-3.5'/%3E%3Cpath d='M120 20a7 7 0 0 1 14 0a6 6 0 0 1 12 0a7 7 0 0 1 14 0'/%3E%3Cpath d='M560 14a6 6 0 0 1 12 0a5 5 0 0 1 10 0a6 6 0 0 1 12 0'/%3E%3Cpath d='M474 54v-9M518 54v-9M474 45h-8M522 45h8M470 45l10-7h32l10 7M480 38v-6M512 38v-6M480 32h32M482 32l8-6h12l8 6M490 26v-5M502 26v-5M490 21h12M496 21v-5'/%3E%3Cpath d='M300 26q4-4 8 0q4-4 8 0M340 17q3-3 6 0q3-3 6 0M212 32q3-3 6 0q3-3 6 0'/%3E%3Cpath d='M140 52l10-6M165 53l10-6M640 48l10-6M668 50l10-6M1080 48l10-6M1105 50l10-6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
}
html.dark .scroll-frieze {
  background-color: rgba(43,35,22,0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64'%3E%3Cg fill='none' stroke='%23e6dcc3' stroke-width='1' opacity='0.35'%3E%3Cpath d='M0 54H1200'/%3E%3Cpath d='M0 57.5H1200' opacity='0.6'/%3E%3Cpath d='M0 54C120 38 240 46 360 42S620 24 760 40S1060 30 1200 44'/%3E%3Cpath d='M0 54C180 46 300 50 460 48S700 36 880 46S1120 40 1200 48' opacity='0.5'/%3E%3Ccircle cx='985' cy='18' r='8'/%3E%3Cpath d='M985 4v5M985 27v5M971 18h5M994 18h5M975 8l3.5 3.5M995 8l-3.5 3.5M975 28l3.5-3.5M995 28l-3.5-3.5'/%3E%3Cpath d='M120 20a7 7 0 0 1 14 0a6 6 0 0 1 12 0a7 7 0 0 1 14 0'/%3E%3Cpath d='M560 14a6 6 0 0 1 12 0a5 5 0 0 1 10 0a6 6 0 0 1 12 0'/%3E%3Cpath d='M474 54v-9M518 54v-9M474 45h-8M522 45h8M470 45l10-7h32l10 7M480 38v-6M512 38v-6M480 32h32M482 32l8-6h12l8 6M490 26v-5M502 26v-5M490 21h12M496 21v-5'/%3E%3Cpath d='M300 26q4-4 8 0q4-4 8 0M340 17q3-3 6 0q3-3 6 0M212 32q3-3 6 0q3-3 6 0'/%3E%3Cpath d='M140 52l10-6M165 53l10-6M640 48l10-6M668 50l10-6M1080 48l10-6M1105 50l10-6'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  .scroll-frieze { height: 40px; }
}

/* ========== 展板装裱角线 ========== */
.app-card { position: relative; }
.app-card::before, .app-card::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  pointer-events: none;
}
.app-card::before {
  top: 6px; left: 6px;
  border-top: 1.5px solid var(--ink-faint);
  border-left: 1.5px solid var(--ink-faint);
}
.app-card::after {
  bottom: 6px; right: 6px;
  border-bottom: 1.5px solid var(--ink-faint);
  border-right: 1.5px solid var(--ink-faint);
}

/* ========== 展题下划线(信息层级:标题醒目) ========== */
.app-main h2 { position: relative; padding-bottom: 5px; }
.app-main h2::after {
  content: ''; position: absolute; left: 1px; bottom: 0;
  width: 1.8em; border-bottom: 2px solid var(--accent-bar); opacity: 0.85;
}

/* ========== 通用 ========== */
input, textarea, select { font-family: inherit; }
button { cursor: pointer; font-family: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

/* 文件选择 input:透明覆盖在按钮上,用户手指直接点中真实控件
   (display:none + JS .click() 在 Android WebView 中会被拦截) */
.file-input-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  font-size: 0; line-height: 0;
  z-index: 2;
}

/* ========== 新媒体:B 站风视频卡片 ========== */
.media-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}
.media-cover { border-radius: inherit; }
.media-cover-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.38);
  color: #fff; font-size: 14px; text-indent: 2px;
  opacity: 0.82;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.media-card:hover .media-cover-play { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
.media-title:hover { color: var(--accent); }
.media-badge-active { background: rgba(251,114,153,0.92); }
.media-badge-done { background: rgba(22,163,74,0.92); }
.media-advance { white-space: nowrap; }

/* ========== 移动端适配(≤767px) ========== */
@media (max-width: 767px) {
  /* 顶栏更紧凑,品牌不挤压 */
  .app-header .brand-title { font-size: 15px; }
  .app-header .brand-sub { font-size: 8.5px; }
  .brand-seal-img { width: 30px; height: 30px; }

  /* 主区内边距收紧 */
  .app-main { padding: 14px 12px 28px !important; }

  /* 卷首画带降低 */
  .scroll-frieze { height: 42px; background-size: auto 42px; }

  /* 触控目标:导航与主要按钮 ≥40px 高 */
  .nav-item { min-height: 40px; }
  .nav-burger { min-width: 40px; min-height: 40px; }
  .theme-toggle { min-height: 40px; }

  /* iOS/安卓 WebView 输入框 <16px 会触发自动缩放,统一放大 */
  input, textarea, select { font-size: 16px !important; }

  /* 移动导航面板内的搜索占满宽度 */
  .app-nav .search-input { width: 100%; }
  .app-nav .search-input:focus { width: 100%; }
  .search-panel {
    position: fixed; left: 12px; right: 12px; top: auto;
    width: auto; max-height: 56vh; z-index: 60;
  }

  /* 弹层与确认框边距收紧 */
  .app-card.p-5 { padding: 16px; }

  /* 阅读器工具栏允许换行不溢出 */
  .reader-toolbar { flex-wrap: wrap; gap: 8px; row-gap: 6px; }

  /* 卡片 hover 位移在触屏无意义,关闭避免抖动 */
  .app-card.clickable:hover { transform: none; }
}

/* 触屏设备通用:隐藏 hover 态位移 */
@media (hover: none) {
  .app-card.clickable:hover { transform: none; }
  .game-card:hover { transform: none; }
  .media-card:hover { transform: none; box-shadow: none; }
  .nav-item:hover .nav-dot { transform: none; }
}