/* =========================================================================
   ТЕМА ОФОРМЛЕНИЯ — ЕДИНСТВЕННЫЙ ФАЙЛ, КОТОРЫЙ НУЖНО ПРАВИТЬ
   ДЛЯ ПОЛНОЙ СМЕНЫ ВНЕШНЕГО ВИДА САЙТА.

   Чтобы поменять оформление, достаточно изменить значения переменных
   в блоке :root ниже. Разметку и шаблоны трогать не нужно.

   Инструкция:
     — цвета:       --color-*
     — шрифты:      --font-*
     — скругления:  --radius-*
     — отступы:     --space-*
     — тени:        --shadow-*

   Пример: чтобы сделать тёмную фиолетовую тему, поменяйте
   --color-bg, --color-surface, --color-text и --color-accent.
   ========================================================================= */

:root {
  /* --- Цвета --- */
  --color-bg: #ffffff;
  --color-surface: #f7f8fa;
  --color-surface-2: #eef0f4;
  --color-border: #e2e5ea;
  --color-text: #17191c;
  --color-text-muted: #6b7280;
  --color-accent: #2f6fed;
  --color-accent-hover: #2559c4;
  --color-accent-contrast: #ffffff;
  --color-success: #1f9254;
  --color-warning: #b7791f;
  --color-danger: #c93c3c;

  /* --- Типографика --- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --leading: 1.55;

  /* --- Геометрия --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --container: 1120px;

  /* --- Тени --- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
}

/* Тёмная тема — включается автоматически по настройке системы.
   Значения можно менять так же, как и в :root. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #101216;
    --color-surface: #171a20;
    --color-surface-2: #1e222a;
    --color-border: #2a2f38;
    --color-text: #e8eaee;
    --color-text-muted: #9aa2ae;
    --color-accent: #5b8dff;
    --color-accent-hover: #7ba3ff;
  }
}

/* ========================= БАЗОВЫЕ СТИЛИ ========================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.25; margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { margin: 0 0 var(--space-3); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.mono  { font-family: var(--font-mono); }
.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

/* ========================= ШАПКА И ПОДВАЛ ========================= */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 20;
}
.site-header .inner { display: flex; align-items: center; gap: var(--space-5); height: 62px; }
.brand { font-weight: 650; font-size: var(--text-lg); color: var(--color-text); }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: var(--space-4); margin-left: auto; align-items: center; }
.nav a { color: var(--color-text-muted); font-size: var(--text-sm); }
.nav a:hover { color: var(--color-text); text-decoration: none; }

.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-7);
  padding: var(--space-5) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

main { padding: var(--space-6) 0; min-height: 60vh; }

/* ========================= КОМПОНЕНТЫ ========================= */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card + .card { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: var(--text-sm); font-weight: 550;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease;
}
.btn:hover { background: var(--color-accent-hover); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-border); }
.btn-danger { background: var(--color-danger); }
.btn-sm { padding: 6px var(--space-3); font-size: var(--text-xs); }

label { display: block; font-size: var(--text-sm); font-weight: 550; margin-bottom: var(--space-1); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], select, textarea {
  width: 100%;
  padding: 9px var(--space-3);
  font: inherit; font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.field + .field { margin-top: var(--space-4); }
.errorlist { color: var(--color-danger); font-size: var(--text-sm); padding-left: var(--space-4); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
th { color: var(--color-text-muted); font-weight: 550; }

.badge {
  display: inline-block; padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 550;
  background: var(--color-surface-2); color: var(--color-text-muted);
}
.badge-success { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.badge-warning { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.badge-danger  { background: color-mix(in srgb, var(--color-danger) 15%, transparent);  color: var(--color-danger); }

.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
         border: 1px solid var(--color-border); background: var(--color-surface); margin-bottom: var(--space-3); }
.alert-success { border-color: var(--color-success); }
.alert-error   { border-color: var(--color-danger); }

/* ========================= ГЛАВНАЯ СТРАНИЦА ========================= */

section { margin-bottom: var(--space-7); }
section > h2 { margin-bottom: var(--space-4); }

.hero {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.hero h1 { font-size: clamp(28px, 5vw, 44px); margin-bottom: var(--space-2); }
.hero-sub { color: var(--color-text-muted); font-size: var(--text-lg); margin: 0; }

.hero-stats {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-6); margin-top: var(--space-6);
}
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: var(--text-xl); }
.hero-stats span { color: var(--color-text-muted); font-size: var(--text-sm); }

.step { position: relative; padding-top: var(--space-6); }
.step-n {
  position: absolute; top: var(--space-4); left: var(--space-5);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: var(--color-accent-contrast);
  font-size: var(--text-xs); font-weight: 650;
}

.game-card:hover { border-color: var(--color-accent); text-decoration: none; }

.cta {
  text-align: center; padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* --- Расшифровка цены --- */
.price-box { position: sticky; top: 80px; }
.price-line { display: flex; justify-content: space-between; padding: var(--space-2) 0;
              border-bottom: 1px dashed var(--color-border); font-size: var(--text-sm); }
.price-total { display: flex; justify-content: space-between; padding-top: var(--space-3);
               font-size: var(--text-xl); font-weight: 650; }

/* --- Полоса прогресса заказа --- */
.progress-bar {
  display: flex; list-style: none; margin: 0 0 var(--space-5); padding: 0;
  gap: var(--space-2); flex-wrap: wrap;
}
.progress-step {
  flex: 1 1 120px; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.progress-dot {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 650;
  background: var(--color-surface-2); color: var(--color-text-muted);
}
.progress-step.is-done { border-color: var(--color-success); }
.progress-step.is-done .progress-dot {
  background: var(--color-success); color: #fff;
}
.progress-step.is-current { border-color: var(--color-accent); }
.progress-step.is-current .progress-dot {
  background: var(--color-accent); color: var(--color-accent-contrast);
}
.progress-step.is-pending { opacity: .55; }

/* --- Чат --- */
.chat-log { display: flex; flex-direction: column; gap: var(--space-3);
            max-height: 55vh; overflow-y: auto; padding: var(--space-2); }
.bubble { max-width: 74%; padding: var(--space-3); border-radius: var(--radius-lg);
          background: var(--color-surface-2); }
.bubble.mine { align-self: flex-end; background: var(--color-accent); color: var(--color-accent-contrast); }
.bubble .meta { font-size: var(--text-xs); opacity: .75; margin-bottom: 2px; }

@media (max-width: 720px) {
  .site-header .inner { height: auto; padding: var(--space-3) 0; flex-wrap: wrap; }
  .nav { width: 100%; margin-left: 0; }
  .price-box { position: static; }
}