/* ══════════════════════════════════════════════════════════════
   Q-ReaDer 书籍知识库 · 视觉系统（纸感 / 苔绿 / 衬线）
   设计原则：克制留白、清晰层级、微动效点睛；全部颜色走令牌，
   夜读主题（html[data-reading-theme=dark]）与各子模块样式自动继承。
   ══════════════════════════════════════════════════════════════ */

/* ——— 自托管衬线（子集化 Noto Serif SC，600/900 两档字重） ——— */
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:600;font-display:swap;src:url('/qreader/wikibook/assets/fonts/noto-serif-sc-600.woff2') format('woff2')}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:900;font-display:swap;src:url('/qreader/wikibook/assets/fonts/noto-serif-sc-900.woff2') format('woff2')}

:root{
  --paper:#f6f4ef;--bright:#fcfbf8;
  --ink:#201e1a;--ink-muted:#57534a;
  --soft:#6f6a60;--line:#d9d3c6;--line-strong:#c7c0b1;
  --moss:#55614e;--moss-deep:#344b31;--moss-soft:#e3eadf;
  --danger:#943d32;--focus:#cdd7c8;
  --serif:'Noto Serif SC','Iowan Old Style','Songti SC','STSong',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-lift:0 7px 16px rgba(48,68,44,.16);
  --shadow-cover:2px 6px 14px rgba(32,30,26,.13);
  --shadow-cover-hover:0 20px 38px rgba(32,30,26,.24);
}

/* 夜读主题下补齐扩展令牌（主体覆盖规则见 reading-tools.css） */
html[data-reading-theme=dark]{
  --ink-muted:#c9c3b3;--line-strong:#4c4e44;
  --moss-deep:#b3c6a6;--moss-soft:#2e352a;
  --danger:#c96a5d;--focus:#3d4a38;
  --shadow-lift:0 7px 16px rgba(0,0,0,.4);
  --shadow-cover:2px 6px 16px rgba(0,0,0,.5);
  --shadow-cover-hover:0 20px 38px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.9 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  caret-color:var(--moss);
}
::selection{background:var(--focus);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px;border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--moss)}
a{color:var(--moss-deep);text-underline-offset:5px;text-decoration-thickness:1px}
a:hover{color:var(--moss)}
button,input{font:inherit}
label{display:block;margin:15px 0 8px}
#upload{display:grid;gap:10px}
button{
  cursor:pointer;color:var(--ink);
  border:1px solid var(--line-strong);background:transparent;
  padding:9px 20px;border-radius:10px;min-height:44px;
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .18s,color .18s,border-color .18s;
}
button:hover{border-color:var(--moss);color:var(--moss-deep)}
button:active{transform:scale(.96)}
button[aria-pressed=true]{background:var(--moss);border-color:var(--moss);color:#fff}
button[aria-pressed=true]:hover{color:#fff}
button:disabled{opacity:.5;cursor:wait;transform:none}
input:not([type=checkbox]){
  background:var(--bright);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;min-width:0;max-width:100%;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
input:not([type=checkbox]):focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px var(--focus)}
input::placeholder{color:var(--soft)}
input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--moss)}
select{
  font:inherit;max-width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--bright);color:var(--ink);
}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}

/* ————— 顶部导航 ————— */
header{
  position:sticky;top:0;z-index:40;
  max-width:1240px;margin:auto;padding:16px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.book-page header{position:static}
.brand{
  display:flex;align-items:center;gap:11px;
  font:600 20px/1 var(--serif);letter-spacing:.01em;text-decoration:none;color:var(--ink);
}
/* 品牌字标：CSS 绘制的书形印记 */
.brand::before{
  content:"Q";width:30px;height:30px;flex:none;
  border:1.5px solid var(--ink);border-radius:7px;
  display:grid;place-items:center;
  font:600 13px/1 var(--serif);color:var(--ink);background:var(--bright);
}
.brand:hover{color:var(--ink)}
.brand:hover::before{border-color:var(--moss-deep);color:var(--moss-deep)}
header nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header nav a{
  font-size:14px;color:var(--ink-muted);text-decoration:none;letter-spacing:.02em;
  padding:6px 2px;position:relative;
}
header nav a:hover{color:var(--ink)}
header nav a[aria-current=page]{color:var(--ink);font-weight:600}
header nav a[aria-current=page]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--moss);
}
header button{min-height:40px;padding:8px 18px}

/* ————— 主体布局 ————— */
main{max-width:1120px;margin:auto;padding:0 32px 70px}

/* ————— 引言区 ————— */
.intro{position:relative;padding:76px 0 8px;max-width:780px}
.intro::before{
  content:"";position:absolute;top:28px;left:0;right:0;height:1px;background:var(--line);
  transform-origin:left;animation:rule-in 1s var(--ease-out) both;
}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.45}
.intro h1{
  margin:0 0 20px;font-weight:900;
  font-size:clamp(36px,5vw,64px);line-height:1.26;letter-spacing:-.01em;
  animation:rise .9s var(--ease-out) .1s both;
}
.intro>p{
  margin:0;font-size:17px;color:var(--soft);max-width:34em;
  animation:rise .9s var(--ease-out) .22s both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.intro form{animation:rise .9s var(--ease-out) .34s both}
.intro label{display:block;margin:44px 0 10px;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--ink-muted)}
.searchbar{display:flex;align-items:flex-end;gap:14px}
.searchbar input{
  flex:1;border:0;border-bottom:1.5px solid var(--line-strong);border-radius:0;
  background:transparent;padding:12px 2px 14px;font-size:17px;
  box-shadow:none;
}
.searchbar input:focus{border-bottom-color:var(--moss);box-shadow:none}
.searchbar button{flex:none}
.searchbar button,.primary,#upload>button{
  background:var(--moss);border-color:var(--moss);color:#fff;
}
.searchbar button:hover,.primary:hover,#upload>button:hover{
  background:var(--moss-deep);border-color:var(--moss-deep);color:#fff;
  transform:translateY(-1px);box-shadow:var(--shadow-lift);
}
#category-filter{display:block;margin-top:14px}

/* ————— 书架分区头 ————— */
.sectionhead{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:15px;margin:76px 0 0;padding-top:26px;border-top:1px solid var(--line);
}
.sectionhead h2{margin:0;font:600 28px/1.3 var(--serif);letter-spacing:.01em}
.sectionhead nav{
  display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--line-strong);border-radius:999px;padding:3px;background:var(--bright);
}
.sectionhead nav button{
  border:0;background:transparent;border-radius:999px;
  padding:7px 18px;min-height:0;font-size:13.5px;color:var(--soft);
  transition:background .2s,color .2s;
}
.sectionhead nav button:hover{color:var(--ink)}
.sectionhead nav button[aria-pressed=true]{background:var(--moss);color:#fff}
#count{color:var(--soft);font-size:13px;font-variant-numeric:tabular-nums}
#shelf-note{margin:14px 0 0;font-size:13.5px;color:var(--soft)}

/* ————— 分类筛选（chips） ————— */
#category-nav{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 42px}
#category-nav button{
  border:1px solid var(--line);border-radius:999px;background:transparent;
  padding:7px 16px;min-height:0;font-size:13px;color:var(--ink-muted);
  transition:border-color .2s,color .2s,background .2s;
}
#category-nav button:hover{border-color:var(--moss);color:var(--moss-deep)}
#category-nav button[aria-pressed=true]{background:var(--moss);border-color:var(--moss);color:#fff}

