/* 标题字体：马善政毛笔楷书（SIL OFL 1.1，见 css/fonts/OFL-MaShanZheng.txt）。
   只含标题与朝代名用到的字，其余字符回退到宋体 */
@font-face {
  font-family: 'Ma Shan Zheng Title';
  src: url(fonts/ma-shan-zheng-title.woff2) format('woff2');
  font-display: swap;
}

:root {
  --paper: #f3ecdf;
  --texture-ink: #6b4a2b;      /* 背景纹理的颜色（以很低的不透明度显示） */
  --paper-2: #ebe2d1;
  --card: #fffcf6;
  --ink: #2a2521;
  --ink-2: #4a423b;
  --muted: #7a6e62;
  --line: #d9ccb5;
  --red: #a8322a;
  --red-dark: #86241e;
  --red-fill: #a8322a;       /* 红色按钮等填充色（上面是白字） */
  --gold: #b08d57;
  --shadow: 0 6px 18px rgba(60, 40, 20, .14), 0 1px 3px rgba(60, 40, 20, .12);
  --shadow-lg: 0 24px 60px rgba(40, 25, 10, .28);
  --glow-1: rgba(255, 255, 255, .55);          /* 背景的柔光 */
  --glow-2: rgba(176, 141, 87, .12);
  --bar-bg: rgba(255, 252, 246, .6);           /* 顶栏、底栏 */
  --float-bg: rgba(255, 252, 246, .92);        /* 悬浮的圆形按钮 */
  --field-bg: #fff;                            /* 输入框、下拉列表 */
  --hover-tint: rgba(0, 0, 0, .06);
  --scrim: rgba(30, 20, 10, .3);
  --backdrop: rgba(30, 20, 10, .5);
  --tick-mark: rgba(42, 37, 33, .5);           /* 进度条上表示事件的竖条 */
  --mm-view-fill: rgba(255, 255, 255, .18);
  --mm-view-ring: rgba(255, 255, 255, .7);
  --debug-stripe-a: #f7ecc9;
  --debug-stripe-b: #f2e4b8;
  --era-text-mix: #000;                        /* 顶栏时期名：时期色加深以保证可读 */
  --toast-bg: #2a2521;
  --toast-ink: #fff;
  --axis: #4a423b;                             /* 时间轴线（时期色带以外的部分） */
  --ok-fill: #2f7d4f;                          /* “已保存”按钮底色（上面是白字） */
  --tour-dim: rgba(20, 12, 6, .55);            /* 首次访问分步指引：聚光灯以外的遮罩 */
  --type-lighten: 0%;                          /* 类型标签：类型色与白色混合的比例（深色模式下调亮以保证对比度） */
  color-scheme: light;
  --radius: 10px;
  --bottombar-h: 54px;      /* 底栏高度；添加按钮悬浮在底栏上方 */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* 深色模式：由 <html data-theme="dark"> 开启（默认跟随系统设置，可用右上角按钮切换） */
:root[data-theme="dark"] {
  --paper: #1b1815;
  --texture-ink: #e9d9bd;
  --paper-2: #26221e;
  --card: #2a2622;
  --ink: #ece4d6;
  --ink-2: #d2c7b6;
  --muted: #a0937f;
  --line: #463e35;
  --red: #ea7b6f;
  --red-dark: #9f3a31;
  --red-fill: #a93d34;
  --gold: #c9a46a;
  --shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --glow-1: rgba(255, 236, 200, .035);
  --glow-2: rgba(176, 141, 87, .08);
  --bar-bg: rgba(30, 26, 23, .82);
  --float-bg: rgba(46, 41, 36, .94);
  --field-bg: #1f1c19;
  --hover-tint: rgba(255, 255, 255, .08);
  --scrim: rgba(0, 0, 0, .5);
  --backdrop: rgba(0, 0, 0, .62);
  --tick-mark: rgba(236, 228, 214, .5);
  --mm-view-fill: rgba(255, 255, 255, .06);
  --mm-view-ring: rgba(0, 0, 0, .55);
  --debug-stripe-a: #3a3222;
  --debug-stripe-b: #332c1e;
  --era-text-mix: #fff;
  --toast-bg: #ece4d6;
  --tour-dim: rgba(0, 0, 0, .62);
  --toast-ink: #1b1815;
  --axis: #6f655a;
  --ok-fill: #2d7449;
  --type-lighten: 45%;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overscroll-behavior-y: none; }   /* 关闭浏览器自带的下拉刷新，由脚本实现（见 .ptr） */
body {
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 20% 10%, var(--glow-1), transparent 60%),
    radial-gradient(ellipse at 80% 90%, var(--glow-2), transparent 60%);
  color: var(--ink);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
/* 编辑功能与调试信息只在调试模式（body.debug-mode）下显示 */
body:not(.debug-mode) .debug-only { display: none !important; }
/* “调试模式”开关只在本地启动时显示（js/env.js） */
body:not(.debug-available) .debug-switch { display: none !important; }
/* 反馈入口只在配置了反馈服务（js/config.js）时显示 */
body:not(.feedback-on) .feedback-only { display: none !important; }

/* ---------- 顶栏 ---------- */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 6px 240px 6px 20px;   /* 右侧留给五个圆形按钮（36px，间距 8px）；调试模式另有两个 */
  /* 下沿色条随当前时期变色（--era-color 由脚本设置） */
  border-bottom: 3px solid var(--era-color, var(--line));
  background: var(--bar-bg);
  backdrop-filter: blur(6px);
  z-index: 5;
  transition: border-color .4s ease;
}
body.bars-hidden .topbar, body.bars-hidden .bottombar, body.bars-hidden .debug-bar { display: none; }
body.debug-mode .topbar { padding-right: 328px; }   /* 调试模式多 GitHub、清除缓存两个按钮 */

