/* =====================================================================
   轻写作 ·「文心」设计系统 (Wén Xīn Design System)
   纸与墨 · 暖中性色 + 墨靛强调色 + 编辑场景衬线体
   注意：本文件保留所有 JS 依赖的类名与行为（.btn-brand/.card/.form-input/
   .bottom-nav/.drawer/.tree-item/.save-tip/.tag-chip/.editor-fullscreen 等）。
   ===================================================================== */

:root{
  /* 品牌：墨靛 */
  --brand-50:#F1F1FB; --brand-100:#E4E4F8; --brand-200:#C9C9F0;
  --brand-300:#A6A3E6; --brand-400:#847FE0; --brand-500:#635CDE;
  --brand-600:#5149C9; --brand-700:#413A9E;
  /* 纸 / 墨 中性色 */
  --bg:#FAF8F4; --bg-subtle:#F4F1EA; --surface:#FFFFFF; --surface-2:#F7F4EE;
  --border:#E8E3D9; --border-strong:#DCD5C8;
  --text:#211F1B; --text-2:#5E5A52; --text-3:#908A7E;
  /* 语义 */
  --success:#2F9E6B; --warning:#D9A441; --error:#D9534F;
  /* 字体 / 形状 / 阴影 */
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Songti SC","STSong","SimSun","Noto Serif SC",Georgia,"Times New Roman",serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --sh-sm:0 1px 2px rgba(33,31,27,.04),0 1px 3px rgba(33,31,27,.06);
  --sh-md:0 4px 12px rgba(33,31,27,.08);
  --sh-lg:0 14px 40px rgba(33,31,27,.14);
  --ease:cubic-bezier(.4,0,.2,1);
}
.dark{
  --brand-50:#211F36; --brand-100:#2A2750; --brand-200:#352F6B;
  --brand-300:#A6A3E6; --brand-400:#847FE0; --brand-500:#7C75E6;
  --brand-600:#635CDE; --brand-700:#5149C9;
  --bg:#17161B; --bg-subtle:#1E1D23; --surface:#222127; --surface-2:#2A2931;
  --border:#32313A; --border-strong:#3F3D49;
  --text:#ECE9E2; --text-2:#B3AEA3; --text-3:#807B71;
  --success:#3FB985; --warning:#E3B35A; --error:#E5736F;
  --sh-sm:0 1px 2px rgba(0,0,0,.3); --sh-md:0 6px 18px rgba(0,0,0,.4); --sh-lg:0 18px 48px rgba(0,0,0,.55);
}

*{-webkit-tap-highlight-color:transparent}
html,body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.5}
body{background:var(--bg);color:var(--text);transition:background .3s var(--ease),color .3s var(--ease)}
.serif{font-family:var(--font-serif)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(120,120,120,.35);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.55)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer;
  border-radius:var(--r-sm);padding:9px 16px;transition:all .15s var(--ease);user-select:none;text-decoration:none}
.btn:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.btn[disabled],.btn.disabled{opacity:.55;pointer-events:none}
.btn-brand{background:var(--brand-600);color:#fff;box-shadow:var(--sh-sm)}
.btn-brand:hover{background:var(--brand-700);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-brand:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-outline{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.btn-outline:hover{border-color:var(--brand-400);color:var(--brand-600);background:var(--brand-50)}
.dark .btn-outline{background:var(--surface)}
.dark .btn-outline:hover{background:var(--surface-2)}
.btn-sm{padding:6px 12px;font-size:13px}

/* ---------- 卡片 ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .2s}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--border-strong)}

/* ---------- 表单 ---------- */
input,textarea,select{outline:none;font-family:inherit}
.field{display:block;margin-bottom:14px}
.label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px;font-weight:500}
.form-input{width:100%;padding:10px 13px;font-size:14px;background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s}
.form-input::placeholder{color:var(--text-3)}
.form-input:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 18%,transparent)}
.dark .form-input{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
textarea.form-input{resize:vertical;line-height:1.6}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--border)} /* z-index 需高于 .editor-fullscreen(50)，否则全屏面板盖住顶栏导致无法退出 */
.topbar-in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;text-decoration:none;color:var(--text)}
.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));box-shadow:var(--sh-sm);font-size:18px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:none;
  background:transparent;color:var(--text-2);cursor:pointer;font-size:16px;transition:.15s}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}

