/*
 * host24 — тема личного кабинета WHMCS (дочерняя для twenty-one).
 * Подключается после Bootstrap 4 / twenty-one и визуально переопределяет их.
 * Цвета, радиусы, тени — только CSS-переменные из tokens.css (генерируется из globals.css сайта).
 * Описание дизайн-системы: docs/DESIGN_SYSTEM.md. Структура файла:
 *   0. Шрифт   1. База   2. Иконки/утилиты   3. Оболочка (сайдбар, шапка, нижняя панель)   4. Гостевая/вход
 *   5. Кнопки   6. Поля   7. Карточки/списки   8. Таблицы/DataTables   9. Бейджи статусов   10. Алерты/модалки/меню
 *   11. Дашборд   12. Страницы (услуга, домен, тикет, профиль, ошибки)   13. Печать
 */

/* ---------------------------------------------------------------- 0. Шрифт (Onest, OFL-1.1, self-host) */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Знак тенге — из системного шрифта (как на сайте) */
@font-face {
  font-family: "Tenge Sign";
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("Roboto"), local("Segoe UI");
  unicode-range: U+20B8;
}

/* ---------------------------------------------------------------- 1. База */
:root {
  /* Производные токены кабинета (только из базовых) */
  --h24-line: color-mix(in srgb, var(--foreground) 8%, transparent);
  --h24-ring-soft: color-mix(in srgb, var(--ring) 22%, transparent);
  --h24-sidebar-w: 16.5rem;
  --h24-topbar-h: 4rem;
  --h24-r-btn: calc(var(--radius) * 1.4); /* 14px — кнопки и поля, как на сайте */
  --h24-r-sm: calc(var(--radius) * 1); /* 10px — пункты меню */
  --h24-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-padding-top: 5rem;
}

body.h24 {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.h24 h1, .h24 h2, .h24 h3, .h24 h4, .h24 h5, .h24 h6,
.h24 .h1, .h24 .h2, .h24 .h3, .h24 .h4, .h24 .h5, .h24 .h6 {
  font-family: var(--font-heading);
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h24 h1, .h24 .h1 { font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.15; }
.h24 h2, .h24 .h2 { font-size: 1.375rem; line-height: 1.2; }
.h24 h3, .h24 .h3 { font-size: 1.125rem; line-height: 1.3; }
.h24 h4, .h24 .h4, .h24 h5, .h24 .h5 { font-size: 1rem; line-height: 1.35; }
.h24 h6, .h24 .h6 { font-size: 0.9375rem; }

.h24 a { color: var(--brand-ink); text-underline-offset: 3px; }
.h24 a:hover { color: var(--foreground); }
.h24 hr { border-top-color: var(--h24-line); }
.h24 small, .h24 .small { font-size: 0.8125rem; }
.h24 .text-muted { color: var(--muted-foreground) !important; }
.h24 .text-success { color: var(--success) !important; }
.h24 .text-danger { color: var(--destructive) !important; }
.h24 .text-warning { color: var(--warning) !important; }
.h24 .text-info { color: var(--info) !important; }
.h24 .text-primary { color: var(--brand-ink) !important; }
.h24 .bg-white, .h24 .bg-light { background-color: var(--card) !important; }
.h24 .bg-default { background-color: var(--fill) !important; }
.h24 code, .h24 kbd, .h24 pre, .h24 .h24-mono { font-family: var(--font-mono); }
.h24 code { color: var(--foreground); background: var(--panel-raised); padding: 0.1em 0.4em; border-radius: 6px; font-size: 0.875em; }
.h24 address { font-style: normal; }

::selection { background-color: var(--primary); color: var(--primary-foreground); }

.h24 :focus { outline: none; }
.h24 :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 55%, transparent);
  outline-offset: 2px;
}
.h24 button:not(:disabled), .h24 [role="button"]:not(:disabled) { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ссылка «к содержимому» */
.h24-skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 2000;
  padding: 0.625rem 1rem;
  border-radius: var(--h24-r-btn);
  background: var(--contrast);
  color: var(--contrast-foreground) !important;
  font-weight: 600;
  text-decoration: none;
}
.h24-skip:focus { top: 0.75rem; }
#main-body:focus { outline: none; }

/* ---------------------------------------------------------------- 2. Иконки и утилиты */
.h24-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.h24-i {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}
.h24-i--sm { width: 1rem; height: 1rem; }
.h24-i--lg { width: 1.5rem; height: 1.5rem; }
.h24 .w-hidden { display: none; }
.h24-tnum { font-variant-numeric: tabular-nums; }
.h24-mono { font-size: 0.9em; }
.h24-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.h24-muted { color: var(--muted-foreground); }
@media (max-width: 575.98px) { .h24-hide-sm { display: none; } }

/* Логотип */
.h24-logo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--foreground); }
.h24-logo__mark { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.h24-logo__mark circle:first-child { fill: var(--foreground); }
.h24-logo__mark circle:last-child { fill: var(--primary); }
.h24-logo__text { font-size: 1.1875rem; line-height: 1; font-weight: 600; letter-spacing: -0.025em; transform: translateY(1px); }

/* Бейдж «Личный кабинет» — заметная метка, что это не сайт */
.h24-badge-cabinet {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Круглая иконка-кнопка (тема, уведомления, корзина, меню) */
.h24-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground) !important;
  transition: background-color 0.15s var(--h24-ease);
}
.h24-iconbtn:hover { background: var(--panel-raised); }
.h24-dot {
  position: absolute;
  top: 0.25rem;
  right: 0.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
}
.h24-dot--empty, .h24-dot:empty { display: none; }

/* Переключатель темы: солнце в светлой, луна в тёмной */
.h24-theme__moon { display: none; }
.dark .h24-theme__sun { display: none; }
.dark .h24-theme__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .h24-theme__sun { display: none; }
  :root:not(.light) .h24-theme__moon { display: block; }
}

.h24-backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  color: var(--muted-foreground) !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
}
.h24-backlink:hover { background: var(--panel-raised); color: var(--foreground) !important; }
.h24-linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 3. Оболочка кабинета */
.h24--app { background: var(--background); }
.h24-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 1024px) {
  .h24-shell { grid-template-columns: var(--h24-sidebar-w) minmax(0, 1fr); }
}

/* Сайдбар */
.h24-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0.75rem 1rem;
  background: var(--panel);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (min-width: 1024px) {
  .h24-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
  }
}
@media (max-width: 1023.98px) {
  .h24-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1050;
    width: min(20rem, 88vw);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    box-shadow: var(--elevation-popover);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 0.25s var(--h24-ease), visibility 0s linear 0.25s;
  }
  .h24-sidebar.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s var(--h24-ease);
  }
}
.h24-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: var(--overlay);
  backdrop-filter: blur(2px);
}
.h24-backdrop[hidden] { display: none; }
@media (min-width: 1024px) { .h24-backdrop { display: none !important; } }

.h24-sidebar__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  min-height: 2.75rem;
}
.h24-sidebar__brand { display: inline-flex; border-radius: 8px; text-decoration: none !important; }
.h24-sidebar__close { margin-left: auto; }
@media (min-width: 1024px) { .h24-sidebar__close { display: none; } }

.h24-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.h24-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.h24-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--h24-r-btn);
  color: var(--foreground) !important;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.15s var(--h24-ease);
}
.h24-nav__link .h24-i { color: var(--muted-foreground); }
.h24-nav__link:hover { background: var(--panel-raised); }
.h24-nav__link.is-active {
  background: var(--background);
  font-weight: 600;
  box-shadow: var(--elevation-xs);
}
.h24-nav__link.is-active .h24-i { color: var(--foreground); }
.h24-nav__link--muted { color: var(--muted-foreground) !important; }
.h24-nav__label {
  margin: 1rem 0 0.25rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.h24-nav__more { margin-top: 0.75rem; }
.h24-nav__more > summary { list-style: none; }
.h24-nav__more > summary::-webkit-details-marker { display: none; }
.h24-nav__chev { margin-left: auto; transition: transform 0.2s var(--h24-ease); }
.h24-nav__more[open] .h24-nav__chev { transform: rotate(180deg); }
.h24-nav__groups { display: grid; gap: 0.75rem; padding: 0.5rem 0.25rem 0.25rem 1rem; }
.h24-nav__grouptitle { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted-foreground); }
.h24-nav__group ul { list-style: none; margin: 0; padding: 0; }
.h24-nav__group a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--h24-r-sm);
  color: var(--foreground) !important;
  font-size: 0.875rem;
  text-decoration: none !important;
}
.h24-nav__group a:hover { background: var(--panel-raised); }
.h24-sidebar__foot { margin-top: auto; display: grid; gap: 0.25rem; padding-top: 1rem; }
.h24-sidebar__foot .h24-backlink { border-radius: var(--h24-r-btn); padding: 0 0.75rem; min-height: 2.75rem; }

/* Основная колонка */
.h24-main { min-width: 0; display: flex; flex-direction: column; }

/* Компактная верхняя панель */
.h24-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--h24-topbar-h);
  padding: 0 1rem;
  background: color-mix(in srgb, var(--background) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.h24-topbar__brand { display: inline-flex; text-decoration: none !important; border-radius: 8px; }
.h24-topbar__crumbs { min-width: 0; flex: 1; }
.h24-topbar__actions { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
@media (min-width: 1024px) {
  .h24-topbar { padding: 0 2rem; }
  .h24-topbar__menu, .h24-topbar__brand { display: none !important; }
}
@media (max-width: 1023.98px) {
  .h24-topbar__crumbs { display: none; }
  .h24-topbar__menu { margin-left: -0.5rem; }
}

/* Крошки (13px, muted, без подчёркивания) */
.h24 .breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.h24 .breadcrumb-item { color: var(--muted-foreground); min-width: 0; }
.h24 .breadcrumb-item:last-child { overflow: hidden; text-overflow: ellipsis; }
.h24 .breadcrumb-item a { color: var(--muted-foreground); text-decoration: none; }
.h24 .breadcrumb-item a:hover { color: var(--foreground); }
.h24 .breadcrumb-item.active { color: var(--foreground); }
.h24 .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--muted-foreground); opacity: 0.6; padding: 0 0.5rem; }

/* Переключатель аккаунта (контекст) */
.h24-account { margin-left: 0.25rem; }
.h24-account__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  max-width: 15rem;
  padding: 0 0.625rem 0 0.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--panel-raised);
  color: var(--foreground);
  font: inherit;
  text-align: left;
}
.h24-account__btn::after { display: none !important; }
.h24-account__btn:hover { background: color-mix(in srgb, var(--panel-raised) 70%, var(--input)); }
.h24-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--contrast);
  color: var(--contrast-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}
