/* 寻诗 · app.css v1.0 —— 组件与页面样式。Token 源：design-tokens.css（须先 <link>，禁 @import 桥接）。
   纪律：颜色/字号/间距一律 var(--token) 禁裸 hex；每屏 --accent ≤2 处；只动 transform/opacity；reduced-motion 全局尊重；单文件 ≤300 行。层级：base->util->控件->chrome->页面->竖排->响应式->动效 */
/* 1. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-ui);font-size:var(--text-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--font-verse);font-weight:var(--weight-announce);line-height:var(--leading-title);letter-spacing:var(--tracking-title);color:var(--fg)}
p{margin:0}a{color:inherit;text-decoration:none}svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
th{text-align:left;font-weight:var(--weight-emphasize);background:var(--surface-warm);color:var(--fg-2)}
th,td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-soft);vertical-align:top}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}::placeholder{color:var(--meta)}
/* 2. util */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container{width:100%;max-width:var(--container-page);margin-inline:auto;padding-inline:var(--space-5)}
.container-reading{max-width:var(--container-reading)}.container-doc{max-width:var(--container-doc)}
.main{min-height:58vh;padding-bottom:var(--space-16)}
.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mt-10{margin-top:var(--space-10)}
.num{font-variant-numeric:tabular-nums}.mono{font-family:var(--font-mono)}.ic{display:inline-block;vertical-align:-0.15em;flex:none}
.link{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px;transition:color var(--motion-fast) var(--ease-standard)}
.link-title{color:var(--fg);font-weight:var(--weight-emphasize);transition:color var(--motion-fast) var(--ease-standard)}
.link:hover,.link-title:hover{color:var(--accent)}
.page-head{padding:var(--space-10) 0 var(--space-6)}.page-title{font-size:var(--text-2xl)}
.page-lede{margin-top:var(--space-3);color:var(--muted);max-width:70ch}
.hr{border:0;border-top:1px solid var(--border-soft);margin:var(--space-6) 0}
/* 简繁显隐。权重纪律：显隐须压过与 .zh-* 同元素的容器 display（§5 .verse-vertical{display:flex}）。
   二者同为 0,1,0 时后置者胜 → 简体态同渲染简繁两列。故隐藏加 body 前缀升到 0,1,1。 */