/* ---------- 登录 ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(1200px 500px at 80% -10%,color-mix(in srgb,var(--brand-500) 10%,transparent),transparent),
    radial-gradient(900px 500px at 0% 110%,color-mix(in srgb,var(--brand-500) 8%,transparent),transparent),
    var(--bg)}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:34px 30px}
.auth-head{text-align:center;margin-bottom:24px}
.auth-head .logo{width:56px;height:56px;border-radius:16px;font-size:28px;margin:0 auto 14px}
.auth-head h1{font-size:23px;letter-spacing:.5px}
.auth-head p{color:var(--text-3);font-size:13px;margin-top:5px}
.segmented{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px;margin-bottom:22px}
.segmented button{flex:1;border:none;background:transparent;padding:8px 0;border-radius:6px;font:inherit;font-weight:600;font-size:14px;color:var(--text-2);cursor:pointer;transition:.18s}
.segmented button.active{background:var(--surface);color:var(--brand-600);box-shadow:var(--sh-sm)}
.dark .segmented button.active{color:var(--brand-300)}

/* ---------- 仪表盘 ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:28px 16px 100px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.page-head h1{font-size:25px;font-weight:700}
.page-head .sub{color:var(--text-3);font-size:13px;margin-top:2px}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.work-card{padding:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.work-cover{height:96px;display:flex;align-items:flex-end;padding:14px;position:relative}
.work-cover .initial{font-family:var(--font-serif);font-size:42px;font-weight:700;color:#fff;opacity:.92;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.work-cover .tag{position:absolute;top:12px;right:12px;font-size:11px;background:rgba(255,255,255,.85);color:#333;padding:2px 9px;border-radius:999px;font-weight:600}
.work-body{padding:16px;display:flex;flex-direction:column;flex:1}
.work-body h3{font-size:17px;font-weight:700;margin-bottom:3px}
.work-author{font-size:12px;color:var(--text-3);margin-bottom:8px}
.work-sum{font-size:13px;color:var(--text-2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.work-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);padding-top:12px;margin-top:12px;border-top:1px solid var(--border)}
.work-actions{display:flex;gap:8px;margin-top:10px}
.work-actions button{flex:1;font-size:12px;padding:6px 0;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:.15s}
.work-actions button:hover{border-color:var(--brand-400);color:var(--brand-600)}
.work-actions .danger:hover{border-color:var(--error);color:var(--error);background:color-mix(in srgb,var(--error) 8%,transparent)}
.empty{text-align:center;padding:70px 20px;color:var(--text-3)}
.empty .em{font-size:46px;margin-bottom:12px}

/* ---------- 编辑器布局 ---------- */
.editor-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.editor-body{flex:1;display:flex;min-height:0}
.sidebar{width:272px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.sidebar-head .t{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.5px}
.side-tree{flex:1;overflow-y:auto;padding:10px}
.side-foot{padding:10px;display:flex;gap:8px;border-top:1px solid var(--border)}
.side-foot button{flex:1;font-size:13px;padding:8px 0;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;transition:.15s}
.side-foot button:hover{border-color:var(--brand-400);color:var(--brand-600)}

/* 章节树 */
.tree-item{user-select:none;transition:background .12s}
.tree-item:hover{background:color-mix(in srgb,var(--brand-500) 9%,transparent)}
.tree-item.active{background:color-mix(in srgb,var(--brand-500) 16%,transparent);color:var(--brand-700);font-weight:600}
.dark .tree-item:hover{background:color-mix(in srgb,var(--brand-500) 20%,transparent)}
.dark .tree-item.active{background:color-mix(in srgb,var(--brand-500) 26%,transparent);color:var(--brand-300)}
.tree-handle{cursor:grab;color:var(--text-3)}
.tree-handle:active{cursor:grabbing}
/* 编辑器内分卷/章节结构 */
.vol{margin-bottom:6px}
.vol-head{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:8px}
.vol-head .vh-title{font-weight:600;font-size:13.5px;flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vol-head .vh-act{opacity:0;font-size:12px;color:var(--text-3);background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:5px;transition:.15s}
.vol:hover .vh-act{opacity:1}
.vol-head .vh-act:hover{color:var(--brand-600);background:var(--surface-2)}
.chap-list{border-left:1px solid var(--border);margin-left:10px;padding-left:4px}
.chap-item{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--text-2);transition:background .12s}
.chap-item:hover{background:color-mix(in srgb,var(--brand-500) 9%,transparent)}
.chap-item.active{background:color-mix(in srgb,var(--brand-500) 16%,transparent);color:var(--brand-700);font-weight:600}
.dark .chap-item.active{color:var(--brand-300)}
.chap-item .chap-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chap-item .c-wc{font-size:11px;color:var(--text-3)}

/* 主编辑区 */
.editor-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-subtle)}
.chap-bar{padding:14px 22px;background:var(--surface);border-bottom:1px solid var(--border)}
.chap-title-input{width:100%;font-family:var(--font-serif);font-size:21px;font-weight:700;border:none;background:transparent;color:var(--text);outline:none}
.chap-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);margin-top:4px}
.edit-scroll{flex:1;overflow-y:auto;padding:22px}

