/* Livex — марката върху Metronic.
 *
 * Зарежда се СЛЕД styles.css, иначе не бие нищо.
 *
 * Цветовете са взети от логото (1 ноември 2026). Ако не съвпадат точно с
 * изходния файл, поправя се тук — на едно място, а не из шаблоните.
 *
 * Класовете най-долу са написани на ръка, защото Metronic Tailwind идва
 * предварително компилиран: клас, който собствените им демота не ползват,
 * просто не съществува и не дава грешка. Проверява се с tools/check-classes.py.
 */

:root {
  /* Марката: виолетовото от логото. */
  --primary: #7c4df5;
  --primary-foreground: #ffffff;

  /* Искрата от логото. Малки акценти, не цели повърхности. */
  --spark: #c5f24e;
  --spark-foreground: #16210a;

  /* Мастилото от логото — тъмната повърхност. */
  --ink: #0e1219;

  /* Състояния. Резервирани — никога не се ползват като цвят на серия. */
  --good: #10b981;
  --warning: #f59e0b;
  --danger: #f4564a;
  --points: #f0b429;

  /* Платформи. Само за логата, не за данни.
   * Внимание: зеленото на Kick е съседно на искрата — не ги слагай едно до друго. */
  --kick: #53fc18;
  --discord: #5865f2;

  /* Категорични серии, светла тема.
   * Бележка: трета серия (виолетово) вече се бие с цвета на марката.
   * За графики с марков елемент в кадъра я пропускай или я мести последна. */
  --series-1: #0098a4;
  --series-2: #b65400;
  --series-3: #8851d1;
  --series-4: #008d24;
  --series-5: #bf3584;
  --series-6: #0077cd;
}

.dark {
  --primary: #8b61f7;
  --primary-foreground: #0b0618;

  --background: #0e1219;
  --card: #151a24;
  --popover: #151a24;

  --series-1: #00a7a8;
  --series-2: #e36a00;
  --series-3: #a474ec;
  --series-4: #3aad47;
  --series-5: #dd5da1;
  --series-6: #2096f8;
}

/* ------------------------------------------------------------------ */
/* Марката                                                            */
/* ------------------------------------------------------------------ */

.livex-accent { color: var(--primary); }
.livex-spark { color: var(--spark); }
.livex-points { color: var(--points); }
.livex-kick { color: var(--kick); }
.livex-discord { color: var(--discord); }

/* Знакът в хедъра и сайдбара */
.livex-mark {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.livex-mark-sm {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Логото на платформата вътре в бутон */
.livex-platform-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.livex-btn-kick {
  background-color: var(--kick);
  color: #0a1f03;
  border-color: var(--kick);
}
.livex-btn-kick:hover { background-color: color-mix(in oklab, var(--kick) 86%, black); }

.livex-btn-discord {
  background-color: var(--discord);
  color: #ffffff;
  border-color: var(--discord);
}
.livex-btn-discord:hover { background-color: color-mix(in oklab, var(--discord) 86%, black); }

/* Сияние зад заглавието на началната страница.

   `overflow: hidden` е ЗАДЪЛЖИТЕЛЕН, не украса. Псевдоелементът долу
   излиза 10% извън десния ръб и без това правило разтяга страницата с
   точно 10% — измерено: 1760px при екран 1600. Нито един видим елемент
   не излиза, затова на снимка не личи; личи с пръст на телефон, като
   цялата страница се влачи настрани. */
.livex-glow { position: relative; isolation: isolate; overflow: hidden; }
.livex-glow::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--primary) 24%, transparent), transparent 70%),
    radial-gradient(38% 46% at 82% 6%, color-mix(in oklab, var(--spark) 12%, transparent), transparent 70%);
}

.livex-card-accent {
  border-color: color-mix(in oklab, var(--primary) 38%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 12%, transparent);
}

.livex-step-line {
  height: 1px;
  background: linear-gradient(to right, color-mix(in oklab, var(--primary) 45%, transparent), transparent);
}

.livex-max-w-prose { max-width: 68ch; }
.livex-max-w-form { max-width: 420px; }

/* ------------------------------------------------------------------ */
/* Utility класове, които ги няма в компилирания Metronic             */
/* ------------------------------------------------------------------ */

.content-start { align-content: flex-start; }
.w-fit { width: fit-content; }
.hover\:underline:hover { text-decoration-line: underline; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-20 { margin-top: 5rem; }
.p-6 { padding: 1.5rem; }
.py-16 { padding-block: 4rem; }
.py-20 { padding-block: 5rem; }

/* Футърът на панела — Metronic го ползва в demo1, но правилото липсва. */
.kt-footer { flex-shrink: 0; }

@media (width >= 40rem) {
  .sm\:inline-flex { display: inline-flex; }
  .sm\:justify-between { justify-content: space-between; }
}

@media (width >= 48rem) {
  .md\:flex { display: flex; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (width >= 64rem) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Съобщението за бисквитките                                         */
/* Позиционирането е написано тук, за да не зависи от utility класове,*/
/* които компилираният Metronic може да няма.                         */
/* ------------------------------------------------------------------ */

.livex-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  padding: 0.75rem;
  pointer-events: none;
}
.livex-cookie[hidden] { display: none; }

.livex-cookie-inner {
  pointer-events: auto;
  max-width: 64rem;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border-radius: calc(var(--radius) + 0.25rem);
  border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border));
  background-color: var(--card);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.45);
}

.livex-cookie-icon {
  color: var(--spark);
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.livex-cookie-icon svg { width: 1.375rem; height: 1.375rem; }

.livex-cookie-text {
  flex: 1 1 auto;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--secondary-foreground);
  margin: 0;
}

@media (width < 40rem) {
  .livex-cookie-inner { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------------ */
/* Лейаутът на панела                                                 */
/*                                                                    */
/* В компилирания styles.css НЯМА нито едно правило за .kt-sidebar,   */
/* .kt-wrapper, .kt-header и .demo1 — класовете се срещат само като   */
/* части от варианти. Затова целият фиксиран лейаут е написан тук.    */
/* Проверено на 1 ноември 2026: без това сайдбарът просто не се вижда.*/
/* ------------------------------------------------------------------ */

:root {
  --livex-sidebar: 17rem;
  --livex-sidebar-narrow: 4.5rem;
  --livex-header: 4rem;
}

.kt-sidebar {
  width: var(--livex-sidebar);
  transition: width 0.25s ease;
}

.kt-sidebar-header {
  height: var(--livex-header);
  border-bottom: 1px solid var(--border);
}

.kt-sidebar-content {
  min-height: 0;
  overflow: hidden;
}

.kt-scrollable-y-hover {
  overflow-y: auto;
  scrollbar-width: thin;
}

.kt-header {
  height: var(--livex-header);
  border-bottom: 1px solid transparent;
}

.kt-wrapper {
  padding-top: var(--livex-header);
  min-width: 0;
}

@media (width >= 64rem) {
  .kt-wrapper { padding-inline-start: var(--livex-sidebar); }
  .kt-header { inset-inline-start: var(--livex-sidebar); }

  body.kt-sidebar-collapse .kt-sidebar { width: var(--livex-sidebar-narrow); }
  body.kt-sidebar-collapse .kt-wrapper { padding-inline-start: var(--livex-sidebar-narrow); }
  body.kt-sidebar-collapse .kt-header { inset-inline-start: var(--livex-sidebar-narrow); }
  body.kt-sidebar-collapse .kt-menu-title,
  body.kt-sidebar-collapse .kt-menu-heading,
  /* Криеше и знака на логото, когато той беше в <span> — затова изключваме
     изрично всичко марково. Знакът вече е <img>, но правилото остава,
     за да не се върне същият капан при следваща промяна. */
  body.kt-sidebar-collapse .kt-sidebar-header span:not(.livex-keep) { display: none; }
  body.kt-sidebar-collapse .kt-badge { display: none; }
}

/* ------------------------------------------------------------------ */
/* Ширина на страниците и подравняване на текста                      */
/*                                                                    */
/* По желание на потребителя: блоковете вървят по цялата ширина, а    */
/* текстът е двустранно подравнен. За да не зеят дупки между думите   */
/* на български, пускаме и пренасяне.                                 */
/* ------------------------------------------------------------------ */

.kt-container-fixed {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

main p,
main li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Кратките текстове НЕ се подравняват двустранно.

   Решение №4 («двустранно подравнен текст») важи за абзаци, които имат
   какво да подравняват. На два реда justify няма накъде да разпредели
   и разтяга междусловията до дупки колкото буква — «Панелът, · командите
   · и · точките · са · зад · този · вход.»

   `hyphens: auto` НЕ помага: измерено е, че кутия с `hyphens:auto` и с
   `hyphens:none` дава абсолютно същата височина — няма речник за
   пренасяне, на който да стъпи. Значи justify остава без опора. */
main p.text-xs,
main p.text-sm,
main .livex-feat-d,
main .livex-point3-d,
main .kt-form-label,
main .kt-badge,
main .kt-btn {
  text-align: start;
  hyphens: manual;
}

/* На тясно изобщо няма смисъл: под 34rem редът не побира достатъчно
   думи, за да се разпредели нещо. */
@media (max-width: 34rem) {
  main p,
  main li { text-align: start; }
}

/* `.livex-max-w-prose` НЕ ограничава ширината.

   Решение №4 е «пълна ширина», затова класът нарочно не прави нищо —
   но името му твърди обратното и по-горе има второ, по-ранно правило
   с `max-width: 68ch`, което това отменя. Оставено е като буквален
   капан за следващия, който го прочете. Тук се казва на глас: класът
   е останка, не механизъм.

   Онова, което наистина пази четивността при ред от 200 знака, е
   по-големият междуредов разтег долу. */
.livex-max-w-prose { max-width: none; }

/* Правните страници нямат ограничение по ширина, затова редът става
   дълъг. Повече въздух между редовете е единственото, което остава, за
   да се намира началото на следващия ред. */
main .livex-longread p,
main .livex-longread li { line-height: 1.75; }

/* Режимът «чекмедже» на сайдбара.
 *
 * KTUI чете --kt-drawer-enable от самия елемент. Metronic го задава с два
 * класа с произволни стойности, а те не са в компилирания CSS. Без тях
 * сайдбарът остава чекмедже и на широк екран, тоест извън кадъра. */
.\[--kt-drawer-enable\:true\] { --kt-drawer-enable: true; }

@media (width >= 64rem) {
  .lg\:\[--kt-drawer-enable\:false\] { --kt-drawer-enable: false; }
}

/* Поле и бутон един до друг — произволните стойности ги няма в компилирания CSS. */
@media (width >= 40rem) {
  .livex-input-row {
    grid-template-columns: 1fr auto;
  }
}

/* Екран 4 — списък и редактор един до друг */
@media (width >= 64rem) {
  .livex-cols-list { grid-template-columns: 1fr 420px; }
}
.livex-row + .livex-row { border-top: 1px solid var(--border); }
.livex-help-text { text-align: end; max-width: 60%; }

/* ------------------------------------------------------------------ */
/* Логото                                                             */
/* Истинска картинка, не текст с шрифт — така изглежда едно и също     */
/* навсякъде, независимо какво е заредил браузърът.                   */
/* ------------------------------------------------------------------ */

.livex-logo,
.livex-logo-sm {
  width: auto;
  display: block;
  /* Без това flex контейнерът разтяга картинката по широчина:
     align-items по подразбиране е stretch и бие width:auto. */
  align-self: flex-start;
  flex-shrink: 0;
  max-width: 100%;
  object-fit: contain;
}
/* Логото е знакът на марката — то може да си позволи място. */
.livex-logo { height: 3rem; }
.livex-logo-sm { height: 2rem; }

/* В свит сайдбар остава само знакът */
.livex-logo-mark-only { display: none; }

@media (width >= 64rem) {
  body.kt-sidebar-collapse .livex-logo-full { display: none; }

  /* Квадратното лого: еднакви страни, затова и височина, и широчина. */
  body.kt-sidebar-collapse .livex-logo-mark-only {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  /* Шапката е широка 4.5rem, а px-6 изяждаше 3rem от тях и изместваше
     знака. В свито състояние отстъпът пада и знакът застава в средата. */
  body.kt-sidebar-collapse .kt-sidebar-header {
    padding-inline: 0;
    justify-content: center;
  }
  body.kt-sidebar-collapse .kt-sidebar-header > a { justify-content: center; }
}

@media (width < 30rem) {
  .livex-logo { height: 1.875rem; }
}

/* ------------------------------------------------------------------ */
/* Баджове за платформите                                             */
/* ------------------------------------------------------------------ */

.livex-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
}
.livex-platform svg { width: 1rem; height: 1rem; }

.livex-platform-kick {
  color: var(--kick);
  background-color: color-mix(in oklab, var(--kick) 12%, transparent);
  border-color: color-mix(in oklab, var(--kick) 30%, transparent);
}
.livex-platform-discord {
  color: var(--discord);
  background-color: color-mix(in oklab, var(--discord) 16%, transparent);
  border-color: color-mix(in oklab, var(--discord) 38%, transparent);
}

/* Малки бутони за вход с платформа, горе вдясно */
.livex-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: calc(var(--radius) - 0.125rem);
  border: 1px solid var(--border);
  transition: all 0.15s ease;
}
.livex-login-icon svg { width: 1.125rem; height: 1.125rem; }
.livex-login-kick { color: var(--kick); }
.livex-login-kick:hover {
  background-color: color-mix(in oklab, var(--kick) 14%, transparent);
  border-color: color-mix(in oklab, var(--kick) 45%, transparent);
}
.livex-login-discord { color: var(--discord); }
.livex-login-discord:hover {
  background-color: color-mix(in oklab, var(--discord) 18%, transparent);
  border-color: color-mix(in oklab, var(--discord) 50%, transparent);
}

/* ------------------------------------------------------------------ */
/* Състояние: на линия / не работи / чака                             */
/* Цветът НЕ носи сам значението — до него винаги има икона и текст.  */
/* ------------------------------------------------------------------ */

.livex-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
}

.livex-status-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background-color: currentColor;
  flex-shrink: 0;
}

.livex-status-online {
  color: var(--good);
  background-color: color-mix(in oklab, var(--good) 14%, transparent);
  border-color: color-mix(in oklab, var(--good) 34%, transparent);
}
.livex-status-online .livex-status-dot {
  animation: livex-pulse 1.8s ease-in-out infinite;
}

.livex-status-offline {
  color: var(--danger);
  background-color: color-mix(in oklab, var(--danger) 14%, transparent);
  border-color: color-mix(in oklab, var(--danger) 34%, transparent);
}

.livex-status-waiting {
  color: var(--warning);
  background-color: color-mix(in oklab, var(--warning) 14%, transparent);
  border-color: color-mix(in oklab, var(--warning) 34%, transparent);
}

