/* L2Etina x30 — ported from the base theme cabinet.css, palette recolored blue->gold. Source: the base theme. */
/* ═══════════════════════════════════════════════════════════════════════════
   the base theme Cabinet — дизайн-система особистого кабінету (/panel).
   Порт assets/ui.css з прототипу lc-cabinet-prototype на бойову розмітку.

   Вантажиться ПІСЛЯ custom.css і cabinet-fixes.css (Library/js_css_include.php).
   Відкат: прибрати рядок 'cabinet_css' з js_css_include.php — розмітка
   лишається валідною, повертається вендорський вигляд.

   Структура файлу:
     1. Токени
     2. Каркас сторінки (фон, контейнер, заголовки)
     3. Ліва панель  (розмітку генерить PHP — тільки стилі)
     4. Мобільний топбар
     5. Компоненти дизайн-системи (scope .lc-cab)
     6. Міст до вендорської розмітки (.block/.table/.nav-tabs/.form-control/…)

   ВАЖЛИВО: усі компоненти дизайн-системи заскоуплені в .lc-cab, бо клас
   .btn зайнятий Bootstrap-ом (69 правил у codebase.css). Кореневий .lc-cab
   дає специфічність 0,2,0 і перебиває вендорський .btn без !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   ЛІТНЯ ПАЛІТРА
   Значення зняті з бойової сторінки lc-game.com/ru/new-server-summer
   (кастомні властивості її :root), а не підібрані на око:
     --bg #0b0906 · --panel #17110c · --panel2 #1d1610
     --red #f6ad4d (насправді блакитний) · --red-deep #7a4e18
     --gold #f6ad4d · --gold-soft #f0cd82 · --cream #f3e9d6
     --muted #b8aaa0 · --ok #5dcaa5
     --line rgba(246,173,77,.16) · --line-hi rgba(246,173,77,.34)

   Оттінки живуть як `rgba(var(--…-rgb), a)` — щоб наступна зміна
   палітри правилась тут, а не в шести десятках літералів по файлу.
   ───────────────────────────────────────────────────────────────── */
:root{
  /* фон і поверхні */
  --lc-bg:#0b0906;
  --lc-panel:rgba(28,21,14,.78);
  --lc-panel-2:rgba(36,26,18,.62);
  --lc-panel-3:rgba(18,13,9,.72);
  --lc-line:rgba(246,173,77,.16);
  --lc-line-2:rgba(246,173,77,.34);
  --lc-surface:#17110c;          /* модалки, дропдауни, тости */
  --lc-sidebar:rgba(11,9,6,.94);
  --lc-input:rgba(246,173,77,.06);
  --lc-input-focus:rgba(246,173,77,.10);

  /* акценти */
  --lc-accent:#f6ad4d;
  --lc-accent-rgb:246,173,77;
  --lc-accent-hi:#f0cd82;        /* hover основної дії */
  --lc-accent-ink:#1c130a;       /* текст на блакитній заливці */
  --lc-gold:#f6ad4d;
  --lc-gold-rgb:246,173,77;
  --lc-gold-2:#f0cd82;
  --lc-rust:#7a4e18;
  --lc-deep:#1c130a;

  /* текст */
  --lc-tx:#f3e9d6;
  --lc-mut:#b8aaa0;
  --lc-mut-2:#8c7d67;

  /* стани */
  --lc-green:#5dcaa5;
  --lc-green-rgb:93,202,165;
  --lc-red:#e2685f;
  --lc-red-rgb:226,104,95;
  --lc-red-hi:#ea7d75;
  --lc-on-red:#2b0f0d;
  --lc-blue:#f0cd82;

  /* текст підказок */
  --lc-hint-ok:#a7e0cd;
  --lc-hint-ok-b:#d6f2e8;
  --lc-hint-warn:#f4d9a4;
  --lc-hint-bad:#f0b8b3;
  --lc-hint-bad-b:#f7d9d6;

  --lc-r-lg:8px;
  --lc-r-md:6px;
  --lc-r-sm:5px;
}

/* ═══════════════════════════════════════════════════════════════
   2. КАРКАС СТОРІНКИ
   ═══════════════════════════════════════════════════════════════ */

/* Фон — той самий стек радіальних градієнтів, що на сторінці
   new-server-summer: блакитне сяйво зверху по центру, тепле янтарне
   праворуч і синій вертикальний перехід. Текстуру bg.jpg прибрано:
   вона коричнева й з літньою палітрою свариться.

   Кладемо на body, а НЕ псевдоелементом на #page-container — будь-яка
   спроба задати position його дітям ламає сайдбар (у codebase.css
   #sidebar тримається на position:fixed). */
body{
  background-image:
    radial-gradient(60% 40% at 50% 0%,   rgba(246,173,77,.12), transparent 70%),
    radial-gradient(40% 30% at 85% 12%,  rgba(237,166,48,.05), transparent 70%),
    radial-gradient(120% 90% at 50% -10%, #17110c 0%, #0b0906 38%, #070502 100%);
  background-attachment: fixed, fixed, fixed;
  background-color: var(--lc-bg);
  /* custom.css лишає від текстури background-size:max(1600px,100%) auto —
     він застосувався б і до градієнтів та порізав би їх. Скидаємо. */
  background-size: auto, auto, auto;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Глобальний колір посилань: у custom.css він лишався теплим (#f0cd82),
   на синьому фоні вибивається.

   Селектор навмисно БЕЗ #page-container. З ідентифікатором специфічність
   (1,1,1) перебивала компонентні правила на кшталт .lc-cab .cta:hover
   (0,3,0) — і текст кнопки-посилання фарбувався в той самий колір, що її
   фон на hover, тобто зникав. Тут cabinet.css і так підключений після
   custom.css, тож рівної специфічності достатньо, щоб виграти порядком. */
a{color:var(--lc-gold-2)}
a:hover{color:var(--lc-accent-hi)}

/* Декоративний шар з іконками предметів — як .econ__bg на літній сторінці
   (там opacity .72 на контейнері, .15 на самих іконках, mix-blend-mode
   screen і тепле світіння). Робимо його фоном ::before, щоб не додавати
   розмітку в кожен шаблон.

   Іконки віддає прод (the base theme/wiki/icons) — на дев-стенді їх не буде,
   шар просто лишиться порожнім, верстка від цього не залежить. */
#page-container::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* На джерелі .72 × .15 ≈ .11, але там іконки лежать усередині щільної
     секції з контентом. На порожній сторінці кабінету (наприклад, коли
     колесо не налаштоване) вони на весь екран і читаються як сірі плями,
     тож беремо помітно тихіше. */
  opacity:.05;
  mix-blend-mode:screen;
  filter:saturate(.85) brightness(1.12) drop-shadow(0 0 16px rgba(var(--lc-gold-rgb),.22));
  background-repeat:no-repeat;
  /* removed the base theme/wiki decoration — that was pulling images from a foreign domain (leak/dependency).
     Our own background lives on #page-container (panel.css for the cabinet, l2etina-signin.css for public). */
  background-image:none;
  display:none;
  background-position:
    6% 14%, 30% 54%, 2% 62%, 20% 8%,
    14% 38%, 96% 90%, 91% 16%, 76% 46%;
  background-size:
    84px auto, 120px auto, 96px auto, 64px auto,
    72px auto, 80px auto, 110px auto, 64px auto;
}
/* Контент — над декоративним шаром.
   ТІЛЬКИ #main-container: #sidebar чіпати не можна, у codebase.css він
   тримається на position:fixed, і будь-який position:relative його ламає
   (уже наступав на це з попередньою накладкою фону). Сайдбар і так вище —
   у нього z-index 1032. */
#main-container{position:relative; z-index:1}

#main-container{color:var(--lc-tx)}

/* Вертикальний зазор між віджетами.
   parse_row() загортає кожен віджет у .box_mw з бутстрапівськими
   колонковими падінгами — вони лише горизонтальні (0 15px). Раніше
   вертикаль давав вендорський .block своїм margin-bottom; у новій
   верстці .block замінено на .panel, а .panel + .panel працює тільки
   ВСЕРЕДИНІ віджета. Через це на /panel усі блоки стояли впритул (0px).
   .grid-sizer виключений — це нульовий елемент розмітки masonry. */
#main-container .box_mw:not(.grid-sizer){margin-bottom:16px}

/* заголовок сторінки: h1 + рисочка з ромбом (прототип .lead) */
.lc-head{margin:0 0 20px}
.lc-head h1,
.lc-cab h1.lc-h1{
  font:700 30px/1.15 Muli,"Mulish",sans-serif;
  margin:0 0 6px;
  letter-spacing:.2px;
  color:#fff !important;
  text-transform:none;
}
.lc-head .lead{
  display:flex; align-items:center; gap:10px;
  color:var(--lc-mut); font-size:13.5px; margin:0;
}
.lc-head .lead .rule{
  width:44px; height:1px; position:relative;
  background:linear-gradient(90deg,transparent,var(--lc-accent));
}
.lc-head .lead .rule::after{
  content:""; position:absolute; right:-3px; top:-2.5px;
  width:6px; height:6px; background:var(--lc-accent); transform:rotate(45deg);
}

/* двоколонковий лейаут «контент + права колонка» */
.lc-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 336px;
  gap:20px;
  align-items:start;
}
.lc-layout > *{min-width:0}
@media(max-width:1520px){.lc-layout{grid-template-columns:minmax(0,1fr) 310px; gap:16px}}
@media(max-width:1180px){.lc-layout{grid-template-columns:minmax(0,1fr)}}

.lc-aside{position:sticky; top:20px; display:flex; flex-direction:column; gap:14px}
@media(max-width:1180px){.lc-aside{position:static}}

/* ═══════════════════════════════════════════════════════════════
   3. ЛІВА ПАНЕЛЬ
   Пункти генерить PHP (render_menu / render_menu_server /
   render_menu_bonus_cod) — розмітку не чіпаємо, тільки оформлення.
   ═══════════════════════════════════════════════════════════════ */

#page-container.sidebar-inverse #sidebar,
#sidebar.essence_panel_sb{
  background:var(--lc-sidebar);
  border-right:1px solid var(--lc-line);
}

#sidebar .sidebar-content{padding-left:14px; padding-right:14px}

#sidebar .logo-header-custom{padding:2px 0 6px}
#sidebar .img_logo_header{
  /* height:auto обязателен: у <img> проставлены width/height (нужны, чтобы слот
     резервировался до загрузки), а правило задаёт только ширину — без этой строки
     атрибут height становится используемой высотой и логотип сплющивает. */
  width:150px; height:auto; max-width:100%; margin:0 auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));
}

