*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: "Dreamland Display Serif";
  src: url("./assets/dreamland-display-serif.woff2?v=20260924-font1") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* 纸面：偏冷的纸白，不用纯白；文字用墨色，不用纯黑 */
  --bg: #f5f4ef;
  --panel: #fbfaf6;
  --control: #ffffff;
  --text: #1e1c19;
  --body: #1e1c19;
  --muted: #6e6960;
  --line: #dcd7cc;
  --line-strong: #b5aea1;
  /* 强调色：褪色朱红（印章色）。金色一律不用 */
  --accent: #9c3f33;
  --heading: #8b2f2b;
  --accent-weak: #f1e7e3;
  --accent-hover: #7c3027;
  --on-accent: #ffffff;
  /* 选中文字：要和纸面分得清（约 1.6:1），选中块上的字仍保持 7:1 以上 */
  --selection-bg: #e8bcae;
  --selection-text: #1e1c19;
  --danger: #8a4a3a;
  --success: #4a6a44;
  /* 浮层用实色，不做半透明玻璃 */
  --glass: #fbfaf6;
  --overlay: rgba(30, 28, 25, 0.34);
  --radius: 2px;
  --sans: "PingFang SC", "Noto Sans SC", "MiSans", "Microsoft YaHei",
    "Hiragino Sans GB", system-ui, sans-serif;
  /* 正文走衬线（宋体系），让阅读页接近纸面刊物 */
  --article-font: "Source Han Serif SC", "Source Han Serif CN", "Source Han Serif SC VF",
    "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", "STSong",
    "Songti TC", "Microsoft YaHei", serif;
  --display-font: "Dreamland Display Serif", var(--article-font);
  --archive-number-font: Georgia, "Times New Roman", serif;
  --vol-2026: #9c3f33;
  --vol-2025: #2e4e73;
  --vol-2024: #2f6b58;
  --vol-2023: #8a5530;
  --vol-2022: #5c4a78;
  --vol-2021: #44504a;
  --vol-2020: #4f6478;
  /* 1–5 分是有序量：同一朱红色相、由浅到深（分越高墨越重）。
     两套值都用 dataviz 校验脚本的 --ordinal 检查过：单色相、亮度单调、相邻亮度差 >= 0.06。 */
  --rating-1: #d98a74;
  --rating-2: #c9664e;
  --rating-3: #ad4632;
  --rating-4: #873122;
  --rating-5: #5e1e14;
  /* 公示页评分维度条（传录 / 档案 / 综合）是分类色：青绿、朱红、靛蓝，
     过了亮度带、饱和度下限、色弱区分度（ΔE >= 8）与对底色 3:1 对比。 */
  --dim-1: #1f8a70;
  --dim-2: #c2452f;
  --dim-3: #3d5bb5;
  --dur-quick: 120ms;
  --dur-page: 200ms;
  --ink-blend: multiply;
}

html[data-theme="dark"] {
  color-scheme: dark;
  /* 夜空墨蓝：取站徽里的蓝色调，让夜间主题与品牌呼应。 */
  --bg: #11141b;
  --panel: #171b24;
  --control: #1b202a;
  --text: #dcd6c8;
  --body: #cfc9bb;
  --muted: #8e94a3;
  --line: #262b37;
  --line-strong: #3a4050;
  --accent: #cf6f5f;
  --heading: #d8806f;
  --accent-weak: #2a1f22;
  --accent-hover: #d1786c;
  --on-accent: #11141b;
  --selection-bg: #6a3a33;
  --selection-text: #ece6d8;
  --danger: #d98a76;
  --success: #93b489;
  --glass: #171b24;
  --overlay: rgba(0, 0, 0, 0.66);
  --vol-2026: #d0705f;
  --vol-2025: #7fa3cc;
  --vol-2024: #72b39b;
  --vol-2023: #cf9a6e;
  --vol-2022: #a996c9;
  --vol-2021: #9fb0a6;
  --vol-2020: #9db2c6;
  /* 夜间反过来：分越高越亮 */
  --rating-1: #9a4231;
  --rating-2: #b9553f;
  --rating-3: #d57058;
  --rating-4: #ea937c;
  --rating-5: #f6bba9;
  --dim-1: #3aa88a;
  --dim-2: #e0674f;
  --dim-3: #7089e0;
  --ink-blend: normal;
}

html,
body {
  height: auto;
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- 布局 ---------- */

.layout {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 268px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel);
  transform: translateX(0);
  transition: transform 0.22s ease;
  will-change: transform;
}

.layout.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
  pointer-events: none;
}

.sidebar-toggle {
  position: fixed;
  top: 50%;
  left: 268px;
  z-index: 30;
  min-width: 18px;
  height: auto;
  min-height: 42px;
  margin-top: -21px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.08em;
  padding: 8px 4px;
  writing-mode: horizontal-tb;
  transform: translateX(-1px);
  transition: left 0.22s ease;
}

.layout.sidebar-collapsed .sidebar-toggle {
  left: 0;
  border-left: 1px solid var(--line);
  transform: none;
  min-width: 22px;
  padding: 10px 5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.2em;
}

.sidebar-toggle:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.sidebar-head {
  flex: none;
  padding: 20px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.site-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.site-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.edition-select,
.search-box {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--control);
  outline: none;
}

.edition-select:focus,
.search-box:focus,
textarea:focus {
  border-color: var(--accent);
}

.toc {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 24px;
}

.toc-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.toc-row.is-starred .toc-item {
  font-weight: 600;
}

.toc-star {
  flex: none;
  width: 28px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--line-strong);
  font-size: 13px;
  line-height: 1;
}

.toc-star:hover,
.toc-star[aria-pressed="true"] {
  color: var(--accent);
}

.toc-item {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 7px 12px 7px 4px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  text-align: left;
  line-height: 1.45;
}

.toc-item:hover {
  background: var(--accent-weak);
}

.toc-item[aria-current="true"] {
  border-left-color: var(--accent);
  background: var(--accent-weak);
  font-weight: 600;
}

.toc-no {
  flex: none;
  min-width: 1.6em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  padding-top: 2px;
}

