:root{--bg:#0f1720;--panel:#0b1220;--muted:#9aa4b2;--accent:#36a3ff;--text:#e6eef6;--gap:12px;font-family:Inter,Roboto,system-ui,-apple-system,Segoe UI,Arial}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0}.container{gap:var(--gap);height:100vh;padding:16px;display:flex}.sidebar{background:linear-gradient(#ffffff05,#0000);border-radius:10px;width:320px;padding:12px;overflow:auto}.title{color:var(--accent);margin:0 0 8px 8px;font-size:16px}.tree{padding:4px}.node{margin:4px 0}.node-label{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;padding:8px}.node-label.folder:hover{background:#ffffff05}.node-label.file:hover{background:#ffffff08}.node-label.file{color:var(--text);padding-left:14px;font-size:14px}.children{margin-top:6px;padding-left:14px}.main{background:var(--panel);border-radius:10px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:18px;display:flex}.empty{text-align:center;color:var(--muted)}.muted{color:var(--muted);margin-top:6px}.player-wrap{flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:900px;display:flex}.media-title{color:var(--text);margin:0;font-size:18px}.video{background:#000;border-radius:8px;outline:1px solid #ffffff08;width:100%;height:480px}.meta{color:var(--muted);gap:12px;font-size:13px;display:flex}@media (width<=800px){.container{flex-direction:column;padding:10px}.sidebar{width:100%;height:34vh}.main{height:66vh;padding:12px}.video{height:240px}}