/* ============================================================
   Дизайн-система админки RUSSES VPN

   Ориентир — тёмная тема iOS и Telegram: нейтральные графитовые
   поверхности, тонкие светлые разделители, один насыщенный акцент,
   который используется редко и по делу. Прошлая версия тонировала
   в голубой вообще всё — фон, границы, приглушённый текст, иконки —
   и интерфейс выглядел дёшево.

   Плотность выше: у карточек меньше внутренние отступы, у сеток —
   промежутки, у таблиц — высота строки. Пустого места было слишком много.

   Имена классов сохранены: на них завязаны сорок с лишним файлов
   разделов, переименование стало бы отдельным проектом.
   ============================================================ */

:root{
  /* --- Поверхности. Нейтральный графит, без синевы. --- */
  --bg:#0B0B0D;
  --surface:#151517;
  --surface-2:#111113;
  --surface-3:#1E1E21;
  --surface-hover:#232326;
  --surface-active:#2A2A2E;

  /* Старые имена оставлены: на них ссылаются разделы. */
  --panel:var(--surface);
  --panel-2:var(--surface-2);

  /* --- Разделители. Волосяные, белым с малой непрозрачностью. --- */
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.13);
  --border-accent:rgba(10,132,255,.4);

  /* --- Текст. Шкала серых Apple. --- */
  --text:#F5F5F7;
  --text-dim:#A1A1A6;
  --muted:#6E6E73;

  /* --- Акцент. Системный синий iOS, применяется точечно. --- */
  --accent:#0A84FF;
  --accent-hover:#3D9BFF;
  --accent-press:#0066CC;
  --accent-soft:rgba(10,132,255,.15);
  --accent-glow:rgba(10,132,255,.3);

  /* --- Смысловые: системные цвета iOS. --- */
  --good:#30D158;
  --good-soft:rgba(48,209,88,.14);
  --warn:#FF9F0A;
  --warn-soft:rgba(255,159,10,.14);
  --bad:#FF453A;
  --bad-soft:rgba(255,69,58,.14);

  /* Палитра диаграмм. */
  --chart-1:#0A84FF;
  --chart-2:#30D158;
  --chart-3:#FF9F0A;
  --chart-4:#BF5AF2;
  --chart-5:#FF453A;
  --chart-6:#64D2FF;

  --header-h:56px;
  --sidebar-w:248px;
  --sidebar-w-collapsed:68px;

  --radius:14px;
  --radius-sm:10px;
  --radius-xs:7px;

  /* Тени почти нет: в тёмной теме слои разделяет светлота, а не тень. */
  --shadow:0 8px 28px rgba(0,0,0,.5);
  --shadow-soft:0 2px 10px rgba(0,0,0,.32);
  --shadow-accent:0 4px 14px rgba(10,132,255,.25);

  /* Одна кривая на весь интерфейс. */
  --ease:cubic-bezier(.32,.72,0,1);
  --fast:.15s var(--ease);
  --base:.22s var(--ease);

  --break-mobile:1000px;
}

@font-face{ font-family:Roboto-Regular; src:url(/fonts/Roboto-Regular.ttf); font-display:swap }
@font-face{ font-family:Roboto-Medium;  src:url(/fonts/Roboto-Medium.ttf);  font-display:swap }
@font-face{ font-family:Roboto-Bold;    src:url(/fonts/Roboto-Bold.ttf);    font-display:swap }

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  color:var(--text);
  font-family:Roboto-Regular;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
}

a{ color:inherit; text-decoration:none }

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

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

/* Скроллбары под тёмную тему — стандартные светлые полосы режут глаз. */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); background-clip:padding-box }

/* ===================== ШАПКА ===================== */

.app-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px 0 14px;
  background:rgba(21,21,23,.8);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
  z-index:60;
}

.header-left{ display:flex; align-items:center; gap:10px }
.header-right{ display:flex; align-items:center; gap:12px }

