/* ─────────────────────────────────────────────────────────────────────────
   Графит: база по образцу Hex VPN Franchise, характер — от FunPayRent.

   Владелец просил не копировать Hex дословно. Поэтому от Hex взяты только
   основа и читаемость: графитовый фон, плотные карточки, моно-подписи капсом,
   крупные цифры, плитки быстрых действий. От FunPayRent остаётся своё: блик
   стекла на карточках, мягкое свечение акцента за контентом, стеклянная
   нижняя панель с подписями у всех разделов и живая подсветка активного.

   Почему отдельным слоем, а не правкой app.css: в app.css — устройство
   компонентов (раскладка, состояния, анимации), здесь — внешний вид. Так
   видно, что именно поменялось, и сравнивать с образцом можно по одному файлу.

   Решения, снятые со скриншотов образца:
   * фон почти чёрный и плоский (#0a0a0b), без свечения — цифры читаются лучше;
   * карточки непрозрачные графитовые (#1b1b1e) со скруглением 28px;
   * вложенные плитки ТЕМНЕЕ карточки (#141517) — вглубь, а не наружу;
   * подписи — моноширинные капсом с разрядкой, цифры — крупные и жирные;
   * нижняя панель — плавающая «пилюля», у активного раздела видна подпись;
   * стекло осталось только на плавающих слоях: панель, шапка, шторки.
   Светлая тема не трогается — у неё своя палитра в app.css.
   ───────────────────────────────────────────────────────────────────────── */

:root:not([data-theme="light"]) {
  --bg: #0a0a0b;
  --bg-2: #0f0f11;
  --card: #1b1b1e;
  --card-line: #242428;
  --inset: #141517;
  --inset-line: #1f2023;
  --label: #7c7e86;
  --fg: #f4f5f7;
  --fg-2: #a3a6ae;
  --fg-3: #7c7e86;
  --fg-4: #55575e;
  --ok: #3ddc97;
  --ok-2: #2fce94;
  --ok-soft: rgba(61, 220, 151, 0.13);
  --warn: #f2b84b;
  --warn-soft: rgba(242, 184, 75, 0.12);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, 0.13);
}
:root[data-theme="light"] {
  --card: #ffffff;
  --card-line: #e6e8ee;
  --inset: #f4f5f8;
  --inset-line: #e9ebf0;
  --label: #8a8f9c;
  --ok-2: #1fb97d;
}

:root {
  --r-card: 28px;
  --r-tile: 22px;
  --r-btn: 18px;
  /* Акцент в тоне фона: подложка активной вкладки и мягких кнопок («Управление», «Наценки»). */
  --accent-tint: color-mix(in srgb, var(--accent) 16%, var(--bg));
  --ok-tint: color-mix(in srgb, var(--ok) 13%, var(--bg));
  --tabbar-float: 12px;
}

/* ─── фон: графит с тихим свечением акцента сверху (FunPayRent), без зерна ─── */
:root:not([data-theme="light"]) body::before { opacity: 0.55; }
:root:not([data-theme="light"]) body::after { display: none; }

/* ─── карточки ─── */
.glass {
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--card-line);
  border-radius: var(--r-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
}
/* Блик по верхней кромке — фирменная черта FunPayRent: карточка читается стеклом, а не серым листом. */
.glass::before { opacity: 0.55; }

/* Вложенная плитка темнее карточки: взгляд уходит вглубь, как в образце. */
.tile {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-tile);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 16px 16px 16px;
}
.tile::before { opacity: 0.45; }
.glass .tile, .glass .kv-tile { background: var(--inset); border-color: var(--inset-line); }