@keyframes livex-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--good) 55%, transparent); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 0.3125rem color-mix(in oklab, var(--good) 0%, transparent); }
}

/* Уважаваме хората, които не искат движение по екрана. */
@media (prefers-reduced-motion: reduce) {
  .livex-status-online .livex-status-dot { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Суич в списъка с команди                                           */
/* ------------------------------------------------------------------ */

.livex-switch-form { display: inline-flex; align-items: center; }
.livex-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.livex-switch-label input { cursor: pointer; }

@media (width >= 40rem) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Събития в дневника на канала                                       */
/* Всеки вид си има цвят и икона, за да се разпознава с един поглед.  */
/* ------------------------------------------------------------------ */

.livex-event {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}
.livex-event i { font-size: 0.8125rem; }

.livex-event-chat     { color: var(--muted-foreground); background-color: color-mix(in oklab, var(--muted-foreground) 12%, transparent); border-color: color-mix(in oklab, var(--muted-foreground) 26%, transparent); }
.livex-event-follow   { color: var(--good);    background-color: color-mix(in oklab, var(--good) 13%, transparent);    border-color: color-mix(in oklab, var(--good) 32%, transparent); }
.livex-event-sub      { color: var(--primary); background-color: color-mix(in oklab, var(--primary) 15%, transparent); border-color: color-mix(in oklab, var(--primary) 34%, transparent); }
.livex-event-support  { color: var(--points);  background-color: color-mix(in oklab, var(--points) 14%, transparent);  border-color: color-mix(in oklab, var(--points) 34%, transparent); }
.livex-event-stream   { color: var(--spark);   background-color: color-mix(in oklab, var(--spark) 12%, transparent);   border-color: color-mix(in oklab, var(--spark) 30%, transparent); }
.livex-event-mod      { color: var(--danger);  background-color: color-mix(in oklab, var(--danger) 13%, transparent);  border-color: color-mix(in oklab, var(--danger) 32%, transparent); }

.livex-event-row + .livex-event-row { border-top: 1px solid var(--border); }

/* ------------------------------------------------------------------ */
/* Редакторът на overlay                                              */
/* ------------------------------------------------------------------ */

@media (width >= 80rem) {
  .livex-cols-overlay { grid-template-columns: 1fr 380px; }
}

/*
    Платното горе, не по средата.

    Дясната колона е дълга — всяка джаджа си носи настройките. Без това
    лявата карта се разтяга до нейната височина, заглавието «Платно» увисва
    по средата, а джаджите изглеждат залепени за дъното.
*/
.livex-cols-overlay { align-items: start; }

/* Платното се закача горе и остава видимо, докато се скролира списъкът. */
@media (width >= 80rem) {
  .livex-cols-overlay > :first-child { position: sticky; top: 5rem; }
}

.livex-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) + 0.25rem);
  border: 1px solid var(--border);
  overflow: hidden;
  touch-action: none;
  background-color: #0a0d13;
  /* Решетка на всеки 5% — помага окото да подравнява */
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 5% 8.333%;
}

/* Безопасната зона — извън нея някои плеъри режат */
.livex-canvas::after {
  content: "";
  position: absolute;
  inset: 5% 5%;
  border: 1px dashed rgb(255 255 255 / 0.07);
  border-radius: 0.5rem;
  pointer-events: none;
}

.livex-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  cursor: grab;
  user-select: none;
  background-color: color-mix(in oklab, var(--primary) 16%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--primary) 55%, transparent);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.livex-box:hover,
.livex-box:focus-visible {
  background-color: color-mix(in oklab, var(--primary) 26%, transparent);
  border-color: var(--primary);
  outline: none;
}
.livex-box.дърпа {
  cursor: grabbing;
  border-color: var(--spark);
  background-color: color-mix(in oklab, var(--spark) 18%, transparent);
}
.livex-box.off {
  opacity: 0.4;
  border-style: dashed;
}

.livex-box-name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.livex-box-size {
  font-size: 0.6875rem;
  color: rgb(255 255 255 / 0.6);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Ъглите за оразмеряване. Четири, не един: подредбата често тръгва   */
/* от долу-дясно и с един ъгъл кутията трябва да се мести и          */
/* оразмерява последователно, докато стигне до там.                   */
/* ------------------------------------------------------------------ */
.livex-box-grip {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: color-mix(in oklab, var(--primary) 90%, white);
  border: 1.5px solid var(--background);
  opacity: 0;
  transition: opacity 0.12s ease;
}
/* Виждат се при посочване и при избор — иначе шест кутии правят */
/* двайсет и четири точки, които затрупват платното. */
.livex-box:hover > .livex-box-grip,
.livex-box:focus-visible > .livex-box-grip,
.livex-box.избрана > .livex-box-grip { opacity: 1; }

.livex-box-grip.g-nw { left: -0.375rem; top: -0.375rem; cursor: nwse-resize; }
.livex-box-grip.g-ne { right: -0.375rem; top: -0.375rem; cursor: nesw-resize; }
.livex-box-grip.g-sw { left: -0.375rem; bottom: -0.375rem; cursor: nesw-resize; }
.livex-box-grip.g-se { right: -0.375rem; bottom: -0.375rem; cursor: nwse-resize; }

.livex-box.избрана {
  border-color: var(--spark);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--spark) 45%, transparent);
}

/*
    Джаджа, покриваща почти целия екран (стената с емоти е 100×100),
    иначе застава върху всички останали и ги прави недостижими с мишката.
    Такава кутия пуска мишката да мине и се хваща само за името и ъглите.
*/
.livex-box.голяма { pointer-events: none; background-color: transparent; }
.livex-box.голяма > .livex-box-name,
.livex-box.голяма > .livex-box-grip { pointer-events: auto; }
.livex-box.голяма > .livex-box-name {
  background-color: color-mix(in oklab, var(--primary) 70%, #0a0d13);
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  cursor: grab;
  align-self: flex-start;
}

/* ------------------------------------------------------------------ */
/* Водачите при прилепване                                            */
/* ------------------------------------------------------------------ */
.livex-guide {
  position: absolute;
  background-color: var(--spark);
  pointer-events: none;
  z-index: 900;
}
.livex-guide-v { top: 0; bottom: 0; width: 1px; }
.livex-guide-h { left: 0; right: 0; height: 1px; }

/* ------------------------------------------------------------------ */
/* Прегледът: истинската overlay страница, под кутиите                */
/* ------------------------------------------------------------------ */
.livex-canvas-preview {
  position: absolute;
  inset: 0;
  border: 0;
  pointer-events: none;
  /*
      Платното е широко колкото колоната, а страницата вътре е 1920 —
      затова се рисува в истинския си размер и се свива с transform.
      Иначе шрифтът от 19 пиксела се разпъва и преценката «голям ли е
      текстът» става безсмислена, което е целият смисъл на прегледа.
      Мащабът го смята JS-ът: зависи от ширината на колоната.
  */
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  transform: scale(var(--мащаб-преглед, 1));
}

/* Докато прегледът е включен, кутиите отстъпват — те са чертежът,
   а отдолу е истината. */
.livex-canvas.с-преглед .livex-box {
  background-color: transparent;
  border-style: dashed;
  opacity: 0.75;
}
.livex-canvas.с-преглед .livex-box:hover,
.livex-canvas.с-преглед .livex-box.избрана,
.livex-canvas.с-преглед .livex-box.дърпа { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Лентата на избраната джаджа                                        */
/* ------------------------------------------------------------------ */
.livex-selbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--border) 22%, transparent);
}
.livex-selname {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--mono);
  min-width: 7rem;
}
.livex-selgroup { display: flex; gap: 0.375rem; }
.livex-selpos {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

/* Деветте места — малка карта на екрана, не падащо меню: виждаш къде
   отиваш, вместо да четеш «горе-ляво». */
.livex-anchors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 0.3125rem;
  border: 1px solid var(--border);
  background-color: var(--background);
}
.livex-anchor {
  width: 0.875rem;
  height: 0.625rem;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  background-color: color-mix(in oklab, var(--primary) 22%, transparent);
  transition: background-color 0.12s ease;
}
.livex-anchor:hover { background-color: var(--primary); }

/* Ключе «Преглед» / «Прилепване» */
.livex-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--secondary-foreground);
  cursor: pointer;
  user-select: none;
}
.livex-toggle input { accent-color: var(--primary); cursor: pointer; }

.livex-url {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Картите на модулите                                                */
/*                                                                    */
/* Цветът тук е украса, не данни — затова се върти свободно между     */
/* шестте тона. Движението е само transform и opacity.                */
/* ------------------------------------------------------------------ */

.livex-module {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding: 1.625rem;
  border-radius: calc(var(--radius) + 0.375rem);
  background-color: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  transform: translate3d(0, 14px, 0);
  opacity: 0;
  animation: livex-rise 0.5s cubic-bezier(.2, .9, .3, 1) forwards;
  animation-delay: var(--закъснение, 0ms);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
}

@keyframes livex-rise {
  to { transform: none; opacity: 1; }
}

/* Сияние в тона на картата, което изгрява при посочване */
.livex-module::before {
  content: "";
  position: absolute;
  inset: -40% 40% 60% -20%;
  background: radial-gradient(circle, color-mix(in oklab, var(--тон) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.livex-module:hover {
  transform: translate3d(0, -4px, 0);
  border-color: color-mix(in oklab, var(--тон) 45%, var(--border));
  box-shadow: 0 16px 40px -20px color-mix(in oklab, var(--тон) 55%, transparent);
}
.livex-module:hover::before { opacity: 1; }

/* Иконата и заглавието стоят ЕДНО ДО ДРУГО, не едно под друго.       */
/* Подредени в колона, голямата икона изтласкваше текста надолу и      */
/* картата се четеше като две несвързани неща.                        */
.livex-module-top {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.livex-module-head {
  display: grid;
  gap: 0.4375rem;
  justify-items: start;
  min-width: 0;
}

.livex-module-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 1.75rem;
  background-color: color-mix(in oklab, var(--тон) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--тон) 32%, transparent);
  color: var(--тон);
  transition: transform 0.26s cubic-bezier(.2, .9, .3, 1.4), background-color 0.26s ease;
}
.livex-module-icon i { font-size: 3.25rem; line-height: 1; }

.livex-module:hover .livex-module-icon {
  transform: scale(1.09) rotate(-6deg);
  background-color: color-mix(in oklab, var(--тон) 26%, transparent);
}

.livex-module-title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mono);
}
.livex-module-text {
  /* По-ситно от заглавието: то води, описанието обяснява. Разтегът
     между редовете расте, когато шрифтът намалява — иначе ситен текст
     в тясна колона се слива на блок. */
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--secondary-foreground);
  text-align: justify;
  hyphens: auto;
}

.livex-module-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  width: fit-content;
  margin-top: 0.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--тон);
  background-color: transparent;
  border: 1px solid color-mix(in oklab, var(--тон) 30%, transparent);
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.livex-module-ask:hover {
  background-color: color-mix(in oklab, var(--тон) 14%, transparent);
  transform: translateX(2px);
}

/* Шестте тона — същите като категоричните серии в тъмна тема */
.livex-tone-1 { --тон: #00A7A8; }
.livex-tone-2 { --тон: #E36A00; }
.livex-tone-3 { --тон: #8B61F7; }
.livex-tone-4 { --тон: #3AAD47; }
.livex-tone-5 { --тон: #DD5DA1; }
.livex-tone-6 { --тон: #2096F8; }

@media (prefers-reduced-motion: reduce) {
  .livex-module { animation: none; transform: none; opacity: 1; }
  .livex-module:hover { transform: none; }
  .livex-module:hover .livex-module-icon { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Докладване на проблем                                              */
/* ------------------------------------------------------------------ */

.livex-report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  color: var(--muted-foreground);
  transition: color 0.16s ease, background-color 0.16s ease;
}
.livex-report svg { width: 1.25rem; height: 1.25rem; }
.livex-report:hover,
.livex-report:focus-visible {
  color: var(--danger);
  background-color: color-mix(in oklab, var(--danger) 12%, transparent);
  outline: none;
}

/* Съобщението за бисквитките не бива да го застъпва */




/* Зоната за снимки */

.livex-drop {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2.25rem 1.25rem;
  text-align: center;
  cursor: pointer;
  border-radius: calc(var(--radius) + 0.25rem);
  border: 2px dashed color-mix(in oklab, var(--border) 85%, var(--primary));
  background-color: color-mix(in oklab, var(--primary) 4%, transparent);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.livex-drop:hover,
.livex-drop.над {
  border-color: var(--primary);
  background-color: color-mix(in oklab, var(--primary) 11%, transparent);
}
.livex-drop i { font-size: 2rem; color: var(--primary); }
.livex-drop-title { font-size: 0.9375rem; font-weight: 600; color: var(--mono); }
.livex-drop-note { font-size: 0.75rem; color: var(--muted-foreground); max-width: 22rem; }
.livex-drop-input { display: none; }

.livex-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.livex-thumb {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.625rem;
  overflow: hidden;
  border: 1px solid var(--border);
}
.livex-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.livex-thumb-x {
  position: absolute;
  top: 0.1875rem;
  right: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1;
  color: #fff;
  background-color: rgb(0 0 0 / 0.62);
}
.livex-thumb-x:hover { background-color: var(--danger); }

/* kt-input задава фиксирана височина и смачква textarea въпреки rows. */
textarea.kt-input {
  height: auto;
  min-height: 7rem;
  line-height: 1.5;
  padding-block: 0.625rem;
  resize: vertical;
}

/* Плаващият бутон не бива да застъпва футъра на панела. */


/* ------------------------------------------------------------------ */
/* Пултът — начален екран като на телефон                             */
/*                                                                    */
/* Плочките са големи нарочно: това се натиска с палец, докато човекът */
/* гледа другаде. Нищо не зависи от посочване с мишка.                 */
/* ------------------------------------------------------------------ */

.livex-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.875rem;
}

.livex-deck-empty { grid-column: 1 / -1; }

.livex-app {
  position: relative;
  border-radius: 1.25rem;
  background-color: var(--card);
  border: 1px solid color-mix(in oklab, var(--тон) 32%, var(--border));
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.18s ease;
}
.livex-app.off { opacity: 0.45; }

.livex-app-face {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.5rem;
  width: 100%;
  /* Квадратна плочка, каквато е иконата на приложение */
  aspect-ratio: 1 / 1;
  padding: 0.875rem;
  cursor: pointer;
  text-align: center;
  background: transparent;
  border: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.livex-app-face:disabled { cursor: default; }

.livex-app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  color: var(--тон);
  background-color: color-mix(in oklab, var(--тон) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--тон) 30%, transparent);
  transition: transform 0.14s ease, background-color 0.14s ease;
}
.livex-app-icon i { font-size: 1.5rem; }

.livex-app-label {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--mono);
  line-height: 1.2;
}
.livex-app-sub {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  line-height: 1.2;
}

.livex-app:hover { box-shadow: 0 12px 28px -16px color-mix(in oklab, var(--тон) 60%, transparent); }
.livex-app-face:active .livex-app-icon { transform: scale(0.9); }

/* Натиснат: кратко потъване, после зелено или червено */
.livex-app.работи { transform: scale(0.97); }
.livex-app.успя {
  border-color: var(--good);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--good) 45%, transparent);
}
.livex-app.гръмна {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 45%, transparent);
}

.livex-app-edit {
  position: absolute;
  top: 0.4375rem;
  right: 0.4375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  color: var(--muted-foreground);
  background-color: color-mix(in oklab, var(--background) 70%, transparent);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.livex-app:hover .livex-app-edit,
.livex-app-edit:focus-visible { opacity: 1; }
.livex-app-edit:hover { color: var(--primary); }
/* На телефон няма посочване — бутонът за промяна стои видим. */
@media (hover: none) {
  .livex-app-edit { opacity: 0.65; }
}

/* Цветовете на плочките */
.livex-app-primary { --тон: var(--primary); }
.livex-app-spark   { --тон: var(--spark); }
.livex-app-good    { --тон: var(--good); }
.livex-app-warning { --тон: var(--warning); }
.livex-app-danger  { --тон: var(--danger); }
.livex-app-points  { --тон: var(--points); }

.livex-note-bad { color: var(--danger) !important; }

/* Избор на икона и цвят */

.livex-icon-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: 0.375rem;
}
.livex-icon-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  transition: all 0.14s ease;
}
.livex-icon-opt i { font-size: 1.125rem; }
.livex-icon-opt:hover { border-color: color-mix(in oklab, var(--primary) 50%, var(--border)); }
.livex-icon-opt.избран {
  color: var(--primary);
  border-color: var(--primary);
  background-color: color-mix(in oklab, var(--primary) 14%, transparent);
}

.livex-color-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.livex-color-opt {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  cursor: pointer;
  padding: 0.3125rem;
  border: 2px solid transparent;
  transition: border-color 0.14s ease;
}
.livex-color-opt span {
  flex: 1;
  border-radius: 0.5rem;
  background-color: var(--тон);
}
.livex-color-opt.избран { border-color: var(--тон); }

/* Точка в цвета на известието, в списъка */
.livex-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background-color: var(--тон);
  flex-shrink: 0;
}
.livex-dot-primary { --тон: var(--primary); }
.livex-dot-spark   { --тон: var(--spark); }
.livex-dot-good    { --тон: var(--good); }
.livex-dot-warning { --тон: var(--warning); }
.livex-dot-danger  { --тон: var(--danger); }
.livex-dot-points  { --тон: var(--points); }

