:root { --bg:#12141a; --panel:#1b1e27; --line:#2a2e3b; --text:#dfe3ec; --dim:#8b91a3; --acc:#4f8cff; --ok:#38c172; --warn:#e8a33d; }
  * { box-sizing:border-box; }
  body { margin:0; font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
  header { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  header h1 { font-size:17px; margin:0; }
  header .sub { color:var(--dim); font-size:12.5px; }
  header a { color:var(--acc); text-decoration:none; margin-left:auto; }
  main { display:grid; grid-template-columns: 270px 1fr; gap:0; min-height:calc(100vh - 120px); }
  #side { border-right:1px solid var(--line); padding:12px; }
  #drop { border:2px dashed var(--line); border-radius:10px; padding:22px 12px; text-align:center; color:var(--dim); cursor:pointer; transition:.15s; }
  #drop.hover { border-color:var(--acc); color:var(--text); }
  #files { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
  .file { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 9px; display:flex; align-items:center; gap:8px; font-size:13px; }
  .file .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
  .file .mod { color:var(--warn); font-size:11px; }
  .file button { background:var(--acc); color:#fff; border:0; border-radius:6px; padding:3px 8px; cursor:pointer; font-size:12px; }
  #dlall { margin-top:10px; width:100%; background:var(--ok); color:#08130c; border:0; border-radius:8px; padding:8px; font-weight:600; cursor:pointer; display:none; }
  #content { padding:12px 16px; overflow:auto; }
  #toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
  #toolbar input { background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:7px 10px; width:280px; }
  #toolbar button { background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:7px 12px; cursor:pointer; }
  #toolbar button:hover { border-color:var(--acc); }
  #status { color:var(--dim); font-size:12.5px; margin-bottom:8px; min-height:16px; }
  ul.tree { list-style:none; padding-left:18px; margin:2px 0; }
  ul.tree.root { padding-left:0; }
  .node { padding:2px 4px; border-radius:5px; cursor:default; white-space:nowrap; }
  .node:hover { background:var(--panel); }
  .node .tw { display:inline-block; width:14px; color:var(--dim); cursor:pointer; user-select:none; }
  .node.editable { cursor:pointer; }
  .node.editable:hover { color:var(--acc); }
  #loading { position:fixed; inset:0; background:rgba(10,12,16,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:10; }
  .spin { width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:s 0.9s linear infinite; }
  @keyframes s { to { transform:rotate(360deg); } }
  #adslot { margin:14px 0; min-height:90px; border:1px dashed var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:12px; }
  footer { padding:12px 18px; border-top:1px solid var(--line); color:var(--dim); font-size:12px; }
  @media (max-width:760px){ main { grid-template-columns:1fr; } #side { border-right:0; border-bottom:1px solid var(--line);} }

/* shared nav + content pages */
nav.site { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
nav.site a { color:var(--text); text-decoration:none; padding:6px 10px; border-radius:7px; font-size:13.5px; }
nav.site a:hover { background:var(--panel); }
nav.site a.active { background:var(--acc); color:#fff; }
.wrap { max-width:920px; margin:0 auto; padding:24px 18px 40px; }
.wrap h2 { border-bottom:1px solid var(--line); padding-bottom:6px; margin-top:30px; }
.wrap code { background:var(--panel); padding:1px 5px; border-radius:4px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; margin:18px 0; }
.btn { display:inline-block; background:var(--ok); color:#08130c; font-weight:600; text-decoration:none; padding:11px 18px; border-radius:9px; }
.btn.secondary { background:var(--acc); color:#fff; }
.adbox { margin:22px 0; min-height:100px; border:1px dashed var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:12px; }