/* 图文小说 · 设计系统
 * 单 accent、中性色为主、hairline 分隔、无阴影无渐变。
 * 触屏友好：可点元素 >= 44px。
 */

/* 全局：确保 [hidden] 始终生效。
 * 本文件与其它样式里很多块设了 display:flex/grid，会盖掉浏览器对
 * [hidden] 的默认 display:none，导致“已隐藏”的元素仍然显示。
 * 用 !important 一次性根治这类问题。 */
[hidden]{display:none !important}

:root{
  --paper:#faf8f5;
  --paper-2:#f2efe9;
  --ink:#1b1917;
  --ink-2:#4c463e;
  --ink-3:#8b8478;
  --rule:#e2dcd1;
  --rule-2:#eee9e0;
  --accent:#9c3b2e;
  --ok:#3f6b4f;
  --warn:#8a6a1f;

  --fs-xs:12px; --fs-sm:13px; --fs-base:16px; --fs-lg:19px;
  --fs-xl:24px; --fs-2xl:32px; --fs-3xl:44px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  --tap:44px;
  --radius:3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  font-size:var(--fs-base);line-height:1.65;
}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);padding:0 var(--sp-5);
  height:56px;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:var(--sp-3)}
.brand-mark{
  width:14px;height:14px;border:2px solid var(--accent);
  transform:rotate(45deg);display:inline-block;
}
.brand-name{
  font-family:"Songti SC","SimSun",serif;
  font-size:var(--fs-lg);font-weight:600;letter-spacing:.02em;
}
.topbar-right{display:flex;align-items:center;gap:var(--sp-4)}

.mode-switch{display:flex;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.mode-switch button{
  min-height:36px;padding:0 var(--sp-4);
  background:transparent;border:none;cursor:pointer;
  font-size:var(--fs-sm);color:var(--ink-3);
  font-family:inherit;
}
.mode-switch button.active{background:var(--paper-2);color:var(--ink);font-weight:550}
.mode-switch button:hover{color:var(--ink)}

.btn-ghost{
  min-height:var(--tap);padding:0 var(--sp-4);
  background:transparent;border:1px solid var(--rule);
  border-radius:var(--radius);cursor:pointer;
  font-size:var(--fs-sm);color:var(--ink-2);font-family:inherit;
}
/* 同为按钮外观的链接（如进入写作工作台） */
a.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.btn-ghost:disabled{opacity:.45;cursor:not-allowed}

.btn-primary{
  min-height:var(--tap);padding:0 var(--sp-5);
  background:var(--accent);border:1px solid var(--accent);
  border-radius:var(--radius);cursor:pointer;
  font-size:var(--fs-sm);color:#fff;font-weight:550;font-family:inherit;
}
.btn-primary:hover{opacity:.92}

.btn-icon{
  width:32px;height:32px;background:transparent;border:1px solid var(--rule);
  border-radius:var(--radius);cursor:pointer;color:var(--ink-3);
  font-size:var(--fs-base);line-height:1;
}
.btn-icon:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------------- 布局 ---------------- */
.layout{display:flex;min-height:calc(100vh - 56px)}

.sidebar{
  width:260px;flex:0 0 260px;
  border-right:1px solid var(--rule);
  padding:var(--sp-5) 0;
}
.sidebar-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--sp-5) var(--sp-4);
}
.sidebar-head h2{
  margin:0;font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.novel-list{list-style:none;margin:0;padding:0}
.novel-list li{
  padding:var(--sp-3) var(--sp-5);cursor:pointer;
  border-left:2px solid transparent;
  min-height:var(--tap);
  display:flex;flex-direction:column;justify-content:center;
}
.novel-list li:hover{background:var(--paper-2)}
.novel-list li.active{border-left-color:var(--accent);background:var(--paper-2)}
.novel-list .n-name{font-size:var(--fs-base);color:var(--ink)}
.novel-list .n-meta{font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}

.reader{flex:1;min-width:0;padding:var(--sp-7) var(--sp-6)}
.reader-inner{max-width:720px;margin:0 auto}

/* ---------------- 空状态 ---------------- */
.empty{padding:var(--sp-7) 0;color:var(--ink-3)}
.empty-title{font-size:var(--fs-lg);color:var(--ink-2);margin:0 0 var(--sp-2)}
.empty-hint{margin:0;font-size:var(--fs-sm)}

/* ---------------- 章节 ---------------- */
.chapter{max-width:720px;margin:0 auto}
.chapter-head{border-bottom:1px solid var(--rule);padding-bottom:var(--sp-4);margin-bottom:var(--sp-6)}
.chapter-kicker{
  margin:0 0 var(--sp-2);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;
}
.chapter-title{
  margin:0;font-family:"Songti SC","SimSun",serif;
  font-size:var(--fs-2xl);font-weight:600;line-height:1.25;letter-spacing:-.01em;
}
.chapter-body{font-size:var(--fs-lg);line-height:1.85;color:var(--ink-2)}
.chapter-body p{margin:0 0 1.2em}
.chapter-body h2,.chapter-body h3{
  font-family:"Songti SC","SimSun",serif;color:var(--ink);
  margin:1.8em 0 .6em;line-height:1.3;
}
.chapter-body img{
  display:block;max-width:100%;height:auto;margin:var(--sp-6) auto;
  border:1px solid var(--rule);
}
.chapter-body figure{margin:var(--sp-6) 0}
.chapter-body figcaption{
  text-align:center;font-size:var(--fs-sm);color:var(--ink-3);
  margin-top:var(--sp-3);
}

.chapter-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);margin-top:var(--sp-7);
  padding-top:var(--sp-5);border-top:1px solid var(--rule);
}
.chapter-pos{font-size:var(--fs-sm);color:var(--ink-3)}