/* перемикач сервера */
#sidebar .chose_server_custom{
  background:var(--lc-panel-2) !important;
  border:1px solid var(--lc-line) !important;
  border-radius:var(--lc-r-md) !important;
  padding:11px 12px !important;
  font-size:13.5px;
  font-weight:700 !important;
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:none;
}
#sidebar .chose_server_custom:hover{
  border-color:var(--lc-accent) !important;
  background:rgba(var(--lc-accent-rgb),.10) !important;
}
/* Список серверів.
   Розмітку дає render_menu_server(): кнопка + .dropdown-menu, усередині
   якого пункти загорнуті у <div class="ml-10"> — саме він зсовував їх
   праворуч. Ширину меню Bootstrap не пов'язує з кнопкою, тож задаємо. */
#sidebar .dropdown-menu{
  width:100%;
  min-width:0;
  margin-top:6px;
  padding:6px;
  background:var(--lc-surface);
  border:1px solid var(--lc-line-2);
  border-radius:var(--lc-r-md);
  box-shadow:0 18px 44px rgba(0,0,0,.7);
}
#sidebar .dropdown-menu .ml-10{margin-left:0 !important}
#sidebar .dropdown-menu .dropdown-item{
  display:flex;
  align-items:center;
  padding:9px 11px;
  border-radius:var(--lc-r-sm);
  color:var(--lc-gold-2);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.3px;
  white-space:normal;
}
#sidebar .dropdown-menu .dropdown-item + .dropdown-item{margin-top:2px}
#sidebar .dropdown-menu .dropdown-item:hover{background:rgba(var(--lc-accent-rgb),.14); color:#fff}
/* поточний сервер — позначаємо галочкою, а не тільки заливкою */
#sidebar .dropdown-menu .dropdown-item.active{
  background:rgba(var(--lc-accent-rgb),.20);
  color:#fff;
}
#sidebar .dropdown-menu .dropdown-item.active::after{
  content:"";
  margin-left:auto;
  width:7px; height:12px;
  border-right:2px solid var(--lc-accent);
  border-bottom:2px solid var(--lc-accent);
  transform:rotate(45deg) translate(-2px,-1px);
}
#sidebar .dropdown-header{
  color:var(--lc-mut-2);
  font-size:11px;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:6px 11px 4px;
  min-width:0;
}
/* стрілка на кнопці */
#sidebar .chose_server_custom::after{
  margin-left:auto;
  border-top-color:var(--lc-mut);
  transition:.15s;
}
#sidebar .chose_server_custom[aria-expanded="true"]::after{
  transform:rotate(180deg);
  border-top-color:var(--lc-accent);
}
#sidebar .chose_server_custom[aria-expanded="true"]{
  border-color:var(--lc-accent) !important;
  background:rgba(var(--lc-accent-rgb),.10) !important;
}

/* блок балансу */
#sidebar .balance_info_menu{
  padding:14px 2px;
  border-bottom:1px solid var(--lc-line);
  margin-bottom:14px;
}
#sidebar .span_balance{color:var(--lc-gold-2)}

/* Кнопка «Оновити» біля балансу.
   У custom.css це залита плитка #f0cd82 із scale(1.05) на hover і важкою
   тінню — колір повз палітру, а поведінка не збігається з рештою кнопок.
   Робимо тиху контурну кнопку, як .btn.sm. */
#sidebar #refresh-button{padding:0; margin:0; text-decoration:none}
#sidebar .span_balance_blue{
  background:transparent !important;
  border:1px solid var(--lc-line-2) !important;
  border-radius:var(--lc-r-md) !important;
  box-shadow:none !important;
  color:var(--lc-mut) !important;
  font-size:12px !important;
  font-weight:600 !important;
  text-transform:none;
  padding:6px 10px !important;
  min-height:30px;
  gap:6px;
  transition:.15s;
}
#sidebar .span_balance_blue:hover{
  background:rgba(var(--lc-accent-rgb),.12) !important;
  border-color:var(--lc-accent) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
}
#sidebar .span_balance_blue:active{transform:translateY(1px) !important}
#sidebar .span_balance_blue i{font-size:11px}

/* головна дія сайдбара — «Поповнити баланс» */
#sidebar .pay_button_menu{
  background:var(--lc-accent) !important;
  border:0 !important;
  border-radius:var(--lc-r-md) !important;
  color:var(--lc-accent-ink) !important;
  font-weight:700;
  box-shadow:0 6px 18px rgba(var(--lc-accent-rgb),.22) !important;
}
#sidebar .pay_button_menu:hover{background:var(--lc-accent-hi) !important}
#sidebar .pay_button_menu::before{display:none !important}

/* Підпис кнопок сайдбара.
   custom.css заливає .pay_button_text градієнтом ПО ТЕКСТУ
   (`background: linear-gradient(#fff …) text` + color rgba(255,255,255,.43))
   і підмінює шрифт на декоративний «DS 737 Exp». На помаранчевій заливці
   це читалось, на блакитній білий текст із прозорістю 43% зливається з
   фоном, а на hover (фон світлішає) зникає зовсім.
   Прибираємо градієнт-по-тексту й повертаємо шрифт інтерфейсу. */
#sidebar .pay_button_text,
#sidebar .pay_button_icon{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:Muli,"Mulish",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif !important;
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:none;
}
/* суцільна заливка — текст темний */
#sidebar .pay_button_menu .pay_button_text,
#sidebar .pay_button_menu .pay_button_icon{color:var(--lc-accent-ink) !important}
/* контурна кнопка — текст світлий */
#sidebar .span_balance_green .pay_button_text,
#sidebar .span_balance_green .pay_button_icon{color:var(--lc-gold-2) !important}
#sidebar .span_balance_green:hover .pay_button_text,
#sidebar .span_balance_green:hover .pay_button_icon{color:#fff !important}
/* на сторінці каси видимого пункту меню немає — головна дія тут ця кнопка,
   тож поточну сторінку показуємо на ній (клас ставить cabinet.js) */
#sidebar .pay_button_menu.lc-here{
  box-shadow:0 0 0 2px var(--lc-gold-2), 0 6px 18px rgba(var(--lc-accent-rgb),.22) !important;
}

/* вторинна дія — «Вивести монети в гру» */
#sidebar .span_balance_green{
  background:var(--lc-panel-2) !important;
  border:1px solid var(--lc-line-2) !important;
  border-radius:var(--lc-r-md) !important;
  color:var(--lc-gold-2) !important;
  box-shadow:none !important;
}
#sidebar .span_balance_green:hover{
  border-color:var(--lc-accent) !important;
  background:rgba(var(--lc-accent-rgb),.12) !important;
  color:#fff !important;
}
#sidebar .span_balance_green::before{display:none !important}

/* custom.css робить .flex_li li флекс-контейнером, і посилання всередині
   стискається по тексту: підсвітка накривала «Головна» замість усього рядка
   (120px замість 271px). Повертаємо рядку повну ширину. */
#sidebar .nav-main.flex_li > li{display:block}

/* пункти меню: рядок «іконка + текст».
   codebase.css тримає .nav-main a > i у position:absolute — повертаємо в потік,
   інакше іконка ляже поверх тексту всередині flex-рядка. */
#sidebar .nav-main a{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:var(--lc-r-md);
  color:var(--lc-gold-2);
  font-size:14px;
  font-weight:400;
  transition:.15s;
}
#sidebar .nav-main a > i{
  position:static !important;
  transform:none !important;
  flex:none;
  margin:0;
}
#sidebar .nav-main a .sidebar-mini-hide{margin-left:0}
#sidebar .nav-main a:hover,
#sidebar .nav-main a:focus{background:rgba(var(--lc-accent-rgb),.10); color:#fff}
#sidebar .nav-main a.active{
  background:linear-gradient(90deg,rgba(var(--lc-accent-rgb),.22),rgba(var(--lc-accent-rgb),.04));
  color:#fff;
  font-weight:700;
}
#sidebar .nav-main a.active::before{
  content:"";
  position:absolute;
  left:0; top:8px; bottom:8px;
  width:3px; border-radius:3px;
  background:var(--lc-accent);
}
#sidebar .nav-main a:hover > i,
#sidebar .nav-main a:focus > i,
#sidebar .nav-main a.active > i{color:#fff !important}

/* підвал сайдбара */
#sidebar #emailWata{color:var(--lc-mut) !important; font-size:12px; word-break:break-all}
#sidebar #change_lang{color:var(--lc-mut)}

/* ═══════════════════════════════════════════════════════════════
   4. МОБІЛЬНИЙ ТОПБАР
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:992px){
  #page-header.page-header_custom{
    background:var(--lc-sidebar) !important;
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--lc-line);
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. КОМПОНЕНТИ ДИЗАЙН-СИСТЕМИ (scope .lc-cab)
   ═══════════════════════════════════════════════════════════════ */

.lc-cab{
  font:14px/1.55 Muli,"Mulish",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  color:var(--lc-tx);
}
.lc-cab *{box-sizing:border-box}
.lc-cab [hidden]{display:none !important}
.lc-cab img{max-width:100%}
.lc-cab a{color:inherit; text-decoration:none}
.lc-cab button{font:inherit; cursor:pointer}

/* ── панель ── */
.lc-cab .panel{
  background:var(--lc-panel);
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-lg);
  padding:18px;
}
.lc-cab .panel + .panel{margin-top:16px}

.lc-cab .ph{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin:0 0 15px;
  font-size:15px; font-weight:700; line-height:1.35;
  color:#fff !important;
}
.lc-cab .ph img{width:22px; height:22px}
.lc-cab .ph > svg{width:18px; height:18px; color:var(--lc-accent); flex:none}
.lc-cab .ph > .tt{flex:1 1 0; min-width:0}
.lc-cab .ph .more{
  margin-left:auto;
  font-size:12.5px; font-weight:400;
  color:var(--lc-mut);
  display:flex; align-items:center; gap:5px;
  background:none; border:0; padding:0;
}
/* зона натискання: сам текст був 17px заввишки — пальцем не влучити.
   Від'ємні поля компенсують падінг, тож візуально нічого не зсувається. */
.lc-cab .ph .more{padding:7px 4px; margin:-7px -4px -7px auto}
.lc-cab .ph .more:hover{color:var(--lc-gold-2)}
.lc-cab .ph .more svg{width:13px; height:13px; color:currentColor}
.lc-cab .ph .more:disabled{opacity:.45; cursor:not-allowed}

/* ── рядок «ключ → значення» ── */
.lc-cab .r{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:7px 0; font-size:13.5px;
}
.lc-cab .r .k{display:flex; align-items:center; gap:9px; color:var(--lc-mut)}
.lc-cab .r .k svg{width:15px; height:15px; opacity:.6; flex:none}
.lc-cab .r .v{font-weight:700; text-align:right}
.lc-cab .r .v.gr{color:var(--lc-green)}
.lc-cab .r .v.rd{color:var(--lc-red)}
.lc-cab .r .v.gd{color:var(--lc-gold-2)}
.lc-cab .r .v.num{font-variant-numeric:tabular-nums}