.h24-account__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.h24-account__label { font-size: 0.6875rem; color: var(--muted-foreground); }
.h24-account__name { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
  .h24-account__text, .h24-account__btn > .h24-i { display: none; }
  .h24-account__btn { padding: 0.25rem; }
}
.h24-account__menu { min-width: 16rem; }
.h24-account__head { display: flex; flex-direction: column; padding: 0.5rem 0.75rem 0.75rem; }
.h24-account__head span { color: var(--muted-foreground); font-size: 0.8125rem; overflow-wrap: anywhere; }

/* Содержимое */
.h24 .h24-content.container {
  width: 100%;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0.5rem 1rem 2.5rem;
  flex: 1;
}
@media (min-width: 1024px) { .h24 .h24-content.container { padding: 0.5rem 2rem 3rem; } }

.h24-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; margin: 0.5rem 0 1.25rem; }
.h24-pagehead nav { flex-basis: 100%; }
.h24 .h24-pagehead__title { margin: 0; font-size: 1.5rem; }
@media (min-width: 768px) { .h24 .h24-pagehead__title { font-size: 1.875rem; } }
.h24-pagehead__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Страница: меню раздела (строка чипов) → содержимое → инфо-карточки. Отдельной правой колонки нет */
.h24-page { display: block; min-width: 0; }
.h24 .primary-content { min-width: 0; }

/* Подвал кабинета — тихая строка */
.h24-appfooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.25rem 1rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}
@media (min-width: 1024px) { .h24-appfooter { padding: 1.5rem 2rem; } }
.h24-appfooter p { margin: 0; }
.h24-appfooter__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.h24-appfooter__links a, .h24-appfooter__links .h24-linkbtn { color: var(--muted-foreground); text-decoration: none; }
.h24-appfooter__links a:hover, .h24-appfooter__links .h24-linkbtn:hover { color: var(--foreground); text-decoration: underline; }

/* Нижняя панель (телефон/планшет) */
.h24-tabbar { display: none; }
@media (max-width: 1023.98px) {
  .h24--app { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .h24-tabbar {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc(0.5rem + env(safe-area-inset-bottom));
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    gap: 0.25rem;
    height: 3.75rem;
    padding: 0.375rem;
    border-radius: var(--radius-panel);
    background: color-mix(in srgb, var(--panel-raised) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: var(--elevation-lg);
  }
  .h24-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-width: 0;
    border: 0;
    border-radius: 1.125rem;
    background: transparent;
    color: var(--muted-foreground) !important;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    text-decoration: none !important;
  }
  .h24-tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .h24-tabbar__item.is-active { background: var(--background); color: var(--foreground) !important; font-weight: 600; }
  .h24-tabbar__item.is-active .h24-i { color: var(--foreground); }
}

/* ---------------------------------------------------------------- 4. Гостевая шапка и экраны входа */
.h24--guest { background: var(--background); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.h24-guestbar { position: sticky; top: 0; z-index: 1020; padding: 0.5rem 0.5rem 0; }
.h24-guestbar__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 76rem;
  height: 3.5rem;
  margin: 0 auto;
  padding: 0 0.5rem 0 1rem;
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--panel-raised) 80%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
@media (min-width: 640px) { .h24-guestbar { padding: 0.5rem 1.5rem 0; } }
.h24-guestbar__brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none !important; border-radius: 8px; min-width: 0; }
.h24-guestbar__actions { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.h24-pill { border-radius: 999px !important; height: 2.5rem !important; padding: 0 1rem !important; }

.h24-guest-main { flex: 1; padding: 1.5rem 0 3rem; }
.h24 .h24-container { max-width: 76rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .h24 .h24-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .h24 .h24-container { padding-left: 2rem; padding-right: 2rem; } }

.h24-guestfooter { padding: 1.5rem 1rem 2rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.h24-guestfooter__inner { max-width: 76rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.h24-guestfooter p { margin: 0; }

/* Вход / регистрация / восстановление: карточка по центру */
.h24-auth { display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem 3rem; }
@media (min-width: 768px) { .h24-auth { padding-top: 4rem; } }
.h24-auth__wrap { width: 100%; max-width: 28rem; }
.h24-tpl-clientregister .h24-auth__wrap { max-width: 52rem; }
.h24-auth__wrap > .h24-page > .primary-content > .row,
.h24-auth__wrap .row.justify-content-center { margin-left: 0; margin-right: 0; }
.h24-authcard {
  padding: 1.75rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--panel);
}
@media (min-width: 576px) { .h24-authcard { padding: 2.25rem 2.25rem 2rem; } }
.h24-authcard__head { margin-bottom: 1.5rem; }
.h24 .h24-authcard__title { margin: 0 0 0.375rem; font-size: 1.625rem; letter-spacing: -0.025em; }
.h24-authcard__lead { margin: 0; color: var(--muted-foreground); }
.h24-authcard__foot { margin-top: 1.25rem; text-align: center; color: var(--muted-foreground); font-size: 0.9375rem; }
.h24-authcard__foot a { font-weight: 600; }
.h24-authcard + .h24-authcard { margin-top: 1rem; }
.h24-auth__note { margin-top: 1rem; text-align: center; font-size: 0.8125rem; color: var(--muted-foreground); }
.h24-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.h24-formsection { padding: 1.5rem 1.25rem; border-radius: var(--radius-card); background: var(--panel); margin-bottom: 1rem; }
@media (min-width: 576px) { .h24-formsection { padding: 1.75rem 2rem; } }
.h24 .h24-formsection__title { margin: 0 0 1.25rem; font-size: 1.125rem; display: flex; align-items: center; gap: 0.75rem; }
.h24-formsection__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: var(--brand-tint); color: var(--foreground); font-size: 0.8125rem; font-weight: 600;
}

/* ---------------------------------------------------------------- 5. Кнопки (как Button сайта) */
.h24 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: var(--h24-r-btn);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: normal;
  box-shadow: none !important;
  transition: background-color 0.15s var(--h24-ease), color 0.15s var(--h24-ease), opacity 0.15s;
}
.h24 .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ring) 55%, transparent); outline-offset: 2px; }
.h24 .btn.disabled, .h24 .btn:disabled { opacity: 0.5; pointer-events: none; }
.h24 .btn-sm, .h24 .btn-group-sm > .btn, .h24 .btn-xs { min-height: 2.25rem; padding: 0.375rem 0.875rem; font-size: 0.875rem; border-radius: calc(var(--radius) * 1.1); }
.h24 .btn-xs { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.h24 .btn-lg, .h24 .btn-group-lg > .btn { min-height: 3rem; padding: 0.75rem 1.5rem; font-size: 1rem; }
.h24 .btn-xl { min-height: 3.5rem; padding: 0.875rem 1.75rem; font-size: 1.0625rem; }
.h24 .btn-block { display: flex; width: 100%; }
.h24 .btn > .fa, .h24 .btn > .fas, .h24 .btn > .far, .h24 .btn > .fal, .h24 .btn > .fad { font-size: 0.9em; }

/* Основная — графит (contrast). btn-primary WHMCS тоже графит: лайм — максимум одна кнопка на экран */
.h24 .btn-contrast, .h24 .btn-primary, .h24 .btn-success, .h24 .btn-info.btn-checkout {
  background: var(--contrast);
  color: var(--contrast-foreground) !important;
}
.h24 .btn-contrast:hover, .h24 .btn-primary:hover, .h24 .btn-success:hover,
.h24 .btn-primary:not(:disabled):not(.disabled):active, .h24 .btn-success:not(:disabled):not(.disabled):active {
  background: var(--contrast-hover);
  color: var(--contrast-foreground) !important;
}
/* Лаймовая (акцент): «Оплатить», «Оформить заказ», поиск домена */
.h24 .btn-accent, .h24 .btn-lime {
  background: var(--primary);
  color: var(--primary-foreground) !important;
}
.h24 .btn-accent:hover, .h24 .btn-lime:hover,
.h24 .btn-accent:not(:disabled):not(.disabled):active { background: var(--primary-hover); color: var(--primary-foreground) !important; }
/* Вторичная — заливка panel-raised без рамки */
.h24 .btn-default, .h24 .btn-secondary, .h24 .btn-light, .h24 .btn-info, .h24 .btn-warning,
.h24 .btn-outline-primary, .h24 .btn-outline-secondary, .h24 .btn-outline-default, .h24 .btn-outline-info, .h24 .btn-outline-success {
  background: var(--panel-raised);
  color: var(--foreground) !important;
}
.h24 .btn-default:hover, .h24 .btn-secondary:hover, .h24 .btn-light:hover, .h24 .btn-info:hover, .h24 .btn-warning:hover,
.h24 .btn-outline-primary:hover, .h24 .btn-outline-secondary:hover, .h24 .btn-outline-default:hover, .h24 .btn-outline-info:hover, .h24 .btn-outline-success:hover,
.h24 .btn-default:not(:disabled):not(.disabled).active, .h24 .btn-default:not(:disabled):not(.disabled):active {
  background: color-mix(in srgb, var(--panel-raised) 65%, var(--input));
  color: var(--foreground) !important;
}
/* Опасное действие — тихо, красным текстом; заливка только при наведении */
.h24 .btn-danger, .h24 .btn-outline-danger {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: color-mix(in srgb, var(--destructive) 82%, var(--foreground)) !important;
}
.h24 .btn-danger:hover, .h24 .btn-outline-danger:hover { background: var(--destructive); color: #fff !important; }
.h24 .btn-ghost { background: transparent; color: var(--foreground) !important; }
.h24 .btn-ghost:hover { background: var(--panel-raised); }
.h24 .btn-link { background: transparent; color: var(--brand-ink) !important; min-height: auto; padding-left: 0; padding-right: 0; font-weight: 600; }
.h24 .btn-link:hover { text-decoration: underline; }
.h24 .btn-group > .btn { border-radius: 0; }
.h24 .btn-group > .btn:first-child { border-top-left-radius: var(--h24-r-btn); border-bottom-left-radius: var(--h24-r-btn); }
.h24 .btn-group > .btn:last-child, .h24 .btn-group > .btn-group:last-child > .btn { border-top-right-radius: var(--h24-r-btn); border-bottom-right-radius: var(--h24-r-btn); }
.h24 .btn-group > .btn + .btn, .h24 .btn-group > .btn + .btn-group { margin-left: 1px; }
.h24 .dropdown-toggle::after { border: 0; width: 0.75rem; height: 0.75rem; margin-left: 0.125rem; vertical-align: middle; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.h24-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.h24-actions--end { justify-content: flex-end; }

/* ---------------------------------------------------------------- 6. Поля (как Input сайта: заливка, без рамки, фокус — кольцо) */
.h24 label, .h24 .col-form-label, .h24 .control-label, .h24 .form-control-label { font-weight: 500; font-size: 0.875rem; color: var(--foreground); margin-bottom: 0.375rem; }
.h24 .form-group { margin-bottom: 1.125rem; }
.h24 .form-control, .h24 .custom-select, .h24 select.form-control, .h24 .dataTables_wrapper .dataTables_filter input, .h24 .dataTables_length select {
  height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 2px solid transparent;
  border-radius: var(--h24-r-btn);
  background-color: var(--panel-raised);
  color: var(--foreground);
  font-family: inherit;
  font-size: 1rem;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.h24 textarea.form-control { height: auto; min-height: 7rem; line-height: 1.5; }
.h24 .form-control-sm, .h24 .custom-select-sm, .h24 .input-sm { height: 2.5rem; font-size: 0.875rem; border-radius: calc(var(--radius) * 1.1); }
.h24 .form-control::placeholder { color: var(--muted-foreground); opacity: 1; }
.h24 .form-control:focus, .h24 .custom-select:focus, .h24 .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ring);
  background-color: var(--card);
  color: var(--foreground);
  box-shadow: 0 0 0 4px var(--h24-ring-soft);
  outline: none;
}
.h24 .form-control:disabled, .h24 .form-control[readonly], .h24 .custom-select:disabled { background-color: var(--muted); color: var(--muted-foreground); opacity: 1; }
.h24 .form-control.is-invalid, .h24 .has-error .form-control, .h24 .was-validated .form-control:invalid { border-color: var(--destructive); background-image: none; }
.h24 .form-control.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--destructive) 20%, transparent); }
.h24 .invalid-feedback, .h24 .field-error-msg { color: color-mix(in srgb, var(--destructive) 82%, var(--foreground)); font-size: 0.8125rem; }
.h24 .form-text, .h24 .help-block { color: var(--muted-foreground); font-size: 0.8125rem; }
.h24 .custom-select, .h24 select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362625c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
}
.h24 select[multiple].form-control, .h24 select[size].form-control { background-image: none; height: auto; padding-right: 0.875rem; }
.h24 .input-group { flex-wrap: nowrap; }
.h24 .input-group-text {
  border: 0;
  border-radius: var(--h24-r-btn);
  background: var(--panel-raised);
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  min-width: 2.75rem;
  justify-content: center;
}
.h24 .input-group > .form-control:not(:first-child), .h24 .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.h24 .input-group > .form-control:not(:last-child), .h24 .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.h24 .input-group-prepend .input-group-text { padding-right: 0; }
.h24 .input-group-append .btn, .h24 .input-group-prepend .btn { min-height: 3rem; }
.h24 .input-group-merge .input-group-prepend .input-group-text { background: var(--panel-raised); }
.h24 .input-group:focus-within .input-group-text { background: var(--card); }
.h24 .input-group:focus-within { border-radius: var(--h24-r-btn); box-shadow: 0 0 0 4px var(--h24-ring-soft); }
.h24 .input-group:focus-within > .form-control:focus { box-shadow: none; }

