/* =============================================================
   INDOLEADS CABINET — дизайн-кит
   Заменяет тему INSPINIA целиком. Bootstrap/DataTables не нужны.

   Источники: _header.html (канон шапки),
              indoleads-offers-mockup-share.html (эталон страницы).
   Акцент сведён к бренду #2449ff — #337ab7 был синим INSPINIA.
   ============================================================= */

:root{
  --blue:#2449ff;
  --blue-dark:#1c3ad6;
  --blue-soft:#eef1ff;
  --blue-line:#c9d3ff;

  --black:#16181c;
  --gold:#f5b301;
  --money:#09955a;

  --text:#33383d;
  --ink:#1a1d23;
  --muted:#8a93a0;
  --muted-2:#8b8f9b;
  --line:#e3e7ec;
  --line-soft:#eef1f4;
  --bg:#f4f6f8;
  --bg-strip:#fafbfc;

  --r:6px; --r-sm:5px; --r-xs:4px;
  --wrap:1360px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;color:var(--text);background:var(--bg);line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}

/* одна обёртка на шапку и контент — иначе разъедется левый край */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* =============================================================
   1. ШАПКА — канон, меняются только .on и данные
   ============================================================= */
.hd{background:#fff}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:12px;padding-bottom:12px}
.hd__brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.hd__brand:hover{text-decoration:none}
.hd__mark{width:34px;height:34px;border-radius:9px;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:17px;flex:none}
.hd__word{font-size:21px;font-weight:700;color:var(--blue);letter-spacing:-.6px;line-height:1}
.hd__word small{display:block;font-size:8.5px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:2px}

.hd__right{display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--muted-2);white-space:nowrap}
.hd__sep{width:1px;height:22px;background:var(--line)}
.hd__lvl{color:var(--ink);font-weight:500}
.hd__lvl i{color:var(--gold);font-style:normal}
.hd__bal b{color:var(--money);font-weight:600}
.hd__cur{display:flex;align-items:center;gap:5px;color:var(--ink);font-weight:600}
.hd__ico{width:26px;height:26px;border-radius:999px;border:1px solid var(--line);display:grid;
  place-items:center;font-size:12px;color:var(--muted-2);cursor:pointer;background:#fff;position:relative}
.hd__ico:hover{border-color:var(--blue);color:var(--blue)}
.hd__ico b{position:absolute;top:-4px;right:-4px;background:var(--blue);color:#fff;font-size:8.5px;
  min-width:14px;height:14px;border-radius:999px;display:grid;place-items:center;padding:0 3px}
.hd__out{display:flex;align-items:center;gap:6px;color:var(--muted-2)}
.hd__out:hover{color:var(--ink);text-decoration:none}

.hd-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.hd-nav__in{display:flex;height:44px;align-items:stretch}
.hd-nav>.wrap{display:flex;height:44px;align-items:stretch}
.hd-nav a{display:flex;align-items:center;gap:6px;padding:0 16px;font-size:14.5px;font-weight:500;
  color:var(--ink);border-bottom:2px solid transparent;transition:.15s;position:relative}
.hd-nav a:first-child{padding-left:0}
.hd-nav a:hover{color:var(--blue);text-decoration:none}
.hd-nav a.on{color:var(--blue);border-bottom-color:var(--blue)}
.hd-nav a em{font-style:normal;font-size:9px;color:var(--muted-2)}

/* выпадающее подменю */
.hd-nav li{list-style:none;position:relative;display:flex}
.hd-nav ul.sub{position:absolute;left:0;top:44px;background:#fff;border:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r);box-shadow:0 10px 26px rgba(20,30,45,.12);min-width:250px;
  padding:6px;margin:0;display:none;z-index:40}
.hd-nav li:hover ul.sub{display:block}
.hd-nav ul.sub a{display:block;padding:7px 11px;font-size:13px;font-weight:400;border:none;
  border-radius:var(--r-xs);color:var(--text)}
.hd-nav ul.sub a:hover{background:var(--bg);color:var(--blue)}
.hd-nav ul.sub a.on{background:var(--blue-soft);color:var(--blue)}

.hd-mgr{background:var(--bg-strip);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted-2)}
.hd-mgr__in{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-top:9px;padding-bottom:9px}
.hd-mgr b{color:var(--ink);font-weight:600}
.hd-mgr a{color:var(--blue)}
.hd-mgr .dot{color:var(--muted-2)}

/* =============================================================
   2. КАРКАС СТРАНИЦЫ
   ============================================================= */