/* 调试模式：顶栏下方的网站更新时间 */
.debug-bar {
  flex: none;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-2);
  background: repeating-linear-gradient(135deg, var(--debug-stripe-a) 0 10px, var(--debug-stripe-b) 10px 20px);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 4;
}
.debug-bar time { font-variant-numeric: tabular-nums; font-weight: 600; }
.debug-commit { margin-left: .8em; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* 下拉刷新提示：平时藏在屏幕顶端以上，下拉时随手指移下来 */
.ptr {
  position: fixed;
  top: 0; left: 50%;
  z-index: 90;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--float-bg);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  font-size: 13px;
  transform: translate(-50%, -60px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.ptr.pulling { transition: none; }
.ptr-icon { transition: transform .15s; }
.ptr.ready { color: var(--red); }
.ptr.ready .ptr-icon { transform: rotate(180deg); }
.ptr.refreshing .ptr-icon { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* 清除缓存：进行中图标旋转 */
.clear-cache.busy svg { animation: btn-spin .8s linear infinite; }
/* 右上角的圆形按钮（从左到右）：GitHub 仓库、清除缓存（这两个仅调试模式）、自动播放（含二倍速）、背景音乐、深色模式、分享、显示 / 隐藏工具栏 */
.corner-btns {
  position: fixed;
  top: 8px;                 /* 在 52px 高的顶栏中垂直居中 */
  right: 14px;
  z-index: 25;
  display: flex;
  gap: 8px;
}
.corner-btn {
  flex: none;
  width: 36px; height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--float-bg);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  transition: color .15s, transform .25s;
}
.corner-btn:hover { color: var(--red); }
.corner-btn svg { display: block; }
body.bars-hidden .theme-toggle, body.bars-hidden .about-btn, body.bars-hidden .github-link, body.bars-hidden .clear-cache { display: none; }      /* 隐藏工具栏时不显示深色模式、关于按钮，播放、音乐、分享、恢复按钮保留 */
/* “更多”菜单只在手机上使用（见自适应部分）：手机上深色模式、分享、关于收进菜单 */
.more-wrap { position: relative; display: none; }
.more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 180px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  animation: pop .15s ease;
}
.more-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
}
.more-menu button + button { border-top: 1px solid var(--line); border-radius: 0; }
.more-menu button:hover, .more-menu button:focus-visible { background: var(--hover-tint); }
.more-menu svg { flex: none; color: var(--ink-2); }
.more-menu .icon-sun, [data-theme="dark"] .more-menu .icon-moon { display: none; }
[data-theme="dark"] .more-menu .icon-sun { display: block; }
/* 播放按钮：图标表示点击后的动作。暂停时 ▶；一倍速播放时 ⏩（切换二倍速）；二倍速时 ⏸，角上显示“2×” */
.play-toggle { position: relative; }
.play-toggle .icon-pause, .play-toggle .icon-fast, .play-toggle[aria-pressed="true"] .icon-play { display: none; }
.play-toggle[aria-pressed="true"][data-speed="1"] .icon-fast { display: block; }
.play-toggle[aria-pressed="true"][data-speed="2"] .icon-pause { display: block; }
.play-toggle[aria-pressed="true"][data-speed="2"]::after {
  content: "2×";
  position: absolute;
  right: -5px;
  bottom: -4px;
  padding: 0 3px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font: 700 9px/13px var(--font-sans);
  letter-spacing: -.02em;
  pointer-events: none;
}
.play-toggle[aria-pressed="true"] { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, var(--line)); }
.music-toggle .icon-muted, .music-toggle[aria-pressed="false"] .icon-sound { display: none; }
.music-toggle[aria-pressed="false"] .icon-muted { display: block; }
.music-toggle[aria-pressed="false"] { color: var(--muted); }
/* 音乐被浏览器拦截、等待第一次操作时：按钮先轻轻闪动三次提示可以点击开始，之后保持静止的红色细环，不一直闪 */
.music-toggle.waiting {
  border-color: color-mix(in srgb, var(--red) 50%, var(--line));
  animation: music-wait 1.6s ease-in-out 3;
}
@keyframes music-wait { 50% { color: var(--red); box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent); } }
.bars-toggle .icon-collapse, body.bars-hidden .bars-toggle .icon-expand { display: none; }
body.bars-hidden .bars-toggle .icon-collapse { display: block; }
.theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.brand {
  margin: 0;
  min-width: 0;
  font-family: 'Ma Shan Zheng Title', var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 标题整体是一个链接：点击回到时间轴开头。外观与普通标题完全相同（不显示按钮样式、悬浮不变色），
   只在用键盘聚焦时显示轮廓 */
.brand-home {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.brand-home:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* 当前时期：跟在标题后，用该时期的颜色（略加深以保证可读性） */
.brand-era {
  font-size: .72em;           /* 比标题小一号，按标题字号等比缩放 */
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--era-color, var(--red)) 82%, var(--era-text-mix));
  transition: color .4s ease;
}
/* 时期名右侧的 ▾：只显示图标（不是按钮外观），颜色跟随当前时期；点击区域比图标大一些 */
.era-menu-btn {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-left: 2px;
  padding: 0;
  vertical-align: middle;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--era-color, var(--red)) 82%, var(--era-text-mix));
  cursor: pointer;
  transition: color .4s ease, transform .15s;
}
.era-menu-btn:hover { color: var(--red); }
.era-menu-btn[aria-expanded="true"] { color: var(--red); transform: rotate(180deg); }
.era-menu-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.era-menu-btn svg { display: block; }
.brand-era:not(:empty)::before {
  content: "·";
  margin: 0 .3em;
  color: var(--line);
}