body .zh-tr{display:none}
body[data-trad="tr"] .zh-sc{display:none}
body[data-trad="tr"] .zh-tr,body[data-trad="both"] .zh-sc,body[data-trad="both"] .zh-tr{display:revert}
/* 3. 控件：按钮 / 输入 / pill / segmented */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);padding:10px 16px;font-size:var(--text-base);font-weight:var(--weight-emphasize);line-height:1;white-space:nowrap;transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{padding:8px 12px;font-size:var(--text-sm)}.btn-xs{padding:4px 8px;font-size:var(--text-xs)}
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-primary:active{background:var(--accent-active);transform:none}
.btn-secondary{border:1px solid var(--border-strong);color:var(--accent)}.btn-secondary:hover{background:var(--surface-warm)}
.btn-ghost{color:var(--fg)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--radius-md);color:var(--fg);transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)}
.btn-ghost:hover,.icon-btn:hover,.seg-btn:hover{background:var(--surface-warm)}
.icon-btn.is-success,.is-success{color:var(--success)}
.input{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:10px 12px;font-family:inherit;font-size:var(--text-base);color:var(--fg);transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard)}
.input:hover{border-color:var(--meta)}.input:focus{border-color:var(--accent);box-shadow:var(--focus-ring);outline:none}
.pill{display:inline-flex;align-items:center;gap:var(--space-1);border-radius:var(--radius-pill);padding:1px 8px;font-size:var(--text-xs);line-height:1.7;color:var(--fg-2);background:var(--surface-warm);white-space:nowrap}
.pill-bibei{background:var(--accent-soft);color:var(--accent)}
.pill-strain,.pill-ai{background:transparent;color:var(--accent-2);padding-inline:2px}
.pill-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden}
.seg-btn{padding:6px 12px;font-size:var(--text-sm);color:var(--muted);transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)}
.seg-btn+.seg-btn{border-left:1px solid var(--border)}
.seg-btn.is-on{background:var(--accent);color:var(--accent-on)}
/* 4. chrome：导航 / 页脚 */
.nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border-soft)}
.nav-inner{display:flex;align-items:center;gap:var(--space-5);height:var(--nav-height);max-width:var(--container-page);margin-inline:auto;padding-inline:var(--space-5)}
.brand{display:inline-flex;align-items:center;gap:var(--space-2)}.brand-mark{display:inline-flex}
.brand-name{font-family:var(--font-verse);font-weight:var(--weight-announce);font-size:var(--text-lg);letter-spacing:var(--tracking-verse)}
.nav-links{display:flex;gap:var(--space-1);margin-left:var(--space-4)}
.nav-link{position:relative;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--muted);font-size:var(--text-sm);transition:color var(--motion-fast) var(--ease-standard),background-color var(--motion-fast) var(--ease-standard)}
.nav-link:hover{color:var(--fg);background:var(--surface-warm)}
.nav-link.is-active{color:var(--accent);font-weight:var(--weight-emphasize)}
.nav-link.is-active::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:-1px;height:2px;background:var(--accent)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}
.nav-menu-btn{display:none}
.nav-drawer{display:none;flex-direction:column;padding:var(--space-2) var(--space-5) var(--space-4);border-bottom:1px solid var(--border-soft);background:var(--surface)}
.nav-drawer-link{padding:var(--space-3) 0;border-bottom:1px solid var(--border-soft);color:var(--fg-2)}
.nav-drawer-link.is-active{color:var(--accent);font-weight:var(--weight-emphasize)}
.footer{border-top:1px solid var(--border);background:var(--surface);margin-top:var(--space-16)}
.footer-inner{max-width:var(--container-page);margin-inline:auto;padding:var(--space-8) var(--space-5);color:var(--muted);font-size:var(--text-sm);display:grid;gap:var(--space-2)}
.footer-notice{color:var(--fg-2)}.footer-icp{font-size:var(--text-xs)}
/* 5. 首页 */
.home{padding-top:var(--space-10)}
.home-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-12);align-items:start}
.poem-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);position:relative}
.poem-card-date{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:var(--meta);margin-bottom:var(--space-6)}
.poem-card-eyebrow{color:var(--meta)}
.poem-card-verse{display:grid;grid-template-columns:1fr;gap:0;justify-items:center;min-height:220px}
.verse-vertical{writing-mode:vertical-rl;display:flex;gap:var(--space-4);justify-content:center;font-family:var(--font-verse);font-size:var(--text-3xl);font-weight:var(--weight-announce);letter-spacing:var(--tracking-display);line-height:1.15;color:var(--fg)}
/* 可见态须显式恢复 flex：§2 的 display:revert 回退到 UA 层（div→block），连上条 display:flex 一并丢弃，致 gap/justify-content 失效。
   权重 0,3,1 > 0,2,1。对照态卡片竖排改双列（与 §10 同构，首页无对照入口，仅防御） */
