/* Общая база прототипов: mobile-first, iPhone + iPad 13" + десктоп */

/* Палитра темы (RGB-тройки для Tailwind, см. shared/tw.js).
   Тёмная — штатные цвета Tailwind. Светлая — шкала slate перевёрнута (950 = фон страницы,
   900 = белые карточки/поля, 200 = основной текст), акценты 300/400 взяты из 600/700,
   чтобы хватало контраста на белом. */
:root {
  --slate-50: 248 250 252;  --slate-100: 241 245 249; --slate-200: 226 232 240; --slate-300: 203 213 225;
  --slate-400: 148 163 184; --slate-500: 100 116 139; --slate-600: 71 85 105;   --slate-700: 51 65 85;
  --slate-800: 30 41 59;    --slate-900: 15 23 42;    --slate-950: 2 6 23;
  --emerald-300: 110 231 183; --emerald-400: 52 211 153; --emerald-500: 16 185 129;
  --rose-300: 253 164 175;    --rose-400: 251 113 133;   --rose-500: 244 63 94;
  --cyan-200: 165 243 252;    --cyan-300: 103 232 249;   --cyan-400: 34 211 238;  --cyan-500: 6 182 212;
  --amber-300: 252 211 77;    --amber-400: 251 191 36;   --amber-500: 245 158 11;
}
html.light {
  --slate-50: 2 6 23;       --slate-100: 15 23 42;    --slate-200: 30 41 59;    --slate-300: 51 65 85;
  --slate-400: 71 85 105;   --slate-500: 100 116 139; --slate-600: 148 163 184; --slate-700: 203 213 225;
  --slate-800: 226 232 240; --slate-900: 255 255 255; --slate-950: 241 245 249;
  --emerald-300: 4 120 87;    --emerald-400: 5 150 105;  --emerald-500: 16 185 129;
  --rose-300: 190 18 60;      --rose-400: 225 29 72;     --rose-500: 244 63 94;
  --cyan-200: 21 94 117;      --cyan-300: 14 116 144;    --cyan-400: 8 145 178;   --cyan-500: 6 182 212;
  --amber-300: 180 83 9;      --amber-400: 217 119 6;    --amber-500: 245 158 11;
}
/* плавная смена темы только для фонов/рамок/текста, без анимации графиков */
html.theme-anim *, html.theme-anim *::before { transition: background-color .25s, border-color .25s, color .25s !important; }

html, body { height: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  font-feature-settings: "cv11" 1, "ss03" 1;
}
[x-cloak] { display: none !important; }
/* Цифры — тем же Inter, но табличные (одинаковая ширина), чтобы колонки не «прыгали» при тиках.
   Моноширинный системный шрифт на 10–11px выглядел грубо/«пиксельно». */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1; letter-spacing: -0.01em; }

/* safe-area для iPhone с вырезом / home-indicator */
.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pl-safe { padding-left: env(safe-area-inset-left); }
.pr-safe { padding-right: env(safe-area-inset-right); }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.thin-scroll { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.25) transparent; }
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.25); border-radius: 3px; }
.touch-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* вспышка при изменении цены */
@keyframes flash-up { from { background-color: rgba(52,211,153,.22); } to { background-color: transparent; } }
@keyframes flash-down { from { background-color: rgba(251,113,133,.22); } to { background-color: transparent; } }
.flash-up { animation: flash-up .45s ease-out; }
.flash-down { animation: flash-down .45s ease-out; }

/* на тач-устройствах убираем hover-эффекты, чтобы не "залипали" */
@media (hover: none) {
  .hover-only { display: none !important; }
}