.logo-admin{ display:flex; align-items:center; margin-left:14px }
.logo-admin-link{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none }
.logo-admin-image img{ width:26px; margin-right:10px; transform:translateY(1px) }
/* Подпись логотипа набрана токенами палитры: раньше здесь были литералы
   #FFFFFF и #A8C7FF, и голубой хвост градиента тянул шапку в синеву.
   То же правило уже переписано в auth.css — держим их одинаковыми. */
.logo-admin-txt{
  font-family:Roboto-Medium;
  letter-spacing:.2px;
  background:linear-gradient(92deg, var(--text) 0%, var(--text-dim) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Отметка «вход отключён» — жёлтая, чтобы её нельзя было не заметить. */
.header-flag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--warn);
  /* Рамка производная от нового --warn: rgba(245,180,81,…) осталась
     от прежней янтарной палитры и с заливкой уже не совпадала. */
  background:var(--warn-soft); border:1px solid rgba(255,159,10,.26);
  padding:6px 12px; border-radius:999px;
}

.header-user{ display:inline-flex; align-items:center; gap:9px }
.header-user__avatar{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff; font-family:Roboto-Medium; font-size:13px;
  box-shadow:var(--shadow-accent);
}
.header-user__name{ font-size:13.5px; color:var(--text-dim) }
@media (max-width:600px){ .header-user__name{ display:none } }

/* Пункт со свёрнутым, но активным внутри подменю. */
.menu-item.has-active:not(.open) > a{ color:var(--text) }
.menu-item.has-active:not(.open) .menu-icon{ color:var(--accent) }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700; padding:8px 10px; border-radius:var(--radius-sm) }
.brand .logo{
  width:28px; height:28px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff; border-radius:var(--radius-xs); font-size:16px;
  box-shadow:var(--shadow-accent);
}

/* ===================== КНОПКИ ===================== */

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--surface-3); color:var(--text);
  border:1px solid var(--border);
  padding:10px 15px; border-radius:12px;
  transition:background var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast);
  box-shadow:var(--shadow-soft);
  font-family:inherit; font-size:inherit;
}
.btn:hover{ background:var(--surface-hover); border-color:var(--border-strong); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.985) }

.btn-ghost{ background:transparent; border:1px solid var(--border-strong); box-shadow:none }
.btn-ghost:hover{ background:var(--surface-3) }

/* Квадратная кнопка под одну иконку — в шапке подписи только мешают. */
.btn-icon{ padding:0; width:42px; height:42px; justify-content:center; gap:0 }
.btn-icon i{ font-size:16px }

.btn-primary{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 16px; border-radius:12px; border:1px solid transparent;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff; font-family:Roboto-Medium;
  box-shadow:var(--shadow-accent);
  transition:filter var(--fast), transform var(--fast);
}
.btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.btn-primary:active{ transform:translateY(0) scale(.985) }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; filter:none }

/* Волна от точки клика. Ставится скриптом Ripple на .btn/.btn-primary
   и на пункты меню. */
.ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.30); pointer-events:none;
  animation:ripple .55s var(--ease) forwards;
}
@keyframes ripple{ to{ transform:scale(2.6); opacity:0 } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ===================== САЙДБАР ===================== */

.sidebar{
  position:fixed; inset:var(--header-h) auto 0 0;
  width:var(--sidebar-w);
  background:var(--surface-2);
  border-right:1px solid var(--border);
  padding:14px 12px 24px; overflow:auto; z-index:55;
  transition:width var(--base), transform var(--base);
}
.sidebar.collapsed{ width:var(--sidebar-w-collapsed) }

.menu{ list-style:none; margin:0; padding:6px 4px; display:flex; flex-direction:column; gap:4px }

.group-title{
  color:var(--muted); font-size:11px; text-transform:uppercase;
  padding:14px 10px 6px 12px; letter-spacing:.14em;
}

.menu-item > a{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:12px; color:var(--text-dim);
  border:1px solid transparent;
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.menu-item > a:hover{ background:var(--surface-hover); color:var(--text) }

/* Заливка ровная. Здесь стоял linear-gradient из --accent-soft в самого
   себя — остаток от прежней версии, где концы градиента были разными. */
.menu-item.active > a{
  background:var(--accent-soft);
  border-color:var(--border-accent);
  color:#fff;
}
/* Полоска слева у активного пункта — заметнее, чем просто фон. */
.menu-item.active > a::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px;
  width:3px; border-radius:0 3px 3px 0;
  background:var(--accent); box-shadow:0 0 12px var(--accent-glow);
}

.menu-icon{
  width:24px; height:24px; display:grid; place-items:center;
  font-size:15px; color:var(--muted);
  transition:color var(--fast), transform var(--fast);
  flex:none;
}
.menu-item > a:hover .menu-icon{ color:var(--accent) }
.menu-item.active > a .menu-icon{ color:var(--accent) }

.menu-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14.5px }
.menu-caret{ margin-left:auto; color:var(--muted); font-size:12px; transition:transform var(--base) }
.menu-item.open > a .menu-caret{ transform:rotate(90deg) }

/* Показ/скрытие, а не анимация высоты.
   Пробовали grid-template-rows:0fr — он задаёт высоту только ПЕРВОЙ
   строке, остальные пункты уходят в неявные строки размера auto, и
   подменю не закрывалось вовсе. Через max-height закрывалось, но
   поведение зависело от порядка подключения файлов разделов. Здесь
   состояние определяется одним свойством, ошибиться негде. */
.submenu{
  list-style:none; margin:0; padding:2px 0 6px 22px;
  display:none;
}
.menu-item.open > .submenu{
  display:block;
  animation:submenu-in .2s var(--ease) both;
}
@keyframes submenu-in{
  from{ opacity:0; transform:translateY(-4px) }
  to{ opacity:1; transform:none }
}

.submenu a{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px;
  color:var(--muted); font-size:13.5px; padding:8px 12px;
  border-radius:var(--radius-xs); margin-top:3px;
  transition:background var(--fast), color var(--fast);
}
.submenu a i{ font-size:6px; opacity:.7; width:10px; text-align:center }
.submenu a:hover{ background:var(--surface-hover); color:var(--text) }
.submenu li.active > a{ color:#fff; background:var(--accent-soft) }
.submenu li.active > a i{ color:var(--accent); opacity:1 }

/* Счётчик у пункта меню.
   Единственное красное пятно в сайдбаре — и это правильно: он появляется
   только когда деньги приняты платёжкой и не дошли до человека. Если
   когда-нибудь им пометят что-то менее срочное, красный придётся забрать. */
.menu-badge{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px;
  background:var(--bad); color:#fff;
  font-size:11.5px; font-family:Roboto-Medium, Arial, sans-serif;
  font-variant-numeric:tabular-nums;
  flex:none;
}
/* У пункта со стрелкой margin-left:auto уже занят кареткой — счётчик
   встаёт перед ней и отодвигается фиксированным зазором. */
.menu-item.has-sub > a .menu-badge{ margin-left:auto; margin-right:8px }
.submenu a .menu-badge{ margin-left:auto }

.sidebar.collapsed .menu-label,
.sidebar.collapsed .menu-caret{ display:none }
.sidebar.collapsed .submenu{ display:none !important }
.sidebar.collapsed .group-title{ display:none }
.sidebar.collapsed .menu-item > a{ justify-content:center; padding:12px 0 }
/* В узком сайдбаре подписи нет, и счётчик садится точкой на угол иконки. */
.sidebar.collapsed .menu-badge{
  position:absolute; top:6px; right:10px;
  min-width:16px; height:16px; padding:0 4px;
  margin:0; font-size:10px;
}

/* ===================== КОНТЕНТ ===================== */

.content{
  padding:18px 20px 36px; min-height:100vh;
  margin-top:var(--header-h);
  margin-left:var(--sidebar-w);
  transition:margin-left var(--base);
}
.sidebar.collapsed ~ .content{ margin-left:var(--sidebar-w-collapsed) }

@media (max-width: 1000px){
  .sidebar{ width:var(--sidebar-w); transform:translateX(-100%) }
  .sidebar.open{ transform:translateX(0); box-shadow:0 24px 70px rgba(0,0,0,.6) }
  .content{ margin-left:0; padding:18px 14px 40px }
  .sidebar.collapsed ~ .content{ margin-left:0 }
  .sidebar:not(.open) .group-title{ display:none }
}

/* Затемнение нейтральное: прежний rgba(4,8,16,…) отдавал синевой,
   которой в палитре больше нет. Так же уже сделано в confirm-dialog.css,
   packs.css и bonuses.css. */
.overlay{
  position:fixed; inset:var(--header-h) 0 0 0;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity var(--base); z-index:54;
}
.overlay.show{ opacity:1; pointer-events:auto }
.no-scroll{ overflow:hidden }

/* ===================== СЕТКА ===================== */

.grid{ display:grid; gap:14px }
.grid.cols-4{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
.grid.cols-3{ grid-template-columns:2fr 1.2fr 1.2fr }
@media (max-width:1200px){ .grid.cols-3{ grid-template-columns:1fr } .grid.cols-4{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:680px){ .grid.cols-4{ grid-template-columns:1fr } }

/* ===================== КАРТОЧКИ ===================== */

.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:border-color var(--base), transform var(--base), box-shadow var(--base);
}
.card:hover{ border-color:var(--border-strong) }


.card .pad{ padding:16px }
.pad{ padding:16px }

.card-header{
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:Roboto-Medium;
}

/* ===================== KPI ===================== */

.kpi{ display:flex; flex-direction:column; gap:9px; padding:16px; border-radius:var(--radius) }
.kpi .value{ font-size:28px; font-family:Roboto-Medium; letter-spacing:.2px; line-height:1.15 }
.kpi .label{ color:var(--muted); font-size:13.5px }
.kpi .pill{
  align-self:flex-start; padding:5px 11px; border-radius:999px; font-size:12px;
  color:var(--text-dim); background:var(--surface-3); border:1px solid var(--border);
}
.kpi .pill i{ margin-right:5px; color:var(--accent) }

/* ===================== ГРАФИКИ ===================== */

.chart-box{ position:relative; height:280px }
.chart-box canvas{ position:absolute; inset:0; width:100% !important; height:100% !important }
.chart-square{ position:relative; width:70%; aspect-ratio:1/1; margin:0 auto }
.chart-square canvas{ position:absolute; inset:0; width:100% !important; height:100% !important }
@media (max-width:680px){ .chart-box{ height:230px } }

/* ===================== ПОЛОСЫ ===================== */

/* Строка-полоса: название слева, полоса и число справа.
 *
 * .bar-label был шириной 130px, и «VIP Classic · 30 дн. · 10 устр.»
 * переносился на три строки — строка вырастала с 35 до 68 пикселей, а
 * карточка из двенадцати таких строк уезжала за тысячу. Теперь имя
 * занимает всё свободное место и держится в одну строку, а полоса и
 * число стоят фиксированными колонками справа. */
.bar-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 150px minmax(92px, auto);
  align-items:center; gap:14px; padding:8px 2px;
}
.bar-label{
  min-width:0; color:var(--text-dim); font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar-track{
  height:8px; background:var(--surface-2); border-radius:999px;
  position:relative; overflow:hidden; border:1px solid var(--border);
}
/* На узком экране полоса уходит под подпись: три колонки в 320px не живут. */
@media (max-width:560px){
  .bar-row{
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:'label value' 'track track';
    gap:6px 12px;
  }
  .bar-label{ grid-area:label }
  .bar-val{ grid-area:value }
  .bar-track{ grid-area:track }
}

/* Список полос внутри карточки: высота ограничена, чтобы соседние
   карточки в одном ряду не расходились на сотни пикселей из-за разного
   числа строк. Переполнение прокручивается внутри карточки. */
.bar-list{ max-height:288px; overflow-y:auto; overscroll-behavior:contain }
/* Заливка ровная. Литерал #7FB4FF в хвосте градиента был вне палитры,
   а ореол стоял в каждой строке списка нод и превращал её в гирлянду. */
.bar-fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--accent);
  border-radius:inherit;
  transition:width .9s var(--ease);
}
.bar-val{
  text-align:right; color:var(--text-dim);
  font-variant-numeric:tabular-nums; font-size:13.5px; white-space:nowrap;
}

