:root {
  --bg:#111417; --fg:#e8eaed; --muted:#8a9199; --line:#23282d; --accent:#4c9ffe;
  --indent:22px;
  font-size:17px;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body {
  background:var(--bg); color:var(--fg);
  font-family:-apple-system, "Segoe UI", "Noto Sans TC", system-ui, sans-serif;
  -webkit-text-size-adjust:100%;
}

#topbar {
  position:sticky; top:0; z-index:5; background:var(--bg);
  /* 瀏海/動態島安全區留在「上緣」;左右也各留一點以防橫向瀏海 */
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  padding-right:calc(14px + env(safe-area-inset-right, 0px));
  padding-bottom:10px;
  padding-left:calc(14px + env(safe-area-inset-left, 0px));
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
}
#breadcrumb { flex:1 1 auto; }
#saveind { flex:0 0 auto; font-size:12px; color:var(--muted); }
#saveind.ok { color:#5bbf7a; }
#saveind.fail { color:#e0625e; }
#breadcrumb { color:var(--muted); font-size:14px; min-height:18px; }
.crumb { color:var(--muted); }
.crumb[role="button"] { color:var(--accent); cursor:pointer; }
.crumb.current { color:var(--fg); }
.crumb-sep { color:var(--muted); }
.bullet[role="button"] { cursor:pointer; }
.node.placeholder .text:empty::before {
  content:attr(data-placeholder); color:var(--muted); opacity:.6;
}

#outline { padding:8px 12px 40vh; }   /* 底部大量留白:手機捲動時最後幾行也好按 */

ul.children { list-style:none; margin:0; padding-left:var(--indent); }
ul.root { padding-left:2px; }
.node.collapsed > ul.children { display:none; }

.row { display:flex; align-items:flex-start; gap:4px; padding:1px 0; }

.fold {
  flex:0 0 auto; width:18px; min-height:30px; line-height:30px;
  text-align:center; color:var(--muted); cursor:pointer;
  user-select:none; -webkit-user-select:none;
  transition:transform .12s ease;
}
.fold.closed { transform:rotate(-90deg); }

.bullet {
  flex:0 0 auto; width:16px; min-height:30px; line-height:30px;
  text-align:center; color:var(--muted);
  user-select:none; -webkit-user-select:none;
}

.text {
  flex:1 1 auto; min-height:30px; line-height:30px;
  outline:none; white-space:pre-wrap; word-break:break-word;
  padding:0 2px; caret-color:var(--accent);
}
.text:empty::after { content:""; }   /* 空節點仍佔一行高、可點(bullet 已恆顯示) */

/* 手機鍵盤上方工具列 */
#kbtoolbar {
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:none; gap:8px; padding:6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  background:#1a1f24; border-top:1px solid var(--line);
}
#kbtoolbar.show { display:flex; }
#kbtoolbar button {
  flex:0 0 auto; min-width:48px; height:40px; font-size:20px;
  background:#2a3138; color:var(--fg); border:1px solid var(--line);
  border-radius:8px; -webkit-tap-highlight-color:transparent;
}
#kbtoolbar button:active { background:var(--accent); color:#fff; }
/* 桌面用不到(有實體 Tab),但顯示無妨;若只想手機顯示可加 @media (pointer:coarse) */