/* Quill 写作区（纸面） */
#editor-container{background:var(--surface);border:1px solid var(--border);border-radius:0 0 var(--r-md) var(--r-md);min-height:60vh}
.ql-editor{font-family:var(--font-serif);font-size:17px;line-height:1.95;color:var(--text);min-height:60vh;max-width:760px;margin:0 auto}
.ql-toolbar.ql-snow{border-radius:var(--r-md) var(--r-md) 0 0;border-color:var(--border);background:var(--surface-2)}
.dark .ql-toolbar.ql-snow,.dark .ql-container.ql-snow{border-color:var(--border);background:var(--surface)}
.dark .ql-editor{color:var(--text)}
.dark .ql-snow .ql-stroke{stroke:var(--text)}
.dark .ql-snow .ql-fill{fill:var(--text)}
.dark .ql-snow .ql-picker{color:var(--text)}

/* 右侧辅助面板 */
.side-panel{width:264px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);flex-direction:column}
.side-panel .tabs{display:flex;padding:8px;gap:6px;border-bottom:1px solid var(--border)}
.side-panel .tabs button{flex:1;padding:7px 0;font-size:13px;border:none;border-radius:8px;background:transparent;color:var(--text-2);cursor:pointer;font-weight:600;transition:.15s}
.side-panel .tabs button.active{background:var(--brand-50);color:var(--brand-600)}
.dark .side-panel .tabs button.active{background:var(--brand-100);color:var(--brand-300)}
.panel-body{flex:1;overflow-y:auto;padding:12px}
.mini-card{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px;margin-bottom:10px}
.mini-card .mc-type{font-size:11px;color:var(--text-3);margin-bottom:3px}
.mini-card .mc-title{font-size:14px;font-weight:600}
.mini-card .mc-desc{font-size:12px;color:var(--text-2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
.dark .avatar-sm{background:var(--brand-200);color:var(--brand-700)}

/* 保存提示 */
.save-tip{font-size:12px;color:var(--text-3);transition:opacity .3s,color .3s}
.save-tip.saving{color:var(--warning)}
.save-tip.saved{color:var(--success)}

/* 标签 */
.tag-chip{display:inline-block;padding:2px 8px;font-size:12px;border-radius:999px;background:var(--brand-100);color:var(--brand-700);margin-right:4px}
.dark .tag-chip{background:var(--brand-200);color:var(--brand-700)}

/* 加载 */
.loading::after{content:'加载中…';color:var(--text-3)}

/* ---------- 底部导航（移动端） ---------- */
.bottom-nav{display:none}
@media (max-width:768px){
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;
    background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(10px);
    border-top:1px solid var(--border);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .bottom-nav-item{flex:1;text-align:center;padding:6px 0;color:var(--text-2);font-size:12px;text-decoration:none}
  .bottom-nav-item.active{color:var(--brand-600)}
  .dark .bottom-nav-item.active{color:var(--brand-300)}
  body{padding-bottom:60px}
  .work-grid{grid-template-columns:1fr}
}

/* ---------- 抽屉式侧栏（移动端） ---------- */
.drawer{position:fixed;top:49px;bottom:0;left:0;z-index:36;transform:translateX(-100%);transition:transform .25s var(--ease)}
.drawer.open{transform:translateX(0);z-index:45}
.drawer-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
.drawer-mask.show{display:block}
@media (min-width:769px){
  .drawer{position:static;transform:none;z-index:auto}
  .drawer-mask{display:none!important}
}

/* ---------- 编辑器全屏（移动端） ---------- */
@media (max-width:768px){
  .editor-fullscreen{position:fixed!important;inset:0;z-index:50;background:var(--surface);padding:0!important;display:flex;flex-direction:column}
  .dark .editor-fullscreen{background:var(--bg)}
  .editor-fullscreen #editor-container{flex:1;min-height:0}
  .editor-fullscreen .ql-toolbar{order:-1}
  /* 全屏时右上角退出按钮（顶栏已隐藏，悬浮于面板之上；无底色，融入主题） */
  .fs-exit{position:fixed;top:12px;right:16px;z-index:51;width:36px;height:36px;display:none;place-items:center;border:none;border-radius:8px;background:transparent;color:var(--text-2);font-size:20px;cursor:pointer;transition:.15s}
  .fs-exit:active{background:var(--surface-2)}
  body.sidebar-open{overflow:hidden}
}

/* ---------- 模态入场动画 ---------- */
@keyframes wxPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.fixed.inset-0 > .card{animation:wxPop .22s var(--ease)}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* =====================================================================
 * 阅读模式 (read.php)
 * ===================================================================== */
html.read-day,html.read-night,html.read-eye,html.read-paper{
  background:var(--read-bg,#FAF8F4);
  color:var(--read-fg,#211F1B);
}
.read-day   { --read-bg:#FAF8F4; --read-fg:#211F1B; --read-sub:#5E5A52; }
.read-night { --read-bg:#17161B; --read-fg:#ECE9E2; --read-sub:#B3AEA3; }
.read-eye   { --read-bg:#C7E1C7; --read-fg:#1B3A1B; --read-sub:#3E5E3E; }
.read-paper { --read-bg:#F0E2C0; --read-fg:#3B2A1A; --read-sub:#6B5236; }

.read-stage{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--read-bg);
  color:var(--read-fg);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transition:background .3s ease,color .3s ease;
}
.read-paper{
  max-width:720px;margin:0 auto;
  padding:96px 32px 160px;
  font-family:var(--font-serif);
  font-size:18px;line-height:1.85;
  color:var(--read-fg);
  transition:font-size .15s ease,line-height .15s ease,color .3s ease;
}
@media (max-width:768px){
  .read-paper{padding:80px 20px 140px;font-size:17px}
}
.read-title{
  font-family:var(--font-serif);
  font-size:1.9em;font-weight:700;
  text-align:center;margin:0 0 8px;color:var(--read-fg);
  letter-spacing:.5px;
}
.read-meta{
  text-align:center;font-size:.82em;
  color:var(--read-sub);margin-bottom:36px;
  font-family:var(--font-sans);
}
.read-content{font-size:1em;line-height:inherit;color:var(--read-fg)}
.read-content p{margin:0 0 1.2em;text-indent:2em}
.read-content h1,.read-content h2,.read-content h3,.read-content h4{
  font-family:var(--font-serif);font-weight:700;margin:1.6em 0 .8em;color:var(--read-fg)}
.read-content h1{font-size:1.4em}
.read-content h2{font-size:1.25em}
.read-content h3{font-size:1.1em}
.read-content blockquote{
  margin:1.4em 0;padding:.6em 1.2em;
  border-left:3px solid var(--read-sub);color:var(--read-sub);
  background:rgba(0,0,0,.03);
}
.read-night .read-content blockquote,
.read-eye   .read-content blockquote,
.read-paper .read-content blockquote{background:rgba(255,255,255,.06)}
.read-content ul,.read-content ol{margin:1em 0 1.4em 2em}
.read-content li{margin:.4em 0}
.read-content code{font-family:Menlo,Consolas,monospace;background:rgba(0,0,0,.08);padding:1px 6px;border-radius:4px;font-size:.92em}
.read-content pre{background:rgba(0,0,0,.08);padding:1em;border-radius:8px;overflow-x:auto;line-height:1.5}
.read-content img{max-width:100%;height:auto;border-radius:6px;display:block;margin:1em auto}
.read-content a{color:var(--brand-600);text-decoration:underline}
.read-loading{text-align:center;color:var(--read-sub);padding:80px 0;font-family:var(--font-sans)}

/* 顶栏 */
.read-topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:color-mix(in srgb,var(--read-bg) 92%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--read-fg) 10%,transparent);
  transform:translateY(-100%);transition:transform .25s ease;
  padding-top:env(safe-area-inset-top);
}
.read-topbar.visible{transform:translateY(0)}
.read-topbar-inner{
  max-width:1100px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:14px;
}
.read-back{
  color:var(--read-sub);text-decoration:none;font-size:14px;
  padding:6px 10px;border-radius:8px;transition:.15s;flex-shrink:0;
  font-family:var(--font-sans);
}
.read-back:hover{background:color-mix(in srgb,var(--read-fg) 8%,transparent);color:var(--read-fg)}
.read-titles{flex:1;min-width:0;text-align:center;font-family:var(--font-sans)}
.read-work-title{font-size:12px;color:var(--read-sub);letter-spacing:.5px}
.read-chap-title{font-size:14px;font-weight:600;color:var(--read-fg);margin-top:2px}
.read-ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.read-tools{display:flex;gap:4px;flex-shrink:0}
.read-icon-btn{
  width:34px;height:34px;border-radius:8px;border:none;background:transparent;
  color:var(--read-sub);cursor:pointer;font-size:16px;display:grid;place-items:center;
  transition:.15s;
}
.read-icon-btn:hover{background:color-mix(in srgb,var(--read-fg) 10%,transparent);color:var(--read-fg)}
.read-icon-btn:disabled{opacity:.35;cursor:default}
.read-icon-btn:disabled:hover{background:transparent;color:var(--read-sub)}

/* 进度条 */
.read-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:40;
  background:transparent;opacity:0;transition:opacity .25s;
}
.read-progress.visible{opacity:1}
#read-progress-bar{height:100%;width:0;background:var(--brand-600);transition:width .1s linear}

/* 翻页热区 */
.read-zone{
  position:fixed;top:80px;bottom:80px;width:25%;max-width:160px;
  background:transparent;border:none;cursor:pointer;z-index:10;
}
.read-zone-left{left:0}
.read-zone-right{right:0}
.read-zone:hover{background:linear-gradient(to right,color-mix(in srgb,var(--read-fg) 4%,transparent),transparent)}
.read-zone-right:hover{background:linear-gradient(to left,color-mix(in srgb,var(--read-fg) 4%,transparent),transparent)}
@media (max-width:768px){
  .read-zone{top:60px;bottom:60px;width:20%}
}

/* 底栏 */
.read-bottombar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  background:color-mix(in srgb,var(--read-bg) 92%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-top:1px solid color-mix(in srgb,var(--read-fg) 10%,transparent);
  transform:translateY(100%);transition:transform .25s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
.read-bottombar.visible{transform:translateY(0)}
.read-bottombar-inner{
  max-width:720px;margin:0 auto;padding:8px 18px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--read-sub);font-family:var(--font-sans);
}
.read-tip{opacity:.75}
.read-percent{color:var(--brand-600);font-weight:600;font-variant-numeric:tabular-nums}

/* 目录抽屉 */
.read-toc{
  position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;z-index:50;
  background:var(--read-bg);color:var(--read-fg);
  border-left:1px solid color-mix(in srgb,var(--read-fg) 12%,transparent);
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
  box-shadow:-8px 0 24px rgba(0,0,0,.12);
}
.read-toc.open{transform:translateX(0)}
.read-toc-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45;
  display:none;
}
.read-toc-mask.open{display:block}
.read-toc-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid color-mix(in srgb,var(--read-fg) 10%,transparent);
  font-weight:600;font-size:15px;font-family:var(--font-sans);
}
.read-toc-list{flex:1;overflow-y:auto;padding:8px 0}
.read-toc-vol{
  padding:14px 18px 4px;font-size:11px;font-weight:600;
  color:var(--read-sub);letter-spacing:.5px;
  font-family:var(--font-sans);
}
.read-toc-item{
  display:flex;align-items:center;gap:10px;padding:9px 18px;
  text-decoration:none;color:var(--read-fg);font-size:14px;
  font-family:var(--font-sans);cursor:pointer;transition:.12s;
}
.read-toc-item:hover{background:color-mix(in srgb,var(--read-fg) 6%,transparent)}
.read-toc-item.active{
  background:color-mix(in srgb,var(--brand-500) 14%,transparent);
  color:var(--brand-600);font-weight:600;
}
.read-toc-num{
  flex-shrink:0;width:24px;text-align:right;font-size:11px;
  color:var(--read-sub);font-variant-numeric:tabular-nums;
}
.read-toc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 章节行右侧槽位：平时显示字数，悬停时切换为编辑/删除按钮（共用同一位置，不增加空白） */
.chap-actions{
  position:relative;
  flex-shrink:0;
  width:44px;height:20px;
  display:flex;align-items:center;justify-content:center;
}
.chap-actions .chap-words{
  font-size:11px;
  color:var(--text-3,#908A7E);
  font-variant-numeric:tabular-nums;
  transition:opacity .15s ease;
}
.chap-actions .chap-edit,
.chap-actions .chap-del{
  position:absolute;
  top:0;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;
  background:transparent;border:none;border-radius:4px;
  cursor:pointer;padding:0;
  opacity:0;pointer-events:none;
  transition:opacity .15s ease,background .15s ease,color .15s ease;
}
.chap-actions .chap-edit{right:22px;color:var(--text-3,#908A7E)}
.chap-actions .chap-del{right:0;color:var(--error,#D9534F)}
.chap-item:hover .chap-actions .chap-words{opacity:0}
.chap-item:hover .chap-actions .chap-edit,
.chap-item:hover .chap-actions .chap-del{
  opacity:1;
  pointer-events:auto;
}
.chap-item:hover .chap-actions .chap-edit:hover{
  background:var(--brand-500);
  color:#fff;
}
.chap-item:hover .chap-actions .chap-del:hover{
  background:var(--error,#D9534F);
  color:#fff;
}

/* 阅读模式页：隐藏公共 footer，避免与阅读内容重叠 */
body.reader-mode footer.text-center.text-xs.text-gray-400{display:none}
body.reader-mode{padding-bottom:0!important;background:var(--read-bg,#FAF8F4)}

/* 章末：下一章 / 全书完 */
.read-next-wrap{
  position:relative;
  z-index:20; /* 高于翻页热区(z-index:10)，确保按钮可点击 */
  margin-top:44px;
  padding-top:22px;
  border-top:1px solid color-mix(in srgb,var(--read-fg) 10%,transparent);
  text-align:center;
  font-family:var(--font-sans);
}
.read-end-tip{
  font-size:12px;
  color:var(--read-sub);
  letter-spacing:2px;
  margin-bottom:16px;
}
.read-next-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;
  border:1px solid color-mix(in srgb,var(--read-fg) 18%,transparent);
  border-radius:8px;
  background:transparent;
  color:var(--read-sub);
  font-size:13px;font-weight:400;
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.read-next-btn:hover{
  color:var(--read-fg);
  border-color:color-mix(in srgb,var(--read-fg) 35%,transparent);
  background:color-mix(in srgb,var(--read-fg) 5%,transparent);
}
.read-next-btn .read-next-label{letter-spacing:1px}
.read-next-btn .read-next-title{
  max-width:300px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;opacity:.75;
}
.read-next-btn .read-next-arrow{font-size:14px;line-height:1}
.read-next-btn.hidden{display:none}
.read-empty,
.read-empty-state{
  text-align:center;
  color:var(--read-sub,#5E5A52);
  padding:60px 20px;
  font-family:var(--font-sans);
}
.read-empty{font-size:12px;padding:24px 20px}
.read-empty-state{font-size:14px}
.read-empty-state.read-error{color:var(--error,#D9534F)}