/* ------------------------------------------------------------------ */
/* Преглед на известие в редактора                                    */
/* Нарочно повтаря вида от страницата за OBS, за да не се изненадаш.  */
/* ------------------------------------------------------------------ */

.livex-prev-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
  padding: 1.25rem;
  border-radius: calc(var(--radius) + 0.25rem);
  border: 1px solid var(--border);
  background-color: #0a0d13;
  background-image:
    linear-gradient(45deg, rgb(255 255 255 / 0.022) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(255 255 255 / 0.022) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 0.022) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 0.022) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.livex-prev-alert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 1.125rem 1.5rem;
  border-radius: 1rem;
  text-align: center;
  background: rgb(14 18 25 / 0.92);
  border: 2px solid var(--тон, var(--primary));
  box-shadow: 0 14px 40px -18px rgb(0 0 0 / 0.8);
}

.livex-prev-img {
  max-height: 6rem;
  max-width: 100%;
  border-radius: 0.625rem;
  display: block;
}

.livex-prev-title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.livex-prev-title b { color: var(--тон, var(--primary)); }

.livex-prev-msg {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #c7cfdb;
}

.livex-prev-bar {
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background-color: var(--тон, var(--primary));
}

.livex-prev-thumb {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
}
.livex-prev-audio { max-width: 16rem; height: 2.25rem; }

/* ------------------------------------------------------------------ */
/* Галерия с видовете известия                                        */
/* Всяка карта е мъничка рисунка на подредбата, не дума в меню.       */
/* ------------------------------------------------------------------ */

.livex-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.625rem;
}

.livex-gal-opt {
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  border-radius: 0.875rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--background) 60%, transparent);
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}
.livex-gal-opt:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); transform: translateY(-1px); }
.livex-gal-opt.избран {
  border-color: var(--primary);
  background-color: color-mix(in oklab, var(--primary) 11%, transparent);
}

.livex-gal-name { font-size: 0.8125rem; font-weight: 600; color: var(--mono); }
.livex-gal-note { font-size: 0.6875rem; line-height: 1.35; color: var(--muted-foreground); }

/* Рисунката: три правоъгълника, подредени различно за всеки вид */
.livex-gal-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  border-radius: 0.5rem;
  background-color: #0a0d13;
  overflow: hidden;
  gap: 0.25rem;
  padding: 0.375rem;
}
.livex-gal-art span { background-color: var(--primary); border-radius: 0.125rem; display: block; }
.livex-gal-art .g2 { background-color: #e8ecf3; }
.livex-gal-art .g3 { background-color: #5d6675; }

/* Класическо: картинка отгоре, два реда текст */
.livex-gal-classic { flex-direction: column; }
.livex-gal-classic .g1 { width: 38%; height: 0.75rem; border-radius: 0.1875rem; }
.livex-gal-classic .g2 { width: 62%; height: 0.3125rem; }
.livex-gal-classic .g3 { width: 44%; height: 0.25rem; }

/* Лента: картинка вляво, текст вдясно */
.livex-gal-banner { flex-direction: row; align-items: center; }
.livex-gal-banner .g1 { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; }
.livex-gal-banner .g2 { width: 2.75rem; height: 0.3125rem; }
.livex-gal-banner .g3 { width: 1.75rem; height: 0.25rem; margin-left: -2.5rem; margin-top: 0.75rem; }

/* Голи думи: само текст, без рамка */
.livex-gal-minimal { flex-direction: column; }
.livex-gal-minimal .g1 { display: none; }
.livex-gal-minimal .g2 { width: 78%; height: 0.5rem; }
.livex-gal-minimal .g3 { width: 50%; height: 0.25rem; }

/* Ивица: лента през целия екран */
.livex-gal-strip { flex-direction: column; padding: 0; }
.livex-gal-strip .g1 { display: none; }
.livex-gal-strip .g2 { width: 100%; height: 0.875rem; border-radius: 0; }
.livex-gal-strip .g3 { display: none; }
.livex-gal-strip::before,
.livex-gal-strip::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--primary);
}

/* Голяма картинка с текст върху нея */
.livex-gal-burst { padding: 0; }
.livex-gal-burst .g1 { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; opacity: 0.55; }
.livex-gal-burst .g2 { position: relative; width: 60%; height: 0.4375rem; }
.livex-gal-burst .g3 { display: none; }

/* Значка: малка заоблена плочка */
.livex-gal-badge { flex-direction: row; }
.livex-gal-badge .g1 { width: 0.625rem; height: 0.625rem; border-radius: 999px; }
.livex-gal-badge .g2 { width: 2.25rem; height: 0.3125rem; border-radius: 999px; }
.livex-gal-badge .g3 { display: none; }

/* ------------------------------------------------------------------ */
/* Прегледът следва избрания вид                                      */
/* ------------------------------------------------------------------ */

.livex-prev-alert.pl-banner { flex-direction: row; align-items: center; text-align: left; gap: 0.75rem; }
.livex-prev-alert.pl-banner .livex-prev-img { max-height: 3rem; }

.livex-prev-alert.pl-minimal { background: transparent; border: none; box-shadow: none; }
.livex-prev-alert.pl-minimal .livex-prev-title { font-size: 1.375rem; text-shadow: 0 2px 10px rgb(0 0 0 / 0.9); }
.livex-prev-alert.pl-minimal .livex-prev-bar { display: none; }

.livex-prev-alert.pl-strip {
  flex-direction: row;
  justify-content: center;
  border-radius: 0;
  border-width: 0;
  border-top: 2px solid var(--тон, var(--primary));
  border-bottom: 2px solid var(--тон, var(--primary));
  padding: 0.75rem 1rem;
  gap: 0.75rem;
}
.livex-prev-alert.pl-strip .livex-prev-bar { display: none; }
.livex-prev-alert.pl-strip .livex-prev-img { max-height: 2rem; }

.livex-prev-alert.pl-burst { padding: 0; overflow: hidden; gap: 0; }
.livex-prev-alert.pl-burst .livex-prev-img { max-height: 7rem; border-radius: 0; width: 100%; object-fit: cover; }
/* Отрицателният отстъп вдига заглавието ВЪРХУ картинката. Без картинка
   обаче то излиза извън плочката — затова се прилага само когато има
   изображение точно преди него. */
.livex-prev-alert.pl-burst .livex-prev-title {
  padding: 0.75rem 0.75rem 0;
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.95);
}
.livex-prev-alert.pl-burst .livex-prev-img + .livex-prev-title {
  margin-top: -2rem;
  padding-top: 0;
}
.livex-prev-alert.pl-burst .livex-prev-msg { padding: 0 0.75rem 0.5rem; }

.livex-prev-alert.pl-badge {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  width: fit-content;
  margin-inline: auto;
}
.livex-prev-alert.pl-badge .livex-prev-title { font-size: 0.875rem; }
.livex-prev-alert.pl-badge .livex-prev-msg { font-size: 0.75rem; }
.livex-prev-alert.pl-badge .livex-prev-bar { display: none; }
.livex-prev-alert.pl-badge .livex-prev-img { max-height: 1.5rem; border-radius: 999px; }

/* Избор на свободен цвят */
.livex-picker {
  width: 2.75rem;
  height: 2.5rem;
  padding: 0.1875rem;
  cursor: pointer;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--card);
}
.livex-picker::-webkit-color-swatch { border: none; border-radius: 0.3125rem; }
.livex-picker::-moz-color-swatch { border: none; border-radius: 0.3125rem; }

.livex-hex { max-width: 8.5rem; text-transform: uppercase; }

/* Една плочка за преглед в редактора */
.livex-deck-one { grid-template-columns: minmax(7rem, 9rem); }

/* Плътна плочка: цветът е фон, иконата е върху него */
.livex-app.плътен { background-color: var(--тон); border-color: var(--тон); }
.livex-app.плътен .livex-app-icon {
  background-color: rgb(0 0 0 / 0.18);
  border-color: rgb(255 255 255 / 0.22);
  color: #fff;
}
.livex-app.плътен .livex-app-label,
.livex-app.плътен .livex-app-sub { color: #fff; }

/* Качена иконка вместо вградена */
.livex-app-icon img {
  width: 64%;
  height: 64%;
  object-fit: contain;
  display: block;
}

/* ------------------------------------------------------------------ */
/* Режим на нареждане в пулта                                         */
/* ------------------------------------------------------------------ */

.livex-app-grip {
  position: absolute;
  top: 0.4375rem;
  left: 0.4375rem;
  display: none;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.3125rem;
  border-radius: 0.375rem;
  background-color: color-mix(in oklab, var(--background) 70%, transparent);
}
.livex-app-grip span {
  display: block;
  width: 0.75rem;
  height: 0.125rem;
  border-radius: 999px;
  background-color: var(--muted-foreground);
}

.livex-deck.нареждане .livex-app-grip { display: flex; }
.livex-deck.нареждане .livex-app-edit { display: none; }
.livex-deck.нареждане .livex-app {
  cursor: grab;
  touch-action: none;
  border-style: dashed;
}
.livex-deck.нареждане .livex-app-face { cursor: grab; pointer-events: none; }
.livex-deck.нареждане .livex-app.влачи {
  cursor: grabbing;
  opacity: 0.75;
  transform: scale(1.04);
  border-style: solid;
  border-color: var(--spark);
  z-index: 2;
}

/* ------------------------------------------------------------------ */
/* Кошът                                                              */
/* ------------------------------------------------------------------ */

.livex-trash {
  display: grid;
  gap: 0.5rem;
}
.livex-trash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px dashed var(--border);
  background-color: color-mix(in oklab, var(--muted-foreground) 5%, transparent);
}
.livex-trash-left { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.livex-trash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: var(--muted-foreground);
  background-color: color-mix(in oklab, var(--muted-foreground) 12%, transparent);
  flex-shrink: 0;
}
.livex-trash-icon img { width: 60%; height: 60%; object-fit: contain; }
.livex-trash-when { font-size: 0.6875rem; color: var(--muted-foreground); }

/* Собствени цветове на надписа и иконата в плочките */
.livex-app-label { color: var(--текст, var(--mono)); }
.livex-app-icon { color: var(--знак, var(--тон)); }
.livex-app.плътен .livex-app-label { color: var(--текст, #fff); }
.livex-app.плътен .livex-app-icon { color: var(--знак, #fff); }

.livex-guild-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* Социалните                                                         */
/*                                                                    */
/* Иконките стоят в един ред. Всяка свети в собствения си цвят при     */
/* посочване — Discord в тяхното синьо, Facebook в неговото, а         */
/* Instagram в преливка, защото марката им няма един цвят.            */
/* Тези, които още нямат адрес, стоят приглушени и не реагират.        */
/* ------------------------------------------------------------------ */

.livex-socials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.livex-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  background: transparent;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease,
              transform 0.18s ease;
}

.livex-social svg {
  width: 1.125rem;
  height: 1.125rem;
}

.livex-social:hover {
  transform: translateY(-2px);
}

.livex-social-discord:hover {
  color: #fff;
  background: #5865F2;
  border-color: #5865F2;
}

.livex-social-facebook:hover {
  color: #fff;
  background: #1877F2;
  border-color: #1877F2;
}

.livex-social-instagram:hover {
  color: #fff;
  background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF);
  border-color: #DD2A7B;
}

/* Още няма адрес: вижда се, но не води никъде и не се прави на връзка. */
.livex-social-waiting {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Знакът на страница «скоро»                                         */
/* ------------------------------------------------------------------ */

.livex-soon-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.25rem;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
}

.livex-soon-mark i {
  font-size: 1.75rem;
}

/* Utility класове, които ги няма в компилирания Metronic. */
.py-24 { padding-block: 6rem; }
.justify-items-center { justify-items: center; }

/* Кодът на поканата се чете по букви — моноширинен шрифт и разредка. */
.livex-invite-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.livex-invite-input::placeholder { text-transform: none; letter-spacing: normal; }

/* ------------------------------------------------------------------ */
/* Поканите                                                            */
/* ------------------------------------------------------------------ */

.livex-invite-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: start;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}

.livex-invite-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.livex-invite-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.livex-invite-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Кодът е и бутон за копиране — затова изглежда като поле, не като текст. */
.livex-invite-code {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--mono);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.livex-invite-code:hover { border-color: var(--primary); color: var(--primary); }
.livex-invite-code i { font-size: 0.8rem; opacity: 0.7; }
.livex-invite-copied { border-color: var(--primary); color: var(--primary); }

@media (width < 40rem) {
  .livex-invite-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Изгледът на пулта                                                   */
/*                                                                    */
/* Три настройки, независими една от друга: какво се вижда на плочката,*/
/* колко е едра и дали е широка. Големината сменя една променлива —    */
/* минималната широчина на колоната — а всичко останало следва нея.   */
/* ------------------------------------------------------------------ */

.livex-deck-view {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}

.livex-view-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.livex-view-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-inline-end: 0.125rem;
}

.livex-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.livex-view-btn:hover { color: var(--mono); border-color: var(--primary); }

.livex-view-btn.избран {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 14%, transparent);
}