/* ─── подписи и цифры ─── */
.section__title,
.tile__label {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}
.tile__value {
  font-family: var(--font);
  font-size: clamp(26px, 7.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.tile__value small { font-family: var(--font); }
.section { margin-bottom: 22px; }
.section__head { margin: 0 4px 12px; }

/* Большой заголовок экрана — как «Боты» и «Рефералы» в образце. */
.page-title {
  margin: 6px 4px 18px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ─── кнопки ─── */
.btn { border-radius: var(--r-btn); }
.btn--primary {
  background: var(--accent);
  box-shadow: 0 10px 28px -12px var(--accent);
}
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
/* Мягкая кнопка: акцент на своей подложке — «Управление» в образце. */
.btn--soft {
  background: var(--accent-tint);
  color: color-mix(in srgb, var(--accent) 80%, #fff);
  border-color: transparent;
}
.btn--soft-ok {
  background: var(--ok-tint);
  color: var(--ok);
  border-color: transparent;
}
/* Зелёная главная кнопка денег — «Вывести деньги». */
.btn--money {
  background: linear-gradient(180deg, var(--ok), var(--ok-2));
  color: #06140e;
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 14px 34px -14px var(--ok);
}

/* ─── нижняя панель: плавающая «пилюля» ─── */
@media (max-width: 899px) {
  .tabbar {
    left: 14px;
    right: 14px;
    bottom: calc(var(--safe-b) + var(--tabbar-float));
    height: 66px;
    padding: 5px;
    border-radius: 28px;
    border: 1px solid var(--card-line);
    background: color-mix(in srgb, var(--bg-2) 72%, transparent);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
    display: flex;
    gap: 2px;
  }
  /* Подписи видны у всех разделов (FunPayRent): по одним значкам «Финансы» от «Статистики» не отличить. */
  .tab {
    flex: 1 1 0;
    gap: 3px;
    border-radius: 22px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--fg-3);
    transition: background 0.2s, color 0.2s;
  }
  .tab[aria-current="page"] {
    background: var(--accent-tint);
    color: color-mix(in srgb, var(--accent) 80%, #fff);
  }
  .tab[aria-current="page"] svg { color: currentColor; }
  .tab[aria-current="page"]::after { display: none; }
  .tab__badge { top: 5px; right: calc(50% - 20px); }
  /* Содержимое не прячется под плавающей панелью. */
  .main { padding-bottom: calc(var(--safe-b) + 110px); }
}

/* ─── шапка: плоская, в цвет фона ─── */
.header {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid transparent;
}

/* ─── строки списков внутри карточек ─── */
.rows > .row + .row { border-top-color: var(--inset-line); }

/* ─── главная карточка денег: зелёное стекло, как «Доступно к выводу» ─── */
.money-hero {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--ok) 9%, var(--card)), var(--card));
  overflow: hidden;
}
.money-hero__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ok) 70%, var(--fg-2));
}
.money-hero__value {
  margin-top: 14px;
  font-size: clamp(44px, 13vw, 60px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.money-hero__value .cur { color: var(--ok); margin-left: 6px; }
.money-hero__sub { margin-top: 10px; font-size: 13.5px; color: var(--fg-2); }
.money-hero__trend { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.money-hero__trend.up { color: var(--ok); }
.money-hero__trend.down { color: var(--bad); }

/* ─── быстрые действия: плитка со значком в цветном квадрате ─── */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}
@media (min-width: 900px) { .qa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qa {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--r-tile);
  border: 1px solid var(--card-line);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.qa:active { transform: scale(0.97); }
.qa:hover { border-color: color-mix(in srgb, var(--fg) 14%, transparent); }
.qa__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
/* Подпись не обрезается многоточием: «Настрой…» не говорит, куда ведёт кнопка. Длинное слово переносится
   на вторую строку, а на узком экране плитка ужимает значок и отступы, а не текст. */
.qa__text { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 420px) {
  .qa { gap: 11px; padding: 14px 12px; font-size: 15px; }
  .qa__icon { width: 40px; height: 40px; border-radius: 12px; }
}
.qa--blue .qa__icon { background: #1c2a39; color: #5aa6f0; }
.qa--green .qa__icon { background: #1d362f; color: #3ddc97; }
.qa--violet .qa__icon { background: #2e293f; color: #a88bf7; }
.qa--amber .qa__icon { background: #3a2f1e; color: #f2b84b; }
.qa--rose .qa__icon { background: #3a2229; color: #ff7a93; }
.qa--teal .qa__icon { background: #17333a; color: #4dd0e1; }
:root[data-theme="light"] .qa--blue .qa__icon { background: #e6f0fd; }
:root[data-theme="light"] .qa--green .qa__icon { background: #e3f7ee; color: #1fa874; }
:root[data-theme="light"] .qa--violet .qa__icon { background: #efeafd; }
:root[data-theme="light"] .qa--amber .qa__icon { background: #fdf2dd; color: #c98a10; }
:root[data-theme="light"] .qa--rose .qa__icon { background: #fde7ec; }
:root[data-theme="light"] .qa--teal .qa__icon { background: #e0f6f9; color: #1a9fb0; }

/* ─── раскрывающаяся секция: значок в круглой плитке, заголовок, шеврон ─── */
.fold > .row[aria-expanded] { padding: 18px 20px; }
.fold__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: color-mix(in srgb, var(--accent) 80%, #fff);
}
.fold > .row[aria-expanded] .row__title { font-size: 18px; font-weight: 700; }

/* ─── статус-пилюля «Активен» ─── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--bad { background: var(--bad-soft); color: var(--bad); }

/* ─── плашка «требует внимания» в тон образцу (янтарная, как «Заморожено») ─── */
.warn-plate {
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, var(--card));
  color: var(--fg-2);
  font-size: 14px;
}
.warn-plate b { color: var(--warn); }

/* ─── лента истории: значок в цветном квадрате, сумма справа ─── */
.hist {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-tile);
  border: 1px solid var(--card-line);
  background: var(--card);
}
.hist + .hist { margin-top: 10px; }
.hist__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; }
.hist--in .hist__icon { background: #1d3731; color: var(--ok); }
.hist--out .hist__icon { background: #392729; color: var(--bad); }
.hist__body { flex: 1; min-width: 0; }
.hist__title { font-weight: 700; font-size: 16px; }
.hist__sub { font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.hist__sum { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist--in .hist__sum { color: var(--ok); }
.hist--out .hist__sum { color: var(--bad); }
:root[data-theme="light"] .hist--in .hist__icon { background: #e3f7ee; }
:root[data-theme="light"] .hist--out .hist__icon { background: #fde8e8; }

/* ─── нижняя кнопка «Сохранить» вне Telegram (в Telegram — его MainButton) ─── */
.savebar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(var(--safe-b) + var(--tabbar-float) + 80px);
  z-index: 44;
  display: none;
}
.savebar--on { display: block; }
.savebar .btn { width: 100%; height: 54px; font-size: 16px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
@media (min-width: 900px) { .savebar { left: auto; right: 28px; bottom: 24px; width: 320px; } }

/* ─── легенда графиков: цветная точка и подпись ─── */
.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 2px 10px;
  font-size: 12.5px;
  color: var(--fg-2);
}
.chart__legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart__legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
/* В столбцах подсказку показывает касание колонки; точек на линии нет. */
.chart--columns .chart__hit { cursor: pointer; }

/* ─── горизонтальные полосы: тарифы и воронка ─── */
.bar-row + .bar-row { margin-top: 14px; }
.bar-row__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; font-weight: 700; }
.bar-row__track { margin-top: 8px; height: 10px; border-radius: 999px; background: var(--inset); overflow: hidden; }
.bar-row__track span { display: block; height: 100%; border-radius: inherit; background: var(--accent);
  transition: width 0.5s cubic-bezier(.2, .8, .2, 1); }
.bar-row__sub { margin-top: 5px; font-size: 12px; color: var(--fg-3); }
.tile__value.ok { color: var(--ok); }
.tile__value.bad { color: var(--bad); }

/* ─── таблица выручки и прибыли: прокрутка по горизонтали только у самой таблицы ─── */
.money-table-wrap { padding: 6px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.money-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13.5px; }
.money-table th {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  text-align: left;
  white-space: nowrap;
}
.money-table td { padding: 11px 14px; border-top: 1px solid var(--inset-line); white-space: nowrap; }
.money-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.money-table .dim { color: var(--fg-3); }
.money-table .ok { color: var(--ok); }
.money-table .bad { color: var(--bad); }
.money-table tfoot td { border-top: 1px solid var(--card-line); font-weight: 800; background: var(--inset); }
.money-table th:first-child, .money-table td:first-child { position: sticky; left: 0; background: var(--card); }
.money-table tfoot td:first-child { background: var(--inset); }

/* Значок группы настроек в круглой плитке — чуть меньше, чем у крупных секций. */
.fold > .row[data-group] { gap: 14px; }
.fold > .row[data-group] .fold__icon { width: 38px; height: 38px; }

/* Вкладки раздела — в одну ровную строку, значок над подписью (бриф: не переносить «Связь» на вторую строку). */
.seg--tabs { flex-wrap: nowrap; }
.seg--tabs .seg__opt {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 9px 4px 8px;
  font-size: 12px;
}
.seg--tabs .seg__opt svg { width: 18px; height: 18px; }
.seg--tabs .seg__opt span { white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }

/* Значок группы — ровный круг: общее правило первой ячейки строки задаёт ей свою ширину, здесь она своя. */
.fold > .row .fold__icon { width: 38px; min-width: 38px; height: 38px; flex: 0 0 38px; }

/* ─── строка тарифа: название и переключатель сверху, деньги плитками, три поля одной сеткой ─── */
.plan .row__body { width: 100%; }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan__money { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.plan__money > span:not(.plan__warn) { display: flex; flex-direction: column; gap: 1px; }
.plan__money small, .plan__field small {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label);
}
.plan__money b { font-size: 15px; }
.plan__money b.ok { color: var(--ok); }
.plan__money b.bad { color: var(--bad); }
.plan__warn {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-soft);
}
.plan__warn--bad { color: var(--bad); background: var(--bad-soft); }
.plan__edit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.plan__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.plan__field .input { width: 100%; min-width: 0; height: 44px; text-align: center; font-size: 16px; font-weight: 700;
  background: var(--inset); border-color: var(--inset-line); border-radius: 14px; }
.btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn-row .btn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.plan__head .plan__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; }
.plan__head .switch { flex: none; }
/* Две кнопки над каталогом помещаются целиком: узкий телефон ужимает отступы, а не подпись. */
.btn-row .btn { padding: 0 10px; gap: 6px; font-size: 14.5px; height: 46px; }