.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,#0f172a,#1e293b);color:#fff}
.brand{font-weight:700}
#breadcrumbs{font-size:14px;opacity:0.9}
.container{display:flex;gap:16px;padding:16px;max-width:1100px;margin:20px auto}
.sidebar{width:220px;background:#fff;border-radius:8px;padding:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.browser{flex:1;background:#fff;border-radius:8px;padding:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.file-list{display:flex;flex-direction:column;gap:8px}
.file-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:6px;border:1px solid #f0f2f5}
.file-row:hover{background:#f8fafc}
.icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:#eef2ff;color:#3730a3;font-weight:700}
.name{flex:1}
.meta{color:#64748b;font-size:13px}

@media(max-width:700px){.container{flex-direction:column;padding:12px}.sidebar{width:100%}}