.livex-view-wide i { font-size: 0.8rem; }

/* --- Големина: една променлива води всичко --- */

.livex-deck { --плочка: 8.5rem; grid-template-columns: repeat(auto-fill, minmax(var(--плочка), 1fr)); }

.livex-deck.размер-хс { --плочка: 4.75rem; gap: 0.5rem; }
.livex-deck.размер-с  { --плочка: 6.5rem;  gap: 0.625rem; }
.livex-deck.размер-м  { --плочка: 8.5rem;  gap: 0.875rem; }
.livex-deck.размер-л  { --плочка: 11rem;   gap: 1rem; }

.livex-deck.размер-хс .livex-app { border-radius: 0.875rem; }
.livex-deck.размер-хс .livex-app-face { padding: 0.5rem; gap: 0.3rem; }
.livex-deck.размер-хс .livex-app-icon { width: 2rem; height: 2rem; border-radius: 0.625rem; }
.livex-deck.размер-хс .livex-app-icon i { font-size: 0.95rem; }
.livex-deck.размер-хс .livex-app-label { font-size: 0.6875rem; }
.livex-deck.размер-хс .livex-app-edit { width: 1.25rem; height: 1.25rem; top: 0.2rem; right: 0.2rem; }

.livex-deck.размер-с .livex-app { border-radius: 1rem; }
.livex-deck.размер-с .livex-app-face { padding: 0.625rem; gap: 0.375rem; }
.livex-deck.размер-с .livex-app-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
.livex-deck.размер-с .livex-app-icon i { font-size: 1.125rem; }
.livex-deck.размер-с .livex-app-label { font-size: 0.75rem; }

.livex-deck.размер-л .livex-app-icon { width: 4rem; height: 4rem; border-radius: 1.25rem; }
.livex-deck.размер-л .livex-app-icon i { font-size: 1.875rem; }
.livex-deck.размер-л .livex-app-label { font-size: 0.9375rem; }

/* --- Какво се вижда --- */

/* Само икони: плочката става чиста квадратна икона. Името остава за
   екранните четци, затова не е display:none, а скрито визуално. */
.livex-deck.вид-икони .livex-app-label,
.livex-deck.вид-икони .livex-app-sub {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.livex-deck.вид-име .livex-app-sub { display: none; }

/* --- Широки плочки --- */
/*
   Иконата отива вляво, текстът до нея. Плочката вече не е квадрат, а
   лента — събират се по-малко на ред, но името се чете цяло.
*/
.livex-deck.широки { --плочка: 14rem; }
.livex-deck.широки.размер-хс { --плочка: 9rem; }
.livex-deck.широки.размер-с  { --плочка: 11rem; }
.livex-deck.широки.размер-л  { --плочка: 17rem; }

.livex-deck.широки .livex-app-face {
  aspect-ratio: auto;
  grid-template-columns: auto 1fr;
  justify-items: start;
  text-align: start;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.75rem 0.875rem;
}

.livex-deck.широки .livex-app-icon { grid-row: 1 / span 2; }
.livex-deck.широки .livex-app-label { grid-column: 2; }
.livex-deck.широки .livex-app-sub { grid-column: 2; }

/* Широка плочка само с икона: иконата застава в средата, редът е нисък. */
.livex-deck.широки.вид-икони .livex-app-face {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0.75rem;
}
.livex-deck.широки.вид-икони .livex-app-icon { grid-row: auto; }

/* Широка плочка само с име: иконата и името са на един ред. */
.livex-deck.широки.вид-име .livex-app-icon { grid-row: auto; }

/* Дребните плочки не побират бутона за промяна върху себе си на телефон —
   затова там той стои долу вдясно, извън лицето. */
@media (hover: none) {
  .livex-deck.размер-хс .livex-app-edit { opacity: 0.8; }
}

/* ------------------------------------------------------------------ */
/* Графиките на таблото                                                */
/* ------------------------------------------------------------------ */

.livex-chart { margin-top: 0.5rem; min-height: 1rem; }

/* ApexCharts рисува собствени надписи — държим ги с текстовите цветове,
   не с цвета на серията. */
.livex-chart .apexcharts-tooltip {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 28px -18px rgb(0 0 0 / 0.8) !important;
  color: var(--mono) !important;
}
.livex-chart .apexcharts-tooltip-title {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600;
}

/* Промяна спрямо предишния период. Състоятелните цветове, не серийните. */
.livex-up { color: var(--good); }
.livex-down { color: var(--danger); }
.livex-up i, .livex-down i { font-size: 0.7rem; }
.py-6 { padding-block: 1.5rem; }

/* Поле с мерна единица отдясно — «сек», «%», «px». */
.livex-suffix-field { position: relative; display: block; }
.livex-suffix-field .kt-input { padding-inline-end: 2.75rem; width: 100%; }
.livex-suffix {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Ефекти: избор, цветове и сила                                       */
/* ------------------------------------------------------------------ */

/* Прегледът ползва същите fx-* класове като страницата в OBS, но цветът
   му идва от --тон. Този ред ги свързва, за да не пиша ефектите два пъти. */
.livex-prev-alert {
  --accent: var(--тон, var(--primary));
  position: relative;
  isolation: isolate;
}

.livex-color-field { display: grid; gap: 0.5rem; }

/* «Без цвят»: диагонална черта, за да личи, че не е просто тъмно квадратче. */
.livex-color-none { border-color: var(--border); }
.livex-color-none span {
  background:
    linear-gradient(to top left,
      transparent calc(50% - 1px), var(--muted-foreground) calc(50% - 1px),
      var(--muted-foreground) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--background);
}

/* Свободният цвят: самото квадратче Е пикърът. */
.livex-color-free { position: relative; overflow: hidden; }
.livex-color-free input[type="color"] {
  position: absolute;
  inset: -0.25rem;
  width: calc(100% + 0.5rem);
  height: calc(100% + 0.5rem);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0;
}
.livex-color-free span {
  background:
    conic-gradient(from 0deg,
      #F4564A, #F0B429, #C5F24E, #10B981, #00A7A8, #2096F8, #7C4DF5, #DD5DA1, #F4564A);
}
.livex-color-free::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.75rem;
  height: 0.75rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--background);
  pointer-events: none;
}

/* Галерията с ефекти: същата плочка като видовете, но с жива миниатюра. */
.livex-fx-gallery .livex-gal-name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.livex-fx-art {
  display: block;
  height: 3.25rem;
  border-radius: 0.5rem;
  background: rgb(14 18 25 / 0.9);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  overflow: hidden;
  position: relative;
}

/* Миниатюрите. Нарочно СТАТИЧНИ: дванайсет въртящи се анимации една до
   друга на един екран са каша, а и всяка струва кадри. Истинското движение
   се вижда в прегледа вдясно, където ефектът е един. */
.fxa-none    { background: rgb(14 18 25 / 0.9); }
.fxa-glow    { box-shadow: inset 0 0 18px -2px var(--primary); }
.fxa-neon    { box-shadow: inset 0 0 10px var(--primary), inset 0 0 3px var(--spark); border-color: var(--spark); }
.fxa-scan    { background: linear-gradient(105deg, transparent 38%, color-mix(in oklab, var(--primary) 55%, transparent) 50%, transparent 62%), rgb(14 18 25 / 0.9); }
/* Три призрака един след друг — чете се като размазано от удар,
   не като баркод, какъвто излизаше с повтаряща се решетка. */
.fxa-shake {
  background:
    linear-gradient(90deg, transparent 20%, color-mix(in oklab, var(--primary) 18%, transparent) 20% 32%, transparent 32%),
    linear-gradient(90deg, transparent 38%, color-mix(in oklab, var(--primary) 45%, transparent) 38% 50%, transparent 50%),
    linear-gradient(90deg, transparent 56%, color-mix(in oklab, var(--primary) 95%, transparent) 56% 68%, transparent 68%),
    rgb(14 18 25 / 0.9);
}
.fxa-glitch  { background: linear-gradient(90deg, var(--spark) 0 3px, transparent 3px calc(100% - 3px), var(--primary) calc(100% - 3px)), rgb(14 18 25 / 0.9); }
.fxa-crt     { background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.14) 0 1px, transparent 1px 3px), rgb(14 18 25 / 0.9); }
.fxa-stripes { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--primary) 26%, transparent) 0 8px, color-mix(in oklab, var(--spark) 14%, transparent) 8px 16px), rgb(14 18 25 / 0.9); }

/* Четирите с частици: показваме самите частици, не рамка. */
.fxa-laser::after,
.fxa-pixels::after,
.fxa-confetti::after,
.fxa-sparks::after {
  content: '';
  position: absolute;
  inset: 0;
}
.fxa-laser::after {
  background:
    linear-gradient(100deg, transparent 10%, var(--spark) 28%, transparent 30%),
    linear-gradient(100deg, transparent 50%, var(--primary) 72%, transparent 74%);
}
.fxa-pixels::after {
  background:
    radial-gradient(2px 2px at 18% 30%, var(--primary) 99%, transparent),
    radial-gradient(2px 2px at 36% 66%, var(--spark) 99%, transparent),
    radial-gradient(3px 3px at 58% 22%, var(--primary) 99%, transparent),
    radial-gradient(2px 2px at 74% 58%, var(--spark) 99%, transparent),
    radial-gradient(3px 3px at 88% 38%, var(--primary) 99%, transparent);
}
.fxa-confetti::after {
  background:
    linear-gradient(28deg, transparent 46%, var(--primary) 46% 54%, transparent 54%) 14% 20% / 10px 14px no-repeat,
    linear-gradient(-34deg, transparent 46%, var(--spark) 46% 54%, transparent 54%) 42% 58% / 10px 14px no-repeat,
    linear-gradient(12deg, transparent 46%, var(--primary) 46% 54%, transparent 54%) 70% 32% / 10px 14px no-repeat,
    linear-gradient(-50deg, transparent 46%, var(--spark) 46% 54%, transparent 54%) 88% 70% / 10px 14px no-repeat;
}
.fxa-sparks::after {
  background:
    radial-gradient(circle at 50% 100%, color-mix(in oklab, var(--spark) 55%, transparent) 0%, transparent 62%),
    radial-gradient(2px 2px at 34% 54%, var(--spark) 99%, transparent),
    radial-gradient(2px 2px at 50% 34%, var(--primary) 99%, transparent),
    radial-gradient(2px 2px at 66% 58%, var(--spark) 99%, transparent);
}

/* Силата на ефекта */
.livex-power { display: flex; align-items: center; gap: 0.75rem; }
.livex-power input[type="range"] { flex: 1; accent-color: var(--primary); }
.livex-power-val {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--primary);
}

/* ------------------------------------------------------------------ */
/* Роли и баджове                                                      */
/*                                                                    */
/* Един и същи чип за двете, различен само по цвят: ролята е по-плътна */
/* (носи права), баджът е по-бледен (не носи). Цветовете са от         */
/* палитрата в docs/VIZ.md — нарочно НЕ състоятелните, защото ролята   */
/* не е състояние. Виолетовото е само за собственика.                  */
/* Нов бадж = един ред в App\Support\Badges и едно правило тук.        */
/* ------------------------------------------------------------------ */

.livex-roles {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  vertical-align: middle;
}

.livex-role,
.livex-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  /* Чиповете стоят до име — текстът им не се подравнява двустранно. */
  text-align: left;
}

.livex-role i,
.livex-badge-chip i { font-size: 0.75rem; }

/* Ролята — плътен цвят, личи от другия край на екрана. */
.livex-role-owner {
  background: color-mix(in oklab, var(--primary) 22%, transparent);
  border-color: color-mix(in oklab, var(--primary) 55%, transparent);
  color: color-mix(in oklab, var(--primary) 82%, white);
}
.livex-role-admin {
  background: color-mix(in oklab, var(--series-5) 20%, transparent);
  border-color: color-mix(in oklab, var(--series-5) 52%, transparent);
  color: color-mix(in oklab, var(--series-5) 85%, white);
}
.livex-role-streamer {
  background: color-mix(in oklab, var(--series-2) 20%, transparent);
  border-color: color-mix(in oklab, var(--series-2) 52%, transparent);
  color: color-mix(in oklab, var(--series-2) 88%, white);
}
.livex-role-member {
  background: color-mix(in oklab, var(--muted-foreground) 14%, transparent);
  border-color: var(--border);
  color: var(--secondary-foreground);
}

/* Баджът — по-бледен, за да не се чете като ранг. */
.livex-badge-chip {
  background: transparent;
  border-color: var(--border);
  color: var(--secondary-foreground);
}
.livex-badge-vip {
  border-color: color-mix(in oklab, var(--spark) 50%, transparent);
  color: color-mix(in oklab, var(--spark) 88%, white);
}
.livex-badge-partner {
  border-color: color-mix(in oklab, var(--series-6) 50%, transparent);
  color: color-mix(in oklab, var(--series-6) 88%, white);
}
.livex-badge-founder {
  border-color: color-mix(in oklab, var(--points) 52%, transparent);
  color: color-mix(in oklab, var(--points) 90%, white);
}
.livex-badge-beta {
  border-color: color-mix(in oklab, var(--series-1) 50%, transparent);
  color: color-mix(in oklab, var(--series-1) 88%, white);
}
.livex-badge-friend {
  border-color: color-mix(in oklab, var(--series-5) 46%, transparent);
  color: color-mix(in oklab, var(--series-5) 86%, white);
}

/* Спрян профил. ТУК състоятелният цвят е на място — това е състояние. */
.livex-role-suspended {
  background: color-mix(in oklab, var(--danger) 18%, transparent);
  border-color: color-mix(in oklab, var(--danger) 50%, transparent);
  color: color-mix(in oklab, var(--danger) 88%, white);
}

/* ------------------------------------------------------------------ */
/* Аватар с инициали                                                   */
/* ------------------------------------------------------------------ */