/* ---------- 舞台 / 时间轴 ---------- */
.stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: default;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.stage.dragging { cursor: default; }
/* 背景纹理：纹理图片只用作遮罩（形状），颜色来自 --texture-ink，因此深浅两种配色都适用；
   图片、平铺大小和不透明度由数据集的 texture 字段设置（js/app.js 中的 setupTexture） */
.bg-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--texture-ink);
  opacity: var(--texture-opacity, .06);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.bg-texture[hidden] { display: none; }
/* 时期色背景：颜色由脚本按时期生成，上下边缘渐淡 */
.era-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35), #000 38%, #000 62%, rgba(0, 0, 0, .35));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35), #000 38%, #000 62%, rgba(0, 0, 0, .35));
}
.track {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  will-change: transform;
}
.axis {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: var(--axis);
  border-radius: 2px;
  opacity: .5;              /* 主轴线半透明，不抢时期色带和事件的视线 */
}
.eras { position: absolute; left: 0; top: 50%; height: 0; }
.era {
  position: absolute;
  top: -5px;
  height: 10px;
  border-radius: 5px;
  opacity: .9;
}
/* 第一个时期之前的引导段：颜色从透明渐变为第一个时期的颜色，形状由细渐粗，
   右端与第一个时期的色带（左端为直角）无缝衔接 */
.era-leadin {
  position: absolute;
  left: 0;
  top: -5px;
  height: 10px;
  opacity: .9;
  pointer-events: none;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--lead-color) 0%, transparent) 0%,
    color-mix(in srgb, var(--lead-color) 18%, transparent) 35%,
    color-mix(in srgb, var(--lead-color) 55%, transparent) 70%,
    var(--lead-color) 100%);
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
}
.era-leadin + .era { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.era-label {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
  opacity: .85;
}
/* 全屏模式（隐藏工具栏）：每个时期开始处的左上角显示时期名，并有一条时期色竖线从顶部一直渐隐到轴线，标出时期的起点。
   名字压在卡片上层（不响应鼠标）；竖线在卡片下层，不横穿卡片 */
.era-names, .era-lines { display: none; position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; }
.era-names { z-index: 4; }
body.bars-hidden .era-names, body.bars-hidden .era-lines { display: block; }
.era-start-line {
  position: absolute;
  top: 0;
  width: 2px;
  height: 50%;
  background: linear-gradient(to bottom, var(--era-color), transparent);
  opacity: .55;
}
.era-start-name {
  position: absolute;
  top: 0;
  padding: 4px 0 0 9px;
  font-family: 'Ma Shan Zheng Title', var(--font-serif);
  font-size: 29px;
  line-height: 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--era-color) 82%, var(--era-text-mix));
  opacity: .55;
}
@media (max-width: 640px) {
  .era-start-name { font-size: 22px; padding: 3px 0 0 7px; }
}
.era { transition: transform .15s, box-shadow .15s; }
.era.hot { transform: scaleY(1.7); box-shadow: 0 0 0 2px color-mix(in srgb, var(--card) 85%, transparent); opacity: 1; }
/* 色带纵向放大时，下方的时期名随父元素被纵向拉伸；横向同步放大同样倍数，文字等比放大、不变形 */
.era-label { transition: transform .15s; }
.era.hot .era-label { transform: translateX(-50%) scaleX(1.7); }
/* 时间轴感应区：悬浮或点击显示所处时期 */
.axis-hit {
  position: absolute;
  left: 0;
  top: 50%;
  height: 30px;
  margin-top: -15px;
  cursor: help;
  z-index: 1;
}
.era-tip {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  z-index: 8;
  pointer-events: none;
}
.era-tip-line {
  position: absolute;
  left: -1px;
  top: -22px;
  width: 2px;
  height: 44px;
  background: var(--ink);
  border-radius: 1px;
}
/* 圆点以竖线中点（即轴线中心）为圆心 */
.era-tip-line::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink);
}
.era-tip-box {
  position: absolute;
  top: 28px;
  width: max-content;
  max-width: 260px;
  padding: 9px 13px 10px;
  background: rgba(42, 37, 33, .95);
  color: #fff;
  border-left: 5px solid var(--red);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  line-height: 1.5;
}
.era-tip-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.era-tip-name { font-family: var(--font-serif); font-size: 18px; font-weight: 700; }
.era-tip-range { color: rgba(255,255,255,.7); font-size: 12px; }
.era-tip-desc { margin-top: 2px; color: rgba(255,255,255,.9); }
.era-tip-year { margin-top: 4px; color: #ffcfb8; font-weight: 600; }
.ticks { position: absolute; left: 0; top: 50%; height: 0; }
.tick {
  position: absolute;
  top: -14px;
  width: 1px;
  height: 8px;
  background: var(--muted);
}
.tick-today { background: var(--red-fill); height: 10px; top: -16px; }
.tick-today span { color: var(--red); font-weight: 600; }
.tick span {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- 事件卡片 ---------- */
.events { position: absolute; left: 0; top: 0; height: 100%; }
/* 时期更迭事件：轴线上的菱形标记（填充新时期的颜色） */
.dot.dot-transition {
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--to-color, var(--red));
  border: 2.5px solid var(--card);
  box-shadow: 0 0 0 1.5px var(--red);
}
.links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.links polyline {
  fill: none;
  /* 事件所属朝代 / 时期的颜色；深色模式下调亮（与类型标签相同的 --type-lighten），保证在深色背景上可见 */
  stroke: color-mix(in srgb, var(--link-color, var(--red)), #fff var(--type-lighten));
  stroke-opacity: .7;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke .2s, stroke-width .2s;
}
.links polyline.hot { stroke-opacity: 1; stroke-width: 2.4; }
.dot {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--red);
  z-index: 2;
  pointer-events: none;
  transition: transform .2s;
}
.dot.hot { transform: scale(1.35); }
.dot.dot-transition.hot { transform: rotate(45deg) scale(1.35); }
.card {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); z-index: 3; outline: none; }
.card.down:hover, .card.down:focus-visible { transform: translateY(3px); }
.card.flash { animation: flash 1.6s ease; }
@keyframes flash {
  0%, 100% { box-shadow: var(--shadow); }
  30% { box-shadow: 0 0 0 4px var(--red), var(--shadow-lg); }
}
.card-media {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  overflow: hidden;
}
.card-img {
  display: block;
  flex: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;          /* 代表图完整显示，不裁剪 */
  background: var(--paper-2);
  pointer-events: none;
}
.img-placeholder {
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 40px;
  color: color-mix(in srgb, var(--red) 75%, transparent);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--gold) 10%, transparent) 0 8px, transparent 8px 16px),
    var(--paper-2);
}
.card-body { flex: none; min-width: 0; padding: 8px 11px 10px; }
.card-date { font-size: 11px; color: var(--red); font-weight: 600; letter-spacing: .03em; }
.card-title {
  margin: 2px 0 4px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.card-short { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-2); }

