/* ===== 主题变量 ===== */
body.theme-day   { --bg:#F7F6F2; --card:#FFFFFF; --fg:#2C2C2A; --muted:#888780; --border:#E2E0D8; --accent:#3B6D11; --accent-soft:#EAF3DE; --mark-op:1; --chrome:#FFFFFF; }
body.theme-sepia { --bg:#F4EDDC; --card:#FBF6E9; --fg:#3E3524; --muted:#9A8B6A; --border:#E5D9BE; --accent:#854F0B; --accent-soft:#FAEEDA; --mark-op:.75; --chrome:#FBF6E9; }
body.theme-night { --bg:#16181C; --card:#1F2228; --fg:#D8D6CE; --muted:#8B8E96; --border:#2E323A; --accent:#97C459; --accent-soft:#242B1C; --mark-op:.45; --chrome:#1F2228; }

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--fg);
  transition:background .2s,color .2s;
}
.hidden { display:none !important; }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== 视图 ===== */
.view { min-height:100dvh; }
.page { max-width:720px; margin:0 auto; padding:16px 16px 60px; }

/* ===== 登录 ===== */
#view-login { display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:360px; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:32px 24px; text-align:center; }
.logo-dot { width:44px; height:44px; border-radius:14px; background:var(--accent); margin:0 auto 14px; position:relative; }
.logo-dot::after { content:""; position:absolute; inset:12px; border-radius:4px; background:rgba(255,255,255,.85); }
.login-card h1 { font-size:20px; font-weight:500; }
.login-card .sub { color:var(--muted); font-size:13px; margin:6px 0 22px; }
.login-card input {
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); color:var(--fg); font-size:15px; outline:none; margin-bottom:14px;
}
.login-card input:focus { border-color:var(--accent); }
.role-row { display:flex; gap:10px; margin-bottom:18px; }
.role-btn {
  flex:1; padding:10px 0; border-radius:10px; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:14px; cursor:pointer;
}
.role-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.primary {
  width:100%; padding:13px 0; border:none; border-radius:10px;
  background:var(--accent); color:#fff; font-size:15px; cursor:pointer;
}
.primary.small { width:auto; padding:9px 22px; }
.login-card .hint { margin-top:18px; font-size:12px; color:var(--muted); line-height:1.6; text-align:left; }