.livex-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--background);
}

.livex-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-foreground);
  background: color-mix(in oklab, var(--primary) 72%, var(--background));
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
}

.livex-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1rem; }

/* ------------------------------------------------------------------ */
/* Хората, устройствата и входовете — един и същ ред                   */
/*                                                                    */
/* Лицето вляво, следата отдолу, действията вдясно. На телефон         */
/* действията падат под реда: три бутона в колона до име не се четат.  */
/* ------------------------------------------------------------------ */

.livex-person-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.625rem 1rem;
  align-items: start;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}

.livex-person-row.спрян {
  border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
  background: color-mix(in oklab, var(--danger) 5%, var(--card));
}

.livex-person-row.аз {
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}

.livex-person-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  min-width: 0;
}

.livex-person-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mono);
  text-align: left;
}

.livex-person-mail {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.livex-person-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: left;
}

.livex-person-meta b { font-weight: 600; color: var(--secondary-foreground); }

/* ------------------------------------------------------------------ */
/* Каналът на човека — свой ред, не още един етикет в общата каша.    */
/* ------------------------------------------------------------------ */
.livex-chanrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--border) 24%, transparent);
}

.livex-chanlink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
}
.livex-chanlink:hover { text-decoration: underline; }
.livex-chanlink i { font-size: 0.75rem; }

.livex-chanmeta { font-size: 0.6875rem; color: var(--muted-foreground); }

/*
    Предупредителен етикет. Носи и дума, не само цвят — «оранжево»
    не значи нищо на черно-бял екран и при далтонизъм.
*/
.livex-warnchip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--warning);
  background: color-mix(in oklab, var(--warning) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--warning) 32%, transparent);
}

/* ------------------------------------------------------------------ */
/* Числата отгоре                                                     */
/*                                                                    */
/* Предупредителният тон се пали САМО когато стойността не е нула:    */
/* «0 спрени профила» е добрата новина и няма защо да крещи.          */
/* ------------------------------------------------------------------ */
.livex-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
  gap: 0.75rem;
}

.livex-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "икона число"
    "икона надпис";
  gap: 0 0.625rem;
  align-items: center;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}
.livex-stat i {
  grid-area: икона;
  font-size: 1.375rem;
  color: var(--muted-foreground);
}
.livex-stat-n {
  grid-area: число;
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--mono);
}
.livex-stat-t {
  grid-area: надпис;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--muted-foreground);
}

.livex-stat.внимание {
  border-color: color-mix(in oklab, var(--warning) 38%, var(--border));
  background: color-mix(in oklab, var(--warning) 7%, var(--card));
}
.livex-stat.внимание i,
.livex-stat.внимание .livex-stat-n { color: var(--warning); }

/* Ранговете — брояч и филтър в едно. */
.livex-rolecount {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.livex-rolecount:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.livex-rolecount b { font-weight: 700; color: var(--mono); }
.livex-rolecount.избран {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 14%, transparent);
}

.livex-person-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Редът с действия по човек: падащо меню за ролята и бутоните до него.
   Всяка форма е САМОСТОЯТЕЛНА — вложена форма тук би била капан, защото
   _method на вътрешната бие външната. */
.livex-person-tools {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px dashed var(--border);
}

.livex-person-tools .kt-select,
.livex-person-tools .kt-input { height: 2rem; font-size: 0.8125rem; }

@media (width < 48rem) {
  .livex-person-row { grid-template-columns: 1fr; }
  .livex-person-actions { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ */
/* Влезли устройства                                                   */
/* ------------------------------------------------------------------ */

.livex-device-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.375rem 0.875rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}

.livex-device-row.тази {
  border-color: color-mix(in oklab, var(--good) 45%, var(--border));
  background: color-mix(in oklab, var(--good) 5%, var(--card));
}

.livex-device-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--secondary-foreground);
}

.livex-device-row.тази .livex-device-icon {
  color: var(--good);
  border-color: color-mix(in oklab, var(--good) 40%, transparent);
}

.livex-device-what {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mono);
  text-align: left;
}

.livex-device-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: left;
}

@media (width < 40rem) {
  .livex-device-row { grid-template-columns: auto 1fr; }
  .livex-device-meta { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ */
/* Дневникът на входовете                                              */
/*                                                                    */
/* Редът е плосък и тесен: тук се СКАНИРА, а не се чете. Левият ръб    */
/* е цветен, за да личи успех от провал без да се чете нищо.           */
/* ------------------------------------------------------------------ */

.livex-log-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-inline-start-width: 3px;
  border-radius: 0.625rem;
  background: var(--card);
}

.livex-log-row.ok { border-inline-start-color: var(--good); }
.livex-log-row.провал { border-inline-start-color: var(--danger); }

.livex-log-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  font-size: 0.875rem;
  color: var(--mono);
  text-align: left;
}

.livex-log-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: left;
}

.livex-log-when {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.livex-log-why {
  color: color-mix(in oklab, var(--danger) 85%, white);
  font-weight: 600;
}

.livex-mono-sm {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}

/* Филтрите на един ред, с полето, което расте. */
.livex-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.625rem;
}
.livex-filters .livex-grow { flex: 1 1 14rem; min-width: 0; }

/* Връзка към профил в хедъра — името и баджът, без да личи като бутон. */
.livex-me {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
}
.livex-me:hover { border-color: var(--border); background: var(--accent); }
.livex-me .livex-avatar { width: 1.75rem; height: 1.75rem; }
.livex-me-name { font-size: 0.8125rem; font-weight: 600; color: var(--mono); }

/* Ролята пише в хедъра, не е само икона. На тесен екран пада заедно с името —
   иначе заглавието на страницата няма къде да се събере. */
.livex-me-role { display: inline-flex; }

@media (width < 48rem) {
  .livex-me-name,
  .livex-me-role { display: none; }
}

/* ------------------------------------------------------------------ */
/* Темплейти за известия                                               */
/* ------------------------------------------------------------------ */

.livex-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.25rem;
}

/* Мострата е по-ниска от истинския преглед — тук се гледа вид, не текст. */
.livex-tpl-stage { min-height: 7rem; padding: 1rem; }
.livex-tpl-stage .livex-prev-title { font-size: 1rem; }

.livex-tpl-off { opacity: 0.55; }

.livex-sticky { position: sticky; top: 5rem; }

/* Списъкът с хора, на които се закача темплейт */
.livex-people {
  display: grid;
  gap: 0.25rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--background);
}

.livex-person {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.14s ease;
}
.livex-person:hover { background: var(--accent); }

.livex-person-name { font-size: 0.875rem; font-weight: 600; color: var(--mono); }
.livex-person-mail { font-size: 0.75rem; color: var(--muted-foreground); }

/* Галерията с темплейти в самата форма за известие */
.livex-tpl-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.livex-tpl-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.livex-tpl-card:hover { border-color: var(--primary); transform: translateY(-2px); }

.livex-tpl-mini {
  height: 3.5rem;
  border-radius: 0.5rem;
  border: 2px solid var(--тон, var(--primary));
  background: rgb(14 18 25 / 0.92);
  position: relative;
  isolation: isolate;
  --accent: var(--тон, var(--primary));
}

.livex-tpl-card-name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--mono);
}
.livex-tpl-card-note { font-size: 0.6875rem; color: var(--muted-foreground); }

/* Липсващи utility класове от компилирания Metronic. */
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-1 { row-gap: 0.25rem; }
.text-warning { color: var(--warning); }

@media (width >= 64rem) {
  .lg\:grid-cols-\[minmax\(0\,1fr\)_22rem\] {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
}

/* ------------------------------------------------------------------ */
/* Генератор на парола в профила                                       */
/*                                                                    */
/* Изходът и бележката стоят скрити, докато няма измислена парола.     */
/* Нарочно с клас, а не с атрибут hidden: правило за display тук би    */
/* било по-силно от [hidden] и елементът щеше да се вижда празен.      */
/* ------------------------------------------------------------------ */

.livex-genpass {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.livex-genpass-out { display: none; align-items: center; gap: 0.375rem; }
.livex-genpass-out.показан { display: inline-flex; }

.livex-genpass-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--mono);
  padding: 0.3rem 0.6rem;
  border: 1px solid color-mix(in oklab, var(--primary) 45%, var(--border));
  border-radius: 0.5rem;
  background: var(--background);
  /* Паролата не се пренася на нов ред по средата — иначе се чете грешно. */
  white-space: nowrap;
  overflow-x: auto;
  max-width: 100%;
}

.livex-genpass-copied { border-color: var(--primary); color: var(--primary); }

.livex-genpass-note { display: none; color: var(--muted-foreground); }
.livex-genpass-note.показан { display: block; }
.livex-genpass-note b { color: var(--secondary-foreground); }

/* Стъпало от стълбицата по бройка — обхватът се чете като число, затова
   моноширинен шрифт: «100–999» не бива да танцува спрямо «1000+». */
.livex-step {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ */
/* Стълбицата по бройка                                                */
/*                                                                    */
/* Показва кой обхват се пада на кое известие. Редът, който се         */
/* редактира в момента, свети — иначе човек не вижда къде се вмъква.   */
/* ------------------------------------------------------------------ */

.livex-ladder {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--background);
}

.livex-ladder-h {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  margin-bottom: 0.125rem;
}

.livex-ladder-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: var(--secondary-foreground);
}

.livex-ladder-row.мое {
  background: color-mix(in oklab, var(--primary) 16%, transparent);
  color: var(--mono);
  font-weight: 600;
}

.livex-ladder-range {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--primary);
}
.livex-ladder-row:not(.мое) .livex-ladder-range { color: var(--muted-foreground); }

.livex-ladder-name { color: inherit; }

.livex-ladder-warn {
  font-size: 0.6875rem;
  color: var(--warning);
  margin-top: 0.25rem;
}

/* Миниатюри за втората вълна ефекти. Статични, както първите — дванайсет
   въртящи се картинки една до друга са каша и струват кадри. */

.fxa-rainbow {
  border-color: transparent;
  background:
    linear-gradient(rgb(14 18 25 / 0.9), rgb(14 18 25 / 0.9)) padding-box,
    conic-gradient(from 0deg, #F4564A, #F0B429, #C5F24E, #10B981, #2096F8, #7C4DF5, #F4564A) border-box;
  border: 2px solid transparent;
}

.fxa-pulse {
  background:
    radial-gradient(60% 70% at 50% 50%, color-mix(in oklab, var(--primary) 34%, transparent), transparent 72%),
    rgb(14 18 25 / 0.9);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--primary) 45%, transparent);
}

/* Угасваща крушка: две ярки ленти и една притъмняла между тях. */
.fxa-flicker {
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--primary) 40%, transparent) 0 28%,
      rgb(0 0 0 / 0.55) 28% 46%,
      color-mix(in oklab, var(--primary) 40%, transparent) 46% 74%,
      rgb(0 0 0 / 0.35) 74% 100%),
    rgb(14 18 25 / 0.9);
}

/* Люлка: наклонен правоъгълник вътре. */
.fxa-tilt::after {
  content: '';
  position: absolute;
  inset: 22% 18%;
  border: 2px solid color-mix(in oklab, var(--primary) 70%, transparent);
  border-radius: 0.25rem;
  transform: perspective(120px) rotateY(22deg) rotateX(-8deg);
}

.fxa-aurora {
  background:
    radial-gradient(50% 70% at 24% 36%, color-mix(in oklab, var(--primary) 55%, transparent), transparent 70%),
    radial-gradient(50% 70% at 76% 64%, color-mix(in oklab, var(--spark) 45%, transparent), transparent 70%),
    rgb(14 18 25 / 0.95);
  filter: blur(1px);
}

/* Тичащ кант: светло петно в единия ъгъл на рамката. */
/* Петното трябва да личи в миниатюра висока 3.25rem, затова ъгълът е
   по-широк от истинския ефект и кантът — по-дебел. */
.fxa-runner {
  background:
    linear-gradient(rgb(14 18 25 / 0.9), rgb(14 18 25 / 0.9)) padding-box,
    conic-gradient(from 300deg,
      transparent 0deg,
      color-mix(in srgb, var(--primary) 50%, transparent) 20deg,
      var(--primary) 50deg,
      var(--spark) 78deg,
      color-mix(in srgb, var(--spark) 40%, transparent) 100deg,
      transparent 125deg,
      transparent 360deg) border-box;
  border: 3px solid transparent;
}