.toc-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-rated,
.edition-index-rated {
  flex: none;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.toc-empty {
  padding: 16px 18px;
  color: var(--muted);
  font-size: 13px;
}

.content {
  min-width: 0;
  margin-left: 268px;
  padding: 40px 32px 120px;
  transition: margin-left 0.22s ease;
}

.layout.sidebar-collapsed .content {
  margin-left: 0;
}

.reader-frame {
  display: grid;
  grid-template-columns: minmax(0, var(--reader-sheet-width, 720px)) 148px;
  gap: 28px;
  justify-content: center;
  align-items: start;
}

.sheet {
  max-width: var(--reader-sheet-width, 720px);
  width: 100%;
  margin: 0 auto;
}

/* ---------- 篇内目录（百科式） ---------- */

.section-nav {
  position: sticky;
  /* 让开右上角工具条（top:14 + 36 高），否则会被账号/主题按钮压住头两项 */
  top: 68px;
  padding: 4px 0 12px 14px;
  border-left: 1px solid var(--line);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

.section-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-nav-item {
  margin: 0;
}

.section-nav-item.level-3 {
  padding-left: 10px;
}

.section-nav-link {
  display: block;
  width: 100%;
  padding: 5px 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.section-nav-link:hover {
  color: var(--text);
}

.section-nav-link.is-active {
  color: var(--accent);
  font-weight: 600;
}

.section-nav-toggle {
  display: none;
}

/* ---------- 正文 ---------- */

.work-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-strong);
}

/* 档案编号：全站最强的视觉标识，单独成行 */
.work-fileno {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.work-fileno-slash {
  margin: 0 8px;
  color: var(--line-strong);
}

.work-fileno-no {
  color: var(--accent);
  font-weight: 600;
}

.work-title {
  margin: 0;
  font-family: var(--article-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.work-meta {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.work-meta-sep {
  margin: 0 8px;
  color: var(--line-strong);
}

/* 匿名是制度的一部分，不是「作者为空」 */
.work-anon-note {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* 届别与阶段：把「收录 / 评议 / 归档」写进文章页 */
.work-provenance {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.work-provenance-phase {
  color: var(--accent);
}

.work-provenance-sep {
  margin: 0 8px;
  color: var(--line-strong);
}

.prerender-excerpt {
  max-width: 62ch;
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.prerender-excerpt strong {
  color: var(--accent);
  font-weight: 600;
}

.work-jump-row {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

.work-jump-btn {
  letter-spacing: 0.04em;
}

.reading-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 11px;
}

.reading-progress-track {
  flex: 1;
  min-width: 80px;
  height: 3px;
  overflow: hidden;
  background: var(--line);
}

.reading-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.18s ease;
}

.reading-progress-text {
  flex: none;
  min-width: 5.5em;
  text-align: right;
}

.reading-manual-toggle {
  flex: none;
  min-height: 36px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.reading-manual-toggle:hover,
.reading-manual-toggle:focus-visible,
.reading-manual-toggle[aria-pressed="true"] {
  color: var(--accent);
}

.work-meta-details {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.work-meta-details > summary {
  padding: 8px 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}

.work-meta-details-body {
  padding-bottom: 8px;
}

.work-card-fields-primary {
  margin-top: 12px;
}

.work-body {
  font-family: var(--article-font);
  font-size: 18px;
  line-height: 1.95;
  letter-spacing: 0.01em;
  color: var(--body);
  font-synthesis: weight style;
}

.work-body-loading {
  min-height: 12rem;
  margin: 0 !important;
  padding: 2rem 0;
  color: var(--muted);
  text-align: center;
  text-indent: 0 !important;
}

.work-body h2,
.work-body h3,
.work-body h4,
.work-body h5 {
  /* 章节跳转落点要避开顶部工具条与正文内的浮条 */
  scroll-margin-top: 76px;
  text-wrap: balance;
}

.work-body h2 {
  margin: 4.5em 0 1.35em;
  font-family: var(--article-font);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--heading);
}

.work-body h2:first-child {
  margin-top: 34px;
}

.work-body h3 {
  margin: 2.4em 0 0.9em;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--heading);
}

.work-body h4,
.work-body h5 {
  margin: 2em 0 0.75em;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--accent);
}

.work-body h3#sec-引文,
.work-body h2#sec-引文 {
  letter-spacing: 0.2em;
  color: var(--muted);
  font-family: var(--article-font);
  font-size: 13px;
  font-weight: 600;
}

.work-body p {
  margin: 0 0 1.05em;
  text-indent: 2em;
}

.work-body strong {
  font-weight: 700;
}

.work-body em {
  font-style: italic;
}

.work-body p.doc-center,
.work-body p.doc-right,
.work-body p.doc-no-indent,
.work-body p.doc-display {
  text-indent: 0;
}

.work-body.work-no-indent p {
  text-indent: 0;
}

.work-body p.doc-center {
  text-align: center;
}

.work-body p.doc-right {
  text-align: right;
}

.work-body p.doc-display {
  margin: 1.6em 0;
  font-family: var(--article-font);
  font-size: clamp(28px, 7vw, 58px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.08em;
}

.doc-spacer {
  height: 1.3em;
}

.doc-accent {
  color: var(--heading);
}

.doc-muted {
  color: var(--muted);
}

.doc-warm {
  color: #a16a22;
}

.doc-positive {
  color: #517348;
}

.doc-cool {
  color: #486e8a;
}

html[data-theme="dark"] .doc-warm {
  color: #d8ae6d;
}

html[data-theme="dark"] .doc-positive {
  color: #9fc393;
}

html[data-theme="dark"] .doc-cool {
  color: #94b9d2;
}

.doc-small {
  font-size: 0.86em;
}

.doc-ascii-art {
  max-width: 100%;
  margin: 2.4em 0;
  padding: 12px 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable both-edges;
}

.doc-ascii-art pre {
  width: max-content;
  margin: 0 auto;
  color: var(--text);
  font-size: 11pt;
  font-weight: 400;
  font-variant-ligatures: none;
  line-height: 1.06;
  letter-spacing: 0;
  text-indent: 0;
  white-space: pre;
}

.doc-ascii-art .doc-aa-cjk {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
    sans-serif;
}

.doc-ascii-art .doc-aa-symbol {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
}

.work-body blockquote {
  margin: 0 0 1.05em;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
}

.work-body blockquote p {
  text-indent: 0;
}

.work-body ul,
.work-body ol {
  margin: 0 0 1.05em;
  padding-left: 2em;
}

.work-body hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.work-body table {
  width: 100%;
  margin: 0 0 1.05em;
  border-collapse: collapse;
  font-family: var(--article-font);
  font-size: 14px;
}

.work-body .doc-table-wrap {
  max-width: 100%;
  margin: 0 0 1.05em;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.work-body .doc-table-wrap table {
  margin-bottom: 0;
}

.work-body .doc-image,
.work-body figure.doc-image {
  margin: 1.5em 0;
  text-indent: 0;
  text-align: center;
}

.work-body .doc-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.work-body .doc-image figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  text-indent: 0;
}

.work-body th,
.work-body td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: left;
}

.work-body th {
  background: var(--accent-weak);
  font-weight: 600;
}

/* ---------- 通用区块 ---------- */

.panel {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

#score-panel {
  scroll-margin-top: 76px;
  scroll-margin-bottom: 76px;
}

.rating-progress-slot {
  min-width: 0;
}

.rating-progress-slot:not(.is-compact) {
  margin: 18px 0 20px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  background: var(--accent-weak);
}

.rating-progress-head,
.rating-progress-foot,
.rating-progress-compact-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.rating-progress-title {
  display: grid;
  gap: 4px;
}

.rating-progress-kicker {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.rating-progress-title strong {
  color: var(--text);
  font-family: var(--article-font);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rating-progress-percent {
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.rating-progress-track {
  position: relative;
  height: 12px;
  margin: 12px 4px 10px 0;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.rating-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rating-progress-milestone {
  position: absolute;
  top: 50%;
  z-index: 1;
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  opacity: 0.55;
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg);
  transform: translate(-50%, -55%);
}

.rating-progress-milestone.is-final {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

.rating-progress-crown {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  filter: drop-shadow(0 0 1px var(--bg));
}

.rating-progress-milestone.is-unlocked {
  color: var(--accent);
  opacity: 1;
}

.rating-progress-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 18px;
  color: var(--muted);
  font-size: 11px;
}

.rating-progress-next,
.rating-progress-achievement-link {
  color: var(--accent);
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}

.rating-progress-achievement-link {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.rating-progress-next:hover,
.rating-progress-achievement-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rating-progress-loading,
.rating-progress-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.rating-progress-retry {
  padding: 0;
}

.rating-progress-slot.is-compact {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 0 18px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rating-progress-compact-line {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 11px;
}

.rating-progress-compact-line strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.rating-progress-next {
  display: inline-block;
}

.rating-achievement-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  background: var(--bg);
  animation: rating-achievement-arrive 260ms ease-out both;
}

.rating-achievement-copy {
  display: grid;
  gap: 4px;
}

.rating-achievement-copy strong {
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 14px;
}

.rating-achievement-copy span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.rating-achievement-close {
  flex: none;
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.rating-achievement-toast .rating-achievement-close {
  align-self: start;
  padding: 0 2px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.rating-achievement-mark {
  color: var(--accent);
  font-size: 32px;
  text-align: center;
}

.rating-achievement-title {
  margin: 8px 0;
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 24px;
}

.rating-achievement-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow: auto;
}

.rating-achievement-item {
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-weak);
}

.rating-achievement-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
}

.rating-achievement-item-head span {
  color: var(--accent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rating-achievement-item p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.rating-achievement-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  width: min(370px, calc(100vw - 32px));
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 14px 44px rgb(0 0 0 / 20%);
  animation: rating-achievement-arrive 260ms ease-out both;
}

.rating-achievement-toast-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 22px;
}

.rating-achievement-toast-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.rating-achievement-toast-kicker,
.rating-achievement-toast-meta {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.rating-achievement-toast-title {
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 17px;
  line-height: 1.35;
}

.rating-achievement-toast-description {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
}

@keyframes rating-achievement-arrive {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.author-note-panel .panel-title {
  letter-spacing: 0.18em;
}

.author-note-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}

.author-note-meta {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.author-note-input {
  min-height: 120px;
}

.author-note-view .btn-ghost {
  margin-top: 10px;
}

/* ---------- 评分 ---------- */

.rating-area {
  margin-top: 40px;
}

.rating-area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 42px;
}

.rating-area-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.rating-area .rating-sheet {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

.rating-map-column {
  width: 100%;
  min-width: 0;
}

.rating-map-column .rating-progress-slot:not(.is-compact) {
  margin: 0;
}

/* 评议单：只有横线和竖分隔，不做卡片 */
.score-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.score-cell {
  padding: 16px 0 14px 18px;
  text-align: left;
  border-right: 0;
}

.score-cell:first-child {
  padding-left: 0;
}

.score-cell + .score-cell {
  border-left: 1px solid var(--line);
}

.score-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.score-value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.score-value.is-empty {
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
}

.score-count {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.rating-sheet {
  position: relative;
  overflow: visible;
  margin-top: 40px;
  padding: 0 28px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  border-color: var(--line-strong);
  background: var(--panel);
}

.rating-sheet:has(.rate-form) {
  min-height: 286px;
}

.rating-sheet-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -28px 12px;
  padding: 9px 28px;
  border-bottom: 2px solid var(--text);
  background: var(--control);
}

.rating-sheet .panel-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--article-font);
  font-size: 17px;
  color: var(--text);
  letter-spacing: .12em;
}

.rating-sheet-number {
  flex: none;
  color: var(--accent);
  font-family: var(--archive-number-font);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  white-space: nowrap;
}

.rating-sheet .rate-row {
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}

.rating-sheet-stamp {
  position: absolute;
  right: 18px;
  bottom: -22px;
  z-index: 2;
  display: block;
  width: 92px;
  height: 92px;
  color: var(--accent);
  transform: rotate(7deg);
  animation: rating-stamp-in 360ms cubic-bezier(.2, .8, .2, 1) both;
}

.rating-sheet-stamp .seal {
  width: 92px;
  height: 92px;
}

@keyframes rating-stamp-in {
  0% { opacity: 0; transform: rotate(7deg) scale(1.7); }
  100% { opacity: 1; transform: rotate(7deg) scale(1); }
}

.rate-name {
  width: 4em;
  flex: none;
  font-size: 13px;
  color: var(--muted);
}

.rate-scale {
  display: flex;
  flex: none;
  gap: 2px;
}

.rate-star {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	line-height: 1;
	color: var(--line-strong);
	transition: color 0.12s, transform 0.12s;
}

.rate-star .icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.rate-star:hover,
.rate-star:focus-visible {
	color: var(--accent-hover);
	transform: translateY(-1px);
	outline: none;
}

.rate-star:focus-visible {
	box-shadow: 0 0 0 2px var(--accent-weak);
}

.rate-star[data-filled="true"] {
	color: var(--accent);
}

.rate-star[data-filled="true"] .icon {
  fill: currentColor;
  stroke-width: 1;
}

.rate-value {
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rate-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.rate-actions .btn {
  flex: none;
  white-space: nowrap;
}

.rate-hint {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- 评论 ---------- */

.comment-form {
  margin-bottom: 18px;
}

.comment-compose-status {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.comment-compose-status:empty { display: none; }
.comment-compose-status.is-error { color: var(--danger); }

.comment-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.comment-item {
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line);
}

.comment-item:first-child {
  border-top: 1px solid var(--line-strong);
}

/* 批注式：昵称单独一行，日期退到第二行，不要社交 Feed 的头像+气泡 */
.comment-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--muted);
}

.comment-name {
  flex: 0 0 100%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

.comment-body {
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-deleted {
  color: var(--muted);
  font-style: italic;
}

.comment-actions {
  margin-top: 6px;
}

.comment-reply-action,
.comment-thread-toggle {
  border: 0;
  padding: 3px 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.comment-thread {
  margin-top: 6px;
}

.comment-thread-toggle {
  color: var(--muted);
}

.comment-thread-toggle:hover,
.comment-reply-action:hover {
  color: var(--text);
  text-decoration: underline;
}

.comment-replies {
  display: grid;
  gap: 10px;
  margin: 4px 0 0 3px;
  padding: 4px 0 0 12px;
  border-left: 1px solid var(--line-strong);
}

.comment-replies[hidden] {
  display: none;
}

.comment-reply-more {
  display: grid;
  gap: 10px;
}

.comment-reply-more[hidden] {
  display: none;
}

.comment-reply {
  min-width: 0;
  padding: 2px 0 0;
}

.comment-reply-form {
  margin: 10px 0 2px 3px;
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
}

.comment-replying-to {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
}

.comment-delete {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, color 0.16s ease;
}

.comment-item:hover .comment-delete,
.comment-item:focus-within .comment-delete,
.comment-reply:hover .comment-delete,
.comment-reply:focus-within .comment-delete,
.judge-item:hover .comment-delete,
.judge-item:focus-within .comment-delete {
  opacity: 1;
  pointer-events: auto;
}

.comment-delete:hover {
  color: var(--text);
}

/* 「编辑 / 删除」两个按钮只让第一个吃掉左侧空白，避免中间被拉开大缝 */
.comment-head .comment-delete + .comment-delete {
  margin-left: 0;
}

.comment-edit {
  margin-top: 6px;
}

.comment-edit-tools {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.editor-source {
  width: 100%;
  min-height: 260px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--control);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}

.editor-source:focus {
  border-color: var(--accent);
}

.editor-preview {
  max-height: 320px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.editor-actions {
  flex-wrap: wrap;
}

.editor-history {
  display: grid;
  gap: 6px;
}

.editor-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.comment-empty {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.comment-input {
  width: 100%;
  min-height: 76px;
  max-height: calc(5 * 1.55em + 22px);
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--control);
  box-sizing: border-box;
  line-height: 1.55;
  overflow-y: hidden;
  resize: none;
  outline: none;
}

.comment-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.nickname-input {
  width: 130px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--control);
  outline: none;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
}

.counter {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.btn {
  padding: 6px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
}

.btn:hover {
  background: var(--accent-hover);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-ghost {
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--control);
  font-size: 13px;
  color: var(--muted);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ---------- 底部翻页 HUD ---------- */

.hud-pager {
  position: fixed;
  bottom: 14px;
  left: 268px;
  right: 0;
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 0 16px;
  pointer-events: none;
  transition: left 0.22s ease;
}

.layout.sidebar-collapsed ~ .hud-pager,
body:has(.layout.sidebar-collapsed) .hud-pager {
  left: 0;
}

.hud-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(280px, 42vw);
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  color: var(--muted);
  text-align: left;
}

.hud-btn.hud-next {
  flex-direction: row-reverse;
  text-align: right;
  margin-left: auto;
}

.hud-arrow {
  flex: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
}

.hud-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 14em;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.hud-label.is-long {
  font-size: 11px;
}

.hud-label.is-xlong {
  font-size: 10px;
}

.hud-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--line-strong);
}

.hud-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

/* ---------- 手机端底部操作栏 ---------- */

/* 默认不出现，只在 max-width:780px 里 display:flex；
   把「上一页 / 目录 / 下一页」收进同一条栏，替代原本散落的浮块。 */
.mobile-bar {
  display: none;
}

.reader-compact-bar {
  position: fixed;
  z-index: 185;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 14px;
  padding: 7px 24px 9px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-110%);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.reader-compact-bar.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.reader-compact-info {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 14px;
  align-items: baseline;
}

.reader-compact-kicker,
.reader-compact-progress {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-compact-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--article-font);
  font-size: 15px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-compact-progress {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.reader-compact-actions {
  display: flex;
  flex: none;
  gap: 4px;
}

.reader-compact-btn {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
}

.reader-compact-btn:hover,
.reader-compact-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.reader-compact-btn > .icon {
  width: 16px;
  height: 16px;
}

.reader-compact-progress-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--line);
}

.reader-compact-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 240ms ease;
}

.reader-compact-train {
  position: absolute;
  top: 50%;
  left: 0;
  width: 28px;
  height: 17px;
  overflow: visible;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transform: translate(-50%, -55%);
  transition: left 240ms ease;
}

.top-tools.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

/* ---------- 首页 ---------- */

.intro-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.intro-text {
  margin: 0 0 26px;
  color: var(--muted);
  max-width: 46em;
}

.edition-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.edition-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.edition-card.is-empty {
  border-style: dashed;
  background: none;
}

.edition-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.edition-card p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .reader-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-nav {
    position: static;
    max-height: none;
    margin: 0 0 8px;
    padding: 0 0 14px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    order: -1;
  }

  .section-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
  }

  .section-nav-item.level-3 {
    padding-left: 0;
  }
}

@media (max-width: 780px) {
  /* 向下阅读时右上角工具条也一起退场，视口内不留任何浮层 */
  .top-tools.is-hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .top-tools.is-hidden > * {
    pointer-events: none;
  }

  /* 目录抽屉打开时工具条让位，别浮在抽屉上 */
  body:has(.layout:not(.sidebar-collapsed)) .top-tools {
    opacity: 0;
    pointer-events: none;
  }

  /* 正文操作留在标题区，不再做悬浮横条，也不把按钮插进正文阅读流 */
  .work-jump-row {
    position: static;
    top: auto;
    margin: 14px 0 0;
    justify-content: flex-start;
  }

  .comment-delete {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar {
    position: fixed;
    width: min(86vw, 320px);
    height: 100%;
    height: 100dvh;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.04);
    transform: translateX(0);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 18;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(42, 40, 37, 0.36);
    cursor: pointer;
  }

  .sidebar-backdrop:not([hidden]) {
    display: block;
  }

  .layout.sidebar-collapsed .sidebar {
    transform: translateX(-105%);
  }

  .content,
  .layout.sidebar-collapsed .content {
    margin-left: 0;
  }

  /* 桌面端的竖条折叠按钮退场，目录改由底部操作栏的「☰ 目录」承担 */
  .sidebar-toggle {
    display: none;
  }

  /* 浮动翻页药丸退场，翻页同样并入底部操作栏 */
  .hud-pager,
  .layout.sidebar-collapsed ~ .hud-pager,
  body:has(.layout.sidebar-collapsed) .hud-pager {
    display: none;
  }

  /* ---------- 底部操作栏本体 ---------- */

  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 低于抽屉遮罩(18)与侧栏(20)，抽屉打开时被正常盖住 */
    z-index: 16;
    align-items: stretch;
    height: calc(52px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line);
    background: var(--glass);
    transform: translateY(0);
    transition: transform 0.22s ease;
    will-change: transform;
  }

  /* 向下读时整条收起，向上滚或到顶/到底时立刻回来 */
  .mobile-bar.is-hidden {
    transform: translateY(101%);
  }

  .mobile-bar-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
    border: 0;
    border-right: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
  }

  .mobile-bar-btn:last-child {
    border-right: 0;
  }

  .mobile-bar-toc {
    flex: 0 0 auto;
    padding: 0 18px;
    color: var(--text);
    font-weight: 600;
  }

  .mobile-bar-btn:disabled {
    opacity: 0.34;
  }

  .mobile-bar-btn:active:not(:disabled) {
    background: var(--accent-weak);
  }

  .content {
    /* 顶部让开固定的右上「⋯」，否则章节 chips / 标题会和它挤在同一横带 */
    padding: 56px 20px calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .work-body {
    font-size: 17.5px;
    line-height: 1.95;
  }

  .work-body h2,
  .work-body h3,
  .work-body h4,
  .work-body h5 {
    scroll-margin-top: 60px;
  }

  #score-panel {
    scroll-margin-top: 60px;
    scroll-margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .account-hud-text {
    font-size: 12px;
  }

  .modal-dialog {
    width: 100%;
    margin: 8px auto 48px;
    padding: 16px 14px 28px;
  }

  .reader-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 移动端先收成一个目录入口，打开后才展开章节列表，避免压住作品卡。 */
  .section-nav {
    display: block;
    margin: 0 0 16px;
    padding: 0 0 10px;
    scroll-margin-top: 66px;
  }

  .section-nav-list {
    display: none;
    gap: 6px 8px;
    margin-top: 8px;
  }

  .section-nav.is-open .section-nav-list {
    display: flex;
  }

  .section-nav-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    text-align: left;
  }

  .section-nav-toggle::after {
    margin-left: 10px;
    color: var(--muted);
    content: "⌄";
    transition: transform var(--dur-quick) ease;
  }

  .section-nav.is-open .section-nav-toggle::after {
    transform: rotate(180deg);
  }

  .section-nav-toggle-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
  }

  .section-nav-item {
    display: block;
  }

  .section-nav-link {
    display: inline-block;
    width: auto;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: 12px;
    line-height: 1.4;
  }

  .section-nav-link.is-active {
    border-color: var(--accent);
    background: var(--accent-weak);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bar,
  .top-tools {
    transition: none;
  }
}

/* ---------- 账号条 ---------- */

.account-bar:empty {
  display: none;
}

.account-bar {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
}

.account-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.account-name {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}

.btn-tiny {
  padding: 3px 8px;
  font-size: 12px;
}

/* ---------- 右上工具条（账号 + 主题并成一行） ---------- */

.top-tools {
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.top-tools > * {
  pointer-events: auto;
}

.top-more {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.top-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 188px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 30px rgb(36 30 24 / 14%);
}

.top-tools.is-menu-open .top-menu {
  display: flex;
}

.top-results {
  display: none;
}

.top-menu > .top-guide,
.top-menu > .top-reading,
.top-menu > .top-submit,
.top-menu > .top-notifications:not([hidden]),
.top-menu > .theme-toggle {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: 13px;
  line-height: 42px;
  text-align: left;
  white-space: nowrap;
}

.top-menu > .theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.top-menu > [hidden] {
  display: none !important;
}

.top-menu > .top-notifications:not([hidden]),
.top-menu > .theme-toggle {
  border-top: 1px solid var(--line);
}

.top-menu > button:hover {
  background: var(--accent-weak);
  color: var(--text);
}

.top-menu .account-hud {
  display: block;
}

.top-menu .account-hud-btn {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: 13px;
  line-height: 42px;
  text-align: left;
}

.top-menu .account-hud-btn + .account-hud-btn {
  border-top: 1px solid var(--line);
}

.top-menu .account-hud-admin-btn {
  background: none;
  border-color: transparent;
  color: var(--text);
}

.top-menu .account-hud-admin-btn:hover,
.top-menu .account-hud-btn:hover {
  background: var(--accent-weak);
  color: var(--text);
}

.notification-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.notification-count[hidden] { display: none; }

/* ---------- 右上账号管理 HUD ---------- */

.account-hud {
  display: flex;
  gap: 8px;
  align-items: center;
}

.account-hud[hidden] {
  display: none;
}

.account-hud-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.account-hud-admin-btn {
  background: #3e3832;
  color: #fff;
  border-color: #3e3832;
  font-weight: 500;
}

.account-hud-admin-btn:hover {
  background: #231f1c;
  color: #fff;
  border-color: #231f1c;
}

.account-hud-admin-btn .account-hud-icon {
  color: #e8c872;
}

.account-hud-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* 桌面端账号入口已经在主导航中保留，工具条只保留管理后台；
   手机端主导航收起后再恢复账号按钮。 */
.account-hud .account-hud-btn:not(.account-hud-admin-btn) {
  display: none;
}

.top-menu .account-hud .account-hud-btn:not(.account-hud-admin-btn) {
  display: flex;
}

.account-hud-icon {
  flex: none;
  font-size: 14px;
  line-height: 1;
  color: var(--text);
}

.account-hud-text {
  line-height: 1.2;
}

.toc-overview {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
}

.toc-overview:hover,
.toc-overview[aria-current="true"] {
  border-style: solid;
  border-color: var(--accent);
  color: var(--text);
}

.toc-overview-mark {
  flex: none;
  width: 1.4em;
  text-align: center;
}

.phase-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control);
  font-size: 12px;
  color: var(--muted);
}

.phase-chip-label {
  color: var(--text);
  font-weight: 600;
}

.phase-chip-meta {
  color: var(--muted);
  white-space: nowrap;
}

.edition-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.edition-card-head h3 {
  margin: 0;
}

.edition-card-head .phase-chip {
  margin: 0;
}

.edition-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.edition-deadline {
  font-size: 12px;
  color: var(--muted);
}

.toc-star:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- 启动遮罩 ---------- */

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  color: var(--text);
}

.boot-splash[hidden] {
  display: none;
}

.boot-splash-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.boot-splash-sub {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.boot-splash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #6a5a44);
  animation: boot-pulse 1.1s ease-in-out infinite;
}

@keyframes boot-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

body.is-booting .layout,
body.is-booting .account-hud,
body.is-booting .hud-pager,
body.is-booting .sidebar-toggle,
body.is-booting .mobile-bar,
body.is-authing .layout,
body.is-authing .account-hud,
body.is-authing .hud-pager,
body.is-authing .sidebar-toggle,
body.is-authing .mobile-bar {
  visibility: hidden;
}

/* ---------- 阅读主题 ---------- */

.theme-toggle {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ---------- 登录门 ---------- */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

.auth-gate[hidden] {
  display: none;
}

.auth-card {
  width: min(420px, 100%);
  margin: auto 0;
  padding: 0 24px 22px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: 4px 4px 0 var(--line);
}

.auth-card-head {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -24px 22px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--control);
}

.auth-card-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.auth-card-mark {
  color: var(--accent);
  font-family: var(--archive-number-font);
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.auth-title {
  margin: 0;
  font-family: var(--article-font);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.auth-sub {
  margin: 8px 0 18px;
  font-size: 13px;
  color: var(--muted);
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.auth-tab {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--control);
  color: var(--muted);
  font-size: 13px;
}

.auth-tab.is-active {
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-security-note {
  margin: -8px 0 16px;
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--accent-weak);
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.auth-security-label {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.auth-field {
  display: grid;
  gap: 4px;
}

.auth-input,
.auth-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--control);
  outline: none;
}

.auth-card .auth-input,
.auth-card .auth-textarea {
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
}

.auth-textarea {
  min-height: 90px;
  resize: vertical;
  font-family: inherit;
}

.auth-input:focus,
.auth-textarea:focus {
  border-color: var(--accent);
}

.auth-card .auth-input:focus,
.auth-card .auth-textarea:focus {
  border-bottom: 2px solid var(--accent);
}

.auth-error {
  margin: 0;
  min-height: 1.2em;
  font-size: 12px;
  color: var(--danger);
}

.auth-ok {
  margin: 0;
  font-size: 12px;
  color: var(--success);
}

.auth-hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.auth-forgot {
  display: block;
  margin: 8px 0 0 auto;
  padding: 4px 0;
  color: var(--muted);
  font-size: 12px;
}

.auth-recovery-account {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.auth-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.auth-code-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.auth-code-row .auth-input {
  flex: 1;
  min-width: 0;
}

.auth-code-row .btn-ghost {
  flex: none;
  white-space: nowrap;
}

.auth-visitor {
  width: 100%;
  margin-top: 14px;
}

.auth-card .auth-visitor {
  min-height: 44px;
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.auth-card .auth-visitor:hover {
  background: var(--panel);
  color: var(--accent);
}

/* ---------- 模态框 ---------- */

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px));
}

.modal-root[hidden] {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
}

.modal-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: none;
  overflow: visible;
  margin: 12px auto 32px;
  padding: 18px 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.modal-head { align-items: flex-end; margin: -18px -18px 18px; padding: 14px 18px; border-top: 2px solid var(--text); border-bottom: 1px solid var(--line-strong); }
.modal-head-main { display: grid; gap: 5px; min-width: 0; }
.modal-archive-label { color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.modal-title { font-family: var(--display-font); font-size: 20px; }
.modal-head-aside { display: flex; align-items: center; gap: 14px; }
.modal-archive-date { color: var(--muted); font-family: var(--archive-number-font); font-size: 11px; white-space: nowrap; }
.modal-close { padding: 2px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.modal-close:hover { text-decoration: underline; }
.modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::view-transition-old(root),::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 1; }
.comment-panel { border-top: 2px solid var(--text); }
.comment-item,.comment-reply { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel); }
.comment-item:first-child { border-top: 1px solid var(--line); }
.comment-name { font-family: var(--display-font); font-size: 15px; letter-spacing: 0; }
.comment-head > span:not(.comment-name) { font-family: var(--archive-number-font); }
.comment-head.is-judge .comment-name::after { content: "评"; display: inline-block; margin-left: 8px; padding: 1px 3px; border: 1px solid var(--accent); color: var(--accent); font-family: var(--article-font); font-size: 10px; }
.missing-archive { max-width: 700px; margin: 70px auto; padding: 36px; border-top: 2px solid var(--text); }
.missing-archive-stamp { display: block; margin: 18px 0; }
.missing-archive-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.missing-archive-actions a { display: inline-flex; align-items: center; padding: 8px 15px; text-decoration: none; }
body[data-view="missing"] .mobile-bar-prev,body[data-view="missing"] .mobile-bar-next { display: none; }
body[data-view="missing"] .mobile-bar-toc { flex: 1 1 auto; }

.modal-sub {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.modal-meta {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.modal-body {
  display: grid;
  gap: 10px;
}

.share-textarea {
  width: 100%;
  min-height: 188px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--control);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.75;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.share-textarea:focus {
  border-color: var(--accent);
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-card-dialog {
  width: min(900px, 100%);
}

.share-card-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--bg);
}

.share-card-status {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.quote-selection-action {
  position: fixed;
  z-index: 235;
  padding: 7px 11px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(30, 28, 25, 0.16);
  font: 600 13px var(--sans);
  white-space: nowrap;
  cursor: pointer;
}

.quote-selection-action[hidden] {
  display: none;
}

.global-search-hint,
.global-search-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.global-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 12px;
}

.global-search-discovery[hidden] { display: none; }

.global-search-discovery {
  display: grid;
  gap: 10px;
  padding: 4px 0 14px;
}

.global-search-discovery-title {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
}

.global-search-hot-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.global-search-hot-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.global-search-hot-item:hover,
.global-search-hot-item:focus-visible { border-color: var(--accent); }

.global-search-hot-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.global-search-hot-item span {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 520px) {
  .global-search-hot-list { grid-template-columns: 1fr; }
}

.global-search-suggestion-label {
  color: var(--muted);
  font-size: 11px;
}

.global-search-suggestion {
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 12px;
}

.global-search-suggestion:hover,
.global-search-suggestion:focus-visible,
.global-search-suggestion[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-weak);
}

.global-search-recovery {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
}

.global-search-filter-chip,
.global-search-share {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.global-search-share { color: var(--accent); }
.global-search-filter-chip:hover,
.global-search-filter-chip:focus-visible,
.global-search-share:hover,
.global-search-share:focus-visible { border-color: var(--accent); }

.global-search-results {
  max-height: min(52vh, 460px);
  overflow: auto;
  border-top: 1px solid var(--line);
}

.global-search-group-title {
  padding: 13px 0 7px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.global-search-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.global-search-item:hover .global-search-title {
  color: var(--accent);
}

.global-search-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

.global-search-item:focus-visible .global-search-title { color: var(--accent); }
.global-search-match { background: var(--accent-weak); color: inherit; }

@media (max-width: 800px) {
  .global-search-suggestion,
  .global-search-filter-chip,
  .global-search-share { min-height: 44px; }
}

.global-search-no {
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.global-search-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.global-search-title {
  overflow: hidden;
  font-family: var(--article-font);
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-root {
  position: fixed;
  z-index: 260;
  right: 18px;
  bottom: 22px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 10px 28px rgb(20 16 10 / 12%);
  font-size: 13px;
}

.toast-root[hidden] {
  display: none;
}

.modal-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 8px 0;
}

.field-label {
  font-size: 12px;
  color: var(--muted);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}

.report-filter {
  display: grid;
  flex: 1 1 200px;
  min-width: 0;
  gap: 4px;
}

.admin-check {
  font-size: 13px;
  color: var(--text);
}

.admin-user-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.admin-user-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.admin-dir-entry {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control);
}

.admin-dir-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
}

.admin-dir-count {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

.admin-search {
  margin-bottom: 10px;
}

.admin-dir-list {
  max-height: min(50vh, 360px);
  overflow: auto;
  margin-bottom: 12px;
}

/* ---------- 投票条 / 公示 ---------- */

.vote-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-weak);
  font-size: 13px;
  color: var(--muted);
}

.vote-banner.is-public {
  background: var(--control);
}

.results-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 26px;
  padding: 28px 0 22px;
  border-top: 2px solid var(--text);
  border-bottom: 1px solid var(--line-strong);
}

.results-sheet {
  max-width: min(100%, 1240px);
}

.historical-reviews-title {
  margin-top: 28px;
}

.historical-review-list {
  display: grid;
  gap: 10px;
  margin-bottom: 32px;
}

.historical-review-group {
  border: 1px solid var(--line-strong);
  background: var(--control);
}

.historical-review-group > summary {
  padding: 14px 18px;
  color: var(--text);
  font-family: var(--article-font);
  font-weight: 600;
  cursor: pointer;
}

.historical-review-group > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.historical-review-group[open] > summary {
  border-bottom: 1px solid var(--line);
}

.historical-review-work-link {
  display: inline-block;
  margin: 12px 18px 0;
}

.historical-review {
  padding: 16px 18px;
}

.historical-review + .historical-review {
  border-top: 1px solid var(--line);
}

.historical-review-by {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
}

.historical-review-body {
  max-width: 76ch;
  color: var(--text);
  font-family: var(--article-font);
  font-size: 15px;
  line-height: 1.85;
}

.historical-review-body p {
  margin: 0 0 0.9em;
  white-space: pre-line;
}

.historical-work-reviews {
  margin-top: 26px;
}

.historical-work-reviews .historical-review {
  padding-left: 0;
  padding-right: 0;
}

.archive-volume-publication {
  color: var(--accent);
  font-size: 11px;
  white-space: nowrap;
}

.results-kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--archive-number-font);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.results-title {
  margin: 0;
  color: var(--text);
  font-family: var(--display-font);
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1.08;
}

.results-edition {
  margin: 10px 0 0;
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 16px;
  font-weight: 600;
}

.results-head-aside {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.results-head-aside .phase-chip {
  margin: 0;
}

.results-phase-chip {
  display: grid;
  min-width: 196px;
  gap: 5px;
  padding: 10px 14px;
  border: 0;
  border-left: 2px solid var(--accent);
  background: var(--accent-weak);
}

.results-phase-chip .phase-chip-label {
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 15px;
  font-weight: 700;
}

.results-phase-chip .phase-chip-meta {
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* 结果公报印章：原型（气氛审查 p4）是「正式公示」双圈圆章，第三行小字「年份 · 公报」。
   和站内其他印章一样用 SVG + #ink 墨迹滤镜（createResultsStatusMark）；未定稿时外圈虚线。 */
.results-status-mark {
  display: block;
  width: 96px;
  height: 96px;
}

.results-intro {
  max-width: 640px;
  margin-top: 0;
}

.results-rank-title {
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 2px solid var(--text);
  color: var(--text);
  font-family: var(--display-font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

.results-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px 0 34px;
  border-top: 2px solid var(--text);
  border-bottom: 1px solid var(--line-strong);
}

.results-summary-item {
  min-width: 0;
  padding: 15px 16px 16px 0;
}

.results-summary-item + .results-summary-item {
  border-left: 1px solid var(--line);
  padding-left: 14px;
}

.results-summary-item dt {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.results-summary-item dd {
  margin: 0;
  color: var(--text);
  font-family: var(--article-font);
  font-size: 19px;
  font-weight: 600;
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  border-top: 2px solid var(--text);
  font-size: 15px;
}

.rank-table th,
.rank-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.rank-table th {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.rank-table-row td {
  vertical-align: middle;
}

.rank-number,
.rank-work-number,
.rank-score-cell,
.rank-count-cell {
  font-family: var(--archive-number-font);
  font-variant-numeric: tabular-nums;
}

.rank-work-number {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.rank-score-cell,
.rank-count-cell {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.rank-title-cell {
  min-width: 190px;
}

.rank-title-content {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
}

.rank-title-link {
  flex: none;
  max-width: 340px;
  overflow: hidden;
  font-family: var(--article-font);
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-table .rank-title-link {
  color: var(--text);
  text-decoration-color: transparent;
}

.rank-table .rank-title-link:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.rank-title-leader {
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  background-image: radial-gradient(circle, var(--line-strong) 0.8px, transparent 1.2px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}

.result-award-mark {
  display: inline-grid;
  flex: none;
  width: 20px;
  min-height: 36px;
  place-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.rank-author-cell {
  white-space: nowrap;
}

.author-release-mark {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 3px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.rank-table-row-top-1,
.rank-table-row-top-2,
.rank-table-row-top-3 {
  background: var(--accent-weak);
}

.rank-table-row-top .rank-cell {
  color: var(--accent);
  font-weight: 700;
}

.rank-number {
  display: inline-block;
  min-width: 1.5em;
  font-variant-numeric: tabular-nums;
}

.rank-marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
  color: var(--accent);
}

.results-sheet > .distribution-block {
  margin-bottom: 28px;
}

.results-distribution-title {
  margin-top: 40px;
  padding-top: 12px;
  border-top: 2px solid var(--text);
  color: var(--text);
  font-family: var(--display-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

.results-distribution-note {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.result-distribution-list {
  display: grid;
  gap: 12px;
  margin: 0 0 36px;
}

.result-work-distribution {
  min-width: 0;
  border-top: 1px solid var(--line-strong);
}

.result-work-distribution:last-child {
  border-bottom: 1px solid var(--line-strong);
}

.result-work-distribution-summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.result-work-distribution-summary::-webkit-details-marker {
  display: none;
}

.result-work-distribution-summary::after {
  flex: none;
  color: var(--accent);
  content: "+";
  font-family: var(--archive-number-font);
  font-size: 18px;
}

.result-work-distribution[open] > .result-work-distribution-summary::after {
  content: "−";
}

.result-work-distribution-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--article-font);
  font-size: 17px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-work-distribution-meta {
  flex: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.result-work-distribution > .distribution-block {
  margin: 0 0 8px;
}

.distribution-block {
  min-width: 0;
  padding: 16px 18px 15px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
}

.distribution-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.distribution-label {
  color: var(--text);
  font-family: var(--article-font);
  font-size: 16px;
  font-weight: 600;
}

.distribution-total {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.distribution-bar {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.distribution-segment {
  display: block;
  min-width: 0;
  height: 100%;
}

.distribution-legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 12px;
}

.distribution-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.distribution-swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border: 1px solid var(--line-strong);
}

.distribution-score {
  color: var(--text);
  font-weight: 600;
}

.distribution-value {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-overflow: ellipsis;
}

.linkish {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  text-align: left;
  text-decoration: underline;
}

.pie-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.pie-block {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.pie-label {
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.pie {
  width: 96px;
  height: 96px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.pie-legend {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}

.pie-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pie-swatch {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 1px;
}

.result-work {
  margin-bottom: 22px;
}

.special-awards-title {
  margin-top: 34px;
}

.special-awards-intro {
  margin: -14px 0 8px;
}

.special-awards-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin: 0 0 30px;
}

.special-award-item {
  min-width: 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.special-award-name {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.special-award-work {
  font-size: 18px;
  font-weight: 600;
}

.special-award-author,
.special-award-review-pending {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.special-award-excerpt {
  margin: 14px 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--article-font);
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.special-award-review {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.special-award-review summary {
  padding: 10px 0 2px;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
}

.special-award-review-body {
  padding: 4px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.85;
}

.special-award-review-body p {
  margin: 10px 0;
  white-space: pre-wrap;
}

.award-editor-list {
  display: grid;
  gap: 8px;
}

.award-editor-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.award-editor-item > summary {
  padding: 11px 12px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}

.award-editor-fields {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.award-editor-fields .field-label,
.award-config-modal > .field-label {
  display: grid;
  gap: 4px;
}

.judge-box {
  margin: 0 0 18px;
  padding: 14px 14px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-weak);
}

.judge-box-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.judge-item {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.judge-item:first-of-type {
  border-top: 0;
}

.public-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.public-stat-cell {
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  background: var(--panel);
}

@media (max-width: 780px) {
  /* 主题与账号的位置统一由 .top-tools 控制，这里不再单独定位 */
  /* 窄屏右上角只留一个「⋯」，其余操作收进下拉菜单，不再一排按钮压着正文 */
  .top-tools {
    top: 10px;
    right: 10px;
    gap: 0;
    max-width: calc(100vw - 20px);
  }

  .top-more {
    display: block;
    min-width: 42px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--glass);
    color: var(--text);
    font-size: 16px;
    line-height: 1;
  }

  .top-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 152px;
    padding: 4px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
  }

  .top-tools.is-menu-open .top-menu {
    display: flex;
  }

  /* 菜单项：整行、左对齐、无边框，读起来像操作清单而不是一排药丸 */
  .top-menu .top-results:not([hidden]),
  .top-menu .top-reading,
  .top-menu .top-submit,
  .top-menu .top-notifications:not([hidden]),
  .top-menu .theme-toggle,
  .top-menu .account-hud-btn {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--text);
    font-size: 13px;
    line-height: 42px;
    text-align: left;
  }

  .top-menu .theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
  }

  .top-menu .account-hud {
    display: block;
  }

  .top-menu .account-hud-btn {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .top-menu .account-hud .account-hud-btn:not(.account-hud-admin-btn) {
    display: flex;
  }

  .top-menu .account-hud-btn + .account-hud-btn,
  .top-menu .theme-toggle,
  .top-menu .top-notifications {
    border-top: 1px solid var(--line);
  }

  .top-menu .account-hud-admin-btn {
    background: none;
    border-color: transparent;
    color: var(--text);
  }

  .top-menu .account-hud-admin-btn .account-hud-icon {
    color: var(--accent);
  }

  .top-menu .account-hud-admin-btn:hover,
  .top-menu .theme-toggle:hover {
    background: var(--accent-weak);
    color: var(--text);
    border-color: transparent;
  }

  .pie-grid {
    grid-template-columns: 1fr;
  }

  /* 公示排名表在窄屏上横向滚动，避免挤成一团 */
  .rank-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .special-awards-list {
    grid-template-columns: 1fr;
  }

  .public-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 首页与新版信息架构 ---------- */

.site-bar {
  position: sticky;
  top: 0;
  z-index: 210;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 0 42px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transition: transform 0.22s ease;
}

body.is-reader-compact .site-bar {
  pointer-events: none;
  transform: translateY(-110%);
}

.site-brand,
.site-nav button,
.site-account-link {
  border: 0;
  background: none;
  color: inherit;
}

.site-brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-family: var(--article-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* 品牌配置隐藏开关：hidden 属性必须显式压过 display:inline-flex */
.site-brand-mark[hidden] {
  display: none;
}

.site-brand-mark {
  display: inline-flex;
  flex: none;
  width: 38px;
  height: 38px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #f1eadf;
}

.site-brand-mark img {
  display: block;
  width: 128%;
  height: 128%;
  max-width: none;
  object-fit: contain;
  transform: translate(-1%, -2%);
}

.site-brand-text {
  display: inline-block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.site-nav button,
.site-account-link {
  padding: 6px 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.site-nav button:hover,
.site-nav button.is-active,
.site-account-link:hover {
  color: var(--text);
}

.site-nav button.is-active {
  color: var(--accent);
}

.site-search {
  position: relative;
  flex: 1 1 300px;
  min-width: 180px;
  max-width: 460px;
}

.site-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control);
  color: var(--muted);
  transition: border-color 160ms ease, background 160ms ease;
}

.site-search-box:hover,
.site-search-box:focus-within,
.site-search.is-open .site-search-box {
  border-color: var(--accent);
  color: var(--text);
  background: var(--panel);
}

.site-search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.site-search-input::placeholder {
  color: var(--muted);
}

.site-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.site-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 200;
  width: min(680px, calc(100vw - 40px));
  max-height: min(64vh, 560px);
  overflow: auto;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 42px rgb(20 16 10 / 14%);
}

.site-search-panel[hidden] {
  display: none;
}

.site-search-icon {
  color: var(--accent);
  font-size: 25px;
  line-height: 1;
}

.site-search-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search-key {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
}

.site-account-link {
  margin-left: auto;
  border-left: 1px solid var(--line);
  padding-left: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.top-tools {
  top: auto;
}

.sidebar {
  top: 64px;
  height: calc(100vh - 64px);
}

.section-nav {
  top: 86px;
}

.layout.home-active .sidebar,
.layout.home-active .sidebar-toggle {
  display: none;
}

.layout.home-active .content {
  margin-left: 0;
  padding: 0 42px 84px;
}

body:has(.layout.home-active) .mobile-bar {
  display: none;
}

.home-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  align-items: center;
  gap: clamp(36px, 4vw, 56px);
  padding: 48px 0 46px;
  border-bottom: 1px solid var(--line-strong);
}

.home-brand-watermark {
  position: absolute;
  z-index: 0;
  top: 4%;
  right: 3%;
  width: clamp(220px, 25vw, 340px);
  height: auto;
  opacity: 0.075;
  pointer-events: none;
  user-select: none;
}

.home-hero-main,
.home-state {
  position: relative;
  z-index: 1;
}

.home-eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.home-volume-mark {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 10px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.home-volume-mark strong {
  font-family: var(--article-font);
  font-size: clamp(72px, 9vw, 132px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.05em;
}

.home-volume-mark span {
  font-size: 13px;
  letter-spacing: 0.18em;
}

.home-title {
  margin: 28px 0 14px;
  font-family: var(--article-font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

.home-intro {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-family: var(--article-font);
  font-size: 17px;
  line-height: 1.9;
}

.home-state {
  display: grid;
  grid-template-columns: minmax(165px, .55fr) minmax(0, 1.45fr) auto;
  align-items: center;
  gap: 20px 28px;
  border-bottom: 1px solid var(--line-strong);
  padding: 17px 0 22px;
}

@media (min-width: 801px) {
  .home-state > .rating-progress-slot {
    display: none;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
    gap: 32px;
  }

  .home-title {
    font-size: 42px;
  }
}

.home-phase-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--accent);
  font-size: 14px;
}

.home-phase-line > span:last-child {
  color: var(--muted);
}

.phase-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 4px;
}

.home-state .phase-timeline {
  margin: 0;
}

.home-phase-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.home-results-notice {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 15px;
  border-left: 2px solid var(--accent);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
}

.home-results-notice-label {
  flex: none;
  color: var(--accent);
  font-weight: 600;
}

/* 说明文字占满剩余宽度，窄屏时自成一行，入口按钮不被挤成竖条 */
.home-results-notice p {
  flex: 1 1 240px;
  margin: 0;
  line-height: 1.65;
}

.home-phase-actions .home-volume-share {
  margin: 0;
}

.home-state .home-resume-link {
  grid-column: 1 / -1;
  margin: 0;
}

.phase-timeline-item {
  position: relative;
  min-width: 0;
  padding-top: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.phase-timeline-item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  content: "";
}

.phase-timeline-item:not(:first-child)::after {
  position: absolute;
  top: 3px;
  right: calc(100% - 1px);
  left: -8px;
  height: 1px;
  background: var(--line);
  content: "";
}

.phase-timeline-item.is-done,
.phase-timeline-item.is-current {
  color: var(--text);
}

.phase-timeline-item.is-done::before {
  border-color: var(--accent);
  background: var(--accent);
}

.phase-timeline-item.is-current::before {
  border-color: var(--accent);
  background: var(--accent-weak);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.phase-timeline-item.is-done:not(:first-child)::after,
.phase-timeline-item.is-current:not(:first-child)::after {
  background: var(--accent);
}

.phase-timeline-label,
.phase-timeline-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phase-timeline-label {
  font-weight: 600;
}

.phase-timeline-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.phase-timeline-mobile-summary {
  display: none;
}

.home-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 30px 0 32px;
}

.home-stats dt {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.home-stats dd {
  margin: 8px 0 0;
  font-family: var(--article-font);
  font-size: 21px;
  line-height: 1.3;
}

.home-text-link,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 7px;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}

.home-text-link span {
  color: var(--accent);
}

.home-volume-share {
  align-self: flex-start;
  margin-top: 12px;
  color: var(--text);
}

.home-resume-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: baseline;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
}

.home-resume-link:hover,
.home-resume-link:hover .home-resume-title {
  color: var(--accent);
}

.home-resume-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-resume-meta {
  color: var(--accent);
  white-space: nowrap;
}

.home-section {
  border-bottom: 1px solid var(--line-strong);
}

.spotlight-section {
  padding: 64px 0 72px;
}

.spotlight-section.spotlight-rail {
  align-self: center;
  min-width: 0;
  border-bottom: 0;
  border-left: 1px solid var(--line-strong);
  padding: 4px 0 4px 28px;
}

.spotlight-rail .home-section-head {
  display: block;
  margin-bottom: 12px;
  padding-right: 104px;
}

.spotlight-rail .home-section-title {
  margin-top: 3px;
  font-size: 21px;
}

.spotlight-rail .home-section-note {
  display: none;
}

.spotlight-rail .spotlight-date-seal {
  top: -6px;
}

.spotlight-rail .spotlight-item {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-height: 60px;
  padding: 8px 0;
}

.spotlight-rail .spotlight-no {
  font-size: 24px;
}

.spotlight-rail .spotlight-title {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spotlight-rail .spotlight-meta,
.spotlight-rail .spotlight-status {
  display: none;
}

.spotlight-rail .spotlight-excerpt {
  grid-column: 2;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-section-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
  align-items: end;
  gap: 56px;
  margin-bottom: 32px;
}

.spotlight-date-seal {
  position: absolute;
  top: -10px;
  right: 0;
  width: 104px;
  height: 52px;
}

.home-section-title {
  margin: 10px 0 0;
  font-family: var(--article-font);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.home-section-note {
  max-width: 470px;
  justify-self: end;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.spotlight-list {
  border-top: 1px solid var(--line-strong);
}

.spotlight-item {
  display: grid;
  grid-template-columns: 86px minmax(210px, 0.85fr) minmax(220px, 1.5fr) 120px;
  align-items: center;
  gap: 24px;
  min-height: 132px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.spotlight-item:hover .spotlight-title {
  color: var(--accent);
}

.spotlight-no {
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}

.spotlight-title {
  margin: 0;
  font-family: var(--article-font);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.35;
}

.spotlight-meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.spotlight-excerpt {
  margin: 0;
  color: var(--muted);
  font-family: var(--article-font);
  font-size: 15px;
  line-height: 1.8;
}

.spotlight-status {
  justify-self: end;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: right;
}

.spotlight-label {
  display: block;
  color: var(--accent);
}

.spotlight-enter {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.spotlight-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--muted);
  font-size: 13px;
}

.spotlight-retry {
  margin-bottom: 22px;
}

.catalogue-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr);
  gap: 76px;
  padding: 68px 0;
}

.catalogue-note {
  justify-self: start;
  margin: 18px 0 24px;
}

.catalogue-preview-list {
  border-top: 1px solid var(--line-strong);
}

.catalogue-preview-row {
  display: grid;
  grid-template-columns: 58px 1fr 74px;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  font-size: 14px;
  text-decoration: none;
}

.catalogue-preview-row:hover .catalogue-preview-title {
  color: var(--accent);
}

.catalogue-preview-no,
.catalogue-preview-author {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.catalogue-preview-author {
  font-size: 12px;
  text-align: right;
}

.archive-section {
  padding: 64px 0 20px;
}

.archive-volume-list {
  margin-top: 20px;
  border-top: 1px solid var(--line-strong);
}

.archive-volume-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  align-items: baseline;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.archive-volume-row:hover .archive-volume-year,
.archive-volume-row:hover strong {
  color: var(--accent);
}

.archive-volume-year {
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}

.archive-volume-main {
  display: grid;
  gap: 8px;
}

.archive-volume-main strong {
  font-family: var(--article-font);
  font-size: 18px;
  font-weight: 600;
}

.archive-volume-main small {
  color: var(--muted);
  font-size: 12px;
}

.home-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 12px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.home-imprint {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2.2fr);
  gap: 24px 36px;
  margin-top: 24px;
  padding: 28px 0 14px;
  border-top: 3px double var(--line-strong);
  letter-spacing: normal;
}

.home-imprint-head {
  display: grid;
  align-content: start;
  gap: 7px;
}

.home-imprint-kicker {
  margin: 0;
  color: var(--muted);
  font-family: var(--archive-number-font);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.home-imprint-name {
  color: var(--text);
  font-family: var(--article-font);
  font-size: 18px;
  letter-spacing: 0.16em;
}

.home-imprint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-imprint-item {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid var(--line);
}

.home-imprint-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.home-imprint-value {
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
}

.home-imprint-foot {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.edition-shell {
  padding-top: 58px;
}

.edition-overview-head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-strong);
}

.edition-overview-head .home-title {
  max-width: 860px;
  margin-bottom: 12px;
}

.edition-intro {
  max-width: 760px;
}

.edition-intro-toggle {
  display: none;
}

.edition-head-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.edition-head-tools .phase-chip {
  margin: 0;
}

.edition-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 20px 0 12px;
}

.edition-search-wrap {
  display: flex;
  flex: 0 1 280px;
  min-width: 220px;
  height: 38px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  background: var(--control);
}

.edition-search-wrap:focus-within {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.edition-search-wrap .icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.edition-search {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.edition-count-hint {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.edition-filter-row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
}

.edition-choice-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edition-choice-label {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.edition-choice-options {
  display: flex;
  gap: 4px;
}

.edition-choice {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.edition-choice:hover,
.edition-choice.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.edition-choice.is-active {
  background: var(--accent-weak);
  font-weight: 600;
}

.edition-choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.edition-result-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.edition-index {
  border-top: 1px solid var(--line-strong);
}

.edition-index-row {
  display: grid;
  grid-template-columns: 32px 58px minmax(0, 1fr) auto 100px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
}

.edition-index-star {
  border: 0;
  background: none;
  color: var(--line-strong);
  font-size: 17px;
}

.edition-index-star:not(:disabled):hover {
  color: var(--accent);
}

.edition-index-star:disabled {
  cursor: default;
  opacity: 0.45;
}

.edition-index-no {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.edition-index-title {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--article-font);
  font-size: 16px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edition-index-title:hover {
  color: var(--accent);
}

.edition-index-author {
  grid-column: 5;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.edition-index-rated {
  grid-column: 4;
}

.edition-unrated-filter.is-active {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--text);
}

.work-backlinks {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
}

.work-backlinks a {
  color: inherit;
  text-decoration: none;
}

.work-backlinks a:hover {
  color: var(--accent);
}

.work-spotlight-note {
  margin: 10px 0 0;
  color: var(--accent);
  font-size: 12px;
}

.spotlight-admin-slots {
  display: grid;
  gap: 8px;
}

.spotlight-admin-slot {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.spotlight-slot-no {
  padding-top: 9px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.spotlight-slot-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 8px;
}

.spotlight-slot-controls .auth-input:last-child {
  grid-column: 1 / -1;
}

.spotlight-admin-today {
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-weak);
}

.spotlight-admin-today .modal-meta {
  margin: 0;
}

@media (max-width: 800px) {
  .spotlight-date-seal {
    top: 0;
    width: 86px;
    height: 43px;
  }
  .site-bar {
    min-height: 108px;
    flex-wrap: wrap;
    align-content: center;
    gap: 8px;
    padding: 8px 20px;
  }

  .site-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }

  .site-search-box {
    min-height: 42px;
  }

  .site-search-panel {
    left: 0;
    right: 0;
    width: auto;
    max-height: min(70vh, 520px);
  }

  .site-search-key {
    display: none;
  }

  .site-brand {
    gap: 8px;
    font-size: 15px;
  }

  .site-brand-mark {
    width: 32px;
    height: 32px;
  }

  .site-nav,
  .site-account-link {
    display: none;
  }

  .site-bar > .top-tools {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
  }

  .site-bar > .witch-rating-progress {
    display: none;
  }

  .top-tools {
    top: 10px;
  }

  .sidebar {
    top: 108px;
    height: calc(100dvh - 108px);
  }

  .layout.home-active .content {
    padding: 0 20px 70px;
  }

  .home-hero {
    grid-template-columns: 1fr;
    gap: 46px;
    min-height: 0;
    padding: 54px 0 44px;
  }

  .home-brand-watermark {
    display: none;
  }

  .home-state {
    border-top: 1px solid var(--line-strong);
    border-left: 0;
    padding: 18px 0 0;
  }

  .home-state .phase-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }

  .home-volume-mark strong {
    font-size: 74px;
  }

  .home-title {
    font-size: clamp(32px, 9vw, 46px);
  }

  .home-intro {
    font-size: 16px;
  }

  .home-section-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .home-section-note {
    justify-self: start;
  }

  .spotlight-section {
    padding: 52px 0 58px;
  }

  .spotlight-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px 16px;
    padding: 20px 0;
  }

  .spotlight-no {
    font-size: 28px;
  }

  .spotlight-title {
    font-size: 20px;
  }

  .spotlight-excerpt,
  .spotlight-status {
    grid-column: 2;
  }

  .spotlight-status {
    justify-self: start;
    text-align: left;
  }

  .catalogue-section {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 54px 0;
  }

  .catalogue-preview-row {
    grid-template-columns: 42px minmax(0, 1fr) 60px;
    gap: 10px;
    font-size: 13px;
  }

  .archive-section {
    padding-top: 52px;
  }

  .archive-volume-row {
    grid-template-columns: 86px 1fr;
    gap: 14px;
    padding: 22px 0;
  }

  .archive-volume-year {
    font-size: 28px;
  }

  .home-footer {
    flex-direction: column;
    gap: 10px;
    padding-bottom: 6px;
  }

  .home-imprint {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 22px;
  }

  .home-imprint-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-imprint-item {
    padding: 0;
    border-left: 0;
  }

  .home-imprint-foot {
    flex-direction: column;
    gap: 8px;
  }

  .edition-shell {
    padding-top: 42px;
  }

  .edition-index-row {
    grid-template-columns: 24px 42px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .edition-index-author {
    display: none;
  }

  .edition-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .work-backlinks {
    margin-bottom: 14px;
  }

  .phase-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }

  .home-resume-link {
    grid-template-columns: 1fr auto;
  }

  .home-resume-link > span:first-child {
    grid-column: 1 / -1;
  }

  .spotlight-slot-controls {
    grid-template-columns: 1fr;
  }

  .spotlight-slot-controls .auth-input:last-child {
    grid-column: auto;
  }
}

/* ---------- 正文排版保护 ----------
   首页与站点导航改版不应改变既有阅读器正文的黑体阅读样式；
   内容 HTML、段落结构和既有间距规则保持不变。 */
.work-body,
.work-body h2,
.work-body h3,
.work-body h4,
.work-body h5,
.work-body p.doc-display {
  font-family: var(--sans);
}

.work-body {
  font-size: 16.5px;
  line-height: 2.05;
  font-synthesis: weight style;
}

@media (max-width: 800px) {
  .work-body {
    font-size: 17px;
    line-height: 1.95;
  }
}

/* ---------- 卡莉欧碧 · 夜间馆员导览助手 ---------- */
.witch-assistant {
  position: fixed;
  left: 280px;
  bottom: 16px;
  z-index: 24;
  width: 224px;
  height: 320px;
  pointer-events: none;
  color: var(--text);
}

.witch-assistant.is-sidebar-collapsed {
  left: 12px;
}

.witch-assistant[hidden] {
  display: none;
}

.witch-assistant.is-minimized .witch-figure {
  display: none;
}

/* 文章页已有固定的上下篇 HUD，助手向上让出这块交互区域。 */
body[data-view="reader"] .witch-assistant,
body[data-view="results"] .witch-assistant {
  bottom: 64px;
}

.witch-figure {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 224px;
  height: 320px;
  pointer-events: none;
}

.witch-rating-progress {
  position: relative;
  display: grid;
  gap: 5px;
  width: 216px;
  max-width: 216px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  box-shadow: none;
  pointer-events: auto;
  transition: border-color 160ms ease, transform 160ms ease;
}

.site-bar > .witch-rating-progress {
  flex: 0 1 216px;
  width: min(216px, 18vw);
  margin-left: auto;
  padding: 5px 8px;
  gap: 4px;
  border-color: var(--line);
}

.site-bar > .site-account-link {
  margin-left: 0;
}

.site-bar > .witch-rating-progress .witch-rating-progress-note {
  display: block;
}

.witch-rating-progress:hover,
.witch-rating-progress:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
}

.witch-rating-progress[hidden] {
  display: none;
}

.witch-rating-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}

.witch-rating-progress-title {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.witch-rating-progress-count {
  color: var(--accent);
  font-family: var(--article-font);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.witch-rating-progress-track {
  position: relative;
  display: block;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  box-shadow: inset 0 1px 2px rgb(20 16 10 / 12%);
}

/* The desktop task meter stays visually light: title/count, then one clear bar. */
.witch-rating-progress-note {
  display: none;
}

.witch-rating-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.witch-rating-progress-note {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.witch-character {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 224px;
  height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  pointer-events: auto;
  --witch-proximity-x: 0px;
  --witch-proximity-y: 0px;
  --witch-proximity-rotate: 0deg;
  transform: translate3d(
    var(--witch-proximity-x),
    var(--witch-proximity-y),
    0
  ) rotate(var(--witch-proximity-rotate));
  transition: transform 180ms ease, opacity 220ms ease;
}

.witch-character:hover,
.witch-character:focus-visible {
  transform: translate3d(
    var(--witch-proximity-x),
    calc(var(--witch-proximity-y) - 1px),
    0
  ) rotate(var(--witch-proximity-rotate));
}

.witch-assistant.is-reading-dim .witch-character {
  opacity: 0.76;
}

.witch-assistant.is-reading-dim .witch-character:hover,
.witch-assistant.is-reading-dim .witch-character:focus-visible {
  opacity: 1;
}

.witch-character-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 8px 10px rgb(20 16 10 / 8%));
}

.witch-expression-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgb(20 16 10 / 8%));
}

.witch-expression-image[hidden] {
  display: none;
}

html[data-theme="dark"] .witch-expression-image {
  filter: saturate(0.88) hue-rotate(6deg) brightness(0.97)
    drop-shadow(0 8px 10px rgb(20 16 10 / 10%));
}

/* 黑夜模式只把立绘往冷色轻轻推一点，不改变原图的明暗层次。 */
html[data-theme="dark"] .witch-character-image {
  filter: saturate(0.88) hue-rotate(6deg) brightness(0.97)
    drop-shadow(0 8px 10px rgb(20 16 10 / 10%));
}

/* 立绘、轮廓光和蓝方块共用同一个浮动容器，慢速呼吸时不会互相错位。 */
.witch-portrait {
  position: relative;
  width: 224px;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 720 / 710;
  --witch-idle-distance: 2px;
  --witch-idle-duration: 8s;
  animation: witch-fade 420ms ease-out both,
    witch-idle var(--witch-idle-duration) ease-in-out infinite;
}

.witch-assistant.is-drowsy .witch-portrait {
  --witch-idle-distance: 1px;
  --witch-idle-duration: 13s;
}

/* 头发边缘的弱光：同一张立绘加青色投影垫在底层，只动画透明度，不逐帧重算滤镜。 */
.witch-character-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgb(150 225 245 / 62%))
    drop-shadow(0 0 11px rgb(120 200 240 / 32%));
  animation: witch-rim 7s ease-in-out infinite;
}

.witch-character-main-action {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.witch-character-main-action:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* 局部互动热区只在完整桌面立绘上出现。它们不画可见按钮，
   但保留键盘焦点轮廓和足够大的命中区域。 */
.witch-hotspot {
  position: absolute;
  z-index: 4;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.witch-hotspot:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.witch-hotspot-head {
  left: 68%;
  top: 25%;
  width: 27%;
  height: 30%;
  transform: translate(-50%, -50%);
}

.witch-hotspot-book {
  left: 80%;
  top: 77%;
  width: 30%;
  height: 34%;
  transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 18px;
}

/* 悬空的蓝色方块是从立绘里抠出来的独立入口，绕自身中心持续旋转。 */
.witch-cube-action {
  position: absolute;
  left: 89.03%;
  top: 47.11%;
  width: 13.89%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 5;
  visibility: hidden;
}

.witch-cube-action::after {
  content: "搭乘白船";
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 1;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -3px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.witch-cube-action:hover::after,
.witch-cube-action:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.witch-cube-action:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.witch-cube {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: rotate(-5deg);
  --witch-cube-duration: 18s;
  animation: witch-cube-spin var(--witch-cube-duration) linear infinite;
}

html[data-theme="dark"] .witch-cube {
  filter: brightness(1.08) drop-shadow(0 0 4px rgb(130 220 250 / 48%));
}

.witch-assistant.is-drowsy .witch-cube {
  --witch-cube-duration: 40s;
}

.witch-assistant.is-night-shifting .witch-cube {
  filter: brightness(1.2) drop-shadow(0 0 7px rgb(140 230 255 / 72%));
}

.witch-cube-action:hover .witch-cube,
.witch-cube-action:focus-visible .witch-cube {
  filter: drop-shadow(0 0 5px rgb(160 230 250 / 70%));
}

.witch-assistant[data-witch-state="rolling"] .witch-cube {
  animation: witch-cube-roll 500ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

.witch-cube,
.witch-character-glow {
  visibility: hidden;
}

.witch-character.has-image .witch-cube-action,
.witch-character.has-image .witch-cube,
.witch-character.has-image .witch-character-glow,
.witch-character.has-image .witch-forehead-stars {
  visibility: visible;
}

.witch-forehead-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
  pointer-events: none;
}

.witch-forehead-star {
  position: absolute;
  width: 3.4%;
  height: 3.4%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(215 245 255 / 92%) 0 22%,
    rgb(160 230 250 / 60%) 34%,
    rgb(160 230 250 / 0%) 72%
  );
  opacity: 0;
  transform: scale(0.64) rotate(-10deg);
}

.witch-forehead-star:nth-child(1) {
  left: 46.9%;
  top: 20.5%;
}

.witch-forehead-star:nth-child(2) {
  left: 51.8%;
  top: 21.5%;
}

.witch-forehead-star:nth-child(3) {
  left: 57.5%;
  top: 21.2%;
}

.witch-forehead-star:nth-child(4) {
  left: 42.0%;
  top: 25.7%;
}

.witch-forehead-star.is-twinkling {
  animation: witch-forehead-twinkle 420ms ease-out both;
}

.witch-assistant.is-night-shifting .witch-forehead-stars {
  visibility: visible;
}

.witch-assistant.is-night-shifting .witch-forehead-star {
  animation: witch-night-star-flash 620ms ease-out both;
}

.witch-assistant.is-night-shifting .witch-forehead-star:nth-child(2) {
  animation-delay: 45ms;
}

.witch-assistant.is-night-shifting .witch-forehead-star:nth-child(3) {
  animation-delay: 90ms;
}

.witch-assistant.is-night-shifting .witch-forehead-star:nth-child(4) {
  animation-delay: 135ms;
}

html[data-theme="dark"] .witch-forehead-star {
  background: radial-gradient(
    circle,
    rgb(235 250 255 / 98%) 0 24%,
    rgb(135 220 250 / 72%) 38%,
    rgb(135 220 250 / 0%) 74%
  );
}

.witch-fallback {
  display: flex;
  width: 78px;
  height: 78px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  font-size: 30px;
  box-shadow: 0 8px 18px rgb(20 16 10 / 10%);
}

.witch-character.has-image .witch-fallback {
  display: none;
}

.witch-intro-tip,
.witch-event-tip {
  position: absolute;
  right: 122px;
  bottom: 112px;
  max-width: 156px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgb(20 16 10 / 8%);
  pointer-events: none;
}

.witch-intro-tip,
.witch-event-tip {
  right: 96px;
  bottom: 228px;
  color: var(--text);
  opacity: 1;
}

.witch-intro-tip[hidden],
.witch-event-tip[hidden] {
  display: none;
}

.witch-event-tip {
  max-width: 190px;
  white-space: normal;
}

.witch-roll-readout {
  position: absolute;
  left: 89.03%;
  top: calc(47.11% + 84px);
  z-index: 4;
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--accent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgb(20 16 10 / 14%);
  opacity: 0;
  transform: translate(-50%, 0) scale(0.96);
  pointer-events: none;
  transition: opacity 120ms ease, transform 160ms ease;
}

.witch-roll-readout:not([hidden]) {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.witch-roll-readout.is-final {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgb(160 230 250 / 35%);
}

.witch-departure-stars {
  position: absolute;
  inset: 0;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.witch-departure-star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgb(160 230 250 / 75%);
  opacity: 0;
}

.witch-departure-star:nth-child(1) {
  left: 79%;
  top: 36%;
  --star-x: 20px;
  --star-y: 28px;
}

.witch-departure-star:nth-child(2) {
  left: 97%;
  top: 35%;
  --star-x: -23px;
  --star-y: 29px;
}

.witch-departure-star:nth-child(3) {
  left: 77%;
  top: 54%;
  --star-x: 26px;
  --star-y: -8px;
}

.witch-departure-star:nth-child(4) {
  left: 98%;
  top: 55%;
  --star-x: -28px;
  --star-y: -9px;
}

.witch-assistant[data-witch-state="departing"] .witch-departure-stars {
  visibility: visible;
  opacity: 1;
}

.witch-assistant[data-witch-state="departing"] .witch-departure-star {
  animation: witch-star-collapse 560ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

.witch-bubble {
  position: absolute;
  /* 立绘占满左侧 224px，气泡从立绘右缘外侧起排：
     否则立绘盒子会盖住台词首字和第一个快捷按钮，并抢走点击。 */
  left: 236px;
  bottom: 104px;
  width: min(320px, calc(100vw - 264px));
  min-width: 220px;
  padding: 13px 14px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 14px 34px rgb(20 16 10 / 13%);
  z-index: 1;
  opacity: 0;
  transform: translateY(7px) scale(0.97);
  transform-origin: 0 100%;
  pointer-events: none;
  transition: opacity 180ms ease, transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.witch-assistant.is-open .witch-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.witch-assistant.is-speaking .witch-bubble {
  border-color: var(--accent);
}

/* 自动发言保持成单纯台词；点击角色后才展开导航和控制项。 */
.witch-assistant.is-speaking .witch-actions,
.witch-assistant.is-speaking .witch-bubble-foot {
  display: none;
}

.witch-assistant.is-speaking .witch-bubble {
  width: min(280px, calc(100vw - 264px));
  padding-bottom: 12px;
}

.witch-assistant.is-speaking .witch-dialogue {
  min-height: 0;
  margin-bottom: 0;
}

.witch-bubble-head,
.witch-mobile-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.witch-name,
.witch-mobile-title {
  font-size: 14px;
  letter-spacing: 0.08em;
}

.witch-role,
.witch-mobile-role {
  color: var(--muted);
  font-size: 11px;
}

.witch-dialogue,
.witch-mobile-dialogue {
  min-height: 2.8em;
  margin: 9px 0 10px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

.witch-dialogue.is-revealing,
.witch-mobile-dialogue.is-revealing {
  animation: witch-dialogue-reveal 180ms ease-out both;
}

.witch-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* 故事选项按内容占满一行，长句换行时仍从同一起点阅读。 */
.witch-actions > .witch-action[data-story-choice] {
  grid-column: 1 / -1;
  padding: 7px 12px;
  text-align: left;
}

.witch-action,
.witch-mobile-action,
.witch-mobile-close,
.witch-restore,
.witch-menu-entry {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 12px;
}

.witch-action:hover,
.witch-action:focus-visible,
.witch-mobile-action:hover,
.witch-mobile-action:focus-visible,
.witch-mobile-close:hover,
.witch-mobile-close:focus-visible,
.witch-menu-entry:hover,
.witch-menu-entry:focus-visible {
  border-color: var(--accent);
  background: var(--accent-weak);
}

.witch-action-muted {
  color: var(--muted);
}

.witch-bubble-foot {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
}

.witch-bubble-foot .witch-action {
  min-height: 30px;
  padding: 3px 8px;
}

.witch-bubble-foot .witch-action-muted[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text);
}

.witch-restore {
  position: absolute;
  right: 0;
  bottom: 3px;
  display: grid;
  width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  font-size: 20px;
  box-shadow: 0 8px 20px rgb(20 16 10 / 12%);
  pointer-events: auto;
}

.witch-restore[hidden] {
  display: none;
}

.witch-mobile-panel {
  display: none;
}

@keyframes witch-idle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--witch-idle-distance) * -1));
  }
}

@keyframes witch-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes witch-rim {
  0%,
  100% {
    opacity: 0.14;
  }
  45% {
    opacity: 0.5;
  }
}

@keyframes witch-cube-spin {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(355deg);
  }
}

@keyframes witch-cube-roll {
  0% {
    transform: rotate(-5deg) scale(1);
    filter: drop-shadow(0 0 0 rgb(160 230 250 / 0%));
  }
  16% {
    transform: rotate(-5deg) scale(0.95);
  }
  100% {
    transform: rotate(715deg) scale(1.04);
    filter: drop-shadow(0 0 7px rgb(160 230 250 / 70%));
  }
}

@keyframes witch-dialogue-reveal {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes witch-forehead-twinkle {
  0% {
    opacity: 0;
    transform: scale(0.64) rotate(-10deg);
  }
  32% {
    opacity: 0.82;
    transform: scale(1.08) rotate(0deg);
  }
  58% {
    opacity: 0.5;
    transform: scale(0.92) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(-6deg);
  }
}

@keyframes witch-night-star-flash {
  0% {
    opacity: 0;
    transform: scale(0.64) rotate(-10deg);
  }
  30% {
    opacity: 0.92;
    transform: scale(1.12) rotate(0deg);
  }
  58% {
    opacity: 0.58;
    transform: scale(0.96) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(-6deg);
  }
}

@keyframes witch-star-collapse {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  20% {
    opacity: 0.9;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--star-x), var(--star-y)) scale(0.2);
  }
}

@keyframes witch-cube-depart {
  0% {
    transform: rotate(-5deg) scale(1);
    filter: drop-shadow(0 0 0 rgb(160 230 250 / 0%));
  }
  45% {
    transform: rotate(150deg) scale(1.14);
    filter: drop-shadow(0 0 9px rgb(160 230 250 / 85%));
  }
  100% {
    transform: rotate(355deg) scale(0.96);
    filter: drop-shadow(0 0 2px rgb(160 230 250 / 35%));
  }
}

body.is-white-ship-departing #content {
  opacity: 0.16;
  filter: blur(1.5px);
  transform: translateY(4px);
  transition: opacity 240ms ease, filter 240ms ease, transform 240ms ease;
}

body.is-white-ship-departing .witch-cube {
  animation: witch-cube-depart 360ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

/* 窄桌面或短屏缩小立绘；正文安全边距在文件末尾按可用宽度同步调整。 */
@media (min-width: 781px) and (max-width: 1439px),
  (min-width: 781px) and (max-height: 699px) {
  .witch-assistant,
  .witch-assistant.is-sidebar-collapsed {
    left: 12px;
    right: auto;
    bottom: 12px;
    width: 84px;
    height: 72px;
  }

  .witch-figure {
    right: 0;
    width: 72px;
    height: 72px;
  }

  .witch-character {
    width: 72px;
    height: 72px;
  }

  .witch-figure,
  .witch-character {
    bottom: 0;
  }

  .witch-character-image {
    max-width: 100%;
    height: 100%;
  }

  .witch-portrait {
    width: 72px;
    --witch-idle-distance: 1px;
  }

  /* 迷你入口仍保留白船方块作为主入口，只隐藏放大后容易变成噪点的轮廓光。 */
  .witch-hotspot {
    display: none;
  }

  .witch-cube-action {
    display: block;
    left: 110%;
    top: 47%;
    width: 34px;
    height: 34px;
  }

  .witch-roll-readout {
    left: 110%;
    top: calc(47% + 26px);
    transform: translate(-50%, 0) scale(0.96);
  }

  .witch-roll-readout:not([hidden]) {
    transform: translate(-50%, 0) scale(1);
  }

  .witch-character-glow {
    display: none;
  }

  .witch-forehead-stars {
    display: none;
  }

  .witch-fallback {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }

  .witch-intro-tip,
  .witch-event-tip {
    display: none;
  }

  .witch-bubble {
    right: auto;
    left: 0;
    bottom: 82px;
    width: min(320px, calc(100vw - 24px));
    min-width: min(220px, calc(100vw - 24px));
    transform-origin: 0 100%;
  }
}

/* 大立绘时把对话框放到立绘头肩上方，而不是向右伸进正文列。bottom 使用
   容器高度的比例，不依赖某个显示器的固定像素高度，因此缩放或改动立绘尺寸
   时，气泡仍会跟随人物而不会悬在远处。 */
@media (min-width: 1440px) and (min-height: 700px) {
  .witch-bubble {
    left: 0;
    right: auto;
    bottom: 67.5%;
    width: min(300px, calc(100vw - 32px));
    min-width: min(220px, calc(100vw - 32px));
    transform-origin: 0 100%;
  }

  .witch-assistant.is-speaking .witch-bubble {
    width: min(280px, calc(100vw - 32px));
  }
}

@media (max-width: 780px) {
  .witch-assistant {
    display: none;
  }

  .top-menu .witch-menu-entry {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    text-align: left;
  }

  .top-menu .witch-menu-entry[hidden] {
    display: none;
  }

  .witch-mobile-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 17;
    display: block;
    max-height: min(46vh, 360px);
    overflow: auto;
    padding: 13px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 14px 34px rgb(20 16 10 / 16%);
  }

  .witch-mobile-panel[hidden] {
    display: none;
  }

  .witch-mobile-head {
    align-items: center;
  }

  .witch-mobile-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    margin-right: 2px;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--accent);
    font-size: 18px;
  }

  .witch-mobile-title-wrap {
    display: grid;
    gap: 1px;
    flex: 1;
  }

  .witch-mobile-close {
    min-width: 56px;
    min-height: 40px;
    padding: 5px 8px;
  }

  .witch-mobile-dialogue {
    min-height: 0;
    margin: 12px 0;
  }

  .witch-mobile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .witch-mobile-action {
    min-height: 44px;
    padding: 5px 4px;
  }
}

@media (min-width: 781px) {
  .top-menu .witch-menu-entry {
    display: none;
  }
}

/* Give the persistent Witch dock its own gutter. */
@media (min-width: 1440px) and (min-height: 700px) {
  .layout.sidebar-collapsed:not(.home-active) .content {
    padding-left: 104px;
  }
}

@media (min-width: 1440px) and (max-width: 1519px) and (min-height: 700px) {
  .layout.home-active .content {
    padding-left: 320px;
    padding-right: 42px;
  }

  .layout.sidebar-collapsed:not(.home-active) .content {
    padding-left: 320px;
  }

}

@media (min-width: 1520px) and (max-width: 1771px) and (min-height: 700px) {
  .layout.home-active .content {
    padding-left: 320px;
    padding-right: 42px;
  }

  .layout.sidebar-collapsed:not(.home-active) .content {
    padding-left: 320px;
  }
}

@media (min-width: 1772px) and (min-height: 700px) {
  .layout.sidebar-collapsed:not(.home-active) .content {
    padding-left: 280px;
  }

  /* 统计、公示沿用首页与目录的宽屏版心；阅读页仍保留女巫侧边空间。 */
  body[data-view="results"] .layout.sidebar-collapsed .content {
    padding-left: 42px;
    padding-right: 42px;
  }
}

/* 把左侧这条留白画成有意的版心边界：一条很淡的竖线，而不是空着 */
@media (min-width: 1440px) and (max-width: 1771px) and (min-height: 700px) {
  .layout.home-active .content {
    background-image: linear-gradient(
      to right,
      transparent 319px,
      var(--line) 319px,
      var(--line) 320px,
      transparent 320px
    );
    background-repeat: no-repeat;
    background-size: 320px 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1439px),
  (min-width: 1024px) and (max-height: 699px) {
  .layout.home-active .content {
    padding-left: clamp(172px, calc(40vw - 237.6px), 244px);
    padding-right: 42px;
  }

  .layout.sidebar-collapsed:not(.home-active) .content {
    padding-left: clamp(172px, calc(40vw - 237.6px), 244px);
  }

}

@media (min-width: 801px) and (max-width: 1023px) {
  /* 左下迷你小女巫连同右侧的白船方块约占到 120px，正文从 128px 起，免得方块压在正文上 */
  .layout.home-active .content {
    padding-left: 128px;
    padding-right: 24px;
  }

  .layout.sidebar-collapsed:not(.home-active) .content {
    padding-left: 128px;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .site-bar {
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 8px 20px;
  }

  .site-bar > .site-brand {
    order: 1;
  }

  .site-bar > .site-nav {
    order: 2;
  }

  .site-bar > .site-search {
    order: 4;
    flex: 1 1 280px;
    max-width: none;
  }

  .site-bar > .site-account-link {
    order: 3;
    margin-left: auto;
  }

  .site-bar > .top-tools {
    order: 6;
    margin-left: 0;
  }

  .site-bar > .witch-rating-progress {
    order: 5;
    flex: 0 1 216px;
    width: min(216px, 100%);
    margin-left: 0;
  }
}

@media (min-width: 801px) and (max-width: 1000px) {
  .spotlight-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px 16px;
  }

  .spotlight-excerpt,
  .spotlight-status {
    grid-column: 2;
  }

  .spotlight-status {
    justify-self: start;
    text-align: left;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .home-state {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .home-state .phase-timeline {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .home-phase-actions {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .witch-character-image,
  .witch-expression-image,
  .witch-portrait,
  .witch-character-glow,
  .witch-cube-action,
  .witch-cube,
  .witch-bubble,
  .witch-dialogue,
  .witch-mobile-dialogue {
    animation: none;
    transition: none;
  }

  .rating-achievement-toast,
  .rating-progress-fill,
  .witch-rating-progress,
  .witch-rating-progress-fill {
    animation: none;
    transition: none;
  }

  .witch-departure-stars {
    display: none;
  }

  .witch-forehead-stars {
    display: none;
  }

  .witch-dialogue.is-revealing,
  .witch-mobile-dialogue.is-revealing {
    opacity: 1;
    filter: none;
    transform: none;
  }

  body.is-white-ship-departing #content {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* 刊物目录与历届卷宗：界面视觉，不影响作品正文。 */
[data-vol="2026"] { --vol: var(--vol-2026); }
[data-vol="2025"] { --vol: var(--vol-2025); }
[data-vol="2024"] { --vol: var(--vol-2024); }
[data-vol="2023"] { --vol: var(--vol-2023); }
[data-vol="2022"] { --vol: var(--vol-2022); }
[data-vol="2021"] { --vol: var(--vol-2021); }
[data-vol="2020"] { --vol: var(--vol-2020); }

::selection { background: var(--selection-bg); color: var(--selection-text); }
/* 阅读设置「选中 · 醒目」：实心朱红，方便用选中把正文分段来读 */
.work-body.is-selection-strong ::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

.home-volume-mark strong,
.home-stats dd,
.spotlight-no,
.catalogue-preview-no,
.edition-index-no {
  font-family: var(--archive-number-font);
  font-variant-numeric: oldstyle-nums;
}

.home-title,
.work-title,
.spotlight-title,
.archive-volume-main strong {
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.home-brand-watermark { opacity: 0.045; }
.home-section-title { font-weight: 700; }

.home-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 34px 0 12px;
}
.home-masthead-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-masthead-brand img { width: 46px; height: 46px; object-fit: contain; }
.home-masthead-brand strong {
  display: block;
  color: var(--text);
  font-family: var(--article-font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .32em;
}
.home-masthead-brand small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--archive-number-font);
  font-size: 12px;
  font-style: italic;
  letter-spacing: .14em;
}
.home-masthead-issue {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-family: var(--archive-number-font);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .26em;
  text-align: right;
  text-transform: uppercase;
}
.home-masthead-rule {
  height: 6px;
  border-top: 3px solid var(--text);
  border-bottom: 1px solid var(--text);
}
.home-hero {
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .92fr);
  gap: 52px;
  padding: 34px 0;
}

@media (min-width: 801px) and (max-width: 1000px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .spotlight-section.spotlight-rail {
    width: 100%;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
    padding: 22px 0 0;
  }
}
.home-colophon {
  display: flex;
  flex-wrap: wrap;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.home-colophon > div {
  min-width: 0;
  padding: 11px 22px 11px 0;
  margin-right: 22px;
  border-right: 1px solid var(--line);
}
.home-colophon > div:last-child { margin-right: 0; border-right: 0; }
.home-colophon dt {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .24em;
}
.home-colophon dd {
  margin: 3px 0 0;
  color: var(--text);
  font-family: var(--article-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.home-colophon .is-countdown dd { color: var(--accent); }
.catalogue-preview-list,
.edition-index { border-top: 3px solid var(--text); }
.catalogue-preview-list { border-bottom: 1px solid var(--text); }
.catalogue-preview-row {
  grid-template-columns: 48px minmax(0, auto) minmax(18px, 1fr) 74px;
  align-items: baseline;
  column-gap: 12px;
  transition: background var(--dur-quick) ease;
}
.catalogue-preview-row:hover,
.edition-index-row:hover { background: var(--panel); }
.catalogue-preview-row:hover .catalogue-preview-no,
.edition-index-row:hover .edition-index-no { color: var(--accent); }
.catalogue-preview-title,
.edition-index-title { font-family: var(--article-font); }
.catalogue-preview-leader,
.edition-index-leader {
  height: 1px;
  min-width: 18px;
  align-self: center;
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.4px);
  background-size: 7px 3px;
  background-repeat: repeat-x;
}
.catalogue-preview-no,
.edition-index-no { font-variant-numeric: tabular-nums; }
.catalogue-preview-author { white-space: nowrap; }

.archive-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 14px;
}
.archive-section-head .home-eyebrow { color: var(--accent); font-family: var(--archive-number-font); font-size: 15px; letter-spacing: 0; }
.archive-section-head .home-section-title { margin: 0; font-size: 15px; letter-spacing: .12em; }
.archive-volume-list {
  display: flex;
  align-items: end;
  gap: 14px;
  overflow-x: auto;
  margin-top: 36px;
  padding: 8px 2px 0;
  border-top: 0;
  border-bottom: 6px solid var(--line-strong);
  scrollbar-width: thin;
}
.archive-volume-row {
  display: flex;
  flex: 0 0 112px;
  height: 430px;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  padding: 0 0 14px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  background: var(--panel);
  transition: transform var(--dur-page) cubic-bezier(.2, .7, .2, 1), border-color var(--dur-quick) ease;
}
.archive-volume-row:nth-child(2n) { height: 412px; }
.archive-volume-row:nth-child(3n) { height: 440px; }
.archive-volume-row:nth-child(4) { height: 404px; }
.archive-volume-row:nth-child(5) { height: 420px; }
.archive-volume-row:nth-child(6) { height: 396px; }
.archive-volume-row:nth-child(7) { height: 386px; }
.archive-volume-row:hover { transform: translateY(-14px); border-color: var(--vol); box-shadow: 0 16px 30px rgba(30, 28, 25, 0.16); }
.archive-volume-row:hover .archive-volume-year { filter: brightness(1.12); }
.archive-volume-row:focus-visible { z-index: 2; transform: translateY(-14px); box-shadow: 0 16px 30px rgba(30, 28, 25, 0.16); }
.archive-volume-row:focus-visible .archive-volume-year { filter: brightness(1.12); }
.archive-volume-row:active { transform: translateY(-6px); }
.archive-volume-year,
.archive-volume-number {
  display: block;
  flex: none;
  background: var(--vol);
  color: var(--on-accent);
  text-align: center;
}
.archive-volume-year {
  height: 44px;
  padding: 15px 4px 0;
  font-family: var(--archive-number-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.archive-volume-main {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.archive-volume-main .archive-volume-number {
  width: 100%;
  min-height: 32px;
  padding: 1px 3px 9px;
  color: var(--on-accent);
  font-family: var(--archive-number-font);
  font-size: 11px;
  font-style: italic;
  letter-spacing: .06em;
}
html[data-theme="dark"] .archive-volume-year,
html[data-theme="dark"] .archive-volume-main .archive-volume-number { color: var(--bg); }
.archive-volume-emblem {
  padding: 16px 0 12px;
  color: var(--vol);
  line-height: 1;
}
.archive-volume-emblem svg { display: block; width: 26px; height: 26px; }
.archive-volume-emblem .icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.archive-volume-main strong {
  min-height: 0;
  flex: 1;
  writing-mode: vertical-rl;
  white-space: nowrap;
  overflow: visible;
  padding: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
}
.archive-volume-row:hover strong { color: var(--text); }
.archive-volume-row:hover .archive-volume-year { color: var(--on-accent); }
html[data-theme="dark"] .archive-volume-row:hover .archive-volume-year { color: var(--bg); }
.archive-volume-status {
  flex: none;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .2em;
}
.archive-volume-seal {
  color: var(--accent);
}
.archive-volume-seal svg { display: block; width: 34px; height: 34px; }
.archive-volume-seal.is-vertical svg { width: 28px; height: auto; }
.archive-volume-caption { margin-top: 10px; color: var(--muted); font-size: 12px; letter-spacing: .1em; }

.seal {
  display: inline-block;
  color: var(--accent);
  mix-blend-mode: var(--ink-blend);
  opacity: .9;
}
.seal text { font-family: var(--article-font); }
.seal-tilt-l { transform: rotate(-8deg); }
.seal-tilt-r { transform: rotate(6deg); }

.edition-shell { border-top: 3px solid var(--vol, var(--accent)); }
.edition-overview-head .home-eyebrow { color: var(--vol, var(--accent)); }
.edition-anonymous-note {
  margin: 12px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--vol, var(--accent));
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}
.edition-index-row {
  grid-template-columns: 32px 58px minmax(0, 1fr) minmax(20px, .35fr) auto 100px;
  padding: 0 8px;
  transition: background var(--dur-quick) ease;
}
.edition-index-title { text-decoration: none; }
.edition-index-author { grid-column: 6; }
.edition-index-rated { grid-column: 5; }
.edition-index-rated {
  display: grid;
  width: 46px;
  height: 38px;
  place-items: center;
}
.edition-index-rated .seal {
  width: 36px;
  height: 36px;
}
.edition-index-rated.has-scores {
  position: relative;
}
.edition-index-rated-trigger {
  display: grid;
  width: 46px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.edition-index-rated-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.edition-index-rating-tip {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 168px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  box-shadow: 0 8px 20px rgb(20 16 10 / 14%);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity var(--dur-quick) ease, transform var(--dur-quick) ease, visibility var(--dur-quick) ease;
}
.edition-index-rating-tip-title {
  margin-bottom: 5px;
  color: var(--accent);
  font-weight: 700;
}
.edition-index-rating-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.edition-index-rating-tip-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.edition-index-rated.tip-above .edition-index-rating-tip {
  top: auto;
  bottom: calc(100% + 6px);
}
.edition-index-rated.is-open .edition-index-rating-tip,
.edition-index-rated-trigger:focus-visible + .edition-index-rating-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (hover: hover) {
  .edition-index-rated.has-scores:not(.is-dismissed):hover .edition-index-rating-tip {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}
.edition-index-row:hover,
.edition-index-row:focus-within,
.edition-index-row:has(.edition-index-rated.is-open) {
  position: relative;
  z-index: 3;
}
.toc-star .icon,
.edition-index-star .icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.toc-star[aria-pressed="true"] .icon,
.edition-index-star[aria-pressed="true"] .icon {
  color: var(--accent);
  fill: var(--accent-weak);
}

@media (max-width: 800px) {
  .home-masthead {
    align-items: center;
    padding: 20px 0 12px;
  }
  .home-masthead-brand { gap: 8px; }
  .home-masthead-brand img { width: 32px; height: 32px; }
  /* 顶栏已经有中文站名，刊头这里只留英文副标题，避免上下重复 */
  .home-masthead-brand strong { display: none; }
  .home-masthead-brand small { display: block; margin-top: 0; font-size: 12px; }
  .home-masthead-issue { display: none; }
  .home-hero {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 34px 0 28px;
  }
  .spotlight-section.spotlight-rail {
    border-top: 1px solid var(--line-strong);
    border-left: 0;
    padding: 22px 0 0;
  }
  .home-state {
    grid-template-columns: 1fr;
    gap: 18px;
    border-top: 0;
    padding: 18px 0 28px;
  }
  .home-state .phase-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .home-phase-actions {
    flex-wrap: wrap;
  }
  .home-colophon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-colophon > div { margin: 0; padding: 10px 12px 10px 0; border-right: 0; }
  .home-colophon > div:nth-child(odd) { border-right: 1px solid var(--line); }
  .home-colophon > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .archive-volume-list {
    scroll-snap-type: x proximity;
  }
  .archive-volume-row {
    scroll-snap-align: start;
  }
  .catalogue-preview-row { grid-template-columns: 42px minmax(0, 1fr) 60px; }
  .catalogue-preview-leader,
  .edition-index-leader { display: none; }
  .edition-index-row { grid-template-columns: 24px 42px minmax(0, 1fr) auto; }
  .edition-index-rated { grid-column: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .rating-sheet-stamp { animation: none; }
  .edition-index-rating-tip { transition: none; }
  .archive-volume-row,
  .catalogue-preview-row,
  .edition-index-row { transition: none; }
  .archive-volume-row:hover { transform: none; }
}

/* 原型页的线性图标：文字仍保留在按钮里，图形只负责给入口定调。 */
.icon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.icon-label > .icon,
.site-search-icon > .icon,
.hud-arrow > .icon {
  display: block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.top-more.icon-label { min-width: 42px; }
.top-more.icon-label > .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.site-search-icon > .icon { width: 18px; height: 18px; stroke-width: 1.5; }
.theme-toggle > .icon { width: 16px; height: 16px; }
.sidebar-toggle > .icon { width: 17px; height: 17px; }
.mobile-bar-btn > .icon { width: 17px; height: 17px; }
.hud-arrow > .icon { width: 20px; height: 20px; stroke-width: 1.5; }

/* hidden 必须优先于图标按钮的 display，避免隐藏入口被重新画出来。 */
.icon-label[hidden] { display: none !important; }
@media (min-width: 781px) {
  .top-more.icon-label { display: inline-flex; }
}

@media (min-width: 801px) {
  .edition-shell.is-anonymous-phase .edition-index-row {
    grid-template-columns: 32px 58px minmax(0, 1fr) minmax(20px, .35fr) minmax(140px, auto) 46px;
  }
}

.edition-index-row {
  grid-template-columns: 32px 58px minmax(0, auto) minmax(20px, 1fr) minmax(140px, auto) 46px 100px;
}
.edition-index-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  white-space: nowrap;
}
.edition-index-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edition-index-spotlight {
  flex: none;
  padding: 2px 5px 1px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
}
.edition-index-meta {
  grid-column: 5;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.edition-index-read {
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: conic-gradient(currentColor var(--read, 0%), transparent 0);
}
.edition-index-rated { grid-column: 6; }
.edition-index-author { grid-column: 7; }

.work-head { position: relative; }
.work-spotlight-seal {
  position: absolute;
  top: 28px;
  right: 0;
  width: 104px;
  height: 52px;
  color: var(--accent);
  pointer-events: none;
}
.work-spotlight-seal + .reading-progress { margin-top: 18px; }

@media (max-width: 800px) {
  .edition-index-row { grid-template-columns: 24px 42px minmax(0, 1fr) auto; }
  .edition-index-meta { display: none; }
  .edition-index-rated { grid-column: 4; }
  .work-spotlight-seal { top: 0; right: -4px; width: 86px; height: 43px; }
}

@media (max-width: 780px) {
  .sidebar-toggle.icon-label { display: none; }
}

/* 馆藏卡式作品页头：元信息集中在卡片里，正文从卡片下方开始。 */
.work-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.work-card {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--panel);
}

.work-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .16em;
}

.work-card-label {
  white-space: nowrap;
}

.work-card-number {
  color: var(--accent);
  font-family: var(--archive-number-font);
  font-size: 15px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.work-card-body {
  position: relative;
  padding: 28px 34px 30px;
}

.work-card .work-fileno {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--article-font);
  font-size: 13px;
  letter-spacing: .12em;
}

.work-card .work-fileno-slash {
  margin: 0 8px;
  color: var(--line-strong);
}

.work-card .work-fileno-no {
  color: var(--text);
  font-weight: 600;
}

.work-card .work-title {
  max-width: calc(100% - 112px);
  margin: 0;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.25;
}

.work-card:not(.has-spotlight) .work-title {
  max-width: none;
}

.work-card-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.work-card-field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  min-width: 0;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line);
}

.work-card-field:nth-child(odd) {
  margin-right: 14px;
  border-right: 1px solid var(--line);
}

.work-card-field-label {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
}

.work-card-field-value {
  min-width: 0;
  color: var(--text);
  font-family: var(--article-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.work-card-field.is-anonymous .work-card-field-value {
  color: var(--muted);
}

.work-card .work-anon-note {
  margin: 12px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
}

.work-card .work-spotlight-note {
  margin-top: 14px;
}

.work-card .reading-progress {
  margin-top: 18px;
}

.work-card .work-jump-row {
  justify-content: flex-start;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.work-card .work-bookmark-btn > .icon {
  width: 16px;
  height: 16px;
}

.work-card .work-bookmark-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.reading-settings-modal {
  gap: 14px;
}

.reading-settings-group {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.reading-settings-label {
  color: var(--muted);
  font-size: 12px;
}

.reading-settings-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reading-settings-option {
  min-width: 48px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  background: var(--control);
  color: var(--muted);
  font-size: 12px;
}

.reading-settings-option:hover,
.reading-settings-option.is-active {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}

.work-card-hole {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  transform: translateX(-50%);
}

.work-card .work-spotlight-seal {
  top: 54px;
  right: 24px;
}

.rating-progress-slot:not(.is-compact) {
  margin: 18px 0 20px;
  padding: 19px 20px 14px;
  border: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  background: var(--panel);
}

.rating-progress-slot:not(.is-compact) .rating-progress-head {
  align-items: center;
  gap: 16px;
}

.rating-progress-slot:not(.is-compact) .rating-progress-title {
  display: block;
}

.rating-progress-slot:not(.is-compact) .rating-progress-kicker {
  color: var(--text);
  font-family: var(--article-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
}

.rating-progress-summary {
  color: var(--muted);
  font-family: var(--article-font);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rating-progress-ruler-track {
  height: auto;
  margin: 17px 0 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.rating-progress-ruler-track > .rating-progress-fill {
  display: none;
}

.rating-progress-map {
  min-width: 0;
  overflow-x: auto;
}

.rating-progress-ticks,
.rating-progress-cells,
.rating-progress-ruler {
  display: grid;
  gap: 2px;
}

.rating-progress-ticks {
  height: 7px;
  margin-bottom: 4px;
  align-items: end;
}

.rating-progress-tick {
  width: 1px;
  height: 5px;
  justify-self: center;
  background: var(--line-strong);
}

.rating-progress-tick.is-major {
  height: 7px;
  background: var(--accent);
}

.rating-progress-cell {
  display: block;
  min-width: 0;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 1px;
  background: transparent;
}

.rating-progress-cell.is-rated {
  border-color: var(--accent);
  background: var(--accent);
}

.rating-progress-ruler {
  margin-top: 4px;
  color: var(--muted);
}

.rating-progress-ruler-label {
  position: relative;
  left: 50%;
  z-index: 1;
  width: 34px;
  min-width: 34px;
  margin-left: -17px;
  font-family: var(--archive-number-font);
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.rating-progress-ruler-label.is-start {
  left: 0;
  margin-left: 0;
  text-align: left;
}

.rating-progress-ruler-label.is-end {
  left: auto;
  right: calc(34px - 100%);
  margin-left: 0;
  text-align: right;
}

.rating-progress-slot:not(.is-compact) .rating-progress-foot {
  justify-content: flex-start;
  margin-top: 14px;
  line-height: 1.45;
}

.rating-progress-caption {
  color: var(--muted);
}

.rating-progress-milestone-note {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .02em;
}

.work-end-mark {
  margin: 72px auto 38px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-strong);
  color: var(--muted);
  text-align: center;
}

.work-end-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--accent);
}

.work-end-ornament > span,
.work-end-star {
  display: block;
  width: 10px;
  height: 10px;
  color: currentColor;
  fill: currentColor;
}

.work-end-ornament > span:nth-child(2),
.work-end-star-center {
  width: 15px;
  height: 15px;
}

.work-end-title {
  margin-top: 10px;
  color: var(--heading);
  font-family: var(--article-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .22em;
}

.work-end-meta,
.work-end-prompt {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
}

.work-end-prompt {
  color: var(--accent);
}

.rating-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 32px auto -14px;
  color: var(--muted);
}

.rating-section-divider .work-end-star-center {
  color: var(--accent);
}

.rating-section-divider .work-end-star-left,
.rating-section-divider .work-end-star-right {
  opacity: .62;
}

@media (max-width: 800px) {
  .rating-area-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-card-top {
    padding: 11px 16px;
    font-size: 10px;
    letter-spacing: .1em;
  }

  .work-card-number {
    font-size: 13px;
  }

  .work-card-body {
    padding: 22px 18px 26px;
  }

  .work-card .work-title {
    max-width: none;
    padding-right: 86px;
    font-size: 29px;
  }

  .work-card:not(.has-spotlight) .work-title {
    padding-right: 0;
  }

  .work-card-fields {
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  .work-card-field:nth-child(odd) {
    margin-right: 0;
    border-right: 0;
  }

  .work-card .work-spotlight-seal {
    top: 48px;
    right: 12px;
    width: 86px;
    height: 43px;
  }

  .work-card .work-jump-row {
    justify-content: flex-start;
  }

  .reading-settings-group {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .rating-progress-slot:not(.is-compact) {
    padding: 16px 14px 13px;
  }

  .rating-sheet {
    padding: 0 16px 20px;
  }

  .rating-sheet:has(.rate-form) {
    min-height: 322px;
    padding-bottom: 58px;
  }

  .rating-sheet-head {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .rating-sheet-number {
    font-size: 12px;
  }

  .rating-progress-slot:not(.is-compact) .rating-progress-head {
    gap: 8px;
  }

  .rating-progress-slot:not(.is-compact) .rating-progress-kicker {
    font-size: 14px;
  }

  .rating-progress-summary {
    font-size: 11px;
  }

  .rating-progress-ticks,
  .rating-progress-cells,
  .rating-progress-ruler {
    gap: 1px;
  }

  .rating-progress-map .rating-progress-ruler-track,
  .rating-progress-map .rating-progress-ruler {
    min-width: 620px;
  }

  .rating-progress-cell {
    height: 14px;
  }

  .rating-progress-ruler-label {
    font-size: 8px;
  }
}

@media print {
  @page { margin: 18mm 16mm; }

  body {
    background: #fff;
    color: #111;
  }

  .site-bar,
  .top-tools,
  .sidebar,
  .sidebar-toggle,
  .hud-pager,
  .mobile-bar,
  .section-nav,
  .witch-assistant,
  .work-jump-row,
  .reading-progress,
  .work-spotlight-seal,
  .panel,
  .modal-root,
  .toast-root,
  .auth-gate,
  .boot-splash {
    display: none !important;
  }

  .content {
    margin: 0;
    padding: 0;
  }

  .site-search-icon {
    cursor: pointer;
  }

  .site-search-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }

  .reader-frame {
    display: block;
  }

  .sheet {
    max-width: none;
  }

  .work-card {
    border-color: #777;
    background: #fff;
  }

  .work-body {
    color: #111;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@media (max-width: 800px) {
  .reading-manual-toggle { min-height: 44px; }
  .work-jump-btn { min-height: 44px; }

  .work-meta-details { margin-top: 4px; }
  .work-meta-details > summary { min-height: 44px; display: flex; align-items: center; }
  .work-card-fields-primary { grid-template-columns: minmax(0, 1fr); }

  .site-bar {
    min-height: 58px;
    padding: 8px 20px;
    transition: transform 0.22s ease;
  }

  body.is-reader-compact .site-bar {
    pointer-events: none;
    transform: translateY(-110%);
  }

  .reader-compact-bar {
    position: fixed;
    z-index: 185;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line-strong);
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-110%);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .reader-compact-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .reader-compact-info {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 8px;
    align-items: baseline;
  }

  .reader-compact-kicker,
  .reader-compact-progress {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reader-compact-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-family: var(--article-font);
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reader-compact-progress {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .reader-compact-actions {
    display: flex;
    flex: none;
    gap: 4px;
  }

  .reader-compact-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--muted);
  }

  .reader-compact-btn:hover,
  .reader-compact-btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
  }

  .reader-compact-btn > .icon {
    width: 16px;
    height: 16px;
  }

  .site-search {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    margin-right: 52px;
  }

  .site-search-box {
    width: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
  }

  .site-search-input,
  .site-search-key {
    display: none;
  }

  .site-search.is-open {
    position: absolute;
    top: 8px;
    right: 58px;
    left: 20px;
    z-index: 220;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .site-search.is-open .site-search-box {
    width: auto;
    justify-content: flex-start;
    padding: 0 16px;
  }

  .site-search.is-open .site-search-input {
    display: block;
  }

  .sidebar {
    top: 58px;
    height: calc(100dvh - 58px);
  }

  .content {
    padding-top: 42px;
  }

  .edition-shell {
    padding-top: 26px;
  }

  .edition-overview-head {
    padding-bottom: 18px;
  }

  .edition-head-tools {
    gap: 8px;
    margin-top: 14px;
  }

  .edition-head-tools .phase-chip {
    display: none;
  }

  .edition-intro.is-collapsible:not(.is-expanded) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .edition-intro-toggle {
    display: inline-flex;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    line-height: 1.5;
  }

  .edition-intro-toggle:hover {
    color: var(--text);
  }

  .home-state .home-phase-line {
    display: none;
  }

  .phase-timeline {
    display: block;
    margin: 14px 0 4px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .phase-timeline-item {
    display: none;
  }

  .phase-timeline-mobile-summary {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .edition-controls {
    gap: 8px;
    padding: 14px 0 8px;
  }

  .edition-search-wrap,
  .edition-result-tools {
    width: 100%;
  }

  .edition-search-wrap {
    flex: none;
  }

  .edition-filter-row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .edition-choice-options {
    min-width: 0;
    flex: 1;
  }

  .edition-choice {
    min-width: 0;
    flex: 1;
    padding: 0 6px;
  }

  .edition-result-tools {
    justify-content: space-between;
    margin-left: 0;
  }

  .edition-index-row {
    grid-template-columns: 24px 42px minmax(0, 1fr) 34px;
    grid-template-areas:
      "star no title rated"
      "star no meta meta";
    align-items: start;
    column-gap: 8px;
    row-gap: 2px;
    min-height: 62px;
    padding: 9px 8px 10px;
  }

  .edition-index-star {
    grid-area: star;
    margin-top: 2px;
  }

  .edition-index-no {
    grid-area: no;
    padding-top: 2px;
  }

  .edition-index-title {
    grid-area: title;
    align-self: start;
    font-size: 15px;
  }

  .edition-index-leader {
    display: none;
  }

  .edition-index-meta {
    grid-area: meta;
    grid-column: auto;
    display: inline-flex;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 2px;
    font-size: 11px;
  }

  .edition-index-rated {
    grid-area: rated;
    grid-column: auto;
    justify-self: end;
    width: 30px;
    height: 30px;
  }

  .edition-index-rated-trigger {
    width: 30px;
    height: 30px;
  }

  .edition-index-rated .seal {
    width: 30px;
    height: 30px;
  }

  .edition-index-author {
    display: none;
  }

  .results-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 22px;
    padding: 22px 0 18px;
  }

  .results-title {
    font-size: clamp(34px, 8vw, 42px);
  }

  .results-head-aside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .results-phase-chip {
    min-width: 0;
    flex: 1 1 auto;
    padding: 9px 11px;
  }

  .results-phase-chip .phase-chip-label {
    font-size: 14px;
  }

  .results-phase-chip .phase-chip-meta {
    font-size: 13px;
  }

  .results-status-mark {
    width: 78px;
    height: 78px;
  }

  .results-summary {
    margin: 18px 0 24px;
  }

  .results-summary-item {
    padding: 11px 8px 12px 0;
  }

  .results-summary-item + .results-summary-item {
    padding-left: 8px;
  }

  .results-summary-item dt {
    font-size: 11px;
  }

  .results-summary-item dd {
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.35;
  }

  .results-summary-item dt {
    letter-spacing: 0.04em;
  }

  .distribution-block {
    padding: 14px 12px 13px;
  }

  .distribution-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
  }

  .distribution-item {
    font-size: 13px;
  }

  .distribution-value {
    font-size: 13px;
  }

  .distribution-score {
    font-size: 13px;
  }

  .results-distribution-title {
    font-size: 23px;
  }
}

/* Self-hosted display font for interface and work headings. The article body
   keeps --article-font so this visual pass does not alter reading typography. */
html.is-archive :is(
  .site-title,
  .site-brand-text,
  .toc-title,
  .work-title,
  .work-card .work-title,
  .auth-title,
  .modal-title,
  .global-search-discovery-title,
  .global-search-group-title,
  .global-search-title,
  .results-title,
  .results-rank-title,
  .rank-title,
  .results-distribution-title,
  .result-work-distribution-title,
  .special-awards-title,
  .judge-box-title,
  .home-title,
  .edition-overview-head .home-title,
  .home-resume-title,
  .home-section-title,
  .archive-section-head .home-section-title,
  .spotlight-title,
  .catalogue-preview-title,
  .edition-index-title,
  .archive-volume-main strong,
  .home-imprint-name,
  .rating-progress-title,
  .rating-achievement-title,
  .rating-achievement-toast-title,
  .intro-title,
  .panel-title,
  .witch-mobile-title,
  .reader-compact-title,
  .work-end-title
) {
  font-family: var(--display-font);
}

/* 进入档案之前（启动、登录门）只用系统衬线：
   这份标题字体有 700 KB 左右，不该在启动阶段和接口、脚本抢带宽，
   也不该让只在登录门停留的访客白白下载。字号与字重不变，只换字族。 */
html:not(.is-archive) :is(
  .site-title,
  .site-brand-text,
  .auth-title,
  .boot-splash-title
) {
  font-family: var(--article-font);
}

@media (max-width: 800px) {
  .rating-sheet .panel-title {
    font-size: 18px;
  }

  .rate-name {
    font-size: 13px;
  }

  .rate-scale {
    gap: 0;
  }

  .rate-star {
    width: 32px;
    height: 32px;
  }

  .rate-star .icon {
    width: 26px;
    height: 26px;
  }

  .rate-value {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .rate-row {
    gap: 6px;
  }

  .rate-name {
    width: 2.8em;
  }

  .rate-star {
    width: 29px;
    height: 30px;
  }

  .rate-star .icon {
    width: 24px;
    height: 24px;
  }
}

/* ---------- 梦门开场 v2 ---------- */
/* 取色规则与站点一致：深靛沿用夜间主题的墨蓝底，点缀只用褪色朱红，
   金色按设计规范不使用。门里的光取 var(--bg)，推门进入后与当前主题页面无缝衔接。
   分镜：夜空亮起 → 拱门一笔画出 → 星环画出、小火车驶过 → 门扇打开 → 穿门进入。
   入场只播一次；等待接口时只有小火车在限定时间内循环（上限即 maxWait）。 */

.dream-gate {
  --dg-scene: #121622;
  --dg-scene-mid: #1a2133;
  --dg-scene-glow: #2b3450;
  --dg-text: #dcd6c8;
  --dg-muted: #8e94a3;
  --dg-line: rgba(220, 214, 200, 0.22);
  --dg-line-strong: rgba(220, 214, 200, 0.62);
  --dg-seal: #cf6f5f;
  --dg-train: #b5473c;
  --dg-train-dark: #7d2c27;
  --dg-light: var(--bg);
  --dg-light-core: #fffaf0;
  --dg-ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
  --dg-ease-in: cubic-bezier(0.55, 0, 0.8, 0.3);
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  background: var(--dg-scene);
  color: var(--dg-text);
  isolation: isolate;
  contain: layout paint;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 夜间主题：门里是月光而不是日光，推近后仍落到夜间页面底色。 */
html[data-theme="dark"] .dream-gate {
  --dg-light-core: #6a6478;
}
.dream-gate:focus,
.dream-gate:focus-visible {
  outline: none;
}
.dream-gate[hidden] {
  display: none !important;
}
html.is-dream-gate .boot-splash {
  display: none;
}

.dream-gate__sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 44%,
    var(--dg-scene-glow) 0%,
    var(--dg-scene-mid) 30%,
    var(--dg-scene) 68%
  );
  animation: dg-fade-in 0.6s ease both;
}

/* 舞台：拱门中心固定在画面中上部，推门时以门心为原点放大。 */
.dream-gate__stage {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(118vw, 700px, 86vh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.dream-gate__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 57%;
  will-change: transform;
}

/* 星星由脚本撒在 starfield 里，每颗各自错开闪烁。 */
.dream-gate__star {
  fill: var(--dg-text);
  opacity: 0;
  animation: dg-star 2.6s ease-in-out var(--d, 0s) both;
}
.dream-gate__star--blue {
  fill: #9db2c6;
}
.dream-gate__star--seal {
  fill: var(--dg-seal);
}
.dream-gate__sparkle {
  fill: var(--dg-text);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dg-sparkle 1.4s var(--dg-ease-out) var(--d, 0s) both;
}

/* 线稿：拱门、星环用 pathLength=1 一笔画出。 */
.dream-gate__frame,
.dream-gate__ring,
.dream-gate__step,
.dream-gate__seam {
  fill: none;
  stroke-linecap: round;
}
.dream-gate__frame {
  stroke: var(--dg-line-strong);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dg-draw 0.9s var(--dg-ease-out) 0.15s forwards;
}
.dream-gate__frame--outer {
  stroke: var(--dg-line);
  stroke-width: 1;
  animation-delay: 0.3s;
}
.dream-gate__ring {
  stroke: var(--dg-line);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dg-draw 1s var(--dg-ease-out) 0.45s forwards;
}
.dream-gate__ring--front {
  stroke: rgba(220, 214, 200, 0.4);
  animation-delay: 0.55s;
}
.dream-gate__step {
  stroke: rgba(207, 111, 95, 0.34);
  stroke-width: 1;
  animation: dg-fade-in 0.6s ease 0.7s both;
}
.dream-gate__seam {
  stroke: rgba(13, 17, 25, 0.9);
  stroke-width: 1.2;
}

/* 门扇：以左右门框为铰链，打开时横向压缩并略微变暗，模拟向内推开。 */
.dream-gate__door > g {
  animation: dg-fade-in 0.7s ease 0.35s both;
}
.dream-gate__leaf {
  transition:
    transform 0.72s var(--dg-ease-out),
    opacity 0.72s ease;
}
.dream-gate__leaf--left {
  transform-origin: 152px 0;
}
.dream-gate__leaf--right {
  transform-origin: 248px 0;
}
.dream-gate__light {
  opacity: 0.9;
}
/* 穿门时门里的光渐变为纯页面底色，放大后与页面完全同色。 */
.dream-gate__light-flat {
  fill: var(--dg-light);
  opacity: 0;
}
.dream-gate.is-opening .dream-gate__light-flat {
  animation: dg-fade-in 0.6s ease 0.6s forwards;
}
.dream-gate__spill {
  opacity: 0;
  transition: opacity 0.6s ease 0.1s;
}

/* 小火车：位置由脚本沿星环前半圈逐帧计算。 */
.dream-gate__train {
  opacity: 0;
}
.dream-gate__car rect {
  fill: var(--dg-train);
  stroke: var(--dg-train-dark);
  stroke-width: 0.8;
}
.dream-gate__car[data-car="0"] rect:first-child {
  fill: #c2564a;
}
.dream-gate__window {
  fill: rgba(255, 238, 214, 0.85);
}
.dream-gate__wheel {
  fill: #0d1119;
  stroke: var(--dg-train-dark);
  stroke-width: 0.6;
}
.dream-gate__puff {
  fill: var(--dg-text);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dg-puff 1.1s ease-out forwards;
}

/* 文案 */
.dream-gate__copy {
  position: absolute;
  top: calc(44% + min(35vw, 206px, 25.5vh));
  left: 20px;
  right: 20px;
  text-align: center;
  transition:
    opacity 0.3s ease,
    transform 0.4s var(--dg-ease-in);
}
.dream-gate__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.38em;
  color: var(--dg-muted);
  animation: dg-rise 0.7s var(--dg-ease-out) 0.6s both;
}
.dream-gate__title {
  margin: 10px 0 8px;
  font-family: var(--article-font);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.dream-gate__char {
  display: inline-block;
  animation: dg-ink 0.7s var(--dg-ease-out) calc(0.75s + var(--i) * 0.07s) both;
}
.dream-gate__sub {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--dg-muted);
  animation: dg-rise 0.7s var(--dg-ease-out) 1.3s both;
}
.dream-gate__brand {
  position: absolute;
  left: 24px;
  top: max(24px, env(safe-area-inset-top));
  font-family: var(--article-font);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--dg-muted);
  animation: dg-fade-in 0.8s ease 0.4s both;
  transition: opacity 0.3s ease;
}
.dream-gate__hint {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ---- 退场：开门 → 穿门 → 与页面衔接 ---- */
.dream-gate.is-opening .dream-gate__leaf--left {
  transform: scaleX(0.08) skewY(-4deg);
  opacity: 0.5;
}
.dream-gate.is-opening .dream-gate__leaf--right {
  transform: scaleX(0.08) skewY(4deg);
  opacity: 0.5;
}
.dream-gate.is-opening .dream-gate__spill {
  opacity: 1;
}
.dream-gate__seam {
  transition: opacity 0.25s ease;
}
.dream-gate.is-opening .dream-gate__seam {
  opacity: 0;
}
/* 火车留在原地继续开，但在镜头推近前淡出，不从画面前冲过去。 */
.dream-gate__car,
.dream-gate__steam {
  transition: opacity 0.3s ease 0.3s;
}
.dream-gate.is-opening .dream-gate__car,
.dream-gate.is-opening .dream-gate__steam {
  opacity: 0;
}
.dream-gate.is-opening .dream-gate__copy,
.dream-gate.is-opening .dream-gate__brand {
  opacity: 0;
  transform: translateY(10px);
}
.dream-gate.is-opening .dream-gate__svg {
  animation: dg-push 0.95s var(--dg-ease-in) 0.42s forwards;
}
.dream-gate.is-opening .dream-gate__sky {
  animation: dg-sky-out 0.95s var(--dg-ease-in) 0.42s forwards;
}
.dream-gate.is-leaving {
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

@keyframes dg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dg-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes dg-star {
  0% { opacity: 0; }
  45% { opacity: var(--o, 0.8); }
  70% { opacity: calc(var(--o, 0.8) * 0.45); }
  100% { opacity: var(--o, 0.8); }
}
@keyframes dg-sparkle {
  0% { opacity: 0; transform: scale(0.2) rotate(-40deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(0deg); }
  100% { opacity: 0.85; transform: scale(1) rotate(0deg); }
}
@keyframes dg-puff {
  0% { opacity: 0.55; transform: scale(0.4); }
  100% { opacity: 0; transform: translate(-6px, -14px) scale(1.8); }
}
@keyframes dg-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dg-ink {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes dg-push {
  0% { transform: scale(1); }
  100% { transform: scale(24); }
}
@keyframes dg-sky-out {
  0%, 40% { opacity: 1; }
  100% { opacity: 0; }
}

.dream-gate.is-paused *,
.dream-gate.is-paused *::before,
.dream-gate.is-paused *::after {
  animation-play-state: paused !important;
}

@media (max-height: 560px) {
  .dream-gate__stage {
    top: 40%;
    width: min(96vh, 92vw);
  }
  .dream-gate__copy {
    top: auto;
    bottom: 16px;
  }
  .dream-gate__sub {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dream-gate,
  .dream-gate *,
  .dream-gate *::before,
  .dream-gate *::after {
    animation: none !important;
    transition: none !important;
  }
  .dream-gate__frame,
  .dream-gate__ring {
    stroke-dashoffset: 0;
  }
  .dream-gate__star,
  .dream-gate__sparkle {
    opacity: var(--o, 0.8);
  }
  .dream-gate__train {
    opacity: 1;
  }
  .dream-gate.is-leaving {
    transition: opacity 0.2s ease !important;
  }
}


/* ---------- 启动失败面板 ---------- */
/* 接口超时或失败时取代启动遮罩的可见状态：给出原因和重试入口，
   不把用户留在「正在开启梦之门」上。 */

.boot-error {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  color: var(--text);
  text-align: center;
}

.boot-error[hidden] {
  display: none;
}

.boot-error-title {
  margin: 0;
  font-family: var(--article-font);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.boot-error-copy {
  margin: 0;
  max-width: 32em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.boot-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.public-mode-notice {
  position: sticky;
  top: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

.public-mode-notice[hidden] { display: none; }
.public-mode-copy { max-width: 72ch; }
.public-mode-error { color: var(--muted); font-size: 12px; }
.public-mode-retry {
  flex: none;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.work-body-error,
.work-body-retry { margin: 12px 0; }
.work-body-error { color: var(--muted); }

.topic-guides { margin: 58px 0 68px; }
.topic-guides-head { max-width: 700px; }
.topic-guides-head .home-eyebrow { color: var(--accent); font-family: var(--archive-number-font); }
.topic-guides-head .home-section-note { justify-self: start; margin: 18px 0 0; }
.topic-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.topic-guide-card {
  position: relative;
  min-width: 0;
  padding: 26px 28px 24px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel);
}
.topic-guide-card.is-wide { grid-column: 1 / -1; }
.topic-guide-card-head { display: flex; align-items: center; gap: 12px; }
.topic-guide-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
}
.topic-guide-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.topic-guide-title { margin: 0; font-family: var(--article-font); font-size: 20px; line-height: 1.35; letter-spacing: .04em; }
.topic-guide-audience { margin: 14px 0 6px; color: var(--accent); font-size: 13px; line-height: 1.5; }
.topic-guide-description { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.topic-guide-meta { display: flex; align-items: baseline; gap: 5px; margin: 14px 0 16px; color: var(--muted); font-size: 12px; }
.topic-guide-meta-num, .topic-guide-no { font-family: var(--archive-number-font); font-variant-numeric: oldstyle-nums; }
.topic-guide-meta-num { color: var(--text); font-size: 17px; line-height: 1; }
.topic-guide-works { margin: 0; padding: 0; list-style: none; }
.topic-guide-card.is-wide .topic-guide-works { columns: 2; column-gap: 36px; }
.topic-guide-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  break-inside: avoid;
  padding: 11px 0;
  border-top: 1px dashed var(--line-strong);
}
.topic-guide-no { color: var(--accent); font-size: 20px; line-height: 1.1; }
.topic-guide-work { display: block; min-width: 0; color: var(--text); text-decoration: none; }
.topic-guide-work strong { display: block; font-family: var(--article-font); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; transition: color var(--dur-quick) ease; }
.topic-guide-work:hover strong, .topic-guide-work:focus-visible strong { color: var(--accent); }
.topic-guide-reason { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.admin-guides-editor { display: grid; gap: 14px; }
.admin-guides-editor > .modal-meta { margin: 0; }
.admin-guide-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line-strong); background: var(--panel); }
.admin-guide-card .modal-sub { margin: 0; }
.admin-guide-card .field-label { display: grid; gap: 5px; }
.admin-guide-rows { display: grid; border-top: 1px dashed var(--line-strong); }
.admin-guide-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); }
.admin-guide-no { color: var(--accent); font-family: var(--archive-number-font); font-size: 20px; }
.admin-guide-row-main { display: grid; gap: 6px; min-width: 0; }
.admin-guide-row-main strong { overflow-wrap: anywhere; font-family: var(--article-font); font-size: 14px; }
.admin-guide-row-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.admin-guide-add { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-guide-add select { flex: 1 1 220px; min-width: 0; }
.related-guide-picks { margin: 42px auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.related-guide-title { margin: 0; font-family: var(--article-font); font-size: 22px; }
.related-guide-copy { margin: 8px 0 16px; color: var(--muted); font-size: 13px; }
.related-guide-list { display: grid; gap: 10px; }
.related-guide-item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.related-guide-item:hover { border-color: var(--accent); }
.related-guide-item span { color: var(--muted); font-size: 12px; }

.reading-shelf-page { width: min(920px, 100%); margin: 0 auto; padding: 42px 28px 100px; }
.reading-shelf-head { margin-bottom: 18px; }
.reading-shelf-head .home-section-title { margin: 8px 0; }
.reading-shelf-sync-status { min-height: 1.5em; color: var(--muted); font-size: 13px; }
.reading-merge-prompt { display: grid; gap: 8px; margin: 18px 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); }
.reading-merge-prompt p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.reading-shelf-toolbar { display: grid; gap: 12px; margin: 24px 0 14px; }
.reading-shelf-toolbar > .reading-shelf-actions { justify-content: flex-end; }
.reading-shelf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reading-shelf-filters { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--line); }
/* 档案抽屉的索引标签：直角、无底色，选中项下方一条朱红线 */
.reading-shelf-filter { min-height: 40px; margin-bottom: -1px; padding: 6px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.reading-shelf-filter:hover { color: var(--text); }
.reading-shelf-filter.is-active { border-bottom-color: var(--accent); color: var(--text); font-weight: 700; }
.reading-shelf-empty.reading-shelf-empty-card { display: grid; justify-items: center; gap: 10px; padding: 0 0 22px; border-style: solid; border-color: var(--line-strong); background: var(--panel); }
.reading-shelf-empty-card p { margin: 0; padding: 0 20px; }
.reading-shelf-empty-head { display: flex; justify-content: space-between; justify-self: stretch; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; }
.reading-shelf-empty-head span:last-child { color: var(--accent); }
.reading-shelf-list { display: grid; gap: 10px; }
.reading-shelf-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.reading-shelf-link { display: grid; min-width: 0; gap: 5px; color: var(--text); text-decoration: none; }
.reading-shelf-link:hover .reading-shelf-item-title { color: var(--accent); }
.reading-shelf-item-meta,.reading-shelf-item-progress { color: var(--muted); font-size: 12px; }
.reading-shelf-item-title { font-family: var(--article-font); font-size: 18px; line-height: 1.4; }
.reading-shelf-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.reading-shelf-read-label { padding: 5px 8px; color: var(--muted); font-size: 12px; }
.reading-shelf-empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); text-align: center; line-height: 1.7; }

.home-results-published { display: grid; justify-items: start; gap: 8px; }
.home-results-published p { margin: 0; }
.home-results-link { flex: none; margin-top: 4px; text-decoration: none; }
.home-award-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 8px 0; }
.home-award-item { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); text-decoration: none; }
.home-award-item:first-child { border-color: var(--accent); }
.home-award-item span { color: var(--accent); font-size: 11px; }
.home-award-item strong { overflow: hidden; font-family: var(--display-font); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.home-award-item:hover { border-color: var(--accent); }
/* 作品页授奖竖印（createAwardSeal）：朱文、双框、奖项名竖排，盖在馆藏卡右上 */
.work-award-seal { position: absolute; top: 44px; right: 40px; }
.work-card:has(.work-award-seal) .work-title { max-width: calc(100% - 90px); }
.work-award-rank { margin: 8px 0 0; color: var(--muted); font-family: var(--archive-number-font); }
.work-award-share { display: block; width: max-content; margin: 10px 0 4px; }
.rank-table-collapsed tbody tr:nth-child(n+21) { display: none; }
.results-show-all { margin: 0 0 32px; }
.results-distributions { margin: 20px 0 34px; border-top: 1px solid var(--line-strong); }
.results-distributions > summary { padding: 16px 0; color: var(--accent); font-family: var(--article-font); font-size: 16px; cursor: pointer; }
.results-section-heading { display: flex; align-items: baseline; gap: 10px; margin: 36px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--text); }
.results-section-heading .panel-title { margin: 0; color: var(--text); font-size: 18px; }
.results-section-number { color: var(--accent); font-family: var(--archive-number-font); font-size: 13px; }
.results-section-caption { margin-left: auto; color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.award-gallery { display: grid; grid-template-columns: repeat(var(--award-cols, 3), minmax(0, 1fr)); gap: 12px; margin-bottom: 38px; }
.award-card { min-width: 0; border: 1px solid var(--line-strong); background: var(--panel); }
.award-card-main { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 16px; }
.award-card-head { display: flex; justify-content: space-between; gap: 10px; margin: -16px -16px 15px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.award-card-head span:last-child { color: var(--accent); white-space: nowrap; }
/* 奖项名字签（createTagSeal）：墨迹单框，高度决定大小，宽度随字数 */
.award-card-name { flex: none; align-self: flex-start; width: auto; height: 26px; margin: 0 0 11px; }
.award-card-title { margin: 0; color: var(--text); font-family: var(--display-font); font-size: 22px; line-height: 1.35; overflow-wrap: anywhere; }
.award-card-title a { color: inherit; text-decoration: none; }
.award-card-title a:hover { color: var(--accent); text-decoration: underline; }
.award-card-author,.award-card-dimensions { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.award-card-quote { margin: 16px 0; padding: 0 0 0 12px; border-left: 2px solid var(--accent); color: var(--text); font-family: var(--article-font); font-size: 13px; line-height: 1.7; }
.award-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.award-card-footer a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; font-size: 12px; text-decoration: none; }
.award-card-review-details { font-size: 12px; line-height: 1.6; }
.award-card-review-details summary { color: var(--accent); cursor: pointer; }
.award-card-review-details p { margin: 8px 0; color: var(--text); }
.award-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 25%; }
.award-card-featured .award-card-main { padding: 20px; }
.award-card-featured .award-card-head { margin: -20px -20px 22px; padding: 10px 18px; }
.award-card-featured .award-card-title { font-size: 32px; }
.award-card-featured .award-card-quote { max-width: 680px; font-size: 15px; }
.award-card-aside { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; border-left: 1px solid var(--line); background: var(--bg); text-align: center; }
.award-card-stamp { flex: none; align-self: flex-end; width: 58px; height: 58px; margin-bottom: auto; }
.award-card-rank { color: var(--text); font-family: var(--archive-number-font); font-size: 80px; font-weight: 400; line-height: 1; }
.award-card-rank-label { color: var(--muted); font-size: 11px; }
.award-card-overall { margin-top: 14px; color: var(--text); font-family: var(--archive-number-font); font-size: 22px; }
/* 公示页「全部名次」（renderResultsRankList）：每行 名次 · 标题/作者 · 维度小条 · 综合分。
   维度条的颜色按位置取：第 1 项青绿、第 2 项朱红、第 3 项墨色；图例与之同序。
   电脑上维度同时显示名称、均分与色条；窄屏改成一行明确分数。 */
.results-rank-columns { margin: 0 0 20px; }
.results-rank-list { margin: 0; padding: 0; list-style: none; }
.rank-item { min-width: 0; border-bottom: 1px solid var(--line); }
.rank-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 142px 76px; align-items: center; gap: 0 12px; min-width: 0; padding: 18px 0; }
/* 可展开的行：整行可点，展开后行底一条朱红细线；详情在行下方 */
summary.rank-row { list-style: none; cursor: pointer; transition: background-color var(--dur-quick) ease; }
summary.rank-row::-webkit-details-marker { display: none; }
summary.rank-row:hover { background: var(--panel); }
summary.rank-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rank-item-details[open] > summary.rank-row { box-shadow: inset 0 -1px 0 var(--accent); }
.rank-row-detail { padding: 14px 0 18px 46px; }
/* 行内的分布去掉卡片外框：维度名 | 色条，下面一行小字写各分值占比 */
.rank-row-detail .distribution-block { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 0; border: 0; background: none; }
.rank-row-detail .distribution-head { margin: 0; }
.rank-row-detail .distribution-label { font-size: 14px; }
.rank-row-detail .distribution-total { display: none; }
.rank-row-detail .distribution-bar { height: 10px; }
.rank-row-detail .distribution-legend { display: flex; flex-wrap: wrap; grid-column: 2; margin: 0; gap: 4px 12px; }
.rank-row-detail .distribution-item { gap: 5px; color: var(--muted); font-size: 13px; }
.rank-row-detail .distribution-swatch { width: 8px; height: 8px; }
.rank-row-detail .historical-review { margin: 14px 0 0; }
.rank-row-detail .historical-review:first-child { margin-top: 0; }
.rank-row-detail-note { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
/* 刊头下的一行数字 */
.results-figures { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.results-figure strong { margin-right: 2px; color: var(--text); font-family: var(--archive-number-font); font-size: 18px; font-weight: 400; }
.rank-row-no { color: var(--accent); font-family: var(--archive-number-font); font-size: 18px; }
.rank-row-main { min-width: 0; }
.rank-row-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rank-row-link { min-width: 0; color: var(--text); font-family: var(--article-font); font-size: 18px; line-height: 1.5; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
a.rank-row-link:hover { color: var(--accent); text-decoration: underline; }
a.rank-row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rank-row-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; }
.rank-row-author { color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.rank-row-count { color: var(--muted); font-size: 14px; line-height: 1.5; white-space: nowrap; }
.rank-list-award { flex: none; width: auto; height: 18px; }
.rank-row-dims { display: grid; gap: 6px; }
.rank-row-dim { --dim-color: var(--dim-1); position: relative; display: flex; justify-content: space-between; gap: 8px; padding-bottom: 5px; color: var(--muted); font-size: 13px; line-height: 1.3; }
.rank-row-dim::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(to right, var(--dim-color) var(--score-pct, 0%), var(--line) var(--score-pct, 0%)); }
.rank-row-dim:nth-child(2) { --dim-color: var(--dim-2); }
.rank-row-dim:nth-child(3) { --dim-color: var(--dim-3); }
.rank-row-dim-value { color: var(--text); font-family: var(--archive-number-font); font-size: 15px; }
.rank-row-score { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; padding-left: 12px; color: var(--text); font-family: var(--archive-number-font); font-size: 26px; }
.rank-row-score-label { color: var(--muted); font-family: var(--article-font); font-size: 13px; }
/* 综合分前面那条短线（只到维度小条那么高，不是整列通高） */
.rank-row-score::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px; margin-top: -11px; background: var(--line-strong); }
.rank-dim-legend { display: flex; gap: 18px; margin: -4px 0 4px; color: var(--muted); font-size: 14px; }
.rank-dim-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rank-dim-legend-swatch { display: inline-block; width: 22px; height: 3px; background: var(--dim-1); }
.rank-dim-legend-item:nth-child(2) .rank-dim-legend-swatch { background: var(--dim-2); }
.rank-dim-legend-item:nth-child(3) .rank-dim-legend-swatch { background: var(--dim-3); }
.result-work-distribution-summary { justify-content: flex-start; }
.result-work-distribution-meta { margin-left: auto; }
/* 立绘底部渐隐只用于大立绘。迷你入口（781–1439px 或矮屏）的白船方块在立绘框外（left: 110%），
   蒙版会把它整块裁掉。 */
@media (min-width: 1440px) and (min-height: 700px) {
  .witch-portrait { mask-image: linear-gradient(to bottom, #000 86%, transparent); }
}

@media (min-width: 1200px) {
  /* 两栏按列排：左栏 1–10、右栏 11–20，两栏各自独立增高 */
  .results-rank-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 26px; }
}

@media (max-width: 800px) {
  .work-award-seal { position: absolute; top: 18px; right: 16px; width: 36px; height: auto; }
  .work-card:has(.work-award-seal) .work-title { max-width: calc(100% - 52px); }
  .home-award-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .award-gallery { grid-template-columns: 1fr; }
  .award-card-featured { grid-template-columns: minmax(0, 1fr); }
  .award-card-aside { flex-direction: row; justify-content: flex-start; gap: 8px; border-left: 0; border-top: 1px solid var(--line); }
  .award-card-stamp { align-self: center; margin: 0 auto 0 0; }
  .award-card-rank { font-size: 44px; }
  .award-card-overall { margin: 0 0 0 auto; }
  .award-card-featured .award-card-title { font-size: 26px; }
  .results-section-caption { display: none; }
}

@media (max-width: 1199px) {
  /* 窄屏名次：单栏，维度改成一行小字写分数，不再需要图例 */
  .rank-dim-legend { display: none; }
  .rank-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; }
  .rank-row-detail { padding: 10px 0 16px 38px; }
  .rank-row-no { grid-row: 1 / 3; align-self: start; padding-top: 2px; font-size: 16px; }
  .rank-row-link { font-size: 17px; }
  .rank-row-dims { grid-column: 2 / 4; grid-row: 2; display: flex; flex-wrap: wrap; gap: 2px 12px; }
  .rank-row-dim { display: inline; padding-bottom: 0; }
  .rank-row-dim::after { display: none; }
  .rank-row-dim-label,
  .rank-row-dim-value { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .rank-row-dim-value { margin-left: 4px; color: var(--text); font-family: var(--archive-number-font); }
  .rank-row-score { grid-column: 3; grid-row: 1; align-self: start; padding-left: 0; }
  .rank-row-score::before { display: none; }
}

@media (max-width: 800px) {
  .results-sheet .rank-table { display: block; width: 100%; min-width: 0; overflow: visible; white-space: normal; border: 0; }
  .results-sheet .rank-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .results-sheet .rank-table tbody { display: grid; gap: 10px; }
  .results-sheet .rank-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; padding: 14px; border: 1px solid var(--line); background: var(--panel); }
  .results-sheet .rank-table-collapsed tbody tr:nth-child(n+21) { display: none; }
  .results-sheet .rank-table td { display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .results-sheet .rank-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; }
  .results-sheet .rank-table .rank-title-cell { grid-column: 1 / -1; grid-row: 1; font-size: 17px; }
  .results-sheet .rank-table .rank-title-cell::before { display: none; }
  .results-sheet .rank-table .rank-title-link { max-width: 100%; white-space: normal; text-align: left; }
  .results-sheet .rank-table .rank-title-cell { text-align: left; }
  .results-sheet .rank-table .rank-title-cell button { margin-left: 0; }
  .work-meta-details > summary { list-style: none; }
  .work-meta-details > summary::-webkit-details-marker { display: none; }
  .work-meta-details > summary::after { content: "▾"; margin-left: auto; transition: transform var(--dur-quick) ease; }
  .work-meta-details[open] > summary::after { transform: rotate(180deg); }
  body[data-view="results"] .mobile-bar-prev,
  body[data-view="results"] .mobile-bar-next { display: none; }
  body[data-view="results"] .mobile-bar-toc { flex: 1 1 auto; }
}

.notification-count { margin-left: 5px; vertical-align: middle; }
.notification-list { display: grid; gap: 10px; margin-top: 12px; }
.notification-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.notification-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.notification-item.is-unread { border-color: var(--accent); }
.notification-open { display: grid; gap: 6px; min-width: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.notification-open span { overflow-wrap: anywhere; color: var(--muted); font-size: 13px; line-height: 1.6; }
.notification-open small { color: var(--muted); font-size: 11px; }
.notification-dismiss { align-self: start; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.is-notification-target { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); background: var(--accent-weak); }

.report-form { display: grid; gap: 14px; }
.report-form .field-label { display: grid; gap: 7px; }
.feedback-selected-text { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-weak); color: var(--muted); line-height: 1.6; }
.feedback-status-list,.feedback-history { display: grid; gap: 10px; }
.feedback-status-item { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.feedback-status-label { color: var(--accent); font-size: 13px; }
.feedback-status-item p { margin: 2px 0; }
.feedback-status-item small { color: var(--muted); }
.feedback-source-link { display: inline-flex; margin: 6px 0; color: var(--accent); }
.feedback-comment-context { max-height: 180px; overflow: auto; margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-description { margin: 6px 0; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-feedback-queue { display: grid; gap: 12px; }
.admin-feedback-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-feedback-card h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.admin-feedback-card > p { margin: 0; }
.admin-feedback-controls { display: grid; grid-template-columns: minmax(120px, 0.4fr) minmax(220px, 1fr); gap: 10px; margin-top: 8px; }
.admin-feedback-controls .field-label { display: grid; gap: 6px; }
.admin-feedback-controls .reading-shelf-actions { grid-column: 1 / -1; }
.site-information { display: grid; gap: 14px; }
.site-information-section h3 { margin: 0 0 5px; font-size: 15px; }
.site-information-section p { margin: 0; color: var(--muted); line-height: 1.75; }
.home-information-link { white-space: normal; }

@media (max-width: 800px) {
  .public-mode-notice { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; padding: 10px 16px; }
  .public-mode-retry { min-height: 44px; }
  .topic-guide-list { grid-template-columns: minmax(0, 1fr); }
  .topic-guide-card.is-wide { grid-column: auto; }
  .topic-guide-card.is-wide .topic-guide-works { columns: 1; }
  .topic-guide-card { padding: 22px 20px 18px; }
  .reading-shelf-page { padding: 28px 16px 96px; }
  .reading-shelf-toolbar { grid-template-columns: minmax(0, 1fr); }
  .reading-shelf-toolbar > .reading-shelf-actions { justify-content: flex-start; }
  .reading-shelf-item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .reading-shelf-item-actions { justify-content: flex-start; }
  .reading-shelf-filter { min-height: 44px; }
  .notification-item { grid-template-columns: minmax(0, 1fr); }
  .notification-dismiss { justify-self: start; min-height: 40px; }
  .admin-feedback-controls { grid-template-columns: minmax(0, 1fr); }
  .admin-feedback-controls .reading-shelf-actions { grid-column: auto; }
}


/* ---------- 页面切换（View Transitions）：很短的淡入淡出 ---------- */
@keyframes vt-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes vt-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

::view-transition-old(root) {
  animation: vt-page-out 200ms cubic-bezier(.2, .7, .2, 1) both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: vt-page-in 220ms cubic-bezier(.2, .7, .2, 1) both;
  mix-blend-mode: normal;
}

/* 主题切换是圆形扩散，不要再叠一层淡入淡出 */
html.theme-switching::view-transition-old(root),
html.theme-switching::view-transition-new(root) {
  animation: none;
}

/* 标题不做跨页飞入，避免和作品页自己的标题动画打架 */
.work-title,
.spotlight-title {
  view-transition-name: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---------- 今日聚光：每天第一次盖一次章 ---------- */
@keyframes spotlight-stamp-in {
  0% { opacity: 0; scale: 1.7; }
  60% { opacity: 1; }
  100% { opacity: 1; scale: 1; }
}

.spotlight-date-seal.is-stamping {
  animation: spotlight-stamp-in 520ms cubic-bezier(.2, .8, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-date-seal.is-stamping {
    animation: none;
  }
}

/* ---------- 首页区块：滚动到时轻轻上浮渐显（只播一次） ---------- */
.has-home-reveal .home-reveal {
  opacity: 0;
  transform: translateY(12px);
}

.has-home-reveal .home-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .7, .2, 1);
}

/* 781–800px：导航与小女巫已是桌面版（迷你小女巫在左下），正文却已换成窄屏边距，
   两者会叠在一起。这 20px 的空档里给正文左侧让出迷你小女巫和白船方块的位置。 */
@media (min-width: 781px) and (max-width: 800px) {
  .layout .content,
  .layout.home-active .content {
    padding-left: 128px;
  }
}

/* 除名：作品页除名令、目录字签与公示页记录。只用卷色变量与墨迹印章 */

.disqualify-order {
  position: relative;
  margin: 28px 0 36px;
  border: 1px solid var(--accent);
  outline: 1px solid var(--line);
  outline-offset: 4px;
  background: var(--panel);
}
.disqualify-order-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .16em;
}
.disqualify-order-number { color: var(--accent); font-family: var(--archive-number-font); font-size: 15px; letter-spacing: .08em; white-space: nowrap; }
.disqualify-order-main { padding: 26px 34px 8px; }
.disqualify-order-kicker { margin: 0; color: var(--muted); font-family: var(--article-font); font-size: 13px; letter-spacing: .2em; }
.disqualify-order-title { margin: 6px 0 18px; color: var(--heading); font-family: var(--display-font); font-size: 28px; font-weight: 400; letter-spacing: .12em; }
.disqualify-order-entry { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 16px; }
.disqualify-order-entry-label { color: var(--muted); font-size: 12px; letter-spacing: .16em; }
.disqualify-order-struck { position: relative; color: var(--muted); font-family: var(--article-font); font-size: 17px; }
/* 朱笔一划：从左向右划过原登记 */
.disqualify-order-stroke {
  position: absolute;
  left: -4px;
  right: -6px;
  top: 52%;
  height: 3px;
  background: var(--accent);
  border-radius: var(--radius);
  transform: rotate(-1.5deg) scaleX(0);
  transform-origin: left center;
  animation: disqualify-stroke 520ms 240ms cubic-bezier(.6, .1, .3, 1) forwards;
  opacity: .85;
}
@keyframes disqualify-stroke {
  to { transform: rotate(-1.5deg) scaleX(1); }
}
.disqualify-order-reason { margin: 0 0 18px; max-width: 40em; color: var(--body); font-family: var(--article-font); font-size: 15px; font-weight: 400; line-height: 1.9; }
.disqualify-order-verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; border-top: 1px dashed var(--line-strong); }
.disqualify-order-verdict { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); }
.disqualify-order-verdict dt { flex: none; width: 4em; color: var(--muted); font-size: 12px; letter-spacing: .16em; }
.disqualify-order-verdict dd { margin: 0; color: var(--text); font-family: var(--article-font); }
.disqualify-order-verdict:nth-child(-n+3) dd { color: var(--accent); letter-spacing: .2em; }
.disqualify-order-foot { display: flex; justify-content: flex-end; gap: 14px; margin: 0; padding: 14px 34px 20px; color: var(--muted); font-family: var(--article-font); font-size: 13px; letter-spacing: .12em; }
.disqualify-order-date { font-family: var(--archive-number-font); }
.disqualify-order-seal {
  position: absolute;
  top: 66px;
  right: 34px;
  width: 104px;
  height: auto;
  pointer-events: none;
  animation: disqualify-stamp 380ms 700ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes disqualify-stamp {
  0% { opacity: 0; transform: rotate(6deg) scale(1.8); }
  100% { opacity: .9; transform: rotate(6deg) scale(1); }
}

.edition-index-disqualified { flex: none; width: auto; height: 16px; }
.edition-index-row.is-disqualified .edition-index-title-text { color: var(--muted); }

.results-disqualified { margin: 32px 0 0; padding: 18px 22px; border: 1px dashed var(--line-strong); background: var(--panel); }
.results-disqualified-head { display: flex; align-items: center; gap: 14px; }
.results-disqualified-seal { width: 64px; height: auto; }
.results-disqualified-title { margin: 0; font-family: var(--display-font); font-size: 18px; font-weight: 400; letter-spacing: .12em; }
.results-disqualified-copy { margin: 10px 0 8px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.results-disqualified-list { margin: 0; padding: 0; list-style: none; }
.results-disqualified-list li { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; font-family: var(--article-font); }
.results-disqualified-list a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--text); text-decoration: none; }
.results-disqualified-work { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.results-disqualified-more { color: var(--accent); font-size: 13px; }
.results-disqualified-list a:hover .results-disqualified-more { text-decoration: underline; }

@media (max-width: 640px) {
  .disqualify-order-top { padding: 10px 16px; letter-spacing: .1em; }
  .disqualify-order-main { padding: 20px 18px 6px; }
  .disqualify-order-title { font-size: 23px; }
  .disqualify-order-verdicts { grid-template-columns: 1fr; }
  .disqualify-order-foot { padding: 12px 18px 18px; }
  .disqualify-order-seal { top: 56px; right: 14px; width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .disqualify-order-stroke { animation: none; transform: rotate(-1.5deg) scaleX(1); }
  .disqualify-order-seal { animation: none; }
}

/* ===== 投稿（我要投稿 / 投稿管理） ===== */

.submit-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
}

.submit-tab {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.submit-tab.is-active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--wash);
}

.submit-editor-wrap {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.submit-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  background: var(--wash);
}

.submit-tool {
  min-width: 30px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.submit-tool:hover {
  border-color: var(--line);
  background: var(--paper);
}

.submit-editor {
  min-height: 220px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.8;
  outline: none;
}

.submit-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.submit-editor blockquote {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.submit-file {
  display: block;
  margin: 8px 0 4px;
}

.submit-docx-wrap[hidden],
.submit-editor-wrap[hidden] {
  display: none;
}

.submit-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px;
  font-size: 14px;
  line-height: 1.85;
}

.submissions-admin {
  display: grid;
  gap: 10px;
}

.submission-entry {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.submission-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.submission-title {
  font-weight: 600;
  font-size: 15px;
}

.submission-status {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.submission-status.is-accepted {
  color: #3f7d4e;
  border-color: #3f7d4e;
}

.submission-status.is-rejected {
  color: #b0473a;
  border-color: #b0473a;
}

.submission-meta {
  margin: 6px 0 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.submission-note {
  margin: 4px 0;
  font-size: 12.5px;
  color: var(--text);
}

/* 管理员在匿名评论旁看到的实名标注 */
.comment-realname {
  font-size: 12px;
  color: var(--muted);
  opacity: .8;
}

/* ===== 品牌设置 ===== */

.branding-admin {
  display: grid;
  gap: 12px;
}

.branding-block {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.branding-block-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.branding-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 8px;
}

.branding-preview-img {
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
}

.branding-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}

/* ===== 内容管理（逻辑删除作品 / 评论 / 打分） ===== */

.content-admin {
  display: grid;
  gap: 12px;
}

.content-admin-box {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: grid;
  gap: 6px;
}

.admin-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-list-row .submission-meta {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

/* ===== 届别与作品管理 ===== */

.editions-admin {
  display: grid;
  gap: 10px;
}

.editions-admin-list {
  display: grid;
  gap: 10px;
}