.page{padding:18px 0 80px}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
h1{font-size:22px;font-weight:400;margin:0 0 3px;color:var(--ink)}
.crumbs{font-size:11.5px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.phead .acts{display:flex;gap:8px;align-items:center}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.card+.card{margin-top:20px}
.grid>.card+.card,.grid>div>.card:first-child{margin-top:0}  /* в гриде отступ даёт gap */
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 20px;border-bottom:1px solid var(--line)}
.card-hd h2{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.card-bd{padding:20px}
.results{box-shadow:0 1px 3px rgba(30,45,65,.06)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.spacer{flex:1}
.section-t{display:flex;align-items:center;gap:10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.7px;color:#a3abb5;font-weight:700;margin:0 0 9px}
.section-t:after{content:"";flex:1;height:1px;background:var(--line)}

/* =============================================================
   3. КНОПКИ
   ============================================================= */
.btn{height:36px;padding:0 18px;border-radius:var(--r-xs);border:1px solid transparent;
  font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:#fff;color:var(--text);white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600}
.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{border-color:#d5dbe2;color:#5b6572}
.btn-ghost:hover{border-color:#b9c3ce}
.btn-danger{border-color:#eed2d9;background:#f9ebee;color:#a06474}
.btn-link{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12.5px;padding:0 4px;height:auto}
.btn-link:hover{color:var(--blue);text-decoration:underline}
.btn-sm{height:30px;padding:0 12px;font-size:12px}
/* мелкое действие в строке таблицы */
.act{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;min-width:74px;
  padding:0 11px;border:1px solid #d5dbe2;border-radius:var(--r-xs);background:#fff;
  font-size:12px;color:#5b6572;cursor:pointer}
.act:hover{border-color:#b9c3ce;text-decoration:none}
.act.on{border-color:var(--blue-line);background:var(--blue-soft);color:var(--blue-dark)}

/* =============================================================
   4. ФОРМЫ И ФИЛЬТРЫ
   ============================================================= */
.filters{padding:18px 20px 14px}
.frow{display:flex;gap:14px;align-items:flex-start;margin-top:16px;flex-wrap:wrap}
.frow:first-child{margin-top:0}
.f{flex:1 1 190px;min-width:0}
.f.w2{flex:2 1 320px}
.f.full{flex:1 1 100%}
.f label,.flabel{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin-bottom:5px;font-weight:700}
.f input[type=text],.f input[type=url],.f input[type=email],.f input[type=password],
.f input[type=number],.f input[type=date],.f select,.f textarea{
  width:100%;height:36px;border:1px solid #d5dbe2;border-radius:var(--r-xs);padding:0 10px;
  font-size:13px;color:var(--text);background:#fff;outline:none;font-family:inherit}
.f textarea{height:auto;min-height:84px;padding:8px 10px;line-height:1.5;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,73,255,.12)}
.f input:disabled,.f select:disabled{background:#f7f8fa;color:var(--muted)}
.hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}
.req{color:#c76a7c}

.search-wrap{position:relative}
.search-wrap input{padding-left:33px !important;height:40px !important;font-size:13.5px}
.search-wrap svg{position:absolute;left:11px;top:12px;opacity:.45}

/* поле «скопировать» — токен, трек-ссылка, сгенерированный код */
.copyfield{display:flex;gap:0;align-items:stretch}
.copyfield input{border-radius:var(--r-xs) 0 0 var(--r-xs) !important;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px !important}
.copyfield .btn{border-radius:0 var(--r-xs) var(--r-xs) 0;border-color:#d5dbe2;color:#5b6572;height:36px}
pre.code{background:#f7f8fa;border:1px solid var(--line);border-radius:var(--r-xs);padding:12px 14px;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;overflow-x:auto;margin:0;color:#3d444d;line-height:1.6}

/* сегментированный переключатель */
.seg{display:flex;margin-top:7px;border:1px solid #d5dbe2;border-radius:var(--r-xs);overflow:hidden;background:#fff}
.seg button{flex:1;border:none;background:#fff;padding:7px 6px;font-size:11.5px;color:#6b7480;
  cursor:pointer;border-right:1px solid #e6eaef;white-space:nowrap}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--bg)}
.seg button.on{background:var(--blue-soft);color:var(--blue-dark);font-weight:700;box-shadow:inset 0 -2px 0 var(--blue-line)}
.seg-hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4;min-height:30px}

/* чип-тумблер */
.toggles{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;align-items:center;gap:6px;border:1px solid #d9dfe6;border-radius:var(--r-xs);
  padding:6px 12px;font-size:12px;cursor:pointer;background:#fff;color:#5b6572;user-select:none}
.chk:hover{border-color:#b9c3ce}
.chk input{margin:0;accent-color:var(--blue)}
.chk.on{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-dark)}
.chk.sub{margin-top:7px;width:100%;justify-content:flex-start}

.fdivider{height:1px;background:var(--line);margin:18px 0 14px}
.factions{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* активные фильтры */
.activefilters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:11px 20px;
  border-top:1px solid var(--line);background:#fbfcfd;font-size:12px;color:var(--muted);
  border-radius:0 0 var(--r) var(--r)}
.pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #d5dbe2;
  border-radius:var(--r-xs);padding:4px 8px 4px 10px;color:#4b5563;font-size:11.5px}
.pill .x{color:#a6aeb8;cursor:pointer;font-size:12px;line-height:1}
.pill .x:hover{color:#5b6572}

/* =============================================================
   5. ПАНЕЛЬ НАД ТАБЛИЦЕЙ
   ============================================================= */
.toolbar{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.count{font-size:12.5px;color:var(--muted)}
.count b{color:var(--text);font-weight:600}
.tlabel{font-size:11.5px;color:var(--muted);margin-left:6px}
.mini,select.mini{height:32px;border:1px solid #d5dbe2;border-radius:var(--r-xs);background:#fff;
  font-size:12.5px;color:#5b6572;padding:0 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mini:hover{border-color:#b9c3ce}
.dd{position:relative}
.ddmenu{position:absolute;right:0;top:36px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xs);box-shadow:0 8px 22px rgba(20,30,45,.13);min-width:250px;padding:5px;display:none;z-index:20}
.ddmenu.open{display:block}
.ddmenu a{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;
  border-radius:var(--r-xs);color:var(--text);font-size:12.5px}
.ddmenu a:hover{background:var(--bg);text-decoration:none}
.ddmenu a small{color:var(--muted);font-size:11px}
.ddmenu .sep{height:1px;background:var(--line);margin:4px 0}
.ddmenu .ddhd{padding:6px 10px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);font-weight:700}

/* =============================================================
   6. ТАБЛИЦА
   Широкие отчёты (до 19 колонок) — горизонтальная прокрутка
   внутри .tscroll, первая колонка липнет.
   ============================================================= */
/* контейнер прокрутки: липкая шапка и первая колонка считаются от него */
.tscroll{overflow:auto;max-height:72vh}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);background:#fbfcfd;
  white-space:nowrap;cursor:pointer;position:sticky;top:0;z-index:2}
thead th .s{opacity:.35;margin-left:3px}
thead th.num,tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;height:62px}
tbody tr:hover{background:#fafbfd}
tbody td.num{color:#4b5563}
.dim{color:var(--muted)}
tfoot td{padding:11px 12px;background:#fbfcfd;font-weight:600;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums}

/* липкая первая колонка для широких таблиц */
.tscroll.sticky1 thead th:first-child,
.tscroll.sticky1 tbody td:first-child{position:sticky;left:0;background:#fff;z-index:3;
  box-shadow:1px 0 0 var(--line-soft)}
.tscroll.sticky1 thead th:first-child{background:#fbfcfd;z-index:4}
.tscroll.sticky1 thead th:first-child,
.tscroll.sticky1 tbody td:first-child{min-width:148px}
.tscroll.sticky1 tbody tr:hover td:first-child{background:#fafbfd}

/* выделенная колонка (рейтинг) */
thead th.c-rating{background:#f2f5f8;color:#5b6572;text-align:center}
tbody td.c-rating{background:#f8fafb;text-align:center;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
tbody tr:hover td.c-rating{background:#f2f5f8}

.logo-box{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-xs);
  display:grid;place-items:center;background:#fff;overflow:hidden;padding:4px;flex:none}
.logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.logo-box span{font-size:15px;color:#7a838f;font-weight:700}

.offer-title{font-size:13.5px;color:var(--blue);display:block;line-height:1.3}
tr.prem .offer-title{font-weight:600}
.prem-tag{display:inline-block;margin-top:6px;border:1px solid var(--black);color:var(--black);
  font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;padding:2px 7px;
  line-height:1.2;border-radius:0}

.rate{font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.rate small{display:block;font-size:9.5px;font-weight:500;color:var(--muted);margin-top:3px}
.rate.hi{color:#1f7a4d}
.rate.lo{color:#a6aeb8}

.geo-cell{color:var(--muted)}
.geo-ww{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#6b7480;
  background:#f0f2f5;border-radius:var(--r-xs);padding:2px 7px}

.delta{font-size:11px;font-variant-numeric:tabular-nums}
.delta.up{color:var(--money)}
.delta.dn{color:#c0566f}

/* =============================================================
   7. СТАТУС-БЭДЖИ — пастель, фикс. 88×24.
   Яркий только apply — единственное действие в таблице.
   ============================================================= */
.badge{display:inline-flex;align-items:center;justify-content:center;width:88px;height:24px;
  border-radius:var(--r-xs);font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  white-space:nowrap;line-height:1;padding:0 4px;border:1px solid transparent}
.b-active  {background:#e6f4ec;color:#3d7d5f;border-color:#c7e5d5}
.b-approved{background:#e9f1f8;color:#456f92;border-color:#cbdded}
.b-rejected{background:#f9ebee;color:#a06474;border-color:#eed2d9}
.b-pending {background:#f0f2f5;color:#727b87;border-color:#dfe3e8}
.b-paid    {background:#eef1ff;color:#4356b8;border-color:#cdd5f7}
.badge.auto{width:auto;padding:0 9px}
.badge.cap {width:46px;background:#fdf4e8;border-color:#efdcc0;color:#a2793d}

button.badge.b-apply{cursor:pointer;background:#f7c877;color:#5f4110;border:1px solid #e0aa4c;
  gap:4px;transition:background .12s,border-color .12s,box-shadow .12s}
button.badge.b-apply:hover{background:#f3ba58;border-color:#cf9738;box-shadow:0 2px 6px rgba(190,140,50,.32)}
button.badge.b-apply:active{background:#eaad42;box-shadow:none;transform:translateY(1px)}

/* =============================================================
   8. ПАГИНАЦИЯ
   ============================================================= */
.pager{display:flex;justify-content:flex-end;align-items:center;gap:5px;padding:14px 20px}
.pg{min-width:32px;height:32px;border:1px solid #d5dbe2;border-radius:var(--r-xs);display:grid;
  place-items:center;font-size:12.5px;color:#5b6572;background:#fff;cursor:pointer;padding:0 9px}
.pg:hover{border-color:#b9c3ce;text-decoration:none}
.pg.on{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-dark);font-weight:700}

/* =============================================================
   9. ПЛАШКИ, ПУСТЫЕ СОСТОЯНИЯ
   ============================================================= */
.notice{padding:12px 16px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.55}
.notice-info {background:var(--blue-soft);color:#2f3f8f;border-left:3px solid var(--blue)}
.notice-warn {background:#fdf4e8;color:#8a6529;border-left:3px solid #e0aa4c}
.notice-quiet{background:#fafbfc;color:#5f6874;border:1px solid var(--line);border-left:3px solid #c6ccd4}
.notice-dark {background:#f2f3f5;color:#2c3038;border-left:3px solid var(--black)}
.notice b{font-weight:700}

.empty{padding:64px 20px;text-align:center}
.empty h3{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--ink)}
.empty p{margin:0 auto 18px;max-width:440px;color:var(--muted);font-size:12.5px;line-height:1.6}
.empty .ico{width:54px;height:54px;border-radius:999px;background:var(--bg);display:grid;
  place-items:center;margin:0 auto 16px;font-size:22px;color:#b6bdc6}
.empty .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* =============================================================
   10. KPI-КАРТОЧКИ И ГРАФИК (дашборд)
   ============================================================= */
.kpi{padding:16px 18px}
.kpi .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.kpi .v{font-size:26px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
  line-height:1.2;margin-top:6px;display:flex;align-items:baseline;gap:9px}
.kpi .v small{font-size:12px;font-weight:400;color:var(--muted)}
.chart-ph{height:260px;background:
  repeating-linear-gradient(to top,var(--line-soft) 0 1px,transparent 1px 52px);
  border-radius:var(--r-xs);position:relative;display:flex;align-items:flex-end;gap:6px;padding:0 4px}
.chart-ph i{flex:1;background:var(--blue);opacity:.18;border-radius:2px 2px 0 0;display:block}
.chart-ph i.a{opacity:.5}

/* список-топ (Top converting GEOs) */
.toplist{margin:0;padding:0;list-style:none;counter-reset:t}
.toplist li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);counter-increment:t}
.toplist li:last-child{border-bottom:none}
.toplist li:before{content:counter(t);width:20px;height:20px;border-radius:999px;background:var(--bg);
  color:var(--muted);font-size:10.5px;font-weight:700;display:grid;place-items:center;flex:none}
.toplist li b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}

/* столбик ссылок-инструментов */
.linklist{display:flex;flex-direction:column;gap:8px}
.linklist a{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;
  border:1px solid var(--line);border-radius:var(--r-xs);color:var(--text);font-size:12.5px}
.linklist a:hover{border-color:var(--blue-line);background:var(--blue-soft);color:var(--blue-dark);text-decoration:none}
.linklist a span{color:var(--muted)}

/* =============================================================
   11. ТАБЫ РАЗДЕЛА И МАСТЕР
   ============================================================= */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs a{padding:10px 16px;font-size:13px;color:#6b7480;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}

.steps{display:flex;align-items:center;gap:0;margin-bottom:24px}
.steps .st{display:flex;align-items:center;gap:9px;padding-right:14px}
.steps .st i{width:26px;height:26px;border-radius:999px;border:1px solid var(--line);display:grid;
  place-items:center;font-size:11.5px;font-weight:700;color:var(--muted);font-style:normal;background:#fff;flex:none}
.steps .st b{font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.steps .st.on i{background:var(--blue);border-color:var(--blue);color:#fff}
.steps .st.on b{color:var(--ink);font-weight:600}
.steps .st.done i{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-dark)}
.steps .st.done b{color:var(--text)}
.steps .bar{flex:1;height:1px;background:var(--line);margin-right:14px;min-width:20px}

/* =============================================================
   12. БАННЕРЫ — 50% карусель + два статичных
   ============================================================= */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.banners .col{display:grid;grid-template-rows:1fr 1fr;gap:12px}
.bn{border-radius:var(--r);border:1px solid #cfe4f3;display:grid;place-items:center;
  font-size:12px;color:#3d7ba8;background:#e8f2fb;position:relative;overflow:hidden}
.bn.big{height:212px}
.bn.sm{height:100px}
.bn i{font-style:normal;opacity:.8}
.carousel{position:relative}
.slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .45s ease}
.slide.on{opacity:1}
.cdots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:3}
.cdot{width:7px;height:7px;border-radius:50%;background:rgba(20,40,60,.22);cursor:pointer}
.cdot.on{background:rgba(20,40,60,.62);width:18px;border-radius:4px}
.carr{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:38px;
  background:rgba(255,255,255,.75);border:1px solid rgba(20,40,60,.1);display:grid;place-items:center;
  cursor:pointer;z-index:3;color:#3d5b73;font-size:14px;border-radius:var(--r-xs)}
.carr:hover{background:#fff}
.carr.l{left:8px} .carr.r{right:8px}

/* =============================================================
   13. ТАБЫ УРОВНЯ (Premium / Lite) — 230×54
   ============================================================= */
.tiers{display:flex;align-items:stretch;margin-bottom:-1px;position:relative;z-index:2}
.tier-tab{display:flex;align-items:center;justify-content:center;gap:9px;height:54px;width:230px;padding:0 14px;
  border:1px solid transparent;border-bottom:none;border-radius:var(--r) var(--r) 0 0;
  cursor:pointer;color:#6b7480;font-size:13.5px;background:transparent;user-select:none}
.tier-tab:hover{color:var(--text);background:#e9edf1}
.tier-tab.on{background:#fff;border-color:var(--line);color:var(--text);font-weight:600}
.tier-tab[data-tier="all"].on {box-shadow:inset 0 3px 0 var(--blue)}
.tier-tab[data-tier="prem"].on{box-shadow:inset 0 3px 0 var(--black);color:var(--black)}
.tier-tab[data-tier="lite"].on{box-shadow:inset 0 3px 0 #b6bdc6}
.tier-tab .cnt{font-size:11px;color:var(--muted);background:#eef1f5;border-radius:10px;padding:1px 8px;font-weight:500}
.tier-tab[data-tier="all"].on  .cnt{background:var(--blue-soft);color:var(--blue-dark)}
.tier-tab[data-tier="prem"].on .cnt{background:var(--black);color:#fff}
.tier-tab[data-tier="lite"].on .cnt{background:#e6e9ed;color:#5b6572}
.panel-tab{border-radius:0 var(--r) var(--r) var(--r)}
.lite-word{font-weight:600;letter-spacing:-.2px}
.lite-word em{font-style:normal;color:#aab2bc;font-weight:400}

/* =============================================================
   14. ДОСТУПНОСТЬ
   ============================================================= */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr 1fr}
  .banners{grid-template-columns:1fr}
}