.fxa-snow::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2.5px 2.5px at 18% 26%, #FFFFFF 99%, transparent),
    radial-gradient(2px 2px at 42% 62%, #E6EAF2 99%, transparent),
    radial-gradient(3px 3px at 66% 30%, #FFFFFF 99%, transparent),
    radial-gradient(2px 2px at 84% 70%, #E6EAF2 99%, transparent),
    radial-gradient(2px 2px at 30% 82%, #FFFFFF 99%, transparent);
}

.fxa-rain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 9px,
    color-mix(in oklab, var(--primary) 55%, transparent) 9px 10.5px);
}

/* Матрица: колони от чертички с по-ярко чело. */
.fxa-matrix::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 10%, var(--spark) 40%, #FFFFFF 46%, transparent 50%) 18% 0 / 2px 100% no-repeat,
    linear-gradient(to bottom, transparent 30%, var(--spark) 66%, #FFFFFF 72%, transparent 76%) 38% 0 / 2px 100% no-repeat,
    linear-gradient(to bottom, transparent 0%, var(--spark) 26%, #FFFFFF 32%, transparent 36%) 58% 0 / 2px 100% no-repeat,
    linear-gradient(to bottom, transparent 42%, var(--spark) 78%, #FFFFFF 84%, transparent 88%) 78% 0 / 2px 100% no-repeat;
}

.fxa-fire::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 65% at 50% 108%, #F0B429 0%, transparent 70%),
    radial-gradient(28% 50% at 34% 104%, #F4564A 0%, transparent 70%),
    radial-gradient(28% 50% at 68% 104%, #F4564A 0%, transparent 70%);
}

.fxa-bubbles::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 7px at 24% 62%, transparent 68%, color-mix(in oklab, var(--primary) 75%, transparent) 70%, transparent 76%),
    radial-gradient(circle 5px at 52% 36%, transparent 66%, color-mix(in oklab, var(--spark) 70%, transparent) 68%, transparent 76%),
    radial-gradient(circle 9px at 76% 66%, transparent 70%, color-mix(in oklab, var(--primary) 70%, transparent) 72%, transparent 78%);
}

/* Мълния: начупена черта с едно разклонение. */
.fxa-lightning::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(16deg, transparent 47%, var(--spark) 47% 52%, transparent 52%) 42% 0 / 26% 56% no-repeat,
    linear-gradient(-24deg, transparent 47%, var(--spark) 47% 52%, transparent 52%) 54% 44% / 24% 56% no-repeat,
    linear-gradient(64deg, transparent 46%, color-mix(in oklab, var(--spark) 60%, transparent) 46% 53%, transparent 53%) 62% 30% / 20% 34% no-repeat;
}

/* ------------------------------------------------------------------ */
/* Филтър на съобщенията                                               */
/* ------------------------------------------------------------------ */

/* Избор от няколко реда с обяснение — радио бутон, който се натиска цял. */
.livex-pick {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: start;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.livex-pick:hover { border-color: var(--primary); }
.livex-pick.избран {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.livex-pick-name { font-size: 0.875rem; font-weight: 650; color: var(--mono); }
.livex-pick-note { font-size: 0.75rem; color: var(--muted-foreground); }

/* Списъкът с думи: моноширинен, за да се четат по една на ред. */
.livex-words {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Резултатът от пробата. Цветът казва какво е станало, преди да си чел. */
.livex-try {
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.45;
  word-break: break-word;
}
.livex-try.чисто {
  border-color: color-mix(in oklab, var(--good) 45%, transparent);
  background: color-mix(in oklab, var(--good) 10%, transparent);
  color: var(--mono);
}
.livex-try.пипнато {
  border-color: color-mix(in oklab, var(--warning) 50%, transparent);
  background: color-mix(in oklab, var(--warning) 10%, transparent);
  color: var(--mono);
}
.livex-try.спряно {
  border-color: color-mix(in oklab, var(--danger) 50%, transparent);
  background: color-mix(in oklab, var(--danger) 10%, transparent);
  color: var(--mono);
}

/* ------------------------------------------------------------------ */
/* Дневник на известията                                               */
/* ------------------------------------------------------------------ */

.livex-tally {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  color: var(--secondary-foreground);
}
.livex-tally-n { font-weight: 700; font-size: 0.875rem; color: var(--mono); }
.livex-tally-good { border-color: color-mix(in oklab, var(--good) 45%, transparent); }
.livex-tally-warning { border-color: color-mix(in oklab, var(--warning) 50%, transparent); }
.livex-tally-danger { border-color: color-mix(in oklab, var(--danger) 50%, transparent); }

.livex-log-row {
  display: grid;
  grid-template-columns: 7.5rem 0.5rem 11rem 1fr;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}
.livex-log-row:nth-child(odd) { background: color-mix(in oklab, var(--border) 28%, transparent); }

.livex-log-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted-foreground);
}
.livex-log-what { font-weight: 600; color: var(--mono); }
.livex-log-who { color: var(--secondary-foreground); }
.livex-log-why { grid-column: 4; color: var(--muted-foreground); font-style: italic; }

@media (width < 56rem) {
  .livex-log-row { grid-template-columns: 1fr; gap: 0.125rem; }
  .livex-log-row .livex-dot { display: none; }
}
.self-center { align-self: center; }

/* Настройки на джаджа в редактора на overlay-а. Нарочно плътно —
   стоят под самата джаджа в списъка, не на отделен екран. */
.livex-wsettings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--background);
}
.livex-wfield { display: grid; gap: 0.25rem; }
.livex-wlabel { font-size: 0.6875rem; color: var(--muted-foreground); }
.livex-wsettings .kt-select, .livex-wsettings .kt-input { min-width: 8rem; }
.kt-select-sm, .kt-input-sm { height: 2rem; font-size: 0.8125rem; padding-block: 0; }

/* ------------------------------------------------------------------ */
/* Карти на джаджите в редактора на overlay                            */
/*                                                                    */
/* Преди бяха редове с две копчета. Сега всяка е карта със собствените */
/* си настройки — защото настройките им са различни, не еднакви.       */
/* ------------------------------------------------------------------ */

.livex-wcard {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}
.livex-wcard.спряна { opacity: 0.55; }

.livex-wcard-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.livex-wicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 28%, transparent);
}
.livex-wicon i { font-size: 1.0625rem; }
/* Иконата е бутон (избира джаджата на платното), затова ѝ се маха
   вътрешният отстъп на бутона и ѝ се слага показалец. */
.livex-wicon { padding: 0; cursor: pointer; transition: background-color 0.12s ease; }
.livex-wicon:hover { background: color-mix(in oklab, var(--primary) 28%, transparent); }

.livex-wname {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.livex-wtype { font-size: 0.6875rem; color: var(--muted-foreground); }

/* Настройките: две колони, за да не стане кладенец от полета. */
.livex-wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: end;
  gap: 0.625rem 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.livex-wgrid .livex-wfield.широко { grid-column: 1 / -1; }
/* Колоната е тясна: плочките са по-дребни, за да се съберат на един ред. */
.livex-wgrid .livex-color-pick { gap: 0.25rem; flex-wrap: nowrap; }
.livex-wgrid .livex-color-opt {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.4375rem;
  padding: 0.1875rem;
  border-width: 1.5px;
}
.livex-wgrid .livex-color-free::after { width: 0.5rem; height: 0.5rem; }

.livex-wcheck {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--secondary-foreground);
  cursor: pointer;
  align-self: center;
}

.livex-wsave { grid-column: 1 / -1; justify-self: start; }

.livex-wnone {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  padding-top: 0.625rem;
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* Страници за грешка                                                  */
/*                                                                    */
/* Нарочно самостоятелни: не ползват нищо от панела или публичния      */
/* слой. Ако грешката е в базата или в маршрутите, страницата за       */
/* грешка не бива да гръмне в опит да покаже грешката.                 */
/* ------------------------------------------------------------------ */

.livex-err-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--background);
  margin: 0;
  padding: 2rem 1rem;
}

.livex-err {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
  max-width: 34rem;
  text-align: center;
}

.livex-err-logo { width: 4rem; height: 4rem; object-fit: contain; }

.livex-err-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.03em;
}

.livex-err-title { font-size: 1.5rem; font-weight: 700; color: var(--mono); margin: 0; }

.livex-err-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--secondary-foreground);
  margin: 0;
}

.livex-err-actions { display: flex; gap: 0.625rem; flex-wrap: wrap; justify-content: center; margin-top: 0.375rem; }

.livex-err-foot { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 1.5rem; }

/* ------------------------------------------------------------------ */
/* Свит ред за джаджа в редактора                                      */
/* ------------------------------------------------------------------ */

.livex-wrow {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--card);
  transition: border-color 0.14s ease;
}
.livex-wrow:hover { border-color: var(--primary); }
.livex-wrow.спряна { opacity: 0.55; }

.livex-wrow-main { display: grid; gap: 0.125rem; min-width: 0; }
.livex-wrow-main:hover .livex-wname { color: var(--primary); }

/* ------------------------------------------------------------------ */
/* Преглед на джаджа в панела                                          */
/*                                                                    */
/* Същите КЛАСОВЕ като в OBS не стават: стилът там е за цял екран с    */
/* прозрачен фон и би счупил панела. Затова тук са свои, но вървят по  */
/* същите променливи --тон и --размер.                                 */
/* ------------------------------------------------------------------ */

.livex-wprev {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background:
    repeating-conic-gradient(rgb(255 255 255 / 0.03) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px,
    #0a0d13;
}

.wp {
  --тон: var(--primary);
  --размер: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(14 18 25 / 0.86);
  border: 1px solid rgb(255 255 255 / 0.08);
  color: #E6EAF2;
}
.wp.без-фон { background: transparent; border-color: transparent; text-shadow: 0 2px 8px rgb(0 0 0 / 0.9); }

.wp-lbl {
  font-size: calc(var(--размер) * 0.5);
  font-weight: 600;
  color: #8D97A6;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.wp-val { font-size: var(--размер); font-weight: 800; color: var(--тон); line-height: 1.1; }

.wp-bar { display: block; height: calc(var(--размер) * 0.28); border-radius: 999px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.wp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--тон); }

.wp-chat { gap: 6px; }
.wp-msg {
  font-size: var(--размер);
  line-height: 1.3;
  padding: 5px 9px;
  border-radius: 9px;
  background: rgb(14 18 25 / 0.8);
  border-left: 3px solid var(--тон);
}
.wp-chat.без-фон .wp-msg { background: transparent; border-left: none; padding-left: 0; }
.wp-msg b { color: var(--тон); }

.wp-text { align-items: center; font-size: var(--размер); font-weight: 700; color: var(--тон); background: transparent; border: none; }

.wp-train { border-color: var(--тон); }
.wp-trhead { display: flex; align-items: baseline; gap: 8px; }
.wp-trlvl { font-size: var(--размер); font-weight: 900; color: var(--тон); line-height: 1; }
.wp-trclock { margin-left: auto; font-size: calc(var(--размер) * 0.6); font-weight: 700; color: #8D97A6; }
.wp-trwho { font-size: calc(var(--размер) * 0.46); color: #8D97A6; }

.wp-combo { align-items: center; background: transparent; border: none; }
.wp-comboemo {
  width: calc(var(--размер) * 1.2);
  height: calc(var(--размер) * 1.2);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--тон) 35%, transparent);
  border: 2px solid var(--тон);
}
.wp-combon { font-size: calc(var(--размер) * 0.9); font-weight: 900; color: #fff; }

.wp-alert { align-items: center; text-align: center; border: 2px solid var(--тон); }
.wp-alerttitle { font-size: var(--размер); font-weight: 800; color: #fff; }
.wp-alerttitle b { color: var(--тон); }
.wp-alertmsg { font-size: calc(var(--размер) * 0.65); color: #C7CFDB; }

/* Емотите: точките показват КЪДЕ ще летят, не как изглеждат. */
.wp-emotes {
  position: relative;
  min-height: 7rem;
  background: transparent;
  border: 1px dashed rgb(255 255 255 / 0.12);
}
.wp-emotes span:not(.wp-note) {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.25rem;
  background: color-mix(in oklab, var(--primary) 55%, transparent);
}
.wp-note { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 0.6875rem; color: var(--muted-foreground); }

.wp-e-цял span:nth-child(1) { left: 12%; top: 20%; } .wp-e-цял span:nth-child(2) { left: 38%; top: 55%; }
.wp-e-цял span:nth-child(3) { left: 62%; top: 28%; } .wp-e-цял span:nth-child(4) { left: 80%; top: 62%; }
.wp-e-цял span:nth-child(5) { left: 25%; top: 72%; } .wp-e-цял span:nth-child(6) { left: 52%; top: 12%; }
.wp-e-цял span:nth-child(7) { left: 88%; top: 30%; }

.wp-e-отдолу span { bottom: 10%; top: auto; }
.wp-e-отдолу span:nth-child(1) { left: 10%; } .wp-e-отдолу span:nth-child(2) { left: 24%; bottom: 26%; }
.wp-e-отдолу span:nth-child(3) { left: 40%; } .wp-e-отдолу span:nth-child(4) { left: 56%; bottom: 34%; }
.wp-e-отдолу span:nth-child(5) { left: 70%; } .wp-e-отдолу span:nth-child(6) { left: 84%; bottom: 22%; }
.wp-e-отдолу span:nth-child(7) { left: 92%; }

.wp-e-отгоре span { top: 12%; }
.wp-e-отгоре span:nth-child(2) { top: 28%; left: 26%; } .wp-e-отгоре span:nth-child(1) { left: 12%; }
.wp-e-отгоре span:nth-child(3) { left: 42%; } .wp-e-отгоре span:nth-child(4) { left: 58%; top: 32%; }
.wp-e-отгоре span:nth-child(5) { left: 72%; } .wp-e-отгоре span:nth-child(6) { left: 86%; top: 24%; }
.wp-e-отгоре span:nth-child(7) { left: 94%; }

.wp-e-краища span:nth-child(odd) { left: 7%; } .wp-e-краища span:nth-child(even) { left: 88%; }
.wp-e-краища span:nth-child(1) { top: 18%; } .wp-e-краища span:nth-child(2) { top: 26%; }
.wp-e-краища span:nth-child(3) { top: 44%; } .wp-e-краища span:nth-child(4) { top: 52%; }
.wp-e-краища span:nth-child(5) { top: 68%; } .wp-e-краища span:nth-child(6) { top: 74%; }
.wp-e-краища span:nth-child(7) { top: 34%; }

.wp-e-отстрани span:nth-child(odd) { left: 10%; } .wp-e-отстрани span:nth-child(even) { left: 80%; }
.wp-e-отстрани span:nth-child(1) { top: 30%; } .wp-e-отстрани span:nth-child(2) { top: 34%; }
.wp-e-отстрани span:nth-child(3) { top: 50%; left: 32%; } .wp-e-отстрани span:nth-child(4) { top: 52%; left: 62%; }
.wp-e-отстрани span:nth-child(5) { top: 66%; } .wp-e-отстрани span:nth-child(6) { top: 68%; }
.wp-e-отстрани span:nth-child(7) { top: 48%; left: 47%; }

.wp-e-фонтан span:nth-child(1) { left: 48%; bottom: 8%; top: auto; }
.wp-e-фонтан span:nth-child(2) { left: 36%; top: 48%; } .wp-e-фонтан span:nth-child(3) { left: 60%; top: 46%; }
.wp-e-фонтан span:nth-child(4) { left: 24%; top: 30%; } .wp-e-фонтан span:nth-child(5) { left: 72%; top: 28%; }
.wp-e-фонтан span:nth-child(6) { left: 14%; top: 18%; } .wp-e-фонтан span:nth-child(7) { left: 82%; top: 16%; }

.wp-e-експлозия span:nth-child(1) { left: 48%; top: 44%; }
.wp-e-експлозия span:nth-child(2) { left: 24%; top: 22%; } .wp-e-експлозия span:nth-child(3) { left: 72%; top: 22%; }
.wp-e-експлозия span:nth-child(4) { left: 16%; top: 62%; } .wp-e-експлозия span:nth-child(5) { left: 80%; top: 62%; }
.wp-e-експлозия span:nth-child(6) { left: 48%; top: 12%; } .wp-e-експлозия span:nth-child(7) { left: 48%; top: 74%; }

.wp-e-вълна span:nth-child(1) { left: 8%; top: 46%; } .wp-e-вълна span:nth-child(2) { left: 22%; top: 28%; }
.wp-e-вълна span:nth-child(3) { left: 36%; top: 20%; } .wp-e-вълна span:nth-child(4) { left: 50%; top: 34%; }
.wp-e-вълна span:nth-child(5) { left: 64%; top: 56%; } .wp-e-вълна span:nth-child(6) { left: 78%; top: 62%; }
.wp-e-вълна span:nth-child(7) { left: 90%; top: 44%; }

.wp-e-въртележка span:nth-child(1) { left: 48%; top: 14%; } .wp-e-въртележка span:nth-child(2) { left: 72%; top: 24%; }
.wp-e-въртележка span:nth-child(3) { left: 82%; top: 48%; } .wp-e-въртележка span:nth-child(4) { left: 72%; top: 70%; }
.wp-e-въртележка span:nth-child(5) { left: 48%; top: 78%; } .wp-e-въртележка span:nth-child(6) { left: 24%; top: 70%; }
.wp-e-въртележка span:nth-child(7) { left: 14%; top: 48%; }
.wp-plate { gap: 2px; }
.wp-goal { gap: 4px; }

@media (width >= 40rem) {
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
}

/* ------------------------------------------------------------------ */
/* Страницата «На живо»                                                */
/*                                                                    */
/* Гледа се по време на стрийм, обикновено с едно око и от разстояние. */
/* Затова числата са едри, а всичко останало е ситно и подредено.      */
/* ------------------------------------------------------------------ */

.livex-bigbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}

.livex-big {
  display: grid;
  gap: 0.1875rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border);
  background: var(--card);
}
.livex-big.внимание { border-color: color-mix(in oklab, var(--warning) 55%, transparent); }

.livex-big-lbl {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
}
.livex-big-val {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--mono);
}
.livex-big-sub { font-size: 0.75rem; color: var(--muted-foreground); }

/* «На живо» свети само когато наистина е така. */
.livex-big-живо.тече {
  border-color: color-mix(in oklab, var(--good) 55%, transparent);
  background: color-mix(in oklab, var(--good) 9%, var(--card));
}
.livex-big-живо.тече .livex-big-val { color: var(--good); }

/* Пулсът показва, че страницата диша — без него не личи, че се обновява. */
.livex-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--muted-foreground);
  opacity: 0.4;
}
.livex-pulse.бие { animation: пулсБие 0.9s ease-out; }
@keyframes пулсБие {
  0%   { opacity: 1; background: var(--good); transform: scale(1.5); }
  100% { opacity: 0.4; background: var(--muted-foreground); transform: scale(1); }
}

.livex-saybar { display: flex; gap: 0.375rem; flex: 1; min-width: 14rem; }
.livex-saybar .kt-input { flex: 1; }
/* Изборът на глас не се свива — ако се скъси, не се чете чие е името. */
.livex-sayas { flex: 0 0 auto; width: auto; min-width: 9.5rem; }

/* ------------------------------------------------------------------ */
/* «Готов ли си» — бадж, не карта                                     */
/*                                                                    */
/* Тих зелен, докато всичко е наред; оранжев с брой, когато не е.     */
/* Броят е и думата: «2 неща за оправяне» се чете и без цвят.         */
/* ------------------------------------------------------------------ */
.livex-readybtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--good);
  background: color-mix(in oklab, var(--good) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--good) 32%, transparent);
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.livex-readybtn:hover { background: color-mix(in oklab, var(--good) 20%, transparent); }

.livex-readybtn.куца {
  color: var(--warning);
  background: color-mix(in oklab, var(--warning) 13%, transparent);
  border-color: color-mix(in oklab, var(--warning) 34%, transparent);
}
.livex-readybtn.куца:hover { background: color-mix(in oklab, var(--warning) 21%, transparent); }

/* ------------------------------------------------------------------ */
/* Попъп                                                              */
/*                                                                    */
/* Нативен <dialog>. Metronic е предварително компилиран и правила за */
/* него няма никакви — включително за ::backdrop, който без това е    */
/* прозрачен и попъпът виси в нищото.                                 */
/* ------------------------------------------------------------------ */
.livex-modal {
  /*
      `margin: auto` и `inset: 0` са ЗАДЪЛЖИТЕЛНИ, не украса.

      Браузърът центрира модален <dialog> точно с тях, но нулиращият
      слой на Tailwind слага `margin: 0` на всичко и го изяжда — попъпът
      се залепва горе вляво. Пореден случай от същия род: компилираният
      Metronic няма нито едно правило за <dialog>.
  */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  background: var(--card);
  color: var(--secondary-foreground);
  display: grid;
  gap: 0.875rem;
}
.livex-modal:not([open]) { display: none; }
.livex-modal::backdrop { background: rgba(5, 7, 12, 0.72); }

.livex-modal-x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  margin: 0;
}

/* Свой бутон за затваряне: `kt-btn-ghost` няма правило в компилирания CSS
   и излизаше като празно квадратче. */
.livex-modal-x button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
}
.livex-modal-x button:hover {
  color: var(--mono);
  background: color-mix(in oklab, var(--border) 40%, transparent);
}

/* Чатът: най-новото е долу, както в истинския чат. */
/* Чатът и знакът «ново отдолу» — знакът виси над кутията, не в нея. */
.livex-chatwrap { position: relative; }

.livex-newbelow {
  position: absolute;
  left: 50%;
  bottom: 0.625rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--primary-foreground, #fff);
  background: var(--primary);
  border: none;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.8);
}
.livex-newbelow[hidden] { display: none; }

.livex-chatfeed {
  display: grid;
  gap: 0.25rem;
  align-content: end;
  max-height: 26rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.livex-chatrow {
  display: grid;
  grid-template-columns: 3.5rem auto 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}
.livex-chatrow:nth-child(odd) { background: color-mix(in oklab, var(--border) 26%, transparent); }

.livex-chattime {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}
.livex-chatwho {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
/* Името носи цвета, който човекът си е избрал в Kick; без избор — марката. */
.livex-chatname { font-weight: 700; color: var(--primary); }
.livex-chatmsg { color: var(--secondary-foreground); word-break: break-word; }
.livex-chatemo { height: 1.25em; width: auto; vertical-align: -0.25em; margin: 0 1px; }

/* ------------------------------------------------------------------ */
/* Значките от Kick                                                   */
/*                                                                    */
/* Кратък надпис, не икона: «МОД» се чете от един поглед, а иконата   */
/* в размер 10px иска да бъде разгледана. Цветът е помощен — ако го   */
/* няма, надписът пак казва всичко, затова значката е четима и при    */
/* далтонизъм, и при черно-бял печат.                                 */
/* ------------------------------------------------------------------ */
.livex-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--тон, var(--primary));
  background: color-mix(in oklab, var(--тон, var(--primary)) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--тон, var(--primary)) 34%, transparent);
}
.livex-badge i { font-size: 0.8125rem; }
.livex-badge-sm {
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  letter-spacing: 0;
}

/*
    Тоновете са категоричните серии от палитрата, а НЕ състоянията:
    --good, --warning, --danger и --points са запазени и не стават за
    «цвят номер 4». Зеленото на Kick също отпада — то е за логото.
    Трета серия (виолетово #A474EC) липсва нарочно: бие се с марката.
*/
.livex-badge-brand   { --тон: var(--primary); }
.livex-badge-spark   { --тон: var(--spark); }
.livex-badge-cyan    { --тон: #00A7A8; }
.livex-badge-orange  { --тон: #E36A00; }
.livex-badge-green   { --тон: #3AAD47; }
.livex-badge-magenta { --тон: #DD5DA1; }
.livex-badge-blue    { --тон: #2096F8; }
.livex-badge-muted   { --тон: var(--muted-foreground); }

/* Кой какъв е — групата води, хората я следват с по-тих текст. */
.livex-rolegrp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}
.livex-rolewho {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--secondary-foreground);
  word-break: break-word;
}

/* Наказанието е два реда: кой и кога отгоре, обстоятелствата отдолу. */
.livex-banrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  border-left: 2px solid var(--danger);
  background: color-mix(in oklab, var(--danger) 9%, transparent);
}
.livex-banwho { font-size: 0.8125rem; font-weight: 650; color: var(--mono); }
.livex-bantime {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}
.livex-banwhy {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--secondary-foreground);
  word-break: break-word;
}

/* Събития и пропуснати — един и същ ред, за да се четат еднакво. */
.livex-evrow {
  display: grid;
  grid-template-columns: 0.5rem 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3125rem 0.25rem;
  font-size: 0.75rem;
}
.livex-evwhat { color: var(--mono); font-weight: 600; }
.livex-evwho { color: var(--secondary-foreground); }
/* Втори ред под събитие — засега само наказанието го ползва. */
/* Стои ДО реда, не в него, затова се подравнява с отстъп, а не с  */
/* grid-column: контейнерът е решетка от една колона.              */
.livex-evmore {
  padding-left: 1rem;
  margin-top: -0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--muted-foreground);
  word-break: break-word;
}
.livex-evtime {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted-foreground);
}

/* Лента за напредък — ползва се и от целите, и от влака. */
.livex-prog {
  display: block;
  height: 0.375rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--border) 60%, transparent);
  overflow: hidden;
}
.livex-prog i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.5s cubic-bezier(.2,.8,.3,1);
}

.livex-goalrow { display: grid; gap: 0.3125rem; }
.livex-goalrow-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--secondary-foreground);
}

/* «Готов ли си» — редът мълчи, когато е наред, и обяснява, когато не е. */
.livex-ready {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.75rem;
  color: var(--warning);
}
.livex-ready.ок { color: var(--muted-foreground); }
.livex-ready i { font-size: 0.875rem; margin-top: 0.0625rem; }
.livex-ready.ок i { color: var(--good); }

.livex-ready span { display: grid; gap: 0.125rem; }
.livex-ready-what { color: var(--secondary-foreground); }
.livex-ready.ок .livex-ready-what { color: var(--muted-foreground); }
.livex-ready-how { color: var(--warning); opacity: 0.85; }

/* ------------------------------------------------------------------ */
/* Начална страница                                                    */
/*                                                                    */
/* Въздухът е част от съобщението. Преди тук имаше единайсет карти,    */
/* които се биеха с едно изречение.                                    */
/* ------------------------------------------------------------------ */

.livex-hero {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding-block: 6rem 5rem;
  text-align: center;
}

.livex-hero-h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--mono);
  margin: 0;
}

.livex-hero-p {
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--secondary-foreground);
  margin: 0;
  /* Центриран текст не се подравнява двустранно — дупките се виждат. */
  text-align: center;
  hyphens: none;
}

/* Трите стъпки: числата носят подредбата, не рамки. */
.livex-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}

.livex-step { display: grid; gap: 0.5rem; justify-items: start; }

.livex-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 32%, transparent);
}
.livex-step-t { font-size: 1.0625rem; font-weight: 650; color: var(--mono); }
.livex-step-d { font-size: 0.875rem; line-height: 1.6; color: var(--secondary-foreground); }

/* Трите отличия: иконата е акцент, не украшение. */
.livex-points3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2.25rem 2.5rem;
  margin-top: 2.5rem;
}

/*
    Иконата е отляво и държи двата реда, заглавието застава до нея.
    Така трите точки правят една колона от икони, която се сканира
    отгоре надолу, вместо три отделни блокчета.
*/
.livex-point3 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "икона заглавие"
    "икона текст";
  gap: 0.375rem 1.25rem;
  align-items: center;
}

/* Иконата води погледа към точката — дребна тя не върши работа. */
.livex-point3 i {
  grid-area: икона;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 1.625rem;
  font-size: 3rem;
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
}
.livex-point3-t {
  grid-area: заглавие;
  align-self: end;
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--mono);
}
.livex-point3-d {
  grid-area: текст;
  align-self: start;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--secondary-foreground);
  margin: 0;
}

/*
    На телефон иконата отляво изяжда ширината на текста — там трите
    точки се връщат в колона, но иконата остава голяма.
*/
@media (max-width: 29.99rem) {
  .livex-point3 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "икона" "заглавие" "текст";
    justify-items: start;
    gap: 0.5rem;
  }
}

/* Избор на тема — плочки, не падащо меню: виждат се всички наведнъж. */
.livex-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.livex-topic {
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--secondary-foreground);
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}
.livex-topic:hover { border-color: var(--primary); color: var(--mono); }
.livex-topic input { position: absolute; opacity: 0; pointer-events: none; }
.livex-topic.избран {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 16%, transparent);
  color: var(--primary);
  font-weight: 600;
}

/* Текст, който НЕ бива да се подравнява двустранно: адреси, кратки редове. */
.livex-plain { text-align: left; hyphens: none; }

/* ==================================================================== */
/* Редакторът на съобщения за Discord                                   */
/*                                                                      */
/* Прегледът рисува със СЪЩИТЕ цветове и разстояния като Discord.       */
/* Преглед, който лъже, е по-лош от никакъв: човекът нагласява нещо,    */
/* което после излиза другояче, и губи доверие в целия екран.           */
/* Затова тук стойностите са на Discord, не на нашата палитра — това е  */
/* снимка на чужд интерфейс, не наш елемент.                            */
/* ==================================================================== */
.livex-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 71.875rem) {
  .livex-builder { grid-template-columns: minmax(0, 1fr); }
}

.livex-embedfields[hidden] { display: none; }

/* Качване: истинското поле е скрито, бутонът е етикетът му. */
.livex-upload { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.livex-hidefile { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.livex-colorin { padding: 0.25rem; height: 2.5rem; cursor: pointer; }

.livex-btnrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 0.5rem;
}

.livex-vars summary { list-style: none; }
.livex-vars summary::-webkit-details-marker { display: none; }

/* --- самият преглед --- */
.livex-dpreview {
  padding: 1rem;
  border-radius: 0.75rem;
  background: #313338;          /* фонът на Discord, тъмна тема */
  border: 1px solid #1e1f22;
}

.livex-dmsg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; }

.livex-davatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
}

.livex-dname { font-size: 0.9375rem; font-weight: 600; color: #f2f3f5; }
.livex-dbot {
  margin-left: 0.25rem;
  padding: 0.0625rem 0.25rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #fff;
  background: #5865F2;          /* марковото синьо на Discord */
}

.livex-dtext {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #dbdee1;
  white-space: pre-wrap;
  word-break: break-word;
}
.livex-dtext[hidden] { display: none; }

.livex-dembed {
  display: grid;
  gap: 0.375rem;
  max-width: 100%;
  margin-top: 0.25rem;
  padding: 0.75rem 1rem 1rem;
  border-radius: 0.25rem;
  border-left: 4px solid var(--черта, #7C4DF5);
  background: #2b2d31;
  position: relative;
}
.livex-dembed[hidden] { display: none; }

.livex-dauthor { font-size: 0.8125rem; font-weight: 600; color: #f2f3f5; }
.livex-dauthor[hidden] { display: none; }

.livex-dtitle { font-size: 0.9375rem; font-weight: 600; color: #00a8fc; word-break: break-word; }
.livex-dtitle[hidden] { display: none; }

.livex-ddesc {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #dbdee1;
  white-space: pre-wrap;
  word-break: break-word;
}
.livex-ddesc[hidden] { display: none; }

.livex-dimg { width: 100%; border-radius: 0.25rem; margin-top: 0.25rem; }
.livex-dimg[hidden] { display: none; }

/* Малката картинка стои горе вдясно, както в Discord. */
.livex-dthumb {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 0.25rem;
}
.livex-dthumb[hidden] { display: none; }

.livex-dfooter { font-size: 0.75rem; color: #949ba4; }
.livex-dfooter[hidden] { display: none; }

.livex-dbtns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.livex-dbtns[hidden] { display: none; }

.livex-dbtn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.1875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #dbdee1;
  background: #4e5058;          /* «вторичният» бутон на Discord */
}

/* Избор кое съобщение се нагласява. Лентите са връзки, не бутони:
   смяната презарежда страницата, за да не се губи незаписаното тихо. */
.livex-eventtabs { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.livex-eventtab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.livex-eventtab:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.livex-eventtab.избран {
  color: var(--mono);
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 14%, transparent);
}

/* «изкл.» казва, че събитието е изключено горе — иначе човек нагласява
   съобщение, което никога няма да тръгне, и не разбира защо. */
.livex-offchip {
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--warning);
  background: color-mix(in oklab, var(--warning) 16%, transparent);
}

/* Броячите в имената на Discord каналите. */
.livex-counterrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.625rem 1rem;
  align-items: center;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--card);
}

.livex-countername {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mono);
  word-break: break-word;
}
.livex-countermeta { font-size: 0.6875rem; color: var(--muted-foreground); }