/* Чекбоксы/радио: нативные с акцентом (отмечен — лайм, как Checkbox сайта) */
.h24 input[type="checkbox"], .h24 input[type="radio"] { accent-color: var(--primary); width: 1.125rem; height: 1.125rem; vertical-align: -0.2em; }
.h24 .form-check { padding-left: 1.75rem; }
.h24 .form-check-input { margin-left: -1.75rem; margin-top: 0.2rem; }
.h24 .form-check-label, .h24 .form-check label { font-weight: 400; font-size: 0.9375rem; }
.h24 .custom-control-label::before { background-color: var(--panel-raised); border: 2px solid var(--input); }
.h24 .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); }
.h24 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1011' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 70%;
}
.h24 .custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: radial-gradient(circle, var(--primary-foreground) 30%, transparent 34%); }
.h24 .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 4px var(--h24-ring-soft); }
.h24 .custom-switch .custom-control-label::after { background-color: var(--muted-foreground); }
.h24 .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: var(--primary-foreground); }
.h24 .bootstrap-switch { border-radius: 999px; border-color: var(--input); }
.h24 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.h24 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--primary); color: var(--primary-foreground); }
.h24 .custom-file-label { height: 3rem; padding: 0.75rem 0.875rem; border: 2px dashed var(--input); border-radius: var(--h24-r-btn); background: var(--panel); color: var(--muted-foreground); }
.h24 .custom-file-label::after { height: auto; top: 0.25rem; right: 0.25rem; bottom: 0.25rem; padding: 0.5rem 0.875rem; border: 0; border-radius: calc(var(--radius) * 1.1); background: var(--panel-raised); color: var(--foreground); content: attr(data-browse); }
.h24 .custom-file-label:not([data-browse])::after { content: "\2026"; }
.h24 .custom-file { height: 3rem; }

/* Индикатор надёжности пароля */
.h24 .progress { height: 0.5rem; border-radius: 999px; background: var(--panel-raised); }
.h24 .progress-bar { border-radius: 999px; background: var(--primary); }
.h24 .progress-bar.bg-danger, .h24 .progress-bar-danger { background: var(--destructive); }
.h24 .progress-bar.bg-warning, .h24 .progress-bar-warning { background: var(--warning); }
.h24 .progress-bar.bg-success, .h24 .progress-bar-success { background: var(--success); }

/* ---------------------------------------------------------------- 7. Карточки, списки, вкладки («заполненные плиты») */
.h24 .card {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--fill);
  color: var(--foreground);
  margin-bottom: 1rem;
  box-shadow: none;
}
.h24 .card .card { background: var(--card); }
.h24 .card-header, .h24 .card-footer { background: transparent; border: 0; padding: 1.25rem 1.5rem 0; }
.h24 .card-footer { padding: 0 1.5rem 1.25rem; }
.h24 .card-footer:empty { display: none; }
.h24 .card-body { padding: 1.5rem; }
.h24 .card-title, .h24 .card-header .card-title { font-size: 1.125rem; margin-bottom: 1rem; }
.h24 .card-header .card-title { margin: 0; }
.h24 .card-accent-blue, .h24 [class*="card-accent-"] { border-top: 0 !important; }
.h24 .card > .list-group { border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* Меню раздела (сайдбар WHMCS) — плитка с пунктами-капсулами */
.h24 .card-sidebar { margin-bottom: 0; background: var(--panel); }
.h24 .card-sidebar .card-header { display: block; padding: 1rem 1.25rem 0.5rem; }
.h24 .card-sidebar .card-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8125rem !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.h24 .card-sidebar .card-title > i { display: none; }
.h24 .card-sidebar .card-title .badge { margin-left: auto; }
.h24 .card-minimise { margin-left: auto; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.h24 .card-minimise:hover { background: var(--panel-raised); }
.h24 .card-minimise.minimised { transform: rotate(180deg); }
@media (min-width: 1200px) { .h24 .h24-context .card-minimise { display: none; } }
.h24 .card-sidebar .card-body { padding: 0.5rem 1.25rem 1.25rem; font-size: 0.875rem; }
.h24 .card-sidebar .card-footer { padding: 0.25rem 1rem 1rem; }
.h24 .card-sidebar .card-footer .btn { width: 100%; }
.h24 .list-group { border-radius: 0; }
.h24 .card-sidebar .list-group { padding: 0.25rem 0.5rem 0.75rem; gap: 0.125rem; }
.h24 .list-group-item {
  border: 0;
  background: transparent;
  color: var(--foreground);
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
}
.h24 .card-sidebar .list-group-item { border-radius: var(--h24-r-sm); margin: 0; }
.h24 .list-group-item-action:hover, .h24 .list-group-item-action:focus { background: var(--panel-raised); color: var(--foreground); }
.h24 .list-group-item.active, .h24 .card-sidebar .list-group-item.active {
  background: var(--card);
  color: var(--foreground);
  font-weight: 600;
  box-shadow: var(--elevation-xs);
}
.h24 .list-group-item.active .badge { background: var(--primary); color: var(--primary-foreground); }
.h24 .list-group-item.disabled { color: var(--muted-foreground); opacity: 0.6; }
.h24 .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 0.625rem; }
.h24 .sidebar-menu-item-icon-wrapper { width: 1.25rem; color: var(--muted-foreground); text-align: center; }
.h24 .list-group-item.active .sidebar-menu-item-icon-wrapper { color: var(--brand-ink); }
.h24 .sidebar-menu-item-label { flex: 1; min-width: 0; }
.h24 .sidebar-menu-item-badge .badge { background: var(--panel-raised); color: var(--muted-foreground); }
.h24 .card-sidebar .list-group-item i.fa-circle, .h24 .card-sidebar .list-group-item i.fa-dot-circle { color: var(--muted-foreground); }
.h24 .card-sidebar .list-group-item.active i.fa-dot-circle { color: var(--brand-ink); }
@media (min-width: 768px) { .h24 .card-sidebar .list-group.d-md-flex { flex-direction: column; } }

/* Вкладки — сегмент-контрол (капсулы на panel-raised) */
.h24 .nav-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--panel-raised);
  max-width: 100%;
}
.h24 .nav-tabs .nav-item { margin: 0; }
.h24 .nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  color: var(--muted-foreground);
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.h24 .nav-tabs .nav-link:hover { color: var(--foreground); }
.h24 .nav-tabs .nav-link.active, .h24 .nav-tabs .nav-item.show .nav-link { background: var(--background); color: var(--foreground); font-weight: 600; box-shadow: var(--elevation-xs); }
.h24 .nav-tabs .nav-link i { display: none; }
@media (max-width: 575.98px) {
  .h24 .nav-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; border-radius: var(--h24-r-btn); scrollbar-width: none; }
}
.h24 .responsive-tabs-sm-connector { display: none; }
.h24 .tab-content.product-details-tab-container, .h24 .tab-content.bg-white { background: var(--fill) !important; border: 0; border-radius: var(--radius-card); padding: 1.5rem; }
.h24 .nav-pills .nav-link { border-radius: 999px; color: var(--muted-foreground); }
.h24 .nav-pills .nav-link.active { background: var(--contrast); color: var(--contrast-foreground); }

/* Пагинация */
.h24 .pagination { gap: 0.25rem; flex-wrap: wrap; }
.h24 .page-link, .h24 .pagination > li > a, .h24 .pagination > li > span {
  min-width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  margin: 0 !important;
  border: 0;
  border-radius: 999px !important;
  background: transparent;
  color: var(--foreground);
  font-weight: 500;
}
.h24 .page-link:hover { background: var(--panel-raised); color: var(--foreground); }
.h24 .page-item.active .page-link, .h24 .pagination > .active > a { background: var(--contrast); color: var(--contrast-foreground); }
.h24 .page-item.disabled .page-link { background: transparent; color: var(--muted-foreground); opacity: 0.5; }

