/* ============================================================
   知识卡图书馆 · 手机版
   单列卡片流 + 抽屉目录 + 底部弹层。色板沿用桌面版。
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --bg:#f6f7f9;
  --card-bg:#ffffff;
  --sunk:#f1f3f6;

  --text:#1a2333;
  --text-2:#5b6472;
  --text-3:#98a1af;

  --border:#e4e7ee;
  --border-soft:#eef1f6;

  --accent:#4f6ef7;
  --accent-soft:#eef1fe;
  --accent-ink:#3b5bdb;
  --red:#e5484d;
  --red-soft:#fdeeee;
  --gold:#b8860b;
  --gold-soft:#fdf6e3;
  --green:#30a46c;

  --radius:14px;
  --shadow:0 1px 3px rgba(20,30,60,.06),0 4px 14px rgba(20,30,60,.05);

  /* 卡片类型色（与桌面版一致） */
  --t-concept:#2196F3;  --tb-concept:#E3F2FD;
  --t-goal:#FF9800;     --tb-goal:#FFF3E0;
  --t-diagram:#00BCD4;  --tb-diagram:#E0F7FA;
  --t-memo:#607D8B;     --tb-memo:#ECEFF1;
  --t-principle:#9C27B0;--tb-principle:#F3E5F5;
  --t-tip:#4CAF50;      --tb-tip:#E8F5E9;
  --t-warning:#F44336;  --tb-warning:#FFEBEE;
  --t-milestone:#FF5722;--tb-milestone:#FBE9E7;
  --t-plan:#8BC34A;     --tb-plan:#f1f8e9;
  --t-case:#795548;     --tb-case:#efebe9;
  --t-checklist:#009688;--tb-checklist:#e0f2f1;
  --t-compare:#3F51B5;  --tb-compare:#e8eaf6;
  --t-data:#607D8B;     --tb-data:#eceff1;
  --t-flow:#00ACC1;     --tb-flow:#e0f7fa;
  --t-keypoint:#FFC107; --tb-keypoint:#fff8e1;
  --t-story:#E91E63;    --tb-story:#fce4ec;
  --t-timeline:#673AB7; --tb-timeline:#ede7f6;
  --t-term:#455A64;     --tb-term:#eceff1;
  --t-exercise:#4CAF50; --tb-exercise:#e8f5e9;
  --t-quote:#9E9E9E;    --tb-quote:#f5f5f5;
  --t-default:#6b6de0;  --tb-default:#f2f2fc;

  --顶高:52px;
  --安全下:env(safe-area-inset-bottom,0px);
  --安全上:env(safe-area-inset-top,0px);
}

[data-theme="dark"]{
  --bg:#11151d;
  --card-bg:#1a202b;
  --sunk:#1e2633;

  --text:#e7ebf2;
  --text-2:#9aa5b5;
  --text-3:#5d6a7d;

  --border:#262f3d;
  --border-soft:#202937;

  --accent:#6d8bff;
  --accent-soft:#1b2440;
  --accent-ink:#a5b8ff;
  --red:#f2555a;
  --red-soft:#351c22;
  --gold:#e3b341;
  --gold-soft:#2b2410;
  --green:#3ecf8e;

  --shadow:0 1px 3px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);

  --t-concept:#6aa8f0;  --tb-concept:#162540;
  --t-goal:#f0a840;     --tb-goal:#2a2010;
  --t-diagram:#48c9c0;  --tb-diagram:#0f2a28;
  --t-memo:#8899aa;     --tb-memo:#1a1f26;
  --t-principle:#a78bfa;--tb-principle:#221a3a;
  --t-tip:#5cc46a;      --tb-tip:#12271a;
  --t-warning:#f07070;  --tb-warning:#2e1618;
  --t-milestone:#f4794e;--tb-milestone:#2d1a13;
  --t-plan:#9ccc65;     --tb-plan:#1b2412;
  --t-case:#a1887f;     --tb-case:#231c19;
  --t-checklist:#4db6ac;--tb-checklist:#0f2624;
  --t-compare:#7986cb;  --tb-compare:#1a1c33;
  --t-data:#8899aa;     --tb-data:#1a1f26;
  --t-flow:#4dd0e1;     --tb-flow:#0d272b;
  --t-keypoint:#ffd54f; --tb-keypoint:#2a2410;
  --t-story:#f06292;    --tb-story:#2c1420;
  --t-timeline:#9575cd; --tb-timeline:#211a33;
  --t-term:#90a4ae;     --tb-term:#1a1f24;
  --t-exercise:#66bb6a; --tb-exercise:#132413;
  --t-quote:#bdbdbd;    --tb-quote:#22252a;
  --t-default:#8b8df0;  --tb-default:#1c1c2e;
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  overflow-wrap:break-word;
}
body.锁滚{overflow:hidden}