/* 上图下文 */
.k-stack { flex-direction: column; }
/* 左图右文 / 右图左文 */
.k-left, .k-right { flex-direction: row; }
.k-right { flex-direction: row-reverse; }
.k-left .card-body, .k-right .card-body {
  width: 150px;
  align-self: center;
}
.k-right .card-body { border-left: 3px solid var(--gold); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
/* 重大事件 */
.card.major { border-color: rgba(168,50,42,.5); }
.major .card-title { font-size: 18px; }
.major .card-short { font-size: 13px; }
.tier-2 .card-title { font-size: 16px; }
.k-stack.major .card-body { border-top: 3px solid var(--red); }
.k-left.major .card-body { border-left: 3px solid var(--red); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;          /* 圆形按钮，箭头为 SVG，保证在圆心 */
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--float-bg);
  color: var(--ink-2);
  z-index: 6;
  box-shadow: var(--shadow);
  transition: color .15s, background .15s, box-shadow .15s, opacity .2s, visibility .2s;
}
.nav-arrow svg { display: block; }
.nav-arrow:hover { color: var(--red); background: var(--card); box-shadow: var(--shadow), 0 0 0 3px rgba(168, 50, 42, .12); }
.nav-arrow:active { transform: translateY(-50%) scale(.94); }
.nav-arrow.left { left: 10px; }
/* 已到最左 / 最右：隐藏对应的按钮（淡出，不能点击） */
.nav-arrow.at-end { opacity: 0; visibility: hidden; pointer-events: none; }
.nav-arrow.right { right: 10px; }

/* ---------- 底栏 ---------- */
.bottombar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--bottombar-h);
  padding: 16px 20px 4px;     /* 上方留出进度条标签（▼ 唐）的位置 */
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent);   /* 分隔线调淡，底板保留 */
  background: var(--bar-bg);
  z-index: 5;
}
.minimap:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.minimap {
  flex: 1;
  position: relative;
  height: 22px;
  cursor: pointer;
}
/* 时期分段：其余时期淡化，当前时期满色 */
.mm-eras {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-2);
}
.mm-era {
  position: absolute;
  top: 0; bottom: 0;
  opacity: .22;
  border-right: 1px solid color-mix(in srgb, var(--card) 60%, transparent);
  transition: opacity .25s;
}
.mm-era.on { opacity: 1; }
.minimap i {
  position: absolute;
  top: 4px; bottom: 4px;    /* 上下留白相同，竖条在进度条中垂直居中（与进度条高度无关） */
  width: 2px;
  background: var(--tick-mark);
  pointer-events: none;
}
.minimap-view {
  position: absolute;
  top: -2px; bottom: -2px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--mm-view-fill);
  box-shadow: 0 0 0 2px var(--mm-view-ring);
  pointer-events: none;
}
.mm-current {
  position: absolute;
  top: -20px;
  left: 0;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  transition: left .2s ease;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--red-fill); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.btn-danger { background: var(--field-bg); color: var(--red); border-color: rgba(168,50,42,.5); }
.btn-danger:hover { background: var(--red-fill); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-2); }
.btn-small { padding: 5px 10px; font-size: 12px; }
.browse-btn { flex: none; padding: 6px 14px; font-size: 13px; box-shadow: var(--shadow); }

.fab {
  position: fixed;
  right: 22px;
  bottom: calc(var(--bottombar-h) + 16px);   /* 悬浮在底栏上方，不占用底栏 */
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--red-fill);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(168, 50, 42, .45);
  z-index: 20;
  transition: transform .2s, background .2s;
}
.fab:hover { transform: rotate(90deg) scale(1.05); background: var(--red-dark); }
body.bars-hidden .fab { bottom: 18px; }

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.icon-btn:hover { background: var(--hover-tint); }