.muted{ color:var(--muted) }
.sep{ height:10px }
.chip{
  font-size:12px; padding:6px 11px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-3); color:var(--text-dim);
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
a.chip:hover{ background:var(--accent-soft); color:#fff; border-color:var(--border-accent) }

/* ===================== ХЛЕБНЫЕ КРОШКИ И ПАНЕЛЬ ===================== */

.header-nav-url-row{
  font-size:14px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.cont-urls{ display:flex; align-items:center }
.nav-page-chevron{ font-size:10px; margin:0 8px; color:var(--muted) }
.nav-page-url{ color:var(--muted); transition:color var(--fast) }
.nav-page-url:hover{ color:var(--text-dim) }
.active-page-nav{ color:var(--text) }

.wrap-content-page{ margin-top:26px }

.btn-top-right{
  position:relative; overflow:hidden;
  font-family:Roboto-Medium; padding:11px 16px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface-3); color:var(--text-dim);
  margin-bottom:7px; cursor:pointer; text-align:center;
  transition:background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.btn-top-right:hover{
  background:var(--accent-soft); color:#fff;
  border-color:var(--border-accent); transform:translateY(-1px);
}
.btn-top-right i{ margin-right:7px }

/* ===================== ПЕРИОДЫ И ВКЛАДКИ ===================== */

.select-period-sales-row{ display:flex; align-items:center; margin-top:20px; flex-wrap:wrap; gap:8px }
.row-result-total-type{ display:flex; flex-wrap:wrap; align-items:center; margin-top:10px; justify-content:center; gap:8px }

.tab-result-total-type{
  font-size:12px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-3); color:var(--text-dim);
}
.tab-result-total-type i{ margin-right:6px }

.btn-select-period{
  position:relative; overflow:hidden;
  font-size:13px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-3); color:var(--text-dim);
  cursor:pointer; font-family:inherit;
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.btn-select-period:hover{ background:var(--surface-hover); color:var(--text) }
.active-select-period{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff; border-color:transparent; box-shadow:var(--shadow-accent);
}
.btn-select-period i{ margin-right:5px }

.tab-btns-main,
.tab-stat-index,
.btn-change-currency{
  position:relative; overflow:hidden;
  background:var(--surface-3); border:1px solid var(--border);
  padding:9px 14px; border-radius:12px; cursor:pointer; font-size:14px;
  color:var(--text-dim);
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.tab-btns-main:hover,
.tab-stat-index:hover,
.btn-change-currency:hover{ background:var(--surface-hover); color:var(--text) }
.tab-btns-main{ margin-right:10px; margin-bottom:10px }
.tab-btns-main i{ margin-right:8px }
.tab-stat-index{ display:inline-block; margin-right:6px }
.btn-change-currency{ margin-bottom:10px }

.activeTabMainStat,
.active-tab-stats,
.active-btn-currency{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff; border-color:transparent; box-shadow:var(--shadow-accent);
}

.row-btns-main{ display:flex; align-items:center; margin-bottom:8px; flex-wrap:wrap; justify-content:space-between }
.tabs-top-stats{ display:flex; align-items:center; flex-wrap:wrap }
.tabs-top-currency{ display:flex; align-items:center; gap:10px }
.course_currency{ font-size:13px; color:var(--muted) }

/* Подвал карточки отличается от неё светлотой поверхности.
   Прежний литерал rgba(7,11,20,…) был синевато-чёрным и на графите
   читался как отдельный оттенок, а не как соседний слой. */
.desp-pad{
  font-size:13px; padding:13px 16px;
  background:var(--surface-2);
  border-top:1px solid var(--border);
  border-radius:0 0 var(--radius) var(--radius);
  color:var(--muted);
}
.count-people{ color:var(--muted); font-size:13px }

.btn-check-tarifs{
  position:relative; overflow:hidden;
  width:95%; margin:0 auto 8px; font-size:13px; padding:13px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface-3); color:var(--text-dim);
  cursor:pointer; text-align:center;
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.btn-check-tarifs:hover{ background:var(--accent-soft); color:#fff; border-color:var(--border-accent) }
.btn-check-tarifs i{ margin-left:6px }

.active-sub{ background:var(--surface-active); border-color:var(--border-strong) }
.active-sub .fa-solid{ color:var(--accent) }

@media(max-width: 500px){
  .tab-result-total-type,
  .btn-select-period,
  .tab-btns-main{ width:100% }
}

/* ===================== ТАБЛИЦЫ ТАРИФОВ ===================== */

.tariffs-table-wrap{
  width:100%; margin:20px auto 0; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden;
}
.tariffs-table-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch }
.tariffs-table{
  width:100%; min-width:1000px; border-collapse:collapse; table-layout:auto;
  font-size:14px; color:var(--text);
}
.tariffs-table thead{ background:rgba(255,255,255,.025) }
.tariffs-table th{
  font-family:Roboto-Medium; font-size:12.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted);
}
.tariffs-table th,
.tariffs-table td{
  padding:12px 14px; text-align:center; vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tariffs-table tbody tr{ background:transparent; transition:background var(--fast) }
.tariffs-table tbody tr:hover{ background:rgba(255,255,255,.03) }
.tariffs-table tbody tr:not(:last-child){ border-bottom:1px solid var(--border) }

.tariffs-grip{ cursor:grab; opacity:.6; transition:opacity var(--fast), color var(--fast) }
.tariffs-grip:hover{ opacity:1; color:var(--accent) }

.td-popular,
.td-status{ overflow:visible; white-space:nowrap }

.status-cell{ display:inline-flex; align-items:center; gap:12px; cursor:pointer }
.status-text{ font-family:Roboto-Medium; color:var(--bad) }
.status-text.is-active{ color:var(--good) }

.toggle-cell{ display:inline-flex; align-items:center; justify-content:center }

/* ===================== ПЕРЕКЛЮЧАТЕЛЬ ===================== */

/* Дорожка выключенного тумблера — заливка и настоящая рамка. Раньше
   граница рисовалась inset-тенью (box-shadow:inset 0 0 0 1px …), из-за
   чего её нельзя было ни перекрасить по наведению отдельно от свечения,
   ни выключить, не потеряв тень. Тумблер карточки пользователя
   (user-edit.css) уже переведён на border — теперь совпадают оба.
   Цвет выключенной дорожки был литералом #233150: синевато-серый,
   в новой палитре такого оттенка нет. */
.ios-toggle{
  --w:46px; --h:26px; --on:var(--good); --off:var(--surface-active);
  position:relative; display:inline-block;
  width:var(--w); height:var(--h); min-width:var(--w);
}
.ios-toggle__input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.ios-toggle__slider{
  position:absolute; inset:0; background:var(--off);
  border:1px solid var(--border);
  border-radius:var(--h); box-shadow:none;
  transition:background var(--base), border-color var(--base);
}
/* Зазор считается от внутреннего края рамки, поэтому 1px, а не 3px:
   иначе снизу и справа кружок прижимался к дорожке ближе, чем сверху. */
.ios-toggle__slider::after{
  content:''; position:absolute; top:1px; left:1px;
  width:calc(var(--h) - 4px); height:calc(var(--h) - 4px);
  border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.45);
  transition:transform var(--base);
}
/* Ореол снят: rgba(52,211,153,…) остался от прежней зелёной палитры и
   с новым --good не совпадал, а включённых тумблеров в таблице тарифов
   бывает десяток подряд. */
.ios-toggle__input:checked + .ios-toggle__slider{
  background:var(--on); border-color:transparent;
}
.ios-toggle__input:checked + .ios-toggle__slider::after{ transform:translateX(calc(var(--w) - var(--h))) }
/* Отклик на наведение был только у переопределённого тумблера карточки
   пользователя (user-edit.css), а базовый — на тарифах, биллинге, платёжках
   и интервалах — под курсором не отзывался. Выключенное состояние
   подсвечиваем тем же кольцом, что и поля ввода (--border-strong);
   включённое не трогаем. */
.ios-toggle:hover .ios-toggle__input:not(:checked) + .ios-toggle__slider{
  border-color:var(--border-strong);
}
.ios-toggle__input:focus-visible + .ios-toggle__slider{ outline:2px solid var(--accent); outline-offset:2px }

/* ===================== ПОЛЯ ВВОДА ===================== */

.inp-adm-style{
  border:1px solid var(--border); background:var(--surface-3); width:70px;
  outline:none; padding:11px 13px; border-radius:12px; color:var(--text); font-size:15px;
  font-family:inherit;
  transition:border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.inp-adm-style:hover{ border-color:var(--border-strong) }
.inp-adm-style:focus{
  border-color:var(--border-accent); background:var(--surface-hover);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.inp-adm-style::placeholder{ color:var(--muted) }

.inp-tarifs{ text-align:center }
.form-add-inp{ width:250px }
.form-search-inp{ width:250px }
.inp-tarifs-name{ width:90px; text-align:center }

.filters-tables{ display:flex; align-items:center; gap:10px }

.btn-go-search{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  height:44px; min-width:48px; padding:0 16px; text-align:center;
  border-radius:12px; cursor:pointer; border:none; color:#fff;
  box-shadow:var(--shadow-accent);
  transition:filter var(--fast), transform var(--fast);
}
.btn-go-search:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.btn-go-search:active{ transform:translateY(0) scale(.97) }

.filter-type-search{
  border:1px solid var(--border); background:var(--surface-3); width:170px;
  outline:none; padding:11px 13px; border-radius:12px; color:var(--text-dim); font-size:15px;
  font-family:inherit; cursor:pointer;
  transition:border-color var(--fast), background var(--fast);
}
.filter-type-search:hover{ border-color:var(--border-strong) }
.filter-type-search:focus{ border-color:var(--border-accent); box-shadow:0 0 0 3px var(--accent-soft) }
.filter-type-search option{ background:var(--surface); color:var(--text) }

.btn-save-info-undo-table{
  position:relative; overflow:hidden;
  width:100%; margin:16px auto 8px; font-size:15px; padding:15px;
  border-radius:12px; color:#fff; cursor:pointer; text-align:center;
  font-family:Roboto-Medium; border:none;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  box-shadow:var(--shadow-accent);
  transition:filter var(--fast), transform var(--fast);
}
.btn-save-info-undo-table:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.btn-save-info-undo-table:disabled{ opacity:.55; cursor:not-allowed; transform:none }

.delete-row-tarif{
  background:var(--bad-soft); color:var(--bad); border:1px solid transparent;
  border-radius:var(--radius-xs); padding:10px 20px; cursor:pointer;
  transition:background var(--fast), border-color var(--fast);
}
/* Литералы rgba(244,112,127,…) остались от прежней палитры и к новому
   --bad отношения не имели. Наведение — та же заливка плюс волосяная
   рамка, как у одноимённой кнопки в bonuses.css. */
.delete-row-tarif:hover{ background:var(--bad-soft); border-color:var(--border-strong) }

.row-select-type-stats{ padding:16px }

/* ===================== ПОЯВЛЕНИЕ ===================== */

/* Лёгкий въезд контента: страницы серверные, без него переход выглядит
   как мгновенная подмена картинки. */
.content > *{ animation:rise .34s var(--ease) both }
@keyframes rise{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }