/* ============================================================
   BarterBanner — общие значения для кабинета и админки.

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

   Файл был втрое длиннее. Остальное — стили самой первой главной
   страницы: .hero, .steps, .features-grid, .cta. Главная давно живёт со
   своими стилями, а эти правила остались и продолжали срабатывать на
   всём, что случайно совпало именем. Ровно так стили раздела вопросов
   однажды нарисовали рамку вокруг списка языков.
   ============================================================ */

:root {
  color-scheme: light;

  /* Зелёный — основное действие. Он же на главной. */
  --color-primary:      #16A34A;
  --color-primary-dark: #15803D;
  /* Синий — второстепенное: значки, ссылки внутри текста. Ничего не
     решает сам, но отличает «посмотреть» от «сделать». */
  --color-accent:       #4F46E5;
  --color-accent-soft:  rgba(79, 70, 229, .10);

  --color-bg:        #FBFCFE;
  --color-bg-soft:   #F3F6FB;
  --color-surface:   #FFFFFF;
  --color-surface-2: #F6F8FC;

  --color-text:       #0D1526;
  --color-text-muted: #55617A;
  /* Третий уровень серого почти сравнялся со вторым — и это вывод, а
     не недосмотр. Ниже 4,5 к 1 мелкий текст читать нельзя, а выше этого
     порога места для трёх различимых оттенков на светлом листе не
     остаётся. Разницу дальше несёт размер, а не цвет. */
  --color-text-dim:   #5E6B7D;

  --color-border:      #DCE3EE;
  --color-border-soft: #E8EDF5;

  /* Исходы. Цвет помогает, но решает всегда подпись рядом: цвет
     различают не все. */
  --color-ok:      #15803D;
  --color-ok-bg:   #E8F5EE;
  --color-warn:    #B45309;
  --color-warn-bg: #FDF3E3;
  --color-bad:     #B91C1C;
  --color-bad-bg:  #FCECEC;

  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius:    8px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(15, 23, 42, .06);
  --shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, .22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Видимая рамка при переходе с клавиатуры. Без неё человек, который не
   пользуется мышью, теряет место на странице. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

/* Зелёная с тёмной надписью — как на главной. */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #04140A;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.btn-outline {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover {
  border-color: var(--color-text-dim);
  background: var(--color-surface-2);
}

.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Переключатель языка на страницах входа ---------- */
.lang-btn {
  padding: 4px 9px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.lang-btn:hover {
  border-color: var(--color-text-dim);
  color: var(--color-text);
}
.lang-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #04140A;
}