/* ---------- 侧栏 ---------- */
.scrim {
  position: fixed; inset: 0;
  background: var(--scrim);
  z-index: 30;
}
.sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  z-index: 31;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform .28s ease;
}
.sidebar.open { transform: none; }
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px 20px;
}
.sidebar-head h2 { margin: 0; font-family: var(--font-serif); font-size: 19px; }
.count { font-size: 13px; color: var(--muted); font-family: var(--font-sans); font-weight: normal; }
.sidebar-search { display: flex; gap: 8px; align-items: center; padding: 4px 16px 10px 20px; }
.filter-toggle { flex: none; gap: 4px; }
.filter-toggle.on { border-color: var(--red); color: var(--red); }
.filter-badge {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red-fill);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
/* 筛选面板 */
.filter-panel {
  margin: 0 16px 10px 20px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  max-height: 46vh;
  overflow-y: auto;
}
.filter-section + .filter-section { margin-top: 12px; }
.filter-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.filter-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.filter-check input { width: 16px; height: 16px; accent-color: var(--red); }
.ms { position: relative; }
.ms-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--ink-2);
  text-align: left;
}
.ms.open .ms-trigger, .ms-trigger:focus-visible { border-color: var(--red); outline: 2px solid rgba(168,50,42,.2); }
.ms-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ms-placeholder { color: var(--muted); font-size: 13px; }
.ms-tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--chip-color);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 12px;
}
.ms-caret { flex: none; color: var(--muted); font-size: 12px; transition: transform .15s; }
.ms.open .ms-caret { transform: rotate(180deg); }
.ms-menu {
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  box-shadow: var(--shadow);
}
.ms-option {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: 13px;
  text-align: left;
}
.ms-option:hover, .ms-option:focus-visible { background: var(--paper); outline: none; }
.ms-check {
  flex: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  display: grid; place-items: center;
  font-size: 10px; line-height: 1;
}
.ms-option.on .ms-check { background: var(--chip-color); border-color: var(--chip-color); color: #fff; }
.ms-option.on .ms-check::after { content: "✓"; }
.ms-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--chip-color); }
.ms-label { flex: 1; }
.ms-count { font-family: var(--font-sans); font-size: 11px; color: var(--muted); }
.filter-year { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.filter-year select, .filter-year input {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field-bg);
  font: inherit;
}
.filter-year input { width: 110px; }
.filter-hint { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.filter-warn { margin: 4px 0 0; font-size: 12px; color: var(--red); }
.filter-clear { margin-top: 12px; }
.sidebar-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  font-size: 14px;
}
.event-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0 8px 12px 12px;
}
.list-item { border-radius: 8px; }
.list-item + .list-item { margin-top: 2px; }
.list-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: 8px;
  color: inherit;
}
.list-row:hover { background: var(--paper); }
.list-item.active { background: var(--paper); box-shadow: inset 3px 0 0 var(--red); }
.list-thumb {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--paper-2);
}
.list-thumb.img-placeholder { font-size: 22px; }
.list-meta { min-width: 0; }
.list-date { font-size: 11px; color: var(--red); font-weight: 600; }
.list-title { font-family: var(--font-serif); font-size: 14px; font-weight: 700; }
/* 事件类型标签（颜色来自数据集的 types）：描边 + 彩色文字、直角，不填充，
   与朝代 / 时期的实心圆角色块在形状上区分开 */
.list-type, .type-tag, .ms[data-name="type"] .ms-tag {
  --type-ink: color-mix(in srgb, var(--chip-color), #fff var(--type-lighten));
  display: inline-block;
  padding: 0 6px;
  border: 1.5px solid var(--type-ink);
  border-radius: 2px;
  background: transparent;
  color: var(--type-ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  vertical-align: 1px;
}
.ms[data-name="type"] .ms-swatch {
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--chip-color), #fff var(--type-lighten));
  border-radius: 0;
}
.list-type { margin-left: 6px; }
.detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 2px; }
.type-tag { font-size: 12px; line-height: 18px; padding: 0 8px; }
.list-transition { margin-top: 1px; font-size: 11px; color: var(--muted); }
.list-transition::before { content: "⇄ "; color: var(--red); }
/* 展开的事件：按钮在右侧，第一行“查看详情”，第二行“编辑”“删除”（调试模式） */
.list-item.has-actions { display: flex; align-items: center; }
.list-item.has-actions .list-row { flex: 1; min-width: 0; }
.list-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 6px 8px 6px 0;
}
.list-actions-edit { display: flex; gap: 5px; }
.list-actions-edit .btn { flex: 1; justify-content: center; }
.list-actions > .btn { justify-content: center; }
.list-empty { padding: 30px; text-align: center; color: var(--muted); }
.sidebar-foot { padding: 10px 20px 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.storage-note { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.foot-edit { margin-top: 2px; flex-basis: 100%; }

/* 开关（调试模式） */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch-track {
  position: relative;
  width: 34px; height: 20px;
  border-radius: 10px;
  background: var(--line);
  transition: background .2s;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.switch input:checked + .switch-track { background: var(--red-fill); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }
.load-error {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(420px, calc(100% - 32px));
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--ink-2);
}
.load-error p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed; inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: var(--backdrop);
  animation: fade .2s ease;
}
.modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: pop .22s ease;
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--float-bg);
  z-index: 2;
}
.detail-hero img, .detail-hero .img-placeholder {
  display: block;
  width: 100%;
  max-height: 360px;
  height: 300px;
  object-fit: contain;
  background: var(--paper-2);
  cursor: zoom-in;
}
.detail-hero .img-placeholder { font-size: 90px; cursor: default; }
.detail-body { padding: 20px 26px 24px; }
.detail-date { color: var(--red); font-weight: 600; font-size: 14px; }
.detail-transition { margin-top: 2px; font-size: 13px; color: var(--muted); }
.detail-body h2 { margin: 4px 0 12px; font-family: var(--font-serif); font-size: 26px; }
.detail-text {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-2);
  text-align: justify;
  white-space: pre-wrap;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.gallery:empty { display: none; }
