/* Cyberpunk glassmorphism */
:root {
  --bg: #0b0f19;
  --neon-red: #ff2d55;
  --neon-cyan: #22d3ee;
  --plyr-color-main: #22d3ee;
}
body { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

.glass {
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 12px;
  color: #e2e8f0;
  outline: none;
  font-size: 14px;
}
.glass-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25); }

.btn-neon {
  background: linear-gradient(135deg, var(--neon-red), #b91c4c);
  border-radius: 8px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 0 12px rgba(255, 45, 85, 0.4);
}
.btn-neon:hover { filter: brightness(1.15); }

.badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.badge-on { color: #4ade80; border-color: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.4); }
.badge-off { color: #94a3b8; border-color: #475569; }
.badge-err { color: var(--neon-red); border-color: var(--neon-red); }

.neon-frame { box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 0 30px rgba(34, 211, 238, 0.12), 0 0 60px rgba(255, 45, 85, 0.08); }

/* Tree */
.tree-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; user-select: none; }
.tree-row:hover { background: rgba(255, 255, 255, 0.06); }
.tree-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .size { font-size: 11px; color: #64748b; flex-shrink: 0; }
.tree-children { margin-left: 14px; border-left: 1px dashed rgba(255, 255, 255, 0.1); padding-left: 4px; }
.tree-children.collapsed { display: none; }
.tree-row.active { border-color: var(--neon-red); background: rgba(255, 45, 85, 0.1); box-shadow: 0 0 12px rgba(255, 45, 85, 0.35); color: #fff; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(34, 211, 238, 0.4) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 45, 85, 0.6); }