/* ---------------- 模态 ---------------- */
.modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(27,25,23,.45);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);
}
.modal[hidden]{display:none}
.modal-card{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);padding:var(--sp-6);
  width:100%;max-width:360px;
}
.modal-card h3{
  margin:0 0 var(--sp-2);font-family:"Songti SC",serif;
  font-size:var(--fs-xl);font-weight:600;
}
.modal-hint{margin:0 0 var(--sp-5);font-size:var(--fs-sm);color:var(--ink-3)}
.modal-card input{
  width:100%;min-height:var(--tap);padding:0 var(--sp-4);
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);
  font-size:var(--fs-base);font-family:inherit;
}
.modal-card input:focus{outline:none;border-color:var(--accent)}
.modal-error{
  margin:var(--sp-3) 0 0;font-size:var(--fs-sm);color:var(--accent);
}
.modal-actions{
  display:flex;justify-content:flex-end;gap:var(--sp-3);margin-top:var(--sp-5);
}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:var(--sp-6);transform:translateX(-50%);
  z-index:60;background:var(--ink);color:var(--paper);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--radius);
  font-size:var(--fs-sm);max-width:80vw;
}
.toast[hidden]{display:none}

/* ---------------- 窄屏 ---------------- */
@media (max-width:820px){
  .layout{flex-direction:column}
  .sidebar{
    width:auto;flex:none;border-right:none;
    border-bottom:1px solid var(--rule);
    padding:var(--sp-3) 0;max-height:34vh;overflow-y:auto;
  }
  .novel-list li{padding:var(--sp-3) var(--sp-4)}
  .reader{padding:var(--sp-5) var(--sp-4)}
  .chapter-title{font-size:var(--fs-xl)}
  .chapter-body{font-size:var(--fs-base)}
  .brand-name{font-size:var(--fs-base)}
  .topbar{padding:0 var(--sp-4)}
  .mode-switch button{padding:0 var(--sp-3)}
  /* 兜底：极窄屏下顶栏允许换行，避免元素被挤扁 */
  .topbar{flex-wrap:wrap;height:auto;min-height:56px;row-gap:var(--sp-2);padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
}


/* ---------------- 章节翻页器（编号） ---------------- */

.chapter-pager {
  display: flex; align-items: center; gap: var(--sp-1);
  flex-wrap: wrap; justify-content: center;
  max-width: 560px; overflow-x: auto; padding: var(--sp-1) 0;
}
.chapter-num {
  font-family: inherit; font-size: var(--fs-sm);
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.chapter-num:hover { border-color: var(--ink-3); color: var(--ink); }
.chapter-num.active {
  border-color: var(--accent); color: var(--paper);
  background: var(--accent); font-weight: 600;
}

/* ---------------- 书签栏 ---------------- */

.bookmark-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-top: var(--sp-5);
  padding-top: var(--sp-4); border-top: 1px solid var(--rule-2);
}
#markBtn.on { border-color: var(--accent); color: var(--accent); }
.bookmark-list { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bookmark-empty { color: var(--ink-3); font-size: var(--fs-xs); }
.bookmark-chip {
  font-family: inherit; font-size: var(--fs-xs);
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink-2);
  padding: 3px 10px; cursor: pointer;
}
.bookmark-chip:hover { border-color: var(--accent); color: var(--accent); }