:root { --navy:#13294B; --accent:#B8873B; --rule:#D9DCE1; --zebra:#F4F6F9;
        --ink:#222830; --muted:#59606B; --bg:#F7F8FA; --card:#FFFFFF; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  font-size:15.5px; line-height:1.75; }
a { color:var(--navy); text-decoration:none; border-bottom:1px solid rgba(19,41,75,.25); }
a:hover { color:var(--accent); border-bottom-color:var(--accent); }

/* ---- layout ---- */
.layout { display:flex; min-height:100vh; }
.sidebar { width:264px; flex:none; background:var(--navy); color:#E8EDF5;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 0 40px; }
.main { flex:1; min-width:0; display:flex; justify-content:center; gap:28px; padding:0 28px; }
.content { max-width:840px; min-width:0; flex:1; padding:30px 0 90px; }
.pagetoc { width:216px; flex:none; position:sticky; top:0; height:100vh;
  overflow-y:auto; padding:38px 0; font-size:12.5px; }
@media (max-width:1200px){ .pagetoc{ display:none; } }
@media (max-width:900px){ .sidebar{ display:none; } }

/* ---- sidebar ---- */
.brand { padding:0 20px 14px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:12px; }
.brand .t { font-size:16px; font-weight:700; color:#fff; letter-spacing:.5px; }
.brand .v { display:inline-block; margin-top:6px; font-size:11px; color:var(--navy);
  background:var(--accent); padding:1px 8px; border-radius:9px; font-weight:700; }
.nav-group { margin:14px 0 4px; padding:0 20px; font-size:11px; letter-spacing:1.5px;
  color:#9FB0CB; text-transform:uppercase; }
.sidebar a { display:block; padding:5px 20px 5px 26px; color:#D7E0EF; border:none; font-size:13.5px; }
.sidebar a:hover { background:rgba(255,255,255,.08); color:#fff; }
.sidebar a.current { background:rgba(184,135,59,.22); color:#fff;
  border-left:3px solid var(--accent); padding-left:23px; font-weight:600; }
/* 各群第一項「功能群總覽」：略強調 */
.sidebar a.nav-ov { font-weight:600; color:#EDF2FA; }
.sidebar a.nav-ov.current { padding-left:23px; }
/* 父選單項之下的子頁清單：縮排 + 樹狀導引線；巢狀不限層（第二層起縮排步距減半，避免深鏈擠爆側欄） */
.nav-children { margin:2px 0 8px 28px; border-left:1px solid rgba(255,255,255,.16); }
.nav-children .nav-children { margin:2px 0 4px 14px; }
.nav-children a.nav-child { padding:4px 16px 4px 16px; font-size:13px; color:#C4D0E4; }
/* 收合機制：群標題與父項 chevron 可摺（狀態記 localStorage；當前頁鏈自動展開） */
.nav-group { cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; }
.chev { display:inline-block; font-size:10px; color:#9FB0CB; transition:transform .15s ease; }
.nav-group.closed .chev, .nav-row.closed .chev { transform:rotate(-90deg); }
.nav-sec.closed, .nav-children.closed { display:none; }
.nav-row { display:flex; align-items:center; }
.nav-row > a { flex:1; min-width:0; }
.nav-row > .chev { padding:4px 12px 4px 6px; cursor:pointer; }
.nav-row > .chev:hover { color:#fff; }
.nav-children a.nav-child::before { content:""; }
.nav-children a.nav-child.current { padding-left:13px; }
.sidebar a.home { font-weight:600; color:#fff; }
.sidebar a.todo { color:#7E8FAC; font-size:12.5px; }
.sidebar a.todo::after { content:" ⬜"; font-size:10px; }
.sidebar .nav-error { padding:10px 20px; color:#F3B9B0; font-size:12px; line-height:1.6; }

/* ---- breadcrumb & page header ---- */
.crumb { font-size:12.5px; color:var(--muted); margin:0 0 6px; }
.crumb a { color:var(--muted); border:none; }
.content h1 { font-size:27px; color:var(--navy); margin:8px 0 4px; line-height:1.35; }
.h1-rule { width:56px; height:3px; background:var(--accent); border-radius:2px; margin:10px 0 26px; }

/* ---- content typography ---- */
.content h2 { font-size:19.5px; color:var(--navy); margin:40px 0 12px; padding-bottom:7px;
  border-bottom:1px solid var(--rule); }
.content h3 { font-size:16px; color:var(--navy); margin:26px 0 8px; }
.content h4 { font-size:14.5px; color:var(--navy); margin:20px 0 6px; }
.content p { margin:10px 0; }
.content li { margin:4px 0; }
.content strong { color:var(--navy); }

/* callout（blockquote）*/
.content blockquote { margin:16px 0; padding:12px 18px; background:#EEF2F8;
  border-left:4px solid var(--accent); border-radius:0 8px 8px 0; color:#33404F; }
.content blockquote p { margin:4px 0; }

/* tables */
.tablewrap { overflow-x:auto; margin:16px 0; border-radius:10px;
  box-shadow:0 1px 3px rgba(19,41,75,.10); background:var(--card); }
.content table { border-collapse:collapse; width:100%; font-size:13.5px; }
.content th { background:var(--navy); color:#fff; text-align:left; font-weight:600;
  padding:9px 13px; white-space:nowrap; }
.content td { padding:8px 13px; border-top:1px solid var(--rule); vertical-align:top; }
.content tbody tr:nth-child(even) td { background:var(--zebra); }

/* code */
.content pre { background:#0F1B31; color:#DCE6F5; padding:16px 18px; border-radius:10px;
  overflow-x:auto; font-size:13px; line-height:1.6; }
.content pre code { background:none; color:inherit; padding:0; }
.content code { font-family:"SF Mono",Consolas,Menlo,monospace; font-size:.9em;
  background:#EDF0F5; color:#1E3A5F; padding:1px 6px; border-radius:5px; }

/* page toc */
.pagetoc .cap { font-size:11px; letter-spacing:1.5px; color:var(--muted); margin-bottom:8px; }
.pagetoc a { display:block; color:var(--muted); border:none; padding:3px 0 3px 12px;
  border-left:2px solid var(--rule); line-height:1.45; }
.pagetoc a:hover { color:var(--accent); border-left-color:var(--accent); }
.pagetoc a.lv3 { padding-left:26px; font-size:12px; }

.footer { margin-top:70px; padding-top:14px; border-top:1px solid var(--rule);
  font-size:12px; color:var(--muted); }

/* diagrams & screenshots */
figure.diagram { margin:20px 0; padding:20px 16px 12px; background:var(--card);
  border:1px solid var(--rule); border-radius:10px; text-align:center; overflow-x:auto;
  box-shadow:0 1px 3px rgba(19,41,75,.08); cursor:zoom-in; }
figure.diagram figcaption { margin-top:10px; font-size:12.5px; color:var(--muted); font-style:normal; }
figure.diagram figcaption::after { content:"　🔍 點擊放大"; color:var(--accent); font-size:11px; }
.content img { max-width:100%; border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 2px 8px rgba(19,41,75,.12); margin:14px 0; cursor:zoom-in; }

/* lightbox（點圖放大 + 滾輪縮放 + 拖曳平移） */
.lightbox { position:fixed; inset:0; z-index:999; background:rgba(9,16,29,.93);
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:2.5vh 2.5vw; }
.lightbox .zoomwrap { cursor:grab; will-change:transform; }
.lightbox .zoomwrap:active { cursor:grabbing; }
.lightbox svg, .lightbox img { width:95vw; height:88vh; max-width:none; max-height:none;
  background:#fff; border-radius:12px; padding:18px; object-fit:contain; display:block; }
.lightbox .hint { position:fixed; bottom:14px; left:0; right:0; text-align:center;
  color:#9FB0CB; font-size:12px; pointer-events:none; }