/* ============================================================
   Liquid Glass — единая дизайн-система: токены + примитивы.
   Все имена переменных, что используют view-JS-инлайны
   (--text, --text-dim, --text-faint, --gold, --accent,
   --accent-soft, --glass-strong), сохранены как часть системы.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Фоны (raw) ---- Глубокая когезивная near-black база: один тёмный
     материал, минимум разнотона. Хексы держать в паре с index.html/ tg.js. */
  --bg-0: #060709;          /* глубже всего (под свечением) */
  --bg-1: #0b0c0f;          /* фон приложения (near-black, бренд) */
  --bg-2: #121319;          /* приподнятая поверхность (едва светлее) */
  --bg: var(--bg-1);        /* алиас для старых ссылок */
  --bg-soft: var(--bg-2);

  /* ---- Стекло: near-black заливки, читаются как ОДНА поверхность ----
     Разница уровней — минимальная (когезия > эффектность в тёмной теме). */
  --glass: rgba(23, 25, 30, 0.55);          /* карточки */
  --glass-2: rgba(30, 32, 38, 0.58);        /* чуть выше */
  --glass-strong: rgba(18, 20, 25, 0.86);   /* sheet (плотнее для читаемости) */
  --glass-bar: rgba(11, 12, 15, 0.80);      /* таббар */

  /* ---- Канты, глянец, разделители — тонкий hairline вместо контраста ---- */
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-border-soft: rgba(255, 255, 255, 0.045);
  --glass-hi: rgba(255, 255, 255, 0.08);    /* верхний edge-light — приглушён */
  --glass-lo: rgba(255, 255, 255, 0.025);   /* нижний edge-light */
  --glass-highlight: var(--glass-hi);       /* алиас (старое имя) */
  --sheen: rgba(255, 255, 255, 0.022);      /* глянец-градиент — едва заметен */
  --hairline: rgba(255, 255, 255, 0.06);    /* внутренние линии */

  /* ---- Edge-light (спекуляр-рим) — в тёмной теме СИЛЬНО приглушён:
     мягкий тёмный кант без яркого белого глинта (цельное тёмное стекло). ---- */
  --rim-hi: rgba(255, 255, 255, 0.13);      /* верхне-левый подхват света */
  --rim-mid: rgba(255, 255, 255, 0.05);     /* нижне-правый */
  --rim-lo: rgba(255, 255, 255, 0.02);      /* «тёмная» часть канта */

  /* ---- Текст ---- */
  --text: #f3f5f9;
  --text-dim: #9aa3b5;
  --text-faint: #626b7e;

  /* ---- Бренд / семантика ---- */
  --accent: #4cc2ff;
  --accent-2: #2f9fe0;
  --accent-soft: rgba(76, 194, 255, 0.14);
  --accent-line: rgba(76, 194, 255, 0.42);
  --accent-grad: linear-gradient(135deg, #2f9fe0, #4cc2ff);
  --avatar-grad: linear-gradient(135deg, var(--accent-2), #7a5cff);
  --on-accent: #04222f;                     /* текст на акцентной заливке */

  --green: #34d39b;  --green-soft: rgba(52, 211, 155, 0.14);
  --red: #ff6b81;    --red-soft: rgba(255, 107, 129, 0.14);
  --red-line: rgba(255, 107, 129, 0.24);
  --gold: #ffd166;   --gold-soft: rgba(255, 209, 102, 0.12);
  --gold-line: rgba(255, 209, 102, 0.24);

  /* ---- Бренды маркетов (Задача 3) ---- Сплошные фирменные пилюли читаются в
     обеих темах: MRKT жёлто-чёрный, Portals сине-белый. fill = заливка пилюли,
     ink = деталь/текст на ней. Portals-синий слегка приглушён (#1a6fd0): белый
     текст на нём проходит WCAG AA (≈5:1) даже на мелких 12px-пилюлях. */
  --mrkt-fill: #f5b50a;     --mrkt-ink: #241a00;
  --portals-fill: #1a6fd0;  --portals-ink: #ffffff;

  /* ---- Свечение фона ---- В тёмной теме сильно приглушено: иначе разные
     панели ловят разный оттенок свечения по позиции → «разнотон». */
  --glow-a: rgba(76, 194, 255, 0.05);
  --glow-b: rgba(151, 99, 255, 0.05);
  --glow-1-c: #15324a;
  --glow-2-c: #261b42;
  --glow-op: .2;

  /* ---- Типографика ---- */
  --ff: -apple-system, system-ui, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --fs-display: 27px;   /* h1 страницы */
  --fs-title: 21px;     /* крупные значения / имена */
  --fs-lg: 17px;
  --fs-md: 15px;        /* базовый текст */
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;
  --lh: 1.45;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;

  /* ---- Отступы (сетка 4pt) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- Радиусы ---- */
  --r-xs: 9px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px;
  --r-bar: 28px;            /* плавающий таб-бар (пилюля) */
  --r-full: 999px;

  /* ---- Высота / тени (диффузный float, не Material-elevation) ---- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .20);
  --sh-2: 0 12px 40px -8px rgba(0, 0, 0, .22), 0 2px 8px -2px rgba(0, 0, 0, .12);
  --sh-3: 0 -10px 50px -8px rgba(0, 0, 0, .45);
  --sh-bar: 0 10px 32px -8px rgba(0, 0, 0, .40), 0 2px 8px -2px rgba(0, 0, 0, .22);
  --ring-accent: 0 6px 20px rgba(76, 194, 255, .28);

  /* ---- Размытие стекла ---- */
  --blur-card: 22px;
  --blur-bar: 28px;
  --blur-sheet: 34px;
  /* Токенизированные backdrop-filter: blur + saturate + brightness. В тёмной
     теме saturate/brightness снижены — меньше цветного подмеса от фона и
     свечения сквозь стекло → поверхности остаются единым near-black. */
  --bf-card: blur(var(--blur-card)) saturate(1.15) brightness(0.82);
  --bf-bar: blur(var(--blur-bar)) saturate(1.15) brightness(0.78);
  --bf-sheet: blur(var(--blur-sheet)) saturate(1.15) brightness(0.85);
  --bf-lozenge: blur(8px) saturate(1.15);   /* пилюля активного таба */

  /* ---- Каркас ---- */
  --tabbar-h: 56px;
  /* Telegram (Bot API 8.0+) инжектит свои inset-переменные на :root; env() —
     фолбэк для старых клиентов и отладки вне Telegram. --safe-t берёт
     content-safe-top (под шапкой Telegram). */
  --safe-b: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-t: var(--tg-content-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-l: var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px));
  --safe-r: var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0px));
  --maxw: 560px;

  /* ---- Анимация ---- */
  --ease: cubic-bezier(.22, .9, .32, 1);
  --dur-1: .12s; --dur-2: .2s; --dur-3: .32s;
}

/* ============ Светлая тема (Telegram colorScheme=light) ============ */
[data-theme="light"] {
  color-scheme: light;

  --bg-0: #e7ebf2;
  --bg-1: #f4f6fb;
  --bg-2: #ffffff;

  --glass: rgba(255, 255, 255, 0.62);
  --glass-2: rgba(255, 255, 255, 0.74);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --glass-bar: rgba(244, 246, 251, 0.80);

  --glass-border: rgba(15, 23, 42, 0.10);
  --glass-border-soft: rgba(15, 23, 42, 0.06);
  --glass-hi: rgba(255, 255, 255, 0.75);
  --glass-lo: rgba(15, 23, 42, 0.05);
  --sheen: rgba(255, 255, 255, 0.45);
  --hairline: rgba(15, 23, 42, 0.08);

  --rim-hi: rgba(255, 255, 255, 0.95);
  --rim-mid: rgba(255, 255, 255, 0.55);
  --rim-lo: rgba(15, 23, 42, 0.05);

  --bf-card: blur(var(--blur-card)) saturate(1.85) brightness(1.04);
  --bf-bar: blur(var(--blur-bar)) saturate(1.85) brightness(1.03);
  --bf-sheet: blur(var(--blur-sheet)) saturate(1.85) brightness(1.04);
  --bf-lozenge: blur(8px) saturate(1.6) brightness(1.03);

  --text: #0f1722;
  --text-dim: #586071;
  --text-faint: #6b7385;   /* ≥4.4:1 на --bg-1 — паритет с тёмной темой (AA) */

  --accent: #0a84ff;
  --accent-2: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.12);
  --accent-line: rgba(10, 132, 255, 0.38);
  --accent-grad: linear-gradient(135deg, #0a84ff, #3b9bff);
  --avatar-grad: linear-gradient(135deg, #0a84ff, #7a5cff);
  --on-accent: #ffffff;

  --green: #0b9d6f;  --green-soft: rgba(11, 157, 111, 0.13);
  --red: #e5484d;    --red-soft: rgba(229, 72, 77, 0.12);
  --red-line: rgba(229, 72, 77, 0.28);
  --gold: #b7791f;   --gold-soft: rgba(183, 121, 31, 0.12);
  --gold-line: rgba(183, 121, 31, 0.30);

  --glow-a: rgba(10, 132, 255, 0.10);
  --glow-b: rgba(151, 99, 255, 0.08);
  --glow-1-c: #bcd9ff;
  --glow-2-c: #e2d6ff;
  --glow-op: .55;

  --sh-1: 0 1px 2px rgba(15, 23, 42, .06);
  --sh-2: 0 12px 40px -8px rgba(15, 23, 42, .12), 0 2px 8px -2px rgba(15, 23, 42, .08);
  --sh-3: 0 -10px 50px -8px rgba(15, 23, 42, .16);
  --sh-bar: 0 10px 32px -10px rgba(15, 23, 42, .18), 0 2px 8px -3px rgba(15, 23, 42, .10);
  --ring-accent: 0 6px 20px rgba(10, 132, 255, .22);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Иконки (Lucide): наследуют цвет текста, выровнены по центру строки */
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: -0.15em; }
.ic svg { display: block; width: 100%; height: 100%; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  font-size: var(--fs-md);
  line-height: var(--lh);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;   /* SF: авто-переключение Display/Text по кеглю */
}

/* Табличные цифры: числа-герои не «прыгают» по ширине при live-обновлении. */
.tnum, .row-price, .mr-pr, .kv .v, .q-hero .big, .gp-pr,
.hero .v, .stat-grid .v, .preset .pv, .slots-bar .v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Единица «TON» по умолчанию отступает (число — герой). Акцентной она
   остаётся ТОЛЬКО у герой-флора деталки (.q-hero .big .ton — ниже). */
.ton { color: var(--text-faint); font-size: 11px; font-weight: var(--fw-semibold); text-transform: lowercase; }

/* Мягкое фоновое свечение под стеклом */
.bg-ambient {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1200px 520px at 80% -10%, var(--glow-a), transparent 60%),
    radial-gradient(900px 520px at 0% 110%, var(--glow-b), transparent 60%),
    var(--bg);
}
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--glow-op); }
.glow-1 { width: 340px; height: 340px; background: var(--glow-1-c); top: -120px; right: -80px; }
.glow-2 { width: 300px; height: 300px; background: var(--glow-2-c); bottom: -100px; left: -90px; }

/* ============ Стекло ============
   Правильный «liquid glass»: верхний глянец-градиент над полупрозрачной
   заливкой + размытие фона + 1px hairline + inset верхний хайлайт и
   нижний кант + мягкая тень. */
.glass-card {
  position: relative;
  /* Спекуляр-рим вместо плоской серой обводки: заливка/глянец на padding-box,
     градиентный кант (свет ловит верх-лево) на border-box сквозь border:transparent. */
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--sheen), transparent 45%) padding-box,
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(135deg, var(--rim-hi) 0%, var(--rim-lo) 38%,
                    var(--rim-lo) 62%, var(--rim-mid) 100%) border-box;
  -webkit-backdrop-filter: var(--bf-card);
  backdrop-filter: var(--bf-card);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 1px var(--glass-lo),   /* нижний edge-light (per-theme) */
    var(--sh-2);
}

/* Плавающий таб-бар (пилюля): рим по радиусу через inset-кольцо, см. #tabbar. */
.glass-bar {
  border: none;
  border-radius: var(--r-bar);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--sheen), transparent 55%),
    var(--glass-bar);
  -webkit-backdrop-filter: var(--bf-bar);
  backdrop-filter: var(--bf-bar);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    inset 0 0 0 1px var(--glass-border-soft),
    inset 0 -1px 2px 0 rgba(0, 0, 0, .16),
    var(--sh-bar);
}
[data-theme="light"] .glass-bar {
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    inset 0 0 0 1px var(--glass-border-soft),
    var(--sh-bar);
}

.glass-sheet {
  background:
    radial-gradient(120% 60% at 0% 0%, var(--sheen), transparent 40%),
    var(--glass-strong);
  -webkit-backdrop-filter: var(--bf-sheet);
  backdrop-filter: var(--bf-sheet);
  border: 1px solid var(--glass-border);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--sh-3);
}

/* ============ Кнопки ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 46px;
  border: 1px solid var(--glass-border);
  background: rgba(127, 127, 127, .10);
  color: var(--text);
  font: inherit; font-weight: var(--fw-semibold);
  border-radius: var(--r-md);
  padding: 11px 18px;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn-accent {
  background: var(--accent-grad); border-color: transparent;
  color: var(--on-accent); box-shadow: var(--ring-accent);
}
.btn-danger { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 8px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ============ Чипы / бейджи ============ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 9px 14px; border-radius: var(--r-full);
  background: rgba(127, 127, 127, .10);
  border: 1px solid var(--glass-border);
  color: var(--text-dim); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.chip:active { transform: scale(.96); }
.chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.badge-up { background: var(--green-soft); color: var(--green); }
.badge-down { background: var(--red-soft); color: var(--red); }
.badge-dim { background: rgba(127, 127, 127, .12); color: var(--text-dim); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-gold { background: var(--gold-soft); color: var(--gold); }

/* ============ Инпуты ============ */
.input {
  width: 100%; min-height: 48px; border: 1px solid var(--glass-border);
  background: rgba(127, 127, 127, .08); color: var(--text);
  border-radius: var(--r-md); padding: 13px 15px; font: inherit;
  outline: none; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-faint); }

/* ============ Скелетоны ============ */
@keyframes shimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
.skeleton {
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border-soft);
  background:
    linear-gradient(90deg, rgba(127, 127, 127, .05) 25%, rgba(127, 127, 127, .12) 50%, rgba(127, 127, 127, .05) 75%);
  background-size: 920px 100%;
  animation: shimmer 1.3s infinite linear;
}

/* ============ Переключатель ============
   Визуальный трек 50×30, но тач-таргет ≥44px (трек центрируем во flex). */
.switch { position: relative; width: 50px; min-height: 44px; flex: none; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { display: none; }
.switch i {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  width: 50px; height: 30px; border-radius: var(--r-full);
  background: rgba(127, 127, 127, .22); transition: background var(--dur-2) var(--ease); cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; transition: transform var(--dur-2) var(--ease);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(20px); }

/* ============ Сегменты ============ */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: rgba(127, 127, 127, .08); border: 1px solid var(--glass-border-soft); }
.seg button {
  flex: 1; min-height: 40px; border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: 7px 10px;
  border-radius: 12px; cursor: pointer; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.seg button.on { background: rgba(127, 127, 127, .14); color: var(--text); box-shadow: var(--sh-1); }

/* ============ Уважение к prefers-reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;        /* иначе .reveal держит opacity:0 до конца delay */
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}