body[data-trad="tr"] .verse-vertical.zh-tr,body[data-trad="both"] .verse-vertical.zh-sc,body[data-trad="both"] .verse-vertical.zh-tr{display:flex}
body[data-trad="both"] .poem-card-verse{grid-template-columns:1fr 1fr;gap:var(--space-8)}
.poem-card-foot{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--border-soft)}
.poem-card-title{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-verse);font-size:var(--text-lg)}
.poem-card-author{margin-top:var(--space-2);color:var(--muted);font-size:var(--text-sm)}
.poem-card-actions{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.home-func{display:grid;gap:var(--space-6)}.home-brand{display:grid;gap:var(--space-3)}
.home-tagline{color:var(--muted);font-size:var(--text-sm)}
.search-form{position:relative}
.search-form-home .search-input{height:48px;padding-right:112px}
.search-submit{position:absolute;top:4px;right:4px;height:40px}
.search-error{margin-top:var(--space-2);color:var(--danger);font-size:var(--text-sm)}
.search-history{margin-top:var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);box-shadow:var(--elev-raised)}
.search-history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}
.search-history-title{font-size:var(--text-xs);color:var(--meta)}
.search-history-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.search-history-list button{font-size:var(--text-sm);color:var(--fg-2);padding:2px 8px;border-radius:var(--radius-pill);background:var(--surface-warm)}
.search-history-list button:hover{color:var(--accent)}
.home-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.quick-card{display:grid;gap:var(--space-2);padding:var(--space-4);background:var(--surface-warm);border-radius:var(--radius-md);color:var(--accent-2);transition:transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard)}
.quick-card:hover{transform:translateY(-2px);box-shadow:var(--elev-raised)}
.quick-title{font-weight:var(--weight-emphasize);color:var(--fg)}.quick-desc{font-size:var(--text-xs);color:var(--muted)}
.home-genres{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.genre-pill{display:inline-flex;align-items:baseline;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);transition:border-color var(--motion-fast) var(--ease-standard)}
.genre-pill:hover{border-color:var(--accent)}
.genre-name{font-family:var(--font-verse);font-size:var(--text-md)}
.genre-count{font-size:var(--text-xs);color:var(--meta);font-variant-numeric:tabular-nums}
.home-stats{margin-top:var(--space-12);border-top:1px solid var(--border);padding-top:var(--space-8)}
.home-stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.stat{display:grid;gap:var(--space-1)}
.stat-num{font-family:var(--font-verse);font-size:var(--text-2xl);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-title)}
.stat-label{font-size:var(--text-xs);color:var(--meta)}
.home-notice{display:flex;gap:var(--space-2);margin-top:var(--space-6);align-items:flex-start;font-size:var(--text-xs);color:var(--meta)}
/* 6. 结果行 / 列表 */
.list{display:grid}.result-row{display:flex;gap:var(--space-5);justify-content:space-between;padding:var(--space-5) 0;border-top:1px solid var(--border-soft)}
.result-main{min-width:0}.result-title{font-size:var(--text-lg);letter-spacing:0}
.result-title .zh-sc,.result-title .zh-tr{margin-right:var(--space-2)}
.result-meta{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--muted)}
.result-excerpt{margin-top:var(--space-3);color:var(--fg-2);line-height:var(--leading-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.result-excerpt mark{background:var(--accent-soft);color:var(--accent);font-weight:var(--weight-emphasize)}.result-row .pill-row{margin-top:var(--space-3)}
.result-len{flex:none;font-size:var(--text-xs);color:var(--meta);font-variant-numeric:tabular-nums}.list-foot{margin-top:var(--space-6)}
/* 7. 文库 */
.timeline{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-4) 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.dynasty-chip{display:inline-flex;align-items:baseline;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface)}
.dynasty-chip:hover{border-color:var(--accent)}
.dynasty-chip.is-current{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent)}
.dynasty-name{font-family:var(--font-verse);font-size:var(--text-md)}
.dynasty-count{font-size:var(--text-xs);color:var(--meta);font-variant-numeric:tabular-nums}
/* 8. 检索页 */
.search-bar{position:sticky;top:var(--nav-height);z-index:15;background:var(--bg);border-bottom:1px solid var(--border-soft);padding:var(--space-3) 0}
.search-bar-inner{display:flex;gap:var(--space-3);align-items:center;max-width:var(--container-page);margin-inline:auto;padding-inline:var(--space-5)}
.search-bar .input{flex:1}
.search-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--space-8);padding-top:var(--space-6);align-items:start}
.facets{position:sticky;top:calc(var(--nav-height) + 72px);display:grid;gap:var(--space-5)}
.facet-group{display:grid;gap:var(--space-2)}
.facet-title{font-size:var(--text-xs);color:var(--meta);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.facet-list{display:grid;gap:var(--space-1)}
.facet-item{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--fg-2)}
.facet-item:hover{background:var(--surface-warm)}
.facet-item.is-on{background:var(--accent-soft);color:var(--accent);font-weight:var(--weight-emphasize)}
.facet-item.is-off{opacity:.45;pointer-events:none}
.facet-count{color:var(--meta);font-variant-numeric:tabular-nums}
.results-col{min-width:0;display:grid;gap:var(--space-4)}
.result-tools{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:center}
.count-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:baseline;font-size:var(--text-sm);color:var(--fg-2)}
.count-bar strong{font-size:var(--text-md);font-variant-numeric:tabular-nums}
.mode-tag{font-size:var(--text-xs);color:var(--meta)}
.notice-bar{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-3) var(--space-4);background:var(--surface-warm);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--fg-2)}
.notice-bar .ic{color:var(--warn);margin-top:2px}.notice-close{margin-left:auto}
.sort-bar{display:flex;gap:var(--space-3);align-items:center;font-size:var(--text-sm)}
.sort-link{color:var(--muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
.sort-link:hover{background:var(--surface-warm)}
.sort-link.is-on{color:var(--accent);font-weight:var(--weight-emphasize)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{padding:var(--space-1) var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-pill);font-size:var(--text-sm);color:var(--fg-2)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
/* 9. 分页 */
.pagination{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center;justify-content:center;margin-top:var(--space-8)}
.page-link,.page-current{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.page-link{color:var(--fg-2);border:1px solid var(--border)}
.page-link:hover{background:var(--surface-warm)}
.page-current{background:var(--accent);color:var(--accent-on);font-weight:var(--weight-emphasize)}
.page-gap{color:var(--meta);padding:0 var(--space-1)}
.page-info{width:100%;text-align:center;margin-top:var(--space-2);font-size:var(--text-xs);color:var(--meta)}
/* 10. 详情页 */
.poem-detail{display:grid;grid-template-columns:minmax(0,var(--container-reading)) 1fr;gap:var(--space-12);padding-top:var(--space-8);align-items:start}
.poem-title{font-size:var(--text-2xl);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.poem-meta{margin-top:var(--space-3);color:var(--muted);font-size:var(--text-sm);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.poem-subtitle{margin-top:var(--space-1);color:var(--meta);font-size:var(--text-sm)}
.poem-pills{margin-top:var(--space-4)}
.variants{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-soft)}
.variants-title{font-size:var(--text-xs);color:var(--meta);margin-bottom:var(--space-2)}
.variants-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.variant{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--text-sm);color:var(--fg-2)}
.variant:hover{border-color:var(--accent);color:var(--accent)}
.op-bar{position:sticky;top:var(--nav-height);z-index:15;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);margin:var(--space-6) 0;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.op-group{display:flex;gap:var(--space-1);align-items:center}
.op-label{font-size:var(--text-xs);color:var(--meta);margin-right:var(--space-1)}.op-sep{width:1px;align-self:stretch;background:var(--border-soft)}
.switch{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--fg-2)}
.switch:hover{background:var(--surface-warm)}
.switch-track{position:relative;width:34px;height:18px;border-radius:var(--radius-pill);background:var(--border-strong);transition:background-color var(--motion-fast) var(--ease-standard)}
.switch-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:transform var(--motion-fast) var(--ease-standard)}
.switch[aria-checked="true"] .switch-track{background:var(--accent)}
.switch[aria-checked="true"] .switch-thumb{transform:translateX(16px)}
.switch[aria-disabled="true"]{opacity:.5;pointer-events:none}
.poem-body{font-family:var(--font-verse);font-size:var(--text-verse);line-height:var(--leading-verse);letter-spacing:var(--tracking-verse);color:var(--fg)}
.poem-verse{display:grid;grid-template-columns:1fr}
.verse-line{margin:0}
.vs-head{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--meta);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--space-2);display:none}
body[data-trad="both"] .vs-head{display:block}body[data-trad="both"] .poem-verse{grid-template-columns:1fr 1fr;gap:var(--space-8)}
.tone{position:relative;display:inline-block;padding-bottom:4px}
.tone::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:3px;border-radius:1.5px;background:var(--tone-zhong);display:none}
.poem-verse.is-tones .tone::after{display:block}
.tone-ping::after{background:var(--tone-ping)}.tone-ze::after{background:var(--tone-ze)}
.tone-undef::after{background:transparent;border:1.5px solid var(--tone-undef)}
.tone-label{display:none}
body.is-anno .tone{padding-bottom:16px}
body.is-anno .tone::after{bottom:11px}
body.is-anno .tone-label{display:block;position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--font-ui);font-size:10px;line-height:1;color:var(--meta)}
.strain-legend{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-top:var(--space-5);font-size:var(--text-xs);color:var(--muted)}
.legend-item{display:inline-flex;align-items:center;gap:var(--space-1)}
.legend-swatch{width:16px;height:3px;border-radius:1.5px;background:var(--tone-zhong)}
.legend-swatch.tone-ping{background:var(--tone-ping)}
.legend-swatch.tone-ze{background:var(--tone-ze)}
.legend-swatch.tone-undef{background:transparent;border:1.5px solid var(--tone-undef);height:5px}
.strain-raw{margin-top:var(--space-5);padding:var(--space-4);background:var(--surface-warm);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.9;word-break:break-all;color:var(--fg-2)}
.degraded-note{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--meta)}
.poem-absent{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--muted)}
.annotation{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border);display:grid;gap:var(--space-8)}
.anno-section{display:grid;gap:var(--space-3)}
.anno-title{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-lg)}
.anno-body{color:var(--fg-2);line-height:var(--leading-body)}.anno-sub{font-size:var(--text-base)}
.anno-note{margin-top:var(--space-6);font-size:var(--text-xs);color:var(--meta)}
.author-card{margin-top:var(--space-10);padding:var(--space-6);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:grid;gap:var(--space-3)}
.ac-name{font-family:var(--font-verse);font-size:var(--text-xl)}
.ac-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;font-size:var(--text-sm);color:var(--muted)}
.ac-desc{color:var(--fg-2)}
.aside-sticky{position:sticky;top:calc(var(--nav-height) + var(--space-6));display:grid;gap:var(--space-4)}
.aside-title{font-size:var(--text-sm);color:var(--meta);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.mini-card{display:grid;gap:var(--space-1);padding:var(--space-3) 0;border-top:1px solid var(--border-soft)}
.mini-title{font-family:var(--font-verse);font-size:var(--text-md)}.mini-meta{font-size:var(--text-xs);color:var(--meta)}
.author-layout{display:grid;grid-template-columns:minmax(0,1fr) 2fr;gap:var(--space-10);align-items:start}
/* 11. API 文档 */
.doc-grid{display:grid;grid-template-columns:220px minmax(0,760px) 200px;gap:var(--space-10);padding-top:var(--space-8);align-items:start}
.doc-nav{position:sticky;top:calc(var(--nav-height) + var(--space-6));display:grid;gap:var(--space-5);min-width:0}
.doc-nav-group{display:grid;gap:var(--space-1);min-width:0}
.doc-nav-title{font-size:var(--text-xs);color:var(--meta);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--space-1)}
.doc-nav-link{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--fg-2)}
.doc-nav-link:hover{background:var(--surface-warm)}
.doc-nav-link.is-current{background:var(--accent-soft);color:var(--accent);font-weight:var(--weight-emphasize)}
.doc-toc{position:sticky;top:calc(var(--nav-height) + var(--space-6));display:grid;gap:var(--space-1);font-size:var(--text-sm)}
.doc-toc-title{font-size:var(--text-xs);color:var(--meta);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--space-1)}
.doc-toc a{color:var(--muted);padding:2px 0 2px var(--space-2);border-left:2px solid transparent}
.doc-toc a:hover,.doc-toc a.is-current{color:var(--accent);border-left-color:var(--accent)}
.doc-main{display:grid;gap:var(--space-10);min-width:0}
/* min-width:0 = 项目规约（README 铁律 5 / Spec §11）：grid item 默认 min-width:auto 不肯收缩，
   子树内一旦有不可断行宽内容（pre/code/长哈希/表格）就会顶破视口。
   .doc-sec 直接包裹代码块与端点表，是同类坑的第二处实例（.doc-main 已先行防护）。 */
.doc-sec{display:grid;gap:var(--space-4);min-width:0;scroll-margin-top:calc(var(--nav-height) + var(--space-6))}
.doc-sec-title{font-size:var(--text-xl)}
.quota-card{padding:var(--space-5);background:var(--surface-warm);border-radius:var(--radius-md);display:grid;gap:var(--space-3);min-width:0}
/* 规约：承载宽内容的表格一律 fixed 布局 + 列内换行，否则 table 的最小内容宽会顶破 grid item。
   两条同时用（缺一不可，实测）：
   ① :where() 容器清单覆盖 API 页全部表格（含包在 div.mt-6 等包裹层里的），0 权重不干扰局部调优；
   ② 直接子 item 也需 min-width:0 —— table-layout:fixed 的 width:100% 基准是父级，
      若父级自身被 table 的 min-content 撑开，fixed 也无效（实测 375px 仍 665）。 */
.doc-main :where(table),.doc-sec :where(table),.quota-card :where(table),.about-body :where(table){table-layout:fixed;width:100%}
.doc-main :where(td,th),.doc-sec :where(td,th),.quota-card :where(td,th),.about-body :where(td,th){overflow-wrap:anywhere}
.doc-sec > *{min-width:0}
.quota-row{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:baseline}
.quota-row .num{font-weight:var(--weight-emphasize)}
.endpoint{display:grid;gap:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--border-soft)}
.endpoint-head{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.method-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-emphasize);letter-spacing:var(--tracking-caps);color:var(--accent-on);background:var(--accent-2)}
.method-post{background:var(--accent)}.method-delete{background:var(--danger)}
.endpoint-path{font-family:var(--font-mono);font-size:var(--text-md);color:var(--fg)}
.unique-badge{padding:1px 6px;border-radius:var(--radius-sm);border:1px solid var(--accent-2);color:var(--accent-2);font-size:var(--text-xs)}
.endpoint-desc{color:var(--muted);font-size:var(--text-sm)}
.tabs{display:flex;gap:var(--space-4);border-bottom:1px solid var(--border)}
.tab{padding:var(--space-2) 0;font-size:var(--text-sm);color:var(--muted);border-bottom:2px solid transparent;font-family:var(--font-mono)}
.tab.is-on{color:var(--accent);border-bottom-color:var(--accent)}
/* overflow:hidden 是「圆角裁切 + 内部滚动」的标准组合，不要改：
   pre.code-body 自己的 overflow-x:auto 是滚动容器，hidden 只负责裁圆角外的子元素，
   两者不冲突。实测（375px，对照实验）：仅靠上游 min-width:0 收敛后，
   pre 依然正常块内横向滚动（clientW 343 < scrollW 537/606/649），页面 375/375 无横向滚动。
   .code-block 的 min-width:0 才是必需项——它是 .doc-sec 的 grid item，同样受auto 陷阱影响。 */