.lc-cab .sep{height:1px; background:var(--lc-line); margin:10px 0}

.lc-cab .big{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0}
.lc-cab .big span{color:var(--lc-mut); font-size:13.5px}
.lc-cab .big b{font-size:20px; color:var(--lc-gold-2); font-weight:700}
.lc-cab .big.tot b{font-size:26px}

.lc-cab .ordhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.lc-cab .ordhead h2{margin:0; font-size:16px; font-weight:700; color:#fff !important}
.lc-cab .crest{width:28px; height:28px; opacity:.9; color:var(--lc-gold);
  filter:drop-shadow(0 2px 5px rgba(var(--lc-accent-rgb),.4))}

/* ── кнопки ── */
.lc-cab .cta{
  width:100%; margin-top:12px;
  border:0; border-radius:var(--lc-r-md);
  padding:13px 18px;
  background:var(--lc-accent); color:var(--lc-accent-ink);
  font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 6px 18px rgba(var(--lc-accent-rgb),.22);
  transition:.15s; text-decoration:none; text-transform:none;
}
/* колір тексту кнопок фіксуємо на ВСІХ станах: вони бувають <a>, і будь-яке
   правило для посилань не повинно перефарбовувати підпис у колір заливки */
.lc-cab a.cta,
.lc-cab a.cta:hover,
.lc-cab a.cta:focus,
.lc-cab a.cta:active{color:var(--lc-accent-ink)}
.lc-cab a.btn:focus,
.lc-cab a.btn:active{color:#fff}
.lc-cab .cta:hover,
.lc-cab .cta:focus{background:var(--lc-accent-hi); color:var(--lc-accent-ink)}
.lc-cab .cta:active{transform:translateY(1px)}
.lc-cab .cta:disabled,
.lc-cab .cta.disabled{filter:grayscale(.6) brightness(.7); cursor:not-allowed; box-shadow:none}
.lc-cab .cta svg{width:18px; height:18px; flex:none}
.lc-cab .cta.sm{padding:9px 14px; font-size:13.5px; margin-top:0; width:auto}
.lc-cab .cta.warn{background:var(--lc-red); color:var(--lc-on-red)}
.lc-cab .cta.warn:hover{background:var(--lc-red-hi)}

/* === L2Etina: unified readable DARK text on ALL solid gold buttons, every page (fixes low-contrast "Top-up balance") === */
#main-container .cta:not(.ghost):not(.warn),
#main-container .cta:not(.ghost):not(.warn):hover,
#main-container .cta:not(.ghost):not(.warn):focus,
#main-container .cta:not(.ghost):not(.warn):active,
#main-container .btn-warning,
#main-container .btn-warning:hover,
#main-container .btn-warning:focus,
#main-container .btn-warning:active{ color:var(--lc-accent-ink) !important; }
#main-container .cta:not(.ghost):not(.warn) svg,
#main-container .btn-warning svg,
#main-container .btn-warning i{ color:var(--lc-accent-ink) !important; }
.lc-cab .cta.ghost{
  background:none; border:1px solid var(--lc-line-2); color:var(--lc-mut);
  box-shadow:none; font-weight:600; font-size:14px; padding:12px;
}
.lc-cab .cta.ghost:hover{filter:none; color:var(--lc-tx); border-color:var(--lc-accent); background:none}

.lc-cab .btn{
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line-2);
  color:var(--lc-gold-2);
  border-radius:var(--lc-r-md);
  padding:8px 14px;
  font-size:13.5px; font-weight:400;
  display:inline-flex; align-items:center; gap:8px;
  transition:.15s; text-decoration:none; text-transform:none;
  box-shadow:none;
}
.lc-cab .btn:hover{border-color:var(--lc-accent); color:#fff; background:rgba(var(--lc-accent-rgb),.12)}
.lc-cab .btn svg{width:15px; height:15px; flex:none}
.lc-cab .btn.sm{padding:6px 11px; font-size:12.5px; min-height:32px}
.lc-cab .btn.gold{background:rgba(var(--lc-gold-rgb),.14); border-color:rgba(var(--lc-gold-rgb),.4); color:var(--lc-gold-2)}
.lc-cab .btn.gold:hover{background:rgba(var(--lc-gold-rgb),.24)}
.lc-cab .btn.danger:hover{border-color:var(--lc-red); color:var(--lc-red); background:rgba(var(--lc-red-rgb),.1)}
.lc-cab .btn:disabled,
.lc-cab .btn.disabled{opacity:.45; cursor:not-allowed}

.lc-cab .safe{
  margin-top:10px; text-align:center;
  color:var(--lc-mut-2); font-size:12px;
  display:flex; align-items:center; justify-content:center; gap:7px;
}

/* ── підказки ── */
.lc-cab .hint{
  margin-top:11px; padding:10px 12px;
  border-radius:var(--lc-r-md);
  font-size:12.5px; line-height:1.5;
  background:rgba(var(--lc-green-rgb),.08);
  border:1px solid rgba(var(--lc-green-rgb),.24);
  color:var(--lc-hint-ok);
}
.lc-cab .hint b{color:var(--lc-hint-ok-b)}
.lc-cab .hint.warn{background:rgba(var(--lc-gold-rgb),.09); border-color:rgba(var(--lc-gold-rgb),.28); color:var(--lc-hint-warn)}
.lc-cab .hint.warn b{color:var(--lc-gold-2)}
.lc-cab .hint.bad{background:rgba(var(--lc-red-rgb),.09); border-color:rgba(var(--lc-red-rgb),.28); color:var(--lc-hint-bad)}
.lc-cab .hint.bad b{color:var(--lc-hint-bad-b)}

/* пояснювальний абзац */
.lc-cab .txt{margin:0 0 12px; color:var(--lc-mut); font-size:13.5px; line-height:1.6}
.lc-cab .txt:last-child{margin-bottom:0}
.lc-cab .txt b{color:var(--lc-tx)}

/* ── форми ── */
.lc-cab .fld{display:block; margin-bottom:13px}
.lc-cab .fld > .lb{display:block; font-size:13px; color:var(--lc-mut); font-weight:600; margin-bottom:6px}
.lc-cab .inp,
.lc-cab textarea.inp,
.lc-cab select.inp{
  width:100%;
  background:var(--lc-input);
  border:1px solid var(--lc-line);
  color:var(--lc-tx);
  border-radius:var(--lc-r-sm);
  padding:10px 12px;
  font:inherit;
  transition:.15s;
}
.lc-cab .inp::placeholder{color:var(--lc-mut-2)}
.lc-cab .inp:focus{outline:none; border-color:var(--lc-accent); background:var(--lc-input-focus)}
.lc-cab textarea.inp{resize:vertical; min-height:110px; line-height:1.6}
.lc-cab select.inp{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7cdd1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;
  padding-right:34px;
}
.lc-cab select.inp option{background:var(--lc-surface); color:var(--lc-tx)}
.lc-cab .fw{max-width:460px}
.lc-cab .row2{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.lc-cab .row2 .inp{flex:1 1 240px; min-width:0}

.lc-cab .linkbtn{
  background:none; border:0; padding:0;
  color:var(--lc-gold-2); font:inherit; font-size:13.5px;
  text-decoration:underline; text-underline-offset:3px; transition:.15s;
}
.lc-cab .linkbtn:hover{color:#fff}

/* ── чипи / бейджі / таби ── */
.lc-cab .chips{display:flex; gap:8px; flex-wrap:wrap}
.lc-cab .chip{
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line-2);
  color:var(--lc-mut);
  border-radius:20px;
  padding:7px 14px;
  font-size:13px;
  display:inline-flex; align-items:center; gap:7px;
  cursor:pointer; transition:.15s; white-space:nowrap;
  text-decoration:none;
}
.lc-cab .chip:hover{border-color:var(--lc-accent); color:#fff}
.lc-cab .chip[aria-selected=true],
.lc-cab .chip[aria-checked=true]{background:rgba(var(--lc-accent-rgb),.18); border-color:var(--lc-accent); color:#fff; font-weight:700}
.lc-cab .chip img,
.lc-cab .chip svg{width:16px; height:16px; flex:none}
.lc-cab .chip.warn{border-color:rgba(var(--lc-red-rgb),.4); color:var(--lc-hint-bad); background:rgba(var(--lc-red-rgb),.08)}
.lc-cab .chip.warn:hover{border-color:var(--lc-red); color:#fff}
.lc-cab .chip.ok{border-color:rgba(var(--lc-green-rgb),.32); color:var(--lc-hint-ok); background:rgba(var(--lc-green-rgb),.08); cursor:default}
.lc-cab .chip.ok:hover{border-color:rgba(var(--lc-green-rgb),.32); color:var(--lc-hint-ok)}

.lc-cab .bdg{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700;
  padding:3px 8px;
  border-radius:var(--lc-r-sm);
  letter-spacing:.2px; white-space:nowrap;
}
.lc-cab .bdg.gold{background:var(--lc-gold); color:var(--lc-deep)}
.lc-cab .bdg.acc{background:var(--lc-accent); color:var(--lc-accent-ink)}
.lc-cab .bdg.gr{background:rgba(var(--lc-green-rgb),.18); color:var(--lc-green)}
.lc-cab .bdg.rd{background:rgba(var(--lc-red-rgb),.18); color:var(--lc-red)}
.lc-cab .bdg.mut{background:var(--lc-panel-2); color:var(--lc-mut)}

.lc-cab .tabs{display:flex; gap:2px; border-bottom:1px solid var(--lc-line); margin-bottom:16px}
.lc-cab .tab{
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--lc-mut);
  padding:10px 15px; font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  transition:.15s; text-decoration:none;
}
.lc-cab .tab:hover{color:#fff}
.lc-cab .tab[aria-selected=true]{color:#fff; border-bottom-color:var(--lc-accent); font-weight:700}
.lc-cab .tab .cnt{font-size:11px; background:var(--lc-panel-2); padding:1px 7px; border-radius:20px}
.lc-cab .tab[aria-selected=true] .cnt{background:rgba(var(--lc-accent-rgb),.22); color:#fff}
@media(max-width:900px){
  .lc-cab .tabs{overflow-x:auto; scrollbar-width:none}
  .lc-cab .tabs::-webkit-scrollbar{display:none}
  .lc-cab .tab{padding:10px 12px; white-space:nowrap}
}

/* ── таблиця ── */
.lc-cab .tbl{
  width:100%; border-collapse:collapse; font-size:13.5px;
  border:0 !important; color:var(--lc-tx) !important; margin:0;
}
.lc-cab .tbl th{
  text-align:left;
  font-size:11.5px; font-weight:700;
  color:var(--lc-mut-2);
  letter-spacing:.3px; text-transform:uppercase;
  padding:0 12px 9px;
  background:none !important;
  border:0 !important;
  border-bottom:1px solid var(--lc-line) !important;
}
.lc-cab .tbl td{
  padding:11px 12px;
  vertical-align:middle;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  font-size:13.5px;
}
.lc-cab .tbl tr:last-child td{border-bottom:0 !important}
.lc-cab .tbl tbody tr{transition:.13s}
.lc-cab .tbl tbody tr:hover{background:rgba(var(--lc-accent-rgb),.05)}
.lc-cab .tbl .num{text-align:right; font-variant-numeric:tabular-nums}
.lc-cab .scroll-x{overflow-x:auto}

/* ── порожній стан ── */
.lc-cab .empty{text-align:center; padding:40px 20px; color:var(--lc-mut)}
.lc-cab .empty > svg{width:42px; height:42px; color:var(--lc-line-2); margin:0 auto 13px; display:block}
.lc-cab .empty h4{margin:0 0 6px; font-size:15px; font-weight:700; color:var(--lc-mut) !important}
.lc-cab .empty p{margin:0 auto 15px; font-size:13px; line-height:1.6; max-width:340px}

/* ── слот предмета ── */
.lc-cab .slot{
  border-radius:var(--lc-r-sm);
  border:1px solid rgba(var(--lc-gold-rgb),.28);
  background:var(--lc-panel-3);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);
}
.lc-cab .slot.on{
  border-color:var(--lc-accent);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), 0 0 14px rgba(var(--lc-accent-rgb),.3);
}
.lc-cab .it{position:relative; display:inline-block; line-height:0}
.lc-cab .it img{width:34px; height:34px}
.lc-cab .it .q{
  position:absolute; right:-4px; bottom:-5px;
  background:var(--lc-surface); border:1px solid var(--lc-line-2);
  border-radius:var(--lc-r-sm);
  padding:0 4px;
  font-size:10px; line-height:14px; font-weight:700; color:var(--lc-mut);
}
.lc-cab .it.lg img{width:42px; height:42px}

/* ── банер ── */
.lc-cab .promo{
  margin-top:16px; position:relative; overflow:hidden;
  /* два коричневих літерали лишались від старої теми повз токени */
  background:linear-gradient(100deg,rgba(var(--lc-accent-rgb),.12),rgba(var(--lc-gold-rgb),.07));
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-lg);
  padding:18px 20px;
  display:flex; align-items:center; gap:15px;
}
.lc-cab .promo .sh{width:25px; height:25px; color:var(--lc-accent); flex:none}
.lc-cab .promo p{margin:0; font-size:13.5px; line-height:1.6}
.lc-cab .promo p .m{color:var(--lc-mut)}
@media(max-width:700px){
  .lc-cab .promo{align-items:flex-start}
  .lc-cab .promo .sh{margin-top:2px}
}

/* ── фокус ── */
.lc-cab .cta:focus-visible,
.lc-cab .btn:focus-visible,
.lc-cab .chip:focus-visible,
.lc-cab .tab:focus-visible,
.lc-cab .inp:focus-visible,
.lc-cab [data-act]:focus-visible{outline:2px solid var(--lc-accent); outline-offset:2px}
.lc-cab .inp:focus-visible{outline-offset:0}

/* ── тости ── */
#lc-toasts{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:1200;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; width:max-content; max-width:92vw;
}
#lc-toasts .tst{
  display:flex; align-items:center; gap:9px;
  padding:11px 16px; font-size:13.5px;
  background:var(--lc-surface);
  border:1px solid var(--lc-line-2);
  border-radius:var(--lc-r-md);
  box-shadow:0 14px 40px rgba(0,0,0,.65);
  animation:lc-tin .22s ease;
  color:var(--lc-tx);
}
#lc-toasts .tst svg{width:16px; height:16px; flex:none; color:var(--lc-green)}
#lc-toasts .tst.bad{border-color:rgba(var(--lc-red-rgb),.45)}
#lc-toasts .tst.bad svg{color:var(--lc-red)}
@keyframes lc-tin{from{opacity:0; transform:translateY(10px)}}

/* ── нижня панель на мобільному ── */
.lc-mbar{
  display:none;
  align-items:center; gap:12px;
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,4,4,.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--lc-line);
  box-shadow:0 -10px 30px rgba(0,0,0,.6);
}
.lc-mbar .mb-sum{display:flex; flex-direction:column; line-height:1.25}
.lc-mbar .mb-sum span{font-size:11px; color:var(--lc-mut-2)}
.lc-mbar .mb-sum b{font-size:18px; color:var(--lc-gold-2)}
.lc-mbar .mb-cta{width:auto; flex:1; margin:0; padding:12px 16px; font-size:14.5px}
@media(max-width:900px){
  .lc-mbar{display:flex}
  body.lc-has-mbar #main-container{padding-bottom:86px}
}
@media(max-width:400px){.lc-mbar .mb-sum b{font-size:16px}}

/* ── адаптив компонентів ── */
@media(max-width:900px){
  .lc-head h1,
  .lc-cab h1.lc-h1{font-size:23px}
  .lc-head{margin-bottom:14px}
  .lc-head .lead{font-size:12.5px}
  .lc-layout{grid-template-columns:1fr; gap:14px}
  .lc-cab .panel{padding:14px}
  .lc-cab .panel + .panel{margin-top:12px}
}
@media(max-width:620px){
  .lc-cab .ph .more{flex:1 1 100%; margin-left:0; justify-content:flex-end}
  .lc-cab .fw{max-width:none}
  .lc-cab .row2 .cta,
  .lc-cab .row2 .btn{width:100%; justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════
   6. МІСТ ДО ВЕНДОРСЬКОЇ РОЗМІТКИ
   Сторінки, які не переписані на .lc-cab (склад, підтримка, кейси,
   рейтинги), мають лишатись читабельними в новій палітрі.
   ═══════════════════════════════════════════════════════════════ */

#main-container .block{
  background:var(--lc-panel);
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-lg) !important;
  box-shadow:none !important;
}
#main-container .block-solid::before{border-color:rgba(87,87,87,.35)}
#main-container .block-header-default{border-bottom:1px solid var(--lc-line)}
#main-container .block-title{font-size:15px; font-weight:700; letter-spacing:.2px}

#main-container .table{
  border:0 !important;
  color:var(--lc-tx) !important;
}
#main-container .table thead th{
  background:none !important;
  color:var(--lc-mut-2) !important;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.3px;
  border-top:0 !important;
  border-bottom:1px solid var(--lc-line) !important;
}
#main-container .table td,
#main-container .table th{
  border-top:0 !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
}