/* ---------------------------------------------------------------- 8. Таблицы (как DataTable сайта: bg-fill, без сетки, тихая шапка) */
.h24 .table { color: var(--foreground); margin-bottom: 0; }
.h24 .table th, .h24 .table td { border-top: 1px solid var(--h24-line); padding: 0.875rem 1rem; vertical-align: middle; }
.h24 .table thead th, .h24 .table thead td {
  border-top: 0;
  border-bottom: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: transparent;
  white-space: nowrap;
}
.h24 .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.h24 .table-bordered, .h24 .table-bordered th, .h24 .table-bordered td { border: 0; border-top: 1px solid var(--h24-line); }
.h24 .table-hover tbody tr:hover { background: color-mix(in srgb, var(--foreground) 3%, transparent); color: var(--foreground); }
.h24 .table-container, .h24 .table-responsive { border-radius: var(--radius-card); }
.h24 .table-container { background: var(--fill); padding: 0.5rem 0.5rem 0.75rem; }

.h24 table.table-list { background: transparent; border: 0 !important; border-collapse: separate; border-spacing: 0; margin: 0 !important; }
.h24 table.table-list thead th { text-align: left; padding: 0.875rem 1rem; background: transparent; border: 0 !important; }
.h24 .dataTables_wrapper table.table-list thead th.sorting_asc, .h24 .dataTables_wrapper table.table-list thead th.sorting_desc { background: transparent; color: var(--foreground); }
.h24 table.table-list tbody td { padding: 0.875rem 1rem; font-size: 0.9375rem; background: transparent; border-top: 1px solid var(--h24-line); text-align: left; }
.h24 table.table-list tbody td.text-center { text-align: left !important; }
.h24 .table-list > tbody > tr > td { background: transparent; }
.h24 .table-list > tbody > tr:hover > td { background: color-mix(in srgb, var(--foreground) 3%, transparent); }
.h24 .table-list > tbody > tr > td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.h24 .table-list > tbody > tr > td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.h24 .table-list > tbody > tr > td a.border-left { border-left: 0 !important; padding-left: 0; display: inline; }
.h24 .dataTables_wrapper .listtable { position: relative; }
.h24 .dataTables_wrapper .dataTables_filter { float: none; display: flex; justify-content: flex-end; padding: 0.5rem 0.5rem 0.75rem; }
.h24 .dataTables_wrapper .dataTables_filter label { margin: 0; width: 100%; max-width: 20rem; position: relative; }
.h24 .dataTables_wrapper .dataTables_filter label::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  transform: translateY(-50%);
  background: var(--muted-foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.h24 .dataTables_wrapper .dataTables_filter label .form-control, .h24 .dataTables_wrapper .dataTables_filter input {
  width: 100% !important;
  height: 2.75rem;
  margin: 0 !important;
  padding: 0.5rem 0.875rem 0.5rem 2.5rem !important;
  background-image: none !important;
  font-size: 0.9375rem;
}
.h24 .dataTables_wrapper .dataTables_info { padding: 0.75rem 1rem 0; color: var(--muted-foreground); font-size: 0.8125rem; }
.h24 .dataTables_wrapper .dataTables_paginate { float: none; display: flex; justify-content: flex-end; padding: 0.75rem 0.5rem 0; }
.h24 .dataTables_wrapper .dataTables_length { padding: 0.75rem 1rem 0; color: var(--muted-foreground); font-size: 0.8125rem; }
.h24 .dataTables_wrapper .dataTables_length select { height: 2.25rem; width: auto; display: inline-block; padding: 0 2rem 0 0.75rem; font-size: 0.875rem; }
.h24 .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0 !important; border: 0 !important; background: none !important; }
.h24 table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
.h24 table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { background: var(--contrast); border: 0; box-shadow: none; color: var(--contrast-foreground); }
.h24 #tableLoading { padding: 1.5rem; color: var(--muted-foreground); }
.h24 table.dataTable tbody tr.child td { background: transparent; }
.h24 table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--h24-line); }
.h24 .dataTables_empty { padding: 2.5rem 1rem !important; text-align: center !important; color: var(--muted-foreground); }

/* Таблицы-списки на телефоне — стопка карточек «подпись — значение» (без горизонтальной прокрутки) */
@container h24list (max-width: 52rem) {
  .h24 .table-container { padding: 0.25rem; }
  .h24 table.table-list.h24-stack thead { display: none; }
  .h24 table.table-list.h24-stack, .h24 table.table-list.h24-stack tbody { display: block; width: 100% !important; }
  .h24 table.table-list.h24-stack tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.75rem;
    padding: 0.875rem 0.875rem;
    border-top: 1px solid var(--h24-line);
  }
  .h24 table.table-list.h24-stack tbody tr:first-child { border-top: 0; }
  .h24 table.table-list.h24-stack tbody td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    min-width: 0;
  }
  .h24 table.table-list.h24-stack tbody td[data-cell="main"] { grid-column: 1; color: var(--foreground); font-size: 0.9375rem; }
  .h24 table.table-list.h24-stack tbody td[data-cell="status"] { grid-column: 2; grid-row: 1; justify-self: end; }
  .h24 table.table-list.h24-stack tbody td[data-cell="meta"] { grid-column: 1 / -1; }
  .h24 table.table-list.h24-stack tbody td[data-cell="meta"][data-label]::before { content: attr(data-label) ": "; }
  .h24 table.table-list.h24-stack tbody td[data-cell="hide-sm"] { display: none !important; }
  .h24 table.table-list.h24-stack tbody td[data-cell="check"] { grid-column: 2; grid-row: 2; justify-self: end; }
  .h24 table.table-list.h24-stack tbody td.dataTables_empty { grid-column: 1 / -1; text-align: center; }
  .h24 table.table-list.h24-stack td.dtr-control::before { display: none !important; }
  .h24 table.table-list.h24-stack > tbody > tr > td:first-child, .h24 table.table-list.h24-stack > tbody > tr > td:last-child { border-radius: 0; }
  .h24 .dataTables_wrapper .dataTables_filter label { max-width: none; }
}

/* ---------------------------------------------------------------- 9. Бейджи статусов — единые цвета для всех сущностей */
.h24 .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: var(--panel-raised);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.h24 .badge-info, .h24 .badge-primary { background: var(--primary); color: var(--primary-foreground); }
.h24 .badge-success { background: color-mix(in srgb, var(--success) 14%, transparent); color: color-mix(in srgb, var(--success) 78%, var(--foreground)); }
.h24 .badge-danger { background: color-mix(in srgb, var(--destructive) 13%, transparent); color: color-mix(in srgb, var(--destructive) 78%, var(--foreground)); }
.h24 .badge-warning { background: color-mix(in srgb, var(--warning) 15%, transparent); color: color-mix(in srgb, var(--warning) 78%, var(--foreground)); }

.h24 .label,
.h24 .h24-status {
  --st: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  margin: 0;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--st) 13%, transparent);
  color: color-mix(in srgb, var(--st) 76%, var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.h24 .label::before,
.h24 .h24-status::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background: var(--st);
  flex-shrink: 0;
}
.h24 .label.label-placeholder { display: none; }
/* success: работает / оплачено */
.h24 .status-active, .h24 .status-paid, .h24 .status-completed, .h24 .status-accepted, .h24 .status-delivered, .h24 .label-success,
.h24 .h24-status--success { --st: var(--success); }
/* warning: ждёт действия */
.h24 .status-pending, .h24 .status-pending-registration, .h24 .status-pending-transfer, .h24 .status-payment-pending,
.h24 .status-unpaid, .h24 .status-draft, .h24 .status-inprogress, .h24 .status-in-progress, .h24 .status-onhold, .h24 .status-on-hold,
.h24 .status-customer-reply, .h24 .status-grace, .h24 .label-warning,
.h24 .h24-status--warning { --st: var(--warning); }
/* danger: требует внимания */
.h24 .status-suspended, .h24 .status-overdue, .h24 .status-fraud, .h24 .status-redemption, .h24 .status-collections, .h24 .status-expired, .h24 .label-danger,
.h24 .h24-status--danger { --st: var(--destructive); }
/* info: ответ поддержки */
.h24 .status-answered, .h24 .label-info, .h24 .h24-status--info { --st: var(--info); }
/* brand: открыт */
.h24 .status-open, .h24 .h24-status--brand { --st: var(--ring); }
/* нейтральный: закрыто / завершено */
.h24 .status-terminated, .h24 .status-cancelled, .h24 .status-closed, .h24 .status-refunded, .h24 .status-transferred-away,
.h24 .status-lost, .h24 .status-dead, .h24 .label-default, .h24 .h24-status--muted { --st: var(--muted-foreground); }
/* Свой цвет статуса тикета из WHMCS приходит как style="--st: …" */

/* ---------------------------------------------------------------- 10. Алерты, модалки, меню, подсказки */
.h24 .alert {
  --al: var(--info);
  position: relative;
  padding: 0.875rem 1.125rem;
  border: 0;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--al) 11%, var(--background));
  color: var(--foreground);
  font-size: 0.9375rem;
}
.h24 .alert-success { --al: var(--success); }
.h24 .alert-warning { --al: var(--warning); }
.h24 .alert-danger { --al: var(--destructive); }
.h24 .alert-info { background: var(--brand-tint); }
.h24 .alert a:not(.btn) { color: inherit; font-weight: 600; text-decoration: underline; }
.h24 .alert h2 { font-size: 1rem; margin-bottom: 0.25rem; }
.h24 .alert ul { margin: 0.375rem 0 0; padding-left: 1.25rem; }
.h24 .alert .float-right .btn { margin: -0.25rem 0 0 0.75rem; }
.h24 .alert.text-center { text-align: left !important; }