.gallery figure { margin: 0; position: relative; }
.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--paper-2);
  cursor: zoom-in;
  transition: opacity .15s;
}
.gallery img:hover { opacity: .85; }
.detail-source { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.detail-source a { color: var(--red); word-break: break-all; }
.source-list { margin: 4px 0 0; padding-left: 18px; }
.source-list li + li { margin-top: 2px; }
.source-note { margin: 6px 0 0; }
/* 编辑页：参考链接列表 */
.source-editor { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.source-editor:empty { display: none; }
.source-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.field .source-row .source-url { flex: 3; min-width: 0; }
.field .source-row .source-title { flex: 2; min-width: 0; }
.source-remove { flex: none; width: 30px; height: 30px; font-size: 20px; }
/* 打开链接（新标签页）；网址无效时不可点。建议模式不显示 */
.source-open { flex: none; width: 30px; height: 30px; font-size: 16px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; }
.source-open:hover { color: var(--red); }
.source-open[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.suggest-mode .source-open { display: none; }
/* 自动填写标题的提示（正在查询 / 已填写），在该行下方 */
.source-hint { flex-basis: 100%; margin: -2px 0 0 2px; font-size: 12px; color: var(--muted); }
.source-hint[hidden] { display: none; }
@media (max-width: 640px) {
  .source-row { flex-wrap: wrap; }
  .field .source-row .source-url { flex: 1 1 100%; }
}
.detail-share { margin: -6px 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }   /* 分享链接和反馈按钮在同一行 */
.detail-share .btn { gap: 5px; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 分享菜单 */
.share-card { padding: 22px 26px; }
.share-card h2 { margin: 0 0 18px; font-family: var(--font-serif); }
.share-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; margin-bottom: 18px; }
.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.share-btn:hover { border-color: var(--red); background: rgba(168,50,42,.05); }
.share-btn:active { transform: scale(0.95); }
.share-btn svg { width: 24px; height: 24px; }

.share-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.share-qrcode p { margin: 0; font-size: 12px; color: var(--ink-2); }
/* 微信好友只在手机上显示 */
body:not(.mobile-device) .mobile-only { display: none !important; }
.share-wechat-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 4px 0;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.share-wechat-guide p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); word-break: break-all; }
.share-wechat-guide .btn { text-decoration: none; }

/* 微信内置浏览器中的分享提示：指向右上角的 ··· 菜单 */
.wechat-tip { position: fixed; inset: 0; z-index: 95; background: var(--backdrop); }
.wechat-tip-bubble {
  position: absolute;
  top: 14px;
  right: 14px;
  max-width: 260px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--toast-bg);
  color: var(--toast-ink);
  font-size: 16px;
  line-height: 1.5;
}
.wechat-tip-arrow { display: block; margin: 0 0 6px auto; }
.wechat-tip-bubble p { margin: 0; }
.wechat-tip-bubble .wechat-tip-note { margin-top: 6px; font-size: 13px; opacity: .8; }
#shareQrcodeCanvas { border: 1px solid var(--line); border-radius: 4px; padding: 4px; background: white; }

.edit-card { padding: 22px 26px 24px; }
/* 编辑页比其他弹窗宽一些（图片、参考链接一行能放下更多） */
#editForm { width: min(1080px, 100%); }
.edit-card h2 { margin: 0 0 14px; font-family: var(--font-serif); }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.field em { color: var(--red); font-style: normal; }
.field input, .field select, .field textarea, .image-add input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  font-size: 14px;
  background: var(--field-bg);
  color: var(--ink);
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus, .image-add input:focus { outline: 2px solid rgba(168,50,42,.35); border-color: var(--red); }
.field-row { display: flex; gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--red); }
.field-row .field { flex: 1; }
.field-row .field.grow { flex: 2; }
.counter { color: var(--muted); font-weight: normal; }
.image-editor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.image-editor:empty::before { content: "暂无图片"; color: var(--muted); font-size: 12px; }
.img-slot { position: relative; border-radius: 6px; overflow: hidden; background: var(--paper-2); }
/* 拖动排序：被拖的图片变淡，放下的位置显示竖线 */
.img-slot[data-index] .slot-zoom { cursor: grab; }
.img-slot.dragging { opacity: .4; }
.img-slot.drop-before::after, .img-slot.drop-after::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: var(--red); z-index: 3; }
.img-slot.drop-before::after { left: 0; }
.img-slot.drop-after::after { right: 0; }
.img-slot img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.img-slot .slot-caption {
  display: block;
  width: 100%;
  margin: 0;
  padding: 4px 6px;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--card);
  font: inherit;
  font-size: 12px;
  color: var(--ink);
}
.img-slot .slot-caption:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.img-slot .badge {
  position: absolute; left: 4px; top: 4px;
  font-size: 10px; background: var(--red-fill); color: #fff; padding: 1px 5px; border-radius: 4px;
}
.img-slot .slot-actions {
  position: absolute; right: 2px; top: 2px;
  display: flex; gap: 2px;
}
.img-slot .slot-actions button {
  width: 22px; height: 22px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 12px; line-height: 1;
}
.image-add { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.image-add input { flex: 1; min-width: 160px; }
.file-btn { cursor: pointer; }
/* 保存按钮：保存中显示转圈（CSS 动画在排版计算时也能继续转动），完成后短暂显示“✓ 已保存” */
.save-btn { min-width: 96px; }
.btn-spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.edit-card.saving .btn-spinner { display: inline-block; }
.edit-card.saving .save-btn, .edit-card.saved .save-btn { opacity: 1; cursor: default; }
.edit-card.saved .save-btn { background: var(--ok-fill); }
.edit-card.saving [data-close] { opacity: .5; pointer-events: none; }
.form-error { color: var(--red); font-size: 13px; min-height: 1em; margin: 0 0 8px; }
.confirm-card { width: min(380px, 100%); padding: 24px; }
.confirm-card p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; }

/* ---------- 图片查看 ---------- */
.lightbox {
  position: fixed; inset: 0;
  z-index: 70;
  background: rgba(15, 10, 5, .92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox figure { margin: 0; text-align: center; max-width: 88vw; }
.lightbox img { max-width: 88vw; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.lightbox figcaption { color: #eee; font-size: 14px; margin-top: 10px; }
/* 从编辑页打开的图片查看器：设为代表图 / 从本事件移除 */
.lb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.lb-actions[hidden] { display: none; }
.lb-actions button { padding: 6px 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 14px; }
.lb-actions button:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.lb-actions button:disabled { opacity: .5; cursor: default; }
.lb-note { flex-basis: 100%; margin: 0; color: rgba(255,255,255,.6); font-size: 12px; }
.slot-zoom { cursor: zoom-in; }
.lb-close { position: absolute; top: 14px; right: 14px; color: #fff; }
.lb-close:hover { background: rgba(255,255,255,.12); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 72px;
  border: none; border-radius: 8px;
  background: rgba(255,255,255,.1); color: #fff; font-size: 36px;
}
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 20px);
  background: var(--toast-bg);
  color: var(--toast-ink);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 90;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 关于本站 ---------- */
.about-card { width: min(640px, 100%); }
.about-body { padding: 26px 30px 24px; color: var(--ink-2); }
.about-body h2 { margin: 0; padding-right: 36px; font-family: var(--font-serif); font-size: 28px; color: var(--red); letter-spacing: .04em; }
.about-lead { margin: 8px 0 6px; font-family: var(--font-serif); font-size: 16px; line-height: 1.8; }
.about-body h3 { margin: 18px 0 6px; padding-left: 10px; border-left: 3px solid var(--red); font-family: var(--font-serif); font-size: 15px; color: var(--ink); }
.about-body p, .about-body li { margin: 0; font-size: 14px; line-height: 1.75; }
.about-body ul { margin: 0; padding-left: 20px; }
.about-body a:not(.btn) { color: var(--red); }
.about-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.about-foot .btn { text-decoration: none; }

/* ---------- 首次访问提示 ---------- */
/* 电脑：分步指引。聚光灯（tour-spot）用超大的阴影把其余部分调暗；tour-catch 挡住时间轴上的操作 */
.tour { position: fixed; inset: 0; z-index: 45; }
.tour-catch { position: absolute; inset: 0; }
.tour-spot {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px var(--tour-dim);
  pointer-events: none;
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
.tour-tip {
  position: fixed;
  width: 280px;
  padding: 14px 16px 12px;
  background: var(--card);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  transition: left .3s ease, top .3s ease;
}
.tour-step { font-size: 12px; color: var(--muted); }
.tour-tip p { margin: 2px 0 0; font-size: 14px; line-height: 1.65; }
.tour-tip b, .hint-bubble b { color: var(--ink); font-weight: 600; }
.tour-row, .hint-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.tour-dots i.on { background: var(--red); }
/* 手机：底部气泡，指向“浏览所有历史事件”；不挡时间轴，自动播放照常进行 */
.hint-bubble {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(var(--bottombar-h) + 14px);
  z-index: 40;
  padding: 16px 18px 14px;
  background: var(--card);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: pop .25s ease;
}
.hint-bubble::after {
  content: "";
  position: absolute;
  right: var(--hint-arrow-right, 25%);
  bottom: -8px;
  width: 14px; height: 14px;
  background: var(--card);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.hint-bubble h3 { margin: 0 0 12px; padding-right: 28px; font-family: var(--font-serif); font-size: 15px; color: var(--ink); }
.hint-bubble ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hint-bubble li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; }
.hint-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-2); color: var(--red); }
.hint-ico svg { display: block; }
.hint-close { position: absolute; top: 6px; right: 6px; }
.hint-note { margin-right: auto; font-size: 12px; color: var(--muted); }
body.bars-hidden .hint-bubble { display: none; }

/* ---------- 自适应 ---------- */
@media (max-width: 640px) {
  .topbar { padding: 6px 216px 6px 16px; }   /* 五个按钮（34px，间距 6px）占右侧约 194px */
  /* 调试模式多两个按钮：七个按钮缩小为 30px、间距 4px，共 234px */
  body.debug-mode .topbar { padding-right: 256px; }
  body.debug-mode .corner-btns { gap: 4px; }
  body.debug-mode .corner-btn { width: 30px; height: 30px; }
  .corner-btns { right: 12px; gap: 6px; top: 9px; }
  .corner-btn { width: 34px; height: 34px; }
  /* 手机：深色模式、分享、关于收进“更多”菜单 */
  .theme-toggle, .share-timeline, .about-btn { display: none; }
  .more-wrap { display: block; }
  /* 窄屏：标题和当前时期分两行，最长的时期名也能完整显示 */
  .brand { font-size: clamp(15px, 5vw, 21px); letter-spacing: .04em; }
  .brand-home { display: flex; flex-direction: column; line-height: 1.15; }
  .brand-era { font-size: .72em; }
  .brand-era:not(:empty)::before { content: none; }
  :root { --bottombar-h: 50px; }
  .bottombar { padding: 7px 16px; }
  .minimap { display: none; }
  .browse-btn { flex: 1; }
  .fab { right: 16px; bottom: calc(var(--bottombar-h) + 12px); width: 52px; height: 52px; }
  body.bars-hidden .fab { bottom: 14px; }
  .nav-arrow { display: none; }
  .major .card-title { font-size: 16px; }   /* 窄屏上重大事件的文字不放大，把高度留给图片 */
  .major .card-short { font-size: 12px; }
  .detail-body, .edit-card { padding-left: 18px; padding-right: 18px; }
  .field-row { flex-wrap: wrap; }
  .field-row .field.grow { flex-basis: 100%; }
  .detail-hero img, .detail-hero .img-placeholder { height: 220px; }
}
@media (max-width: 400px) {
  /* 很窄的屏幕：按钮再缩小，标题完整显示。五个按钮 30px、间距 4px（共 166px）；
     调试模式七个按钮 25px、间距 2px（共 187px） */
  .topbar { padding-right: 186px; }
  .corner-btns { gap: 4px; top: 11px; }       /* 按钮变小后仍在顶栏中垂直居中 */
  .corner-btn { width: 30px; height: 30px; }
  body.debug-mode .topbar { padding-right: 203px; }
  body.debug-mode .corner-btns { gap: 2px; top: 13.5px; }
  body.debug-mode .corner-btn { width: 25px; height: 25px; }
}

/* ---------- 反馈 / 建议修改 ---------- */
.feedback-target { margin: -8px 0 14px; font-size: 14px; color: var(--ink-2); }
.feedback-kinds { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.feedback-kinds legend { padding: 0; margin-bottom: 6px; }
.kind-options { display: flex; flex-wrap: wrap; gap: 8px; }
.kind-option { position: relative; display: inline-flex; align-items: center; padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; cursor: pointer; user-select: none; }
.kind-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kind-option:hover { border-color: var(--red); }
.kind-option:has(input:checked) { border-color: var(--red); color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--card)); }
.kind-option:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
/* 编辑页的建议模式：隐藏只供维护者使用的字段（时期更迭、重要程度、图片上传），显示建议相关的字段 */
.suggest-only { display: none; }
.suggest-mode .suggest-only { display: block; }
.suggest-mode .edit-only { display: none !important; }
/* 防垃圾的隐藏字段：访问者看不到，机器人会填写 */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.qrcode-wait { margin: 8px 0; max-width: 240px; font-size: 13px; color: var(--ink-2); word-break: break-all; }

/* 编辑页“图片”标题行：右侧为搜图按钮（▾ 选择网站） */
.img-field-head { display: flex; align-items: center; gap: 10px; }
.img-field-head > span { flex: 1; min-width: 0; }
.img-search { flex: none; position: relative; display: inline-flex; }
.img-search-main, .img-search-more { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12.5px; line-height: 18px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.img-search-main { border-radius: 7px 0 0 7px; }
.img-search-more { border-left: 0; border-radius: 0 7px 7px 0; padding: 4px 7px; }
.img-search-main:hover, .img-search-more:hover { color: var(--red); }
.img-search-main[aria-disabled="true"] { color: var(--muted); }
.img-search-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; min-width: 190px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.img-search-menu[hidden] { display: none; }
.img-search-item { display: block; padding: 7px 10px 7px 28px; border-radius: 6px; color: var(--ink); font-size: 13px; text-decoration: none; white-space: nowrap; position: relative; }
.img-search-item:hover { background: var(--hover-tint); }
.img-search-item.on { color: var(--red); }
.img-search-item.on::before { content: "✓"; position: absolute; left: 10px; }

/* ---------- 朝代 / 时期菜单 ---------- */
/* 电脑：顶栏按钮下方的列表（色块、时期名、年代） */
.era-menu {
  position: fixed;
  z-index: 60;
  width: 300px;
  max-height: min(560px, calc(100vh - 80px));
  overflow-y: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.era-menu[hidden] { display: none; }
.era-menu-grab, .era-menu-head { display: none; }
.era-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.era-item:hover, .era-item:focus-visible { background: var(--hover-tint); outline: none; }
.era-item.on { background: color-mix(in srgb, var(--red) 9%, var(--card)); }
.era-item.on .era-name { color: var(--red); }
.era-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--era-c); }
.era-name { font-weight: 600; white-space: nowrap; }
.era-range { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.era-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .3); }
.era-scrim[hidden] { display: none; }
/* 手机：底栏左侧的“■ 唐 ▾”按钮（电脑上不显示） */
.era-bar-btn { display: none; }
@media (max-width: 640px) {
  .era-menu-btn { display: none; }
  .era-bar-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 10px 0 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font: 600 15px var(--font-serif);
    box-shadow: var(--shadow);
    white-space: nowrap;
  }
  .era-bar-btn .era-swatch { width: 10px; height: 10px; }
  #eraBarName { max-width: 7.2em; overflow: hidden; text-overflow: ellipsis; }
  .era-bar-btn svg { color: var(--ink-2); }
  .bottombar { gap: 10px; }
  /* 手机：从底部弹出的色块面板 */
  .era-menu.sheet {
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto;
    max-height: 62vh;
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }
  .era-menu.sheet .era-menu-grab { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--line); }
  .era-menu.sheet .era-menu-head { display: block; margin: 0 2px 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
  .era-menu.sheet .era-menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .era-menu.sheet .era-item {
    justify-content: center;
    padding: 10px 4px;
    background: var(--era-c);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  }
  .era-menu.sheet .era-item .era-swatch, .era-menu.sheet .era-item .era-range { display: none; }
  .era-menu.sheet .era-item .era-name { overflow: hidden; text-overflow: ellipsis; }
  .era-menu.sheet .era-item.on { outline: 2.5px solid var(--ink); outline-offset: 1.5px; }
  .era-menu.sheet .era-item.on .era-name { color: #fff; }
}
/* 很窄的屏幕：底栏放了时期按钮，“浏览所有历史事件”缩短为“浏览事件” */
@media (max-width: 360px) {
  .browse-long { display: none; }
}