#main-container .form-control{
  background:var(--lc-input);
  border:1px solid var(--lc-line);
  color:var(--lc-tx);
  border-radius:var(--lc-r-sm);
}
#main-container .form-control:focus{
  border-color:var(--lc-accent);
  background:var(--lc-input-focus);
  color:var(--lc-tx);
  box-shadow:none;
}
#main-container .input-group-text{
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line);
  color:var(--lc-mut);
}

#main-container .nav-tabs-block{border-bottom:1px solid var(--lc-line) !important}
#main-container .nav-tabs-block .nav-link{
  background:none !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  margin-left:0 !important;
  padding:10px 15px !important;
  color:var(--lc-mut) !important;
  box-shadow:none !important;
  text-transform:none;
}
#main-container .nav-tabs-block .nav-link.active,
#main-container .nav-tabs-block .nav-item.show .nav-link{
  background:none !important;
  color:#fff !important;
  border-bottom-color:var(--lc-accent) !important;
  font-weight:700;
}

#main-container .list-group-item{
  background:var(--lc-panel-2) !important;
  border:1px solid var(--lc-line) !important;
  border-radius:var(--lc-r-sm) !important;
  box-shadow:none;
  color:var(--lc-tx) !important;
  font-size:13px;
  text-transform:none;
  margin-bottom:6px;
}
#main-container .list-group-item.active,
#main-container .list-group-item:hover{
  border-color:var(--lc-accent) !important;
  background:rgba(var(--lc-accent-rgb),.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   СТОРІНКИ АВТОРИЗАЦІЇ (/sign-in, /sign-up, /reminder)

   Розмітку не чіпаємо — там форма з js-validation-*, прихованими
   полями module/module_form і селектом сервера; будь-яка перестановка
   ризикує зламати вхід. Тільки оформлення поверх наявних класів.
   ═══════════════════════════════════════════════════════════════ */
#main-container .content > .pb-20 h1,
#main-container .content .pb-20 h1{
  font:700 24px/1.25 Muli,"Mulish",sans-serif;
  color:#fff !important;
  letter-spacing:.2px;
}

/* у custom.css .new_block_content — коричневий градієнт від старої теми */
#main-container .new_block_content{
  background:var(--lc-panel) !important;
  padding:22px;
}
#main-container .block-themed label{
  font-size:13px; color:var(--lc-mut); font-weight:600; margin-bottom:6px;
}

/* поля вводу разом з іконкою-префіксом читаються як один елемент */
#main-container .input-group-text{
  border-right:0;
  border-radius:var(--lc-r-sm) 0 0 var(--lc-r-sm);
  color:var(--lc-accent);
}
#main-container .input-group .form-control{
  border-left:0;
  border-radius:0 var(--lc-r-sm) var(--lc-r-sm) 0;
}
#main-container .input-group .form-control:focus{border-left:0}

/* Автозаповнення Chrome. Воно малює власний світлий фон поверх
   background — темне поле після автопідстановки ставало білим.
   Перебиваємо через inset-тінь: свій background тут не працює. */
#main-container input:-webkit-autofill,
#main-container input:-webkit-autofill:hover,
#main-container input:-webkit-autofill:focus,
#main-container input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--lc-tx) !important;
  -webkit-box-shadow:0 0 0 1000px var(--lc-surface) inset !important;
  box-shadow:0 0 0 1000px var(--lc-surface) inset !important;
  caret-color:var(--lc-tx);
  transition:background-color 9999s ease-out 0s;
}

/* головна дія форми */
#main-container .btn-warning{
  background:var(--lc-accent) !important;
  border:0 !important;
  color:var(--lc-accent-ink) !important;
  border-radius:var(--lc-r-md) !important;
  font-weight:700;
  box-shadow:0 6px 18px rgba(var(--lc-accent-rgb),.22);
}
#main-container .btn-warning:hover{background:var(--lc-accent-hi) !important}

/* другорядні дії — «Реєстрація», «Відновити пароль» */
#main-container .btn-outline-primary{
  background:var(--lc-panel-2) !important;
  border:1px solid var(--lc-line-2) !important;
  color:var(--lc-gold-2) !important;
  border-radius:var(--lc-r-md) !important;
  box-shadow:none !important;
}
#main-container .btn-outline-primary:hover{
  border-color:var(--lc-accent) !important;
  background:rgba(var(--lc-accent-rgb),.12) !important;
  color:#fff !important;
}