.h24 .modal-backdrop { background: var(--overlay); }
.h24 .modal-backdrop.show { opacity: 1; }
.h24 .modal-content {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--elevation-popover);
}
.dark .h24 .modal-content, .dark .h24 .dropdown-menu, .dark .h24 .popover { box-shadow: var(--elevation-popover), 0 0 0 1px var(--inverse-border); }
.h24 .modal-header, .h24 .modal-footer { border: 0; padding: 1.25rem 1.5rem; }
.h24 .modal-header { padding-bottom: 0.5rem; }
.h24 .modal-footer { padding-top: 0.5rem; gap: 0.5rem; }
.h24 .modal-footer > * { margin: 0; }
.h24 .modal-body { padding: 0.75rem 1.5rem; }
.h24 .modal-title { font-weight: 600; font-size: 1.125rem; }
.h24 .close { color: var(--foreground); text-shadow: none; opacity: 0.6; width: 2.5rem; height: 2.5rem; border-radius: 999px; margin: -0.5rem -0.75rem -0.5rem auto !important; padding: 0 !important; }
.h24 .close:hover { opacity: 1; background: var(--panel-raised); color: var(--foreground); }
.h24 .modal-localisation .item-selector .item { display: block; padding: 0.625rem 0.875rem; margin-bottom: 0.5rem; border-radius: var(--h24-r-sm); background: var(--panel-raised); color: var(--foreground); text-decoration: none; }
.h24 .modal-localisation .item-selector .item.active { background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.h24 .modal-localisation .modal-content { background: var(--popover); }

.h24 .dropdown-menu {
  padding: 0.375rem;
  border: 0;
  border-radius: 1rem;
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--elevation-popover);
  font-size: 0.9375rem;
}
.h24 .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--h24-r-sm);
  color: var(--foreground);
  white-space: normal;
}
.h24 .dropdown-item:hover, .h24 .dropdown-item:focus { background: var(--panel-raised); color: var(--foreground); }
.h24 .dropdown-item.active, .h24 .dropdown-item:active { background: var(--brand-tint); color: var(--foreground); }
.h24 .dropdown-item .badge { margin-left: auto; }
.h24 li.dropdown-item { padding: 0; }
.h24 li.dropdown-item > a.dropdown-item { padding: 0.5rem 0.75rem; }
.h24 .dropdown-divider { border-top-color: var(--h24-line); margin: 0.375rem 0.25rem; }

.h24 .popover { border: 0; border-radius: 1rem; background: var(--popover); box-shadow: var(--elevation-popover); font-family: var(--font-sans); max-width: 22rem; }
.h24 .popover .arrow { display: none; }
.h24 .popover-header { background: transparent; border: 0; font-weight: 600; }
.h24 .popover-body { color: var(--foreground); padding: 0.5rem; }
.h24 .popover-user-notifications .client-alerts { list-style: none; margin: 0; padding: 0; }
.h24 .popover-user-notifications .client-alerts li a { display: flex; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--h24-r-sm); color: var(--foreground); text-decoration: none; }
.h24 .popover-user-notifications .client-alerts li a:hover { background: var(--panel-raised); }
.h24 .popover-user-notifications .client-alerts li a i { margin-top: 0.2rem; color: var(--warning); }
.h24 .popover-user-notifications .client-alerts li.none { padding: 0.75rem; color: var(--muted-foreground); }
.h24 .tooltip-inner { background: var(--inverse); color: var(--inverse-foreground); border-radius: 8px; font-family: var(--font-sans); padding: 0.375rem 0.625rem; }
.h24 .tooltip .arrow::before { border-top-color: var(--inverse) !important; border-bottom-color: var(--inverse) !important; }

#fullpage-overlay { background: var(--overlay); }
#fullpage-overlay .msg { color: #fff; }

/* Пустое состояние */
.h24-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--background) 60%, transparent);
}
.h24-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-tile); background: var(--brand-tint); color: var(--brand-ink); }
.h24-empty__title { margin: 0; font-weight: 600; font-size: 1rem; }
.h24-empty__text { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
.h24-empty--center { align-items: center; text-align: center; padding: 2.5rem 1.25rem; }

/* Копирование (IP, NS) */
.h24-copy { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.25rem 0.125rem 0.5rem; border-radius: 8px; background: var(--panel-raised); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--foreground); }
.h24-copy button { display: inline-flex; padding: 0.25rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); }
.h24-copy button:hover { background: var(--background); color: var(--foreground); }
.h24-copy.is-copied button { color: var(--success); }

/* Список «подпись — значение» (характеристики услуги, домена) */
.h24-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.h24-dl > div { display: grid; grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--h24-line); }
.h24-dl > div:first-child { border-top: 0; padding-top: 0; }
.h24-dl dt { font-weight: 400; color: var(--muted-foreground); font-size: 0.875rem; }
.h24-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 479.98px) { .h24-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; } }
.h24-dl--cols { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 2rem; }
.h24-dl--cols > div:nth-child(2) { border-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------- 11. Дашборд */
.h24-dash { display: grid; gap: 1.25rem; padding-top: 0.5rem; }
.h24-dash__hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.h24 .h24-dash__title { margin: 0; font-size: 1.625rem; letter-spacing: -0.025em; }
@media (min-width: 768px) { .h24 .h24-dash__title { font-size: 2rem; } }
.h24-dash__lead { margin: 0.375rem 0 0; color: var(--muted-foreground); }

.h24-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .h24-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.h24-kpi {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  align-items: center;
  height: 100%;
  padding: 1rem 1.125rem;
  border-radius: var(--radius-card);
  background: var(--fill);
  color: var(--foreground) !important;
  text-decoration: none !important;
  transition: background-color 0.15s var(--h24-ease);
}
.h24-kpi:hover { background: var(--panel-raised); }
.h24-kpi__icon { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-tile); background: var(--brand-tint); color: var(--brand-ink); }
.h24-kpi__value { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.h24-kpi__label { font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.3; }
.h24-kpi--warning .h24-kpi__icon { background: color-mix(in srgb, var(--warning) 16%, transparent); color: color-mix(in srgb, var(--warning) 80%, var(--foreground)); }
.h24-kpi--danger .h24-kpi__icon { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: color-mix(in srgb, var(--destructive) 80%, var(--foreground)); }

.h24-dash__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1200px) { .h24-dash__grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
.h24-dash__main, .h24-dash__side { display: grid; gap: 1.25rem; min-width: 0; }
.h24-dash__others { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; }

/* Плитка-секция кабинета (заполненная, без рамки) */
.h24-tile {
  min-width: 0;
  padding: 1.25rem;
  border-radius: var(--radius-card);
  background: var(--fill);
  margin-bottom: 1.25rem;
}
.h24-dash .h24-tile, .h24-svcgrid .h24-tile { margin-bottom: 0; }
@media (min-width: 768px) { .h24-tile { padding: 1.5rem; } }
.h24-tile__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.h24 .h24-tile__title { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.h24-tile__head .h24-tile__title { margin: 0; }
.h24-tile__more { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-ink) !important; text-decoration: none !important; white-space: nowrap; border-radius: 6px; }
.h24-tile__more:hover { text-decoration: underline !important; }
.h24-tile__note { margin: 0.75rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
.h24-tile__body > .h24-tile__note:first-child { margin-top: 0; margin-bottom: 0.5rem; }
.h24-tile__foot { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Строки списков (услуги, домены, тикеты) */
.h24-rows { list-style: none; margin: 0; padding: 0; }
.h24-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--h24-line);
}
.h24-row:first-child { border-top: 0; padding-top: 0.25rem; }
.h24-row__main { flex: 1 1 14rem; min-width: 0; color: var(--foreground) !important; text-decoration: none !important; font-weight: 500; overflow-wrap: anywhere; }
a.h24-row__main:hover { text-decoration: underline !important; }
.h24-row__main small, .h24-row__main .small { display: block; color: var(--muted-foreground); font-weight: 400; }
.h24-row__title { display: block; font-weight: 600; }
.h24-row__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.8125rem; color: var(--muted-foreground); font-weight: 400; }
.h24-row__side { color: var(--muted-foreground); font-size: 0.8125rem; }
.h24-row__actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.h24-rows--tickets .h24-row__main { font-size: 0.9375rem; }
.h24-rows--tickets .label { font-size: 0.75rem; }

/* Строка услуги на дашборде (.div-service-item из WHMCS) */
.h24-services .div-service-item, .h24-svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main status" "actions actions";
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.875rem 0;
  border-top: 1px solid var(--h24-line);
  cursor: pointer;
}
.h24-services > .div-service-item:first-child, .h24-services .h24-svc:first-child, .h24-services .list-group > .div-service-item:first-child { border-top: 0; padding-top: 0.25rem; }
@media (min-width: 768px) {
  .h24-services .div-service-item, .h24-svc { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main status actions"; }
}
.h24-svc__main { grid-area: main; min-width: 0; display: grid; gap: 0.25rem; }
.h24-svc__name { font-weight: 600; overflow-wrap: anywhere; }
.h24-svc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.h24-svc__status { grid-area: status; justify-self: end; }
.h24-svc__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-start; }
@media (min-width: 768px) { .h24-svc__actions { justify-content: flex-end; } }
.h24-services .list-group { gap: 0; }
.h24-services .div-service-item:hover .h24-svc__name { text-decoration: underline; }

/* Автопродление */
.h24-autorenew { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: color-mix(in srgb, var(--success) 78%, var(--foreground)); }
.h24-autorenew::before { content: ""; width: 0.875rem; height: 0.875rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E") center / contain no-repeat; }
.h24-autorenew.is-off { color: var(--muted-foreground); }

/* Сумма к оплате */
.h24-pay { display: grid; gap: 0.75rem; }
.h24-pay__sum { margin: 0; font-size: var(--text-price); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.h24-pay__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }
.h24-tile--pay.is-overdue { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--destructive) 35%, transparent); }

/* ---------------------------------------------------------------- 12. Страницы */
/* Панель над таблицей: пояснение + главное действие */
.h24-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.h24-toolbar__text { margin: 0; color: var(--muted-foreground); max-width: 40rem; }
.h24-cell-title { display: block; color: var(--foreground) !important; font-weight: 600; text-decoration: none !important; overflow-wrap: anywhere; }
a.h24-cell-title:hover { text-decoration: underline !important; }
.h24-cell-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.h24-cell-actions { white-space: nowrap; text-align: right !important; }
.h24-cell-actions .btn + .btn { margin-left: 0.25rem; }
.h24 .ticket-subject.unread { font-weight: 700; }
.h24-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem; }
.h24-bulkbar__label { margin-right: 0.25rem; color: var(--muted-foreground); font-size: 0.875rem; }
.h24-empty--tile { border-radius: var(--radius-card); background: var(--fill); }
.h24-empty--center .h24-actions { justify-content: center; }
@container h24list (max-width: 52rem) { .h24 table.table-list.h24-stack .h24-cell-actions { text-align: left !important; padding-top: 0.375rem !important; } }

/* Шапка услуги/домена */
.h24-svchead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--radius-card);
  background: var(--fill);
}
@media (min-width: 768px) { .h24-svchead { padding: 1.5rem 1.75rem; } }
.h24-svchead__main { min-width: 0; }
.h24 .h24-svchead__title { margin: 0 0 0.625rem; font-size: 1.5rem; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.h24-svchead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; font-size: 0.875rem; }
.h24-svcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.h24-module .module-client-area { text-align: left; }
.h24-hookoutput { margin-bottom: 1.25rem; }
.h24-alert-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.h24-statusline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 500; margin: 1rem 0; }
.h24-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }
.h24-usage__label { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* Быстрые действия домена */
.h24-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.h24-quick__item, .h24-choice__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  padding: 1rem;
  border-radius: var(--radius-card);
  background: var(--fill);
  color: var(--foreground) !important;
  text-decoration: none !important;
  transition: background-color 0.15s var(--h24-ease);
}
.h24-quick__item:hover, .h24-choice__item:hover { background: var(--panel-raised); }
.h24-quick__item strong, .h24-choice__item strong { display: block; font-weight: 600; }
.h24-quick__item small, .h24-choice__item small { display: block; color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.35; }
.h24-quick__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--radius-tile); background: var(--brand-tint); color: var(--brand-ink); }
.h24-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.h24-choice__text { flex: 1; min-width: 0; }
.h24-choice__arrow { color: var(--muted-foreground); }

/* DNS-записи: сетка вместо таблицы, на телефоне — карточки */
.h24-dns { display: grid; gap: 0.5rem; }
.h24-dns__head, .h24-dns__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(6.5rem, 0.7fr) minmax(0, 2.4fr) minmax(5.5rem, 0.6fr); gap: 0.5rem; align-items: center; }
.h24-dns__head { padding: 0 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.h24-dns__cell { margin: 0; min-width: 0; font-weight: 400; }
.h24-dns__lbl { display: none; }
.h24-dns__row--new { margin-top: 0.5rem; padding: 0.75rem; border-radius: 1rem; background: var(--brand-tint); }
.h24-dns__newtitle { grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; font-weight: 600; }
.h24-dns__row--new .form-control { background-color: var(--card); }
@media (max-width: 767.98px) {
  .h24-dns__head { display: none; }
  .h24-dns__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0.75rem; border-radius: 1rem; background: var(--card); }
  .h24-dns__cell--wide { grid-column: 1 / -1; }
  .h24-dns__lbl { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
}
.h24-help { margin-top: 0.75rem; border-radius: 1rem; background: var(--brand-tint); }
.h24-help > summary { padding: 0.875rem 1.125rem; font-weight: 600; cursor: pointer; }
.h24-help__body { padding: 0 1.125rem 1rem; font-size: 0.875rem; }
.h24-help__body p { margin: 0 0 0.375rem; }
.h24-help__body code { background: var(--card); }

/* Тикет: переписка */
.h24-ticket { margin-bottom: 1.25rem; }
.h24-ticket__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-card); background: var(--fill); }
.h24-ticket__head .h24-svchead__title { margin: 0; }
.h24-thread { display: grid; gap: 0.75rem; }
.h24-thread__item { display: flex; justify-content: flex-end; }
.h24-thread__item.is-staff { justify-content: flex-start; }
.h24 .ticket-reply { width: min(100%, 46rem); padding: 1rem 1.25rem; border: 0; border-radius: var(--radius-card) var(--radius-card) 0.375rem var(--radius-card); background: var(--fill); margin: 0; }
.h24 .ticket-reply.staff { border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 0.375rem; background: var(--brand-tint); }
.h24 .ticket-reply .posted-by { margin-bottom: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); background: transparent; padding: 0; border: 0; }
.h24 .ticket-reply .posted-by-name { color: var(--foreground); font-weight: 600; }
.h24 .ticket-reply .requestor-badge { margin-left: 0.5rem; }
.h24 .ticket-reply .requestor-badge::before { display: none; }
.h24 .ticket-reply .message { padding: 0; overflow-wrap: anywhere; }
.h24 .ticket-reply .message hr { margin: 0.75rem 0; }
.h24 .ticket-reply .attachments { margin-top: 0.75rem; padding: 0.75rem 0 0; border-top: 1px solid var(--h24-line); background: transparent; }
.h24 .ticket-reply .attachment-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.h24 .ticket-reply .attachment-list li a, .h24 .ticket-reply .attachment-list li > span { display: inline-flex; padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--card); color: var(--foreground); font-size: 0.8125rem; text-decoration: none; }
.h24 .ticket-reply .attachment-list figure { display: none; }
.h24 .ticket-reply .rating .star, .h24 .ticket-reply .rating-done .star { color: var(--muted-foreground); }
.h24 .ticket-reply .rating-done .star.active, .h24 .ticket-reply .rating .star:hover, .h24 .ticket-reply .rating .star:hover ~ .star { color: var(--warning); }
.h24-formcard .card-body { padding: 1.5rem; }
.h24 .markdown-editor, .h24 .md-editor { border-radius: var(--h24-r-btn); }
.h24 .md-editor { border: 0; background: var(--panel-raised); }
.h24 .md-editor > .btn-toolbar { border: 0; background: transparent; border-radius: var(--h24-r-btn) var(--h24-r-btn) 0 0; }
.h24 .md-editor > textarea { background: var(--panel-raised); color: var(--foreground); border: 0; }
.h24 .md-editor.active { box-shadow: 0 0 0 4px var(--h24-ring-soft); }

/* Формы профиля/регистрации */
.h24-formsection-wrap { margin-bottom: 1rem; }
.h24-formsection-wrap > .h24-formsection { margin-bottom: 0; }
.h24-formsubmit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.h24-tos { margin: 1rem 0 0.5rem; }
.h24-register-head { margin-bottom: 1.25rem; }
.h24 .prepend-icon { position: relative; }
.h24 .prepend-icon .field-icon { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 3rem; margin: 0; color: var(--muted-foreground); pointer-events: none; }
.h24 .prepend-icon .field, .h24 .prepend-icon .form-control { padding-left: 2.75rem; }
.h24 .prepend-icon .iti { width: 100%; }
.h24 .prepend-icon .iti .field { padding-left: 5.25rem; }
.h24 .iti__country-list { background: var(--popover); color: var(--foreground); border: 0; border-radius: 0.75rem; box-shadow: var(--elevation-popover); }
.h24 .field-help-text { display: block; margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.h24 .card .text-center:has(> .btn), .h24 .card .text-center:has(> input.btn) { display: flex; flex-wrap: wrap; gap: 0.5rem; text-align: left !important; }
.h24-contact-tabs { padding: 0.5rem 0 0; }
.h24-cfield { max-width: 36rem; }

/* Служебные страницы */
.h24-status-page { max-width: 36rem; margin: 2rem auto; }
.h24-status-page__code { margin: 0; font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--foreground); }
.h24-empty__icon--danger { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: color-mix(in srgb, var(--destructive) 80%, var(--foreground)); }
.h24-permlist { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; }
.h24-permlist li { padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--panel-raised); font-size: 0.8125rem; }

/* Счёт */
.h24-invoice-page { background: var(--panel); min-height: 100vh; }
.h24-invbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}
.h24-invbar__brand { display: inline-flex; align-items: center; gap: 0.625rem; margin-left: auto; }
.h24-invbar__actions { display: inline-flex; }
@media (max-width: 575.98px) { .h24-invbar__brand .h24-badge-cabinet { display: none; } }
.h24-invoice { max-width: 56rem; margin: 0 auto; padding: 0 1rem 3rem; }
.h24-paybox {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  margin-bottom: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--inverse);
  color: var(--inverse-foreground);
}
@media (min-width: 768px) { .h24-paybox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; padding: 1.75rem 2rem; } }
.dark .h24-paybox { box-shadow: inset 0 0 0 1px var(--inverse-border); }
.h24-paybox p { margin: 0; }
.h24-paybox__label { color: var(--inverse-muted); font-size: 0.875rem; }
.h24-paybox__amount { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0.25rem 0 !important; }
.h24-paybox__due { color: var(--inverse-muted); font-size: 0.875rem; }
.h24-paybox__due strong { color: var(--inverse-foreground); }
.h24-paybox__pay { display: grid; gap: 0.75rem; }
.h24-paybox__method label { color: var(--inverse-muted); font-weight: 400; }
.h24-paybox__method strong { display: block; }
.h24-paybox .custom-select { background-color: color-mix(in srgb, var(--inverse-foreground) 10%, transparent); color: var(--inverse-foreground); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a39d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.h24-paybox .custom-select option { color: var(--foreground); background: var(--popover); }
/* Кнопка шлюза оплаты — единственная лаймовая на экране */
.h24-paybox__btn form { margin: 0; }
.h24-paybox__btn input[type="submit"], .h24-paybox__btn button, .h24-paybox__btn .btn, .h24-paybox__btn a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1.5rem;
  border: 0;
  border-radius: var(--h24-r-btn);
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}
.h24-paybox__btn input[type="submit"]:hover, .h24-paybox__btn button:hover, .h24-paybox__btn .btn:hover { background: var(--primary-hover) !important; }
.h24-paybox__btn img { max-width: 100%; height: auto; }