/* ===== 顶栏 ===== */
.topbar {
  position:sticky; top:0; z-index:20; height:52px;
  display:flex; align-items:center; gap:10px; padding:0 14px;
  background:var(--chrome); border-bottom:1px solid var(--border);
}
.bar-title { flex:1; font-size:15px; font-weight:500; }
.reader-bar .bar-title { flex:1; text-align:center; }
.bar-actions { display:flex; gap:2px; }
.ghost-btn {
  border:none; background:transparent; color:var(--fg); font-size:14px;
  padding:8px 10px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.ghost-btn:active { background:var(--accent-soft); }
.ghost-btn.small { font-size:13px; color:var(--muted); }
.user-chip { font-size:13px; color:var(--muted); flex:1; text-align:right; }
#lib-user { margin-left:auto; }

/* ===== 书架 ===== */
.sec-title { font-size:17px; font-weight:500; margin:20px 0 12px; }
.upload-area {
  display:flex; align-items:center; gap:14px; width:100%; padding:18px 16px;
  border:1.5px dashed var(--accent); border-radius:14px; background:var(--accent-soft);
  color:var(--fg); font-size:14px; line-height:1.6; cursor:pointer;
}
.upload-area .plus { font-size:26px; color:var(--accent); }
.upload-area small { color:var(--muted); }
.upload-area:active { opacity:.8; }
.convert-status { margin-top:10px; font-size:13px; color:var(--accent); }
.tool-row { display:flex; gap:10px; margin-top:10px; }

.doc-list { display:flex; flex-direction:column; gap:10px; }
.doc-card {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer;
}
.doc-card:active { border-color:var(--accent); }
.doc-icon {
  width:40px; height:40px; border-radius:10px; background:var(--accent-soft);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:500; flex-shrink:0;
}
.doc-info { flex:1; min-width:0; }
.doc-name { font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-meta { font-size:12px; color:var(--muted); margin-top:4px; }
.doc-del { border:none; background:transparent; color:var(--muted); font-size:16px; padding:8px; cursor:pointer; flex-shrink:0; }
.empty { text-align:center; color:var(--muted); font-size:14px; padding:40px 0; }

/* ===== 阅读器 ===== */
.article {
  max-width:680px; margin:0 auto; padding:24px 20px 20px;
  font-size:var(--fs,18px); line-height:var(--lh,1.8); font-family:var(--ff,sans);
  word-break:break-word;
}
body[data-font="sans"]  .article { --ff:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
body[data-font="serif"] .article { --ff:Georgia,"Songti SC","SimSun",serif; }
body[data-font="kai"]   .article { --ff:"Kaiti SC","KaiTi","STKaiti",serif; }
.article h1 { font-size:1.5em; margin:1.2em 0 .8em; font-weight:500; }
.article h2 { font-size:1.3em; margin:1.2em 0 .7em; font-weight:500; }
.article h3 { font-size:1.15em; margin:1em 0 .6em; font-weight:500; }
.article p { margin:.8em 0; text-align:justify; }
.article ul,.article ol { padding-left:1.6em; margin:.8em 0; }
.article li { margin:.3em 0; }
.article blockquote {
  border-left:3px solid var(--accent); padding:.4em 1em; margin:1em 0;
  color:var(--muted); background:var(--accent-soft); border-radius:0 8px 8px 0;
}
.article img { max-width:100%; height:auto; border-radius:8px; }
.article table { border-collapse:collapse; width:100%; margin:1em 0; font-size:.9em; display:block; overflow-x:auto; }
.article td,.article th { border:1px solid var(--border); padding:6px 10px; }
.article a { color:var(--accent); }
.the-end { text-align:center; color:var(--muted); font-size:13px; padding:12px 0; }
.reader-bottom-space { height:80px; }

/* 高亮标记 */
mark.hl { padding:1px 0; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
mark.hl[data-c="y"] { background:rgba(255,213,79,var(--mark-op)); color:inherit; }
mark.hl[data-c="g"] { background:rgba(129,199,132,var(--mark-op)); color:inherit; }
mark.hl[data-c="b"] { background:rgba(100,181,246,var(--mark-op)); color:inherit; }
mark.hl[data-c="r"] { background:rgba(239,154,154,var(--mark-op)); color:inherit; }

/* ===== 抽屉 / 面板 ===== */
.mask { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(320px,84vw); z-index:41;
  background:var(--card); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
}
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; font-size:15px; font-weight:500; border-bottom:1px solid var(--border);
}
.toc-list,.notes-list { flex:1; overflow-y:auto; padding:10px 8px 30px; }
.toc-item {
  display:block; width:100%; text-align:left; border:none; background:transparent;
  color:var(--fg); font-size:14px; padding:10px 10px; border-radius:8px; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.toc-item:active { background:var(--accent-soft); }
.toc-item.lv2 { padding-left:24px; font-size:13px; color:var(--muted); }
.toc-item.lv3 { padding-left:38px; font-size:13px; color:var(--muted); }
.toc-empty { color:var(--muted); font-size:13px; text-align:center; padding:30px 0; }
.note-item {
  text-align:left; width:100%; border:none; background:transparent; cursor:pointer;
  padding:10px; border-radius:10px; border-bottom:1px solid var(--border);
}
.note-item:active { background:var(--accent-soft); }
.note-item .q { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-item .n { font-size:14px; margin-top:4px; line-height:1.5; }
.note-item .bar { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.note-item .bar.y{background:#FFD54F}.note-item .bar.g{background:#81C784}
.note-item .bar.b{background:#64B5F6}.note-item .bar.r{background:#EF9A9A}

/* ===== 设置面板 ===== */
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  background:var(--card); border-radius:20px 20px 0 0; border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.setting-row {
  display:flex; align-items:center; gap:12px; padding:12px 20px;
  border-bottom:1px solid var(--border); font-size:14px;
}
.setting-row .lbl { width:44px; color:var(--muted); }
.setting-row .val { width:40px; text-align:center; font-size:13px; color:var(--muted); }
.step-btn {
  border:1px solid var(--border); background:var(--bg); color:var(--fg);
  border-radius:8px; padding:6px 12px; font-size:13px; cursor:pointer;
}
.setting-row input[type=range] { flex:1; accent-color:var(--accent); }
.setting-row select {
  flex:1; padding:8px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--fg); font-size:14px;
}
.theme-row { display:flex; gap:10px; }
.theme-dot {
  width:36px; height:36px; border-radius:50%; border:2px solid var(--border);
  background:var(--bg); color:var(--fg); font-size:12px; cursor:pointer;
}
.theme-dot.active { border-color:var(--accent); }
.theme-dot.c-y{background:#FFD54F;border-color:#FFD54F}.theme-dot.c-g{background:#81C784;border-color:#81C784}
.theme-dot.c-b{background:#64B5F6;border-color:#64B5F6}.theme-dot.c-r{background:#EF9A9A;border-color:#EF9A9A}

/* ===== 笔记弹层 ===== */
.modal {
  position:fixed; left:50%; bottom:0; transform:translateX(-50%);
  width:min(480px,100vw); z-index:41; background:var(--card);
  border-radius:20px 20px 0 0; border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.note-quote {
  margin:12px 16px 0; padding:10px 12px; background:var(--accent-soft);
  border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
  font-size:13px; color:var(--muted); line-height:1.6; max-height:70px; overflow:hidden;
}
#note-textarea {
  display:block; width:calc(100% - 32px); height:110px; margin:12px 16px;
  padding:12px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); color:var(--fg); font-size:15px; resize:none; outline:none;
  font-family:inherit;
}
#note-textarea:focus { border-color:var(--accent); }
.note-actions { display:flex; align-items:center; gap:10px; padding:0 16px 18px; }
.note-actions .theme-row { flex:1; }
.danger-btn {
  border:none; background:transparent; color:#C62828; font-size:14px; cursor:pointer; padding:8px;
}

/* ===== 划词菜单 ===== */
.sel-menu {
  position:fixed; z-index:50; display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:8px 10px; box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.sel-c { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.sel-c.c-y{background:#FFD54F}.sel-c.c-g{background:#81C784}
.sel-c.c-b{background:#64B5F6}.sel-c.c-r{background:#EF9A9A}
.sel-note {
  border:none; background:transparent; color:var(--fg); font-size:13px;
  cursor:pointer; padding:4px 6px;
}

/* ===== Toast ===== */
.toast {
  position:fixed; left:50%; bottom:64px; transform:translateX(-50%); z-index:60;
  background:rgba(30,30,30,.88); color:#fff; font-size:13px;
  padding:10px 18px; border-radius:20px; max-width:80vw; text-align:center;
}

@media (min-width:760px) {
  .article { padding:36px 0; }
}