.code-block{position:relative;background:var(--surface-ink);color:var(--code-fg);border-radius:var(--radius-lg);overflow:hidden;min-width:0}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--code-punct)}
.code-lang{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--code-comment)}
.code-body{margin:0;padding:var(--space-4);overflow-x:auto;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.7;white-space:pre}
.code-body .k{color:var(--code-keyword)}
.code-body .s{color:var(--code-string)}
.code-body .c{color:var(--code-comment)}
.code-body .p{color:var(--code-punct)}
.code-copy{color:var(--code-fg);background:none;border:0;cursor:pointer}.code-copy.is-success{color:var(--code-string)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.step{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);display:grid;gap:var(--space-2)}
.step-num{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:var(--text-xs);font-weight:var(--weight-emphasize)}
.step-title{font-weight:var(--weight-emphasize)}.step-desc{font-size:var(--text-sm);color:var(--muted)}
.register-form{display:grid;gap:var(--space-3);padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.field{display:grid;gap:var(--space-1)}.field label{font-size:var(--text-sm);color:var(--fg-2)}.field-hint{font-size:var(--text-xs);color:var(--meta)}
/* 12. 关于 / 错误页 */
.about{display:grid;gap:var(--space-10);padding-top:var(--space-8)}
.quote-hero{text-align:center;font-family:var(--font-verse);font-size:var(--text-xl);line-height:1.9;color:var(--fg-2);padding:var(--space-8) 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.quote-cite{display:block;margin-top:var(--space-3);font-family:var(--font-ui);font-size:var(--text-xs);color:var(--meta)}
.about-sec{display:grid;gap:var(--space-3);scroll-margin-top:calc(var(--nav-height) + var(--space-4))}.about-sec-title{font-size:var(--text-xl)}
.about-body p{color:var(--fg-2);margin-top:var(--space-2)}.about-list{display:grid;gap:var(--space-2);margin-top:var(--space-2)}
.about-list li{padding-left:var(--space-4);position:relative;color:var(--fg-2)}.about-list li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:1px;background:var(--border-strong)}.about-body table{margin-top:var(--space-3)}
/* 上游溯源表：commit 哈希等宽便于逐位核对与复制。
   两处必需前提，缺一即在 375px 顶破容器（实测 scrollWidth 375→593）：
   ① .about 是 grid 容器，grid item 默认 min-width:auto 不肯收缩 → 必须 min-width:0；
      否则表格的最小内容宽会把整个 section 撑宽（这与表格本身无关，是 Grid 陷阱）。
   ② table-layout:fixed + 显式列宽 → commit 哈希在列内换行，不参与撑宽计算。 */
.about-body{min-width:0}
.upstream-table{table-layout:fixed;width:100%}.upstream-table th,.upstream-table td{vertical-align:top;overflow-wrap:anywhere}
.upstream-table th:nth-child(1),.upstream-table td:nth-child(1){width:25%}
.upstream-table th:nth-child(2),.upstream-table td:nth-child(2){width:33%}
.upstream-table th:nth-child(3),.upstream-table td:nth-child(3){width:12%}
.upstream-table th:nth-child(4),.upstream-table td:nth-child(4){width:30%}
.upstream-commit{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0;word-break:break-all;color:var(--fg-2)}
.upstream-copyright{font-size:var(--text-sm);color:var(--fg-2)}.upstream-none{color:var(--meta)}
@media (max-width:640px){.upstream-table th,.upstream-table td{padding:var(--space-2)}.upstream-table th:nth-child(1),.upstream-table td:nth-child(1){width:24%}.upstream-table th:nth-child(2),.upstream-table td:nth-child(2){width:36%}.upstream-table th:nth-child(3),.upstream-table td:nth-child(3){width:14%}.upstream-table th:nth-child(4),.upstream-table td:nth-child(4){width:26%}.upstream-copyright{font-size:var(--text-xs)}}
.error-page{padding:var(--space-16) 0 var(--space-12);display:grid;gap:var(--space-4);justify-items:start}
.error-code{font-family:var(--font-verse);font-size:var(--text-3xl);font-weight:var(--weight-announce);letter-spacing:var(--tracking-display);color:var(--accent)}.error-title{font-size:var(--text-2xl)}
.error-desc{color:var(--muted);max-width:52ch}.error-actions{display:flex;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap}.error-hint{font-size:var(--text-xs);color:var(--meta);margin-top:var(--space-2)}
/* 13. 空态 / 骨架 */
.empty-state{display:grid;gap:var(--space-3);justify-items:center;text-align:center;padding:var(--space-16) var(--space-5);color:var(--muted)}.empty-state .ic{color:var(--meta)}
.empty-title{font-family:var(--font-verse);font-size:var(--text-lg);color:var(--fg)}.empty-desc{font-size:var(--text-sm);max-width:50ch}
.empty-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;margin-top:var(--space-2)}
.skeleton-line{height:1em;border-radius:var(--radius-sm);background:var(--surface-warm);overflow:hidden;position:relative}
.skeleton-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--surface),transparent);transform:translateX(-100%);animation:shimmer 1.2s var(--ease-standard) infinite}
/* 14. 竖排（仅详情页正文） */
.poem-verse.is-vertical{writing-mode:vertical-rl;max-height:78vh;justify-content:flex-start;gap:var(--space-5);margin-inline:auto}
.poem-verse.is-vertical .verse-line{margin:0}.poem-verse.is-vertical .tone{padding-bottom:0;padding-right:4px}
.poem-verse.is-vertical .tone::after{left:auto;right:-3px;top:20%;bottom:20%;width:3px;height:auto}/* 15. 响应式 */
@media (max-width:1024px){.home-grid{grid-template-columns:1fr;gap:var(--space-8)}.poem-detail{grid-template-columns:1fr}.doc-grid{grid-template-columns:1fr}.doc-nav,.doc-toc{position:static}.search-layout{grid-template-columns:1fr}.facets{position:static;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.author-layout{grid-template-columns:1fr}}
@media (max-width:768px){.container,.nav-inner,.search-bar-inner{padding-inline:var(--space-4)}.nav-links{display:none}.nav-menu-btn{display:inline-flex}.nav-drawer[data-open]{display:flex}.home-quick{grid-template-columns:1fr}.home-stats-inner{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.steps{grid-template-columns:1fr}.timeline{gap:var(--space-1)}.op-bar,.search-bar{position:static}.result-row{gap:var(--space-3)}.page-title,.poem-title,.error-title{font-size:var(--text-xl)}.quote-hero{font-size:var(--text-lg)}}
@media (max-width:640px){.verse-vertical{font-size:var(--text-2xl)}.search-form-home .search-input{padding-right:var(--space-4)}.search-submit{position:static;width:100%;margin-top:var(--space-2);justify-content:center}}
/* 触控目标 ≥44px（仅 ≤768px 手机档；目标用户为学生与家长，手机单手点按是真实可用性问题）。只提最差两类：.facet-item 30px→44px、.seg-btn 34px→44px；桌面档不受影响。
   .facet-list 的 gap 同步 4px→8px：44px 目标配 4px 间距仍易误触相邻朝代，等于白改。 */
@media (max-width:768px){.facet-item{min-height:44px;align-items:center}.facet-list{gap:var(--space-2)}.seg-btn{min-height:44px;padding:6px 14px;display:inline-flex;align-items:center;white-space:nowrap}}
/* 16. 动效 */
@keyframes shimmer{to{transform:translateX(100%)}}@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp var(--motion-slow) var(--ease-standard) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.skeleton-line::after{display:none}}