/* ==========================================================================
   RIDEHOST — Bento Dark Design System
   Подключается ПОСЛЕДНИМ и перекрывает dark-theme.css / servers.css / auth.css.
   Старые файлы не тронуты: удалите подключение bento.css, чтобы откатить дизайн.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Токены (перекрывают и светлую, и тёмную тему — панель теперь всегда dark)
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --app-font: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg-app: #07080c;
  --bg-surface: #0e1015;
  --bg-surface-hover: #161922;
  --bg-header: rgba(14, 16, 21, 0.72);
  --bg-card: #0f1117;
  --bg-card-header: transparent;
  --bg-input: #0a0b10;
  --bg-input-focus: #12141b;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-card: rgba(255, 255, 255, 0.07);
  --border-input: rgba(255, 255, 255, 0.09);

  --text-main: #d9dce4;
  --text-heading: #f4f5f8;
  --text-muted: #868c9b;
  --text-inverse: #07080c;

  --accent-primary: #5cc8f5;
  --accent-primary-hover: #8adbfa;
  --accent-violet: #8b7cf6;
  --accent-success: #34d399;
  --accent-warning: #fbbf24;
  --accent-danger: #f87171;

  --bento-gap: 16px;
  --bento-radius: 22px;
  --bento-radius-sm: 14px;
  --bento-glow-a: rgba(92, 200, 245, 0.10);
  --bento-glow-b: rgba(139, 124, 246, 0.10);
  --bento-glow-c: rgba(52, 211, 153, 0.09);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --shadow-dropdown: 0 24px 60px -12px rgba(0, 0, 0, 0.8);
  --radius-card: var(--bento-radius);
  --radius-btn: 12px;
  --radius-input: 12px;
}

/* --------------------------------------------------------------------------
   1. Фон и каркас
   -------------------------------------------------------------------------- */
html[data-theme] body {
  font-family: var(--app-font) !important;
  background-color: var(--bg-app) !important;
  background-image:
    radial-gradient(60rem 36rem at 12% -8%, rgba(92, 200, 245, 0.07), transparent 60%),
    radial-gradient(52rem 32rem at 100% 0%, rgba(139, 124, 246, 0.08), transparent 60%) !important;
  background-attachment: fixed !important;
  color: var(--text-main);
}

html[data-theme] body h1, html[data-theme] body h2, html[data-theme] body h3, html[data-theme] body h4, html[data-theme] body h5, html[data-theme] body h6,
html[data-theme] body .text-dark, html[data-theme] body .text-dark-75, html[data-theme] body .text-dark-50 {
  color: var(--text-heading) !important;
  letter-spacing: -0.01em;
}
html[data-theme] body .text-muted { color: var(--text-muted) !important; }

::selection { background: rgba(92, 200, 245, 0.28); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10) !important; border-radius: 10px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18) !important; }

html[data-theme] body #kt_content.content,
html[data-theme] body .content { padding: 28px 0 56px 0 !important; }

/* Тема теперь одна — переключатель скрыт */
.theme-switch-btn { display: none !important; }

/* --------------------------------------------------------------------------
   2. Плавающая шапка (desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  html[data-theme] body #kt_header.header,
  html[data-theme] body .header {
    top: 14px !important;
    width: calc(100% - 40px) !important;
    max-width: 1460px !important;
    height: 64px !important;
    margin: 14px auto 0 !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-header) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
  }
  html[data-theme] body .header .container-fluid { max-width: 100% !important; padding-left: 18px !important; padding-right: 14px !important; }
}
@media (min-width: 1600px) {
  html[data-theme] body #kt_header.header, html[data-theme] body .header { max-width: 1560px !important; }
}

html[data-theme] body .header-menu .menu-nav > .menu-item > .menu-link {
  border-radius: 12px !important;
  padding: 9px 14px !important;
  transition: background 0.2s ease;
}
html[data-theme] body .header-menu .menu-nav > .menu-item:hover > .menu-link,
html[data-theme] body .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
html[data-theme] body .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
  background: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme] body .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
html[data-theme] body .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
  background: linear-gradient(135deg, rgba(92, 200, 245, 0.16), rgba(139, 124, 246, 0.14)) !important;
  box-shadow: 0 0 0 1px rgba(92, 200, 245, 0.18) inset;
}
html[data-theme] body .header-menu .menu-nav > .menu-item > .menu-link .menu-text {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
}
html[data-theme] body .header-menu .menu-nav > .menu-item:hover > .menu-link .menu-text,
html[data-theme] body .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text,
html[data-theme] body .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
  color: var(--text-heading) !important;
}

/* выпадающие подменю */
html[data-theme] body .header-menu .menu-nav > .menu-item .menu-submenu {
  background: #12141b !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: 8px !important;
  margin-top: 10px !important;
}
html[data-theme] body .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item > .menu-link {
  border-radius: 12px !important;
}
html[data-theme] body .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item:hover > .menu-link {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* балансная «таблетка» и иконки topbar */
html[data-theme] body .topbar .btn-light-primary {
  background: linear-gradient(135deg, rgba(92, 200, 245, 0.16), rgba(139, 124, 246, 0.16)) !important;
  border: 1px solid rgba(92, 200, 245, 0.22) !important;
  color: #e9f7fd !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}
html[data-theme] body .topbar .btn-light-primary:hover { border-color: rgba(92, 200, 245, 0.45) !important; }
html[data-theme] body .topbar .btn.btn-icon.btn-circle {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-subtle) !important;
}
html[data-theme] body .topbar .btn.btn-icon.btn-circle:hover { background: rgba(255, 255, 255, 0.08) !important; }
html[data-theme] body .topbar .svg-icon svg path,
html[data-theme] body .topbar .svg-icon svg rect:not([fill="none"]),
html[data-theme] body .topbar .svg-icon svg circle { fill: var(--accent-primary) !important; }
html[data-theme] body .topbar .svg-icon svg rect[x="0"][width="24"],
html[data-theme] body .topbar .svg-icon svg polygon { fill: none !important; }

/* мобильные панели */
@media (max-width: 991.98px) {
  html[data-theme] body .header-mobile,
  html[data-theme] body .topbar,
  html[data-theme] body #kt_header_menu_wrapper.header-menu-wrapper {
    background-color: rgba(12, 14, 19, 0.92) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  html[data-theme] body .header-menu-mobile .menu-submenu,
  html[data-theme] body .header-menu-wrapper .menu-submenu { background-color: rgba(255, 255, 255, 0.025) !important; box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   3. Карточки (универсальные «бенто-плитки»)
   -------------------------------------------------------------------------- */
html[data-theme] body .card,
html[data-theme] body .card.card-custom,
html[data-theme] body .server-card,
html[data-theme] body .server-list-card,
html[data-theme] body .main-feature-card,
html[data-theme] body .main-news-item-card,
html[data-theme] body .metric-widget,
html[data-theme] body .protection-card,
html[data-theme] body .protection-hero-card,
html[data-theme] body .protection-rate-card,
html[data-theme] body .protection-checkout-box,
html[data-theme] body .order-summary-card,
html[data-theme] body .order-free-plan-card,
html[data-theme] body .server-main-badge-card,
html[data-theme] body .quota-card,
html[data-theme] body .quota-pkg-card,
html[data-theme] body .advantage-item,
html[data-theme] body .promo-box,
html[data-theme] body .main-empty-news {
  position: relative;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--card-glow, transparent), transparent 50%),
    var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--bento-radius) !important;
  box-shadow: var(--shadow-card) !important;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
html[data-theme] body .server-list-card:hover,
html[data-theme] body .main-feature-card:hover,
html[data-theme] body .main-news-item-card:hover,
html[data-theme] body .metric-widget:hover,
html[data-theme] body .quota-pkg-card:hover,
html[data-theme] body .advantage-item:hover {
  border-color: rgba(92, 200, 245, 0.28) !important;
  transform: translateY(-2px);
}
html[data-theme] body .card > .card-header,
html[data-theme] body .card.card-custom > .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 1.2rem 1.5rem;
}
html[data-theme] body .card .card-title { color: var(--text-heading) !important; font-weight: 600; }
html[data-theme] body .card-body { padding: 1.4rem 1.5rem; }

/* Старые страницы на бутстрап-колонках: тот же шаг сетки, что у бенто (16px) */
html[data-theme] body #kt_content .container > .row:not(:has(.server-list-card)) { margin-left: -8px; margin-right: -8px; }
html[data-theme] body #kt_content .container > .row:not(:has(.server-list-card)) > [class*="col"] { padding-left: 8px; padding-right: 8px; margin-bottom: 0 !important; }
html[data-theme] body #kt_content .container > .row:not(:has(.server-list-card)) > [class*="col"] > .card,
html[data-theme] body #kt_content .container > .row:not(:has(.server-list-card)) > [class*="col"] > .server-card { margin-bottom: 16px !important; }
html[data-theme] body #kt_content .container > .row:not(:has(.server-list-card)) > [class*="col"] > .card:last-child { margin-bottom: 16px !important; }
html[data-theme] body #kt_content .container > .row:not(:has(.server-list-card)) > [class*="col"] > :is(div, form):not(.row):not(.modal) { margin-bottom: 16px !important; }
/* счётчики статистики и бэкапов — в общем стиле плиток */
html[data-theme] body .stat-metric-card,
html[data-theme] body .backup-stat-card {
  background: var(--bg-card) !important; border: 1px solid var(--border-card) !important;
  border-radius: var(--bento-radius) !important; box-shadow: var(--shadow-card) !important;
}

/* --------------------------------------------------------------------------
   4. Кнопки, формы, таблицы, модалки
   -------------------------------------------------------------------------- */
html[data-theme] body .btn { border-radius: 12px !important; font-weight: 600; letter-spacing: 0; }
html[data-theme] body .btn.btn-primary,
html[data-theme] body .order-submit-btn {
  background: linear-gradient(135deg, #4fb9ec 0%, #7b86f4 100%) !important;
  border: 0 !important;
  color: #06090f !important;
  box-shadow: 0 10px 24px -10px rgba(92, 160, 245, 0.7) !important;
}
html[data-theme] body .btn.btn-primary:hover,
html[data-theme] body .order-submit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
html[data-theme] body .btn.btn-light-primary,
html[data-theme] body .btn.btn-light,
html[data-theme] body .btn.btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-main) !important;
}
html[data-theme] body .btn.btn-light-primary,
html[data-theme] body .btn.btn-light-primary:focus { box-shadow: none !important; }
html[data-theme] body .btn.btn-light-primary:hover,
html[data-theme] body .btn.btn-light:hover { background: rgba(92, 200, 245, 0.12) !important; border-color: rgba(92, 200, 245, 0.3) !important; color: #fff !important; }
html[data-theme] body .btn.btn-light-primary i, html[data-theme] body .btn.btn-light-primary .svg-icon svg path { color: var(--accent-primary) !important; fill: var(--accent-primary); }

html[data-theme] body .form-control,
html[data-theme] body .custom-select,
html[data-theme] body select.form-control,
html[data-theme] body textarea.form-control {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: 12px !important;
  color: var(--text-heading) !important;
  height: auto;
  min-height: 46px;
}
html[data-theme] body .form-control:focus {
  background: var(--bg-input-focus) !important;
  border-color: rgba(92, 200, 245, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(92, 200, 245, 0.12) !important;
}
html[data-theme] body .input-group-text { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--border-input) !important; border-radius: 12px; }

html[data-theme] body .table { color: var(--text-main); border-collapse: separate; border-spacing: 0; }
html[data-theme] body .table thead th,
html[data-theme] body .table.table-head-custom thead th {
  background: transparent !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-subtle) !important;
}
html[data-theme] body .table td { border-top: 1px solid var(--border-subtle) !important; }
html[data-theme] body .table tbody tr:hover { background: rgba(255, 255, 255, 0.03) !important; }

html[data-theme] body .modal-content {
  background:
    radial-gradient(100% 60% at 100% 0%, var(--bento-glow-b), transparent 55%),
    #0f1117 !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-dropdown) !important;
}
html[data-theme] body .modal-header, html[data-theme] body .modal-footer { border-color: var(--border-subtle) !important; }
html[data-theme] body .modal-backdrop.show { opacity: 0.7; }

html[data-theme] body .offcanvas {
  background: #0c0e13 !important;
  border-left: 1px solid var(--border-subtle) !important;
}
html[data-theme] body .offcanvas .navi .navi-link { border-radius: 14px !important; }
html[data-theme] body .offcanvas .symbol.bg-light { background: rgba(255, 255, 255, 0.05) !important; border-radius: 14px; }

html[data-theme] body .alert { border-radius: 16px !important; border: 1px solid var(--border-subtle) !important; }

html[data-theme] body .label, html[data-theme] body .badge { border-radius: 8px; }

html[data-theme] body #toast-container > div {
  border-radius: 16px !important;
  background-color: #151821 !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-dropdown) !important;
}

html[data-theme] body .footer, html[data-theme] body #kt_footer.footer {
  background: transparent !important;
  border-top: 1px solid var(--border-subtle) !important;
}

/* --------------------------------------------------------------------------
   5. Страницы сервера
   -------------------------------------------------------------------------- */