/* підвал форми — у custom.css там коричневий градієнт */
#main-container .bg_body_gradient{
  background:var(--lc-panel-2) !important;
  border-top:1px solid var(--lc-line);
}

/* «Запам'ятати мене» */
#main-container .custom-control-label{color:var(--lc-mut); font-weight:400}
#main-container .custom-control-input:checked ~ .custom-control-label::before{
  background:var(--lc-accent) !important;
  border-color:var(--lc-accent) !important;
}

/* лічильник персонажів у списку акаунтів на складі */
#main-container .wh-acc-count{color:var(--lc-mut-2); font-weight:400; margin-left:2px}
/* інфо-плашка складу: у шаблоні їй заданий інлайновий #7a4e18 */
#main-container .block > div[style*="557581"]{
  background:rgba(var(--lc-accent-rgb),.10) !important;
  border:1px solid rgba(var(--lc-accent-rgb),.30);
  color:var(--lc-gold-2);
}

/* ═══════════════════════════════════════════════════════════════
   КОЛЕСО ПРЕДМЕТІВ (/panel/lucky-wheel)

   Оформлення, розмітку й формулювання не чіпаємо: сторінка навмисно
   описана як покупка предметів, без слів про удачу й виграш.

   У custom.css тут лишились кольори старої теми: коричневий фон
   .gamepage, жовті пунктирні рамки .wh/.wheel__itm/.history__container,
   бірюзова плашка .lw_title і червоний бейдж знижки.
   ═══════════════════════════════════════════════════════════════ */
#main-container .gamepage{
  background:var(--lc-panel) !important;
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-lg);
}
#main-container .wh{
  border:1px solid var(--lc-line-2) !important;
  border-radius:var(--lc-r-lg);
  box-shadow:none !important;
}
/* жовтий пунктир навколо секторів і історії — на синьому він кричить */
#main-container .wh::before,
#main-container .wheel__itm::before,
#main-container .history__container::before{
  border-color:rgba(var(--lc-accent-rgb),.35) !important;
  border-style:solid !important;
  border-width:1px !important;
  border-radius:var(--lc-r-md);
}
/* підсвітка обраного сектора */
@keyframes lc-lw-glow{
  0%,100%{box-shadow:0 0 6px 3px rgba(var(--lc-accent-rgb),.55)}
  50%    {box-shadow:0 0 10px 5px rgba(var(--lc-gold-rgb),.55)}
}
#main-container .wheel__itm .itm_active:after{animation:lc-lw-glow 2s infinite !important}

/* шапки блоків колеса */
#main-container .lw_title{
  background:var(--lc-panel-2) !important;
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-md);
  color:var(--lc-tx);
  font-size:15px;
  font-weight:700;
}
#main-container .lw_title_balance{
  background:rgba(var(--lc-accent-rgb),.14) !important;
  border-color:var(--lc-accent);
  color:var(--lc-gold-2);
}
#main-container .lw_discount{
  background:var(--lc-gold) !important;
  color:var(--lc-deep) !important;
  border-radius:var(--lc-r-sm);
  font-weight:700;
}
#main-container .lw_discount .discount-tooltip{
  background:var(--lc-surface);
  border:1px solid var(--lc-line-2);
  border-radius:var(--lc-r-md);
  box-shadow:0 18px 44px rgba(0,0,0,.7);
  color:var(--lc-tx);
}
#main-container .pay_button_lw{
  background:var(--lc-accent) !important;
  border:0 !important;
  color:var(--lc-accent-ink) !important;
  border-radius:var(--lc-r-md) !important;
  font-weight:700;
}
#main-container .pay_button_lw:hover{background:var(--lc-accent-hi) !important}

/* кейси, якщо плагін увімкнуть */
#main-container .case{
  background:var(--lc-panel-2) !important;
  border:1px solid var(--lc-line) !important;
  border-radius:var(--lc-r-lg);
}
#main-container .case:hover{border-color:var(--lc-accent) !important}

/* Іконки предметів на темній картці.
   .case__pic лишилась від світлого дизайну (radial-gradient #b47b24 -> #7a4e18,
   картка тоді була #f3e7d0). На темній панелі майже чорні іконки — запечатані
   купони, руни — зливалися з нею: контраст краю підкладки до чорного 2.13:1.
   Перефарбувати підкладку не можна: іконки це непрозорі квадрати довільної
   яскравості, і будь-яка заливка, що рятує темні, губить золоті (світліша
   підкладка дає 8.28 для чорної іконки, але 1.38 для золотої монети).
   Тому межу задає не колір, а подвійний обідок: до темної іконки читається
   світла лінія, до світлої — темна. Працює з будь-яким артом. */
#main-container .case__img{
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.42);
}

/* Назва предмета так само лишилась від світлого дизайну: game/css/style.css
   задає .case__title{color:#000}, і редизайн кабінету її не перекрив узагалі —
   у cabinet.css не було жодного правила для .case__title. На темній картці
   (--lc-panel-2 поверх фону дає ~#1d1610) це контраст 1.28:1, тобто текст
   практично невидимий. Основний текстовий колір кабінету дає 13.64:1.

   Ховер навмисно без !important: custom.css задає там color:#000 !important
   на помаранчевому тлі #f0cd82, і цей стан читається (12.99:1) — його правило
   має перемагати. */
#main-container .case__title{
  color:var(--lc-tx);
}

/* Той самий дефект, знайдений наскрізною перевіркою game/css/style.css: .ttl
   теж лишилась із color:#000 і теж ніде не перекрита. Використовується на
   сторінках кейсів (Cases/cases.tpl, Cases/cases_open.tpl) — заголовки й назва
   предмета. У колесі .ttl врятована сусіднім .text-white, у кейсах — ні. */
#main-container .ttl{
  color:var(--lc-tx);
}

/* ═══════════════════════════════════════════════════════════════
   ВЕНДОРСЬКІ ALERT-И
   Bootstrap-івські alert-warning / -info / -danger лишались світлими
   (кремовий фон, коричневий текст) — на темній панелі це чужорідна
   пляма. Зустрічаються на «колесо не налаштоване», у магазині та касі.
   ═══════════════════════════════════════════════════════════════ */
#main-container .alert{
  border-radius:var(--lc-r-md);
  border:1px solid transparent;
  font-weight:600;
}
#main-container .alert-warning{
  background:rgba(var(--lc-gold-rgb),.10) !important;
  border-color:rgba(var(--lc-gold-rgb),.30) !important;
  color:var(--lc-hint-warn) !important;
}
#main-container .alert-info,
#main-container .alert-primary{
  background:rgba(var(--lc-accent-rgb),.10) !important;
  border-color:rgba(var(--lc-accent-rgb),.30) !important;
  color:var(--lc-gold-2) !important;
}
#main-container .alert-danger{
  background:rgba(var(--lc-red-rgb),.10) !important;
  border-color:rgba(var(--lc-red-rgb),.30) !important;
  color:var(--lc-hint-bad) !important;
}
#main-container .alert-success{
  background:rgba(var(--lc-green-rgb),.10) !important;
  border-color:rgba(var(--lc-green-rgb),.30) !important;
  color:var(--lc-hint-ok) !important;
}

/* модалки (вендорські ajax-вікна кабінету) */
.modal-content{
  background:var(--lc-surface) !important;
  border:1px solid var(--lc-line-2);
  border-radius:var(--lc-r-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.75);
}
.modal-content .block-header.bg-primary-dark{
  background:none !important;
  border-bottom:1px solid var(--lc-line);
}
/* Усередині модалки лежить .block — а всі правила-мости заскоуплені в
   #main-container, куди модалка не входить (вона сусід <main> усередині
   #page-container). Через це тіло вікна лишалось із коричневим градієнтом
   custom.css. Тут .block має бути просто прозорим: фон дає .modal-content. */
.modal-content .block,
.modal-content .block-content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.modal-content .block-solid::before{display:none}

/* решта вендорських елементів, які трапляються в ajax-вікнах */
.modal-content .table{border:0 !important; color:var(--lc-tx) !important}
.modal-content .table thead th{
  background:none !important;
  color:var(--lc-mut-2) !important;
  border-top:0 !important;
  border-bottom:1px solid var(--lc-line) !important;
}
.modal-content .table td,
.modal-content .table th{
  border-top:0 !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
}
.modal-content .list-group-item{
  background:var(--lc-panel-2) !important;
  border:1px solid var(--lc-line) !important;
  border-radius:var(--lc-r-sm) !important;
  color:var(--lc-tx) !important;
  margin-bottom:6px;
}
.modal-content .list-group-item.active,
.modal-content .list-group-item:hover{
  border-color:var(--lc-accent) !important;
  background:rgba(var(--lc-accent-rgb),.12) !important;
}
.modal-content .alert-warning{
  background:rgba(var(--lc-gold-rgb),.10) !important;
  border:1px solid rgba(var(--lc-gold-rgb),.30) !important;
  color:var(--lc-hint-warn) !important;
}
.modal-content .alert-info,
.modal-content .alert-primary{
  background:rgba(var(--lc-accent-rgb),.10) !important;
  border:1px solid rgba(var(--lc-accent-rgb),.30) !important;
  color:var(--lc-gold-2) !important;
}
.modal-content .alert-danger{
  background:rgba(var(--lc-red-rgb),.10) !important;
  border:1px solid rgba(var(--lc-red-rgb),.30) !important;
  color:var(--lc-hint-bad) !important;
}
.modal-content .bg-body-light{background:none !important; border-top:1px solid var(--lc-line)}
.modal-backdrop.show{opacity:.78}

/* ═══════════════════════════════════════════════════════════════
   7. ГОЛОВНА (/panel)
   ═══════════════════════════════════════════════════════════════ */

/* ── шапка кабінету ── */
.lc-cab .mahead{display:grid; gap:18px 24px;
  grid-template-columns:minmax(0,1fr) minmax(280px,330px); align-items:start}
.lc-cab .hid{display:flex; align-items:center; gap:14px; min-width:0}
.lc-cab .hid .av{width:54px; height:54px; flex:none; border-radius:var(--lc-r-md);
  display:grid; place-items:center; background:var(--lc-panel-2); border:1px solid var(--lc-line-2)}
.lc-cab .hid .av img{width:30px; height:30px}
.lc-cab .hid .who{min-width:0}
.lc-cab .hid h2{margin:6px 0 5px; font:700 25px/1.15 Muli,"Mulish",sans-serif;
  word-break:break-word; color:#fff !important}
.lc-cab .hid .meta{display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px;
  color:var(--lc-mut); font-size:12.5px}
.lc-cab .hid .meta .dot{width:3px; height:3px; border-radius:50%; background:var(--lc-line-2)}

.lc-cab .hmn{background:var(--lc-panel-2); border:1px solid var(--lc-line);
  border-radius:var(--lc-r-md); padding:15px 16px}
.lc-cab .hmn .hh{display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:7px}
.lc-cab .hmn .hh > span{font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--lc-mut-2)}
.lc-cab .hmn .hb{display:flex; align-items:flex-end; gap:10px}
.lc-cab .hmn .hb img{width:28px; height:28px; margin-bottom:3px; padding:3px}
.lc-cab .hmn .hb b{font-size:29px; line-height:1; font-weight:700; color:var(--lc-gold-2);
  letter-spacing:.3px; font-variant-numeric:tabular-nums}
