:root{
  --bg:#0b0b0f;
  --panel:#111117;
  --gold:#d4af37;
  --text:#eaeaea;
  --muted:#999;
  --border:#20202a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji;
}

#app{
  display:grid; grid-template-columns:320px 1fr; min-height:100vh;
}

.sidebar{
  border-right:1px solid var(--border);
  background:var(--panel);
  display:flex; flex-direction:column; min-height:0;
}

.sidehead{padding:12px 14px; border-bottom:1px solid var(--border)}
.sidehead h1{margin:0 0 8px; font-weight:700; letter-spacing:.5px; color:var(--gold)}
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.controls label{font-size:13px; color:var(--muted)}
.controls select{background:#000; color:var(--text); border:1px solid var(--border); padding:4px 6px}

#tree{padding:8px 10px; overflow:auto; flex:1}
.tree-node{margin:2px 0}
.dir>.dir-label{cursor:pointer; display:flex; align-items:center; gap:6px; padding:6px 6px; border-radius:8px}
.dir>.dir-label:hover{background:#15151d}
.dir.open>.children{display:block}
.dir .children{display:none; padding-left:14px; border-left:1px dashed #2a2a36; margin-left:8px}

.file{
  display:flex; align-items:center; gap:8px;
  color:var(--text); text-decoration:none; padding:4px 6px; border-radius:8px;
}
.file:hover{background:#15151d}
.file.active{background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.25)}
.file .meta{color:var(--muted); font-size:12px; margin-left:auto}
.pin{color:var(--gold); font-weight:700; font-size:12px; padding:0 4px; border:1px solid var(--gold); border-radius:6px}

.content{display:flex; flex-direction:column; min-height:0}
.viewer{flex:1; min-height:0; display:grid}
.viewer iframe{width:100%; height:100%; border:0; background:#fff; border-top:1px solid var(--border)}
.viewer .md{padding:22px 24px; max-width:900px; margin:0 auto}
.viewer .md pre, .viewer .md code{overflow-x:auto; word-break:break-word}

.foot{border-top:1px solid var(--border); color:var(--muted); font-size:12px; padding:8px 12px}

@media (max-width: 900px){
  #app{grid-template-columns:1fr; grid-template-rows:minmax(200px,44vh) 1fr}
  .sidebar{min-height:200px}
  .content{min-height:calc(56vh - 1px)}
}