/* Base styles, CSS variables, and resets */

:root {
  --bg: #0f0f10;
  --panel: #17181a;
  --panel2: #1e1f22;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --line: #2a2b31;
  --accent: #ff9f1a;
  --grid: #8b8b8b;
  --gridBold: #5a5a5a;
}

[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f3f4f6;
  --panel2: #ffffff;
  --text: #0b0b0c;
  --muted: #52525b;
  --line: #d4d4d8;
}

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

/* Common button styles */
.btn {
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 650;
  cursor: pointer;
}

.iconBtn {
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
}

/* Utility classes */
.hidden { display: none !important; }
.spacer { flex: 1; }