.lc-cab .hmn .hb em{font-style:normal; font-size:13px; color:var(--lc-mut); padding-bottom:3px}
.lc-cab .hmn .cta.sm{width:100%; margin-top:13px}

.lc-cab .hflags{grid-column:1/-1; border-top:1px solid var(--lc-line); padding-top:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lc-cab .hflags .lb{font-size:11.5px; color:var(--lc-mut-2); letter-spacing:.4px; text-transform:uppercase}

/* кнопка «оновити» в заголовку картки */
.lc-cab .upd{background:none; border:0; color:var(--lc-mut); font-size:12px;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:7px 4px; margin:-7px -4px}   /* те саме збільшення зони натискання */
.lc-cab .upd:hover{color:var(--lc-gold-2)}
.lc-cab .upd svg{width:13px; height:13px}

@media(min-width:1181px){
  .lc-cab .hid{grid-column:1; grid-row:1}
  .lc-cab .hmn{grid-column:2; grid-row:1/span 2}
  .lc-cab .hflags{grid-column:1; grid-row:2; border-top:0; padding-top:0; align-self:end}
}
@media(max-width:900px){
  .lc-cab .mahead{grid-template-columns:minmax(0,1fr); gap:14px}
  .lc-cab .hid h2{font-size:22px}
  .lc-cab .hmn .hb b{font-size:26px}
}
@media(max-width:620px){
  .lc-cab .hid .meta .dot{display:none}
  .lc-cab .hid .meta{gap:3px 12px}
  .lc-cab .hflags .lb{flex:1 1 100%}
}

/* ── смуга «Що зробити зараз» ── */
.lc-cab .nextbar{margin-top:16px}
.lc-cab .nb-h{display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--lc-mut) !important}
.lc-cab .nb-h svg{width:14px; height:14px; color:var(--lc-accent)}
.lc-cab .nb-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:11px}
.lc-cab .nb{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--lc-panel); border:1px solid var(--lc-line); border-radius:var(--lc-r-md);
  padding:12px 14px; color:var(--lc-tx); transition:.15s}
.lc-cab .nb:hover{border-color:var(--lc-accent); color:var(--lc-tx)}
.lc-cab .nb .ic{width:34px; height:34px; flex:none; border-radius:var(--lc-r-sm);
  display:grid; place-items:center; background:var(--lc-panel-2); color:var(--lc-accent)}
.lc-cab .nb .ic svg{width:18px; height:18px}
.lc-cab .nb .tx{min-width:0}
.lc-cab .nb .tt,.lc-cab .nb .ss{display:block}
.lc-cab .nb .tt{font-weight:700; font-size:13.8px; line-height:1.35}
.lc-cab .nb .ss{margin-top:2px; font-size:12px; color:var(--lc-mut); line-height:1.4}
.lc-cab .nb .ar{margin-left:auto; flex:none; color:var(--lc-mut-2)}
.lc-cab .nb .ar svg{width:17px; height:17px}
.lc-cab .nb.p1{border-color:var(--lc-accent); background:rgba(var(--lc-accent-rgb),.1)}
.lc-cab .nb.p1 .ic{background:var(--lc-accent); color:var(--lc-accent-ink)}

/* ── ігрові акаунти ── */
.lc-cab .acc{background:var(--lc-panel-2); border:1px solid var(--lc-line);
  border-radius:var(--lc-r-md); overflow:hidden}
.lc-cab .acc + .acc{margin-top:10px}
.lc-cab .acch{display:flex; align-items:center; gap:8px; padding:8px 13px}
.lc-cab .acctog{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:11px;
  background:none; border:0; color:var(--lc-tx); text-align:left;
  padding:6px 4px; border-radius:var(--lc-r-sm); transition:.14s}
.lc-cab .acctog:hover{background:rgba(var(--lc-accent-rgb),.06)}
.lc-cab .acch .ai{width:30px; height:30px; flex:none; border-radius:var(--lc-r-sm);
  background:var(--lc-panel-3); display:grid; place-items:center}
.lc-cab .acch .ai img{width:18px; height:18px}
.lc-cab .acch .who{min-width:0}
.lc-cab .acch .ln{font-weight:700; font-size:14px; letter-spacing:.2px; word-break:break-all}
.lc-cab .acch .cc{display:flex; align-items:center; gap:5px; font-size:12.5px;
  color:var(--lc-mut); margin-top:1px}
.lc-cab .acch .cc svg{width:13px; height:13px; flex:none; opacity:.7}
.lc-cab .acch .cv{margin-left:auto; flex:none; color:var(--lc-mut); transition:.2s}
.lc-cab .acch .cv svg{width:17px; height:17px; display:block}
.lc-cab .acch > .btn{flex:none; padding:6px 9px}
.lc-cab .acc[data-open="0"] .cv{transform:rotate(-90deg)}
.lc-cab .acc[data-open="0"] .accb,
.lc-cab .acc[data-open="0"] .accf{display:none}
.lc-cab .accb{padding:2px 13px 4px}
.lc-cab .chars.wacts{min-width:430px}
.lc-cab .chars th:first-child,
.lc-cab .chars td:first-child{width:100%}
.lc-cab .chars td .nm{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lc-cab .chars .hw{color:var(--lc-blue); display:inline-flex}
.lc-cab .chars .hw svg{width:14px; height:14px}
.lc-cab .accf{display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:11px 13px; border-top:1px solid var(--lc-line)}
.lc-cab .accnote{margin:0; padding:14px 4px 16px; text-align:center;
  color:var(--lc-mut); font-size:13px}
.lc-cab .acchidden{margin:12px 0 0; text-align:right}
.lc-cab .accfoot{display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--lc-line);
  font-size:12.5px; color:var(--lc-mut)}

/* ── склад ── */
.lc-cab .whead{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.lc-cab .whead .its{display:flex; gap:8px; flex:none}
.lc-cab .whead .its .it img{width:42px; height:42px}
.lc-cab .whead .tx{flex:1 1 200px; min-width:0}
.lc-cab .whead .tx b{display:block; font-size:15px; font-weight:700; line-height:1.3}
.lc-cab .whead .tx span{font-size:12.5px; color:var(--lc-mut)}
.lc-cab .whead .cta.sm{flex:none}
@media(max-width:620px){.lc-cab .whead .cta.sm{flex:1 1 100%; justify-content:center}}

/* ── реферальна програма ── */
.lc-cab .refstats{display:flex; gap:10px}
.lc-cab .refstat{flex:1 1 0; text-align:center}
.lc-cab .refstat b{display:block; font-size:22px; font-weight:700; color:var(--lc-gold-2)}
.lc-cab .refstat b.gr{color:var(--lc-green)}
.lc-cab .refstat span{display:block; margin-top:2px; font-size:11px;
  letter-spacing:.4px; text-transform:uppercase; color:var(--lc-mut-2)}
.lc-cab .refbig{text-align:center; padding:4px 0 2px}
.lc-cab .refbig b{display:block; font-size:26px; line-height:1.1; font-weight:700; color:var(--lc-gold-2)}
.lc-cab .refbig span{display:block; margin-top:3px; font-size:12.5px; color:var(--lc-mut)}
.lc-cab .reflink{display:flex; gap:8px; margin-top:11px}
.lc-cab .reflink .inp{flex:1 1 auto; min-width:0; font-size:12.5px}
.lc-cab .reflink .btn{flex:none; padding:9px 12px}

/* ── голосування ── */
.lc-cab .vrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0}
.lc-cab .vrow + .vrow{border-top:1px solid var(--lc-line)}
.lc-cab .vrow .vn{flex:1 1 90px; min-width:0; font-size:13.5px; color:var(--lc-mut)}
/* зірки: у розмітці 5→1, тому «обрана і всі менші» = сама + наступні сусіди.
   row-reverse повертає візуальний порядок 1→5. */
.lc-cab .stars{display:flex; flex-direction:row-reverse; justify-content:flex-end;
  gap:3px; margin-left:auto}