/* ————— 书架 · 封面优先 —————
   封面、书名、作者构成单一触控目标；书脊折痕与顶部受光为 CSS 绘制 */
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:58px 28px;padding:8px 0 40px;align-items:start}
.shelf-entry{display:flex;flex-direction:column;gap:12px;min-width:0}
.book{
  display:flex;flex-direction:column;align-items:stretch;min-width:0;
  border:0;border-radius:0;padding:0;text-align:left;background:none;
  color:var(--ink);touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.shelf-entry{animation:book-in .6s var(--ease-out) both}
.shelf-entry:nth-child(5n+2){animation-delay:.05s}.shelf-entry:nth-child(5n+3){animation-delay:.1s}
.shelf-entry:nth-child(5n+4){animation-delay:.15s}.shelf-entry:nth-child(5n+5){animation-delay:.2s}
@keyframes book-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cover{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:2/3;min-height:0;width:100%;padding:24px 20px 22px;
  background:#e5e2d7;color:#2c322d;border-radius:3px 9px 9px 3px;overflow:hidden;
  box-shadow:var(--shadow-cover),inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.cover::before{
  content:"";position:absolute;inset:0 auto 0 0;width:11px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.20),rgba(0,0,0,.07) 45%,rgba(255,255,255,.10) 52%,transparent 78%);
}
.cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 34%);
}
.cover[data-jacket="1"]{background:#344b47;color:#f3efe4}
.cover[data-jacket="2"]{background:#c2a172;color:#33291d}
.cover[data-jacket="3"]{background:#354754;color:#f3efe4}
.cover[data-jacket="4"]{background:#7a4a3a;color:#f6efe6}
.cover-title{
  font:600 clamp(20px,1.8vw,26px)/1.52 var(--serif);letter-spacing:.01em;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.06);
}
.cover-author{
  font:11.5px/1.6 var(--sans);letter-spacing:.1em;margin-top:18px;opacity:.85;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.book-info{display:flex;flex-direction:column;gap:3px;padding-top:16px;min-width:0}
.book-title{
  font:600 15.5px/1.55 var(--serif);letter-spacing:.005em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
  transition:color .2s;
}
.book-author{
  font:12.5px/1.6 var(--sans);color:var(--soft);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.book-edition{font:12px/1.6 var(--sans);color:var(--soft);overflow-wrap:anywhere}
.book-number{font:12px/1.6 var(--sans);color:var(--soft);overflow-wrap:anywhere}
.save-book{
  align-self:flex-start;border:1px solid var(--line);border-radius:999px;
  min-height:0;padding:5px 14px;font-size:12px;color:var(--soft);background:transparent;
}
.save-book:hover{border-color:var(--moss);color:var(--moss-deep);background:transparent;transform:none}
.save-book[aria-pressed=true],.save-book.is-saved{background:var(--moss-soft);border-color:var(--moss-soft);color:var(--moss-deep)}
@media(hover:hover){
  .book:hover .cover{transform:translateY(-6px);box-shadow:var(--shadow-cover-hover)}
  .book:hover .book-title{color:var(--moss-deep)}
}
.book:active .cover{transform:translateY(-2px) scale(.985)}
.shelf.search-results .shelf-entry{animation:none}
.empty{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:64px 0;text-align:center;color:var(--soft);font-size:14px;
}
#more-books{display:block;margin:52px auto 0;padding:11px 34px}
@media(max-width:1000px){.shelf{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px}}
@media(max-width:760px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 22px}}

/* ————— 阅读区 / 贡献区 ————— */
.tabs{border-bottom:1px solid var(--line);padding-bottom:16px;gap:10px}
#reader,#contribution{margin-top:76px;border-top:1px solid var(--line);padding-top:32px;scroll-margin-top:20px}
article{max-width:780px;min-height:180px;padding:22px 0}
article p{white-space:pre-wrap;line-height:2}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-size:19px;font-family:var(--serif)}
.downloads{display:flex;flex-wrap:wrap;gap:22px;padding:22px 0}
.view-switch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:18px 0}
iframe{display:block;width:100%;height:650px;border:0;border-radius:10px;background:#080e18}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;flex-wrap:wrap}
#message{color:var(--moss);min-height:25px;font-size:14px}
.error{color:var(--danger)!important}
#count,#book-meta{color:var(--soft)}

/* ————— 表单 ————— */
#upload{
  max-width:640px;background:var(--bright);padding:26px;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(32,30,26,.04);
}
#upload input[type=file]{width:100%}
#claim-form{display:grid;gap:10px;max-width:600px;margin-top:18px}
#claims{margin:20px 0}
#claims code{display:block;overflow-wrap:anywhere;background:var(--bright);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:13px}
#claims button{margin:8px 8px 8px 0}
.contributor-fields{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0}
.contributor-fields legend{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-muted);padding:0 8px}
.contribution-help{background:var(--bright);border:1px solid var(--line);border-radius:14px;padding:22px 24px}

/* ————— 对话框 ————— */
dialog{
  width:460px;max-width:calc(100vw - 28px);
  background:var(--bright);border:1px solid var(--line);border-radius:16px;
  padding:30px;color:var(--ink);
  box-shadow:0 24px 60px rgba(32,30,26,.18);
}
dialog::backdrop{background:rgba(32,30,26,.42);backdrop-filter:blur(3px)}
dialog p{color:var(--soft)}
dialog input:not([type=checkbox]){width:100%}
.close{
  float:right;border:1px solid var(--line);border-radius:999px;
  width:36px;height:36px;min-height:0;padding:0;display:grid;place-items:center;
  color:var(--ink-muted);
}
.close:hover{border-color:var(--moss);color:var(--moss-deep);transform:rotate(90deg);background:transparent}
.code-row{display:flex;gap:8px}
.code-row input{flex:1}
.code-row button{white-space:nowrap}
.wide,.primary{width:100%;margin-top:10px}
#unlock{max-width:min(440px,90vw)}
#unlock button{margin:8px}

/* ————— 页脚 ————— */
footer{
  border-top:1px solid var(--line);
  max-width:1240px;margin:110px auto 0;padding:36px 32px 44px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;
  color:var(--soft);font-size:13px;
}
#submissions>div{padding:18px 0;border-bottom:1px solid var(--line)}
[hidden]{display:none!important}

/* ————— 响应式 ————— */
@media(max-width:640px){
  header{padding:12px 18px;align-items:flex-start}
  .brand{font-size:15px}
  .brand::before{width:26px;height:26px;font-size:11px;border-radius:6px}
  header nav{gap:8px;font-size:13px;justify-content:flex-end}
  header nav a{display:none}
  header button{padding:6px 11px;min-height:34px;font-size:12.5px;white-space:nowrap}
  main{padding:0 18px 40px}
  .intro{padding-top:56px}
  .intro::before{right:0}
  .intro h1{font-size:clamp(32px,9.4vw,44px)}
  .intro>p{font-size:15.5px}
  .searchbar{flex-wrap:wrap}
  .searchbar button{width:100%}
  .sectionhead{margin-top:56px}
  .sectionhead h2{font-size:23px}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px}
  .cover{padding:20px 16px 18px}
  #category-nav{margin:22px 0 30px}
  dialog{padding:22px}
  footer{margin-top:72px;padding:28px 18px 36px}
}

/* ————— 动效克制原则 ————— */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .book{opacity:1;transform:none}
  .intro::before{transform:none}
}

/* 登录方式与账号注册沿用现有对话框，仅扩展必要操作。 */
.login-methods{display:flex;gap:8px;margin:18px 0}.login-methods button{flex:1}.login-methods [aria-pressed=true]{background:var(--ink);color:var(--paper)}
#password-fields>label{display:block;margin-top:12px}.password-action{margin-top:10px}.login-methods button:disabled{opacity:.5}