/* карточка сервера: статус = цвет свечения, без боковой полосы */
html[data-theme] body .server-list-card { padding: 22px; overflow: hidden; --card-glow: rgba(92, 200, 245, 0.10); }
html[data-theme] body .server-list-card.status-online  { --card-glow: rgba(52, 211, 153, 0.13); }
html[data-theme] body .server-list-card.status-offline { --card-glow: rgba(248, 113, 113, 0.10); }
html[data-theme] body .server-list-card.status-locked  { --card-glow: rgba(251, 191, 36, 0.11); }
html[data-theme] body .server-list-card::before { display: none !important; }
html[data-theme] body .server-list-card.status-online:hover  { border-color: rgba(52, 211, 153, 0.3) !important; }
html[data-theme] body .server-list-card.status-offline:hover { border-color: rgba(248, 113, 113, 0.28) !important; }
html[data-theme] body .server-list-card.status-locked:hover  { border-color: rgba(251, 191, 36, 0.3) !important; }
html[data-theme] body .server-list-ip { color: var(--text-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme] body .server-list-ip:hover { color: var(--accent-primary); text-decoration: none; }
html[data-theme] body .server-list-ip i { color: var(--text-muted) !important; }
html[data-theme] body .server-list-ip .badge { border-radius: 8px !important; background: rgba(255, 255, 255, 0.05) !important; border-color: var(--border-subtle) !important; }
html[data-theme] body .server-list-footer { border-top: 1px solid var(--border-subtle) !important; }
html[data-theme] body .server-list-header { flex-wrap: wrap; gap: 8px; }
html[data-theme] body .server-list-header .server-list-ip { min-width: 0; }

html[data-theme] body .server-status-pill { border-radius: 999px; font-weight: 600; }
html[data-theme] body .server-status-pill.online  { color: #34d399 !important; background: rgba(52, 211, 153, 0.10) !important; border-color: rgba(52, 211, 153, 0.25) !important; }
html[data-theme] body .server-status-pill.offline { color: #f87171 !important; background: rgba(248, 113, 113, 0.10) !important; border-color: rgba(248, 113, 113, 0.25) !important; }
html[data-theme] body .server-status-pill.working { color: #5cc8f5 !important; background: rgba(92, 200, 245, 0.10) !important; border-color: rgba(92, 200, 245, 0.25) !important; }
html[data-theme] body .server-status-pill.locked  { color: #fbbf24 !important; background: rgba(251, 191, 36, 0.10) !important; border-color: rgba(251, 191, 36, 0.25) !important; }

html[data-theme] body .server-action-circle-btn {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-subtle) !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
html[data-theme] body .server-action-circle-btn.btn-start:hover   { background: rgba(52, 211, 153, 0.14) !important; border-color: rgba(52, 211, 153, 0.35) !important; color: #34d399 !important; }
html[data-theme] body .server-action-circle-btn.btn-stop:hover,
html[data-theme] body .server-action-circle-btn.btn-delete:hover  { background: rgba(248, 113, 113, 0.14) !important; border-color: rgba(248, 113, 113, 0.35) !important; color: #f87171 !important; }
html[data-theme] body .server-action-circle-btn.btn-restart:hover { background: rgba(92, 200, 245, 0.14) !important; border-color: rgba(92, 200, 245, 0.35) !important; color: #5cc8f5 !important; }
html[data-theme] body .server-action-circle-btn.btn-disabled { opacity: 0.4; }
html[data-theme] body .server-action-circle-btn i { color: inherit; }

html[data-theme] body .badge-protection {
  background: linear-gradient(135deg, rgba(92, 200, 245, 0.14), rgba(139, 124, 246, 0.16)) !important;
  border: 1px solid rgba(139, 124, 246, 0.3) !important;
  color: #c4bcff !important;
  border-radius: 8px !important;
}

/* смысловые оттенки плиток */
html[data-theme] body .protection-card.active,
html[data-theme] body .order-free-plan-card { --card-glow: rgba(52, 211, 153, 0.15); border-color: rgba(52, 211, 153, 0.22) !important; }
html[data-theme] body .protection-card.inactive { --card-glow: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.2) !important; }
html[data-theme] body .protection-hero-card { --card-glow: rgba(251, 191, 36, 0.12); }
html[data-theme] body .protection-hero-card::before { display: none !important; }
html[data-theme] body .protection-rate-card,
html[data-theme] body .order-summary-card { --card-glow: rgba(139, 124, 246, 0.13); }

html[data-theme] body .server-nav-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html[data-theme] body .server-nav-tabs {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  padding: 6px;
  gap: 4px;
}
html[data-theme] body .server-nav-tabs .nav-link { border-radius: 12px !important; border: 0 !important; }
html[data-theme] body .server-nav-tabs .nav-link.active {
  background: linear-gradient(135deg, rgba(92, 200, 245, 0.18), rgba(139, 124, 246, 0.18)) !important;
  box-shadow: 0 0 0 1px rgba(92, 200, 245, 0.22) inset;
  color: #fff !important;
}

html[data-theme] body .server-metrics-grid { gap: var(--bento-gap); }
html[data-theme] body .metric-widget { padding: 18px; }
html[data-theme] body .metric-icon { border-radius: 14px !important; }

html[data-theme] body .server-avatar-circle { border-radius: 22px !important; }

html[data-theme] body .duration-chip, html[data-theme] body .order-spec-chip, html[data-theme] body .quota-chip { border-radius: 12px !important; }
html[data-theme] body .duration-chip.active {
  background: linear-gradient(135deg, rgba(92, 200, 245, 0.2), rgba(139, 124, 246, 0.2)) !important;
  border-color: rgba(92, 200, 245, 0.45) !important;
}

html[data-theme] body .advantages-grid { gap: var(--bento-gap); }

/* --------------------------------------------------------------------------
   6. Главная — бенто-сетка
   -------------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--bento-gap);
}
.bento-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  color: var(--text-main);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--glow, transparent), transparent 50%),
    var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--bento-radius);
  box-shadow: var(--shadow-card);
  text-decoration: none !important;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
a.bento-tile:hover { border-color: rgba(92, 200, 245, 0.32); transform: translateY(-3px); color: var(--text-main); }
a.bento-tile:hover .bento-arrow { transform: translate(3px, -3px); color: var(--accent-primary); }

.bento-hero { grid-column: span 8; grid-row: span 2; --tile-glow: rgba(92, 200, 245, 0.16); padding: 36px; }
.bento-hero::after {
  content: ""; position: absolute; left: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 124, 246, 0.22), transparent 65%); pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tile-accent, #8b7cf6) 20%, transparent), transparent 65%);
}
.bento-hero > * { position: relative; z-index: 1; }

/* свечение — только у акцентных плиток, остальные плоские */
.bento-hero, .bento-news.featured, .bento-tile.glow { --glow: var(--tile-glow, rgba(92, 200, 245, 0.12)); }
a.bento-tile:hover { border-color: rgba(92, 200, 245, 0.32); border-color: color-mix(in srgb, var(--tile-accent, #5cc8f5) 40%, transparent); }

/* точечная сетка в hero — заполняет правую часть, гаснет к краям */
.bento-news.featured > * { position: relative; z-index: 1; }
.bento-hero::before,
.bento-news.featured::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.3px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(60% 85% at 88% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 85% at 88% 45%, #000 0%, transparent 72%);
}
.bento-chip {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  color: var(--accent-primary); background: rgba(92, 200, 245, 0.10); border: 1px solid rgba(92, 200, 245, 0.2);
}
.bento-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-success); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.bento-hero-title { font-size: clamp(1.7rem, 3.2vw, 2.7rem); font-weight: 700; line-height: 1.12; margin: 18px 0 12px; max-width: 18ch; color: var(--text-heading); }
.bento-hero-title .grad { background: linear-gradient(120deg, #5cc8f5, #a393ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bento-hero-text { color: var(--text-muted); max-width: 52ch; font-size: 0.98rem; line-height: 1.6; margin: 0; }
.bento-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.bento-stat { grid-column: span 4; }
.bento-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.bento-label i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 0.8rem; color: var(--tile-accent, var(--accent-primary)); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); }
.bento-value { font-size: 2.1rem; font-weight: 700; color: var(--text-heading); letter-spacing: -0.03em; line-height: 1.1; margin-top: 16px; font-variant-numeric: tabular-nums; }
.bento-value small { font-size: 0.95rem; color: var(--text-muted); font-weight: 500; margin-left: 6px; letter-spacing: 0; }
.bento-hint { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted) !important; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease; }
.bento-hint:hover { color: var(--tile-accent, var(--accent-primary)) !important; text-decoration: none; }
.bento-stat.balance { --tile-glow: rgba(52, 211, 153, 0.15); --tile-accent: #34d399; }
.bento-stat.servers { --tile-glow: rgba(139, 124, 246, 0.16); --tile-accent: #a393ff; }

.bento-link { grid-column: span 4; }
.bento-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.1rem;
  color: var(--tile-accent, var(--accent-primary));
  background: rgba(255, 255, 255, 0.04);
  background: color-mix(in srgb, var(--tile-accent, var(--accent-primary)) 14%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid color-mix(in srgb, var(--tile-accent, var(--accent-primary)) 28%, transparent);
}
.bento-title { font-weight: 600; font-size: 1.05rem; color: var(--text-heading); margin-top: 18px; letter-spacing: -0.01em; }
.bento-desc { font-size: 0.83rem; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }
.bento-arrow { position: absolute; top: 22px; right: 22px; color: var(--text-muted); font-size: 0.85rem; transition: transform 0.25s ease, color 0.25s ease; }
.c-cyan { --tile-accent: #5cc8f5; --tile-glow: rgba(92, 200, 245, 0.13); }
.c-violet { --tile-accent: #a393ff; --tile-glow: rgba(139, 124, 246, 0.15); }
.c-green { --tile-accent: #34d399; --tile-glow: rgba(52, 211, 153, 0.13); }
.c-amber { --tile-accent: #fbbf24; --tile-glow: rgba(251, 191, 36, 0.11); }
.c-red { --tile-accent: #f87171; --tile-glow: rgba(248, 113, 113, 0.11); }

.bento-section { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bento-section h2 { font-size: 1.1rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; }
.bento-section h2 i { color: var(--accent-primary); font-size: 0.95rem; }
.bento-social { display: flex; gap: 18px; }
.bento-social a { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; transition: color 0.2s ease; }
.bento-social a:hover { color: var(--accent-primary); text-decoration: none; }

.bento-news { grid-column: span 6; justify-content: flex-start; }
.bento-news.featured { --tile-glow: rgba(139, 124, 246, 0.13); padding: 32px; justify-content: space-between; }
.bento-news.featured .bento-title { font-size: 1.5rem; letter-spacing: -0.02em; max-width: 26ch; }
.bento-news.featured .bento-text { font-size: 0.92rem; max-width: 62ch; }
.bento-news .bento-more { margin-top: auto; padding-top: 16px; }
.bento-date { font-size: 0.75rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.bento-news .bento-title { margin: 10px 0 6px; line-height: 1.35; }
.bento-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; max-width: 90ch; }
.bento-more { margin-top: 16px; font-size: 0.8rem; font-weight: 600; color: var(--accent-primary); display: inline-flex; align-items: center; gap: 6px; }
a.bento-tile:hover .bento-more i { transform: translateX(3px); }
.bento-more i { transition: transform 0.25s ease; }
.bento-empty { grid-column: 1 / -1; align-items: center; text-align: center; gap: 12px; padding: 44px 24px; justify-content: center; }
.bento-empty p { max-width: 56ch; color: var(--text-muted); margin: 0; }
.bento-pagination { grid-column: 1 / -1; }

/* Шапка внутренних страниц */
.bento-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-bottom: var(--bento-gap);
}
.bento-head h1 { font-size: 1.6rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.bento-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.bento-head-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.bento-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle);
  font-size: 0.82rem; color: var(--text-muted); font-weight: 500;
}
.bento-pill b { color: var(--text-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.bento-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

@media (max-width: 1199.98px) {
  .bento-hero { grid-column: span 12; grid-row: auto; }
  .bento-stat { grid-column: span 6; }
  .bento-link { grid-column: span 4; }
}
@media (max-width: 991.98px) {
  .bento-link { grid-column: span 12; flex-direction: row; align-items: center; }
  .bento-link > div { display: flex; align-items: center; gap: 16px; }
  .bento-link .bento-title { margin-top: 0; }
  .bento-link { padding-right: 48px; }
  .bento-link .bento-icon { flex: 0 0 46px; }
  .bento-link .bento-arrow { top: 50%; right: 20px; transform: translateY(-50%); }
  a.bento-link:hover .bento-arrow { transform: translate(3px, -50%); }
  .bento-news { grid-column: span 12; }
}
@media (max-width: 767.98px) {
  .bento-grid { gap: 12px; }
  .bento-stat { grid-column: span 12; }
  .bento-hero { padding: 26px 22px; }
  .bento-tile { padding: 20px; }
  .bento-tile.bento-link { padding-right: 48px; }
  .bento-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .bento-value { font-size: 1.8rem; }
  .bento-head h1 { font-size: 1.35rem; }
}

/* список серверов тоже превращаем в сетку-бенто */
html[data-theme] body #kt_content .container > .row:has(> div > .server-list-card) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--bento-gap);
  margin: 0;
}
html[data-theme] body #kt_content .container > .row:has(> div > .server-list-card) > div {
  width: auto; max-width: none; flex: none; padding: 0; margin: 0 !important;
}

/* --------------------------------------------------------------------------
   7. Авторизация (auth.css) — тот же язык
   -------------------------------------------------------------------------- */
:root {
  --auth-bg: #07080c;
  --auth-card-bg: rgba(15, 17, 23, 0.82);
  --auth-card-border: rgba(255, 255, 255, 0.08);
  --auth-input-bg: #0a0b10;
  --auth-input-border: rgba(255, 255, 255, 0.09);
  --auth-input-focus: #5cc8f5;
  --auth-primary: #5cc8f5;
  --auth-primary-hover: #8adbfa;
  --auth-primary-glow: rgba(92, 200, 245, 0.28);
}
html body.auth-page {
  background-image:
    radial-gradient(50rem 30rem at 10% 0%, rgba(92, 200, 245, 0.09), transparent 60%),
    radial-gradient(46rem 30rem at 100% 100%, rgba(139, 124, 246, 0.10), transparent 60%) !important;
}
html[data-theme] body .auth-card,
html[data-theme] body .auth-feature-pill {
  border-radius: var(--bento-radius) !important;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--bento-glow-b), transparent 46%),
    var(--auth-card-bg) !important;
  border: 1px solid var(--auth-card-border) !important;
  box-shadow: var(--shadow-card) !important;
}
html[data-theme] body .auth-form-control { border-radius: 12px !important; }
html[data-theme] body .auth-btn-primary {
  background: linear-gradient(135deg, #4fb9ec 0%, #7b86f4 100%) !important;
  color: #06090f !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px -12px rgba(92, 160, 245, 0.75) !important;
}
html[data-theme] body .auth-logo-box, html[data-theme] body .auth-back-link, html[data-theme] body .auth-status-chip { border-radius: 14px !important; }

/* --------------------------------------------------------------------------
   8. Палитра Metronic → тёмные тонированные варианты
   (style.bundle.css рисует светлые плашки: symbol-light, label-light, bg-light…)
   -------------------------------------------------------------------------- */
html[data-theme] body a:not([class]) { color: var(--accent-primary); }
html[data-theme] body a:not([class]):hover { color: var(--accent-primary-hover); }

html[data-theme] body .text-primary  { color: var(--accent-primary) !important; }
html[data-theme] body .text-info     { color: #a393ff !important; }
html[data-theme] body .text-success  { color: var(--accent-success) !important; }
html[data-theme] body .text-warning  { color: var(--accent-warning) !important; }
html[data-theme] body .text-danger   { color: var(--accent-danger) !important; }
html[data-theme] body .text-white    { color: #fff !important; }
html[data-theme] body .text-hover-primary:hover,
html[data-theme] body a.text-hover-primary:hover { color: var(--accent-primary) !important; }

html[data-theme] body .bg-white,
html[data-theme] body .bg-light,
html[data-theme] body .bg-gray-100 { background-color: rgba(255, 255, 255, 0.04) !important; }
html[data-theme] body .bg-primary { background: linear-gradient(135deg, #4fb9ec, #7b86f4) !important; }
html[data-theme] body .bg-light-primary { background-color: rgba(92, 200, 245, 0.08) !important; }
html[data-theme] body .bg-light-info    { background-color: rgba(139, 124, 246, 0.09) !important; }
html[data-theme] body .bg-light-success { background-color: rgba(52, 211, 153, 0.08) !important; }
html[data-theme] body .bg-light-warning { background-color: rgba(251, 191, 36, 0.08) !important; }
html[data-theme] body .bg-light-danger  { background-color: rgba(248, 113, 113, 0.08) !important; }
html[data-theme] body .rounded.bg-light-primary,
html[data-theme] body .rounded.bg-light-success,
html[data-theme] body .rounded.bg-light-warning,
html[data-theme] body .rounded.bg-light-danger { border-radius: 14px !important; border: 1px solid var(--border-subtle); }

/* symbols (квадратные иконки) */
html[data-theme] body .symbol .symbol-label {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border-radius: 12px;
}
html[data-theme] body .symbol.symbol-circle .symbol-label { border-radius: 50%; }
html[data-theme] body .symbol.symbol-light .symbol-label,
html[data-theme] body .symbol.symbol-light-primary .symbol-label { background-color: rgba(92, 200, 245, 0.10) !important; color: var(--accent-primary) !important; border: 1px solid rgba(92, 200, 245, 0.18); }
html[data-theme] body .symbol.symbol-light-success .symbol-label { background-color: rgba(52, 211, 153, 0.10) !important; color: #34d399 !important; }
html[data-theme] body .symbol.symbol-light-warning .symbol-label { background-color: rgba(251, 191, 36, 0.10) !important; color: #fbbf24 !important; }
html[data-theme] body .symbol.symbol-light-danger  .symbol-label { background-color: rgba(248, 113, 113, 0.10) !important; color: #f87171 !important; }
html[data-theme] body .symbol .symbol-badge { border-color: var(--bg-card) !important; }
html[data-theme] body .symbol .symbol-label .svg-icon svg [fill]:not(g) { fill: var(--accent-primary) !important; }

/* labels */
html[data-theme] body .label.label-light-primary { background: rgba(92, 200, 245, 0.12) !important; color: #8adbfa !important; }
html[data-theme] body .label.label-light-info    { background: rgba(139, 124, 246, 0.14) !important; color: #c4bcff !important; }
html[data-theme] body .label.label-light-success { background: rgba(52, 211, 153, 0.12) !important; color: #6ee7b7 !important; }
html[data-theme] body .label.label-light-warning { background: rgba(251, 191, 36, 0.12) !important; color: #fcd34d !important; }
html[data-theme] body .label.label-light-danger  { background: rgba(248, 113, 113, 0.12) !important; color: #fca5a5 !important; }
html[data-theme] body .label.label-primary { background: linear-gradient(135deg, #4fb9ec, #7b86f4) !important; color: #06090f !important; }
html[data-theme] body .label.label-inline { border-radius: 8px !important; font-variant-numeric: tabular-nums; }

/* кнопки-иконки Metronic */
html[data-theme] body .btn.btn-default,
html[data-theme] body .btn.btn-bg-light,
html[data-theme] body .btn.btn-icon.btn-light {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-main) !important;
}
html[data-theme] body .btn.btn-default:hover,
html[data-theme] body .btn.btn-bg-light:hover,
html[data-theme] body .btn.btn-icon.btn-light:hover { background: rgba(92, 200, 245, 0.12) !important; border-color: rgba(92, 200, 245, 0.3) !important; }
html[data-theme] body .btn.btn-default i,
html[data-theme] body .btn.btn-bg-light i,
html[data-theme] body .btn.btn-icon-primary i { color: var(--accent-primary) !important; }
html[data-theme] body .btn.btn-default .svg-icon svg [fill]:not(g),
html[data-theme] body .btn.btn-bg-light .svg-icon svg [fill]:not(g) { fill: var(--accent-primary) !important; }
html[data-theme] body .btn.btn-success { background: linear-gradient(135deg, #34d399, #10b981) !important; border: 0 !important; color: #04130d !important; }
html[data-theme] body .btn.btn-danger  { background: linear-gradient(135deg, #f87171, #ef4444) !important; border: 0 !important; color: #fff !important; }
html[data-theme] body .btn.btn-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; border: 0 !important; color: #1a1203 !important; }
html[data-theme] body .btn.btn-light-success { background: rgba(52, 211, 153, 0.10) !important; border: 1px solid rgba(52, 211, 153, 0.25) !important; color: #6ee7b7 !important; }
html[data-theme] body .btn.btn-light-danger  { background: rgba(248, 113, 113, 0.10) !important; border: 1px solid rgba(248, 113, 113, 0.25) !important; color: #fca5a5 !important; }
html[data-theme] body .btn.btn-light-warning { background: rgba(251, 191, 36, 0.10) !important; border: 1px solid rgba(251, 191, 36, 0.25) !important; color: #fcd34d !important; }
html[data-theme] body .btn.btn-light-info    { background: rgba(139, 124, 246, 0.12) !important; border: 1px solid rgba(139, 124, 246, 0.28) !important; color: #c4bcff !important; }
html[data-theme] body .btn:disabled,
html[data-theme] body .btn.disabled { opacity: 0.5; filter: saturate(0.6); transform: none !important; }

/* навигация navi (тикеты, FAQ, профиль) */
html[data-theme] body .navi .navi-item .navi-link { border-radius: 12px !important; transition: background 0.2s ease; }
html[data-theme] body .navi .navi-item .navi-link .navi-text { color: var(--text-main) !important; }
html[data-theme] body .navi .navi-item .navi-link .navi-icon i,
html[data-theme] body .navi .navi-item .navi-link .navi-icon .svg-icon svg [fill]:not(g) { color: var(--text-muted) !important; fill: var(--text-muted) !important; }
html[data-theme] body .navi.navi-hover .navi-item .navi-link:hover { background: rgba(255, 255, 255, 0.05) !important; }
html[data-theme] body .navi.navi-active .navi-item .navi-link.active,
html[data-theme] body .navi .navi-item .navi-link.active {
  background: linear-gradient(135deg, rgba(92, 200, 245, 0.14), rgba(139, 124, 246, 0.14)) !important;
  box-shadow: 0 0 0 1px rgba(92, 200, 245, 0.2) inset;
}
html[data-theme] body .navi .navi-item .navi-link.active .navi-text { color: #fff !important; }
html[data-theme] body .navi .navi-item .navi-link.active .navi-icon i { color: var(--accent-primary) !important; }

/* табы (профиль, админка) */
html[data-theme] body .nav-tabs { border-bottom-color: var(--border-subtle) !important; }
html[data-theme] body .nav.nav-tabs.nav-tabs-line .nav-link { color: var(--text-muted) !important; border-bottom-width: 2px; }
html[data-theme] body .nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled),
html[data-theme] body .nav.nav-tabs.nav-tabs-line .nav-link.active {
  color: var(--text-heading) !important;
  border-bottom-color: var(--accent-primary) !important;
}
html[data-theme] body .nav.nav-tabs.nav-tabs-line .nav-link .nav-icon i,
html[data-theme] body .nav.nav-tabs.nav-tabs-line .nav-link i { color: inherit !important; }
html[data-theme] body .nav.nav-tabs.nav-tabs-line .nav-link.active i { color: var(--accent-primary) !important; }
html[data-theme] body .nav.nav-pills .nav-link { border-radius: 12px; color: var(--text-muted); }
html[data-theme] body .nav.nav-pills .nav-link.active,
html[data-theme] body .nav.nav-pills .show > .nav-link { background: linear-gradient(135deg, rgba(92, 200, 245, 0.18), rgba(139, 124, 246, 0.18)) !important; color: #fff !important; }

/* разделители */
html[data-theme] body .separator,
html[data-theme] body .separator.separator-dashed { border-color: var(--border-subtle) !important; border-bottom-color: var(--border-subtle) !important; }
html[data-theme] body hr { border-top-color: var(--border-subtle) !important; }
html[data-theme] body .card-footer,
html[data-theme] body .card .card-footer { background: transparent !important; border-top: 1px solid var(--border-subtle) !important; }
html[data-theme] body .border, html[data-theme] body .border-top, html[data-theme] body .border-bottom,
html[data-theme] body .border-left, html[data-theme] body .border-right { border-color: var(--border-subtle) !important; }

/* чекбоксы и свитчи */
html[data-theme] body .checkbox > span,
html[data-theme] body .radio > span { background-color: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--border-input) !important; border-radius: 7px; }
html[data-theme] body .radio > span { border-radius: 50%; }
html[data-theme] body .checkbox > input:checked ~ span,
html[data-theme] body .radio > input:checked ~ span { background: linear-gradient(135deg, #4fb9ec, #7b86f4) !important; border-color: transparent !important; }
html[data-theme] body .switch input:empty ~ span:before { background-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme] body .switch input:checked ~ span:before { background: linear-gradient(135deg, #4fb9ec, #7b86f4) !important; }

/* прогресс, пагинация, дропдауны */
html[data-theme] body .progress { background-color: rgba(255, 255, 255, 0.06) !important; border-radius: 999px; overflow: hidden; }
html[data-theme] body .progress .progress-bar:not(.bg-success):not(.bg-danger):not(.bg-warning) { background: linear-gradient(90deg, #4fb9ec, #8b7cf6) !important; }
html[data-theme] body .pagination .page-link,
html[data-theme] body .pagination .page-item .page-link {
  background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--border-subtle) !important;
  color: var(--text-main) !important; border-radius: 10px !important; margin: 0 3px;
}
html[data-theme] body .pagination .page-item.active .page-link { background: linear-gradient(135deg, #4fb9ec, #7b86f4) !important; color: #06090f !important; border-color: transparent !important; }
html[data-theme] body .dropdown-menu { background: #12141b !important; border: 1px solid var(--border-subtle) !important; border-radius: 16px !important; box-shadow: var(--shadow-dropdown) !important; padding: 6px; }
html[data-theme] body .dropdown-item { border-radius: 10px; color: var(--text-main) !important; }
html[data-theme] body .dropdown-item:hover, html[data-theme] body .dropdown-item:focus { background: rgba(255, 255, 255, 0.06) !important; }

/* таймлайн и липкий тулбар админки */
html[data-theme] body .timeline .timeline-media,
html[data-theme] body .timeline-media.bg-light-primary { background: rgba(92, 200, 245, 0.10) !important; border: 1px solid rgba(92, 200, 245, 0.2); }
html[data-theme] body .timeline .timeline-item:before,
html[data-theme] body .timeline.timeline-3 .timeline-items:before,
html[data-theme] body .timeline .timeline-items .timeline-item:before { background-color: var(--border-subtle) !important; border-color: var(--border-subtle) !important; }
html[data-theme] body .timeline [class*="timeline-"]::before,
html[data-theme] body .timeline [class*="timeline-"]::after { background-color: var(--border-subtle) !important; border-color: var(--border-subtle) !important; }
html[data-theme] body .timeline .timeline-media { border-radius: 12px !important; }

/* вкладки Metronic: текст и иконка внутри .nav-link */
html[data-theme] body .nav .nav-link .nav-text,
html[data-theme] body .nav .nav-link .nav-icon,
html[data-theme] body .nav .nav-link .nav-icon i { color: inherit !important; }
html[data-theme] body .nav .nav-link.active .nav-icon i { color: var(--accent-primary) !important; }

html[data-theme] body .sticky-toolbar {
  background: rgba(14, 16, 21, 0.85) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle) !important;
  border-right: 0 !important;
  border-radius: 16px 0 0 16px !important;
  box-shadow: var(--shadow-dropdown) !important;
}

/* select: своя стрелка вместо системной */
html[data-theme] body select.form-control:not([multiple]),
html[data-theme] body select.custom-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868c9b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}
html[data-theme] body select.form-control option { background: #12141b; color: var(--text-heading); }
html[data-theme] body .form-control::placeholder { color: #5b6170 !important; }
html[data-theme] body .form-control:disabled,
html[data-theme] body .form-control[readonly] { background: rgba(255, 255, 255, 0.025) !important; color: var(--text-muted) !important; }
html[data-theme] body label { color: var(--text-main); font-weight: 500; }
html[data-theme] body .form-text { color: var(--text-muted) !important; }

/* алерты — мягкие тонированные плитки */
html[data-theme] body .alert.alert-primary,
html[data-theme] body .alert.alert-light-primary,
html[data-theme] body .alert.alert-custom.alert-light-primary { background: rgba(92, 200, 245, 0.07) !important; border-color: rgba(92, 200, 245, 0.2) !important; color: #b9e7fb !important; }
html[data-theme] body .alert.alert-success,
html[data-theme] body .alert.alert-light-success { background: rgba(52, 211, 153, 0.07) !important; border-color: rgba(52, 211, 153, 0.22) !important; color: #a7f3d0 !important; }
html[data-theme] body .alert.alert-warning,
html[data-theme] body .alert.alert-light-warning { background: rgba(251, 191, 36, 0.07) !important; border-color: rgba(251, 191, 36, 0.22) !important; color: #fde68a !important; }
html[data-theme] body .alert.alert-danger,
html[data-theme] body .alert.alert-light-danger { background: rgba(248, 113, 113, 0.07) !important; border-color: rgba(248, 113, 113, 0.22) !important; color: #fecaca !important; }
html[data-theme] body .alert.alert-info,
html[data-theme] body .alert.alert-light-info { background: rgba(139, 124, 246, 0.08) !important; border-color: rgba(139, 124, 246, 0.24) !important; color: #ddd6fe !important; }
html[data-theme] body .alert .alert-text, html[data-theme] body .alert .alert-icon i { color: inherit !important; }

/* --------------------------------------------------------------------------
   10. Бенто-примитивы для внутренних страниц
   Сетка 12 колонок, плитки разных размеров, dense-упаковка без дыр.
   -------------------------------------------------------------------------- */
.bento-grid.dense { grid-auto-flow: row dense; }
.b-2  { grid-column: span 2; }
.b-3  { grid-column: span 3; }
.b-4  { grid-column: span 4; }
.b-5  { grid-column: span 5; }
.b-6  { grid-column: span 6; }
.b-7  { grid-column: span 7; }
.b-8  { grid-column: span 8; }
.b-9  { grid-column: span 9; }
.b-12 { grid-column: 1 / -1; }
.b-row-2 { grid-row: span 2; }
.b-row-3 { grid-row: span 3; }
.b-row-4 { grid-row: span 4; }
html[data-theme] body .order-bento .order-summary-card { position: relative !important; top: auto !important; grid-column: 9 / -1; grid-row: 1 / span 4; }
@media (max-width: 1199.98px) {
  html[data-theme] body .order-bento .order-summary-card { grid-column: 1 / -1; grid-row: auto; order: 99; }
  .order-bento > .b-4 { grid-column: span 6; }
  .order-bento > .b-8 { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) { .order-bento > .b-4 { grid-column: 1 / -1; } }
.order-bento .order-specs-badge { margin-bottom: 16px; }
/* плашка бесплатного тарифа — первая строка слева от сводки, не на всю ширину */
.order-bento .free-plan-tile { grid-column: 1 / span 8; grid-row: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; }
@media (max-width: 1199.98px) { .order-bento .free-plan-tile { grid-column: 1 / -1; grid-row: auto; } }
.order-bento .order-price-wrap { text-align: center; margin: 18px 0 14px; }
.order-bento .order-select-wrapper, .order-bento .slot-counter-group { margin: 0; }

.bento-tile.compact { padding: 20px; }
.bento-tile.top { justify-content: flex-start; }
.bento-tile.top > div:last-child > .btn:last-child { margin-top: 16px; }
.bento-tile.center { align-items: center; text-align: center; justify-content: center; }
.bento-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bento-tile-head .bento-label { margin: 0; }
.bento-tile-head h3 { font-size: 1rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--text-heading); }
.bento-tile-head h3 i { color: var(--tile-accent, var(--accent-primary)); font-size: 0.9rem; }

/* крупная цифра + подпись */
.bento-big { font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.bento-big small { font-size: 0.95rem; font-weight: 500; color: var(--text-muted); margin-left: 6px; letter-spacing: 0; }
.bento-big.md { font-size: 1.6rem; }
.bento-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }

/* иконка-кнопка в углу плитки */
.bento-corner {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle);
  color: var(--text-muted) !important; font-size: 0.85rem; transition: all 0.2s ease;
}
.bento-corner:hover { color: var(--tile-accent, var(--accent-primary)) !important; border-color: rgba(92, 200, 245, 0.35); background: rgba(92, 200, 245, 0.10); text-decoration: none; }

/* сетка квадратных действий */
.bento-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.bento-action {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px;
  min-height: 92px; padding: 14px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle);
  color: var(--text-main) !important; font-size: 0.82rem; font-weight: 600; line-height: 1.3;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none !important; cursor: pointer;
}
.bento-action i { font-size: 1rem; color: var(--a, var(--accent-primary)); }
.bento-action:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.bento-action.danger { --a: #f87171; }
.bento-action.danger:hover { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.3); }
.bento-action.success { --a: #34d399; }
.bento-action.success:hover { background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.3); }

/* действия сервера: компактные строки «иконка + подпись» — без пустых карточек и одиноких сирот */
.bento-actions.rows { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bento-actions.rows.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-actions.rows.two > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.bento-actions.rows .bento-action {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
  min-height: 58px; padding: 10px 14px; font-size: 0.9rem;
}
.bento-actions.rows .bento-action i {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px;
  display: grid; place-items: center; font-size: 0.95rem;
  background: color-mix(in srgb, var(--a, var(--accent-primary)) 12%, transparent);
}
.bento-actions.rows .bento-action:hover { transform: translateY(-1px); }

/* онлайн мониторинг: игроки со шкалой + данные сервера, без пустоты по высоте */
.mon-tile { justify-content: flex-start !important; }
.mon-grid { display: grid; grid-template-columns: minmax(200px, 0.8fr) 1.6fr; gap: 16px; flex: 1; }
.mon-players {
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 22px; border-radius: 18px;
  background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.16);
}
.mon-players .k { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.mon-players .bento-value small { margin-left: 8px; }
.mon-players .bento-meter > span { background: linear-gradient(90deg, #22c55e, #34d399); min-width: 0; }
.mon-kv { align-content: center; }
.mon-kv .mon-name { grid-column: 1 / -1; }
.mon-kv .mon-name .v { font-size: 1.15rem; overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .mon-grid { grid-template-columns: 1fr; } }

/* водяной знак в hero */
.bento-watermark {
  position: absolute !important; right: -24px; bottom: -40px; z-index: 0 !important;
  font-size: 15rem; line-height: 1; pointer-events: none;
  color: var(--tile-accent, var(--accent-primary)); opacity: 0.06;
  transform: rotate(-12deg);
}
@media (max-width: 767.98px) { .bento-watermark { font-size: 9rem; right: -20px; bottom: -24px; } }

.bento-action.acc-icon { min-height: 48px; padding: 0; align-items: center; justify-content: center; }
.bento-action.acc-icon i { font-size: 1.05rem; }

.bento-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bento-chips .bento-pill { padding: 6px 12px; font-size: 0.78rem; }
.bento-chips .bento-pill i { font-size: 0.72rem; opacity: 0.8; }

/* крупные кнопки питания в hero */
.bento-power { display: flex; gap: 10px; flex-wrap: wrap; }
.bento-power .btn { padding: 12px 22px !important; display: inline-flex; align-items: center; gap: 10px; font-size: 0.92rem; }

/* пары ключ-значение */
.bento-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.bento-kv .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }
.bento-kv .v { font-size: 1rem; font-weight: 600; color: var(--text-heading); margin-top: 4px; word-break: break-word; }

/* адрес сервера крупно */
.bento-address {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 14px 12px 18px;
  border-radius: 16px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-subtle);
  font-size: 1.25rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums;
  cursor: pointer; max-width: 100%;
}
.bento-address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-address .copy { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; font-size: 0.9rem; color: var(--accent-primary); background: rgba(92, 200, 245, 0.10); border: 1px solid rgba(92, 200, 245, 0.22); }
.bento-address:hover { border-color: rgba(92, 200, 245, 0.35); }

/* «аватар» игры со статусом */
.bento-game { display: flex; align-items: center; gap: 16px; }
.bento-game-icon {
  width: 60px; height: 60px; flex: 0 0 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.4rem;
  color: var(--tile-accent, var(--accent-primary));
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.02);
}
.bento-game h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; }

/* тонкий прогресс */
.bento-meter { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin-top: 14px; }
.bento-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fb9ec, #8b7cf6); }
.bento-meter.warn > span { background: linear-gradient(90deg, #fbbf24, #f87171); }

/* список строк внутри плитки */
.bento-list { display: flex; flex-direction: column; }
.bento-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-subtle); color: var(--text-main) !important; text-decoration: none !important; }
.bento-list-row:first-child { border-top: 0; padding-top: 0; }
.bento-list-row .grow { flex: 1 1 auto; min-width: 0; }
.bento-list-row .t { font-weight: 600; color: var(--text-heading); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-list-row .s { font-size: 0.78rem; color: var(--text-muted); }
a.bento-list-row:hover .t { color: var(--accent-primary); }

.bento-banner { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; flex-direction: row; }

@media (max-width: 1199.98px) {
  .b-2 { grid-column: span 3; }
  .b-3 { grid-column: span 6; }
  .b-4, .b-5 { grid-column: span 6; }
  .b-7, .b-8, .b-9 { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .b-3, .b-4, .b-5, .b-6, .b-7, .b-8, .b-9 { grid-column: 1 / -1; }
  .b-2 { grid-column: span 6; }
  .bento-grid > .bento-stat:not(.b-12) { grid-column: span 6; padding: 18px; }
  .bento-stat .bento-corner { width: 28px; height: 28px; border-radius: 9px; font-size: 0.72rem; }
  .bento-stat .bento-label { padding-right: 26px; }
  .bento-stat .bento-value { font-size: 1.5rem; }
  .bento-stat .bento-corner, .bento-stat .bento-arrow { top: 12px; right: 12px; }
  html[data-theme] body .card-header-tabs-line .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html[data-theme] body .card-header-tabs-line .nav-tabs .nav-item { flex: 0 0 auto; }
  .b-row-2, .b-row-3 { grid-row: auto; }
  .bento-big { font-size: 2rem; }
  .bento-address { font-size: 1.05rem; }
  .bento-actions { grid-template-columns: repeat(2, 1fr); }
}

/* Оплата: единые плашки логотипов и спокойные кнопки (градиент — только на hover) */
html[data-theme] body img[src*="/img/pay/"] {
  display: block; width: 100%; max-width: 100% !important; height: 72px !important;
  object-fit: contain; padding: 12px 20px; box-sizing: border-box;
  background: #f4f5f8; border-radius: 14px;
}
html[data-theme] body .card:has(img[src*="/img/pay/"]) .card-footer { border-top: 0 !important; padding-top: 0; }
html[data-theme] body .card:has(img[src*="/img/pay/"]) .card-footer .btn.btn-primary {
  background: rgba(255, 255, 255, 0.05) !important; color: var(--text-heading) !important;
  border: 1px solid var(--border-subtle) !important; box-shadow: none !important; font-size: 0.9rem;
}
html[data-theme] body .card:has(img[src*="/img/pay/"]):hover .card-footer .btn.btn-primary {
  background: linear-gradient(135deg, #4fb9ec 0%, #7b86f4 100%) !important; color: #06090f !important; border-color: transparent !important;
}
html[data-theme] body .card:has(img[src*="/img/pay/"]):hover { border-color: rgba(92, 200, 245, 0.28) !important; }

/* --------------------------------------------------------------------------
   13. Разделы сервера (MySQL, задачи, консоль, firewall…): общий шаблон
   Карточка «большая круглая иконка + заголовок по центру» → вводная бенто-плитка.
   -------------------------------------------------------------------------- */
html[data-theme] body #kt_content .card:has(.card-body > .text-center > .symbol-xl-90) { padding-top: 0 !important; }
html[data-theme] body #kt_content .card-body > .text-center:has(> .symbol-xl-90) {
  display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; text-align: left !important;
}
html[data-theme] body #kt_content .card-body > .text-center > .symbol-xl-90 { grid-row: 1 / span 2; margin: 0 !important; }
html[data-theme] body #kt_content .card-body > .text-center > .symbol-xl-90 .symbol-label {
  width: 52px !important; height: 52px !important; border-radius: 16px !important;
  background: rgba(92, 200, 245, 0.10) !important; border: 1px solid rgba(92, 200, 245, 0.22);
}
html[data-theme] body #kt_content .card-body > .text-center > .symbol-xl-90 .symbol-label i,
html[data-theme] body #kt_content .card-body > .text-center > .symbol-xl-90 .symbol-label .svg-icon { font-size: 1.35rem !important; color: var(--accent-primary) !important; }
html[data-theme] body #kt_content .card-body > .text-center:has(> .symbol-xl-90) h4,
html[data-theme] body #kt_content .card-body > .text-center:has(> .symbol-xl-90) h3 { grid-column: 2; margin: 0 !important; font-size: 1.05rem; font-weight: 700 !important; }
html[data-theme] body #kt_content .card-body > .text-center:has(> .symbol-xl-90) .text-muted { grid-column: 2; margin: 2px 0 0 !important; font-size: 0.8rem; font-weight: 500 !important; }

/* шапка раздела сервера под вкладками */
html[data-theme] body .server-nav-wrapper { margin-bottom: 20px !important; }
.server-head .bento-icon { flex: 0 0 46px; }
html[data-theme] body .bento-tile code {
  padding: 2px 8px; border-radius: 7px; font-size: 0.85em; color: #8adbfa;
  background: rgba(92, 200, 245, 0.08); border: 1px solid rgba(92, 200, 245, 0.16);
}
html[data-theme] body .bento-tile input.form-control,
html[data-theme] body .bento-tile select.form-control { height: 46px !important; min-height: 46px; }
html[data-theme] body .bento-tile .d-flex > .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767.98px) { html[data-theme] body .bento-grid > .m-full { grid-column: 1 / -1 !important; } }
@media (max-width: 575.98px) {
  /* «поле + кнопка» в одну строку на телефоне не помещаются — ставим друг под другом */
  html[data-theme] body .bento-tile .d-flex:has(> input.form-control) { flex-direction: column; }
  html[data-theme] body .bento-tile .d-flex:has(> input.form-control) > .btn { width: 100%; justify-content: center; }
}
/* Консоль — терминальная плитка */
.bento-tile.console-tile { padding: 0; }
.console-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; }
.console-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.console-dots span { width: 10px; height: 10px; border-radius: 50%; background: #f87171; opacity: 0.85; }
.console-dots span:nth-child(2) { background: #fbbf24; }
.console-dots span:nth-child(3) { background: #34d399; }
.console-logs { display: flex; gap: 6px; }
.console-logs a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; white-space: nowrap;
  font: 500 0.76rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-muted) !important;
  border: 1px solid transparent; text-decoration: none !important;
}
.console-logs a.active, .console-logs a:hover { color: var(--text-heading) !important; background: rgba(255, 255, 255, 0.05); border-color: var(--border-subtle); }
html[data-theme] body .console-tile #console_data {
  height: min(60vh, 560px) !important; min-height: 320px; margin: 0; padding: 16px 18px !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
html[data-theme] body .console-tile #console_data:not([style*="background"]) { background: #07080c !important; color: #c9d1d9 !important; }
.console-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border-subtle); margin: 0; }
.console-input .prompt { font: 700 0.85rem ui-monospace, Menlo, Consolas, monospace; color: #34d399; padding-left: 4px; }
html[data-theme] body .console-input .form-control { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* экраны результата (оплата, подтверждение аккаунта) */
.result-tile { align-items: center; text-align: center; justify-content: center; padding: 48px 28px !important; }
.result-tile .bento-hero-text { margin: 0 auto; }
.result-icon {
  --ri: #34d399;
  width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 1.7rem;
  color: var(--ri); background: rgba(255, 255, 255, 0.04);
  background: color-mix(in srgb, var(--ri) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ri) 30%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--ri) 5%, transparent);
}
.result-icon.err { --ri: #f87171; }
html[data-theme] body .result-icon i { color: inherit !important; }
/* отдельные страницы без шапки панели */
html[data-theme] body.standalone-page {
  min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px 16px;
  font-family: var(--app-font); color: var(--text-main);
}
.standalone-wrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.standalone-wrap .bento-tile { width: 100%; }
.standalone-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-heading) !important; font-weight: 700; text-decoration: none !important; }
.standalone-brand img { width: 34px; height: 34px; border-radius: 10px; }
.standalone-brand b { color: var(--accent-primary); }
.standalone-page .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 600; text-decoration: none; padding: 12px 22px; border: 1px solid transparent; }
.standalone-page .btn-primary { background: linear-gradient(135deg, #4fb9ec, #7b86f4); color: #06090f; }
.standalone-page .btn-light-primary { background: rgba(255, 255, 255, 0.05); color: var(--text-main); border-color: var(--border-subtle); }
.standalone-page .mr-2 { margin-right: 8px; } .standalone-page .mt-6 { margin-top: 24px; }

/* статус: индикаторы локаций */
.loc-meters { display: grid; gap: 14px; }
.loc-meter .k { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.loc-meter .k i { width: 14px; text-align: center; }
.loc-meter b { font-size: 0.85rem; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.loc-meter .bento-meter { margin-top: 8px; }
/* контакты: админы в 2 колонки */
.contact-admins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.contact-admins .bento-list-row:nth-child(2) { border-top: 0; padding-top: 0; }
@media (max-width: 767.98px) { .contact-admins { grid-template-columns: 1fr; } .contact-admins .bento-list-row:nth-child(2) { border-top: 1px solid var(--border-subtle); padding-top: 12px; } }
.news-article { padding: 32px; }
.news-article .news-body-content { color: var(--text-main); font-size: 1rem; line-height: 1.8; max-width: 72ch; overflow-wrap: anywhere; }
.news-article .news-body-content img { max-width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 767.98px) { .news-article { padding: 22px; } }
.ws-amount { font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-amount.out { color: #fca5a5; }
.ws-amount.in { color: #6ee7b7; }

/* чипы преимуществ (заказ веб-хостинга) */
.web-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.web-perks span {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle);
  font-size: 0.82rem; font-weight: 600; color: var(--text-main);
}
.web-perks i { color: var(--accent-primary); width: 16px; text-align: center; }
@media (max-width: 767.98px) { .web-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Каталог (автоустановка, репозиторий) */
.bento-tile.cat-tile { padding: 0; justify-content: flex-start; }
.bento-tile.cat-tile:hover { border-color: rgba(92, 200, 245, 0.32); transform: translateY(-3px); }
/* превью 16:9: картинка заполняет блок и обрезается (скриншоты сайтов — по верхнему краю) */
.cat-media {
  position: relative; flex: 0 0 auto; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(80% 90% at 50% 0%, rgba(92, 200, 245, 0.12), transparent 70%), rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-subtle);
}
.cat-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; transition: transform 0.5s ease;
}
.cat-tile:hover .cat-media img { transform: scale(1.04); }
/* логотипы и квадратные картинки не режем, а вписываем целиком (класс ставит onload в разметке) */
.cat-media img.fit { object-fit: contain; object-position: center; padding: 20px; }
.cat-media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 9, 13, 0.72), transparent);
}
.cat-media-icon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-primary); opacity: 0.7; }
.cat-media-icon i { font-size: 2.8rem; color: inherit; }
/* цена / «Куплено» поверх картинки — на тёмной подложке, чтобы читалось на любом фоне */
.cat-media .st-pill.cat-badge {
  position: absolute; top: 12px; right: 12px; z-index: 1; padding: 6px 12px; font-size: 0.78rem;
  background: rgba(10, 12, 18, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* версия XenForo у стиля — плашкой слева сверху, в пару к цене справа */
.cat-ver-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #e6f7ff;
  background: rgba(10, 12, 18, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(92, 200, 245, 0.35); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.cat-ver-badge i { color: var(--accent-primary); font-size: 0.7rem; }
.cat-body { padding: 18px 20px 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cat-title { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--text-heading); overflow-wrap: anywhere; }
.cat-ver { margin-top: 4px; font-size: 0.82rem; font-weight: 600; color: var(--accent-primary); }
.cat-desc {
  margin: 0; font-size: 0.86rem; line-height: 1.55; color: #a7adbb;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-foot { padding: 18px 20px 20px; margin-top: auto; }
/* редактор конфига */
html[data-theme] body .config-editor {
  display: block; width: 100%; min-height: min(62vh, 620px); resize: vertical; margin: 0;
  padding: 16px 18px; border: 0; outline: none; background: #07080c; color: #c9d1d9;
  font: 0.82rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4;
}

/* FTP: диалоги elFinder не должны обрезаться плиткой */
.bento-tile.ftp-manager-tile { overflow: visible; padding: 20px; }
@media (max-width: 767.98px) { .bento-tile.ftp-manager-tile { padding: 12px; } }
/* копируемое значение */
.bento-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.bento-copy .val { font-size: 1.05rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bento-copy .val.secret { letter-spacing: 0.12em; }
.bento-copy .btns { display: flex; gap: 6px; flex: 0 0 auto; }
.bento-mini-btn {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-muted) !important; font-size: 0.82rem;
  text-decoration: none !important; transition: all 0.2s ease;
}
.bento-mini-btn:hover { color: var(--accent-primary) !important; border-color: rgba(92, 200, 245, 0.35); background: rgba(92, 200, 245, 0.10); }

/* бейджи Metronic в палитре панели */
html[data-theme] body .label.label-primary, html[data-theme] body .badge.badge-primary,
html[data-theme] body .label.label-info, html[data-theme] body .badge.badge-info {
  background: rgba(92, 200, 245, 0.12) !important; color: #8adbfa !important; border: 1px solid rgba(92, 200, 245, 0.25);
}
html[data-theme] body .label.label-success, html[data-theme] body .badge.badge-success { background: rgba(52, 211, 153, 0.12) !important; color: #6ee7b7 !important; }
html[data-theme] body .label.label-danger, html[data-theme] body .badge.badge-danger { background: rgba(248, 113, 113, 0.12) !important; color: #fca5a5 !important; }
html[data-theme] body .label.label-warning, html[data-theme] body .badge.badge-warning { background: rgba(251, 191, 36, 0.12) !important; color: #fcd34d !important; }

/* --------------------------------------------------------------------------
   12. Поддержка: сегменты, список тикетов, чат
   -------------------------------------------------------------------------- */
.bento-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); }
.bento-seg a { padding: 8px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted) !important; text-decoration: none !important; white-space: nowrap; }
.bento-seg a:hover { color: var(--text-heading) !important; }
.bento-seg a.active { color: #fff !important; background: linear-gradient(135deg, rgba(92, 200, 245, 0.18), rgba(139, 124, 246, 0.18)); box-shadow: 0 0 0 1px rgba(92, 200, 245, 0.22) inset; }
.bento-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted) !important; margin-bottom: 8px; text-decoration: none !important; }
.bento-back:hover { color: var(--accent-primary) !important; }

.st-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.st-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-0 { color: #868c9b; background: rgba(255, 255, 255, 0.05); border-color: var(--border-subtle); }
.st-1 { color: #fbbf24; background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.25); }
.st-2 { color: #34d399; background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.25); }
.ticket-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 0.85rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); }
html[data-theme] body .ticket-ico i { color: inherit !important; }
.ticket-ico.st-1 { color: #fbbf24; } .ticket-ico.st-2 { color: #34d399; } .ticket-ico.st-0 { color: #868c9b; }
.ticket-ico::before, .ticket-ico.st-0::before, .ticket-ico.st-1::before, .ticket-ico.st-2::before { display: none; }
a.bento-list-row.ticket-row { padding: 14px 10px; margin: 0 -10px; border-radius: 14px; border-top-color: transparent; }
a.bento-list-row.ticket-row + a.bento-list-row.ticket-row { border-top: 1px solid var(--border-subtle); }
a.bento-list-row.ticket-row:hover { background: rgba(255, 255, 255, 0.03); }
.ticket-row .chev { color: var(--text-muted); font-size: 0.75rem; }

/* чат */
.chat-tile { padding: 0 !important; }
.chat-tile .chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.chat-tile .chat-head h3 { font-size: 1rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--text-heading); }
.chat-tile .chat-head h3 i { color: var(--accent-primary); font-size: 0.9rem; }
.chat-scroll { height: min(56vh, 560px); overflow-y: auto; padding: 22px; scroll-behavior: smooth; }
.chat-scroll .alert { margin: 0; }
.chat-empty { height: 100%; display: grid; place-items: center; text-align: center; color: var(--text-muted); font-size: 0.88rem; }
.chat-msg { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; max-width: 86%; }
.chat-msg.me { margin-left: auto; flex-direction: row-reverse; }
.chat-ava { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.06); }
.chat-body { min-width: 0; display: flex; flex-direction: column; }
.chat-msg.me .chat-body { align-items: flex-end; }
.chat-meta { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-muted); margin: 0 4px 5px; }
.chat-meta b { color: var(--text-main); font-weight: 600; }
.chat-role { padding: 1px 7px; border-radius: 6px; font-size: 0.66rem; font-weight: 700; color: #34d399; background: rgba(52, 211, 153, 0.12); }
.chat-bubble {
  padding: 11px 14px; border-radius: 16px 16px 16px 6px; font-size: 0.9rem; line-height: 1.5; color: var(--text-heading);
  background: #171a22; border: 1px solid var(--border-subtle); word-break: break-word;
}
.chat-msg.me .chat-bubble { border-radius: 16px 16px 6px 16px; background: linear-gradient(135deg, rgba(79, 185, 236, 0.22), rgba(123, 134, 244, 0.22)); border-color: rgba(92, 200, 245, 0.25); }
.chat-bubble a { color: var(--accent-primary); }
.chat-bubble .ticket-attachment, .chat-bubble a:has(> img) { display: block; }
.chat-bubble:has(> a.ticket-attachment) { padding: 4px; background: transparent !important; border-color: var(--border-subtle) !important; }
.chat-bubble img { display: block; max-width: min(320px, 100%); max-height: 240px; height: auto; border-radius: 12px; object-fit: cover; }

.chat-composer { display: flex; align-items: center; gap: 8px; padding: 14px; border-top: 1px solid var(--border-subtle); }
.chat-composer .form-control { flex: 1 1 auto; min-height: 46px; }
.chat-btn {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-main); font-size: 1rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.chat-btn:hover { background: rgba(92, 200, 245, 0.12); border-color: rgba(92, 200, 245, 0.3); color: var(--accent-primary); }
.chat-btn.send { background: linear-gradient(135deg, #4fb9ec, #7b86f4); border: 0; color: #06090f; }
.chat-btn.send:hover { filter: brightness(1.08); color: #06090f; }
.chat-btn.loading i { animation: chatspin 0.8s linear infinite; }
.chat-btn[disabled], .chat-composer.closed .chat-btn { opacity: 0.45; pointer-events: none; }
@keyframes chatspin { to { transform: rotate(360deg); } }
.chat-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; user-select: none; margin: 0; }
.chat-toggle input { accent-color: #5cc8f5; }

/* база знаний: каждый вопрос — плитка */
html[data-theme] body .faq-list .accordion { display: grid; gap: 10px; }
html[data-theme] body .faq-list .accordion .card { margin: 0 !important; overflow: hidden; border-radius: 18px !important; }
html[data-theme] body .faq-list .accordion .card .card-header { padding: 0 !important; border: 0 !important; background: transparent !important; }
html[data-theme] body .faq-list .accordion .card .card-title {
  margin: 0; padding: 18px 52px 18px 22px !important; font-size: 0.95rem !important; font-weight: 600 !important;
  color: var(--text-heading) !important; cursor: pointer; position: relative;
  background: transparent !important; border-radius: 0 !important;
}
html[data-theme] body .faq-list .accordion.accordion-solid .card .card-header .card-title,
html[data-theme] body .faq-list .accordion.accordion-solid .card .card-header .card-title.collapsed { background-color: transparent !important; color: var(--text-heading) !important; }
html[data-theme] body .faq-list .accordion.accordion-solid .card .card-body { border: 0 !important; }
html[data-theme] body .faq-list .accordion .card .card-title:hover { color: var(--accent-primary) !important; }
html[data-theme] body .faq-list .accordion .card .card-title::after { right: 22px !important; color: var(--text-muted) !important; }
html[data-theme] body .faq-list .accordion .card .card-body { padding: 0 22px 20px !important; color: var(--text-main) !important; font-size: 0.9rem; line-height: 1.65; background: transparent !important; }
html[data-theme] body .faq-list .accordion .card .card-body p { margin: 0; }
html[data-theme] body .faq-list .accordion .card:has(.collapse.show) { border-color: rgba(92, 200, 245, 0.28) !important; }

/* сообщения из админки (старая разметка getMessagess) — тоже пузырями */
#messagess .rounded.bg-light-success, #messagess .rounded.bg-light-primary { border-radius: 16px !important; font-size: 0.9rem !important; color: var(--text-heading) !important; }
#messagess .rounded img { max-width: min(320px, 100%); height: auto; border-radius: 12px; }

@media (max-width: 767.98px) {
  .bento-head .bento-head-stats { width: 100%; }
  .bento-seg { flex: 1 1 auto; }
  .bento-seg a { flex: 1 1 0; text-align: center; padding: 9px 8px; }
  .bento-seg.fin-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .bento-seg.fin-seg::-webkit-scrollbar { display: none; }
  .bento-seg.fin-seg a { flex: 0 0 auto; padding: 9px 12px; }
  .chat-scroll { height: 58vh; padding: 16px; }
  .chat-msg { max-width: 94%; }
  .chat-tile .chat-head { padding: 14px 16px; }
}

/* --------------------------------------------------------------------------
   11. Мобильная шапка и шторка меню (< 992px)
   Шапка — парящая «таблетка»: логотип, баланс, меню.
   Шторка — парящая панель с бенто-плитками: профиль, баланс, быстрые действия, разделы.
   -------------------------------------------------------------------------- */
.mdrawer-top, .mdrawer-bottom { display: none; }

@media (max-width: 991.98px) {
  html[data-theme] body #kt_header_mobile.header-mobile {
    top: 10px !important; left: 10px !important; right: 10px !important;
    height: 58px !important; padding: 0 9px 0 14px !important;
    border-radius: 18px !important;
    border: 1px solid var(--border-subtle) !important;
    background: rgba(14, 16, 21, 0.78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
  }
  html[data-theme] body .page { padding-top: 78px !important; }
  html[data-theme] body #kt_content.content { padding-top: 6px !important; }
  html[data-theme] body .topbar { display: none !important; }

  .mh-logo img { height: 30px; width: auto; }
  .mh-actions { display: flex; align-items: center; gap: 8px; }
  .mh-balance {
    height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
    border-radius: 12px; white-space: nowrap; text-decoration: none !important;
    background: linear-gradient(135deg, rgba(92, 200, 245, 0.14), rgba(139, 124, 246, 0.14));
    border: 1px solid rgba(92, 200, 245, 0.22);
    color: #e9f7fd !important; font-weight: 600; font-size: 0.85rem; font-variant-numeric: tabular-nums;
  }
  .mh-balance i { color: var(--accent-primary); font-size: 0.82rem; }
  .mh-burger {
    position: relative; width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle);
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  }
  .mh-burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--text-heading); transition: transform 0.25s ease, opacity 0.2s ease; }
  .mh-burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mh-burger.active span:nth-child(2) { opacity: 0; }
  .mh-burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mh-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px #0e1015; }

  /* шторка */
  html[data-theme] body #kt_header_menu_wrapper.header-menu-wrapper {
    top: 10px !important; bottom: 10px !important; left: calc(-100% - 20px) !important;
    width: min(88vw, 360px) !important; max-width: none !important;
    padding: 12px !important;
    border-radius: 24px !important;
    border: 1px solid var(--border-subtle) !important;
    background: #0b0d12 !important;
    box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.9) !important;
  }
  html[data-theme] body #kt_header_menu_wrapper.header-menu-wrapper.header-menu-wrapper-on { left: 10px !important; }
  html[data-theme] body .header-menu-wrapper-overlay {
    background: rgba(3, 4, 7, 0.6) !important;
    -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important;
  }

  .mdrawer-top { display: block; }
  .mdrawer-bottom { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; }
  .mdrawer-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px 6px; }
  .mdrawer-close {
    width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-muted);
  }

  .mdrawer-profile {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px;
    background: var(--bg-card); border: 1px solid var(--border-card); text-decoration: none !important;
    color: var(--text-main) !important;
  }
  .mdrawer-profile > i { color: var(--text-muted); font-size: 0.75rem; }
  .mdrawer-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.06); background-size: cover; background-position: center; }
  .mdrawer-profile .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .mdrawer-profile .t, .mdrawer-profile .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mdrawer-profile .t { font-weight: 600; font-size: 0.92rem; color: var(--text-heading); }
  .mdrawer-profile .s { font-size: 0.75rem; color: var(--text-muted); }

  .mdrawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .mdrawer-tile {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    min-height: 80px; padding: 12px 13px; border-radius: 16px;
    background: var(--bg-card); border: 1px solid var(--border-card);
    color: var(--text-main) !important; font-size: 0.82rem; font-weight: 600; text-decoration: none !important;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  a.mdrawer-tile:active { background: rgba(255, 255, 255, 0.06); }
  .mdrawer-tile { min-height: 72px; gap: 10px; }
  .mdrawer-tile > i {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle);
  }
  .mdrawer-pay i { color: inherit; font-size: 0.75rem; }
  .mdrawer-balance {
    grid-column: 1 / -1; min-height: 0;
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
    background: radial-gradient(120% 140% at 100% 0%, rgba(52, 211, 153, 0.14), transparent 55%), var(--bg-card);
  }
  .mdrawer-balance .k { grid-column: 1; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
  .mdrawer-balance .k i { color: #34d399; }
  .mdrawer-balance .v { grid-column: 1; font-size: 1.5rem; font-weight: 700; color: var(--text-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
  .mdrawer-balance .v small { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; }
  .mdrawer-pay {
    grid-column: 2; grid-row: 1 / span 2; height: 40px; padding: 0 14px; border-radius: 12px;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important;
    background: linear-gradient(135deg, #4fb9ec, #7b86f4); color: #06090f !important; font-weight: 700; font-size: 0.8rem;
  }
  .mdrawer-badge {
    position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: #34d399; color: #04130d; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center;
  }
  .mdrawer-caption { margin: 16px 6px 8px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 600; }

  /* разделы — одна сгруппированная плитка */
  html[data-theme] body #kt_header_menu_wrapper .menu-nav {
    background: var(--bg-card) !important; border: 1px solid var(--border-card) !important;
    border-radius: 18px !important; padding: 6px !important;
  }
  html[data-theme] body #kt_header_menu_wrapper .menu-nav > .menu-item { border-bottom: 0 !important; }
  html[data-theme] body #kt_header_menu_wrapper .menu-nav > .menu-item > .menu-link {
    padding: 12px !important; border-radius: 12px !important; border-left: 0 !important; background: transparent !important;
  }
  html[data-theme] body #kt_header_menu_wrapper .menu-nav > .menu-item > .menu-link .menu-text { font-size: 0.95rem !important; font-weight: 500 !important; color: var(--text-main) !important; }
  html[data-theme] body #kt_header_menu_wrapper .menu-nav > .menu-item.menu-item-here > .menu-link,
  html[data-theme] body #kt_header_menu_wrapper .menu-nav > .menu-item.menu-item-active > .menu-link {
    background: linear-gradient(135deg, rgba(92, 200, 245, 0.12), rgba(139, 124, 246, 0.12)) !important;
    box-shadow: 0 0 0 1px rgba(92, 200, 245, 0.18) inset;
  }
  html[data-theme] body #kt_header_menu_wrapper .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text,
  html[data-theme] body #kt_header_menu_wrapper .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: #fff !important; font-weight: 600 !important; }
  html[data-theme] body #kt_header_menu_wrapper .menu-submenu {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
    padding: 2px 0 6px 14px !important; margin: 0 !important;
  }
  html[data-theme] body #kt_header_menu_wrapper .menu-submenu .menu-subnav { border-left: 1px solid var(--border-subtle) !important; padding-left: 6px !important; }
  html[data-theme] body #kt_header_menu_wrapper .menu-submenu .menu-item .menu-link { padding: 9px 12px !important; border-radius: 10px !important; }
  html[data-theme] body #kt_header_menu_wrapper .menu-submenu .menu-item .menu-link .menu-text { font-size: 0.88rem !important; color: var(--text-muted) !important; }
  html[data-theme] body #kt_header_menu_wrapper .menu-submenu .menu-item.menu-item-here .menu-link { background: rgba(92, 200, 245, 0.08) !important; }
  html[data-theme] body #kt_header_menu_wrapper .menu-submenu .menu-item.menu-item-here .menu-link .menu-text { color: var(--accent-primary) !important; }

  .mdrawer-row {
    display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 14px;
    background: var(--bg-card); border: 1px solid var(--border-card);
    color: var(--text-main) !important; font-weight: 600; font-size: 0.88rem; text-decoration: none !important;
  }
  .mdrawer-row i { width: 18px; text-align: center; color: var(--text-muted); }
  .mdrawer-row.danger { color: #fca5a5 !important; }
  .mdrawer-row.danger i { color: #f87171; }
}

/* --------------------------------------------------------------------------
   14. Боковая колонка без пустот
   Плитки рядом с длинной формой/чатом/списком не растягиваются (иначе внутри
   появляется пустота) — собираются в стек натуральной высоты и «прилипают».
   -------------------------------------------------------------------------- */
.bento-stack { display: flex; flex-direction: column; gap: var(--bento-gap); align-self: start; min-width: 0; }
.bento-stack > .bento-tile { flex: 0 0 auto; }
.bento-tile.fit { align-self: start; }
html[data-theme] body .bento-tile .recaptcha { border: 0 !important; background: transparent !important; padding: 0 !important; }
@media (min-width: 992px) { .bento-stack { position: sticky; top: 100px; } }
@media (max-width: 1199.98px) { .bento-stack.b-4 { grid-column: 1 / -1; } }

/* компактная плитка-ссылка: иконка · текст · стрелка в одну строку */
.bento-tile.link-row { flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; justify-content: flex-start; }
.bento-tile.link-row .bento-icon { flex: 0 0 46px; }
.bento-tile.link-row .bento-title { margin: 0; }
.bento-tile.link-row .bento-desc { margin-top: 2px; }
.bento-tile.link-row > div { flex: 1 1 auto; min-width: 0; }
.bento-tile.link-row .bento-arrow { position: static; flex: 0 0 auto; }
a.bento-tile.link-row:hover .bento-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   9. Доступность и мелочи
   -------------------------------------------------------------------------- */
html[data-theme] body a:focus-visible,
html[data-theme] body .btn:focus-visible,
html[data-theme] body .bento-tile:focus-visible,
html[data-theme] body .nav-link:focus-visible,
html[data-theme] body .menu-link:focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
html[data-theme] body .btn:focus:not(:focus-visible) { box-shadow: none; }
html[data-theme] body .scrolltop { border-radius: 14px !important; background: linear-gradient(135deg, #4fb9ec, #7b86f4) !important; }
html[data-theme] body .scrolltop .svg-icon svg [fill]:not(g) { fill: #06090f !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body *,
  html[data-theme] body *::before,
  html[data-theme] body *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .bento-tile:hover, a.bento-tile:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   10. Большие мониторы: шире контейнер и шапка, крупнее базовый шрифт
       (Metronic считает размеры в rem от 13px — без этого на 1920+ узкая колонка мелкого текста)
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  html[data-theme], html[data-theme] body { font-size: 14px !important; }
  html[data-theme] body .container { max-width: 1520px !important; }
  html[data-theme] body #kt_header.header, html[data-theme] body .header { max-width: 1520px !important; }
}
@media (min-width: 1900px) {
  html[data-theme], html[data-theme] body { font-size: 15px !important; }
  html[data-theme] body .container { max-width: 1700px !important; }
  html[data-theme] body #kt_header.header, html[data-theme] body .header { max-width: 1700px !important; height: 70px !important; }
  :root, [data-theme="dark"], [data-theme="light"] { --bento-gap: 18px; }
}
@media (min-width: 2400px) {
  html[data-theme], html[data-theme] body { font-size: 16px !important; }
  html[data-theme] body .container { max-width: 1960px !important; }
  html[data-theme] body #kt_header.header, html[data-theme] body .header { max-width: 1960px !important; }
  :root, [data-theme="dark"], [data-theme="light"] { --bento-gap: 20px; }
}

/* Адрес сайта при заказе веб-хостинга: компактное поле, растущее с текстом, + превью адреса */
.site-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-input {
  display: inline-flex; align-items: stretch; max-width: 100%; margin: 0; cursor: text;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-input); background: var(--bg-input);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.site-input:focus-within { border-color: rgba(92, 200, 245, 0.55); box-shadow: 0 0 0 3px rgba(92, 200, 245, 0.12); }
html[data-theme] body .site-input .form-control {
  flex: 0 1 auto; width: 9ch; min-width: 6ch; max-width: 34ch;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  height: 46px; font-weight: 700; font-size: 1.05rem; padding: 0 2px 0 16px !important; color: var(--text-heading) !important;
}
.site-suffix {
  display: flex; align-items: center; padding: 0 16px 0 0; white-space: nowrap;
  font-weight: 600; font-size: 1.05rem; color: var(--text-muted);
}
.site-preview {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 10px 14px; border-radius: 12px; font-size: 0.86rem; color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--border-subtle);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.site-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-preview b { color: inherit; }
.site-preview.is-ready { color: var(--accent-success); border-style: solid; border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.06); }
.site-preview.is-ready b { color: var(--text-heading); }
/* выбор адреса при заказе: бесплатный поддомен / свой домен */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.site-input.site-input-own { display: flex; width: 100%; max-width: 520px; }
.site-input.site-input-own .site-suffix { padding: 0 0 0 16px; }
html[data-theme] body .site-input.site-input-own .form-control { flex: 1 1 auto; width: auto; max-width: none; padding-left: 2px !important; }
.site-input.is-ready { border-color: rgba(52, 211, 153, 0.45); }
.own-dns {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  font-size: 0.84rem; line-height: 1.5; color: var(--text-muted);
  background: rgba(92, 200, 245, 0.05); border: 1px solid rgba(92, 200, 245, 0.16);
}
.own-dns i { color: var(--accent-primary); margin-top: 3px; }
.own-dns b { color: var(--text-heading); }
#siteHint.text-success { color: var(--accent-success) !important; }
#siteHint.text-danger { color: var(--accent-danger) !important; }

/* Состав тарифа в «Ваш заказ» */
.order-limits-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.order-limits-head .bento-pill { padding: 4px 10px; font-size: 0.74rem; }
.order-limits-list { display: flex; flex-direction: column; gap: 6px; }
.order-limit {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-subtle); font-size: 0.86rem;
}
.order-limit i { width: 18px; text-align: center; color: var(--accent-primary); font-size: 0.85rem; }
.order-limit span { flex: 1; color: var(--text-main); }
.order-limit b { font-weight: 700; color: var(--text-heading); }
.order-limit.is-unlimited b { color: var(--accent-success); font-size: 1.05rem; line-height: 1; }
.order-limit.is-off { opacity: 0.55; }
.order-limit.is-off b { color: var(--text-muted); font-weight: 600; }
.order-limit.muted span { color: var(--text-muted); }

/* Бесплатный тариф: вместо выбора периода (заказ и продление веб-хостинга) */
.free-period {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
  background: rgba(52, 211, 153, 0.07); border: 1px solid rgba(52, 211, 153, 0.28);
}
.free-period > i {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52, 211, 153, 0.14); color: var(--accent-success); font-size: 1.05rem;
}
.free-period > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.free-period b { color: var(--text-heading); font-weight: 700; font-size: 0.98rem; }
.free-period span { color: var(--text-muted); font-size: 0.84rem; }

/* --------------------------------------------------------------------------
   11. Окно привязки Telegram (assets/js/tg-bind.js)
   -------------------------------------------------------------------------- */
.tgb-modal .modal-dialog { max-width: 460px; }
html[data-theme] body .tgb-modal .modal-content {
  position: relative; overflow: hidden; text-align: center;
  padding: 36px 32px 28px !important; border-radius: var(--bento-radius) !important;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(92, 200, 245, 0.14), transparent 70%),
    var(--bg-card) !important;
  border: 1px solid rgba(92, 200, 245, 0.18) !important;
}
.tgb-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted); cursor: pointer; transition: color 0.2s, background 0.2s;
}
.tgb-close:hover { color: var(--text-heading); background: rgba(255, 255, 255, 0.08); }
.tgb-icon {
  width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 20px;
  display: grid; place-items: center; font-size: 1.9rem; color: #06090f;
  background: linear-gradient(135deg, #4fb9ec, #7b86f4);
  box-shadow: 0 16px 36px -14px rgba(92, 200, 245, 0.75);
}
html[data-theme] body .tgb-title { font-size: 1.45rem; font-weight: 700; margin: 0 0 8px; color: var(--text-heading) !important; }
.tgb-text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0 auto 22px; max-width: 360px; }
.tgb-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.tgb-steps::before {
  content: ""; position: absolute; top: 15px; left: 16.6%; right: 16.6%; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}
.tgb-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
.tgb-steps b {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 0.82rem; font-weight: 700;
  color: var(--text-muted); background: #12141b; border: 1px solid var(--border-subtle);
}
.tgb-steps li.is-current { color: var(--text-heading); font-weight: 600; }
.tgb-steps li.is-current b { color: var(--accent-primary); border-color: rgba(92, 200, 245, 0.55); box-shadow: 0 0 0 4px rgba(92, 200, 245, 0.12); }
.tgb-steps li.is-done b { color: #06090f; background: var(--accent-success); border-color: transparent; }
.tgb-actions { display: flex; flex-direction: column; gap: 10px; }
html[data-theme] body .tgb-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 14px !important; font-weight: 600; }
.tgb-hint { margin-top: 14px; font-size: 0.82rem; color: var(--text-muted); min-height: 1.2em; }
@media (max-width: 575.98px) {
  html[data-theme] body .tgb-modal .modal-content { padding: 30px 20px 22px !important; }
}

/* Страница хостинга: статус в подзаголовке вместо пилюли */
.bento-head p.wh-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.wh-state { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.wh-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wh-state.on { color: var(--accent-success); }
.wh-state.on::before { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.wh-state.off { color: #fbbf24; }

/* Плитка «Автоустановка сайта»: текст слева, веер превью шаблонов справа */
.bento-tile.wh-apps { flex-direction: row; align-items: center; gap: 28px; padding: 28px; }
.wh-apps-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wh-apps-shots { position: relative; flex: 0 0 320px; height: 150px; }
.wh-apps-shots img {
  position: absolute; top: 10px; width: 210px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s ease;
}
.wh-apps-shots img:nth-child(1) { left: 0; transform: rotate(-6deg); z-index: 1; }
.wh-apps-shots img:nth-child(2) { left: 55px; transform: rotate(-1deg); z-index: 2; }
.wh-apps-shots img:nth-child(3) { left: 110px; transform: rotate(5deg); z-index: 3; }
.wh-apps:hover .wh-apps-shots img:nth-child(1) { transform: rotate(-9deg) translateX(-8px); }
.wh-apps:hover .wh-apps-shots img:nth-child(3) { transform: rotate(8deg) translateX(8px); }
.wh-apps-shots.empty { display: grid; place-items: center; font-size: 4rem; color: var(--tile-accent, var(--accent-primary)); opacity: 0.55; }
@media (max-width: 767.98px) {
  .bento-tile.wh-apps { flex-direction: column; align-items: stretch; }
  .wh-apps-shots { display: none; }
}

/* Вкладки категорий каталога автоустановки */
.cat-tabs { margin: 0 0 var(--bento-gap); max-width: 100%; }
.cat-tabs .bento-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cat-tabs .bento-seg::-webkit-scrollbar { display: none; }
.cat-count {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-align: center; background: rgba(255, 255, 255, 0.07); color: var(--text-muted);
}
.bento-seg a.active .cat-count { background: rgba(92, 200, 245, 0.22); color: #fff; }

/* Окно «данные для входа» (автоустановка XenForo) */
.info-rows { display: flex; flex-direction: column; gap: 8px; }
.info-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle);
}
.info-row > span { flex: 0 0 72px; font-size: 0.8rem; color: var(--text-muted); }
.info-row > b, .info-row > a:not(.bento-mini-btn) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--text-heading); font-weight: 600; }
.info-row > b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Ход автоустановки: шаги, полоса, таймер */
.ip-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ip-title { font-size: 1.1rem; font-weight: 700; color: var(--text-heading); }
.ip-sub { font-size: 0.84rem; color: var(--text-muted); margin-top: 2px; }
.ip-sub b { color: var(--text-heading); font-variant-numeric: tabular-nums; }
.ip-spinner {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(92, 200, 245, 0.15); border-top-color: var(--accent-primary);
  animation: ip-spin 0.9s linear infinite; position: relative;
}
.ip-spinner.ok, .ip-spinner.fail { animation: none; border-color: transparent; display: grid; place-items: center; }
.ip-spinner.ok { background: rgba(52, 211, 153, 0.14); }
.ip-spinner.fail { background: rgba(248, 113, 113, 0.14); }
.ip-spinner.ok::after, .ip-spinner.fail::after { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.1rem; }
.ip-spinner.ok::after { content: "\f00c"; color: var(--accent-success); }
.ip-spinner.fail::after { content: "\f00d"; color: #f87171; }
@keyframes ip-spin { to { transform: rotate(360deg); } }
.ip-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin-bottom: 18px; }
.ip-bar span {
  display: block; height: 100%; width: 0; border-radius: inherit; transition: width 0.4s ease;
  background: linear-gradient(90deg, #5cc8f5, #8b7cf6); box-shadow: 0 0 12px rgba(92, 200, 245, 0.45);
}
.ip-bar span.fail { background: #f87171; box-shadow: 0 0 12px rgba(248, 113, 113, 0.4); }
.ip-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ip-steps li { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; color: var(--text-muted); transition: color 0.2s; }
.ip-dot { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border-subtle); }
.ip-steps li.done { color: var(--text-main); }
.ip-steps li.done .ip-dot { border-color: transparent; background: rgba(52, 211, 153, 0.16); }
.ip-steps li.done .ip-dot::after { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.65rem; color: var(--accent-success); }
.ip-steps li.active { color: var(--text-heading); font-weight: 600; }
.ip-steps li.active .ip-dot { border-color: rgba(92, 200, 245, 0.25); border-top-color: var(--accent-primary); animation: ip-spin 0.9s linear infinite; }
.ip-note { margin-top: 18px; font-size: 0.8rem; color: var(--text-muted); }
.ip-error { margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-size: 0.88rem; font-weight: 600; color: #f87171; background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.25); }
.ip-steps li.fail { color: #f87171; font-weight: 600; }
.ip-steps li.fail .ip-dot { border-color: transparent; background: rgba(248, 113, 113, 0.16); animation: none; }
.ip-steps li.fail .ip-dot::after { content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.65rem; color: #f87171; }

/* Админка: репозиторий архивов автоустановки */
.repo-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 30px 20px;
  text-align: center; cursor: pointer; border-radius: 16px; border: 2px dashed rgba(92, 200, 245, 0.28);
  background: rgba(92, 200, 245, 0.04); transition: border-color 0.2s, background 0.2s;
}
.repo-drop:hover, .repo-drop.over { border-color: rgba(92, 200, 245, 0.6); background: rgba(92, 200, 245, 0.08); }
.repo-drop.busy { pointer-events: none; }
.repo-drop > i { font-size: 2.2rem; color: var(--accent-primary); margin-bottom: 4px; }
.repo-drop > b { color: var(--text-heading); font-size: 1rem; }
.repo-drop > span { color: var(--text-muted); font-size: 0.84rem; max-width: 640px; }
.repo-progress { width: 100%; max-width: 520px; margin-top: 12px; }
.repo-progress-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.repo-progress-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #5cc8f5, #8b7cf6); transition: width 0.2s; }
.repo-progress-text { margin-top: 6px; font-size: 0.8rem; color: var(--text-muted); }
.repo-loc {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 4px 4px 0; padding: 4px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted); border: 1px dashed var(--border-subtle);
}
.repo-loc i { font-size: 0.7rem; opacity: 0.8; }
.repo-loc.ok { color: var(--accent-success); border: 1px solid rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.08); }
/* плавность шагов установки */
.ip-steps li { transition: color 0.35s ease; }
.ip-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ip-hint { font-size: 0.76rem; font-weight: 400; color: var(--text-muted); animation: ip-fade 0.4s ease; }
.ip-hint:empty { display: none; }
.ip-dot { transition: background-color 0.35s ease, border-color 0.35s ease; }
.ip-steps li.done .ip-dot::after { animation: ip-pop 0.35s ease; }
@keyframes ip-pop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ip-fade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* Репозиторий: вкладки и картинки-превью */
.repo-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); }
.repo-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted) !important; text-decoration: none !important; }
.repo-tabs a:hover { color: var(--text-heading) !important; }
.repo-tabs a.active { color: #fff !important; background: linear-gradient(135deg, rgba(92, 200, 245, 0.18), rgba(139, 124, 246, 0.18)); box-shadow: 0 0 0 1px rgba(92, 200, 245, 0.22) inset; }
.repo-tabs a span { padding: 0 7px; border-radius: 999px; font-size: 0.72rem; background: rgba(255, 255, 255, 0.07); }
.repo-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.repo-image { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-subtle); transition: border-color 0.2s; }
.repo-image:hover { border-color: rgba(92, 200, 245, 0.35); }
.repo-image-media { aspect-ratio: 16 / 9; background: rgba(0, 0, 0, 0.25); }
.repo-image-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.repo-image-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.repo-image-body b { font-size: 0.85rem; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-image-body small { font-size: 0.75rem; color: var(--text-muted); }
.repo-image-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.2s; }
.repo-image:hover .repo-image-actions { opacity: 1; }
@media (hover: none) { .repo-image-actions { opacity: 1; } }

/* Форма шаблона: выбор превью из репозитория */
.img-picker { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.img-pick {
  flex: 0 0 132px; height: 76px; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--border-subtle); background: rgba(255, 255, 255, 0.03); color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 0.75rem; font-weight: 600;
  transition: border-color 0.2s, transform 0.2s;
}
.img-pick:hover { border-color: rgba(92, 200, 245, 0.45); transform: translateY(-1px); }
.img-pick.active { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(92, 200, 245, 0.18); }
.img-pick img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.img-pick i { font-size: 1rem; }
.img-pick-add { margin: 0; border-style: dashed; color: var(--accent-primary); }
.img-pick-add.busy { pointer-events: none; opacity: 0.7; }

.repo-image-media img.fit, .img-pick img.fit { object-fit: contain; object-position: center; padding: 8px; }

/* Аватар: выбор и кадрирование */
.ava-edit { cursor: pointer; }
.ava-edit:hover .symbol-label { box-shadow: 0 0 0 3px rgba(92, 200, 245, 0.35); }
.ava-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 26px 18px;
  text-align: center; cursor: pointer; border-radius: 16px; border: 2px dashed rgba(92, 200, 245, 0.28);
  background: rgba(92, 200, 245, 0.04); transition: border-color 0.2s, background 0.2s;
}
.ava-drop:hover, .ava-drop.over { border-color: rgba(92, 200, 245, 0.6); background: rgba(92, 200, 245, 0.08); }
.ava-drop b { color: var(--text-heading); }
.ava-drop small { color: var(--text-muted); }
.ava-current { width: 88px; height: 88px; border-radius: 50%; background: center / cover no-repeat; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); margin-bottom: 6px; }
.ava-crop { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ava-stage { position: relative; width: 280px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px rgba(92, 200, 245, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.8); background: #0b0d12; touch-action: none; }
.ava-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.ava-stage canvas:active { cursor: grabbing; }
.ava-zoom { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 280px; color: var(--text-muted); }
.ava-zoom input { flex: 1; accent-color: var(--accent-primary); }

/* Пополнение через Platega: карточка, сумма, способы, заглушка */
.pg-card { background: linear-gradient(135deg, rgba(92, 200, 245, 0.08), rgba(139, 124, 246, 0.06)) !important; }
.pg-card-icon { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; color: var(--accent-primary); background: rgba(92, 200, 245, 0.12); }
.pg-card-title { font-size: 1.15rem; font-weight: 700; color: var(--text-heading); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pg-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.85rem; color: var(--text-heading); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); }
.pg-chips i { color: var(--accent-primary); }
.pg-card-btn { min-width: 180px; }
.pg-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pg-quick button { border: 1px solid var(--border-input); background: rgba(255, 255, 255, 0.03); color: var(--text-heading); border-radius: 10px; padding: 4px 12px; font-size: 0.9rem; transition: border-color 0.2s, background 0.2s; }
.pg-quick button:hover, .pg-quick button.active { border-color: rgba(92, 200, 245, 0.6); background: rgba(92, 200, 245, 0.1); }
.pg-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pg-method { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 12px; border-radius: 14px; cursor: pointer; border: 1px solid var(--border-input); background: rgba(255, 255, 255, 0.02); transition: border-color 0.2s, background 0.2s; }
.pg-method input { position: absolute; opacity: 0; pointer-events: none; }
.pg-method i { font-size: 1.25rem; color: var(--accent-primary); margin-bottom: 4px; }
.pg-method b { color: var(--text-heading); }
.pg-method small { color: var(--text-muted); line-height: 1.3; }
.pg-method:hover { border-color: rgba(92, 200, 245, 0.35); }
.pg-method:has(input:checked) { border-color: rgba(92, 200, 245, 0.75); background: rgba(92, 200, 245, 0.08); box-shadow: 0 0 0 3px rgba(92, 200, 245, 0.12); }
.pg-total { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle); color: var(--text-muted); }
.pg-total b { font-size: 1.35rem; color: var(--text-heading); }
.pg-stub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 6px; }
.pg-stub-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fbbf24; background: rgba(251, 191, 36, 0.12); margin-bottom: 6px; }
.pg-stub b { font-size: 1.15rem; color: var(--text-heading); }
.pg-stub p { margin: 0; color: var(--text-muted); max-width: 380px; }
.order-pay-need { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.06); color: var(--text-heading); }
.order-pay-need a { margin-top: 8px; }

/* Чат тикетов (assets/js/ticket-chat.js): фото в сообщениях, превью перед отправкой, перетаскивание, просмотр */
.chat-tile.tc-drop, .tc-create-box { position: relative; }
.tc-scroll-wrap { position: relative; }
.tc-new {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 0; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #06090f; cursor: pointer;
  background: linear-gradient(135deg, #4fb9ec, #7b86f4); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.8);
}
.tc-new.d-none { display: none !important; }
.tc-input { resize: none; min-height: 46px; max-height: 160px; line-height: 1.45; padding-top: 12px; padding-bottom: 12px; overflow-y: auto; }
.chat-composer { align-items: flex-end; }
.tc-tray { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px 0; border-top: 1px solid var(--border-subtle); }
.tc-create-box .tc-tray { border-top: 0; padding: 12px 0 0; }
.tc-thumb { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: #0b0d12; border: 1px solid var(--border-input); }
.tc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-thumb.is-up img { opacity: 0.45; }
.tc-thumb.is-err { border-color: rgba(248, 113, 113, 0.7); }
.tc-thumb.is-err img { opacity: 0.35; }
.tc-thumb-spin, .tc-thumb-err { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.1rem; }
.tc-thumb-spin i { animation: chatspin 0.8s linear infinite; }
.tc-thumb-err { color: #f87171; }
.tc-thumb-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  font-size: 0.7rem; color: #fff; background: rgba(0, 0, 0, 0.7); cursor: pointer;
}
.tc-thumb-x:hover { background: #ef4444; }
.tc-gallery { display: grid; gap: 4px; max-width: 340px; margin-bottom: 4px; border-radius: 14px; overflow: hidden; }
.tc-gallery.n1 { grid-template-columns: 1fr; }
.tc-gallery.n2, .tc-gallery.n4 { grid-template-columns: 1fr 1fr; }
.tc-gallery.n3 { grid-template-columns: 1fr 1fr 1fr; }
.tc-gallery a { display: block; background: #0b0d12; aspect-ratio: 1; }
.tc-gallery.n1 a { aspect-ratio: auto; }
.tc-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s; }
.tc-gallery.n1 img { max-height: 280px; object-fit: cover; }
.tc-gallery a:hover img { opacity: 0.85; }
.chat-msg.me .tc-gallery { margin-left: auto; }
.tc-drop-hint {
  position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; color: var(--text-heading); border: 2px dashed rgba(92, 200, 245, 0.7); border-radius: inherit;
  background: rgba(8, 12, 18, 0.86); pointer-events: none;
}
.tc-drop-hint i { font-size: 1.8rem; color: var(--accent-primary); }
.tc-dragover .tc-drop-hint { display: flex; }
.tc-create-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tc-create-box .tc-drop-hint { border-radius: 12px; }
.tc-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(4, 6, 10, 0.92); padding: 40px 70px; }
.tc-lightbox.open { display: flex; }
.tc-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.tc-lb-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 1.1rem;
  color: #fff; background: rgba(255, 255, 255, 0.1); cursor: pointer;
}
.tc-lb-btn:hover { background: rgba(255, 255, 255, 0.22); }
.tc-lb-close { top: 16px; right: 16px; }
.tc-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.tc-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.tc-lb-open { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: center; color: #cfd6e4; font-size: 0.85rem; }
.tc-lb-open:hover { color: #fff; }
@media (max-width: 600px) { .tc-lightbox { padding: 60px 10px; } .tc-gallery { max-width: 100%; } }

/* Platega: контакты для связи по платежу и согласие на их передачу */
.pg-contacts { padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02); }
.pg-contacts-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.pg-contacts-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; color: var(--text-heading); font-size: 0.92rem; overflow-wrap: anywhere; }
.pg-contacts-row i { width: 16px; text-align: center; color: var(--accent-primary); }
.pg-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 0.86rem; line-height: 1.4; color: var(--text-heading); border: 1px solid rgba(92, 200, 245, 0.25); background: rgba(92, 200, 245, 0.05); }
.pg-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent-primary); cursor: pointer; }