/* 工作台统一的样子（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 .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; }