diff --git a/public/styles.css b/public/styles.css
index 26f6288..3b66575 100755
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,146 +1,71 @@
-:root {
-  --bg: #0f0f10;
-  --panel: #19191b;
-  --gold: #d4af37;
-  --text: #e0e0e0;
-  --muted: #888;
+:root{
+  --bg:#0f0f10; --panel:#19191b; --gold:#d4af37; --text:#e0e0e0; --muted:#909090;
 }
 
-body {
-  background: var(--bg);
-  color: var(--text);
-  margin: 0;
-  font-family: "Inter", system-ui, sans-serif;
-  height: 100vh;
-  overflow: hidden;
+*{box-sizing:border-box}
+html,body{height:100%}
+body{
+  margin:0; background:var(--bg); color:var(--text);
+  font-family:Inter,system-ui,ui-sans-serif,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+  overflow:hidden;
 }
 
-#app {
-  display: grid;
-  grid-template-columns: 320px 1fr;
-  height: 100%;
-}
+#app{display:grid; grid-template-columns:320px 1fr; height:100%}
 
-.sidebar {
-  background: var(--panel);
-  overflow-y: auto;
-  border-right: 1px solid var(--gold);
-  padding: 0.5em 1em;
+.sidebar{
+  background:var(--panel); border-right:1px solid rgba(212,175,55,.35);
+  overflow:auto; padding:.75rem 1rem;
 }
+h1{margin:.25rem 0 .5rem; color:var(--gold); font-size:1.35rem; letter-spacing:.3px}
 
-h1 {
-  color: var(--gold);
-  font-size: 1.4em;
-  margin: 0.5em 0;
+.controls{display:flex; flex-direction:column; gap:.5rem; font-size:.92rem}
+select,input.search{
+  background:#0a0a0a; color:var(--text); border:1px solid rgba(212,175,55,.5);
+  border-radius:6px; padding:.35rem .5rem;
 }
+input.search::placeholder{color:#777}
 
-.controls {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-  font-size: 0.9em;
+nav{margin-top:.75rem}
+.file,.dir{
+  display:block; padding:.25rem .35rem; border-radius:6px;
+  text-decoration:none; color:var(--text); cursor:pointer; user-select:none;
 }
+.file:hover,.dir:hover{background:rgba(212,175,55,.12)}
+.file.active{background:rgba(212,175,55,.18); outline:1px solid rgba(212,175,55,.25)}
+.pin{color:var(--gold); font-weight:600; margin-right:.25rem}
 
-select {
-  background: #000;
-  color: var(--gold);
-  border: 1px solid var(--gold);
-  border-radius: 4px;
+.dir .label{display:flex; align-items:center}
+.dir .label::before{content:"▶"; margin-right:.45rem; font-size:.85em; color:var(--gold)}
+.dir.open .label::before{content:"▼"}
+.children{display:none; margin-left:1rem}
+.dir.open .children{display:block}
+
+.content{overflow:auto}
+.viewer{max-width:780px; margin:0 auto; padding:1.25rem 1rem 2.5rem}
+
+#meta{color:var(--muted); font-size:.92rem; margin:0 0 .75rem}
+iframe,#mdView{width:100%; border:none; background:transparent; color:var(--text)}
+iframe{height:calc(100vh - 5.5rem); min-height:550px}
+.md pre,.md code{background:#111; color:#f1cf6b; padding:.5rem .6rem; border-radius:6px; overflow-x:auto}
+.md img{max-width:100%}
+.error{margin-top:1rem; color:#ff6b6b; background:#2a1313; border:1px solid #7a2f2f; padding:.75rem .9rem; border-radius:8px}
+
+/* Mobile drawer */
+.nav-toggle{
+  display:none; position:fixed; top:10px; left:10px; z-index:2000;
+  background:var(--panel); color:var(--gold); border:1px solid var(--gold);
+  border-radius:8px; padding:6px 10px; font-size:20px
 }
+.overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1100}
 
-nav {
-  margin-top: 1em;
-  line-height: 1.6;
-}
-
-.file, .dir {
-  display: block;
-  padding: 2px 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  text-decoration: none;
-  color: var(--text);
-}
-
-.file.active, .file:hover, .dir:hover {
-  background: rgba(212,175,55,0.15);
-}
-
-.pin {
-  font-weight: bold;
-  color: var(--gold);
-}
-
-.content {
-  overflow-y: auto;
-  position: relative;
-}
-
-.viewer {
-  padding: 1.5em;
-  max-width: 700px;
-  margin: 0 auto;
-}
-
-#meta {
-  color: var(--muted);
-  font-size: 0.9em;
-  margin-bottom: 1em;
-}
-
-iframe, .md {
-  width: 100%;
-  border: none;
-  background: transparent;
-  color: var(--text);
-}
-
-.md pre, .md code {
-  background: #111;
-  padding: 0.5em;
-  border-radius: 4px;
-  overflow-x: auto;
-  color: var(--gold);
-}
-
-/* --- Mobile Drawer --- */
-.nav-toggle {
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  z-index: 2000;
-  background: var(--panel);
-  color: var(--gold);
-  border: 1px solid var(--gold);
-  border-radius: 8px;
-  padding: 6px 10px;
-  font-size: 20px;
-  display: none;
-}
-
-@media (max-width: 900px) {
-  #app {
-    grid-template-columns: 1fr;
-  }
-  .nav-toggle {
-    display: block;
-  }
-  .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 80%;
-    max-width: 340px;
-    height: 100%;
-    transform: translateX(-100%);
-    transition: transform 0.3s ease;
-    z-index: 1500;
-  }
-  .sidebar.open {
-    transform: translateX(0);
-  }
-  .content {
-    margin-left: 0;
-    overflow-y: auto;
+@media (max-width:900px){
+  #app{grid-template-columns:1fr}
+  .nav-toggle{display:block}
+  .sidebar{
+    position:fixed; inset:0 auto 0 0; width:min(82vw,340px); transform:translateX(-100%);
+    transition:transform .25s ease; z-index:1200
   }
+  .sidebar.open{transform:translateX(0)}
+  .sidebar.open ~ .overlay{display:block}
+  .content{overflow:auto}
 }
\ No newline at end of file