/* ==================== 青史卡 · style.css ====================
   布局：≥1000px 桌面双栏（左卡片/右时间线与图谱）；<1000px 移动单栏 + 底部 tab 切换
   配色：墨底 + 宣纸字，朝代色由数据文件给（dynasties.js 的 color）
   原则：信息密度优先，装饰最少；SVG 文字统一 11~13px，移动端不缩小到不可读
*/
:root {
  --bg: #16141c;
  --bg2: #1e1b26;
  --panel: #242030;
  --panel2: #2b2638;
  --line: #3a3446;
  --ink: #ece6dc;
  --ink2: #c8c1b6;          /* 次级文字：从 #bdb6ab 提亮，小字号不再发灰 */
  --muted: #a29ab0;         /* 说明文字：从 #8b8497 提亮到 4.5:1 以上 */
  --accent: #e0ae4e;
  --accent2: #8fbde3;
  --ok: #63b083;
  --warn: #e09a55;
  --err: #e07a7a;
  /* ---- 表面令牌：下面是深色基准值，浅色在文末媒体查询里整套替换 ---- */
  --card-bg: linear-gradient(160deg, #2a2434, #221d2c 60%);
  --card-ink: #ece4d8;
  --surface: #221d2e;
  --surface-line: #3a3350;
  --surface2: #2f2a3e;
  --host-bg: #1f1b29;
  --host-line: #322b40;
  --pop-bg: #292335;
  --pop-head: #2d2739;
  --pop-line: #514865;
  --msg-user: #2c3348;
  --msg-user-line: #3d4763;
  --tab-bg: #211d2b;
  --term-ink: #e6effa;
  --quote-bg: #ffffff08;
  --quote-line: #6b5a34;
  --quote-ink: #f4e9d4;
  --ok-bg: #1f3a2b;
  --ok-line: #3f6b52;
  --ok-ink: #9fd8b4;
  --err-bg: #3a2024;
  --warn-ink: #f0c9c9;
  --band-ink: #fff;
  --band-halo: #00000066;
  --ruler-bar: #fff;
  --tick: #b5adc6;
  --lane-tag: #a29ab5;
  --dot-fill: #ffffff55;   /* 写成 8 位：#fff5 这种 4 位写法门禁脚本解析不了 */
  --edge-label: #cbb8ff;
  --tag-bg: #3a3350;
  --tag-line: #504a68;
  --tag-ink: #e7dff5;
  --scroll: #443b58;
  /* 这几个不能只靠混色得到：两个主题必须各自给值，否则会出现浅底浅字 */
  --danger-ink: #e2a3a3;
  --code-bg: #00000066;
  --person-bg: #3a4257;
  --person-bg-hi: #4a5a7a;
  --person-line: #6b7fa0;
  --person-ink: #f2f6ff;
  /* ---- 派生表面：这些原先写死在各条规则里，多皮肤下必须跟着整套换，
         否则会出现“换了皮肤后某些角落还是旧主题色”的拼贴感 ---- */
  --bg-glow: #2a2334;
  --bar-bg: linear-gradient(#221e2c, #1b1822);
  --tag-clear-bg: #4a2f34; --tag-clear-line: #6a4448;
  --btn-primary-a: #c99539; --btn-primary-b: #a8762a; --btn-primary-line: #d8ab55; --btn-primary-ink: #150f06;
  --btn-on-bg: #3d4a6b; --btn-on-ink: #ffffff;
  --fav-bg: #d9a44118;
  --edge: #7c7391; --edge-back: #b07fa8; --edge-spoke: #6a6280; --edge-spoke2: #55707f; --edge-co: #4b4560;
  --node-stroke: #ffffff30;
  --mask: #000000aa;
  --r: 10px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);
  --serif: "Songti SC", "Noto Serif SC", "SimSun", "Source Han Serif SC", serif;
  --sans: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 15% -10%, var(--bg-glow) 0%, var(--bg) 60%) no-repeat, var(--bg);
  color: var(--ink);
  font: 15px/1.75 var(--sans);
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
.muted { color: var(--muted); font-weight: 400; font-size: .88em; }
.err { color: var(--err); }
code { background: var(--code-bg); padding: .06em .35em; border-radius: 4px; font-size: .9em; }
a { color: var(--accent2); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.logo { font: 700 21px/1 var(--serif); letter-spacing: .12em; color: var(--accent); }
.brand .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
/* 光晕由 ok/warn 自身混出来，不写死色值：否则换皮肤后这里还残留上一套的绿 */
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.dot.wait { background: var(--accent2); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.modelbox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.modelbox select, .modelbox input {
  max-width: 260px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 7px; font-size: 12.5px;
}

/* ---------------- 筛选条 ---------------- */
.filters { padding: 10px 16px 4px; border-bottom: 1px solid var(--line); }
.f-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sel { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font-size: 13px; }
.q { flex: 1 1 220px; min-width: 160px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-size: 13.5px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag { background: var(--tag-bg); border: 1px solid var(--tag-line); color: var(--tag-ink); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.tag:hover { filter: brightness(1.18); }
.tag.clear { background: var(--tag-clear-bg); border-color: var(--tag-clear-line); }
.statline { font-size: 12.5px; color: var(--muted); padding: 4px 0 6px; }
.statline b { color: var(--accent); font-weight: 600; }

/* ---------------- 按钮 / chip ---------------- */
.btn {
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px;
  transition: .12s; white-space: nowrap;
}
/* hover 只改边框与位移：以前顺手把字色刷成白，在浅色皮肤上等于白字写在宣纸上 */
.btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(var(--btn-primary-a), var(--btn-primary-b)); border-color: var(--btn-primary-line); color: var(--btn-primary-ink); font-weight: 700; }
.btn.ghost { background: transparent; }
.btn.mini { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
.btn.toggle.on { background: var(--btn-on-bg); border-color: var(--accent2); color: var(--btn-on-ink); }
.btn.danger { color: var(--danger-ink); }
/* .kbd 继承按钮字色再压暗：0.65 不透明度在金色主按钮上只剩 3.3:1，抬到 0.85 */
.kbd { font: 11px var(--sans); opacity: .85; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink2);
}
/* 主题 chip：用主题色与正文色混出文字，保证两个模式下都够对比 */
.chip.theme {
  border-color: color-mix(in srgb, var(--tc, #777) 60%, var(--line));
  color: color-mix(in srgb, var(--tc, #777) 38%, var(--ink));
  font-weight: 600;
}
.chip.theme::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, #777); box-shadow: 0 0 0 1px var(--panel); }
.chip.person:hover, .chip.ruler:hover, .chip.suggest:hover { border-color: var(--accent); background: var(--surface2); color: var(--accent); }
.chip.person:hover .term, .chip.ruler:hover .term { color: var(--accent); }
.chip.ruler { font-family: var(--serif); }
.actionbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }
.extbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* ---------------- 主布局 ---------------- */
.layout { display: grid; grid-template-columns: minmax(390px, 1fr) minmax(430px, 1.15fr); gap: 16px; padding: 16px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.col-a { padding-bottom: 30px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.panel-t { margin: 0 0 8px; font: 600 15px/1.4 var(--serif); letter-spacing: .04em; color: var(--accent); }
.pane { min-width: 0; }
.tabs { display: none; }

/* ---------------- 事件卡 ---------------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 12px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.card::after { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 70%); }
.card.flip { animation: flipin .28s ease-out; }
@keyframes flipin { from { opacity: 0; transform: translateY(8px); } }
.c-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.c-year { font: 700 26px/1 var(--serif); color: var(--accent); letter-spacing: .02em; }
.c-century { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.c-lv { font-size: 12px; color: var(--ink2); letter-spacing: 2px; }
.fav { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 30px; cursor: pointer; font-size: 16px; color: var(--muted); }
.fav.on { color: var(--accent); border-color: var(--accent); background: var(--fav-bg); }
.c-title { font: 700 21px/1.45 var(--serif); margin: 8px 0 6px; letter-spacing: .01em; }
.c-meta { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); margin-bottom: 6px; }
.c-meta > span { border-left: 2px solid var(--line); padding-left: 7px; }
.c-ruler { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin: 2px 0 10px; }
.c-ruler .k, .c-cau2 .k, .c-src .k, .d-k { color: var(--muted); font-size: 11.5px; letter-spacing: .18em; }
.c-brief { font-size: 14.5px; line-height: 1.95; color: var(--card-ink); }
.c-brief p { margin: .35em 0; }
.c-brief blockquote {
  margin: .5em 0; padding: .3em .9em; border-left: 3px solid var(--quote-line);
  background: var(--quote-bg); border-radius: 0 7px 7px 0; font-family: var(--serif); font-size: 14.5px; color: var(--quote-ink);
}
.c-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.c-cau2 { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; }
.c-cau2 > div { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.c-cau2 .evlink { background: var(--surface2); border: 1px solid var(--surface-line); border-radius: 6px; padding: 1px 7px; font-size: 12.5px; color: var(--ink); }
.c-src { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.c-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.c-foot .nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* 窄屏：统计占一行，三个导航按钮整行均分（拇指好按） */
@media (max-width: 560px) {
  .c-foot { gap: 8px; }
  .c-foot .muted { width: 100%; }
  .c-foot .nav { width: 100%; margin-left: 0; }
  .c-foot .nav .btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }
}

/* ---------------- 术语 / 弹层 ---------------- */
.term { border-bottom: 1px dashed var(--accent2); color: var(--term-ink); cursor: pointer; }
.term:hover { background: color-mix(in srgb, var(--accent2) 18%, transparent); color: var(--accent2); }
.pop-host { position: relative; z-index: 60; }
.gloss-pop {
  position: fixed; left: 50%; top: 15%; transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px)); max-height: 72vh; overflow: auto;
  background: var(--pop-bg); border: 1px solid var(--pop-line); border-radius: 12px; box-shadow: var(--shadow);
  z-index: 70; overscroll-behavior: contain;
}
.gloss-pop.show { animation: popin .16s ease-out; }
/* 动效只用 opacity + translate 独立属性：keyframes 里写 transform 会在动画期间
   把元素的 transform 整体接管，与 JS 贴锚点定位互相覆盖，字条会瞬移一下。 */
@keyframes popin { from { opacity: 0; translate: 0 6px; } }
.gp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--pop-line); position: sticky; top: 0; background: var(--pop-head); }
.gp-term { font: 700 17px/1.3 var(--serif); color: var(--accent); }
.gp-badge { font-size: 10.5px; color: var(--ok-ink); border: 1px solid var(--ok-line); border-radius: 999px; padding: 0 7px; }
.gp-x { margin-left: auto; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.gp-body { padding: 10px 12px 12px; font-size: 13.5px; }
.gp-body h2, .gp-body h3, .gp-body h4 { font: 600 14px var(--serif); color: var(--accent2); margin: .9em 0 .3em; }
.gp-body p { margin: .35em 0; }
.gp-body ul, .gp-body ol { margin: .3em 0 .6em; padding-left: 1.3em; }
.gp-body li { margin: .18em 0; }
.gp-muted { color: var(--muted); }
.gp-ev { list-style: none; padding: 0; margin: .5em 0; display: grid; gap: 4px; }
.gp-ev li { background: var(--surface); border: 1px solid var(--surface-line); border-radius: 7px; padding: 3px 8px; font-size: 12.5px; color: var(--ink); }
.gp-llm { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.gp-loading { color: var(--muted); font-size: 12.5px; }
.gp-foot { padding: 0 12px 12px; }
.gloss-pop.sheet {
  position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; transform: none;
  width: auto; max-height: 66vh; border-radius: 16px 16px 0 0; border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.term-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--surface); border: 1px solid var(--surface-line); border-radius: 8px; padding: 6px 9px; cursor: pointer; margin: 4px 6px 0 0; }
.term-card b { font: 600 13.5px var(--serif); color: var(--ink); }
.term-card span { font-size: 11.5px; color: var(--muted); }
.term-card:hover { border-color: var(--accent); }

/* ---------------- 深度讲解 / 自测 ---------------- */
.deepbox, .quizbox { margin-top: 12px; }
.deep, .quiz { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.deep h3, .quiz h3 { margin: 0 0 8px; font: 600 15px var(--serif); color: var(--accent); }
.d-row { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); }
.d-row:first-of-type { border-top: 0; }
.d-k { font-size: 11.5px; letter-spacing: .12em; color: var(--muted); padding-top: 3px; }
.d-v { font-size: 14px; }
.d-v p { margin: .25em 0; }
.d-tell .d-v { color: var(--quote-ink); font-family: var(--serif); font-size: 15px; }
.d-pitfall .d-v { color: var(--warn-ink); }
.d-terms { margin-top: 8px; }
.quiz .q { padding: 8px 0; border-top: 1px dashed var(--line); }
.quiz .q:first-of-type { border-top: 0; }
.quiz .qt { margin: 0 0 6px; font-size: 14.5px; }
.opts { list-style: none; display: grid; gap: 5px; padding: 0; margin: 0; }
.opts button { text-align: left; background: var(--surface); border: 1px solid var(--surface-line); border-radius: 7px; padding: 6px 10px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.opts button:hover:not(:disabled) { border-color: var(--accent2); background: var(--surface2); }
.opts button.right { border-color: var(--ok); background: var(--ok-bg); color: var(--ink); }
.opts button.wrong { border-color: var(--err); background: var(--err-bg); color: var(--ink); }
.qex { margin-top: 7px; font-size: 13px; color: var(--quote-ink); background: var(--quote-bg); border-left: 3px solid var(--quote-line); padding: 5px 10px; border-radius: 0 7px 7px 0; }

/* ---------------- 追问 ---------------- */
.asklog { max-height: 46vh; overflow: auto; display: grid; gap: 8px; padding-right: 4px; }
.msg { border-radius: 9px; padding: 8px 11px; font-size: 14px; }
.msg.user { background: var(--msg-user); border: 1px solid var(--msg-user-line); justify-self: end; max-width: 92%; color: var(--ink); }
.msg.assistant { background: var(--panel2); border: 1px solid var(--line); }
.msg p { margin: .3em 0; }
.msg h2, .msg h3, .msg h4 { font: 600 14px var(--serif); color: var(--accent2); margin: .7em 0 .25em; }
.msg ul, .msg ol { margin: .3em 0; padding-left: 1.3em; }
.askbar { display: flex; gap: 8px; margin-top: 10px; }
.askbar textarea { flex: 1; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 14px var(--sans); resize: vertical; }
.askhint { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ---------------- 时间线 ---------------- */
.tl-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tl-tools .spacer { flex: 1; }
.tl-caption { font: 12.5px var(--serif); color: var(--accent2); letter-spacing: .04em; }
.tlwrap, .grwrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tl-host { background: var(--host-bg); border: 1px solid var(--host-line); border-radius: 9px; color: var(--ink); touch-action: pan-y; user-select: none; }
.tl-host.grabbing { cursor: grabbing; }
.tl-svg { display: block; }
.tl-svg text { font: 11px var(--sans); fill: var(--ink2); pointer-events: none; }
/* 注：`.tl-svg text` 的特异性高于单个 `.tl-*` 类，所以下面这些规则必须带 `.tl-svg` 前缀，
   否则 fill 会被统一成 var(--ink2)——这个坑使得“色带上的白字”一直未真正生效 */
.tl-svg .tl-tick { fill: var(--tick); font-size: 10.5px; }
.tl-svg .tl-era-label { fill: var(--band-ink); font: 600 11.5px var(--serif); letter-spacing: .1em; }
/* 注：选中态不再单独写死字色——时代条的字色由 timeline.js 按带色实算后写进 style（见 DB.inkOn） */
/* 泳道标签（正统/并立N）会压在政权块上：描一圈宿主底色当背板，不管背下是什么带色都读得出来 */
.tl-svg .tl-lane-tag { fill: var(--lane-tag); font-size: 9.5px; letter-spacing: .08em; paint-order: stroke fill; stroke: var(--host-bg); stroke-width: 3px; stroke-linejoin: round; }
.tl-block { cursor: pointer; }
.tl-block:hover rect:first-of-type { filter: brightness(1.25); }
.tl-svg .tl-block-name { fill: var(--band-ink); font: 700 12.5px var(--serif); letter-spacing: .06em; }
/* 不透明度不能压太低：字色是按实算对比度挑的，再乘个 0.8 又会掉到 4.5 以下 */
.tl-svg .tl-block-sub { fill: var(--band-ink); opacity: .92; font-size: 10px; }
.tl-ruler-bar { fill: var(--ruler-bar); }
.tl-svg .tl-ruler-name { fill: var(--band-ink); font-size: 9px; opacity: .95; }
.tl-dot { fill: var(--dot-fill); stroke: var(--band-ink); stroke-width: .8; cursor: pointer; }
.tl-dot:hover { fill: var(--accent); }
.tl-dot.focus { fill: var(--accent); stroke: var(--band-ink); stroke-width: 1.4; }
.tl-svg .tl-focus-year { fill: var(--accent); font: 700 11.5px var(--serif); }
/* 色带上的文字统一描一圈光晕：低不透明度的带与浅色底上才不会洗白 */
.tl-era-label, .tl-block-name, .tl-block-sub, .tl-ruler-name, .gr-n-title, .gr-n-year, .gr-c-title, .gr-c-year, .gr-c-sub {
  paint-order: stroke fill; stroke: var(--band-halo); stroke-width: 2.4px; stroke-linejoin: round;
}
.legend { display: flex; gap: 10px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 14px; height: 9px; border-radius: 2px; display: inline-block; border: 1px solid var(--line); }
/* 下面几块是数据里写定的“图例色”（主线/并立/时代/热力），跟皮肤无关，
   所以故意不令牌化——它们必须和 timeline.js 画出来的色块一致；
   但边框跟着主题走，否则浅底上黑块看不出边界。 */
.sw.main { background: #a53f3a; }
.sw.side { background: #4f8c6f; }
.sw.era { background: repeating-linear-gradient(45deg, #9a8a6a, #9a8a6a 2px, #6a6050 2px, #6a6050 4px); }
.sw.ruler { background: linear-gradient(90deg, var(--ruler-bar) 0 60%, var(--line) 60% 100%); height: 4px; }
.sw.heat { background: #5a4f8c; }

/* ---------------- 竖版时间线：时代 → 政权 → 事件 三级钻取 ---------------- */
.tl-tree { display: none; }
.tv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.tv-top .spacer { flex: 1; }
.tv-crumb { font: 12.5px/1.5 var(--serif); color: var(--muted); }
.tv-crumb .lk { background: none; border: 0; padding: 0; color: var(--accent2); font: 12.5px var(--serif); cursor: pointer; }
.tv-crumb .lk.cur, .tv-crumb .cur { color: var(--ink); font-weight: 700; }
.tv-hint { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
/* 分组标题：正统主线 / 时代阶段 / 并立政权，后面拖一条细分隔线 */
.tv-grp {
  display: flex; align-items: center; gap: 6px; margin: 13px 0 7px;
  font: 600 12px var(--serif); letter-spacing: .12em; color: var(--accent2);
}
.tv-grp:first-child { margin-top: 2px; }
.tv-hint + .tv-grp { margin-top: 4px; }   /* 分组标题前总有一行提示语，:first-child 匹配不上，单独收一下顶部间距 */
.tv-grp::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tv-grp-n { font: 11px var(--sans); letter-spacing: 0; color: var(--muted); border: 1px solid var(--surface-line); border-radius: 999px; padding: 0 6px; }
.tv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
/* 政权/时代行：左侧色条直接用数据里的 --c，正文一律走主题令牌，不跟带色较劲 */
.tv-era, .tv-dy {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
  width: 100%; text-align: left; min-height: 46px;
  background: var(--surface); border: 1px solid var(--surface-line); border-left: 5px solid var(--c, var(--accent));
  border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--ink);
}
.tv-era:active, .tv-dy:active, .tv-ev:active { filter: brightness(1.18); }
.tv-name { font: 700 15.5px/1.35 var(--serif); letter-spacing: .04em; }
.tv-span { font-size: 12px; color: var(--ink2); }
.tv-tag { font-size: 10.5px; color: var(--accent2); border: 1px solid var(--surface-line); border-radius: 999px; padding: 0 6px; }
.tv-desc { flex: 1 1 100%; font-size: 11.5px; line-height: 1.6; color: var(--ink2); }   /* 不用 --muted：选中行背景会变深一档，4.33:1 不达标 */
.tv-num { margin-left: auto; font-size: 12px; color: var(--accent2); white-space: nowrap; }
.tv-era.on, .tv-dy.on { border-color: var(--accent); border-left-color: var(--c, var(--accent)); background: var(--surface2); }
/* 当前卡片落在哪个时代/政权：光靠背景色差看不出，直接挂个徽标 */
.tv-era.on .tv-name::after, .tv-dy.on .tv-name::after {
  content: '当前'; vertical-align: 2px; margin-left: 8px; padding: 0 6px; letter-spacing: 0;
  font: 400 10.5px var(--sans); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
}
.tv-dy.misc { border-left-color: var(--muted); }
.tv-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.tv-chk { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); cursor: pointer; }
.tv-evs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tv-ev {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; min-height: 46px;
  background: var(--surface); border: 1px solid var(--surface-line); border-radius: 9px;
  padding: 10px 12px; cursor: pointer; color: var(--ink);
}
/* 高亮靠金边 + 左侧实条已经够明显；底色不能换成 --surface2，否则行内小字会被压暗到 4.5 以下 */
.tv-ev.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.tv-ev-y { flex: 0 0 64px; font: 700 13px/1.6 var(--serif); color: var(--accent); }
.tv-ev-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tv-ev-t { font-size: 14px; line-height: 1.55; }
.tv-ev-m { display: flex; flex-wrap: wrap; gap: 4px 7px; font-size: 11.5px; color: var(--muted); }
.tv-ev-m .mk { font-style: normal; border: 1px solid var(--surface-line); border-radius: 999px; padding: 0 6px; color: var(--muted); }
.tv-ev-m .mk.done { color: var(--ok-ink); border-color: var(--ok-line); }
.tv-ev-m .mk.fav { color: var(--accent); border-color: var(--accent); }

/* 窄屏（出现底部 tabs 的断点）默认走竖版，横版 SVG 收起来；.tl-force-svg 可手动切回 */
@media (max-width: 999px) {
  body:not(.tl-force-svg) .tlwrap,
  body:not(.tl-force-svg) .tl-tools,
  body:not(.tl-force-svg) .legend,
  body:not(.tl-force-svg) .tl-tip { display: none; }
  /* 树也得跟着条件走，否则切到横版后两套 UI 会叠在一起 */
  body:not(.tl-force-svg) .tl-tree { display: block; }
}
/* 宽屏默认还是横版，.tl-force-tree 时允许按竖版预览 */
@media (min-width: 1000px) {
  body.tl-force-tree .tlwrap,
  body.tl-force-tree .tl-tools,
  body.tl-force-tree .legend,
  body.tl-force-tree .tl-tip { display: none; }
  body.tl-force-tree .tl-tree { display: block; }
}

/* ---------------- 图谱 ---------------- */
.gr-scroll { overflow: auto; max-height: 70vh; background: var(--host-bg); border: 1px solid var(--host-line); border-radius: 9px; }
.gr-svg { display: block; color: var(--ink); }
.gr-svg text { font: 11px var(--sans); fill: var(--ink2); pointer-events: none; }
.gr-svg .gr-year { fill: var(--tick); font-size: 10px; }
.gr-edge { fill: none; stroke: var(--edge); stroke-width: 1.3; opacity: .75; }
.gr-edge.back { stroke: var(--edge-back); stroke-dasharray: 4 3; }
.gr-edge.llm { stroke: var(--accent2); }
.gr-edge.spoke { stroke: var(--edge-spoke); stroke-width: 1; }
.gr-edge.spoke2 { stroke: var(--edge-spoke2); stroke-width: 1; }
.gr-edge.co { stroke: var(--edge-co); stroke-width: .7; opacity: .5; }
.gr-node { cursor: pointer; }
.gr-node rect { stroke: var(--node-stroke); stroke-width: 1; }
.gr-node:hover rect { filter: brightness(1.3); stroke: var(--accent); }
.gr-node.focus rect { stroke: var(--band-ink); stroke-width: 1.8; }
.gr-svg .gr-n-year { fill: var(--band-ink); font-size: 10px; }
.gr-svg .gr-n-title { fill: var(--band-ink); font: 600 12px var(--serif); }
.gr-svg .gr-c-year { fill: var(--band-ink); font: 700 12px var(--serif); }
.gr-svg .gr-c-title { fill: var(--band-ink); font: 700 14px var(--serif); }
.gr-svg .gr-c-sub { fill: var(--band-ink); opacity: .92; font-size: 10px; }
.gr-p-c { fill: var(--person-bg); stroke: var(--person-line); stroke-width: 1; }
.gr-person:hover .gr-p-c { fill: var(--person-bg-hi); stroke: var(--accent2); }
.gr-svg .gr-p-t { fill: var(--person-ink); font-size: 10.5px; }
.gr-svg .gr-edge-label { fill: var(--edge-label); font-size: 10px; text-anchor: middle; }
.gr-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.gr-note { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------------- 说明 / 杂项 ---------------- */
.about { font-size: 13px; color: var(--ink2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
.about summary { cursor: pointer; font: 600 14px var(--serif); color: var(--accent); }
.about p { margin: .5em 0; }
.foot-note { display: flex; flex-direction: column; gap: 8px; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--pop-bg); border: 1px solid var(--pop-line); color: var(--ink); padding: 9px 16px;
  border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: .18s; z-index: 90; box-shadow: var(--shadow);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.help-mask { position: fixed; inset: 0; background: var(--mask); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 18px; }
.help-card { background: var(--pop-bg); border: 1px solid var(--pop-line); border-radius: 14px; padding: 18px 20px; max-width: 560px; box-shadow: var(--shadow); }
.help-card h3 { margin: 0 0 8px; font: 700 18px var(--serif); color: var(--accent); }
.help-card ul { padding-left: 1.2em; margin: 0; font-size: 13.5px; line-height: 1.9; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ==================== 移动端（<1000px）：单栏 + 底部 tab ==================== */
@media (max-width: 999px) {
  .layout { display: block; padding: 12px 12px 84px; }
  .col > .pane { display: none; }
  .col > .pane.active { display: block; }
  .col-a, .col-b { gap: 12px; }
  .tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--tab-bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .tabs button { flex: 1; background: none; border: 0; padding: 11px 4px 9px; color: var(--muted); font-size: 13px; cursor: pointer; }
  .tabs button.on { color: var(--accent); font-weight: 700; box-shadow: inset 0 2px 0 var(--accent); }
  .brand .sub { display: none; }
  .top-right { width: 100%; margin-left: 0; justify-content: flex-start; }
  .modelbox select { max-width: 45vw; }
  .c-title { font-size: 19px; }
  .c-year { font-size: 22px; }
  .c-brief { font-size: 14px; line-height: 1.9; }
  .d-row { grid-template-columns: 1fr; gap: 2px; }
  .d-k { padding-top: 0; }
  .asklog { max-height: none; }
  .gr-scroll { max-height: none; }
  .filters { padding: 8px 12px 2px; }
  .btn { padding: 8px 12px; }
}
@media (min-width: 1000px) {
  .col > .pane { display: block !important; }   /* 桌面双栏：tab 只做移动端用，全部常显 */
}
/* ==================== 皮肤（配色方案）====================
   :root 是「玄墨 ink」基准值，其余皮肤各自覆盖一整套颜色令牌。
   必须整套覆盖：漏一个令牌就会留下上一套的残影（浅底浅字、深底深字都是这么产生的），
   _check_skins.js 会逐套核对令牌完整性与 WCAG 对比度。
   「跟随系统」由 app.js 解析成具体皮肤名再写 data-skin，本文件不再依赖 prefers-color-scheme。 */

/* -------- 宣纸 paper：暖米底 + 墨字（原浅色主题）-------- */
:root[data-skin="paper"] {
  --bg: #f4efe6; --bg2: #ece5d8;
  --panel: #fffcf5; --panel2: #f4ecdd; --line: #cfc3aa;
  --ink: #211c26; --ink2: #4a4350; --muted: #6b6256;
  --accent: #7d5110; --accent2: #2b6391;
  --ok: #276a45; --warn: #9a5a15; --err: #a83a3a;
  --card-bg: linear-gradient(160deg, #fffdf7, #f6efe0 60%);
  --card-ink: #2a2430;
  --surface: #f2ead9; --surface-line: #d5c8ae; --surface2: #e6dac2;
  --host-bg: #fffdf7; --host-line: #d5c8ae;
  --pop-bg: #fffcf5; --pop-head: #f6efe0; --pop-line: #d5c8ae;
  --msg-user: #e3ebf8; --msg-user-line: #b9c9e4;
  --tab-bg: #f6efe0;
  --term-ink: #1c4a72;
  --quote-bg: #7d51100f; --quote-line: #a5783a; --quote-ink: #453316;
  --ok-bg: #dff0e4; --ok-line: #7fb896; --ok-ink: #226a44;
  --err-bg: #f8e2e2; --warn-ink: #8f2f2f;
  --band-ink: #fffdf7; --band-halo: #241f2e99; --ruler-bar: #3a2f22;
  --tick: #6a6178; --lane-tag: #6a6178; --dot-fill: #8a5a12d9;
  --edge-label: #4a3a7a;
  --tag-bg: #e6dcf0; --tag-line: #bda9cc; --tag-ink: #3a2b4a;
  --scroll: #cbbda2;
  --danger-ink: #a83a3a; --code-bg: #241f2e14;
  --person-bg: #dce6f5; --person-bg-hi: #c3d6ef; --person-line: #4a6b93; --person-ink: #14304f;
  --shadow: 0 6px 20px rgba(90, 70, 40, .16);
  --bg-glow: #fffaf0; --bar-bg: linear-gradient(#fffaf0, #f2eadd);
  --tag-clear-bg: #f6dede; --tag-clear-line: #d9b0b0;
  --btn-primary-a: #c99539; --btn-primary-b: #a8762a; --btn-primary-line: #8a5f14; --btn-primary-ink: #150f06;
  --btn-on-bg: #ded0ea; --btn-on-ink: #2a2140;
  --fav-bg: #7d511018;
  --edge: #8a7fa0; --edge-back: #8a5a86; --edge-spoke: #7a7290; --edge-spoke2: #4a7080; --edge-co: #b8ae9e;
  --node-stroke: #241f2e33;
  --mask: #241f2ea6;
}

/* -------- 青瓷 qingci：冷青绿浅底 -------- */
:root[data-skin="qingci"] {
  --bg: #eaf0ee; --bg2: #dfe8e5;
  --panel: #fbfdfc; --panel2: #eef4f2; --line: #b9ccc6;
  --ink: #14231f; --ink2: #3c534c; --muted: #526961;
  --accent: #0e6a5c; --accent2: #1d5c8a;
  --ok: #1f7a4d; --warn: #8a5410; --err: #a3302c;
  --card-bg: linear-gradient(160deg, #fdfefc, #eef5f2 60%);
  --card-ink: #16251f;
  --surface: #e6efeb; --surface-line: #c2d5cf; --surface2: #d6e4df;
  --host-bg: #fcfdfc; --host-line: #c2d5cf;
  --pop-bg: #fbfdfc; --pop-head: #eef4f2; --pop-line: #c2d5cf;
  --msg-user: #dfeaf5; --msg-user-line: #b0c8dd;
  --tab-bg: #eef4f2;
  --term-ink: #0e4f78;
  --quote-bg: #0e6a5c12; --quote-line: #4a8f80; --quote-ink: #1c3a33;
  --ok-bg: #d9f0e2; --ok-line: #74b493; --ok-ink: #17603c;
  --err-bg: #f8e4e2; --warn-ink: #7a3c10;
  --band-ink: #fbfdfc; --band-halo: #14231f99; --ruler-bar: #1e3a33;
  --tick: #4a625c; --lane-tag: #4a625c; --dot-fill: #0e6a5cd9;
  --edge-label: #2a5a78;
  --tag-bg: #d8eae4; --tag-line: #a4c6bc; --tag-ink: #14403a;
  --scroll: #a8c2ba;
  --danger-ink: #a3302c; --code-bg: #14231f14;
  --person-bg: #d8e6f2; --person-bg-hi: #c2d8ea; --person-line: #3f6a8c; --person-ink: #102c44;
  --shadow: 0 6px 20px rgba(30, 70, 60, .14);
  --bg-glow: #f7fcfa; --bar-bg: linear-gradient(#f7fcfa, #e6efec);
  --tag-clear-bg: #f7e2e0; --tag-clear-line: #d8aca8;
  --btn-primary-a: #4fb39a; --btn-primary-b: #379a82; --btn-primary-line: #14604f; --btn-primary-ink: #06241f;
  --btn-on-bg: #cfe6df; --btn-on-ink: #0e3a33;
  --fav-bg: #0e6a5c18;
  --edge: #6f8f88; --edge-back: #8a6a8f; --edge-spoke: #5f7d76; --edge-spoke2: #4a7286; --edge-co: #a8c2ba;
  --node-stroke: #14231f33;
  --mask: #10221fa6;
}

/* -------- 夜航 yehang：深蓝底 + 淡青字 -------- */
:root[data-skin="yehang"] {
  --bg: #0d1620; --bg2: #131f2b;
  --panel: #17242f; --panel2: #1e2d3a; --line: #2f4354;
  --ink: #e6f0f7; --ink2: #b8cbda; --muted: #93aabc;
  --accent: #f0b445; --accent2: #6fc0ea;
  --ok: #5cb87f; --warn: #e09a55; --err: #ea7f7f;
  --card-bg: linear-gradient(160deg, #1a2836, #12202b 60%);
  --card-ink: #e8f2f8;
  --surface: #152230; --surface-line: #2c4256; --surface2: #1d2f3f;
  --host-bg: #101c27; --host-line: #263a4c;
  --pop-bg: #17242f; --pop-head: #1c2b38; --pop-line: #3a566b;
  --msg-user: #1f3550; --msg-user-line: #33536f;
  --tab-bg: #121d28;
  --term-ink: #d5e9fa;
  --quote-bg: #f0b44514; --quote-line: #8a6a2f; --quote-ink: #f5e3c0;
  --ok-bg: #16352a; --ok-line: #3c7a58; --ok-ink: #a4e0bf;
  --err-bg: #3a1f22; --warn-ink: #f5d0c8;
  --band-ink: #ffffff; --band-halo: #00000066; --ruler-bar: #ffffff;
  --tick: #a2b8c8; --lane-tag: #93aabc; --dot-fill: #ffffff55;
  --edge-label: #a8d0f0;
  --tag-bg: #213a50; --tag-line: #37566f; --tag-ink: #d8eaf8;
  --scroll: #2c4256;
  --danger-ink: #e8a8a8; --code-bg: #00000066;
  --person-bg: #24405c; --person-bg-hi: #2f5375; --person-line: #4d789c; --person-ink: #eaf4ff;
  --shadow: 0 6px 24px rgba(0, 20, 35, .5);
  --bg-glow: #1b3040; --bar-bg: linear-gradient(#16232f, #101a24);
  --tag-clear-bg: #3d2428; --tag-clear-line: #6a4048;
  --btn-primary-a: #d99a35; --btn-primary-b: #b57a20; --btn-primary-line: #e8b455; --btn-primary-ink: #1e1404;
  --btn-on-bg: #2b4a6b; --btn-on-ink: #eaf4ff;
  --fav-bg: #f0b44518;
  --edge: #6f8ba4; --edge-back: #b07fa8; --edge-spoke: #5a7a94; --edge-spoke2: #4d8a94; --edge-co: #3a5568;
  --node-stroke: #ffffff30;
  --mask: #000814a6;
}

/* -------- 旧牍 jiandu：暖棕黑底 + 米黄字 -------- */
:root[data-skin="jiandu"] {
  --bg: #191310; --bg2: #211a15;
  --panel: #241c16; --panel2: #2d241c; --line: #453628;
  --ink: #f2e6d2; --ink2: #cbb79c; --muted: #a8916f;
  --accent: #e0a94e; --accent2: #86b8d8;
  --ok: #6fb585; --warn: #dd9a52; --err: #e08078;
  --card-bg: linear-gradient(160deg, #2a2118, #1f1810 60%);
  --card-ink: #f4e8d4;
  --surface: #221a13; --surface-line: #4a3a28; --surface2: #2f261c;
  --host-bg: #1c1510; --host-line: #3f3122;
  --pop-bg: #241c16; --pop-head: #2b221a; --pop-line: #55402a;
  --msg-user: #3a2f22; --msg-user-line: #5c4a33;
  --tab-bg: #1f1811;
  --term-ink: #f0e2cc;
  --quote-bg: #e0a94e14; --quote-line: #7a5a2a; --quote-ink: #f5e6c8;
  --ok-bg: #1f3323; --ok-line: #46704c; --ok-ink: #b0e0b8;
  --err-bg: #3a1e1a; --warn-ink: #f5d4cc;
  --band-ink: #fffaf0; --band-halo: #00000066; --ruler-bar: #fffaf0;
  --tick: #c0a888; --lane-tag: #a8916f; --dot-fill: #ffffff55;
  --edge-label: #e0c8a0;
  --tag-bg: #3a2e1e; --tag-line: #57452c; --tag-ink: #f0e0c4;
  --scroll: #4a3a28;
  --danger-ink: #e8aca6; --code-bg: #00000066;
  --person-bg: #4a3a24; --person-bg-hi: #5c4a2e; --person-line: #8a6c40; --person-ink: #fdf2dd;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --bg-glow: #2e2318; --bar-bg: linear-gradient(#2a2018, #1c1510);
  --tag-clear-bg: #40241e; --tag-clear-line: #6a3f34;
  --btn-primary-a: #e0a94e; --btn-primary-b: #b57f22; --btn-primary-line: #f0c060; --btn-primary-ink: #241802;
  --btn-on-bg: #3a3f5c; --btn-on-ink: #f2e6d2;
  --fav-bg: #e0a94e18;
  --edge: #8a7458; --edge-back: #b08aa0; --edge-spoke: #7a6448; --edge-spoke2: #5a7a86; --edge-co: #4a3a28;
  --node-stroke: #ffffff30;
  --mask: #0a0604a6;
}

/* -------- 金石 jinshi：纯黑底 + 纯白字，对比度拉满（户外强光 / 弱视友好）-------- */
:root[data-skin="jinshi"] {
  --bg: #000000; --bg2: #0a0a0a;
  --panel: #0c0c0c; --panel2: #161616; --line: #4a4a4a;
  --ink: #ffffff; --ink2: #f0f0f0; --muted: #dcdcdc;
  --accent: #ffd54a; --accent2: #86d7ff;
  --ok: #6fe08f; --warn: #ffb454; --err: #ff8f8f;
  --card-bg: linear-gradient(160deg, #111111, #000000 60%);
  --card-ink: #ffffff;
  --surface: #131313; --surface-line: #5a5a5a; --surface2: #1f1f1f;
  --host-bg: #000000; --host-line: #5a5a5a;
  --pop-bg: #0d0d0d; --pop-head: #191919; --pop-line: #6a6a6a;
  --msg-user: #14202c; --msg-user-line: #3a5a78;
  --tab-bg: #000000;
  --term-ink: #bfe6ff;
  --quote-bg: #ffd54a14; --quote-line: #a08020; --quote-ink: #fff2cc;
  --ok-bg: #0d2415; --ok-line: #4a8a5c; --ok-ink: #b6f0c6;
  --err-bg: #2a0f0f; --warn-ink: #ffd9c8;
  --band-ink: #ffffff; --band-halo: #000000cc; --ruler-bar: #ffffff;
  --tick: #e0e0e0; --lane-tag: #d0d0d0; --dot-fill: #ffffff66;
  --edge-label: #d8c4ff;
  --tag-bg: #1f1a08; --tag-line: #6a5a20; --tag-ink: #ffe9a8;
  --scroll: #4a4a4a;
  --danger-ink: #ffb3b3; --code-bg: #000000aa;
  --person-bg: #10263a; --person-bg-hi: #1a3a55; --person-line: #4a8ab5; --person-ink: #eaf6ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, .7);
  --bg-glow: #1c1c1c; --bar-bg: linear-gradient(#0e0e0e, #000000);
  --tag-clear-bg: #2e1010; --tag-clear-line: #7a3030;
  --btn-primary-a: #ffd54a; --btn-primary-b: #d9a91f; --btn-primary-line: #fff0a0; --btn-primary-ink: #1a1200;
  --btn-on-bg: #16324a; --btn-on-ink: #ffffff;
  --fav-bg: #ffd54a20;
  --edge: #a8a8a8; --edge-back: #d090c0; --edge-spoke: #8f8f8f; --edge-spoke2: #6ab0c8; --edge-co: #6a6a6a;
  --node-stroke: #ffffff66;
  --mask: #000000d9;
}

/* ---------------- 皮肤选择器 ---------------- */
.skinbox { position: relative; display: inline-flex; }
.skin-btn { display: inline-flex; align-items: center; gap: 7px; }
.skin-cap { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.skin-dots { display: inline-flex; gap: 3px; }
/* 小点带一圈边框：纯黑/纯白皮肤的色样会和面板同色，没边就看不出有几粒 */
.skin-dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid var(--line); box-sizing: border-box; }
.skin-menu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 65;
  background: var(--pop-bg); border: 1px solid var(--pop-line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 7px; width: min(300px, calc(100vw - 24px));
  max-height: 70vh; overflow: auto; display: none;
}
.skin-menu.on { display: block; }
/* 窄屏顶栏会折行，皮肤按钮可能落到行首（贴着屏幕左边）；这时还按 right:0 往左展开，
   300px 宽的菜单就会整块漏出屏幕外看不见。改成挂在顶栏下方靠左——.topbar 是 sticky，
   本身就是绝对定位后代的包含块，所以 .skinbox 撤掉 relative 后菜单会改以顶栏为基准。
   断点跟着布局的单栏阈值走，不凭手感另设一个。 */
@media (max-width: 999px) {
  .skinbox { position: static; }
  .skin-menu { right: auto; left: 12px; top: calc(100% + 6px); }
}
.skin-hd { font: 600 11.5px var(--serif); letter-spacing: .14em; color: var(--muted); padding: 5px 8px 7px; }
.skin-hd.sep { margin-top: 4px; border-top: 1px solid var(--pop-line); padding-top: 9px; }
.skin-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 9px;
  padding: 7px 8px; cursor: pointer; color: var(--ink); min-height: 46px;
}
.skin-item:hover { background: var(--surface2); }
.skin-item.on { border-color: var(--accent); background: var(--surface); }
.skin-prev { display: flex; flex: 0 0 auto; border-radius: 5px; overflow: hidden; border: 1px solid var(--pop-line); }
.skin-prev i { width: 14px; height: 24px; display: block; }
.skin-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.skin-name { font: 600 13.5px var(--serif); color: var(--ink); }
.skin-tip { font-size: 11px; color: var(--muted); line-height: 1.5; }
/* 打勾只给当前选中项：每行都挂个 ✓ 反而看不出选的是哪套 */
.skin-item .tick { margin-left: auto; color: var(--accent); font-size: 13px; flex: 0 0 auto; visibility: hidden; }
.skin-item.on .tick { visibility: visible; }