/* ----------  palette ---------- */
:root{
  --bg:#fdfaf6;
  --sidebar:#f7f3ee;
  --text:#222;
  --accent:#005b8a;
  --bg-dark:#171717;
  --sidebar-dark:#232323;
  --text-dark:#fafafa;
  --dot-pos-light:2px;
  --dot-pos-dark:22px;
}

[data-theme=dark]{
  --bg:var(--bg-dark); --sidebar:var(--sidebar-dark); --text:var(--text-dark);
}

/* ----------  layout ---------- */
*{box-sizing:border-box;font-family:Arial,system-ui,sans-serif}
body{margin:0;display:flex;flex-direction:column;height:100vh;background:var(--bg);color:var(--text)}
.header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:var(--sidebar);gap:.8rem}
.logo{display:flex;align-items:center;gap:2rem}
.logo img{height:70px;width:auto}
.layout{flex:1;display:flex;min-height:0}
.sidebar{width:260px;overflow:auto;padding:1rem;background:var(--sidebar)}
.viewer{flex:1;overflow:auto;padding:1rem}
footer{text-align:center;padding:.4rem 0;background:var(--sidebar);font-size:.9rem}

/* tree */
ul{list-style:none;padding-left:.8rem;margin:0}
li{margin:.15rem 0}
a.node{cursor:pointer;text-decoration:none;color:var(--text)}
a.node:hover{color:var(--accent)}
a.active{font-weight:bold}
.downloadBtn{margin-left:.4rem;font-size:.8rem;cursor:pointer;border:none;background:none;color:var(--accent)}
.downloadBtn:hover{color:var(--text)}

/* latest list */
.latest li{margin:.25rem 0}
.latest a{color:var(--accent);text-decoration:none}
.latest a:hover{text-decoration:underline}

/* code & pdf */
pre{white-space:pre-wrap;margin:0}
#pdfCanvas{max-width:100%}

/* ---------- theme slider ---------- */
.theme-toggle{width:44px;height:22px;background:var(--text);border:none;border-radius:50px;cursor:pointer;padding:3px;display:flex;align-items:center;position:relative}
.toggle-slider{width:100%;height:100%;display:flex;align-items:center;position:relative}
.toggle-dot{width:14px;height:14px;background:var(--bg);border-radius:50%;position:absolute;top:50%;transform:translateY(-50%);left:var(--dot-pos-light);transition:left .3s}
[data-theme=dark] .toggle-dot{left:var(--dot-pos-dark)}
.theme-toggle svg{width:14px;height:14px;fill:var(--bg);position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
.moon-icon{left:4px;opacity:0}[data-theme=light] .moon-icon{opacity:1}
.sun-icon{right:4px;opacity:0}[data-theme=dark] .sun-icon{opacity:1}

/* ---------- misc ---------- */
.icon-btn{background:none;border:none;cursor:pointer;font-size:1.2rem;color:var(--text)}
.icon-btn:hover{color:var(--accent)}