.lc-cab .star-in{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.lc-cab .star{padding:2px; line-height:0; color:var(--lc-line-2);
  transition:.14s; cursor:pointer; margin:0}
.lc-cab .star svg{width:22px; height:22px}
.lc-cab .star:hover{transform:scale(1.12)}
.lc-cab .star-in:checked ~ .star,
.lc-cab .star-in:checked + .star{color:var(--lc-gold)}
.lc-cab .star-in:checked ~ .star svg,
.lc-cab .star-in:checked + .star svg{fill:currentColor}
.lc-cab .star-in:focus-visible + .star{outline:2px solid var(--lc-accent); outline-offset:2px}

/* ── стартові набори ── */
.lc-cab .setrow{display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 4px; color:var(--lc-tx); transition:.15s; border-radius:var(--lc-r-sm)}
.lc-cab .setrow + .setrow{border-top:1px solid var(--lc-line)}
.lc-cab .setrow:hover{background:rgba(var(--lc-accent-rgb),.06); color:var(--lc-tx)}
.lc-cab .setrow .ics{display:flex; gap:3px; flex:none}
.lc-cab .setrow .ics img{width:34px; height:34px}
.lc-cab .setrow .tx{min-width:0; flex:1 1 auto}
.lc-cab .setrow .tx b{display:block; font-size:13.5px; font-weight:700}
.lc-cab .setrow .tx span{font-size:11.5px; color:var(--lc-mut)}
.lc-cab .setrow .pr{flex:none; text-align:right; font-weight:700; color:var(--lc-gold-2);
  font-variant-numeric:tabular-nums; font-size:14px}
.lc-cab .setrow .pr del{display:block; font-weight:400; font-size:11.5px; color:var(--lc-mut-2)}

/* ═══════════════════════════════════════════════════════════════
   8. НАЛАШТУВАННЯ (/panel/settings)
   ═══════════════════════════════════════════════════════════════ */

/* у проді віджет рендериться в col-12 без правої колонки, але на 1680px
   форма на всю ширину виглядає порожньою — обмежуємо колонку контенту */
.lc-settings{max-width:980px}

.lc-cab .pane-h{margin:0 0 4px; font-size:16px; font-weight:700; color:#fff !important}

.lc-cab .linkrow{margin:11px 0 0}

/* довідка Telegram-бота: lang_text — готовий dt/dd з мовного файлу */
.lc-cab .tghelp{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--lc-line);
  color:var(--lc-mut); font-size:12.5px; line-height:1.65}
.lc-cab .tghelp dl{margin:0}
.lc-cab .tghelp dt{margin-top:10px; font-weight:700; color:var(--lc-tx)}
.lc-cab .tghelp dd{margin:3px 0 0}
.lc-cab .tghelp dd p{margin:0}
.lc-cab .tghelp a{color:var(--lc-gold-2)}
.lc-cab .tghelp code{background:var(--lc-panel-3); border:1px solid var(--lc-line);
  border-radius:var(--lc-r-sm); padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}

/* таблиця прихованих акаунтів: логін — це <th scope="row"> */
.lc-cab .hidtbl{min-width:400px}
.lc-cab .hidtbl tbody th{text-align:left; text-transform:none; letter-spacing:0;
  font-size:13.5px; font-weight:600; color:var(--lc-tx); padding:11px 12px;
  background:none !important; border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important; word-break:break-all}
.lc-cab .hidtbl tbody tr:last-child th{border-bottom:0 !important}
.lc-cab .hidtbl td:last-child{width:1%; white-space:nowrap; text-align:right}

/* ═══════════════════════════════════════════════════════════════
   9. МАГАЗИН (/panel/shop)
   ═══════════════════════════════════════════════════════════════ */

/* ── смуга балансу над каталогом ── */
.lc-cab .balbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.lc-cab .balbar .ic{width:44px; height:44px; flex:none; padding:5px}
.lc-cab .balbar .tx{min-width:0; flex:1 1 auto}
.lc-cab .balbar .lb{display:block; font-size:11px; letter-spacing:.7px;
  text-transform:uppercase; color:var(--lc-mut-2)}
.lc-cab .balbar .vl{display:flex; align-items:baseline; gap:8px; margin-top:2px}
.lc-cab .balbar .vl b{font-size:27px; line-height:1.1; font-weight:700; color:var(--lc-gold-2);
  font-variant-numeric:tabular-nums; letter-spacing:.3px}
.lc-cab .balbar .vl em{font-style:normal; font-size:13px; color:var(--lc-mut)}
.lc-cab .balbar .cta.sm{flex:none}
@media(max-width:900px){
  .lc-cab .balbar .vl b{font-size:24px}
  .lc-cab .balbar .cta.sm{flex:1 1 100%; justify-content:center}
}

/* ── картки наборів ── */
.lc-cab .packs{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px; margin-top:16px}
/* .panel + .panel додає margin-top — у гріді це зсуває сусідні картки */
.lc-cab .packs .panel + .panel{margin-top:0}
.lc-cab .pack{display:flex; flex-direction:column; gap:13px}
.lc-cab .pack .top{display:flex; align-items:flex-start; gap:11px}
.lc-cab .pack h2{margin:0; font:700 19px/1.25 Muli,"Mulish",sans-serif;
  flex:1 1 auto; min-width:0; color:#fff !important}
.lc-cab .pack .prc{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.lc-cab .pack .prc b{font-size:24px; line-height:1.1; font-weight:700;
  color:var(--lc-gold-2); font-variant-numeric:tabular-nums}
.lc-cab .pack .prc em{font-style:normal; font-size:12.5px; color:var(--lc-mut)}
.lc-cab .pack .prc del{font-size:12.5px; color:var(--lc-mut-2)}
.lc-cab .pack .cnt{font-size:12.5px; color:var(--lc-mut)}
.lc-cab .pack .cta{margin-top:auto}
@media(max-width:900px){.lc-cab .pack h2{font-size:18px}}
@media(max-width:400px){.lc-cab .packs{grid-template-columns:1fr}}

/* ── стрічка іконок предметів ── */
.lc-cab .ics{display:flex; flex-wrap:wrap; gap:6px}
.lc-cab .ics img{width:32px; height:32px}
.lc-cab .ics .rest{width:32px; height:32px; border-radius:var(--lc-r-sm);
  display:grid; place-items:center; background:var(--lc-panel-2);
  border:1px solid var(--lc-line-2); color:var(--lc-mut); font-size:11.5px; font-weight:700}

/* ── сторінка набору ── */
.lc-cab .crumb{display:inline-flex; margin-bottom:12px}
.lc-cab .items{min-width:300px}
.lc-cab .items td:first-child{width:100%}
.lc-cab .items th:last-child,
.lc-cab .items td:last-child{width:1%; white-space:nowrap}
.lc-cab .itm{display:flex; align-items:center; gap:11px; min-width:0}
.lc-cab .itm img{width:32px; height:32px; flex:none}
.lc-cab .itm .nm{min-width:0; word-break:break-word}
.lc-cab .itm .enc{color:var(--lc-gold-2); font-weight:700}
.lc-cab .itmchk{width:16px; height:16px; flex:none; accent-color:var(--lc-accent); cursor:pointer}

/* лічильник кількості для apiece-позицій */
.lc-cab .qty{display:inline-flex; align-items:center; gap:4px}
.lc-cab .qbtn{width:26px; height:26px; flex:none; padding:0; line-height:1;
  background:var(--lc-panel-2); border:1px solid var(--lc-line-2);
  border-radius:var(--lc-r-sm); color:var(--lc-gold-2); font-size:15px}
.lc-cab .qbtn:hover{border-color:var(--lc-accent); color:#fff}
.lc-cab .qty-input{width:62px; padding:4px 6px; text-align:center}

/* блок доставки */
.lc-cab .dl2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media(max-width:560px){.lc-cab .dl2{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   10. КАСА (/panel/donations)

   Розмітка НЕ переписана навмисно: у custom/widget_donations.tpl
   живе бойова маршрутизація платежів — гео-сортування плиток,
   гейти MonoPay / СБП / ЕРИП / Bybit, капча, слайдер суми, Vue-список
   методів. Будь-яка перестановка блоків ламає ці скрипти, тому
   прототип відтворюємо оформленням поверх наявних класів.
   ═══════════════════════════════════════════════════════════════ */

/* ── пакети coins ──────────────────────────────────────────────
   Це ті самі вендорські кнопки .btn_min_slider.btn_input_fixed
   [data-value] — на них висить обробник, який проставляє #coin і
   рухає слайдер. Тут лише оформлення під плитку пакета. */
#main-container .dn-packs{
  display:grid;
  /* auto-fit, а не фіксовані 6 колонок: у вужчому контейнері плитки
     переносяться, а не вилазять із панелі на сусідню колонку */
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:11px;
}
/* кнопка — grid-item; без min-width:0 вона не стискається нижче свого
   контенту й малюється поверх сусідніх блоків */
#main-container .dn-packs .btn_min_slider{
  min-width:0;
  overflow:hidden;
}

/* ціну й «Разом» дописує cabinet.js */
#main-container .dn-packs .dn-price{
  font-size:12.5px; font-weight:700; color:var(--lc-gold-2);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
#main-container .dn-packs .dn-tot{
  font-size:12px; color:var(--lc-mut); white-space:nowrap; font-weight:400;
}
#main-container .btn_min_slider_btn1 .dn-tot{color:#fff; font-weight:700}

/* ── «Інша сума» ── */
#main-container .own{
  margin-top:13px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-md);
  padding:11px 14px;
}
#main-container .own > .lb{
  display:flex; align-items:center; gap:9px;
  flex:1 1 auto; color:var(--lc-mut); font-size:13.5px;
}
#main-container .own > .lb svg{width:16px; height:16px; flex:none; color:var(--lc-accent)}
#main-container .own .info_to_pay_block_3{margin:0 !important; flex:0 1 220px}
#main-container .own .info_to_pay_block_3 label{display:none}
#main-container .own .input-group-prepend{display:none}
#main-container .own #coin{
  border-radius:var(--lc-r-sm) !important;
  text-align:right;
}
#main-container .own #dn-calc{flex:none}
/* нативні стрілки input[type=number] на темному полі виглядають чужими
   й налазять на саме число — суму задають плитки та кнопка «Розрахувати» */
#main-container .own #coin::-webkit-outer-spin-button,
#main-container .own #coin::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
#main-container .own #coin{-moz-appearance:textfield; appearance:textfield}
@media(max-width:620px){
  #main-container .own > .lb{flex:1 1 100%}
  #main-container .own .info_to_pay_block_3{flex:1 1 auto}
}

/* слайдер лишається в DOM (без нього падає changeSum), але не показується:
   у референсі суму задають плитки й поле «Інша сума» */
#main-container .dn-slider{display:none}

/* ── чек ── */
#main-container .dn-order .pay_submit{margin-top:13px}
#main-container .dn-order .safe{
  margin-top:10px; text-align:center; color:var(--lc-mut-2); font-size:12px;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
#main-container .dn-order .hint:empty{display:none}

/* контейнери бонусних блоків лишились у DOM прихованими (updateUI пише в них),
   сама панель прибрана з макета — див. коментар у widget_donations.tpl */
#main-container .dn-gifts-src{display:none !important}

/* заголовки секцій каси → .ph з прототипу */
#main-container .payment-title{
  color:#fff !important;
  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;
}
#main-container .payment-title span{
  background:var(--lc-accent);
  color:var(--lc-accent-ink);
  border-radius:20px;
  padding:2px 10px;
  font-size:12px;
  font-weight:700;
}

/* поле суми */
#main-container .info_to_pay_block_3{width:100%}
#main-container .info_to_pay_block_3 label{
  font-size:13px; color:var(--lc-mut); font-weight:600; margin-bottom:6px;
}
#main-container #coin{
  font-size:16px;
  font-variant-numeric:tabular-nums;
}

/* швидкі суми → плитки наборів (.pk з прототипу) */
#main-container .btn_min_slider{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:14px 8px 12px;
  font-size:19px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--lc-tx);
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line-2);
  border-radius:var(--lc-r-md);
  box-shadow:none;
  transition:.15s;
}
#main-container .btn_min_slider:hover{
  background:rgba(var(--lc-accent-rgb),.08);
  border-color:var(--lc-accent);
  color:#fff;
  transform:none;
}
#main-container .btn_min_slider span{
  margin-left:0;
  background:var(--lc-accent);
  color:var(--lc-accent-ink);
  border:0;
  border-radius:var(--lc-r-sm);
  padding:3px 8px;
  font-size:11px;
  font-weight:700;
}
/* активна швидка сума */
#main-container .btn_min_slider_btn1{
  background:rgba(var(--lc-accent-rgb),.16);
  border-color:var(--lc-accent);
  box-shadow:inset 0 0 0 1px var(--lc-accent);
  color:#fff;
}
#main-container .btn_min_slider_btn1 span{background:var(--lc-accent); color:var(--lc-accent-ink)}