.隐藏{display:none !important}

button{
  font-family:inherit;font-size:inherit;color:inherit;
  background:none;border:none;cursor:pointer;
}

/* 触控目标统一 44px */
.圆键{
  width:44px;height:44px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;font-size:18px;color:var(--text-2);
  transition:background .15s;
}
.圆键:active{background:var(--sunk)}

/* ══════════════ 页 ══════════════ */
.页{min-height:100vh;display:flex;flex-direction:column}
.页.隐藏{display:none !important}

/* ══════════════ 书架 ══════════════ */
.书架-顶{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:8px;
  padding:calc(6px + var(--安全上)) 12px 6px;
  background:var(--bg);
  border-bottom:1px solid transparent;
}
.书架-名{
  flex:1;min-width:0;font-size:19px;font-weight:650;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.书架-搜{
  position:sticky;top:calc(var(--顶高) + var(--安全上));z-index:19;
  display:flex;align-items:center;gap:8px;
  margin:0 12px 10px;padding:0 12px;
  height:42px;border-radius:12px;
  background:var(--card-bg);border:1px solid var(--border);
}
.搜图标{font-size:14px;opacity:.55;flex:0 0 auto}
.书架-搜 input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-size:15px;color:var(--text);font-family:inherit;
}
.书架-搜 input::placeholder{color:var(--text-3)}
.清键{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  background:var(--sunk);color:var(--text-3);
  display:flex;align-items:center;justify-content:center;font-size:12px;
}

.书架列表{padding:2px 12px calc(28px + var(--安全下));display:flex;flex-direction:column;gap:12px}

.书卡{
  display:block;width:100%;text-align:left;
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
  transition:transform .12s;
}
.书卡:active{transform:scale(.985)}
.书卡-头{display:flex;align-items:flex-start;gap:12px}
.书卡-图{
  flex:0 0 46px;width:46px;height:46px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:600;overflow:hidden;
}
.书卡-图 img{width:100%;height:100%;object-fit:cover}
.书卡-文{flex:1;min-width:0}
.书卡-名{font-size:16.5px;font-weight:640;line-height:1.35}
.书卡-副{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.5}
.书卡-数{font-size:12.5px;color:var(--text-3);margin-top:8px;display:flex;gap:10px;align-items:center}

.进度{
  margin-top:10px;height:5px;border-radius:3px;background:var(--sunk);overflow:hidden;
}
.进度-条{height:100%;border-radius:3px;background:var(--accent);transition:width .3s}
.进度-字{font-size:12px;color:var(--accent-ink);margin-top:6px;font-variant-numeric:tabular-nums}

/* ══════════════ 阅读页 ══════════════ */
.读-顶{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:2px;
  padding:calc(4px + var(--安全上)) 6px 4px;
  min-height:calc(var(--顶高) + var(--安全上));
  background:var(--bg);
  border-bottom:1px solid var(--border-soft);
}
.读-书名{
  flex:1;min-width:0;font-size:15px;font-weight:600;
  padding:0 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 隐藏浏览器自带的搜索清除按钮（有自己的 ✕） */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

.读-搜条{
  position:sticky;top:calc(var(--顶高) + var(--安全上));z-index:19;
  display:flex;align-items:center;gap:8px;
  margin:8px 12px 0;padding:0 12px;height:42px;border-radius:12px;
  background:var(--card-bg);border:1px solid var(--border);
}
.读-搜条 input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-size:15px;color:var(--text);font-family:inherit;
}
.读-搜条 input::placeholder{color:var(--text-3)}