/* Грешката стои при самия брояч: «не работи» без причина праща човека
   да гадае, а най-честата причина е липсващо право. */
.livex-countererr { font-size: 0.6875rem; color: var(--warning); }

@media (max-width: 40rem) {
  .livex-counterrow { grid-template-columns: minmax(0, 1fr); }
}

/* Редът за добавяне на брояч.
   Написан на ръка: Metronic е предварително компилиран и клас с
   произволна стойност като sm:grid-cols-[...] просто го няма в CSS —
   формата се подрежда в една колона и изглежда счупена. */
.livex-counteradd {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  align-items: end;
}

@media (min-width: 40rem) {
  .livex-counteradd {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}

/* ==================================================================== */
/* Партньорите — лента над подвала                                      */
/*                                                                      */
/* Сиви лога, които се оцветяват при посочване. Лентата не бива да      */
/* краде вниманието от съдържанието, но трябва да е жива, щом някой я   */
/* потърси. `filter` и `opacity` са евтини за браузъра.                 */
/* ==================================================================== */
.livex-partners {
  margin-top: 5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--border) 16%, transparent);
}

.livex-partners-h {
  display: block;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.livex-partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}

.livex-partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
  filter: grayscale(1);
  opacity: 0.55;
}

.livex-partner img {
  /* Височината води, широчината следва: логата идват с различни размери
     и подреждане по широчина прави реда на зъбци. */
  height: 2.25rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
}

a.livex-partner:hover {
  filter: none;
  opacity: 1;
  background: color-mix(in oklab, var(--border) 40%, transparent);
}

/* Редът за добавяне и редакция на партньор. Написани на ръка: Metronic е
   предварително компилиран и класовете с произволни стойности ги няма. */
.livex-partneradd,
.livex-partnerrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: end;
}

.livex-partnerlogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--border) 30%, transparent);
}
.livex-partnerlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.livex-posin { width: 5rem; }

@media (min-width: 48rem) {
  .livex-partneradd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .livex-partnerrow {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto auto;
    align-items: end;
  }
}

/* ==================================================================== */
/* Дясната колона на overlay редактора                                  */
/*                                                                      */
/* Подредена по честота: пробата е горе (натиска се, докато гледаш      */
/* платното), джаджите след нея, адресът за OBS — най-долу и свит,      */
/* защото се ползва веднъж при настройката.                             */
/* ==================================================================== */

/* Пробата: менюто взема остатъка, бутонът — колкото му трябва. */
.livex-tryrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* Сгъваемата карта с адреса                                          */
/*                                                                    */
/* Класовете са `livex-obsfold-*`, а не общото `livex-fold-*`:        */
/* екранът с известията гради свое сгъване по същото време и двете    */
/* семейства с едно име щяха да се бият в този файл.                  */
/* ------------------------------------------------------------------ */
.livex-obsfold { overflow: hidden; }

.livex-obsfold-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Триъгълникът по подразбиране е различен във всеки браузър; махаме го
   и рисуваме свой, за да е еднакъв навсякъде. */
.livex-obsfold-head::-webkit-details-marker { display: none; }

.livex-obsfold-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--mono);
}

.livex-obsfold-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}
/* Стрелката сочи надясно, когато е свито, и надолу, когато е отворено. */
.livex-obsfold-hint::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.livex-obsfold[open] .livex-obsfold-hint::after { transform: rotate(45deg); }

.livex-obsfold-body {
  display: grid;
  gap: 0.75rem;
  padding: 0 1.25rem 1.25rem;
}

/*
    Докато OBS не се е обаждал нито веднъж, адресът е следващата стъпка
    на човека — застава пръв в колоната. Редът се сменя с `order`, а не
    с второ копие на същия блок: две копия се разминават още при първата
    поправка само в едното.
*/
.livex-obsfold-first { order: -1; }

/* ------------------------------------------------------------------ */
/* «Върни липсващите» — тихо, най-долу                                */
/* ------------------------------------------------------------------ */
.livex-restore {
  display: grid;
  gap: 0.375rem;
  justify-items: start;
  padding: 0 0.25rem;
}
.livex-restore-hint {
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* Бутон само с икона. Повтарящите се «Пробвай» / «Промени» в списък от
   двайсет реда изяждат реда, в който пише важното. */
.livex-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: var(--secondary-foreground);
  background: transparent;
  border: 1px solid var(--border);
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.livex-iconbtn:hover {
  color: var(--mono);
  background: color-mix(in oklab, var(--border) 45%, transparent);
}
.livex-iconbtn.основен { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.livex-iconbtn.основен:hover { background: color-mix(in oklab, var(--primary) 16%, transparent); }
.livex-iconbtn i { font-size: 0.9375rem; }

/* Сгъваем блок за настройки, които се пипат веднъж и после с месеци не. */
.livex-fold {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  padding: 1.25rem 1.5rem;
}
.livex-fold > summary { list-style: none; }
.livex-fold > summary::-webkit-details-marker { display: none; }

.livex-fold-h {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mono);
}
.livex-fold-h i { font-size: 1.125rem; color: var(--muted-foreground); }
.livex-fold-sub { font-size: 0.75rem; font-weight: 400; color: var(--muted-foreground); }
.livex-fold[open] > summary { margin-bottom: 0.25rem; }

/* Събитие без нито едно известие стои приглушено — то е дупка, не избор. */
.livex-eventtab.празен { opacity: 0.55; }
.livex-eventtab b { color: var(--mono); }

/* Два бутона в банера за бисквитки. Отказът е със същата големина като
   приемането — скрит или по-малък отказ прави съгласието невалидно. */
.livex-cookie-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 0 0 auto; }

/* ==================================================================== */
/* Сайдбарът — цветни икони, значки и разделители                       */
/*                                                                      */
/* Дотук деветнайсет еднакво сиви икони, включително на отворената      */
/* страница: надписът ставаше виолетов, иконата оставаше сива. Сега     */
/* всеки раздел носи свой цвят от категоричните серии (разделът е       */
/* серия, не състояние), приглушен в покой и пълен при посочване и      */
/* на активния ред.                                                     */
/* ==================================================================== */
.livex-menu-icon {
  color: color-mix(in oklab, var(--раздел, var(--primary)) 62%, var(--muted-foreground));
  transition: color 0.16s ease;
}

.livex-menu-link:hover .livex-menu-icon,
.kt-menu-item.active .livex-menu-icon { color: var(--раздел, var(--primary)); }

/* Изключеният модул е угасен — и иконата, и надписът. */
.livex-menu-link.угасен .livex-menu-icon { color: var(--muted-foreground); opacity: 0.6; }

/* Активният ред носи тънка черта в цвета на раздела: окото я хваща
   преди да е прочело надписа. */
.kt-menu-item.active > .livex-menu-link {
  box-shadow: inset 2px 0 0 0 var(--раздел, var(--primary));
}

/* Разделител между потребителското, админското и собственическото. */
.livex-menu-sep {
  display: block;
  margin: 0.875rem 0 0.25rem;
  padding: 0 10px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

/* Значките в менюто носят цвета на СОБСТВЕНИЯ си вид: «скоро» е
   изчакване, «ново» е новина, «бета» е предупреждение. Еднакъв сив
   кант за трите не казва нищо. */
.livex-menu-badge {
  margin-left: auto;
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--тон);
  background: color-mix(in oklab, var(--тон) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--тон) 32%, transparent);
}
.livex-menu-badge.скоро { --тон: var(--muted-foreground); }
.livex-menu-badge.бета  { --тон: var(--warning); }
.livex-menu-badge.ново  { --тон: var(--spark); }

/* ==================================================================== */
/* Поправки по одита — телефон                                          */
/* ==================================================================== */

/* Редът в чата: час, име и значки изяждаха всичко и за съобщението
   оставаха ~95 пиксела. Името се чупеше по средата, а едноредово
   съобщение ставаше пет реда. На тясно решетката се сгъва на два реда. */
@media (max-width: 30rem) {
  .livex-chatrow {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.125rem 0.5rem;
  }
  .livex-chatwho { white-space: normal; }
  .livex-chatmsg { grid-column: 1 / -1; }
}

/* «Последни събития» на /panel/channel: лявата страна с min-w-0 и
   дясната с whitespace-nowrap даваха min-content над 390 и влачеха
   ЦЯЛАТА страница настрани — всяка карта си губеше дясното поле. */
@media (max-width: 30rem) {
  .livex-eventline {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }
  .livex-eventline > .livex-eventwhen { white-space: normal; }
}

/* Заглавният ред на карта с бутони: двата бутона в едно `flex` без
   пренасяне разтягаха страницата с 15 пиксела. */
@media (max-width: 30rem) {
  .livex-cardhead { flex-wrap: wrap; row-gap: 0.625rem; }
  .livex-cardhead > * { min-width: 0; }
}

/* Последна ограда: нищо не бива да влачи страницата настрани, каквото
   и да се добави утре. Не крие проблем — само спира влаченето. */
html, body { overflow-x: hidden; }

/* Опасното действие в цвета на опасността — но пак с `title`, защото
   цветът сам по себе си не е надпис. */
.livex-iconbtn.опасен { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 35%, var(--border)); }
.livex-iconbtn.опасен:hover { background: color-mix(in oklab, var(--danger) 14%, transparent); }

/* Логата във футъра носят цветовете си при посочване. Палитрата
   разрешава марковия цвят на платформата ИМЕННО за лого — а в сиво
   трите икони бяха и най-ниският контраст на страницата (3,57:1). */
.livex-social { color: var(--secondary-foreground); transition: color 0.16s ease; }
.livex-social:hover.livex-social-discord { color: var(--discord); }
.livex-social:hover.livex-social-facebook { color: #1877F2; }
.livex-social:hover.livex-social-instagram { color: #E1306C; }

/* Честите въпроси. Нативен <details>: отваря се и без JavaScript, а
   съдържанието е в страницата от самото начало — чатбот, който я чете,
   вижда отговорите, без да изпълнява скриптове. */
.livex-faq {
  display: grid;
  gap: 0.625rem;
  max-width: 54rem;
  margin: 2.5rem auto 0;
}

.livex-faq-item {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  padding: 1rem 1.25rem;
}

.livex-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mono);
  text-align: start;
}
.livex-faq-q::-webkit-details-marker { display: none; }
.livex-faq-q i {
  flex: 0 0 auto;
  font-size: 0.875rem;
  color: var(--primary);
  transition: transform 0.18s ease;
}
.livex-faq-item[open] .livex-faq-q i { transform: rotate(45deg); }

.livex-faq-a {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--secondary-foreground);
  text-align: start;
}

/* Заглавието и състоянието на модула — на един ред.
   Баджът носи цвета на състоянието си: «готов» в цвета на успеха,
   «скоро» приглушено. Еднакъв вид за двете не казваше нищо, а
   одитът намери, че «готов» дори се четеше по-зле от «скоро». */
.livex-module-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}

.livex-module-state {
  flex: 0 0 auto;
  padding: 0.125rem 0.4375rem;
  border-radius: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--тон);
  background: color-mix(in oklab, var(--тон) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--тон) 34%, transparent);
}
.livex-module-state.готов { --тон: var(--good); }
.livex-module-state.скоро { --тон: var(--muted-foreground); }

/* Описанието тръгва веднага под заглавието — без празния ред, който
   оставаше, когато баджът беше на собствен ред. */
.livex-module { gap: 0.625rem; }
.livex-module-top { margin-bottom: 0.125rem; }

/* ==================================================================== */
/* Страницата на един потребител                                        */
/*                                                                      */
/* Шапката носи цвета на РОЛЯТА, баджовете — своя собствен. Ролята е    */
/* власт, баджът е украшение; ако и двете боядисваха реда, нямаше да    */
/* се разбере кое какво значи.                                          */
/* ==================================================================== */
.livex-person-head {
  border-left: 3px solid var(--роля, var(--primary));
  background: linear-gradient(
    to right,
    color-mix(in oklab, var(--роля, var(--primary)) 9%, var(--card)),
    var(--card) 40%
  );
}

.livex-person-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.livex-rolepill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--роля, var(--primary));
  background: color-mix(in oklab, var(--роля, var(--primary)) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--роля, var(--primary)) 36%, transparent);
}
.livex-rolepill i { font-size: 0.8125rem; }

.livex-userbadge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 650;
  color: var(--тон);
  background: color-mix(in oklab, var(--тон) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--тон) 32%, transparent);
}
.livex-userbadge i { font-size: 0.75rem; }

/* Изборът на бадж показва и какво значи — иначе «Бета» и «Приятел» са
   просто думи и собственикът гадае какво раздава. */
.livex-badgepick {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.livex-badgepick:hover { border-color: color-mix(in oklab, var(--тон) 45%, var(--border)); }
.livex-badgepick i { font-size: 1rem; color: var(--тон); }
.livex-badgepick b { font-size: 0.8125rem; color: var(--mono); }

.livex-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.livex-back:hover { color: var(--primary); }

/* Редът в списъка носи цвета на ролята — същото правило като на
   страницата на човека, за да се разпознава от екран на екран. */
.livex-person-row.по-роля {
  border-left: 3px solid var(--роля, var(--border));
}
.livex-person-row.по-роля:hover {
  border-color: color-mix(in oklab, var(--роля) 40%, var(--border));
  border-left-color: var(--роля);
}
a.livex-person-name:hover { color: var(--primary); }

/* Иконата държи горния си ръб, а заглавието и текстът текат до нея.
   С `align-items: center` голяма икона до къс текст увисваше по средата. */
.livex-module-top { align-items: flex-start; }
.livex-module-head { gap: 0.5rem; }
.livex-module-head .livex-module-text { margin: 0; }