:root { --bg:#0b0c10; --fg:#e6eef4; --card:#151822; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;background:var(--bg);color:var(--fg)}
header{padding:20px 24px;border-bottom:1px solid #222}
h1{margin:0;font-size:22px}
main.grid{display:grid;gap:16px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
section{background:#151822;padding:12px;border-radius:12px;min-height:340px;height:340px;box-shadow:0 1px 8px rgba(0,0,0,.25)}
/* важно! чтобы Chart.js не растягивал секцию бесконечно */
section canvas{width:100% !important;height:260px !important;max-height:260px !important;display:block}

h2{margin:6px 4px 12px 4px;font-size:16px;font-weight:600}
canvas{width:100%;height:260px}
code{background:#222;padding:2px 6px;border-radius:6px}

/* ---------- auth/landing UI (добавить в конец style.css) ---------- */
a { color: #7dc1ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Контейнеры страниц */
.container {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Карточки/панели */
.card {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0,0,0,.25);
  padding: 20px;
}

.card-sm { max-width: 420px; width: 100%; }
.card-lg { max-width: 1024px; width: 100%; }

/* Заголовки и подзаголовки */
.title { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.subtitle { margin: 0 0 20px; opacity: .8; }

/* Формы */
.form { display: grid; gap: 12px; }
.label { font-size: 13px; opacity: .8; margin-bottom: 6px; }
.input, .password {
  width: 100%;
  padding: 10px 12px;
  background: #0f121a;
  color: var(--fg);
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  outline: none;
}
.input:focus, .password:focus { border-color: #3e7ad8; }

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  background: #2c6fb3;
  color: #fff;
  font-weight: 600;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  border-color: #2a2f3a;
  color: var(--fg);
}
.btn-danger { background: #b34a4a; }

.actions { display: flex; gap: 10px; }

/* Шапка общая для всех страниц (совместимо с твоим header) */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #222;
}

/* Уведомления/ошибки */
.alert {
  padding: 10px 12px;
  border-radius: 10px;
  background: #2a1d1d;
  color: #ffb8b8;
  border: 1px solid #5a2e2e;
}

/* Ссылки-кнопки на лендинге */
.hero {
  display: grid;
  gap: 16px;
  padding: 24px;
  text-align: center;
}
.hero h1 { font-size: 28px; margin: 0; }
.hero p { opacity: .85; margin: 0; }
.hero .actions { justify-content: center; }

/* Мелкие утилиты */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }