* { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ========================================
   Theme: Arctic (default) — Hero UI Light
   ======================================== */
body, body.theme-arctic {
    --color-primary-50: #ecfdf5;
    --color-primary-100: #d1fae5;
    --color-primary-200: #a7f3d0;
    --color-primary-300: #6ee7b7;
    --color-primary-400: #34d399;
    --color-primary-500: #10b981;
    --color-primary-600: #059669;
    --color-primary-700: #047857;
    --color-primary-800: #065f46;
    --color-primary-900: #064e3b;

    --gradient-from: #10b981;
    --gradient-to: #059669;

    --bg-body: #fafafa;
    --bg-card: #ffffff;
    --bg-nav: #ffffff;
    --bg-nav-border: #e4e4e7;
    --bg-input: #ffffff;
    --bg-hover: #f4f4f5;
    --bg-subtle: #fafafa;
    --bg-badge: #f4f4f5;

    --content-1: #18181b;
    --content-2: #3f3f46;
    --content-3: #71717a;
    --content-4: #a1a1aa;
    --surface: #ffffff;
    --divider: #e4e4e7;

    --border-default: #e4e4e7;
    --border-input: #d4d4d8;
    --focus-ring: rgba(16, 185, 129, 0.2);

    --shadow-card: 0px 0px 15px rgba(0,0,0,0.03), 0px 2px 30px rgba(0,0,0,0.08), 0px 0px 1px rgba(0,0,0,0.3);

    --nav-text: #3f3f46;
    --nav-text-active: #059669;
    --nav-hover: #f4f4f5;

    --success: #17c964;
    --warning: #f5a524;
    --danger: #f31260;

    background-color: var(--bg-body);
    color: var(--content-1);
}

/* ========================================
   Theme: Cyberpunk — Hero UI Dark Mode
   ======================================== */
body.theme-cyberpunk {
    --color-primary-50: rgba(16, 185, 129, 0.1);
    --color-primary-100: rgba(16, 185, 129, 0.15);
    --color-primary-200: rgba(16, 185, 129, 0.2);
    --color-primary-300: #6ee7b7;
    --color-primary-400: #34d399;
    --color-primary-500: #10b981;
    --color-primary-600: #059669;
    --color-primary-700: #047857;
    --color-primary-800: #065f46;
    --color-primary-900: #064e3b;

    --gradient-from: #10b981;
    --gradient-to: #059669;

    --bg-body: #000000;
    --bg-card: #18181b;
    --bg-nav: #18181b;
    --bg-nav-border: #27272a;
    --bg-input: #27272a;
    --bg-hover: #27272a;
    --bg-subtle: #09090b;
    --bg-badge: #27272a;

    --content-1: #fafafa;
    --content-2: #d4d4d8;
    --content-3: #a1a1aa;
    --content-4: #71717a;
    --surface: #18181b;
    --divider: #27272a;

    --border-default: #27272a;
    --border-input: #3f3f46;
    --focus-ring: rgba(16, 185, 129, 0.4);

    --shadow-card: inset 0 0 1px rgba(255,255,255,0.15);

    --nav-text: #d4d4d8;
    --nav-text-active: #10b981;
    --nav-hover: #27272a;

    --success: #17c964;
    --warning: #f5a524;
    --danger: #f31260;

    background-color: var(--bg-body) !important;
    color: var(--content-1);
}

/* Cyberpunk overrides */
body.theme-cyberpunk .bg-white,
body.theme-cyberpunk .card {
    background-color: var(--bg-card) !important;
    box-shadow: var(--shadow-card) !important;
}
body.theme-cyberpunk .bg-zinc-50,
body.theme-cyberpunk .bg-gray-50 {
    background-color: var(--bg-subtle) !important;
}
body.theme-cyberpunk thead,
body.theme-cyberpunk thead th {
    background-color: var(--bg-card) !important;
}
body.theme-cyberpunk .text-zinc-900,
body.theme-cyberpunk .text-gray-900 {
    color: var(--content-1) !important;
}
body.theme-cyberpunk .text-zinc-700,
body.theme-cyberpunk .text-gray-700,
body.theme-cyberpunk .text-zinc-600,
body.theme-cyberpunk .text-gray-600 {
    color: var(--content-2) !important;
}
body.theme-cyberpunk .text-zinc-500,
body.theme-cyberpunk .text-gray-500,
body.theme-cyberpunk .text-zinc-400,
body.theme-cyberpunk .text-gray-400 {
    color: var(--content-3) !important;
}
body.theme-cyberpunk .border-zinc-200,
body.theme-cyberpunk .border-gray-200,
body.theme-cyberpunk .border-zinc-100,
body.theme-cyberpunk .border-gray-100 {
    border-color: var(--divider) !important;
}
body.theme-cyberpunk .divide-zinc-100 > * + *,
body.theme-cyberpunk .divide-zinc-200 > * + *,
body.theme-cyberpunk .divide-gray-200 > * + * {
    border-color: var(--divider) !important;
}
body.theme-cyberpunk .border-t,
body.theme-cyberpunk .border-b {
    border-color: var(--divider) !important;
}
body.theme-cyberpunk input,
body.theme-cyberpunk select,
body.theme-cyberpunk textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--content-1) !important;
}
body.theme-cyberpunk input::placeholder,
body.theme-cyberpunk textarea::placeholder {
    color: var(--content-4) !important;
}
body.theme-cyberpunk .shadow,
body.theme-cyberpunk .shadow-lg,
body.theme-cyberpunk .shadow-xl,
body.theme-cyberpunk .shadow-hero,
body.theme-cyberpunk .shadow-hero-sm {
    box-shadow: var(--shadow-card) !important;
}
body.theme-cyberpunk .rounded-hero {
    border: 1px solid var(--divider);
}
body.theme-cyberpunk .bg-green-100, body.theme-cyberpunk .bg-green-50 { background-color: rgba(23, 201, 100, 0.15) !important; }
body.theme-cyberpunk .bg-red-100, body.theme-cyberpunk .bg-red-50 { background-color: rgba(243, 18, 96, 0.15) !important; }
body.theme-cyberpunk .bg-yellow-100, body.theme-cyberpunk .bg-yellow-50 { background-color: rgba(245, 165, 36, 0.15) !important; }
body.theme-cyberpunk .bg-blue-100, body.theme-cyberpunk .bg-blue-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
body.theme-cyberpunk .bg-primary-50, body.theme-cyberpunk .bg-primary-100 { background-color: rgba(16, 185, 129, 0.12) !important; }
body.theme-cyberpunk .text-green-800 { color: #17c964 !important; }
body.theme-cyberpunk .text-red-800, body.theme-cyberpunk .text-red-700 { color: #f31260 !important; }
body.theme-cyberpunk .text-yellow-800 { color: #f5a524 !important; }
body.theme-cyberpunk .text-green-700 { color: #17c964 !important; }
body.theme-cyberpunk .btn-primary {
    background-color: var(--color-primary-500) !important;
    color: #ffffff !important;
}
body.theme-cyberpunk .language-dropdown {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--divider) !important;
}
body.theme-cyberpunk .language-dropdown button {
    color: var(--content-2) !important;
}
body.theme-cyberpunk .language-dropdown button:hover {
    background-color: var(--bg-hover) !important;
}
body.theme-cyberpunk footer {
    background-color: var(--bg-card) !important;
    border-color: var(--divider) !important;
}

/* ========================================
   Theme: Emerald Glass
   ======================================== */
body.theme-emerald {
    --color-primary-50: #ecfdf5;
    --color-primary-100: #d1fae5;
    --color-primary-200: #a7f3d0;
    --color-primary-300: #6ee7b7;
    --color-primary-400: #34d399;
    --color-primary-500: #10b981;
    --color-primary-600: #059669;
    --color-primary-700: #047857;
    --color-primary-800: #065f46;
    --color-primary-900: #064e3b;

    --gradient-from: #10b981;
    --gradient-to: #059669;

    --bg-body: #f0fdf8;
    --bg-card: rgba(255,255,255,0.75);
    --bg-nav: rgba(255,255,255,0.8);
    --bg-nav-border: rgba(16, 185, 129, 0.12);
    --bg-input: rgba(255,255,255,0.9);
    --bg-hover: rgba(16, 185, 129, 0.06);
    --bg-subtle: rgba(240,253,248,0.8);
    --bg-badge: rgba(16, 185, 129, 0.08);

    --content-1: #18181b;
    --content-2: #3f3f46;
    --content-3: #71717a;
    --content-4: #a1a1aa;
    --surface: rgba(255,255,255,0.75);
    --divider: rgba(16, 185, 129, 0.12);

    --border-default: rgba(16, 185, 129, 0.15);
    --border-input: rgba(16, 185, 129, 0.2);
    --focus-ring: rgba(16, 185, 129, 0.25);

    --shadow-card: 0px 0px 15px rgba(16,185,129,0.04), 0px 2px 30px rgba(0,0,0,0.06), 0px 0px 1px rgba(16,185,129,0.2);

    --nav-text: #3f3f46;
    --nav-text-active: #059669;
    --nav-hover: rgba(16, 185, 129, 0.08);

    --success: #17c964;
    --warning: #f5a524;
    --danger: #f31260;

    background-color: var(--bg-body) !important;
    color: var(--content-1);
}
body.theme-emerald .bg-white,
body.theme-emerald .card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.4) !important;
}
body.theme-emerald .shadow,
body.theme-emerald .shadow-lg,
body.theme-emerald .shadow-hero,
body.theme-emerald .shadow-hero-sm {
    box-shadow: var(--shadow-card) !important;
}
body.theme-emerald footer {
    background: var(--bg-nav) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--divider) !important;
}
body.theme-emerald .border-zinc-200,
body.theme-emerald .border-gray-200 {
    border-color: var(--divider) !important;
}

