:root {
  --ink:#20242b; --muted:#667085; --paper:#fbfaf6; --surface:#ffffff;
  --line:#ded7ca; --primary:#245d63; --deep:#153f45;
  --accent:#b85c38; --gold:#c3974d; --sage:#72886f;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; color:var(--ink); background:var(--paper); }
button { font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:9px 12px; }
.app-shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:100vh; }
.left-rail { border-color:var(--line); background:#f5f1e9; padding:16px; overflow:auto; min-width:0; }
.left-rail { border-right:1px solid var(--line); }
.rail-head,.topbar { display:flex; align-items:center; gap:10px; }
.rail-head { justify-content:space-between; margin-bottom:14px; }
.stage { min-width:0; display:flex; flex-direction:column; }
.topbar { min-height:70px; border-bottom:1px solid var(--line); padding:10px 18px; background:rgba(251,250,246,.96); position:sticky; top:0; z-index:5; }
.title-block { flex:1; min-width:0; }
#sectionLabel { color:var(--accent); font-size:13px; font-weight:800; }
#pageTitle { margin:2px 0 0; font-size:24px; line-height:1.2; }
.slide { display:block; min-height:calc(100vh - 70px); }
.media-panel { padding:18px; display:flex; flex-direction:column; gap:12px; }
.media-panel img { width:100%; max-height:calc(100vh - 154px); aspect-ratio:16/9; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#111; }
.media-panel img[hidden], .content-slide[hidden] { display:none; }
.content-slide { width:100%; max-width:1180px; margin:0 auto; display:grid; gap:16px; }
.video-wrap { width:100%; aspect-ratio:16/9; background:#111; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.video-wrap iframe { width:100%; height:100%; display:block; border:0; }
.resource-section { display:grid; gap:10px; }
.resource-section h2 { margin:0; font-size:19px; line-height:1.35; }
.resource-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
.resource-link { display:grid; gap:5px; text-decoration:none; color:var(--ink); border:1px solid var(--line); background:#fff; border-radius:8px; padding:12px; min-width:0; }
.resource-link strong { color:var(--deep); line-height:1.35; }
.resource-link span { color:var(--muted); font-size:13px; line-height:1.45; }
.inflow-box { border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; }
.inflow-box header { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#efe8db; padding:10px 12px; font-weight:900; }
.inflow-box pre { margin:0; max-height:62vh; overflow:auto; padding:16px; white-space:pre-wrap; word-break:break-word; line-height:1.65; font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; font-size:15px; }
.media-tools { display:grid; gap:10px; }
.download-strip { display:flex; flex-wrap:wrap; gap:8px; }
.download-strip a { text-decoration:none; color:var(--deep); border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px; font-weight:800; }
#pageLink { margin:-4px 0 18px; }
#pageLink:empty { display:none; }
#pageLink a { display:inline-flex; max-width:100%; overflow-wrap:anywhere; text-decoration:none; color:var(--deep); border:1px solid var(--line); background:#fff; border-radius:8px; padding:9px 11px; font-weight:800; }
.copy-block { border:1px solid var(--line); border-radius:8px; background:#fff; margin:14px 0; overflow:hidden; }
.copy-block header { display:flex; justify-content:space-between; align-items:center; gap:10px; background:#efe8db; padding:10px 12px; font-weight:900; }
.copy-block pre { white-space:pre-wrap; word-break:break-word; max-height:380px; overflow:auto; margin:0; padding:14px; line-height:1.5; font-size:13px; }
#pageDots { display:grid; gap:6px; }
.dot-btn { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent; border-color:transparent; padding:7px; border-radius:8px; }
.dot-btn::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--line); flex:0 0 auto; }
.dot-btn.active { background:#fff; border-color:var(--line); font-weight:900; }
.dot-btn.active::before { background:var(--accent); }
body.left-collapsed .app-shell { grid-template-columns:54px minmax(0,1fr); }
body.left-collapsed #pageDots, body.left-collapsed .rail-head strong { display:none; }
body.left-collapsed .rail-head { justify-content:center; margin-bottom:0; }
body.left-collapsed .left-rail { padding:10px 7px; overflow:hidden; }
body.fullscreen-mode .left-rail, body.fullscreen-mode .topbar, body.fullscreen-mode .media-tools { display:none; }
body.fullscreen-mode .app-shell { display:block; min-height:100vh; }
body.fullscreen-mode .slide { display:block; min-height:100vh; }
body.fullscreen-mode .media-panel { padding:0; border:0; min-height:100vh; }
body.fullscreen-mode .media-panel img { width:100vw; height:100vh; object-fit:contain; border:0; border-radius:0; background:#111; }
body.fullscreen-mode .content-slide { max-width:none; min-height:100vh; padding:70px 24px 24px; background:var(--paper); }
body.fullscreen-mode .inflow-box pre { max-height:70vh; }
body.fullscreen-mode .download-strip { display:none; }
.fs-controls { display:none; position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:30; gap:8px; padding:8px; background:rgba(20,24,31,.68); border-radius:10px; backdrop-filter:blur(6px); }
.fs-controls button { background:#fff; }
body.fullscreen-mode .fs-controls { display:flex; }
@media (max-width:980px) {
  .app-shell { grid-template-columns:1fr; }
  .left-rail { position:static; border:0; border-bottom:1px solid var(--line); max-height:180px; }
  .media-panel img { max-height:none; }
  .resource-grid { grid-template-columns:1fr; }
  body.left-collapsed .app-shell { grid-template-columns:1fr; }
  body.left-collapsed .left-rail { max-height:50px; }
}