:root {
  --paper: #f6f6f2;
  --surface: #ffffff;
  --ink: #1b2430;
  --muted: #6e7681;
  --rule: #e0e0d8;
  --indigo: #2c4a78;
  --green: #1e7a55;
  --amber: #b0740a;
  --rust: #a1402f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Hiragino Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

a { color: var(--indigo); }

.top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.brand { font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; color: var(--ink); }
.brand span { margin-left: .7rem; font-weight: 400; letter-spacing: normal; color: var(--muted); }
.top nav { display: flex; align-items: baseline; gap: 1rem; }
.top nav a, .top nav button { font-size: .85rem; }

/* 登录 */
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login { width: min(320px, 90vw); display: grid; gap: .8rem; padding: 1.8rem 1.6rem;
  background: var(--surface); border: 1px solid var(--rule); }
.login .brand { margin: 0 0 .4rem; }
.login label { display: grid; gap: .3rem; font-size: .82rem; color: var(--muted); }
.login .flash { margin: 0; }
.login button:disabled { opacity: .5; cursor: not-allowed; }

main { padding: 1.4rem 1.6rem 4rem; }

.flashes { padding: .8rem 1.6rem 0; }
.flash { margin: 0 0 .5rem; padding: .55rem .8rem; border-left: 3px solid var(--green); background: var(--surface); }
.flash.warn { border-left-color: var(--rust); }

/* 進度管線 */
.pipeline { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.stage { flex: 1 1 120px; padding: .8rem .9rem .9rem; background: var(--surface); position: relative; }
.stage b { display: block; font-size: 1.6rem; font-weight: 650; line-height: 1.1; }
.stage span { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .55rem; }
.stage i { display: block; height: 3px; background: var(--rule); }
.stage i::after { content: ""; display: block; height: 3px; width: var(--fill); background: var(--indigo); }
.stage.wide i::after { background: var(--green); width: 100%; }

/* 导入与筛选 */
.tools { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.2rem 0 .9rem; }
.import {
  flex: 1 1 320px; display: grid; grid-template-columns: 1fr auto; gap: .5rem .7rem;
  align-items: center; padding: .8rem .9rem; background: var(--surface); border: 1px solid var(--rule);
}
.import label { font-size: .82rem; color: var(--muted); display: grid; gap: .3rem; }
.import small { grid-column: 1 / -1; color: var(--muted); font-size: .75rem; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filters a { font-size: .82rem; }

input, select, textarea, button {
  font: inherit; color: inherit; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 0; padding: .34rem .5rem;
}
input[type=file] { border: none; padding-left: 0; background: none; }
button { cursor: pointer; background: var(--ink); color: #fff; border-color: var(--ink); padding: .34rem .9rem; }
button.link { background: none; color: var(--muted); border: none; padding: 0; text-decoration: underline; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

/* 主表 */
.board { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); }
.board th, .board td { padding: .38rem .55rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.board thead th { position: sticky; top: 0; background: var(--surface); font-size: .76rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--ink); z-index: 1; }
.board tbody tr:hover { background: #fafaf6; }
.board .date { color: var(--muted); white-space: nowrap; }
.board .title { max-width: 30ch; }
.board .title a { text-decoration: none; }
.board .title a:hover { text-decoration: underline; }
.board .kw, .board .coll { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.board .num { text-align: right; }
.board .mid { text-align: center; }
.board input[type=url] { width: 15ch; }
.board select { padding: .2rem .3rem; }
.board tr.st-已發佈 .date, .board tr.st-已完成 .date { color: var(--green); }
.board .best { font-weight: 650; }

.pri { font-size: .72rem; font-weight: 700; color: var(--muted); }
.pri.P1 { color: var(--rust); }
.pri.P2 { color: var(--amber); }

.empty { padding: 2rem 0; color: var(--muted); }

/* 詳情頁 */
.back { display: inline-block; margin-bottom: .8rem; font-size: .85rem; }
.detail, .panel { background: var(--surface); border: 1px solid var(--rule); padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.detail h1 { margin: .2rem 0 1rem; font-size: 1.35rem; line-height: 1.35; max-width: 40ch; }
.detail .meta { margin: 0; font-size: .8rem; color: var(--muted); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0 0 1.3rem; font-size: .88rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .75rem; }

.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1rem; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.edit-grid label { display: grid; gap: .3rem; font-size: .82rem; color: var(--muted); }
.edit-grid .full { grid-column: 1 / -1; }
.edit-grid .check { display: flex; align-items: center; gap: .45rem; color: var(--ink); }

.panel h2 { margin: 0 0 .8rem; font-size: .95rem; }
.tails { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.tails li { padding: .2rem .55rem; border: 1px solid var(--rule); font-size: .84rem; color: var(--muted); }
.tails li.hit { border-color: var(--green); color: var(--green); }
.tails li b { margin-left: .4rem; }

.kwtable { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.kwtable th, .kwtable td { padding: .35rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; }
.kwtable .num { text-align: right; }
.delta.up { color: var(--green); }
.delta.down { color: var(--rust); }
.kwforms { display: flex; flex-wrap: wrap; gap: 1.4rem; border-top: 1px solid var(--rule); padding-top: .9rem; }
.kwforms form { display: flex; gap: .4rem; flex-wrap: wrap; }
.kwforms input[name=position], .kwforms input[name=volume] { width: 7ch; }

#toast {
  position: fixed; right: 1.2rem; bottom: 1.2rem; padding: .45rem .9rem;
  background: var(--ink); color: #fff; font-size: .82rem;
}

@media (max-width: 820px) {
  .board .kw, .board .coll { display: none; }
  main { padding: 1rem .8rem 3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  #toast { transition: opacity .2s; }
}

/* 生成参数面板 */
.gen h2 { display: flex; align-items: baseline; }
.genrow { display: grid; grid-template-columns: 6.5em 1fr auto; gap: .5rem; align-items: start; margin-bottom: .5rem; }
.genrow.anchor { grid-template-columns: 1fr auto 1.6fr auto; }
.genlabel { font-size: .82rem; color: var(--muted); padding-top: .38rem; }
.genlabel.block { margin: 1.1rem 0 .5rem; padding: 0; border-top: 1px solid var(--rule); padding-top: .9rem; }
.genrow textarea { resize: vertical; line-height: 1.6; }
.gen button.copy { background: var(--surface); color: var(--indigo); border-color: var(--indigo); padding: .34rem .7rem; }
.gen button.copy:hover { background: var(--indigo); color: #fff; }

/* 表格里的快捷复制 */
.board .quick { white-space: nowrap; }
.chip { padding: .12rem .4rem; font-size: .78rem; background: var(--surface); color: var(--muted);
  border: 1px solid var(--rule); margin-right: .15rem; }
.chip:hover { border-color: var(--indigo); color: var(--indigo); }