/* ========================================
   Global Component Styles (Hero UI)
   ======================================== */
.gradient-bg {
    background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
}

/* Card */
.card {
    background-color: var(--bg-card);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
.btn:hover { opacity: 0.9; }
.btn-primary {
    background-color: var(--color-primary-500);
    color: #ffffff;
}
.btn-primary:hover {
    background-color: var(--color-primary-600);
    color: #ffffff;
}
.btn-flat {
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
}
.btn-flat:hover {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}
.btn-danger {
    background-color: rgba(243, 18, 96, 0.1);
    color: #f31260;
}
.btn-danger:hover {
    background-color: rgba(243, 18, 96, 0.2);
}
.btn-ghost {
    background: transparent;
    color: var(--content-3);
}
.btn-ghost:hover {
    background-color: var(--bg-hover);
    color: var(--content-1);
}
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

/* Inputs */
.input-field {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 2px solid var(--border-input);
    border-radius: 12px;
    background-color: var(--bg-input);
    color: var(--content-1);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.input-field:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.input-field::placeholder {
    color: var(--content-4);
}

/* Badge / Chip */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}
.badge-success { background-color: rgba(23,201,100,0.12); color: var(--success); }
.badge-warning { background-color: rgba(245,165,36,0.12); color: var(--warning); }
.badge-danger { background-color: rgba(243,18,96,0.12); color: var(--danger); }
.badge-primary { background-color: var(--color-primary-50); color: var(--color-primary-600); }
.badge-default { background-color: var(--bg-badge); color: var(--content-3); }

/* Table */
.table-hero {
    width: 100%;
    font-size: 0.875rem;
}
.table-hero thead th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--content-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--divider);
}
.table-hero tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--divider);
    color: var(--content-2);
}
.table-hero tbody tr:last-child td {
    border-bottom: none;
}
.table-hero tbody tr:hover {
    background-color: var(--bg-hover);
}

