/* ============================================================
   Story Review — warm editorial theme
   ============================================================ */
:root {
  --bg: #f7f7f9;
  --bg-deep: #f1f1f4;
  --card: #ffffff;
  --card-soft: #f7f7f9;
  --ink: #17181d;
  --ink-soft: #3f4450;
  --muted: #6f7480;
  --faint: #98a0ac;
  --line: #ececf0;
  --line-strong: #dcdde3;
  --green: #2f6f4f;
  --green-soft: #eaf2ec;
  --green-line: #c8dfd1;
  --amber: #a8701c;
  --amber-soft: #fbf1df;
  --amber-line: #ecd9b4;
  --red: #a83a2c;
  --red-soft: #fbeae6;
  --red-line: #eec9c1;
  --blue: #3a5f8f;
  --blue-soft: #eaf0f7;
  --blue-line: #cddaea;
  --violet: #6b4f8f;
  --violet-soft: #f2ecf7;
  --violet-line: #ded0ec;
  /* library page (list) palette */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #f4f3ff;
  --accent-line: #dcdafb;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(17, 19, 26, .04), 0 2px 10px rgba(17, 19, 26, .03);
  --shadow-2: 0 2px 6px rgba(17, 19, 26, .05), 0 14px 36px rgba(17, 19, 26, .06);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC", "Noto Serif SC", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 15px/1.65 var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 560px at 10% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(900px 460px at 104% -2%, #f2f2f7 0%, rgba(242, 242, 247, 0) 58%),
    var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 26px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #f7f7ff, #ececf8);
  border: 1px solid var(--line-strong);
  font-size: 17px;
  box-shadow: inset 0 1px 0 #fff;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; font-weight: 700; letter-spacing: .01em; }
.brand-sub { font-size: 10.5px; font-weight: 500; color: var(--faint); letter-spacing: .07em; text-transform: uppercase; }

.pill {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--muted);
  white-space: nowrap;
}
.pill.env { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.pill.db { font-family: var(--mono); font-weight: 500; font-size: 11px; }

.grow { flex: 1; }

.search {
  display: flex; align-items: center; gap: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 11px;
  box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
.search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
.search svg { width: 15px; height: 15px; fill: var(--faint); flex: none; }
.search input {
  border: 0; outline: 0; background: transparent;
  font: 13.5px var(--sans); color: var(--ink);
  width: 230px; max-width: 34vw;
}

.btn {
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 10px;
  padding: 7px 14px;
  font: 600 13px var(--sans);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: #fff; border-color: var(--line-strong); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(49, 46, 129, .24); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.small { padding: 5px 10px; font-size: 12px; border-radius: 8px; }

/* ---------------- generic layout ---------------- */
.app { max-width: 1720px; margin: 0 auto; padding: 26px 34px 96px; }

.loading { display: grid; place-items: center; gap: 6px; padding: 90px 0; color: var(--muted); }
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.section-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--card-soft); color: var(--ink-soft);
  white-space: nowrap;
}
.chip.green { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.chip.amber { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.chip.red { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.chip.blue { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
.chip.violet { background: var(--violet-soft); border-color: var(--violet-line); color: var(--violet); }
.chip.plain { background: transparent; border-color: var(--line); color: var(--muted); font-weight: 500; }

/* ---------------- story library (list page) ---------------- */
.lib { padding-top: 2px; }

.lib-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 26px 0 22px;
}
.lib-eyebrow {
  font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 11px 42px;
}
.lib-back {
  width: 29px; height: 29px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.lib-back:hover { color: var(--ink); border-color: var(--line-strong); background: var(--card-soft); }
.lib-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lib-title-row { display: flex; align-items: center; gap: 13px; }
.lib-title h1 { margin: 0; font: 650 30px/1.15 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.lib-title p { margin: 10px 0 0 42px; color: var(--muted); font-size: 13.5px; }
.lib-title code {
  font: 500 12.5px var(--mono); background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; color: var(--ink-soft);
}
.lib-head-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.seg {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--bg-deep); border: 1px solid #ececf2; border-radius: 12px;
}
.seg button {
  border: 0; background: transparent; padding: 8px 14px; border-radius: 9px;
  font: 600 13px/1 var(--sans); color: #5d6270; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg button:hover { color: var(--ink); background: rgba(255, 255, 255, .72); }
.seg button.on {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(49, 46, 129, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.lib-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px; margin-bottom: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-1);
}
.lib-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  flex: 0 1 500px; min-width: 190px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.lib-search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
.lib-search svg { width: 15px; height: 15px; fill: #a3a8b4; flex: none; }
.lib-search input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font: 13.5px var(--sans); color: var(--ink);
}
.lib-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.lib-field { position: relative; display: inline-flex; align-items: center; }
.lib-select {
  appearance: none; -webkit-appearance: none;
  height: 38px; padding: 0 32px 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink-soft); font: 500 13px var(--sans); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lib-select:hover { border-color: var(--line-strong); }
.lib-select:focus { outline: 0; border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
.lib-field::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 6px; height: 6px; border-right: 1.5px solid #8b90a0; border-bottom: 1.5px solid #8b90a0;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.lib-toggle {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink-soft); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.lib-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lib-toggle:hover { border-color: var(--line-strong); }
.lib-toggle.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lib-count { margin-left: auto; padding-right: 4px; font-size: 12.5px; color: var(--faint); white-space: nowrap; }

.lib-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(17, 19, 26, .04), 0 12px 32px rgba(17, 19, 26, .035);
  overflow: hidden;
}
table.lib-table { width: 100%; border-collapse: collapse; }
.lib-table th {
  padding: 13px 18px; text-align: left; white-space: nowrap; vertical-align: middle;
  background: #fbfbfc; border-bottom: 1px solid var(--line);
  font: 600 11.5px/1 var(--sans); letter-spacing: .055em; text-transform: uppercase; color: #8d92a0;
}
.lib-table th.check { width: 52px; padding-right: 0; padding-left: 18px; }
.lib-table th.sortable { cursor: pointer; user-select: none; }
.lib-table th.sortable:hover { color: var(--ink-soft); }
.lib-table th .caret { display: inline-block; margin-left: 5px; font-size: 10px; color: #c2c6d0; }
.lib-table th.on { color: var(--ink-soft); }
.lib-table th.on .caret { color: var(--accent); }
.lib-table td { padding: 15px 18px; border-bottom: 1px solid #f2f2f6; vertical-align: middle; }
.lib-table tbody tr:last-child td { border-bottom: 0; }
.lib-table tbody tr { cursor: pointer; transition: background .12s; }
.lib-table td:first-child { padding-left: 18px; padding-right: 0; }
.lib-table tbody tr:hover { background: #fafaff; }
.lib-table tbody tr.picked { background: #f7f6ff; }
.lib-check { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }

.lib-story { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.lib-story > div { min-width: 0; }
.lib-story a {
  display: block; color: var(--ink); font: 600 15px/1.4 var(--sans); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-story a:hover { color: var(--accent); text-decoration: none; }
.lib-story .meta {
  display: block; margin-top: 4px; font-size: 12.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-table th:nth-child(2), .lib-table td:nth-child(2) { width: 100%; }
.lib-table th:nth-child(6), .lib-table td:nth-child(6),
.lib-table th:nth-child(7), .lib-table td:nth-child(7) { width: 100px; }
.lib-table th:nth-child(9), .lib-table td:nth-child(9),
.lib-table th:nth-child(10), .lib-table td:nth-child(10) { width: 104px; }
.lib-warn { flex: none; margin-top: 3px; color: #e0a02a; display: inline-flex; }
.lib-warn svg { width: 14px; height: 14px; fill: currentColor; }

.lib-prog { display: flex; flex-direction: column; gap: 7px; width: 96px; }
.lib-prog .n { font: 600 13px/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lib-prog .n i { font-style: normal; color: #c2c6d0; font-weight: 500; }
.lib-prog .bar { height: 4px; border-radius: 999px; background: #f0f1f4; overflow: hidden; }
.lib-prog .bar > span { display: block; height: 100%; border-radius: 999px; background: #6366f1; transition: width .3s ease; }
.lib-prog.done .bar > span { background: #34c38f; }
.lib-prog.done .n { color: #1f7a56; }
.lib-prog.warn .bar > span { background: #f0ab3c; }
.lib-prog.none .n { color: #c2c6d0; font-weight: 500; }

.lib-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 7px; border: 1px solid transparent;
  font: 600 11.5px/1.2 var(--sans); white-space: nowrap;
}
.lib-status.pending { background: #fdf6e3; border-color: #f6e7c3; color: #a9711b; }
.lib-status.passed { background: #eaf7f0; border-color: #cfecdd; color: #1f7a56; }
.lib-status.generating { background: #f1efff; border-color: #ddd9fd; color: #5748c9; }
.lib-status.draft { background: #f4f5f7; border-color: #e9eaee; color: #5d6470; }
.push-mini {
  display: inline-flex; margin-top: 5px; padding: 2px 7px; border-radius: 5px;
  font: 600 10.5px/1.6 var(--sans); background: #eef0ff; color: var(--accent);
}
.push-mini.err { background: #fdecea; color: #c0392b; }
.push-mini.warn { background: #fdf6e3; color: #a9711b; }
.push-state { display: block; }

.lib-owner { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; }
.lib-owner .av {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 600 10.5px/1 var(--sans); color: var(--ink-soft);
  background: #f4f5f7; border: 1px solid #e9eaee;
}
.lib-owner .nameless { color: var(--faint); }
.lib-date {
  display: inline-block; font-size: 12.5px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; line-height: 1.5;
}
.lib-date.muted { color: var(--faint); }

.lib-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.ops-cell { text-align: right; }
.lib-table th.ops-col { width: 92px; text-align: right; }
.lib-act {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border-radius: 8px; border: 1px solid var(--line); background: #fff;
  color: #868c99; cursor: pointer; transition: background .13s, color .13s, border-color .13s;
}
.lib-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lib-act:hover { background: #f7f7fa; border-color: var(--line-strong); color: var(--ink); }
.lib-act.danger:hover { background: #fdf1ef; border-color: #f8e0dc; color: #c0392b; }
.lib-act:disabled { opacity: .45; cursor: default; }
.lib-act.busy svg { animation: spin 1s linear infinite; }
.lib-table tbody tr.removing { opacity: .35; }

.lib-menu {
  position: fixed; z-index: 80; min-width: 172px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(17, 19, 26, .16), 0 2px 6px rgba(17, 19, 26, .06);
  display: grid; gap: 1px;
}
.lib-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  font: 500 13px/1.2 var(--sans); color: var(--ink-soft); text-align: left; cursor: pointer;
  white-space: nowrap; transition: background .12s, color .12s;
}
.lib-menu button svg {
  width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lib-menu button:hover { background: var(--bg-deep); color: var(--ink); }
.lib-menu button.danger { color: var(--c-red, #c0392b); }
.lib-menu button.danger:hover { background: #fdf1ef; }
.lib-menu button[disabled] { opacity: .5; cursor: default; background: transparent; color: var(--muted); }
.lib-menu .sep { height: 1px; background: var(--line); margin: 4px 2px; }

.btn svg {
  width: 14px; height: 14px; margin-right: 1px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.push-mini.done { background: #eaf7f0; color: #1f7a56; }

.pickbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 9px 12px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--accent);
}
.pickbar .grow { flex: 1; }
.pickbar .btn { box-shadow: none; }

.lib-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 2px 0; }
.lib-foot .info { font-size: 13px; color: var(--faint); }
.lib-foot .right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 4px; }
.pager button {
  min-width: 31px; height: 31px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
  color: var(--ink-soft); font: 600 12.5px var(--sans); cursor: pointer;
  transition: border-color .13s, color .13s, background .13s;
}
.pager button:hover:not(:disabled):not(.on) { border-color: var(--accent-line); color: var(--accent); }
.pager button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .dots { color: #c2c6d0; padding: 0 1px; font-size: 12px; }
.lib-jump { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--faint); }
.lib-jump input {
  width: 46px; height: 31px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; text-align: center; font: 500 12.5px var(--sans); color: var(--ink-soft);
}
.lib-jump input:focus { outline: 0; border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
.lib-size .lib-select { height: 31px; font-size: 12.5px; padding: 0 28px 0 10px; }
.lib-empty { padding: 66px 20px; text-align: center; color: var(--faint); }
.lib-empty .big { font-size: 30px; margin-bottom: 4px; }
.lib-empty p { margin: 0 0 14px; font-size: 13.5px; }
.lib-empty .hint { margin: -6px 0 16px; font-size: 12.5px; color: #b0b5c0; }
.lib-empty b { color: var(--ink-soft); }

@media (max-width: 1400px) {
  .lib-prog { width: 78px; }
}
@media (max-width: 1120px) {
  .lib-search { flex: 1 1 100%; }
}
@media (max-width: 1320px) {
  .lib-table th:nth-child(8), .lib-table td:nth-child(8) { display: none; }
}
@media (max-width: 1120px) {
  .lib-table th:nth-child(5), .lib-table td:nth-child(5) { display: none; }
}
@media (max-width: 1000px) {
  .lib-table th:nth-child(4), .lib-table td:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
  .app { padding: 20px 22px 80px; }
  .lib-story a, .lib-story .meta { white-space: normal; overflow: visible; }
  .lib-head { align-items: flex-start; }
  .lib-head-side { width: 100%; justify-content: space-between; }
  .seg { overflow-x: auto; max-width: 100%; }
  .lib-table th:nth-child(3), .lib-table td:nth-child(3),
  .lib-table th:nth-child(9), .lib-table td:nth-child(9) { display: none; }
  .lib-count { margin-left: 0; width: 100%; padding-left: 2px; }
}
@media (max-width: 640px) {
  .app { padding: 16px 14px 70px; }
  .lib-head { margin: 18px 0 16px; }
  .lib-title h1 { font-size: 24px; }
  .lib-title p { margin-left: 0; }
  .lib-table th:nth-child(10), .lib-table td:nth-child(10) { display: none; }
  .lib-table th.check, .lib-table td:first-child { display: none; }
  .lib-table td, .lib-table th { padding: 11px 8px; }
  .lib-story a { font-size: 14px; }
  .lib-act { width: 27px; height: 27px; }
  .lib-act svg { width: 14px; height: 14px; }
  .lib-foot .right { margin-left: 0; }
  .lib-empty { padding: 48px 16px; }
}

.empty-state {
  text-align: center; padding: 70px 20px; color: var(--muted);
}
.empty-state .big { font-size: 34px; margin-bottom: 8px; }

/* ---------------- detail hero ---------------- */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin: 2px 0 16px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--faint); }
.breadcrumb .current { color: var(--ink-soft); font-weight: 600; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
  gap: 26px;
  padding: 28px 30px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    radial-gradient(760px 280px at 8% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ffffff, #fbfbfd);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #8b85f0 45%, #c8c5fb);
  opacity: .9;
}
.hero-kicker { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.hero h1 {
  font: 600 clamp(24px, 3vw, 34px)/1.2 var(--serif);
  letter-spacing: -.015em; margin: 0 0 12px;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; max-width: 100%; }
.hero-meta .mono { overflow-wrap: anywhere; word-break: break-all; }
.hero-meta b { color: var(--ink-soft); font-weight: 600; }
.hero-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
  align-content: start;
}
.hero-stat {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.hero-stat b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-stat span { font-size: 11px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.hero-stat.accent b { color: var(--green); }
.hero-stat.warn b { color: var(--amber); }

/* ---------------- judge panel ---------------- */
.judge {
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.judge-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfbfc);
  border-bottom: 1px solid var(--line);
}
.judge-head h2 { font-size: 15px; margin: 0; font-weight: 700; }
.judge-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.judge-status.approved { color: var(--green); }
.judge-status.rejected { color: var(--amber); }
.judge-status.running { color: var(--blue); }
.judge-status.error, .judge-status.none { color: var(--faint); }
.judge-head .grow { flex: 1; }
.judge-body { padding: 16px 20px 20px; }
.judge-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px 20px; }
.judge-check { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.judge-check .icon { flex: none; font-size: 13px; width: 16px; }
.judge-check.pass { color: var(--ink-soft); }
.judge-check.fail { color: var(--red); font-weight: 600; }
.findings { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.finding {
  border: 1px solid var(--amber-line);
  background: var(--amber-soft);
  border-radius: 10px; padding: 10px 13px;
  font-size: 13px; color: #6c4610;
}
.finding .rule { font-weight: 700; color: #5a3a0c; }
.finding .sev {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--amber-line); color: var(--amber); margin-left: 6px;
}
.judge-log { margin-top: 12px; }
.judge-log pre {
  background: #23201b; color: #e9e2d6; padding: 12px 14px; border-radius: 10px;
  font: 11.5px/1.6 var(--mono); max-height: 240px; overflow: auto; white-space: pre-wrap;
}
details > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
details > summary:hover { color: var(--ink-soft); }

/* ---------------- detail layout ---------------- */
.layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 22px;
  margin-top: 20px;
  align-items: start;
}
.rail { position: sticky; top: 74px; display: grid; gap: 14px; }
.rail .card { padding: 17px 18px; }

.info-list { display: grid; gap: 8px; margin: 0; }
.info-row { display: grid; grid-template-columns: 108px 1fr; gap: 10px; font-size: 13px; align-items: baseline; }
.info-row dt { color: var(--muted); font-size: 12px; }
.info-row dd { margin: 0; color: var(--ink); word-break: break-word; }
.info-row dd.mono { font-size: 11.5px; color: var(--ink-soft); }

.raw-config {
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.raw-config pre {
  margin: 8px 0 0; background: var(--card-soft); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; font: 11px/1.55 var(--mono);
  max-height: 220px; overflow: auto; white-space: pre-wrap; color: var(--ink-soft);
}

/* branch map */
.map { display: grid; gap: 4px; }
.map-node { position: relative; }
.map-node > .row {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.map-node > .row:hover { border-color: var(--line-strong); background: #fff; }
.map-node.end > .row { background: var(--green-soft); border-color: var(--green-line); }
.map-node.active > .row { border-color: var(--green); box-shadow: 0 0 0 2px rgba(47, 111, 79, .12); }
.map-node .idx {
  flex: none; width: 21px; height: 21px; border-radius: 6px;
  display: grid; place-items: center;
  font: 700 10.5px var(--mono);
  background: #fff; border: 1px solid var(--line-strong); color: var(--muted);
}
.map-node.end .idx { background: var(--green); border-color: var(--green); color: #fff; }
.map-node .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-node .tag { flex: none; font-size: 10px; color: var(--green); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.map-children { margin-left: 10px; padding-left: 12px; border-left: 1px dashed var(--line-strong); display: grid; gap: 4px; margin-top: 4px; }
.map-choice {
  font-size: 11.5px; color: var(--muted); padding: 2px 0 2px 2px;
  display: flex; gap: 5px; align-items: baseline;
}
.map-choice .arrow { color: var(--faint); flex: none; }

/* page navigation */
.pages-col { min-width: 0; }
.pagenav {
  position: sticky; top: 62px; z-index: 20;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 12px;
  background: rgba(255, 253, 248, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  margin-bottom: 16px;
}
.pagenav { overflow-x: auto; flex-wrap: nowrap; }
.pagenav .label { font-size: 11px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin-right: 3px; }
.pagenav a {
  min-width: 30px; text-align: center;
  font: 600 12px var(--mono);
  padding: 4px 7px; border-radius: 8px;
  color: var(--ink-soft); border: 1px solid transparent;
  text-decoration: none;
}
.pagenav a:hover { background: var(--card-soft); border-color: var(--line); text-decoration: none; }
.pagenav a.active { background: var(--green); border-color: var(--green); color: #fff; }
.pagenav a.endmark { color: var(--amber); }
.pagenav a.active.endmark { background: var(--amber); border-color: var(--amber); color: #fff; }
.pagenav .spacer { flex: 1; }
.pagenav .hint { font-size: 11.5px; color: var(--faint); }

/* ---------------- page cards ---------------- */
.page-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
  margin-bottom: 20px;
  overflow: hidden;
  scroll-margin-top: 136px;
}
.page-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdf9, #fdf9f1);
}
.page-num {
  flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font: 700 16px var(--serif);
  color: var(--ink);
  background: linear-gradient(160deg, #fff8e9, #f0e4cd);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 #fff;
}
.page-card.is-end .page-num {
  background: linear-gradient(160deg, #f0f8f2, #dcebdf);
  border-color: var(--green-line); color: var(--green);
}
.page-titles { flex: 1; min-width: 0; }
.page-titles h2 {
  font: 600 18px/1.3 var(--serif);
  margin: 0; letter-spacing: -.005em;
  overflow-wrap: break-word;
}
.page-titles .sub { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11.5px; color: var(--faint); }
.page-titles .sub .node { font-family: var(--mono); font-size: 10.5px; }
.page-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.page-grid {
  display: grid;
  grid-template-columns: minmax(240px, 350px) minmax(0, 1fr);
  gap: 22px;
  padding: 20px 20px 16px;
}
.page-extra { padding: 0 20px 20px; }
.page-media { margin: 0; min-width: 0; }
.img-btn {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  border-radius: 14px; overflow: hidden; background: var(--card-soft);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(70, 50, 25, .06);
}
.img-btn img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s ease; }
.img-btn:hover img { transform: scale(1.02); }
.img-missing {
  aspect-ratio: 1 / 1; display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: 14px;
  color: var(--faint); font-size: 12.5px; padding: 20px;
  background: repeating-linear-gradient(45deg, #fdfaf3, #fdfaf3 12px, #faf5ea 12px, #faf5ea 24px);
}
.page-media figcaption { margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--faint); }
.page-media figcaption span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; text-align: right; }
.audio-box { margin-top: 10px; }
.audio-box audio { width: 100%; height: 36px; display: block; }
.audio-missing { margin-top: 10px; font-size: 12px; color: var(--faint); border: 1px dashed var(--line); border-radius: 9px; padding: 8px 10px; text-align: center; }

.story-text {
  font: 17px/1.85 var(--serif);
  color: #2c261f;
  letter-spacing: .002em;
  background: linear-gradient(180deg, #fffef9, #fdf9f0);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* questions */
.questions { padding-top: 14px; border-top: 1px dashed var(--line); }
.q-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 9px;
}
.q-head .count { font-weight: 600; color: var(--faint); font-size: 12px; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px; align-items: start; }
.q {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  background: #fffdf8;
}
.q-top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.q-index {
  flex: none; font: 700 11px var(--mono); color: var(--green);
  background: var(--green-soft); border: 1px solid var(--green-line);
  padding: 2px 7px; border-radius: 6px; letter-spacing: .04em;
}
.q-prompt { font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.q-options { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.q-option {
  display: flex; gap: 9px; align-items: baseline;
  font-size: 13.5px; line-height: 1.45;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid transparent;
}
.q-option .k {
  flex: none; width: 19px; height: 19px; border-radius: 5px;
  display: grid; place-items: center;
  font: 700 10.5px var(--mono);
  background: var(--card-soft); border: 1px solid var(--line-strong); color: var(--muted);
}
.q-option.correct { background: var(--green-soft); border-color: var(--green-line); }
.q-option.correct .k { background: var(--green); border-color: var(--green); color: #fff; }
.q-option.correct .txt { color: #24583c; font-weight: 600; }
.q-answer-line { margin-top: 8px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.q-analysis {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line);
  font-size: 12.8px; line-height: 1.62; color: var(--muted);
  white-space: pre-wrap;
}
.q-analysis .label {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-right: 6px;
}

/* lexicon */
.lexicon { margin-top: 12px; }
.lexicon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px; margin-top: 9px; }
.lex-item {
  border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 10px; background: var(--card-soft); font-size: 12.5px;
}
.lex-item .w { font-weight: 700; font-family: var(--serif); font-size: 14px; }
.lex-item .zh { color: var(--muted); margin-left: 6px; }
.lex-item .tip { display: block; color: var(--faint); font-size: 11.5px; margin-top: 2px; }
.grammar-item {
  border-left: 3px solid var(--blue-line);
  background: var(--blue-soft);
  border-radius: 0 9px 9px 0;
  padding: 8px 11px; font-size: 12.5px;
}
.grammar-item .pattern { font-family: var(--mono); font-size: 12px; color: var(--blue); }
.grammar-item .ex { display: block; color: var(--muted); margin-top: 3px; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(28, 24, 18, .82);
  backdrop-filter: blur(4px);
  padding: 30px;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(92vw, 1000px); }
.lightbox img { display: block; max-width: 100%; max-height: 82vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox figcaption { margin-top: 12px; color: #efe7d8; font-size: 13px; text-align: center; }
.lightbox-close {
  position: fixed; top: 18px; right: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .2); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #241f19; color: #f6f1e7;
  padding: 9px 16px; border-radius: 999px;
  font-size: 13px; box-shadow: var(--shadow-2); z-index: 110;
}
.toast[hidden] { display: none; }

/* error panel */
.error-panel {
  border: 1px solid var(--red-line); background: var(--red-soft);
  color: #6d261b; border-radius: 14px; padding: 18px 20px; font-size: 14px;
}
.error-panel pre { white-space: pre-wrap; font: 12px var(--mono); margin: 8px 0 0; }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .layout { grid-template-columns: 1fr; }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-grid { grid-template-columns: 1fr; }
  .page-media { max-width: 380px; }
}
@media (max-width: 640px) {
  .app { padding: 16px 14px 70px; }
  .topbar { padding: 9px 14px; gap: 8px; }
  .brand-sub, .pill.db, .pill.env { display: none; }
  .hero { padding: 20px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head { flex-wrap: wrap; }
  .page-badges { justify-content: flex-start; width: 100%; }
}

@media print {
  .topbar, .pagenav, .rail, .hero-actions, .judge-head .btn, .lightbox { display: none !important; }
  body { background: #fff; }
  .page-card, .hero, .judge { box-shadow: none; border-color: #ddd; }
  .page-card { break-inside: avoid; }
}

/* ============================================================
   Create story page + workflow progress
   ============================================================ */
.create-head { margin: 24px 0 20px; }
.create-head h1 { font-family: var(--serif); font-size: 30px; margin: 0 0 6px; letter-spacing: -.2px; }
.create-head p { margin: 0; color: var(--muted); font-size: 13px; }
.create-head code { background: var(--card-soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 12px; }
.danger-text { color: var(--red); }

.create-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; padding-bottom: 28px; }
.create-form { display: grid; gap: 16px; min-width: 0; }
.form-card { padding: 20px 22px 22px; }
.form-title { font-family: var(--serif); font-size: 15.5px; margin: 0 0 14px; letter-spacing: .2px; color: var(--ink); }
.form-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.form-title-row .form-title { margin: 0; }
.form-hint { margin: 0 0 13px; font-size: 12px; color: var(--muted); line-height: 1.65; }
.form-hint.ai-result { margin: 12px 0 0; padding: 8px 11px; border: 1px solid var(--green-line); background: var(--green-soft); border-radius: 9px; color: var(--ink-soft); }
.form-hint b { color: var(--ink); }
.form-hint .muted { color: var(--faint); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field-grid .field-grid { gap: 12px 14px; }
.field { display: grid; gap: 7px; font-size: 12px; color: var(--muted); min-width: 0; align-content: start; }
.field.span2, .span2 { grid-column: 1 / -1; }
.field > span { font-weight: 600; font-size: 12px; color: var(--ink-soft); letter-spacing: .2px; }
.field .req { color: var(--red); }
.field em { font-style: normal; font-weight: 400; color: var(--faint); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 8px 10px; width: 100%; min-width: 0; min-height: 38px; line-height: 1.45;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; line-height: 1.62; min-height: 66px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 111, 79, .12);
}
.radio-row, .checkbox-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 1px 0; }
.radio, .checkbox {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-soft);
  background: var(--card-soft); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.radio:hover, .checkbox:hover { border-color: var(--green-line); }
.radio input, .checkbox input {
  accent-color: var(--green); margin: 0; flex: none;
  width: auto; padding: 0; border: 0; background: none; border-radius: 0;
}
.radio, .checkbox { white-space: nowrap; }
.radio:has(input:checked), .checkbox:has(input:checked) {
  border-color: var(--green); background: var(--green-soft); color: var(--green);
  font-weight: 600;
}
.form-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.65; }
.form-note code { background: var(--card-soft); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font-size: 11.5px; }
.form-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}
.form-actions .btn { min-width: 116px; justify-content: center; }
.form-actions .form-error { margin-left: 4px; }
.form-error { color: var(--red); font-size: 12.5px; }
.create-side { display: grid; gap: 14px; position: sticky; top: 74px; min-width: 0; }
.create-side .card { padding: 15px 16px 16px; }
.preset-list { display: grid; gap: 8px; }
.preset {
  display: grid; gap: 2px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-soft);
  border-radius: 10px; padding: 9px 11px; transition: border-color .15s, background .15s;
}
.preset:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.preset b { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.preset span { font-size: 11.5px; color: var(--muted); }
.config-preview {
  margin: 0; padding: 11px; border-radius: 9px;
  background: var(--card-soft); border: 1px solid var(--line);
  font: 11.5px/1.6 var(--mono); color: var(--ink-soft);
  max-height: 380px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.hint-card { font-size: 12px; color: var(--muted); line-height: 1.7; }
.hint-card b { color: var(--ink-soft); }
.hint-card ul { margin: 6px 0 0; padding-left: 18px; }
.hint-card li + li { margin-top: 4px; }
.hint-card code { background: var(--card-soft); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }

/* theme chips + AI idea fill */
.ai-btn { background: linear-gradient(135deg, #f4f3ff, #e9e7fe); border: 1px solid #d6d3fb; color: #4b3fb5; font-weight: 600; }
.ai-btn:hover { border-color: #bdb8f8; background: linear-gradient(135deg, #f7f6ff, #e4e1fd); }
.ai-btn:disabled { opacity: .7; cursor: progress; }
.ai-spark { display: inline-block; }
.ai-spark.spin { animation: wf-pulse .9s ease-in-out infinite; }
.theme-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.theme-chip {
  display: inline-flex; align-items: baseline; gap: 5px; font: inherit; cursor: pointer;
  font-size: 12px; color: var(--ink-soft);
  background: var(--card-soft); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 5px 11px;
  transition: border-color .15s, background .15s, color .15s;
}
.theme-chip span { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }
.theme-chip:hover { border-color: var(--green-line); background: var(--green-soft); }
.theme-chip.active { border-color: var(--green); background: var(--green-soft); color: var(--green); font-weight: 600; }
.theme-chip.active span { color: var(--green); }
.create-tile { justify-content: center; text-decoration: none; border-style: dashed; }
.create-tile b { color: var(--green); }
.create-tile:hover { text-decoration: none; border-color: var(--green); }

/* workflow progress banner */
.wf-banner { padding: 14px 18px; margin-bottom: 14px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.wf-head { display: flex; align-items: center; gap: 9px; }
.wf-head b { font-size: 14px; }
.wf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.wf-running .wf-dot, .wf-queued .wf-dot { animation: wf-pulse 1.2s ease-in-out infinite; }
.wf-ok .wf-dot { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.wf-fail .wf-dot { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.wf-cancel .wf-dot { background: var(--faint); box-shadow: none; }
@keyframes wf-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.wf-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 11px 0 10px; }
.wf-bar > div { height: 100%; background: linear-gradient(90deg, #4d8f6a, var(--green)); border-radius: inherit; transition: width .5s ease; }
.wf-fail .wf-bar > div { background: linear-gradient(90deg, #c2604e, var(--red)); }
.wf-steps { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.wf-step { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--card-soft); }
.wf-step.green { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.wf-step.amber { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.wf-step.red { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.wf-error { margin: 10px 0 0; padding: 9px 11px; border-radius: 8px; background: var(--red-soft); color: var(--red); font: 11.5px/1.6 var(--mono); white-space: pre-wrap; }

@media (max-width: 1000px) {
  .create-layout { grid-template-columns: 1fr; }
  .create-side { position: static; }
}
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
  .field.span2 { grid-column: auto; }
  .form-card { padding: 16px 16px 18px; }
  .form-title-row { align-items: flex-start; }
  .ai-btn { width: 100%; justify-content: center; }
  .create-form { gap: 13px; }
  .field-grid { gap: 13px; }
  .create-head h1 { font-size: 25px; }
}


/* ----------------------------- repair box ----------------------------- */
.repair-box {
  margin: 0 18px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-soft);
}
.repair-box.running { border-color: var(--amber-line); background: var(--amber-soft); }
.repair-box.done { border-color: var(--green-line); background: var(--green-soft); }
.repair-box.error { border-color: var(--red-line); background: var(--red-soft); }
.repair-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.repair-head code { font-family: var(--mono); font-size: 11.5px; background: rgba(0, 0, 0, .04); padding: 1px 5px; border-radius: 4px; }
.repair-note { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.repair-steps {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  max-height: 230px;
  overflow-y: auto;
  font-size: 12.2px;
}
.repair-step { display: flex; gap: 8px; align-items: baseline; color: var(--faint); }
.repair-step.done { color: var(--green); }
.repair-step.failed { color: var(--red); }
.repair-step.running { color: var(--ink); font-weight: 600; }
.rs-icon { width: 13px; text-align: center; flex: none; }
.rs-err { color: var(--red); font-size: 11.5px; }
.rdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber);
  animation: wf-pulse 1.2s ease-in-out infinite;
}
.ricon { font-weight: 700; }
.ricon.ok { color: var(--green); }
.ricon.err { color: var(--red); }

.err-text { color: var(--red); }

/* ---------------- list row actions (review / push / delete) ---------------- */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.act {
  font: 600 12px var(--sans);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.act:hover { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.act.danger { color: var(--red); border-color: var(--red-line); }
.act.danger:hover { background: var(--red-soft); border-color: var(--red); }
.act:disabled { opacity: .5; cursor: default; }
.push-state { margin-top: 5px; min-height: 16px; }
.push-chip {
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: var(--card-soft); border: 1px solid var(--line); color: var(--muted);
}
.push-chip.ok { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.push-chip.warn { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.push-chip.err { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
tr.removing { opacity: 0; transform: translateX(10px); transition: opacity .24s ease, transform .24s ease; }

/* ---------------- confirm modal ---------------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(36, 31, 25, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  width: min(500px, 100%);
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 22px 24px;
  box-shadow: 0 24px 70px rgba(30, 24, 16, .3);
  animation: modal-in .18s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-title { margin: 0 0 10px; font-family: var(--serif); font-size: 20px; color: var(--ink); }
.modal-card.danger .modal-title { color: var(--red); }
.modal-body { font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.modal-body p { margin: 0 0 8px; }
.modal-hint { color: var(--muted); font-size: 12.5px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { background: #93301f; }

.list td.actions { min-width: 172px; }
.list td.actions .row-actions { flex-wrap: nowrap; gap: 5px; }
.list td.actions .act { padding: 4px 8px; }
.list td.judge-cell { white-space: nowrap; }

.repair-note.ok-text { color: var(--green); }

.finding .sev.note { border-color: var(--line-strong); color: var(--muted); }


/* media consistency banner */
.media-banner { margin: 18px 0 0; padding: 16px 20px; border-radius: 14px;
  background: #fffdf6; border: 1px solid rgba(176, 132, 42, .35);
  box-shadow: var(--shadow-1); }
.media-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.media-title { font-family: var(--serif); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.media-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.media-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #f4efe2; color: #6b5a33; }
.media-tag.bad { background: #fde8e4; color: #a33225; }
.media-tag.warn { background: #fdf1d8; color: #8a6314; }
.media-tag.ok { background: #e6f2e9; color: #2f6b45; }
.media-note { font-size: 12px; color: var(--ink); }
.media-details { margin-top: 10px; font-size: 12.5px; }
.media-details summary { cursor: pointer; color: var(--ink); }
.media-list, .media-steps { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.media-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.media-step { font-size: 12px; color: var(--ink); }
.media-step.done { color: #2f6b45; }
.media-step.failed { color: #a33225; }
.media-step.running { color: #8a6314; }
.media-step .err { color: #a33225; }

/* ---------------- per-page generate / audit ---------------- */
.page-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 4px 0 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.page-actions .pa-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.page-actions .pa-act { font: 500 12.5px var(--sans, inherit); color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 4px 10px; cursor: pointer; line-height: 1.5; }
.page-actions .pa-act:hover:not(:disabled) { background: var(--card-soft); border-color: var(--accent); color: var(--accent); }
.page-actions .pa-act:disabled { opacity: .5; cursor: default; }
.page-actions .pa-act.audit { border-color: #c9b98a; background: #fffdf4; color: #6b5a33; }
.page-actions .pa-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 4px; }
.page-actions .pa-state { font-size: 12px; color: var(--muted); margin-left: 4px; display: inline-flex; align-items: center; gap: 5px; }
.page-actions .pa-err, .pa-err { color: #a33225; font-size: 12px; }
.page-actions .pa-ok, .pa-ok { color: #2f6b45; font-size: 12px; }
.page-actions .pa-bad { color: #a33225; font-size: 12px; font-weight: 600; }
.page-audit { margin: 0 0 12px; }
.pa-box { border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; background: #fff; }
.pa-box.bad { border-color: #e9b8ae; background: #fff8f6; }
.pa-box.ok { border-color: #bfdcc8; background: #f7fcf8; }
.pa-head { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.pa-box.bad .pa-head { color: #a33225; }
.pa-box.ok .pa-head { color: #2f6b45; }
.pa-vios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pa-bad { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #fde8e4; color: #a33225; }
.pa-ok { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #e6f2e9; color: #2f6b45; }
.pa-lines { display: grid; gap: 3px; font-size: 12px; color: var(--ink); }
.pa-lines b { color: var(--muted); font-weight: 600; margin-right: 4px; }

.page-actions .pa-warn, .pa-warn { color: #8a6314; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #fdf1d8; }

/* ---------------- push status column ---------------- */
.lib-table td.push-cell { white-space: nowrap; }

/* ---------------- right-side drawer (judge modal) ---------------- */
.drawer-mask {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(36, 31, 25, .42);
  display: flex; justify-content: flex-end;
}
.drawer-panel {
  width: min(940px, 94vw); height: 100%;
  background: var(--card); border-left: 1px solid var(--line-strong);
  box-shadow: -24px 0 70px rgba(30, 24, 16, .28);
  display: flex; flex-direction: column;
  animation: drawer-in .22s ease;
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  background: var(--card-soft);
}
.drawer-head h2 { margin: 0; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.drawer-head .grow { flex: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.judge-drawer .judge { border: none; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.judge-drawer .judge-head { flex-wrap: wrap; }
.media-drawer { width: min(620px, 92vw); }
.media-drawer .media-title { display: none; }
.media-drawer .media-head { padding-top: 4px; }
.media-empty { padding: 28px 20px; font-size: 13px; }

/* ---------------- story-level bulk actions ---------------- */
.story-actions-card { margin: 18px 0 0; }
.story-actions { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.sa-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.sa-label { font-size: 12px; color: var(--muted); margin-right: 2px; }

.story-job { margin-top: 14px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; background: #fff; }
.story-job.running { border-color: #e3cf9c; background: #fffdf6; }
.story-job.error { border-color: #e9b8ae; background: #fff8f6; }
.sj-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.sj-head .err { color: #a33225; }
.sj-msg { font-size: 12px; }
.sj-bar { margin-top: 8px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sj-bar span { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
.sj-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; max-height: 260px; overflow-y: auto; }
.sj-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; padding: 3px 6px; border-radius: 6px; background: var(--card-soft); }
.sj-list li.running { background: #fdf6e6; }
.sj-list li.done { background: #f3faf5; }
.sj-list li.failed { background: #fff5f3; }
.sj-list .ttl { font-weight: 600; }
.sj-list .err, .sj-list .iss { color: #a33225; }

/* ------------------------------ usage page ------------------------------ */
.usage-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.usage-stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-1);
}
.usage-stat strong { font-size: 22px; letter-spacing: -0.01em; }
.usage-label { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.usage-card { padding: 16px 18px; }
.usage-card .table { margin-top: 10px; }
.usage-card .table th { white-space: nowrap; }
.usage-details { margin-top: 12px; }
.usage-details summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2, var(--muted)); }
.usage-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.warn-text { color: var(--amber, #8a5a00); font-size: 12.5px; }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th, .table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.table tbody tr:last-child td { border-bottom: 0; }
.usage-scroll { max-height: 420px; overflow: auto; }

/* ================= story detail: deep-ops layer ================= */
.copy-id { border: 0; background: none; padding: 0; cursor: copy; color: inherit; font: inherit; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; text-align: left; }
.copy-id:hover { color: var(--accent); text-decoration: underline dotted; }
.btn-badge { margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: rgba(255,255,255,.22); }
.btn:not(.primary) .btn-badge { background: var(--bg-deep); color: var(--muted); }
.btn-badge.ok { background: #d9f2e2; color: #1f6b43; }
.btn-badge.warn { background: #fde7c7; color: #8a5a10; }
.btn-badge.run { background: #fff2cc; color: #7a5b07; }
.push-btn.ok { border-color: var(--green-line); color: var(--green); background: var(--green-soft); }
.push-btn.err { border-color: var(--red-line); color: var(--red); background: var(--red-soft); }
.push-btn.warn { border-color: var(--amber-line); color: var(--amber); background: var(--amber-soft); }
.hero-stat b i { font-style: normal; font-size: 13px; color: var(--faint); font-weight: 600; margin-left: 1px; }
.hero-stat.clickable { text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.hero-stat.clickable:hover { border-color: var(--amber-line); box-shadow: 0 2px 8px rgba(168,112,28,.12); }
.hero-stat.clickable.accent { cursor: default; }
.hero-stat.clickable.accent:hover { border-color: var(--line); box-shadow: none; }

.pop-menu { min-width: 220px; }
.pop-menu .menu-group { padding: 8px 10px 3px; font-size: 10.5px; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.pop-menu button span { flex: 1; }
.pop-menu button em { font-style: normal; font-size: 11px; color: var(--faint); }

.bulk-slot:empty { display: none; }
.bulk-slot { display: grid; gap: 10px; margin: -6px 0 18px; }
.bulk-slot .story-job { margin-top: 0; }
.sj-head .grow { flex: 1; }
.sj-details summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 8px; }
.sj-list li[data-goto] { cursor: pointer; }
.sj-list li[data-goto]:hover { outline: 1px solid var(--line-strong); }
.sj-list .num { font: 600 11px var(--mono); color: var(--muted); }

/* sticky nav with status */
.pagenav .nav-chips { display: inline-flex; gap: 4px; }
.pagenav a.issue { position: relative; }
.pagenav a.issue::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fffdf8; }
.nav-step { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 26px; height: 26px; cursor: pointer; color: var(--ink-soft); font-size: 15px; line-height: 1; flex: none; }
.nav-step:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font: 500 12px var(--sans); color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.nav-toggle b { margin-left: 3px; color: var(--red); }
.nav-toggle:hover { border-color: var(--line-strong); }
.nav-toggle.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.nav-toggle.on b { color: #ffb4a6; }
.pagenav .hint { white-space: nowrap; }
#page-list.only-issues .page-card:not(.has-issue) { display: none; }
#page-list.only-issues:not(:has(.has-issue)) + .only-issues-empty { display: block !important; }
.only-issues-empty { padding: 22px; text-align: center; color: var(--muted); }

/* page card */
.page-card.has-issue .page-head { box-shadow: inset 3px 0 0 var(--amber); }
.page-health { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 20px; background: #fffaf0; border-bottom: 1px solid var(--amber-line); }
.ph-label { font-size: 11.5px; color: var(--amber); font-weight: 600; margin-right: 2px; }
.health { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--amber-line); background: #fff; color: var(--amber); border-radius: 999px; padding: 3px 4px 3px 10px; font: 500 12px var(--sans); cursor: pointer; }
.health b { font-weight: 600; background: var(--amber-soft); border-radius: 999px; padding: 1px 8px; }
.health.red { border-color: var(--red-line); color: var(--red); }
.health.red b { background: var(--red-soft); }
.health:hover:not(:disabled) b { background: var(--amber); color: #fff; }
.health.red:hover:not(:disabled) b { background: var(--red); }
.health:disabled { opacity: .5; cursor: progress; }

.mini { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 3px 8px; font: 500 11.5px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s; }
.mini svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mini:disabled { opacity: .45; cursor: progress; }
.page-media figcaption { align-items: center; }
.audio-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; position: relative; }
.audio-row audio { flex: 1; min-width: 0; height: 36px; display: block; }
.audio-row .audio-missing { flex: 1; margin-top: 0; }
.text-tools { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }

[data-busy-label] { position: relative; }
.page-card.job-illustration .media-frame::after,
.page-card.job-voice .audio-row::after,
.page-card.job-chapter .story-text::after,
.page-card.job-chapter .page-extra::after,
.page-card.job-question .page-extra::after {
  content: attr(data-busy-label); position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(255, 253, 248, .78); backdrop-filter: blur(1.5px);
  font: 600 12.5px var(--sans); color: var(--amber);
  animation: busy-pulse 1.6s ease-in-out infinite;
}
@keyframes busy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

.page-actions .pa-jobs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pj { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); max-width: 420px; }
.pj span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj.running { padding-right: 9px; }
.pj.done { background: var(--green-soft); color: var(--green); }
.pj.error { background: var(--red-soft); color: var(--red); }
.pj-x { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 4px; opacity: .7; }
.pj-x:hover { opacity: 1; }
.page-audit:empty { display: none; }
.page-audit { padding: 0 20px 12px; display: grid; gap: 8px; }
.pa-wrap { position: relative; }
.pa-close { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; cursor: pointer; color: var(--faint); font-size: 16px; }
.pa-close:hover { color: var(--ink); }

/* questions: compact analysis */
details.q-analysis { white-space: normal; }
details.q-analysis summary { cursor: pointer; font-size: 11.5px; color: var(--faint); font-weight: 600; letter-spacing: .03em; list-style: none; }
details.q-analysis summary::-webkit-details-marker { display: none; }
details.q-analysis summary::before { content: '▸ '; }
details.q-analysis[open] summary::before { content: '▾ '; }
details.q-analysis summary:hover { color: var(--ink-soft); }
.q-analysis-body { margin-top: 6px; white-space: pre-wrap; }
.q-analysis-missing { margin-top: 10px; font-size: 11.5px; color: var(--amber); }

/* rail: settings collapsed by default */
.rail-settings > summary { cursor: pointer; list-style: none; margin: 0; }
.rail-settings > summary::-webkit-details-marker { display: none; }
.rail-settings > summary::before { content: '▸'; order: 2; color: var(--faint); font-size: 11px; }
.rail-settings[open] > summary::before { content: '▾'; }
.rail-settings[open] > summary { margin-bottom: 12px; }
.rail { max-height: calc(100vh - 90px); overflow-y: auto; }

/* lightbox gallery */
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border: 0; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; cursor: pointer; }
.lb-nav:hover { background: rgba(255,255,255,.24); }
.lb-nav.prev { left: 18px; }
.lb-nav.next { right: 18px; }

.page-card > .page-actions { margin: 0 20px 12px; padding-top: 10px; }