/* перерахунок у валютах → сітка .rr з прототипу */
#main-container #calculation_board{font-size:13.5px}
#main-container #calculation_board > span{
  display:block;
  margin-bottom:10px;
  font-size:11.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--lc-mut-2);
}
#main-container #calculation_board .row{
  margin:0 0 6px;
  background:var(--lc-panel-3);
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-sm);
  padding:7px 0;
}
#main-container #calculation_board .row .col-12{color:var(--lc-mut)}
#main-container #calculation_board .pull-right{
  color:var(--lc-gold-2);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ── плитки способів оплати ──────────────────────────────────────
   Тёмна картка: лого → назва → підпис → комісія, радіо праворуч
   угорі, у обраної золота рамка й галочка.

   Розмітку тримає {macro pm_tile} в custom/widget_donations.tpl;
   обгортки .pay_chose_block[data-pay-id] / .cc-selector-2 /
   input[name=payment_system] лишились вендорськими — на них
   зав'язані гео-сортування і гейти видимості методів. */
#main-container .gutters-tiny.pmt-grid{
  display:grid;
  /* 132px, щоб у контенті 758px помістилось 5 плиток у ряд, як у макеті:
     5×132 + 4×12 = 708 ≤ 758 */
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:12px;
  align-items:stretch;
}
#main-container .pmt-grid .pay_chose_block{margin-bottom:0; display:flex}
#main-container .pmt-grid .cc-selector-2,
#main-container .pmt-grid .cc-selector-2 > .d-flex{display:flex; width:100%}

#main-container .pmt{
  position:relative;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:16px 12px 14px;
  text-align:center;
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line-2);
  border-radius:var(--lc-r-lg);
  cursor:pointer;
  transition:.15s;
  margin:0;
  /* custom.css вішає на .drinkcard-cc brightness/grayscale-фільтр —
     на тёмній картці він вибілює лого */
  filter:none;
}
#main-container .drinkcard-cc.pmt:hover{
  filter:none;
  border-color:rgba(var(--lc-gold-rgb),.55);
  background:rgba(var(--lc-gold-rgb),.06);
}
#main-container .cc-selector-2 input:checked + .pmt{
  border-color:var(--lc-gold);
  background:rgba(var(--lc-gold-rgb),.10);
  filter:none;
}

/* радіо */
#main-container .pmt-rad{
  position:absolute; top:10px; right:10px;
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--lc-line-2);
  display:grid; place-items:center;
  transition:.15s;
}
#main-container .cc-selector-2 input:checked + .pmt .pmt-rad{
  border-color:var(--lc-gold);
  background:var(--lc-gold);
}
#main-container .cc-selector-2 input:checked + .pmt .pmt-rad::after{
  content:"";
  width:8px; height:5px;
  border-left:2px solid var(--lc-deep);
  border-bottom:2px solid var(--lc-deep);
  transform:rotate(-45deg) translate(1px,-1px);
}

/* лого / підписи */
#main-container .pmt-lg{
  height:36px; width:100%;
  display:grid; place-items:center;
  margin-bottom:6px;
}
#main-container .pmt-lg img{
  max-height:32px; max-width:100%; width:auto;
  border-radius:0;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
#main-container .pmt-nm{font-size:14px; font-weight:700; color:#fff; line-height:1.3}
#main-container .pmt-sub{font-size:11.5px; color:var(--lc-mut-2); line-height:1.35}
#main-container .pmt-fee{font-size:11.5px; color:var(--lc-mut-2); line-height:1.35}
#main-container .pmt-fee.free{color:var(--lc-gold-2); font-weight:700}

/* плитки поза сіткою (monobank_modal, wata) лишились на .pay_image */
#main-container .pay_image{
  border-radius:var(--lc-r-md);
  border:2px solid transparent;
  box-shadow:none;
  transition:.15s;
}
#main-container .drinkcard-cc:hover .pay_image{border-color:rgba(var(--lc-accent-rgb),.55)}
#main-container .drinkcard-cc:hover{filter:none}
#main-container .paypal_info_pay{
  background:var(--lc-accent);
  color:var(--lc-accent-ink);
  font-weight:700;
  border-radius:var(--lc-r-sm);
}
#main-container .badge_pay_recommend{
  background:var(--lc-accent) !important;
  background-image:none !important;
  color:var(--lc-accent-ink);
  border-radius:var(--lc-r-sm);
  font-weight:700;
}

/* блок подарунків за поповнення */
#main-container .info_count_custom{
  background:var(--lc-accent);
  border-color:var(--lc-accent);
  color:var(--lc-accent-ink);
  border-radius:var(--lc-r-sm);
  box-shadow:none;
}
#main-container .next_count_info_block{
  border-color:var(--lc-line-2);
  color:var(--lc-mut);
  border-radius:var(--lc-r-sm);
  box-shadow:none;
}
#main-container .block_z_img,
#main-container .icon_x32_border{
  border-radius:var(--lc-r-sm);
  border-color:rgba(var(--lc-gold-rgb),.28);
}
#main-container .bonus_coin_span{
  background:var(--lc-accent);
  color:var(--lc-accent-ink);
  border-radius:var(--lc-r-sm);
  font-weight:700;
}

/* головна дія каси → .cta з прототипу */
#main-container .pay_submit{
  background:var(--lc-accent);
  color:var(--lc-accent-ink);
  border-radius:var(--lc-r-md);
  font-size:15px;
  font-weight:700;
  padding:13px 18px;
  box-shadow:0 6px 18px rgba(var(--lc-accent-rgb),.22);
}
#main-container .pay_submit:hover{
  background:var(--lc-accent-hi);
  box-shadow:0 8px 22px rgba(var(--lc-accent-rgb),.3);
  transform:none;
}
#main-container .btn-more-paysystem{
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line-2);
  color:var(--lc-gold-2);
  border-radius:var(--lc-r-md);
}
#main-container .btn-more-paysystem:hover{
  border-color:var(--lc-accent);
  background:rgba(var(--lc-accent-rgb),.12);
  color:#fff;
}

/* Vue-список методів усередині обраної системи */
#main-container .donations-method-item{
  padding:7px 14px;
  border-radius:20px;
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line-2);
  color:var(--lc-mut);
  font-size:13px;
  cursor:pointer;
  transition:.15s;
}
#main-container .donations-method-item:hover{border-color:var(--lc-accent); color:#fff}
#main-container .donations-method-item.method-active{
  background:rgba(var(--lc-accent-rgb),.18);
  border-color:var(--lc-accent);
  color:#fff;
  font-weight:700;
}
#main-container .donations-method-item input{position:absolute; opacity:0; pointer-events:none}

/* ═══════════════════════════════════════════════════════════════
   11. ВЕНДОРСЬКІ AJAX-МОДАЛКИ
   #modal-ajax живе поза #main-container, тому міст із секції 6
   на нього не поширюється — стилі форм дублюємо тут.
   ═══════════════════════════════════════════════════════════════ */
.modal-content .modal-ajax-title{color:#fff; font-size:17px; font-weight:700}
.modal-content label,
.modal-content .col-form-label{color:var(--lc-mut); font-size:13px; font-weight:600; border:0 !important}
.modal-content .form-control{
  background:var(--lc-input);
  border:1px solid var(--lc-line);
  color:var(--lc-tx);
  border-radius:var(--lc-r-sm);
}
.modal-content .form-control:focus{
  border-color:var(--lc-accent);
  background:var(--lc-input-focus);
  color:var(--lc-tx);
  box-shadow:none;
}
.modal-content .form-control option{background:var(--lc-surface); color:var(--lc-tx)}
.modal-content .input-group-text,
.modal-content .btn-secondary{
  background:var(--lc-panel-2);
  border:1px solid var(--lc-line);
  color:var(--lc-mut);
}
/* помилки полів форми переказу */
.modal-content .lc-field-err{
  margin-top:6px; font-size:12.5px; line-height:1.4;
  color:var(--lc-red); font-weight:600;
}
.modal-content .lc-invalid{
  border-color:var(--lc-red) !important;
  box-shadow:0 0 0 2px rgba(var(--lc-red-rgb),.18);
}

/* вікно підтвердження переказу монет у гру (малює cabinet.js) */
.modal-content .lc-ingame-confirm{padding:20px}
.modal-content .lc-ingame-confirm h3{margin:0 0 14px; font-size:17px}
.modal-content .lc-ingame-confirm .ic-lb{
  font-size:12.5px; color:var(--lc-mut); margin-bottom:7px;
}
/* картка сервера-отримувача */
.modal-content .lc-ingame-confirm .ic-srv{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; margin-bottom:14px;
  background:rgba(var(--lc-accent-rgb),.10);
  border:1px solid var(--lc-accent);
  border-radius:var(--lc-r-lg);
}
.modal-content .lc-ingame-confirm .ic-ava{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--lc-r-md);
  background:var(--lc-accent); color:var(--lc-accent-ink);
  font-weight:700; font-size:14px; letter-spacing:.5px;
}
.modal-content .lc-ingame-confirm .ic-srv-n{
  flex:1 1 auto; min-width:0;
  font-size:17px; font-weight:700; color:#fff;
}
/* картка акаунта й персонажа */
.modal-content .lc-ingame-confirm .ic-card{
  padding:12px 14px; margin-bottom:14px;
  background:var(--lc-panel-3);
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-lg);
}
.modal-content .lc-ingame-confirm .ic-card-h{font-size:14px; color:var(--lc-mut)}
.modal-content .lc-ingame-confirm .ic-card-h b{color:#fff; font-size:15px}
.modal-content .lc-ingame-confirm .ic-card-s{margin-top:3px; font-size:13px; color:var(--lc-mut)}
.modal-content .lc-ingame-confirm .ic-card-f{
  margin-top:9px; padding-top:9px;
  border-top:1px solid var(--lc-line);
  font-size:12px; color:var(--lc-mut-2);
}
/* підтвердження галочкою */
.modal-content .lc-ingame-confirm .ic-check{
  display:flex; align-items:flex-start; gap:9px;
  margin:14px 0 0; font-size:13.5px; color:var(--lc-mut);
  cursor:pointer; font-weight:400;
}
.modal-content .lc-ingame-confirm .ic-check input{
  width:17px; height:17px; flex:none; margin-top:1px;
  accent-color:var(--lc-accent); cursor:pointer;
}
.modal-content .lc-ingame-confirm .cta{margin-top:12px}
.modal-content .lc-ingame-confirm .cta.ghost{margin-top:8px}

.modal-content .btn-block-option{color:var(--lc-mut)}
.modal-content .btn-block-option:hover{color:#fff}
/* головна дія модалки */
.modal-content .modal-ajax-footer .btn,
.modal-content .btn-alt-primary,
.modal-content .btn-alt-success{
  background:var(--lc-accent);
  border:0;
  color:var(--lc-accent-ink);
  border-radius:var(--lc-r-md);
  font-weight:700;
  box-shadow:0 6px 18px rgba(var(--lc-accent-rgb),.22);
}
.modal-content .modal-ajax-footer .btn:hover,
.modal-content .btn-alt-primary:hover,
.modal-content .btn-alt-success:hover{background:var(--lc-accent-hi); color:var(--lc-accent-ink)}