.读-搜态{
  position:sticky;top:calc(var(--顶高) + var(--安全上));z-index:18;
  margin:8px 12px 0;padding:8px 12px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
/* 搜索框展开时，状态条让到它下面，别叠在一起 */
.读-搜条:not(.隐藏) ~ .读-搜态{top:calc(var(--顶高) + var(--安全上) + 50px)}
.读-搜态 button{font-size:13px;color:var(--accent-ink);text-decoration:underline}

.正文{padding:4px 0 calc(40px + var(--安全下));flex:1}

/* 分区标题 */
.分区{
  margin:22px 12px 2px;padding:0 2px;
  display:flex;align-items:baseline;gap:8px;
}
.分区-kick{
  font-size:11px;font-weight:700;letter-spacing:1px;color:var(--accent);
  background:var(--accent-soft);padding:2px 7px;border-radius:6px;
}
.分区-名{font-size:15px;font-weight:660;color:var(--text)}

/* 章标题 */
.章{margin:10px 12px 0}
.章-名{
  font-size:13.5px;font-weight:600;color:var(--text-2);
  padding:10px 2px 8px;
  border-bottom:1px solid var(--border-soft);
}

/* 卡片类型 → 图标/徽章取色（data-type 一层映射） */
[data-type="concept"]{--t:var(--t-concept);--tb:var(--tb-concept)}
[data-type="goal"]{--t:var(--t-goal);--tb:var(--tb-goal)}
[data-type="diagram"]{--t:var(--t-diagram);--tb:var(--tb-diagram)}
[data-type="memo"]{--t:var(--t-memo);--tb:var(--tb-memo)}
[data-type="principle"]{--t:var(--t-principle);--tb:var(--tb-principle)}
[data-type="tip"]{--t:var(--t-tip);--tb:var(--tb-tip)}
[data-type="warning"]{--t:var(--t-warning);--tb:var(--tb-warning)}
[data-type="milestone"]{--t:var(--t-milestone);--tb:var(--tb-milestone)}
[data-type="plan"]{--t:var(--t-plan);--tb:var(--tb-plan)}
[data-type="case"]{--t:var(--t-case);--tb:var(--tb-case)}
[data-type="checklist"]{--t:var(--t-checklist);--tb:var(--tb-checklist)}
[data-type="compare"]{--t:var(--t-compare);--tb:var(--tb-compare)}
[data-type="data"]{--t:var(--t-data);--tb:var(--tb-data)}
[data-type="flow"]{--t:var(--t-flow);--tb:var(--tb-flow)}
[data-type="keypoint"]{--t:var(--t-keypoint);--tb:var(--tb-keypoint)}
[data-type="story"]{--t:var(--t-story);--tb:var(--tb-story)}
[data-type="timeline"]{--t:var(--t-timeline);--tb:var(--tb-timeline)}
[data-type="term"]{--t:var(--t-term);--tb:var(--tb-term)}
[data-type="exercise"]{--t:var(--t-exercise);--tb:var(--tb-exercise)}
[data-type="quote"]{--t:var(--t-quote);--tb:var(--tb-quote)}
[data-type="default"]{--t:var(--t-default);--tb:var(--tb-default)}

/* ══════════════ 卡片 ══════════════ */
.卡列表{display:flex;flex-direction:column;gap:10px;padding:10px 12px 2px}

.卡{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:border-color .15s,opacity .15s;
}
.卡.展开{border-color:color-mix(in srgb,var(--t,var(--t-default)) 40%,var(--border))}
.卡.忽略{opacity:.55}
.卡.藏,.章.藏,.分区.藏{display:none}

.卡-头{display:flex;gap:10px;padding:13px 14px 12px;cursor:pointer}
.卡-图标{
  flex:0 0 26px;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  background:var(--tb,var(--tb-default));color:var(--t,var(--t-default));
}
.卡-文{flex:1;min-width:0}
.卡-题行{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.卡-题{font-size:15.5px;font-weight:620;line-height:1.45;flex:1;min-width:0}
.卡-徽{
  flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.5px;
  padding:1.5px 6px;border-radius:5px;margin-top:3px;
  background:var(--tb,var(--tb-default));color:var(--t,var(--t-default));
}
.卡-摘要{
  font-size:13.5px;color:var(--text-2);line-height:1.62;margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.卡.展开 .卡-摘要{display:none}
.卡-标{display:flex;gap:8px;margin-top:7px;font-size:11.5px;color:var(--text-3)}

.卡-体{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .26s ease;
}
.卡.展开 .卡-体{grid-template-rows:1fr}
.卡-体内{overflow:hidden}
.卡-正文{
  padding:2px 14px 12px;
  font-size:14.5px;line-height:1.75;color:var(--text);
  border-top:1px solid var(--border-soft);
  margin-top:0;padding-top:12px;
}

/* 卡内 markdown */
.卡-正文 h3,.卡-正文 h4{margin:14px 0 6px;font-size:14.5px;font-weight:660;line-height:1.5}
.卡-正文 h3:first-child,.卡-正文 h4:first-child{margin-top:0}
.卡-正文 p{margin:8px 0}
.卡-正文 ul,.卡-正文 ol{margin:8px 0 8px 20px}
.卡-正文 li{margin:4px 0}
.卡-正文 strong{font-weight:660;color:var(--text)}
.卡-正文 img{
  max-width:100%;height:auto;border-radius:8px;margin:10px 0;display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.卡-正文 blockquote{
  margin:10px 0;padding:8px 12px;border-radius:8px;
  border-left:3px solid var(--border);
  background:var(--sunk);color:var(--text-2);font-size:13.8px;
}
.卡-正文 blockquote.q-original{border-left-color:var(--accent);background:var(--accent-soft)}
.卡-正文 blockquote.q-warn{border-left-color:var(--gold);background:var(--gold-soft)}
.卡-正文 blockquote.q-note{border-left-color:var(--text-3)}
.卡-正文 blockquote p{margin:4px 0}
.卡-正文 .ai-note{
  font-size:12.8px;color:var(--text-3);line-height:1.6;
  margin:10px 0;padding:8px 10px;border-radius:8px;
  background:var(--sunk);border:1px dashed var(--border);
}
.卡-正文 table{
  display:block;overflow-x:auto;border-collapse:collapse;
  font-size:13px;margin:10px 0;max-width:100%;
}
.卡-正文 th,.卡-正文 td{border:1px solid var(--border);padding:5px 8px;text-align:left}
.卡-正文 th{background:var(--sunk);font-weight:600}
.卡-正文 code{
  background:var(--sunk);padding:1px 5px;border-radius:4px;font-size:12.5px;
}
.卡-正文 pre{
  background:var(--sunk);padding:10px;border-radius:8px;overflow-x:auto;margin:10px 0;
}
.卡-正文 pre code{background:none;padding:0}

/* 卡内备注显示 */
.卡-备注{
  margin:0 14px 12px;padding:9px 11px;border-radius:9px;
  background:var(--gold-soft);border-left:3px solid var(--gold);
  font-size:13.5px;color:var(--text-2);white-space:pre-wrap;line-height:1.6;
}
.卡-备注-名{font-size:11px;font-weight:700;color:var(--gold);display:block;margin-bottom:2px}

/* 工具条 */
.卡-具{
  display:flex;gap:6px;padding:0 10px 10px;flex-wrap:wrap;
}
.具键{
  flex:1;min-width:0;height:38px;border-radius:9px;
  background:var(--sunk);color:var(--text-2);
  font-size:12.5px;font-weight:550;
  display:flex;align-items:center;justify-content:center;gap:3px;
  transition:background .15s,color .15s;
  white-space:nowrap;overflow:hidden;
}
.具键:active{transform:scale(.97)}
.具键.开{background:var(--accent-soft);color:var(--accent-ink);font-weight:650}
.具键.开-重点{background:var(--gold-soft);color:var(--gold);font-weight:650}
.具键.开-忽略{background:var(--red-soft);color:var(--red);font-weight:650}

/* 读到这里标记 */
.读到这{
  display:flex;align-items:center;gap:8px;
  margin:6px 12px 0;color:var(--accent);
  font-size:12px;font-weight:650;letter-spacing:.5px;
}
.读到这::before,.读到这::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;
}

/* 命中高亮 */
.hit{background:var(--gold-soft);color:var(--gold);border-radius:3px;padding:0 1px;font-weight:600}

/* ══════════════ 遮罩 / 抽屉 / 弹层 ══════════════ */
.遮罩{
  position:fixed;inset:0;z-index:40;
  background:rgba(10,14,22,.42);
  backdrop-filter:blur(1px);
  opacity:0;transition:opacity .2s;
}
.遮罩.显{opacity:1}

.目录抽{
  position:fixed;top:0;left:0;bottom:0;z-index:41;
  width:min(84vw,340px);
  background:var(--card-bg);
  border-right:1px solid var(--border);
  box-shadow:8px 0 28px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
  transform:translateX(-102%);
  transition:transform .26s cubic-bezier(.3,.8,.2,1);
  padding-top:var(--安全上);
}
.目录抽.开{transform:translateX(0)}
.抽-顶{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px 6px 16px;border-bottom:1px solid var(--border-soft);
  flex:0 0 auto;
}
.抽-名{font-size:15px;font-weight:650}
.抽-体{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 calc(24px + var(--安全下))}

.目-篇{
  display:flex;align-items:center;gap:7px;
  padding:14px 16px 6px;
  font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.4px;
}
.目-章{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:11px 16px;font-size:14px;color:var(--text-2);
  border-left:2px solid transparent;
}
.目-章:active{background:var(--sunk)}
.目-章.当前{color:var(--accent-ink);border-left-color:var(--accent);background:var(--accent-soft);font-weight:600}
.目-章-名{flex:1;min-width:0;line-height:1.45}
.目-章-数{flex:0 0 auto;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* 更多板 / 备注板 */
.更多板,.备注板{
  position:fixed;left:0;right:0;bottom:0;z-index:41;
  background:var(--card-bg);
  border-radius:18px 18px 0 0;
  box-shadow:0 -6px 30px rgba(0,0,0,.18);
  transform:translateY(102%);
  transition:transform .28s cubic-bezier(.3,.8,.2,1);
  padding:8px 14px calc(14px + var(--安全下));
  max-height:82vh;display:flex;flex-direction:column;
}
.更多板.开,.备注板.开{transform:translateY(0)}
.板-柄{
  width:38px;height:4px;border-radius:2px;background:var(--border);
  margin:2px auto 10px;flex:0 0 auto;
}
.板-组{margin-bottom:12px}
.板-组:last-child{margin-bottom:0}
.板-标题{
  font-size:11.5px;font-weight:700;color:var(--text-3);letter-spacing:1px;
  padding:4px 4px 6px;
}
.板-项{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:46px;padding:8px 12px;
  background:var(--sunk);border-radius:10px;
  font-size:14.5px;text-align:left;margin-bottom:6px;
}
.板-项:active{filter:brightness(.96)}
.板-项.开{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.板-值{font-size:13px;color:var(--text-3)}
.勾{font-size:15px;color:var(--accent)}

/* 备注板 */
.备注板{height:auto}
.备注-顶{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-bottom:8px}
.备注-名{
  flex:1;min-width:0;font-size:14px;font-weight:620;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.备注-框{
  width:100%;flex:1;min-height:130px;max-height:46vh;
  padding:12px;border-radius:12px;
  border:1px solid var(--border);background:var(--bg);
  color:var(--text);font-size:15px;line-height:1.7;font-family:inherit;
  resize:none;outline:none;
}
.备注-框:focus{border-color:var(--accent)}
.备注-底{display:flex;gap:10px;margin-top:10px;flex:0 0 auto}
.主键{
  flex:1;height:46px;border-radius:12px;background:var(--accent);color:#fff;
  font-size:15px;font-weight:620;
}
.次键{
  flex:0 0 96px;height:46px;border-radius:12px;background:var(--sunk);color:var(--text-2);
  font-size:15px;
}

/* ══════════════ 空态 / 提示 ══════════════ */
.空态{
  padding:60px 24px;text-align:center;color:var(--text-3);font-size:14px;
}
.空态-图{font-size:40px;margin-bottom:10px;opacity:.7}
.空态-小{font-size:12.5px;margin-top:6px;opacity:.8}

.浮提{
  position:fixed;left:50%;bottom:calc(30px + var(--安全下));z-index:60;
  transform:translate(-50%,14px);
  background:rgba(20,26,38,.92);color:#fff;
  padding:9px 16px;border-radius:20px;font-size:13px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:82vw;text-align:center;
}
.浮提.显{opacity:1;transform:translate(-50%,0)}

/* ══════════════ 宽屏（平板/桌面）限宽居中 ══════════════ */
@media(min-width:720px){
  .书架列表,.正文,.分区,.章,.读到这{max-width:760px;margin-left:auto;margin-right:auto}
  .卡列表{padding-left:0;padding-right:0}
  .读-搜条,.读-搜态,.书架-搜{max-width:760px;margin-left:auto;margin-right:auto}
  .书架-顶,.读-顶{padding-left:calc(50% - 380px);padding-right:calc(50% - 380px)}
}