/* ==========================================================================
   Тема: цвета, скругления, тени, шрифты. Хочешь другой цвет — меняй переменные здесь.
   Стиль: Material Design 3, светлая и тёмная тема (переключается по настройкам системы).
   ========================================================================== */

:root {
  /* цвета (светлая тема) */
  --primary: #0b57d0;
  --on-primary: #ffffff;
  --primary-container: #d3e3fd;
  --on-primary-container: #041e49;

  --surface: #fdfbff;            /* фон страницы */
  --surface-container: #f1f3f9;  /* фон карточек */
  --surface-high: #e6e9f0;       /* фон полей, чипов */
  --on-surface: #1b1b1f;
  --on-surface-variant: #44474e; /* второстепенный текст */
  --outline: #c4c6d0;

  --error: #ba1a1a;
  --error-container: #ffdad6;
  --warning: #8a5100;
  --warning-container: #ffddb3;

  /* форма и тени */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .12), 0 1px 3px 1px rgb(0 0 0 / .08);
  --shadow-2: 0 2px 6px 2px rgb(0 0 0 / .1), 0 1px 2px rgb(0 0 0 / .14);
  --shadow-3: 0 4px 12px 3px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .18);

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #a8c7fa;
    --on-primary: #062e6f;
    --primary-container: #0842a0;
    --on-primary-container: #d3e3fd;

    --surface: #131316;
    --surface-container: #1f1f23;
    --surface-high: #2a2a2f;
    --on-surface: #e4e2e6;
    --on-surface-variant: #c4c6d0;
    --outline: #44474e;

    --error: #ffb4ab;
    --error-container: #93000a;
    --warning: #ffb95c;
    --warning-container: #5c3a00;
  }
}

/* --------------------------------------------------------------------------
   Базовые стили
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--on-surface);
  background: var(--surface);
}

h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 16px 64px;
  display: grid;
  gap: 16px;
}

/* Верхняя панель */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
}
.app-bar h1 { font-size: 20px; font-weight: 500; }
.app-bar__hint { color: var(--on-surface-variant); font-size: 13px; }

@media (max-width: 600px) {
  .app-bar { padding: 12px 16px; }
  .app-bar__hint { display: none; }
}

/* ---------- Поиск по кодам в верхней панели ---------- */
.app-bar { align-items: center; }
.search { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 760px; }
.search__input {
  flex: 1; min-width: 0; height: 38px; padding: 0 16px;
  border: 1px solid var(--outline); border-radius: 19px;
  background: var(--surface-container); color: var(--on-surface); font: inherit;
}
.search__input:focus { outline: 2px solid var(--primary); outline-offset: -1px; background: var(--surface); }
.search__info { font-size: 12px; color: var(--on-surface-variant); white-space: nowrap; }
@media (max-width: 900px) {
  .app-bar { flex-wrap: wrap; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search__info { white-space: normal; }
}