/* 工作台统一的样子（10-03 晚 UI设计 Ark，Jamie：「整体再改进一下内容工作台的界面设计……要美观大方简洁，不要一堆东西挤在一起，交互要合理，要站在编辑者的角度考虑」）
   每个页面最后引这一份（在各页自己的 CSS 和 shell.css 之后），只管共同的东西：字号层级、页头、搜索、按钮、卡片、行、分组标题、弹窗。
   页面自己的布局（剧本、战斗卡、生活表格……）还在各自的 CSS 里。

   口径：
   · 一页只有一个主角：页头一行标题 + 一句说明，下面就是内容；状态、文件名这类给开发看的字不常驻。
   · 两种排法：要看图、要读一段话的用卡片；一眼扫名字和一个值的（招牌、区域、调参）用行。
   · 小标签只用来提醒（有问题、制作状态），不给每张都一样的东西贴标签。
   · 颜色：纸白底、暖灰线、深墨字，唯一的强调色是棕（选中 / 主要按钮）；提醒用琥珀。 */

:root {
  --wb-bg: #f4f2ed;
  --wb-paper: #fffefb;
  --wb-line: #e4e0d7;
  --wb-line-2: #ece9e2;
  --wb-ink: #2f2d29;
  --wb-ink-2: #55514a;
  --wb-muted: #8c877d;
  --wb-faint: #b3ada2;
  --wb-accent: #8d6444;
  --wb-accent-bg: #f3ebe2;
  --wb-warn: #a8702c;
  --wb-warn-bg: #f7ecdc;
  --wb-radius: 10px;
  --wb-shadow: 0 1px 2px #3c34240d, 0 6px 18px #3c34240a;
  --paper: var(--wb-paper);
  --line: var(--wb-line);
  --muted: var(--wb-muted);
  --accent: var(--wb-accent);
}
html.wb, html.wb body { background: var(--wb-bg); color: var(--wb-ink); }
html.wb body { font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ---- 页面主体和页头：所有页一样的边距、一样的标题 ---- */
html.wb body > main { padding: 36px 48px 120px; max-width: calc(1440px + var(--wb-side)); }
html.wb main > header, html.wb .page-head, html.wb header.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 22px; }
html.wb main h1 { font-size: 26px; font-weight: 600; letter-spacing: 1px; line-height: 1.3; margin: 0 0 6px; color: var(--wb-ink); }
html.wb main header .lead, html.wb main header p.lead, html.wb #description { font-size: 13px; color: var(--wb-muted); margin: 0; }
html.wb main header .eyebrow { display: none; }
html.wb #sync { font-size: 11px; color: var(--wb-faint); white-space: nowrap; padding-top: 10px; }
html.wb #sync[hidden] { display: none; }

/* ---- 按钮、输入（只管图鉴页和弹窗；各专门页的按钮、页签在自己的 CSS 里） ---- */
:is(#detail, #compare, #diff, #coverage, #plan, .more-pop, #empty) button { border-radius: 8px; border: 1px solid var(--wb-line); background: var(--wb-paper); color: var(--wb-ink-2); padding: 7px 14px; font-size: 13px; line-height: 1.5; }
:is(#detail, #compare, #diff, #coverage, #plan, .more-pop, #empty) button:hover { background: #f1ede5; border-color: #d8d2c6; }
:is(#detail, #diff, #plan) button.primary { background: var(--wb-accent); border-color: var(--wb-accent); color: #fffaf3; }
:is(#detail, #diff, #plan) button.primary:hover { background: #7a5538; }
:is(#detail, #compare) button.ghost { background: transparent; }
:is(#detail, #diff, #plan) :is(input, select, textarea) { border: 1px solid var(--wb-line); border-radius: 8px; background: var(--wb-paper); }
html.wb :is(input, select, textarea):focus { border-color: #c9b29a; outline: none; box-shadow: 0 0 0 3px #8d64441a; }
html.wb #detail .detail-top button, html.wb .detail-top button { border: 0; background: none; font-size: 22px; color: var(--wb-muted); padding: 0 6px; }

/* ---- 搜索 + 「更多」 ---- */
html.wb main > .toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; flex-wrap: wrap; }
html.wb main > .toolbar .search, html.wb .bar .search { flex: 0 1 380px; height: 38px; border-radius: 9px; padding-left: 12px; background: var(--wb-paper); border: 1px solid var(--wb-line); display: flex; align-items: center; gap: 6px; }
html.wb .search span { font-size: 17px; color: var(--wb-faint); }
html.wb .search input { border: 0; background: none; box-shadow: none; padding: 6px 8px 6px 0; height: 36px; }
html.wb .search input:focus { box-shadow: none; }
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; height: 38px; display: flex; align-items: center; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; color: var(--wb-muted); font-size: 13px; user-select: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.more-menu > summary:hover, .more-menu[open] > summary { border-color: var(--wb-line); background: var(--wb-paper); color: var(--wb-ink-2); }
.more-pop { position: absolute; z-index: 20; top: 44px; left: 0; width: 280px; padding: 14px; display: grid; gap: 12px; background: var(--wb-paper); border: 1px solid var(--wb-line); border-radius: 12px; box-shadow: 0 12px 40px #2b241a1f; }
.more-pop label { display: grid; gap: 5px; font-size: 12px; color: var(--wb-muted); }
.more-pop select { width: 100%; padding: 7px 10px; color: var(--wb-ink); }
.more-pop .tool-btn { text-align: left; }

/* ---- 分组标题：小字 + 数量，下面一根细线 ---- */
#grid .group { margin: 0 0 34px; }
.group-title { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; color: var(--wb-ink-2); letter-spacing: .5px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--wb-line-2); }
.group-title span { font-size: 11px; font-weight: 400; color: var(--wb-faint); }

/* ---- 图鉴：卡片 ---- */
html.wb main > .result-line { margin: -10px 0 14px; font-size: 12px; color: var(--wb-faint); }
html.wb main > .result-line[hidden] { display: none; }
html.wb #grid.grid { display: block; }
#grid .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
#grid .card { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-paper); box-shadow: none; overflow: hidden; transition: border-color .12s, box-shadow .12s; transform: none; }
#grid .card:hover { transform: none; border-color: #d6cfc2; box-shadow: var(--wb-shadow); }
#grid .card:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 2px; }
#grid .card .card-copy { padding: 0; min-width: 0; flex: 1; }
#grid .card .card-copy h3 { display: block; min-height: 0; -webkit-line-clamp: unset; font-size: 14px; font-weight: 600; line-height: 1.45; margin: 1px 0 3px; color: var(--wb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#grid .card .subtitle { height: auto; max-height: 3em; font-size: 12px; line-height: 1.5; color: var(--wb-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#grid .card .badges { margin-top: 8px; }
/* 有图的：左边一块图（物品 = 游戏里的图标，黑底；角色 = 立绘，上下排） */
#grid .card .visual { height: auto; background: none; }
#grid .card.has-img { flex-direction: column; padding: 0; gap: 0; }
#grid .card.has-img .visual { width: 100%; height: 230px; background: #e6e2d9; display: flex; align-items: center; justify-content: center; }
#grid .card.has-img .visual img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
#grid .card.has-img .card-copy { padding: 12px 16px 14px; width: 100%; }
#grid .card.has-art .visual.art-tile { flex: none; width: 60px; height: 60px; }

/* 物品图标：游戏里背包物品卡的样子——深色底、冷白线稿、一块蓝点色 */
.art { position: relative; display: block; width: 60px; height: 60px; border-radius: 9px; background: #1d2027; box-shadow: inset 0 0 0 1px #ffffff0d; }
.art i { position: absolute; inset: 7px; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.art .ln { background: #e9edf3; }
.art .ac { background: #5cc4f5; }
.art.big { width: 240px; height: 240px; border-radius: 14px; }
.art.big i { inset: 24px; }
#detail .large-preview.art-stage, #compare .large-preview.art-stage { height: auto; min-height: 280px; background: #e9e6df; display: flex; align-items: center; justify-content: center; }

/* ---- 行：名字 · 说明 · 值，一眼扫过去 ---- */
#grid .rows, #overview .rows { max-width: 980px; background: var(--wb-paper); border: 1px solid var(--wb-line); border-radius: var(--wb-radius); overflow: hidden; }
#grid .row, #overview .row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 10px 16px; border: 0; border-radius: 0; border-bottom: 1px solid var(--wb-line-2); background: none; font-size: 13px; color: var(--wb-ink); }
#grid .row:last-child, #overview .row:last-child { border-bottom: 0; }
#grid button.row:hover { background: #faf7f1; }
#grid .row .r-name, #overview .row .r-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#grid .row .r-note, #overview .row .r-note { color: var(--wb-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#grid .row .r-val, #overview .row .r-val { color: var(--wb-ink-2); font-variant-numeric: tabular-nums; white-space: pre-line; text-align: right; max-width: 360px; }
#grid .row .badges { grid-column: 1 / -1; margin: 0; }

/* ---- 小标签：只用来提醒 ---- */
#grid .badges, #detail .badges { display: flex; flex-wrap: wrap; gap: 6px; }
#grid .badge, #detail .badge { font-size: 11px; line-height: 1.4; padding: 2px 8px; border-radius: 999px; background: #efece5; color: var(--wb-ink-2); }
#grid .badge.issue, #detail .badge.issue { background: var(--wb-warn-bg); color: var(--wb-warn); }

/* ---- 总览：三组入口 + 最近保存 ---- */
html.wb .overview { display: block; margin: 0; }
html.wb .overview[hidden] { display: none; }
.ov-group { margin: 0 0 30px; }
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
html.wb .ov-tile { position: relative; display: grid; gap: 4px; padding: 16px 18px 15px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-paper); text-decoration: none; color: var(--wb-ink); transition: border-color .12s, box-shadow .12s; min-height: 0; }
html.wb .ov-tile:hover { border-color: #d6cfc2; box-shadow: var(--wb-shadow); }
html.wb .ov-tile b { font-size: 15px; font-weight: 600; }
html.wb .ov-tile .ov-n { position: absolute; right: 16px; top: 17px; font-size: 12px; color: var(--wb-faint); }
html.wb .ov-tile small { font-size: 12px; color: var(--wb-muted); line-height: 1.5; }
html.wb .ov-tile .ov-g { display: none; }
#overview .row.static { cursor: default; }

/* ---- 弹窗（详情、确认保存……） ---- */
html.wb dialog { border: 1px solid var(--wb-line); border-radius: 14px; box-shadow: 0 24px 80px #1d18122e; background: var(--wb-paper); }
html.wb dialog::backdrop { background: #221e1866; }
html.wb #detail { width: min(860px, 94vw); }
html.wb .detail-top { padding: 12px 22px; border-bottom: 1px solid var(--wb-line-2); }
html.wb .detail-top > span { font-size: 12px; color: var(--wb-faint); }
html.wb .detail-top button { border: 0; background: none; font-size: 22px; color: var(--wb-muted); padding: 0 6px; }
html.wb #detail-body { padding: 22px 28px 26px; }
.detail-head { margin: 0 0 18px; }
.detail-head h2 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.detail-head .muted { font-size: 13px; margin: 0 0 8px; color: var(--wb-muted); }
#detail .detail-layout { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: start; }
#detail .detail-layout.no-preview { grid-template-columns: 1fr; }
#detail .detail-layout .large-preview { height: 300px; border-radius: 12px; }
#detail .facts { margin: 0 0 6px; border-top: 1px solid var(--wb-line-2); }
#detail .fact { font-size: 13px; border-bottom: 1px solid var(--wb-line-2); }
#detail .fact span { font-size: 11px; color: var(--wb-faint); }
#detail .readable h3 { font-size: 13px; color: var(--wb-ink-2); margin: 14px 0 6px; }
#detail .section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--wb-line-2); }
#detail .section h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
#detail .section.edit { background: #faf8f3; border: 1px solid var(--wb-line-2); border-radius: 12px; padding: 16px 18px 6px; }
#detail .fields { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
#detail .section.edit .fields + h3 { margin-top: 20px; }
#detail .jump-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--wb-paper); border: 1px solid var(--wb-line-2); font-size: 13px; color: var(--wb-ink-2); }
#detail .jump-note .jump { flex: none; color: var(--wb-accent); text-decoration: none; font-weight: 600; }
#detail .jump-note .jump:hover { text-decoration: underline; }
#detail .fields label { gap: 5px; font-size: 13px; }
#detail .fields label > span { font-size: 12px; color: var(--wb-muted); }
#detail .fields label.wide { grid-column: 1 / -1; }
#detail .fields input { padding: 8px 11px; }
#detail .actions { align-items: center; gap: 10px; margin-top: 14px; }
#detail .actions .muted { font-size: 12px; }
#detail details.technical { margin-top: 14px; border-top: 1px solid var(--wb-line-2); padding-top: 12px; font-size: 13px; }
#detail details.technical > summary { cursor: pointer; color: var(--wb-muted); font-size: 13px; }
#detail details.technical pre { max-height: 260px; overflow: auto; font-size: 11px; background: #f6f4ef; border-radius: 8px; padding: 10px 12px; }
#detail .references { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--wb-ink-2); }
#detail .references button { padding: 3px 10px; font-size: 12px; }
.detail-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
.detail-foot button { font-size: 12px; color: var(--wb-muted); }

@media (max-width: 900px) {
  html.wb body > main { padding: 24px 18px 100px; }
  #detail .detail-layout { grid-template-columns: 1fr; }
  #grid .row, #overview .row { grid-template-columns: 1fr auto; }
  html.wb #grid .row .r-note, #overview .row .r-note { display: none; }
}

/* ---- 资源与生活：分区放在左边一列（10-03 晚） ---- */
html.wb main:has(#content.life):has(#profile) { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 32px; align-items: start; }
html.wb main:has(#content.life):has(#profile) > header, html.wb main:has(#content.life):has(#profile) > #profile { grid-column: 1 / -1; }
html.wb main:has(#content.life):has(#profile) > .bar { grid-column: 1; position: sticky; top: 20px; display: block; margin: 0; max-height: calc(100vh - 40px); overflow-y: auto; }
html.wb main:has(#content.life):has(#profile) > #content { grid-column: 2; min-width: 0; }
html.wb main:has(#content.life):has(#profile) > .bar .search { width: 100%; margin: 0 0 14px; height: 36px; }
#tabs.pills { display: block; }
#tabs .nav-g { display: grid; gap: 1px; margin: 0 0 14px; }
#tabs .nav-l { font-size: 11px; color: var(--wb-faint); letter-spacing: 2px; padding: 0 10px 4px; }
#tabs.pills button { display: block; width: 100%; text-align: left; border: 0; border-radius: 7px; background: none; padding: 6px 10px; font-size: 13px; color: var(--wb-ink-2); }
#tabs.pills button:hover { background: #ece8df; }
#tabs.pills button.on { background: var(--wb-paper); color: var(--wb-accent); font-weight: 600; box-shadow: 0 1px 2px #3c342412; }
#tabs.pills button.off { color: var(--wb-faint); border: 0; }
html.wb main:has(#content.life):has(#profile) > .bar .check { display: flex; gap: 6px; font-size: 12px; color: var(--wb-muted); padding: 0 10px; }
html.wb main:has(#content.life):has(#profile) #content > h2:first-child, html.wb main:has(#content.life):has(#profile) #content > .sec-head:first-child { margin-top: 0; }

/* 各专门页右上角的「几点读取 · 文件名」：给开发看的，平时收着，鼠标移到页头才显示 */
html.wb main > header #sync, html.wb main > header.top .top-right #sync { opacity: 0; transition: opacity .2s; }
html.wb main > header:hover #sync { opacity: 1; }

/* 时间与光照：接电闪一张小表 */
.flick-title { font-size: 13px; font-weight: 600; color: var(--wb-ink-2); margin: 18px 0 8px; }
table.vals.flick { max-width: 520px; }
table.vals.flick th { font-size: 12px; font-weight: 400; color: var(--wb-muted); text-align: left; padding: 4px 8px; }
table.vals.flick td.name { width: 70px; color: var(--wb-muted); }

/* 天气：六种天气一张对比表 */
.kinds-wrap { overflow-x: auto; }
.tod table.vals.kinds, table.vals.kinds { width: auto; }
table.vals.kinds th { font-size: 13px; font-weight: 600; color: var(--wb-ink-2); text-align: left; padding: 6px 8px; white-space: nowrap; }
.tod table.vals.kinds td.name, table.vals.kinds td.name { width: auto; min-width: 200px; max-width: 280px; }
.tod table.vals.kinds td.value, table.vals.kinds td.value { min-width: 0; width: 104px; padding: 6px 8px; }
.tod table.vals.kinds td.value input[type=number] { width: 78px; }
.tod table.vals.kinds td.value input[type=text] { width: 92px; }

/* ---------------------------------------------------------------- 文本与剧情：八大类目录（10-03 UI设计 Ark） */
main.tx { padding-bottom: 120px; }
.tx .top { margin-bottom: 18px; }
.tx .top .search { flex: 0 1 300px; }
.tx-body { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 30px; align-items: start; }
.tx-tree { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 2px 4px 20px 0; font-size: 13.5px; }
.tx-tree .t-list { display: flex; flex-direction: column; gap: 1px; }
.tx-tree .t-node.d0 + .t-node.d0 { margin-top: 2px; }
.tx-tree .t-row { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 6px 9px; border: 0; border-radius: 7px; background: none; color: var(--wb-ink); font: inherit; cursor: pointer; }
.tx-tree .t-row:hover { background: #ebe7de; }
.tx-tree .t-row.on { background: var(--wb-paper); box-shadow: var(--wb-shadow); font-weight: 600; }
.tx-tree .d0 > .t-row { font-weight: 600; }
.tx-tree .d1 > .t-row { padding-left: 21px; font-size: 13px; color: var(--wb-ink-2); }
.tx-tree .d2 > .t-row { padding-left: 33px; font-size: 12.5px; color: var(--wb-ink-2); }
.tx-tree .d1 > .t-row.on, .tx-tree .d2 > .t-row.on { color: var(--wb-ink); }
.tx-tree .t-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-tree .t-n { color: var(--wb-faint); font-size: 11px; font-weight: 400; }
.tx-tree .t-n.zero { color: #cbc5ba; }
.tx-tree .t-jump { color: var(--wb-faint); font-size: 11px; }
.tx-tree .t-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wb-accent); flex: none; }
.tx-tree .t-wait { font-size: 10.5px; font-weight: 600; color: var(--wb-warn); background: var(--wb-warn-bg); border-radius: 999px; padding: 0 6px; }
.tx-tree .t-queue { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 12px; padding: 8px 10px; border: 1px solid #ecd9bd; border-radius: 8px; background: var(--wb-warn-bg); color: var(--wb-warn); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tx-tree .t-queue.on { box-shadow: 0 0 0 2px #e9cfa8; }
.tx-tree .t-else { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--wb-line); display: flex; flex-direction: column; gap: 2px; }
.tx-tree .t-else p { margin: 0 0 4px 9px; font-size: 11px; color: var(--wb-faint); letter-spacing: 1px; }
.tx-tree .t-else a { display: flex; justify-content: space-between; padding: 5px 9px; border-radius: 6px; color: var(--wb-ink-2); text-decoration: none; font-size: 12.5px; }
.tx-tree .t-else a:hover { background: #ebe7de; }
.tx-tree .t-else a span { color: var(--wb-faint); }

.tx-pane { min-width: 0; max-width: 1120px; }
.tx .pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.tx .pane-head h2 { font-size: 22px; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.tx .pane-head .crumb { margin: 0 0 4px; font-size: 12px; color: var(--wb-faint); }
.tx .pane-head .muted { margin: 6px 0 0; font-size: 13px; max-width: 640px; line-height: 1.6; }
.tx .pane-head .rename { font-size: 11px; font-weight: 400; color: var(--wb-faint); background: none; border: 0; padding: 0; cursor: pointer; opacity: 0; transition: opacity .15s; }
.tx .pane-head:hover .rename { opacity: 1; }
.tx .pane-tools { display: flex; gap: 8px; flex: none; }
.tx .pane-tools button { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.tx .sub-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 18px; }
.tx .sub-list > .muted { font-size: 12px; margin-right: 2px; }
.tx .sub-list button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--wb-line); background: var(--wb-paper); font: inherit; font-size: 13px; cursor: pointer; }
.tx .sub-list button:hover { border-color: #cfc8bb; }
.tx .sub-list small { margin-left: 6px; color: var(--wb-faint); }
.tx #story-body:not([hidden]) { margin-top: 6px; }

.tx .group { margin-bottom: 30px; }
.tx .g-title { display: flex; align-items: baseline; gap: 8px; font-size: 15px; margin: 0 0 10px; }
.tx .g-title button { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; color: var(--wb-ink); cursor: pointer; }
.tx .g-title button:hover { color: var(--wb-accent); }
.tx .g-title small { font-size: 11px; color: var(--wb-faint); font-weight: 400; }
.tx .empty-g { margin-bottom: 18px; }
.tx .empty-g .muted { margin: -4px 0 0; font-size: 12.5px; }
.tx .view-intro { margin: 0 0 12px; font-size: 12.5px; color: var(--wb-muted); line-height: 1.6; max-width: 760px; }
.tx .empty.big { padding: 46px 30px; text-align: center; background: var(--wb-paper); border: 1px dashed var(--wb-line); border-radius: 12px; }
.tx .empty.big p { margin: 0 0 6px; }
.tx .empty.big .muted { font-size: 13px; max-width: 480px; margin: 0 auto; line-height: 1.7; }
.tx .jump-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 12px; background: var(--wb-paper); border: 1px solid var(--wb-line); margin-bottom: 18px; }
.tx .jump-card p { margin: 0; color: var(--wb-ink-2); font-size: 14px; }
.tx .jump-card.small { padding: 12px 16px; }
.tx .jump-card.small p { font-size: 13px; }
.tx .jump-card .jump { flex: none; color: var(--wb-accent); font-weight: 600; text-decoration: none; }

/* 卡片 */
.tx .card { padding: 14px 18px 14px; }
.tx .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tx .card-head h3 { font-size: 15.5px; margin: 0; display: flex; align-items: baseline; gap: 8px; }
.tx .card-head h3 small { font-size: 12px; font-weight: 400; color: var(--wb-muted); }
.tx .card-head .chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.tx .chip { background: #f1eee8; color: var(--wb-ink-2); }
.tx .chip.st-wait, .tx .chip.st-changed { background: var(--wb-warn-bg); color: var(--wb-warn); font-weight: 600; }
.tx .card-set { flex: none; font-size: 12px; padding: 3px 10px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--wb-muted); cursor: pointer; }
.tx .card:hover .card-set, .tx .card-set:focus-visible { border-color: var(--wb-line); background: var(--wb-paper); }
.tx .card-set:hover { color: var(--wb-ink); }
.tx .trg { margin: 0 0 12px; font-size: 12.5px; color: var(--wb-ink-2); }
.tx .trg-now { margin: 0; display: flex; gap: 8px; line-height: 1.6; }
.tx .trg-now b { flex: none; font-weight: 500; color: var(--wb-faint); }
.tx .trg-more { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.tx .trg-more details { font-size: 12px; }
.tx .trg-more details[open] { flex-basis: 100%; }
.tx .trg-more summary { cursor: pointer; color: var(--wb-faint); list-style: none; }
.tx .trg-more summary::-webkit-details-marker { display: none; }
.tx .trg-more summary::before { content: '▸ '; font-size: 10px; }
.tx .trg-more details[open] summary::before { content: '▾ '; }
.tx .trg-more details p { margin: 4px 0 4px 14px; line-height: 1.7; color: var(--wb-ink-2); white-space: pre-wrap; }
.tx .trg-more .link { margin-left: 14px; }
.tx .link { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--wb-accent); cursor: pointer; }
.tx .link:hover { text-decoration: underline; }
.tx .trg-used { margin: 4px 0 0; font-size: 12px; color: var(--wb-muted); }
.tx .trg-used small { margin-left: 3px; color: var(--wb-faint); }
.tx .col-head .av, .drawer .dw-meta .av { width: 22px; height: 22px; border-radius: 50%; background-color: #e9e4da; flex: none; }
.tx .line .meta .face-chip { font-size: 11px; line-height: 18px; padding: 0 8px; margin-right: 4px; border: 1px solid var(--wb-line); border-radius: 999px; background: #fff; color: var(--wb-muted); visibility: hidden; }
.tx .line:hover .meta .face-chip, .tx .line:focus-within .meta .face-chip, .tx .line .meta .face-chip.set, .tx .line .meta .face-chip.changed { visibility: visible; }
.tx .line .meta .face-chip:hover { color: var(--wb-accent); border-color: #e3d2c2; background: #fff; }
.tx .line .meta .face-chip.set { background: #f1eee8; color: var(--wb-ink-2); }
.tx .line .meta .face-chip.changed { color: var(--wb-accent); border-color: #e3d2c2; }
.tx .card .line textarea { padding-right: 112px; }
body:has(main.tx):not(.drawer-open) .preview { left: auto; right: 28px; bottom: 84px; }
.tx .story-card .mini-wrap { display: flex; align-items: stretch; gap: 10px; }
.tx .story-card .mini { flex: 1 1 auto; }
.tx .open-script { flex: none; padding: 0 14px; border: 1px solid var(--wb-line); border-radius: 8px; background: var(--wb-paper); font: inherit; font-size: 12.5px; color: var(--wb-accent); cursor: pointer; }
.tx .open-script:hover { border-color: #cfc8bb; }
.tx .ref-card .card-head { justify-content: space-between; }
.tx .ref-card .card-head button { font-size: 12px; padding: 4px 10px; }
.tx .ref-lines p { margin: 3px 0; font-size: 13px; color: var(--wb-ink-2); }

/* 剧本抽屉顶上的设置和三段触发 */
.drawer .dw-meta { margin: 14px 0 12px; padding: 12px 14px; border-radius: 10px; background: #f6f3ee; }
.drawer .dw-meta .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; }
.drawer .dw-meta .chip { background: #ebe6dd; color: var(--wb-ink-2); }
.drawer .dw-meta .chip.st-wait, .drawer .dw-meta .chip.st-changed { background: var(--wb-warn-bg); color: var(--wb-warn); font-weight: 600; }
.drawer .dw-meta .card-set { margin-left: auto; font-size: 12px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--wb-line); background: var(--wb-paper); color: var(--wb-ink-2); cursor: pointer; }
.drawer .trg { margin: 0; font-size: 13px; }
.drawer .trg-now { margin: 0; display: flex; gap: 8px; line-height: 1.6; }
.drawer .trg-now b { flex: none; font-weight: 500; color: var(--wb-faint); }
.drawer .trg-more { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.drawer .trg-more details[open] { flex-basis: 100%; }
.drawer .trg-more summary { cursor: pointer; color: var(--wb-faint); font-size: 12px; list-style: none; }
.drawer .trg-more summary::-webkit-details-marker { display: none; }
.drawer .trg-more summary::before { content: '▸ '; font-size: 10px; }
.drawer .trg-more details[open] summary::before { content: '▾ '; }
.drawer .trg-more details p { margin: 4px 0 4px 14px; line-height: 1.7; font-size: 12.5px; color: var(--wb-ink-2); }
.drawer .link { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; margin-left: 14px; color: var(--wb-accent); cursor: pointer; }
.drawer .trg-used { margin: 6px 0 0; font-size: 12px; color: var(--wb-muted); }

/* 情绪菜单 */
.who-menu.faces .face-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 10px 6px; max-width: 280px; }
.who-menu.faces .face-tags button { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--wb-line); background: #fff; font-size: 12px; cursor: pointer; }
.who-menu.faces .face-tags button.on { border-color: var(--wb-accent); color: var(--wb-accent); }
.who-menu .menu-foot { margin: 4px 10px 8px; font-size: 11px; line-height: 1.5; color: var(--wb-faint); max-width: 260px; }

/* 设置 / 新建 */
.tx-dlg { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 0; box-shadow: 0 20px 60px #2a221a33; background: var(--wb-paper); }
.tx-dlg.wide { width: min(760px, calc(100vw - 32px)); }
.tx-dlg::backdrop { background: #2a221a40; }
.tx-dlg .dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 6px; }
.tx-dlg .dlg-head h2 { font-size: 17px; margin: 0; }
.tx-dlg .x { border: 0; background: none; font-size: 20px; color: var(--wb-muted); cursor: pointer; }
.tx-dlg .form { padding: 8px 20px 4px; display: flex; flex-direction: column; gap: 14px; }
.tx-dlg .form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.tx-dlg .form label > span { font-size: 12px; color: var(--wb-muted); }
.tx-dlg .form small { font-size: 11.5px; color: var(--wb-faint); }
.tx-dlg .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tx-dlg input, .tx-dlg select, .tx-dlg textarea { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--wb-line); border-radius: 8px; background: #fff; color: var(--wb-ink); }
.tx-dlg textarea { resize: vertical; line-height: 1.6; }
.tx-dlg .muted.small { font-size: 12px; margin: 0; line-height: 1.6; }
.tx-dlg .dlg-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; }
.tx-dlg .dlg-foot .muted { margin-right: auto; font-size: 12.5px; color: var(--wb-warn); }
.tx-dlg .n-lines-h { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--wb-muted); margin-bottom: -6px; }
.tx-dlg .n-lines-h small { color: var(--wb-faint); }
.tx-dlg .n-line { display: grid; grid-template-columns: 92px 92px minmax(0, 1fr) 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
.tx-dlg .n-line .x { font-size: 18px; }
.tx-dlg .n-line .x:disabled { opacity: .3; cursor: default; }
.tx-dlg .n-noface { text-align: center; color: var(--wb-faint); }
.tx-dlg .add { align-self: flex-start; padding: 5px 12px; border: 1px dashed #cfc8bb; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--wb-ink-2); cursor: pointer; }
@media (max-width: 1100px) { .tx-body { grid-template-columns: 1fr; } .tx-tree { position: static; max-height: none; } }