.h24-invdoc {
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--elevation-card);
}
@media (min-width: 768px) { .h24-invdoc { padding: 2.5rem 2.75rem; } }
.h24-invdoc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
.h24-invdoc__logo { max-height: 3rem; max-width: 12rem; }
.h24 .h24-invdoc__title { margin: 1rem 0 0; font-size: 1.75rem; letter-spacing: -0.025em; }
.h24-invdoc__parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.25rem 2rem; margin-bottom: 2rem; font-size: 0.9375rem; }
.h24-invdoc__parties p { margin: 0 0 0.75rem; }
.h24-invdoc__label { margin: 0 0 0.25rem !important; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.h24-invdoc__notes { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--brand-tint); }
.h24-invdoc__items th:first-child, .h24-invdoc__items td:first-child { padding-left: 0; }
.h24-invdoc__items th:last-child, .h24-invdoc__items td:last-child { padding-right: 0; white-space: nowrap; }
.h24-invdoc__totals { display: grid; gap: 0.375rem; max-width: 22rem; margin: 1rem 0 0 auto; }
.h24-invdoc__totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.h24-invdoc__totals dt { font-weight: 400; color: var(--muted-foreground); }
.h24-invdoc__totals dd { margin: 0; }
.h24-invdoc__total { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--h24-line); }
.h24-invdoc__total dt { color: var(--foreground); font-weight: 600; }
.h24-invdoc__total dd { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.h24-invdoc__fine { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }
.h24-invdoc__tx { margin-top: 2rem; font-size: 0.875rem; }
.h24 .h24-invdoc__subtitle { margin: 0 0 0.5rem; font-size: 1rem; }
.h24-invdoc__tx th:first-child, .h24-invdoc__tx td:first-child { padding-left: 0; }
.h24-invdoc__tx th:last-child, .h24-invdoc__tx td:last-child { padding-right: 0; }
.h24-invdoc__balance td { font-weight: 600; }
.h24-invoice__tools { margin-top: 1rem; }
.h24-credit { max-width: 24rem; }

/* ---------------------------------------------------------------- 13. Печать: только документ, светлые токены */
@media print {
  :root, :root.dark {
    color-scheme: light;
    --background: #ffffff;
    --foreground: #0f1011;
    --card: #ffffff;
    --panel: #ffffff;
    --fill: #ffffff;
    --panel-raised: #f2f2ef;
    --muted-foreground: #4b4b46;
    --brand-tint: #ffffff;
    --border: #d4d4cf;
  }
  .h24-sidebar, .h24-topbar, .h24-tabbar, .h24-appfooter, .h24-guestbar, .h24-guestfooter, .h24-backdrop, .h24-skip,
  .h24-invbar, .h24-paybox, .h24-invoice__tools, .h24-secbar, .h24-seccards, .d-print-none { display: none !important; }
  body.h24, .h24-invoice-page { background: #fff !important; padding: 0 !important; font-size: 11pt; }
  .h24-shell { display: block; }
  .h24 .h24-content.container, .h24-invoice { max-width: none; padding: 0; }
  .h24-invdoc { box-shadow: none; border-radius: 0; padding: 0; }
  .h24 .label { border: 1px solid currentColor; background: none !important; }
  .h24 a { color: inherit !important; text-decoration: none; }
  .h24-invdoc__notes { border: 1px solid var(--border); }
  @page { margin: 16mm 14mm; }
}

/* ---------------------------------------------------------------- 14. Поправки поверх twenty-one и порядок плиток на телефоне */
.h24 .div-service-status .label, .h24 .div-service-status .label:not(.label-placeholder) {
  width: auto;
  display: inline-flex;
  overflow: visible;
  line-height: 1.25;
  color: color-mix(in srgb, var(--st) 76%, var(--foreground));
}
@media (max-width: 767.98px) {
  .h24-services .div-service-item, .h24-svc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "status" "actions"; }
  .h24-svc__status { justify-self: start; }
}
/* Строка домена на дашборде: имя | статус | действия */
.h24-row--domain { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 0.75rem; }
.h24-row--domain .h24-row__actions { grid-column: 1 / -1; }
@media (min-width: 992px) {
  .h24-row--domain { grid-template-columns: minmax(0, 1fr) auto auto; }
  .h24-row--domain .h24-row__actions { grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 575.98px) {
  .h24-row--domain { grid-template-columns: minmax(0, 1fr); }
  .h24-row--domain > .label { justify-self: start; }
}
/* Телефон/планшет: сначала «Счета к оплате», затем услуги, домены, поддержка */
@media (max-width: 1199.98px) {
  .h24-dash__main, .h24-dash__side { display: contents; }
  .h24-dash__grid > * > .h24-tile--pay { order: -1; }
}
@media (min-width: 1024px) {
  .h24 table.table-list td.h24-ssl, .h24 table.table-list td.ssl-info, .h24 table.table-list th.width-fixed-20 { width: 2.75rem; padding-left: 0.75rem; padding-right: 0; }
}
.h24 table.table-list .h24-tnum, .h24 table.table-list .h24-date, .h24 table.table-list .label { white-space: nowrap; }
.h24-invdoc__tx th { white-space: normal; }
@media (max-width: 575.98px) { .h24-invdoc__tx table { font-size: 0.8125rem; } .h24-invdoc__tx th, .h24-invdoc__tx td { padding: 0.5rem 0.375rem; } }
@container h24list (max-width: 52rem) {
  /* Строки с чекбоксом (домены): чекбокс слева, всё остальное — колонкой справа */
  .h24 table.table-list.h24-stack tbody tr:has(> td[data-cell="check"]) { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; }
  .h24 table.table-list.h24-stack tbody tr:has(> td[data-cell="check"]) > td { grid-column: 2; grid-row: auto; justify-self: stretch; }
  .h24 table.table-list.h24-stack tbody tr:has(> td[data-cell="check"]) > td[data-cell="check"] { grid-column: 1; grid-row: 1 / span 4; justify-self: start; padding-top: 0.125rem !important; }
  .h24 table.table-list.h24-stack tbody tr:has(> td[data-cell="check"]) > td[data-cell="status"] { justify-self: start; }
}
.h24-dl--cols > div, .h24-dl--cols > div:first-child, .h24-dl--cols > div:nth-child(2) { border-top: 1px solid var(--h24-line); padding-top: 0.75rem; }
.h24-dl--cols { margin-top: -0.75rem; }
.h24-dl--cols > div { border-top-color: transparent; border-bottom: 1px solid var(--h24-line); padding-bottom: 0.75rem; }
@container h24list (max-width: 52rem) {
  .h24 table.table-list.h24-stack tbody tr:has(> td[data-cell="check"]) > td { order: 3; }
  .h24 table.table-list.h24-stack tbody tr:has(> td[data-cell="check"]) > td[data-cell="main"] { order: 1; }
  .h24 table.table-list.h24-stack tbody tr:has(> td[data-cell="check"]) > td[data-cell="status"] { order: 2; }
  .h24 table.table-list.h24-stack tbody tr:has(> td[data-cell="check"]) > td[data-cell="check"] { order: 0; }
}
/* Гостевая шапка на телефоне: знак + бейдж «Личный кабинет», «← на сайт» — только стрелкой */
@media (max-width: 479.98px) {
  .h24-guestbar__inner { padding: 0 0.375rem 0 0.75rem; gap: 0.375rem; }
  .h24-guestbar__brand .h24-logo__text { display: none; }
  .h24-guestbar__brand .h24-badge-cabinet { display: inline-flex; }
  .h24-guestbar .h24-backlink { width: 2.5rem; padding: 0; justify-content: center; }
  .h24-guestbar .h24-backlink > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .h24-guestbar__actions { gap: 0; }
  .h24-guestbar .h24-pill { padding: 0 0.75rem !important; }
}
@media (max-width: 575.98px) {
  .h24-invdoc { padding: 1.25rem 1rem; }
  .h24-invdoc__tx thead th { font-size: 0.6875rem; letter-spacing: 0.02em; }
  .h24-invdoc__tx td.h24-mono { word-break: break-all; }
}
.h24-topbar__brand { align-items: center; gap: 0.5rem; }
@media (max-width: 479.98px) { .h24-topbar__brand .h24-logo__text { display: none; } .h24-topbar__actions { gap: 0; } }
/* Длинный формат цены WHMCS (префикс и суффикс валюты, например «₸2,600.00KZT») — переносится, а не распирает вёрстку */
.h24-pay__sum, .h24-paybox__amount, .h24-invdoc__total dd, .h24-kpi__value { overflow-wrap: anywhere; min-width: 0; }
.h24-paybox__amount { font-size: clamp(1.75rem, 8vw, 2.5rem); }
.h24-pay__sum { font-size: clamp(1.5rem, 7vw, var(--text-price)); }
@media (max-width: 575.98px) {
  .h24-invdoc__tx .h24-tnum { white-space: normal; overflow-wrap: anywhere; }
  .h24-invdoc__items td:first-child { overflow-wrap: anywhere; }
}
/* Платежи по счёту на телефоне — строки-карточки: дата · способ · ID, сумма справа */
@media (max-width: 575.98px) {
  .h24-invdoc__tx thead { display: none; }
  .h24-invdoc__tx table, .h24-invdoc__tx tbody { display: block; }
  .h24-invdoc__tx tr { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--h24-line); }
  .h24-invdoc__tx td { display: block; padding: 0 !important; border: 0 !important; }
  .h24-invdoc__tx td.text-right { margin-left: auto; font-weight: 600; white-space: nowrap; }
  .h24-invdoc__tx .h24-invdoc__balance td:first-child { flex: 1; }
}

/* ---------------------------------------------------------------- 15. Меню раздела WHMCS: строка чипов над содержимым, инфо-карточки под ним */
.h24-secbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1.5rem; margin-bottom: 1rem; min-width: 0; }
.h24-secbar:not(:has(.h24-secbar__group)) { display: none; }
.h24-secbar__group { display: flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; }
.h24-secbar__label { flex-shrink: 0; font-size: 0.8125rem; color: var(--muted-foreground); }
.h24-secbar__group--filter .h24-secbar__label { display: none; }
.h24 .h24-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.25rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.25rem;
  margin: 0;
  border-radius: 999px;
  background: var(--panel-raised);
  overflow-x: auto;
  scrollbar-width: none;
}
.h24 .h24-chips::-webkit-scrollbar { display: none; }
.h24 .h24-chips .list-group-item, .h24 .h24-chip {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  min-height: 2.25rem;
  margin: 0 !important;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 999px !important;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
}
.h24 .h24-chips .list-group-item:hover { background: color-mix(in srgb, var(--background) 60%, transparent); color: var(--foreground); }
.h24 .h24-chips .list-group-item.active { background: var(--background); color: var(--foreground); font-weight: 600; box-shadow: var(--elevation-xs); }
.h24 .h24-chips .list-group-item i.fa-circle, .h24 .h24-chips .list-group-item i.fa-dot-circle,
.h24 .h24-chips .list-group-item > i:first-child { display: none; }
.h24 .h24-chips .badge { min-width: 1.375rem; justify-content: center; padding: 0.0625rem 0.375rem; background: var(--background); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.h24 .h24-chips .list-group-item.active .badge { background: var(--primary); color: var(--primary-foreground); }
.h24 .h24-chips .list-group-item.disabled { opacity: 0.5; }
.h24-secbar__foot .btn { min-height: 2.25rem; }
.h24-seccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.h24-seccards:not(:has(*)) { display: none; }
.h24-infocard { padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--fill); font-size: 0.875rem; }
.h24 .h24-infocard__title { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.h24-infocard__body p:last-child { margin-bottom: 0; }
.h24-infocard__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.h24-infocard__list li { overflow-wrap: anywhere; }
.h24-infocard__foot { margin-top: 0.75rem; }

/* Таблицы: помещаются в ширину контента; горизонтальная прокрутка — только как крайний случай, с тенью у края */
.h24 .table-container {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--fill) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--fill) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--foreground) 14%, transparent), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--foreground) 14%, transparent), transparent) right / 0.75rem 100% no-repeat scroll,
    var(--fill);
}
.h24 table.table-list tbody td { font-size: 0.875rem; }
.h24 table.table-list thead th, .h24 table.table-list tbody td { padding-left: 0.75rem; padding-right: 0.75rem; }
.h24 table.table-list .h24-cell-title { font-size: 0.9375rem; }
.h24 table.table-list td.h24-cell-actions { width: 1%; }
.h24-rowlink { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; color: var(--muted-foreground) !important; }
.h24-rowlink:hover { background: var(--panel-raised); color: var(--foreground) !important; }
@container h24list (max-width: 52rem) { .h24 table.table-list.h24-stack .h24-rowlink { display: none; } }

