:root{
  --bg:#fbfbfd;
  --panel:#ffffff;
  --ink:#1f2430;
  --ink-soft:#5b6272;
  --ink-faint:#9aa1b1;
  --line:#e7e7ef;
  --line-strong:#d5d5e2;
  --sel-bg:#f0f6ee;
  --sel-bar:#4a7d3a;
  --blue:#4168a8;   --blue-bg:#e9eff9;
  --orange:#a8631f; --orange-bg:#f9efe3;
  --green:#3c6b2e;  --green-bg:#eef5ea;
  --danger:#b5342a;
  --shadow:0 6px 24px rgba(30,35,70,.10);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}

/* ---------- 通用按钮 ---------- */
button{font-family:inherit;}

/* ---------- 登录/注册 ---------- */
.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(180deg,#fbfbfd,#f2f5ef);
}
.auth-card{
  width:100%;max-width:380px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:28px 24px;
}
.auth-card h1{font-size:20px;margin:0 0 4px;text-align:center;}
.auth-card .sub{text-align:center;color:var(--ink-faint);font-size:13px;margin:0 0 20px;}
.auth-tabs{display:flex;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;margin-bottom:16px;}
.auth-tabs button{flex:1;border:0;background:#fff;color:var(--ink-soft);padding:8px;font-size:14px;cursor:pointer;}
.auth-tabs button + button{border-left:1px solid var(--line);}
.auth-tabs button.on{background:var(--sel-bg);color:var(--sel-bar);font-weight:600;}
.auth-form{display:flex;flex-direction:column;gap:10px;}
.auth-form input{
  border:1px solid var(--line-strong);border-radius:9px;padding:10px 12px;font-size:15px;
  background:#fff;color:var(--ink);outline:none;
}
.auth-form input:focus{border-color:var(--sel-bar);}
.auth-form button{
  margin-top:4px;border:0;border-radius:9px;padding:11px;background:var(--sel-bar);color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;
}
.auth-form button:hover{background:#3d6a30;}
.auth-err{color:var(--danger);font-size:13px;min-height:18px;margin:10px 0 0;text-align:center;}

/* ---------- 顶栏 ---------- */
#topbar{
  position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:10px 18px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.tb-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.chapter-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.icon-btn,.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-soft);border-radius:8px;padding:4px 12px;font-size:13px;cursor:pointer;}
.icon-btn:hover,.chip:hover{border-color:#b9b9cc;}
.icon-btn .ico{display:none;}
.seg{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;}
.seg button{border:0;background:#fff;color:var(--ink-soft);padding:4px 12px;font-size:13px;cursor:pointer;}
.seg button + button{border-left:1px solid var(--line);}
.seg button.on{color:#fff;}
.seg button.on[data-v=simple]{background:var(--green);}
.seg button.on[data-v=plain]{background:var(--orange);}
.seg button.on[data-v=original]{background:var(--blue);}
.seg .lbl-short{display:none;}
.user-box{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.user-box .uname{font-weight:600;color:var(--ink);white-space:nowrap;}
.user-box button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:#fff;border-radius:8px;padding:3px 10px;font-size:12px;color:var(--ink-soft);cursor:pointer;}
.user-box .ico-logout{display:none;}

.toc-menu{
  position:absolute;top:52px;left:18px;z-index:40;background:#fff;border:1px solid var(--line-strong);
  border-radius:10px;box-shadow:var(--shadow);padding:6px;min-width:220px;
}
.toc-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 12px;border-radius:7px;font-size:14px;color:var(--ink);cursor:pointer;}
.toc-menu button:hover{background:#f2f3f8;}
.toc-menu button.on{background:var(--sel-bg);color:var(--sel-bar);font-weight:600;}

/* ---------- 正文 ---------- */
#reader{max-width:760px;margin:0 auto;padding:28px 22px 140px;}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 0;color:var(--ink-faint);gap:14px;font-size:14px;}
.spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--sel-bar);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.block{position:relative;padding:8px 12px;margin:0 0 6px;border-radius:8px;cursor:pointer;transition:background .12s;}
.block:hover{background:#f4f6f2;}
.block .b-text{margin:0;}
.block .speaker{font-weight:700;color:var(--sel-bar);margin-right:6px;}
.block.selected{background:var(--sel-bg);}
.block.selected::before{content:"";position:absolute;left:2px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--sel-bar);}
.block .b-note{position:absolute;right:9px;top:7px;display:inline-flex;align-items:center;justify-content:center;color:#b07b34;line-height:1;cursor:pointer;}
.block .b-note:hover{color:#8a5f1f;}
.block .b-note .badge{position:absolute;top:-5px;right:-6px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#e0653a;color:#fff;font-size:10px;line-height:15px;text-align:center;font-weight:700;box-shadow:0 0 0 1.5px #fff;}
.block.resume{animation:resumeFlash 1.6s ease-out;}
@keyframes resumeFlash{0%,55%{background:var(--sel-bg);}100%{background:transparent;}}
.quote{border-left:3px solid var(--line-strong);padding-left:14px;color:var(--ink-soft);font-style:italic;}
.hint{font-size:11px;color:var(--ink-faint);margin:0 0 18px;padding-left:12px;}

/* ---------- 抽屉 ---------- */
.drawer{
  position:fixed;top:0;right:0;z-index:50;width:min(430px,44vw);height:100%;background:var(--panel);
  border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(30,35,70,.10);display:flex;flex-direction:column;
  animation:slidein .18s ease-out;
}
@keyframes slidein{from{transform:translateX(24px);opacity:.4;}to{transform:translateX(0);opacity:1;}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);}
.drawer-tabs{display:flex;gap:4px;}
.drawer-tabs button{border:0;background:none;color:var(--ink-soft);font-size:14px;padding:6px 10px;border-radius:8px;cursor:pointer;}
.drawer-tabs button.on{background:var(--sel-bg);color:var(--sel-bar);font-weight:600;}
.tab-count{font-size:11px;color:#a8631f;}
.drawer-close{border:0;background:none;font-size:16px;color:var(--ink-faint);cursor:pointer;width:28px;height:28px;border-radius:6px;}
.drawer-close:hover{background:#f2f3f8;color:var(--ink);}
.drawer-unit{padding:8px 16px 0;font-size:12px;color:var(--ink-faint);}
.drawer-pane{padding:12px 16px;overflow-y:auto;flex:1;}

/* 对照卡片 */
.vcard{margin-bottom:16px;}
.vtag{display:inline-block;font-size:11px;font-weight:700;border-radius:5px;padding:1px 8px;margin-bottom:6px;}
.vtag.original{color:var(--blue);background:var(--blue-bg);}
.vtag.plain{color:var(--orange);background:var(--orange-bg);}
.vtag.simple{color:var(--green);background:var(--green-bg);}
.vcard p{margin:0;font-size:14.5px;line-height:1.85;color:#2b3140;}

/* 笔记 */
.note{display:flex;gap:9px;margin-bottom:14px;}
.avatar{width:28px;height:28px;border-radius:50%;flex:0 0 28px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;}
.note-main{flex:1;min-width:0;}
.note-meta{font-size:12px;color:var(--ink-faint);margin-bottom:2px;}
.note-meta .nick{color:var(--ink-soft);font-weight:600;}
.note-content{font-size:14.5px;line-height:1.75;color:#2b3140;white-space:pre-wrap;word-break:break-word;}
.note-actions{display:flex;gap:14px;margin-top:4px;font-size:12px;color:var(--ink-faint);}
.note-actions button{border:0;background:none;color:var(--ink-faint);font-size:12px;cursor:pointer;padding:0;}
.note-actions button:hover{color:var(--sel-bar);}
.note-actions button.liked{color:var(--orange);font-weight:600;}
.note-actions button.danger:hover{color:var(--danger);}
.replies{margin-top:10px;padding-left:12px;border-left:2px solid var(--line);}
.compose{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);}
.compose textarea{width:100%;min-height:64px;border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit;resize:vertical;outline:none;}
.compose textarea:focus{border-color:var(--sel-bar);}
.compose .row{display:flex;justify-content:flex-end;gap:8px;}
.compose button{border:0;border-radius:8px;padding:7px 16px;font-size:14px;cursor:pointer;background:var(--sel-bar);color:#fff;}
.compose button.ghost{background:#fff;border:1px solid var(--line-strong);color:var(--ink-soft);}
.note-empty{color:var(--ink-faint);font-size:14px;text-align:center;padding:24px 0;}
.note-edit textarea{width:100%;min-height:60px;border:1px solid var(--line-strong);border-radius:9px;padding:8px 10px;font-size:14px;font-family:inherit;resize:vertical;outline:none;}

.scrim{position:fixed;inset:0;background:rgba(20,22,40,.18);z-index:45;}

/* ---------- 手机 ---------- */
@media (max-width:720px){
  #topbar{padding:8px 12px;gap:8px;}
  .tb-left{flex-basis:100%;}
  #user-box{margin-left:auto;justify-content:flex-end;}
  .icon-btn{padding:6px 9px;}
  .icon-btn .ico{display:block;}
  .icon-btn .lbl-full{display:none;}
  .seg .lbl-full{display:none;}
  .seg .lbl-short{display:inline;}
  .seg button{padding:5px 13px;}
  .user-box button{padding:5px 9px;}
  .user-box .ico-logout{display:block;}
  .user-box #logout-btn .lbl-full{display:none;}
  #reader{padding:18px 14px 120px;}
  .chapter-title{font-size:13px;}
  .drawer{top:auto;bottom:0;left:0;right:0;width:100%;height:min(62vh,520px);border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(30,35,70,.16);animation:slideup .18s ease-out;}
  @keyframes slideup{from{transform:translateY(30px);opacity:.5;}to{transform:translateY(0);opacity:1;}}
  .drawer-pane{padding-bottom:28px;}
}