Update styles.css

public/styles.css

@@ -1,4 +1,61 @@
-body { font-family: monospace; background: #f0f0f0; }
-.room { border: 1px solid #ccc; padding: 1em; }
-.exits a { display: block; }
-.chat { border-top: 1px solid #000; margin-top: 1em; }
+: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)}
+}