/* «Powered by WHMCompleteSolution» — выводит WHMCS (без лицензии Branding Removal не скрываем), только тихий стиль */
body.h24 p:has(> a[href*="whmcs.com"]), body.h24 > p:last-of-type:has(a[href*="whmcs"]) {
  margin: 0 auto;
  padding: 0.5rem 1rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
body.h24 p:has(> a[href*="whmcs.com"]) a { color: var(--muted-foreground) !important; text-decoration: underline; }
@media (max-width: 1023.98px) { body.h24--app p:has(> a[href*="whmcs.com"]) { padding-bottom: 5rem; } }
/* Карточки вместо таблицы — по ширине самой таблицы (container query), а не окна: при сайдбаре на 1024 места меньше */
.h24 .table-container { container: h24list / inline-size; }
.h24 .table-container .dataTables_wrapper { min-width: 0; }
@container h24list (min-width: 52rem) {
  .h24 table.table-list td[data-cell="main"] { min-width: 14rem; }
}
.h24 .h24-cell-title { overflow-wrap: break-word; word-break: normal; }
@container h24list (max-width: 52rem) {
  .h24 table.table-list.h24-stack tbody tr > td[data-cell="main"] { grid-row: 1; order: -2; }
  .h24 table.table-list.h24-stack tbody tr > td[data-cell="status"] { grid-row: 1; order: -1; }
}
/* Средняя ширина (≈1280 с сайдбаром): у доменов прячем второстепенные колонки — SSL и дату регистрации */
@container h24list (max-width: 68rem) {
  .h24 #tableDomainsList th:nth-child(2), .h24 #tableDomainsList td:nth-child(2),
  .h24 #tableDomainsList th:nth-child(4), .h24 #tableDomainsList td:nth-child(4),
  .h24 #tableServicesList th:nth-child(1), .h24 #tableServicesList td:nth-child(1) { display: none !important; }
}

/* ---------------------------------------------------------------- 16. Плита «Данные для документов и KazNIC» */
.h24-kzid {
  margin-bottom: 1rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--brand-tint);
}
@media (min-width: 576px) { .h24-kzid { padding: 1.75rem 2rem; } }
.h24-kzid__head { display: flex; gap: 0.875rem; align-items: flex-start; margin-bottom: 1.25rem; }
.h24-kzid__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--radius-tile); background: var(--primary); color: var(--primary-foreground); }
.h24-kzid__icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h24 .h24-kzid__title { margin: 0 0 0.25rem; font-size: 1.125rem; }
.h24-kzid__lead { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); max-width: 44rem; }
.h24-kzid__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; }
.h24-kzid__id { max-width: 26rem; }
.h24-kzid .form-control, .h24-kzid .custom-select { background-color: var(--card); }
.h24-kzid__hint { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }
.h24-kzid__status { min-height: 1.25rem; margin: 0.25rem 0 0; font-size: 0.8125rem; font-weight: 500; }
.h24-kzid__status.is-error { color: color-mix(in srgb, var(--destructive) 82%, var(--foreground)); }
.h24-kzid__status.is-ok { color: color-mix(in srgb, var(--success) 80%, var(--foreground)); }
.h24-kzid .form-control.is-valid { border-color: color-mix(in srgb, var(--success) 60%, transparent); background-image: none; }
.h24-kzid [data-h24-id] .form-control { font-family: var(--font-mono); letter-spacing: 0.08em; font-size: 1.0625rem; }

/* Сегменты (переключатель типа клиента поверх select) */
.h24-seg { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: var(--h24-r-btn); background: var(--card); }
.h24-seg__item {
  flex: 1 1 auto;
  min-height: 2.5rem;
  padding: 0.375rem 0.875rem;
  border: 0;
  border-radius: calc(var(--radius) * 1.1);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}
.h24-seg__item:hover { color: var(--foreground); background: var(--panel-raised); }
.h24-seg__item.is-active { background: var(--contrast); color: var(--contrast-foreground); font-weight: 600; }
.h24-seg__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; }
.h24-required::after { content: " *"; color: color-mix(in srgb, var(--destructive) 82%, var(--foreground)); }

/* «Будет сохранено как: …» */
.h24-translit { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--brand-ink); }
.h24-translit[hidden] { display: none; }

/* ---------------------------------------------------------------- 17. Главная для гостя (homepage.tpl) */
.h24-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: center;
  margin: 0.5rem 0 2.5rem;
  padding: 1.75rem 1.25rem;
  border-radius: var(--radius-panel);
  background: var(--panel);
}
@media (min-width: 992px) { .h24-home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 2.75rem 3rem; } }
.h24-home-hero__text { display: grid; gap: 0.875rem; justify-items: start; }
.h24 .h24-home-hero__title { margin: 0; font-size: clamp(1.875rem, 4vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.08; }
.h24-home-hero__lead { margin: 0; color: var(--muted-foreground); font-size: 1.0625rem; max-width: 34rem; }
.h24-home-hero__search { padding: 1.25rem; border-radius: var(--radius-card); background: var(--primary); color: var(--primary-foreground); }
@media (min-width: 576px) { .h24-home-hero__search { padding: 1.75rem; } }
.h24 .h24-hsearch__label { display: block; margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--primary-foreground); }
.h24-hsearch__foot { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; }
.h24-hsearch__foot .btn-link { color: var(--primary-foreground) !important; padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; }
/* Поле инструмента, как SearchField сайта (на лаймовой плите — заливка card, кнопка графит) */
.h24-searchfield {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem;
  border: 2px solid transparent;
  border-radius: 1rem;
  background: var(--card);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.h24-searchfield:focus-within { border-color: var(--ring); box-shadow: 0 0 0 4px var(--h24-ring-soft); }
.h24-searchfield__icon { margin-left: 0.5rem; color: var(--muted-foreground); }
.h24-searchfield__input { flex: 1; min-width: 0; height: 2.75rem; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: 1rem; outline: none; }
@media (min-width: 576px) { .h24-searchfield__input { height: 3.25rem; font-size: 1.0625rem; } }
.h24 .h24-searchfield__btn { flex-shrink: 0; min-height: 2.75rem; }
@media (min-width: 576px) { .h24 .h24-searchfield__btn { min-height: 3.25rem; padding: 0 1.5rem; } }
@media (max-width: 575.98px) { .h24-searchfield__btntext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* На лаймовой плите лаймовая кнопка не видна — там она графитовая (как на сайте) */
.h24-home-hero__search .h24-searchfield__btn.btn-accent { background: var(--contrast); color: var(--contrast-foreground) !important; }
.h24-home-hero__search .h24-searchfield__btn.btn-accent:hover { background: var(--contrast-hover); }

.h24-home-section { margin-bottom: 2.5rem; }
.h24 .h24-home-section__title { margin: 0 0 1rem; font-size: 1.375rem; letter-spacing: -0.02em; }

/* Карточки товаров: лаймовая плитка с объектом, выходящим за её верх */
.h24-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1rem; margin: 0; padding: 2.25rem 0 0; list-style: none; }
.h24-pcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem 0.75rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--fill);
  color: var(--foreground) !important;
  text-decoration: none !important;
  transition: background-color 0.15s var(--h24-ease), transform 0.2s var(--h24-ease);
}
.h24-pcard__link:hover { background: var(--panel-raised); }
.h24-pcard__link:hover .h24-pcard__img { transform: translateY(-4px); }
.h24-pcard__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 7.5rem;
  border-radius: var(--radius-tile);
  background: var(--primary);
  overflow: visible;
}
.h24-pcard__tile picture { display: contents; }
.h24-pcard__img {
  position: relative;
  width: auto;
  max-width: 82%;
  height: 9.5rem; /* на 2 rem выше плитки — объект выходит за её верх */
  object-fit: contain;
  object-position: bottom;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 10px 14px rgb(15 16 17 / 0.18));
  transition: transform 0.25s var(--h24-ease);
}
.h24-pcard__body { display: grid; gap: 0.375rem; padding: 1rem 0.5rem 0; flex: 1; align-content: start; }
.h24-pcard__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.h24-pcard__text { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.45; }
.h24-pcard__cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-ink); }

.h24-home-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; }
@media (min-width: 992px) { .h24-home-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.h24-linktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.h24-linktiles a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--fill);
  color: var(--foreground) !important;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none !important;
}
.h24-linktiles a:hover { background: var(--panel-raised); }

/* ---------------------------------------------------------------- 18. Скелетоны загрузки */
@keyframes h24-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes h24-fadein { from { opacity: 0; } to { opacity: 1; } }
.h24-skeleton {
  display: block;
  height: 0.875rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--background) 55%, transparent) 50%, transparent 100%) 0 0 / 200% 100%,
    color-mix(in srgb, var(--foreground) 8%, var(--fill));
  animation: h24-shimmer 1.4s linear infinite;
}
.h24-skeleton--title { height: 1.25rem; margin-bottom: 0.75rem; }
.h24-skeleton--line + .h24-skeleton--line { margin-top: 0.625rem; }
.h24-skeleton--pill { height: 1.5rem; }
.h24-skeleton--btn { width: 8rem; height: 2.25rem; margin-top: 1rem; border-radius: calc(var(--radius) * 1.1); }
.h24-skeleton--tile { height: 5rem; border-radius: var(--radius-card); }
@media (prefers-reduced-motion: reduce) { .h24-skeleton { animation: none; } }
.h24-skel { padding: 0.25rem 0; }
.h24-skel[hidden], .h24-skel.is-done { display: none; }
.h24-skel__tablehead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 1rem 1rem; }
.h24-skel__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 1.25rem; align-items: center; min-height: 3.8rem; padding: 0 1rem; border-top: 1px solid var(--h24-line); }
.h24-skel__item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.25rem; border-top: 1px solid var(--h24-line); }
.h24-skel__item:first-child { border-top: 0; }
.h24-skel__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
@container h24list (max-width: 52rem) {
  .h24-skel__row { grid-template-columns: 1fr auto; min-height: 5.5rem; }
  .h24-skel__hide-sm, .h24-skel__row > :nth-child(3) { display: none; }
}
.h24-skel__error { margin: 0; padding: 1.5rem 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.9375rem; }
.h24-skel.is-failed .h24-skel__body { display: none; }
/* Плавное появление содержимого после загрузки */
.h24 .dataTables_wrapper, .h24 [data-h24-loaded] { animation: h24-fadein 0.15s var(--h24-ease); }
/* Спиннеры WHMCS в областях содержимого заменены скелетонами; в кнопках остаётся маленький спиннер */
.h24 .domain-lookup-loader .h24-skel { text-align: left; }