/* Modern Windows-like File Explorer styles */
:root {
  --bg: #0f141a;
  --panel: #121821;
  --panel2: #1a2230;
  --border: #263244;
  --text: #e6edf3;
  --muted: #a5b1c2;
  --accent: #3b82f6; /* blue */
  --accent-2: #22c55e; /* green */
  --danger: #ef4444;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}
#app { height: 100%; display: flex; flex-direction: column; }

.app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
.title { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.logo { width: 22px; height: 22px; filter: hue-rotate(200deg) saturate(1.6); }
.actions { display: flex; align-items: center; gap: 8px; }
.actions button {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.actions button:hover { border-color: var(--accent); }
.path-input { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.path-input input { width: 320px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }

.main { flex: 1; display: grid; grid-template-columns: 280px 1fr 420px; }
.sidebar { border-right: 1px solid var(--border); background: var(--panel); overflow: auto; }
.content { background: var(--panel2); display: flex; flex-direction: column; }
.editor-pane { border-left: 1px solid var(--border); background: var(--panel); display: none; flex-direction: column; }
.editor-pane.open { display: flex; }

.toolbar { padding: 8px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; }
.toolbar button { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; }
.toolbar button:hover { border-color: var(--accent-2); }

.grid { padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; overflow: auto; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display:flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }
.card img { width: 48px; height: 48px; }
.card .label { font-size: 12px; color: var(--muted); text-align: center; word-break: break-word; }

.tree-node { display:flex; align-items:center; gap: 6px; padding: 6px 8px; cursor:pointer; }
.tree-node:hover { background: rgba(255,255,255,0.05); }
.tree-children { margin-left: 20px; border-left: 1px dashed var(--border); }
.tree-icon { width: 16px; height: 16px; }
.tree-name { font-size: 13px; color: var(--muted); }

.editor-toolbar { display:flex; align-items:center; justify-content: space-between; padding: 8px; border-bottom: 1px solid var(--border); }
#editor { flex:1; width: 100%; background: var(--panel); color: var(--text); border: 0; padding: 12px; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.statusbar { padding: 6px 10px; border-top: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 12px; }