/* Tabs */
.tab-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--content-3);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}
.tab-item:hover {
    color: var(--content-1);
}
.tab-item.active {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
}

/* Alert */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.alert-success { background-color: rgba(23,201,100,0.1); color: #15803d; border: 1px solid rgba(23,201,100,0.2); }
.alert-danger { background-color: rgba(243,18,96,0.1); color: #be123c; border: 1px solid rgba(243,18,96,0.2); }
.alert-warning { background-color: rgba(245,165,36,0.1); color: #a16207; border: 1px solid rgba(245,165,36,0.2); }

/* Nav styles */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nav-text);
    border-radius: 10px;
    transition: all 0.15s;
    text-decoration: none;
}
.nav-link:hover {
    background-color: var(--nav-hover);
    color: var(--content-1);
}
.nav-link.active {
    background-color: var(--color-primary-50);
    color: var(--nav-text-active);
}

/* Utility */
.mobile-menu { display: none; }
.mobile-menu.active { display: block; }
.language-dropdown { display: none; }
.language-dropdown.active { display: block; }

/* Smooth transitions */
.card, .btn, .input-field, .badge, .nav-link, .tab-item {
    transition: all 0.2s ease;
}

/* --- Компактная таблица (.table-compact) ---
   Для широких таблиц вроде списка серверов на дашборде: 12 колонок при
   коротком содержимом (2-12 символов) не влезали без горизонтальной
   прокрутки. Ширину съедали боковые padding по 1rem и uppercase +
   letter-spacing у заголовков. Ограничено десктопом: на ≤640px таблица
   и так превращается в карточки блоком мобильной адаптации ниже.       */
@media (min-width: 641px) {
    .table-compact thead th {
        padding: 0.5rem 0.375rem;
        font-size: 0.6875rem;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .table-compact tbody td {
        padding: 0.5rem 0.375rem;
    }
    .table-compact thead th:first-child,
    .table-compact tbody td:first-child {
        padding-left: 0.75rem;
    }
    .table-compact thead th:last-child,
    .table-compact tbody td:last-child {
        padding-right: 0.75rem;
    }
}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (≤640px)
   ============================================================ */

/* --- Таблицы → карточки ---
   Разметка не меняется: каждой <td> проставляется data-label с
   названием колонки, и на узких экранах строка превращается в
   карточку «подпись → значение». Так не нужна горизонтальная
   прокрутка, а на десктопе таблица остаётся таблицей.
   Применяется только к .table-hero внутри .table-cards.       */
@media (max-width: 640px) {
    .table-cards .table-hero,
    .table-cards .table-hero tbody,
    .table-cards .table-hero tfoot,
    .table-cards .table-hero tr,
    .table-cards .table-hero td {
        display: block;
        width: 100%;
    }
    .table-cards .table-hero thead {
        display: none; /* заголовки переезжают в data-label */
    }
    .table-cards .table-hero tbody tr,
    .table-cards .table-hero tfoot tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--divider);
        border-radius: 12px;
        background: var(--bg-card);
        padding: 0.25rem 0;
        overflow: hidden;
    }
    .table-cards .table-hero tbody tr:hover {
        background: var(--bg-card); /* ховер на тач-экранах только мешает */
    }
    .table-cards .table-hero tbody td,
    .table-cards .table-hero tfoot td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.5rem 0.875rem;
        border-bottom: 1px solid var(--divider);
        text-align: right;
        min-height: 2.5rem;
    }
    .table-cards .table-hero tbody td:last-child,
    .table-cards .table-hero tfoot td:last-child {
        border-bottom: none;
    }
    .table-cards .table-hero tbody td::before,
    .table-cards .table-hero tfoot td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        font-size: 0.6875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--content-4);
        text-align: left;
    }
    /* ячейка без подписи (кнопки действий) занимает всю ширину */
    .table-cards .table-hero tbody td[data-label=""]::before,
    .table-cards .table-hero tbody td:not([data-label])::before,
    .table-cards .table-hero tfoot td[data-label=""]::before,
    .table-cards .table-hero tfoot td:not([data-label])::before {
        content: none;
    }
    /* ячейка «нет данных» (colspan) — по центру, без подписи */
    .table-cards .table-hero tbody td[colspan]::before {
        content: none;
    }
    .table-cards .table-hero tbody td[colspan] {
        justify-content: center;
        text-align: center;
    }
    .table-cards .table-hero tbody td.cell-actions,
    .table-cards .table-hero tfoot td.cell-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.375rem;
        background: var(--bg-badge);
    }

    /* --- Общие правила для узких экранов --- */

    /* тап-цели: минимум 40px по высоте */
    .btn { min-height: 2.25rem; }
    .btn-sm { min-height: 2rem; padding: 0.375rem 0.625rem; }

    /* формы не должны вызывать зум в iOS — нужен шрифт ≥16px */
    .input-field, select.input-field, textarea.input-field { font-size: 16px; }

    /* вкладки прокручиваются вбок, а не ломают вёрстку */
    .tabs-scroll {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs-scroll::-webkit-scrollbar { display: none; }
    .tabs-scroll .tab-item { white-space: nowrap; flex: 0 0 auto; }

    /* модалки во всю ширину с отступами */
    .modal-panel { width: 100%; max-width: 100%; margin: 0 0.5rem; }

    /* карточки статистики — компактнее */
    .card { border-radius: 12px; }
}

/* Планшеты: таблицы остаются, но с прокруткой если не влезают */
@media (min-width: 641px) and (max-width: 1024px) {
    .table-scroll-md { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}