/* ===== Переменные — Dark Theme ===== */
:root {
  /* Фоны */
  --bg-main: #1a1a2e;
  --bg-card: #232336;
  --bg-hover: #2a2a42;

  /* Текст */
  --text-primary: #e0e0e0;
  --text-muted: #888;

  /* Акценты (как на графе) */
  --accent-blue: #5c9eff;
  --accent-cyan: #4ecdc4;
  --accent-yellow: #f0c674;
  --accent-pink: #e07090;

  /* Бордюры */
  --border-color: #3a3a50;
  --border-width: 1px;

  /* Размеры */
  --radius: 3px;
  --gap: 0.5rem;

  /* Layout Gutters */
  --gutter-width: 4px;
  --gutter-color: var(--border-color);
  --gutter-hover: var(--accent-blue);
  --panel-min-width: 120px;
}

/* ===== Базовые стили ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.4;
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap);
}

/* ===== Компоненты ===== */

/* Карточка */
.card {
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--gap);
}

.card:hover {
  background: var(--bg-hover);
}

/* Кнопки */
.btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.3rem 0.6rem;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn:hover {
  background: var(--bg-hover);
}

.btn--primary {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.btn--accent {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Инпуты */
input, textarea, select {
  background: var(--bg-main);
  color: var(--text-primary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.3rem 0.5rem;
  font-size: 13px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* Текстовые стили */
.text--muted { color: var(--text-muted); }
.text--blue { color: var(--accent-blue); }
.text--cyan { color: var(--accent-cyan); }
.text--yellow { color: var(--accent-yellow); }
.text--pink { color: var(--accent-pink); }

/* Утилиты */
.flex { display: flex; gap: var(--gap); }
.flex--col { flex-direction: column; }
.flex--center { align-items: center; justify-content: center; }