/* ============================================================
   Ozon Parser — визуальная тема
   Направление: тёмная панель по языку hyper3d.ai
   Значения сняты с референса (design/REFERENCE.md, design/ref/tokens.json).
   Имена переменных сохранены — остальные файлы опираются на них.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');

:root {
  /* Поверхности: базовый тон почти чёрный, глубина строится альфой */
  --bg:        #0e0e10;   /* фон страницы */
  --surface:   #141416;   /* панели-подложки */
  --card:      rgba(255,255,255,.04);  /* строки, поля, карточки */
  --line:      rgba(255,255,255,.13);  /* границы */
  --line-strong:rgba(255,255,255,.20); /* границы контролов на подложке */

  /* Дополнительные поверхности того же приёма */
  --card-hover: rgba(255,255,255,.07);
  --card-active:rgba(255,255,255,.10);
  --card-sheen: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.05));

  /* Текст: пять ступеней белого с альфой */
  --text:      rgba(255,255,255,.96);
  --text-2:    rgba(255,255,255,.84);
  --muted:     rgba(255,255,255,.62);
  --muted-2:   rgba(255,255,255,.50);
  /* .42, а не .30: на замере контраста «нет данных», даты в матрице и ячейки
     «н/д» давали 2,6:1 — на грани читаемости. */
  --disabled:  rgba(255,255,255,.42);

  /* Акценты: мятный градиент, тёмные чернила поверх.
     Форма градиента взята с героя hyper3d.ai, цвет свой. */
  --accent:      #6ee7b7;  /* активные состояния, главные кнопки */
  --accent-2:    #34d399;  /* дальний край градиента */
  --accent-ink:  #06251a;  /* текст на акценте */
  --accent-grad: linear-gradient(92.7deg, #6ee7b7 1%, #34d399 96%);
  --accent-grad-hi: linear-gradient(92.7deg, #8bf0c9 1%, #4fdfab 96%);  /* наведение */
  --accent-soft: rgba(110,231,183,.15);

  /* Смысловые цвета. «Хорошо» уведено в бирюзу: зелёный занял акцент, и
     кнопка «Добавить» слилась бы с улучшением позиции.
     --good / --bad — по смыслу; --up / --down — по направлению стрелки,
     и направление у разных таблиц значит разное. */
  --good:        #4fd1c5;
  --bad:         #ff7a6b;
  --up:          var(--bad);   /* рост соинвеста / ухудшение позиции */
  --down:        var(--good);  /* снижение / улучшение */

  /* Плашки статусов */
  --st-ok-bg:   rgba(79,209,197,.16);  --st-ok-fg:   #7fe0d6;
  --st-warn-bg: rgba(244,188,154,.16); --st-warn-fg: #f4c79a;
  --st-err-bg:  rgba(255,122,107,.16); --st-err-fg:  #ff9c90;
  --st-na-bg:   rgba(255,255,255,.07); --st-na-fg:   rgba(255,255,255,.62);

  /* Тепловая шкала позиций (карточка товара) */
  --heat-top:  rgba(79,209,197,.20);   /* топ-100 */
  --heat-mid:  rgba(255,255,255,.07);  /* 100–300 */
  --heat-low:  rgba(255,122,107,.18);  /* ниже 300 */

  /* Радиусы */
  --r-panel: 24px;
  --r-block: 18px;
  --r-row:   12px;
  --r-pill:  999px;

  /* Тени: подпись референса — волосяная светлая рамка внутрь плюс мягкая тень.
     Значения ослаблены против лендинга: панель плотнее, тень не должна давить. */
  --sh-panel: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.28);
  --sh-card:  inset 0 1px 0 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.22);
  --sh-modal: inset 0 1px 0 0 rgba(255,255,255,.10), 0 24px 64px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 'Golos Text', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

a { color: var(--text); }
a:hover { color: #fff; }

::selection { background: var(--accent-soft); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.13);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }