:root{
  --bg:#0b0f17;
  --panel:#0f1623;
  --panel2:#121c2c;
  --text:#e6eefc;
  --muted:#9bb0d0;
  --border:#1d2a44;
  --accent:#3b82f6;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  background:var(--bg);
  color:var(--text);
}

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

.sidebar{
  background:linear-gradient(180deg, var(--panel), #0c1220);
  border-right:1px solid var(--border);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.brand{
  font-weight:800;
  letter-spacing:2px;
  color:var(--accent);
}

.nav{ display:flex; flex-direction:column; gap:6px; }
.navbtn{
  text-align:left;
  background:transparent;
  border:1px solid transparent;
  color:var(--text);
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
}
.navbtn:hover{ border-color:var(--border); background:rgba(59,130,246,0.08); }
.navbtn.active{ background:rgba(59,130,246,0.15); border-color:rgba(59,130,246,0.35); }

.spacer{ flex:1; }

.uploadbtn, .secondary, button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
}
.primary{ background:rgba(59,130,246,0.2); border-color:rgba(59,130,246,0.5); }
.icon{ width:36px; height:36px; border-radius:10px; }

.main{ display:flex; flex-direction:column; }
.topbar{
  padding:14px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
}
.search{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
}
.crumbs{ color:var(--muted); font-size:14px; }
.crumb {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.crumb:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Drag and drop styles */
.card.dragging {
  opacity: 0.5;
}
.card.drop-target {
  background: rgba(59, 130, 246, 0.2);
  border-color: var(--accent);
  transform: scale(1.02);
}

.dropzone{
  padding:14px;
  height:100%;
  overflow:auto;
}
.dropzone.dragover{
  outline:2px dashed rgba(59,130,246,0.7);
  outline-offset:-8px;
}

.list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
}
.card:hover{ border-color:rgba(59,130,246,0.45); }
.card .name{ font-weight:700; }
.card .meta{ color:var(--muted); font-size:12px; margin-top:6px; }

.drawer{
  border-left:1px solid var(--border);
  background:linear-gradient(180deg, var(--panel), #0c1220);
  padding:14px;
  overflow:auto;
}
.drawer.hidden{ display:none; }
.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.drawer-title{ font-weight:800; }
.row{ display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; }
.meta{
  background:#070a10;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  color:var(--muted);
  white-space:pre-wrap;
}