/* ==================== ROOT VARIABLES (ADMIN THEME) ==================== */
:root {
    --color-bg-dark: #07090f;
    --color-bg-darker: #020309;
    --color-bg-card: rgba(10, 12, 19, 0.96);
    --color-primary: #C43F2B;
    --color-primary-dark: #962f20;
    --color-accent: #ff7a3c;
    --color-text-main: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-border: rgba(255, 255, 255, 0.08);

    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    --clip-angle-br: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);

    /* Navbar фиксированный — на эту же величину отступает контент. Держим одним числом,
       иначе компенсация расходится с реальной высотой и под шапкой копится пустота. */
    --navbar-height: 49px;
}

/* ==================== RESET & BASE ==================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(circle at top left, rgba(196, 63, 43, 0.25), transparent 55%),
        radial-gradient(circle at bottom right, rgba(10, 10, 10, 0.9), transparent 55%),
        linear-gradient(135deg, #181b22 0%, #07090f 40%, #050608 100%);
    background-size: 48px 48px, 48px 48px, auto, auto, auto;
    color: var(--color-text-main);
    line-height: 1.5;
    min-height: 100vh;
}

/* ==================== LOADER OVERLAY ==================== */
.loader-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95));
    z-index: 9999;
}

.loader {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    animation: loader-spin 0.8s linear infinite;
    box-shadow: 0 0 18px rgba(196, 63, 43, 0.6);
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

ul {
    list-style: none;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ==================== NAVBAR ==================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    min-height: var(--navbar-height);
    box-sizing: border-box;
    padding: 0.9rem 2rem;
    background: rgba(4, 6, 10, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border);
}

.logo {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-main);
    white-space: nowrap;
    display: flex;
    align-items: center;
    line-height: 1;
}

.logo-link {
    color: var(--color-primary);
}

.logo-separator {
    margin: 0 0.2rem;
    opacity: 0.6;
}

.logo-current {
    font-size: 1.2rem;
    letter-spacing: 0.02em;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 2rem;
    height: 100%;
    margin-bottom: 0rem;
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.user-button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.9rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    height: 100%;
}

.user-button:hover {
    border-color: var(--color-border);
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.03);
}

.dropdown-arrow {
    font-size: 0.7rem;
    opacity: 0.7;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 0.4rem 0;
    background: rgba(10, 12, 19, 0.98);
    border: 1px solid var(--color-border);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
    display: none;
}

.nav-item:hover > .dropdown-menu {
    display: block;
}

.user-dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-menu li a,
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.dropdown-menu li a:hover,
.dropdown-item:hover {
    background: rgba(196, 63, 43, 0.15);
    color: #ffffff;
}

.user-dropdown {
    margin-left: auto;
    display: flex;
    align-items: center;
    position: relative;
}

.user-dropdown > .dropdown-menu {
    right: 0;
    left: auto;
}

/* ==================== LAYOUT / MAIN CONTAINER ==================== */
.main-container {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 1.5rem 2rem 3rem;
    margin-top: var(--navbar-height);
}

.admin-footer {
    padding: 0.6rem 2rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(4, 6, 10, 0.96);
}

.admin-footer-left,
.admin-footer-center,
.admin-footer-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-footer-brand {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.admin-footer-separator {
    opacity: 0.6;
}

.admin-footer-center-link {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}

.admin-footer-center-link:hover {
    color: var(--color-text-main);
}

.admin-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-secondary);
}

.admin-footer-link i {
    color: #3ddc84;
}

.admin-footer-link:hover {
    color: var(--color-text-main);
}

/* В Android-приложении (WebView-обёртка, проект app_Admin) на главной подвала нет:
   это не сайт — ссылки «site/partners» и скачивание APK там бессмысленны, а высота
   экрана нужна карточкам. Класс is-app ставит скрипт в index.html по User-Agent. */
html.is-app .page--home .admin-footer {
    display: none;
}

.main-content {
    width: 100%;
    max-width: 1400px;
}

/* ==================== LOGIN / AUTH PAGE ==================== */
.auth-page {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.auth-card {
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 1.4rem 1.6rem 1.2rem;
}

.auth-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.auth-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, rgba(196,63,43,0.5), transparent);
    color: var(--color-text-main);
}

.auth-title {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-subtitle {
    margin: 0.15rem 0 0 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* Правила самого .auth-remember лежат рядом с .settings-check: там они
   должны перебивать align-items: center, а побеждает то, что ниже по файлу. */


.auth-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* ==================== NODES (SERVERS SETTINGS) ==================== */
.nodes-header {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
}

.nodes-header:has(> .nodes-header-actions:only-child) {
    justify-content: flex-end;
}

.nodes-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.nodes-header-actions .btn-action.btn-icon {
    padding: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    letter-spacing: 0;
}

.nodes-header-actions .btn-action.btn-icon:hover:not(:disabled) {
    background: rgba(196, 63, 43, 0.12);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.nodes-header-actions .btn-action.btn-icon i {
    font-size: 0.9rem;
}

.nodes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.nodes-grid--nodes-page {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.node-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.7rem 0.8rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 320px;
}

.nodes-grid--nodes-page .node-card {
    width: auto;
    min-width: 0;
}

.node-card-header {
    display: flex;
    /* Номер и имя — одной группой слева, статус прижат вправо (при space-between имя уезжало в центр). */
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}

.node-card-header .node-status {
    margin-left: auto;
}

.node-name {
    font-size: 0.9rem;
    font-weight: 600;
}

/* ==================== НАСТРОЙКИ УВЕДОМЛЕНИЙ (/profile/telegram) ==================== */
.notify-settings {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.notify-settings-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.notify-settings-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(255, 186, 89, 0.4);
    background: rgba(255, 186, 89, 0.08);
    clip-path: var(--clip-angle-br);
    font-size: 0.78rem;
    color: #ffce8a;
}

.notify-group {
    margin-bottom: 1rem;
}

.notify-group-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    opacity: 0.75;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.notify-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.2rem;
}

.notify-item + .notify-item {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.notify-item-control {
    flex: 0 0 1.1rem;
    display: flex;
    justify-content: center;
    padding-top: 0.15rem;
}

.notify-item-control input {
    accent-color: #95C443;
}

.notify-item-lock {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.notify-item-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.notify-item-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.notify-item-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.notify-item-badge {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Заблокированный пункт остаётся видимым: понятно, что опция есть и почему молчит. */
.notify-item.is-locked .notify-item-title,
.notify-item.is-locked .notify-item-desc {
    opacity: 0.6;
}

/* ---- Выключенная нода: остаётся в списке, но видно, что она выведена из работы ---- */
.node-card--disabled {
    opacity: 0.65;
    border-style: dashed;
}

.node-card--disabled:hover {
    opacity: 1;
}

.node-status.disabled {
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

/* ---- Модалка настроек ноды ---- */
.node-settings-toggle {
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    clip-path: var(--clip-angle-br);
}

.node-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.node-toggle input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
    accent-color: #95C443;
}

.node-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.node-toggle-title {
    font-size: 0.85rem;
    font-weight: 600;
}

.node-toggle-hint {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.node-settings-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.node-settings-footer .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Опасные действия в той же строке, но за разделителем — чтобы не нажать их мимоходом. */
.node-settings-danger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 0.75rem;
    border-left: 1px solid var(--color-border);
}

.node-settings-footer .btn-icon-only {
    padding: 0.4rem 0.6rem;
    min-width: 2.3rem;
    justify-content: center;
    gap: 0;
}

/* Нужна, чтобы подсказка работала над заблокированной кнопкой. */
.btn-hint-wrap {
    display: inline-flex;
}

.node-settings-danger .btn-danger {
    border-color: rgba(196, 63, 43, 0.6);
    color: #ff8a6b;
}

.node-settings-danger .btn-danger:hover:not(:disabled) {
    background: rgba(196, 63, 43, 0.2);
    border-color: var(--color-primary);
}

.node-settings-danger .btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.modal-title .node-index {
    margin-right: 0.5rem;
}

@media (max-width: 700px) {
    .node-settings-footer .btn-icon-only {
        flex: 0 0 auto;
    }
}

/* Порядковый номер карточки: ноды идут стабильным списком, а не в порядке создания. */
.node-index {
    flex: 0 0 auto;
    min-width: 1.35rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.nodes-header-actions .btn-action.btn-icon.is-busy i {
    animation: loader-spin 0.8s linear infinite;
}

.node-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.node-footer-row {
    margin-top: 0.35rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.node-metrics {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.7rem;
}

.node-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-secondary);
}

.node-metric i {
    color: var(--color-primary);
    font-size: 0.8rem;
}

.node-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.node-actions .btn-action-compact {
    min-width: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.node-actions .btn-action-compact i {
    font-size: 0.8rem;
}

.node-update-status {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.node-update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.node-update-percent {
    font-family: "Share Tech Mono", monospace;
}

.node-progress {
    width: 100%;
    height: 7px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.node-progress-fill {
    height: 100%;
    transition: width 0.25s ease;
}

.node-progress-fill.is-running {
    background: linear-gradient(90deg, #3f8efc, #67c8ff);
}

.node-progress-fill.is-completed {
    background: linear-gradient(90deg, #5aa835, #95c443);
}

.node-progress-fill.is-failed {
    background: linear-gradient(90deg, #b13a2a, #c43f2b);
}

.node-progress-fill.is-cancelled {
    background: linear-gradient(90deg, #6b6f79, #9aa0ad);
}

.node-update-message {
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--color-text-secondary);
}

@media (max-width: 1400px) {
    .nodes-grid--nodes-page {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .nodes-grid--nodes-page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .nodes-grid--nodes-page {
        grid-template-columns: 1fr;
    }
}

.node-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    border: 1px solid var(--color-border);
}

.node-status.online {
    color: #95C443;
    border-color: #95C443;
}

.node-status.offline {
    color: #C43F2B;
    border-color: #C43F2B;
}

.node-card-body {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.node-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.node-line .label {
    opacity: 0.7;
}

.node-line .value {
    font-family: "Share Tech Mono", monospace;
}

.nodes-modal {
    max-width: 720px;
}

/* ==================== ОКНО БЭКАПОВ НОДЫ ====================
   Первая редакция окна не имела ни потолка по высоте, ни прокрутки, а под каждым полем
   висело по абзацу пояснения. На ноутбучном экране оно не помещалось целиком - вместе
   с крестиком и кнопкой «Сохранить». Здесь исправлено два разных дефекта:
   геометрия (потолок и прокрутка тела) и плотность (пояснения ушли в подсказку поля,
   а поля выстроены в сетку, а не в две колонки во всю ширину). */
.modal-content.nbm-modal {
    max-width: 780px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

/* Прокручивается только тело: шапка с крестиком обязана остаться на экране,
   иначе закрыть окно можно лишь щелчком по подложке, а это не очевидно. */
.nbm-body {
    padding: 0.8rem 0.9rem 1rem;
    overflow-y: auto;
    min-height: 0;
}

.nbm-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.9rem 0 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}

.nbm-section:first-child {
    margin-top: 0;
}

.nbm-section--split {
    justify-content: space-between;
}

.nbm-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.nbm-section-actions {
    display: inline-flex;
    gap: 0.35rem;
}

/* Сетка сама решает, сколько колонок влезет: полей семь, и жёсткие две колонки
   растягивали короткие числовые поля на пол-окна. */
.nbm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem 0.6rem;
}

.nbm-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.5rem 0.6rem;
    margin-top: 0.6rem;
}

.nbm-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    cursor: help;
}

.nbm-field > span {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.nbm-field .input-field {
    width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
}

.nbm-field textarea.input-field {
    resize: vertical;
    line-height: 1.35;
}

.nbm-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: var(--color-text-main);
    cursor: pointer;
}

.nbm-check input {
    accent-color: #95C443;
    flex: 0 0 auto;
}

.nbm-hint {
    margin: 0.4rem 0 0;
    font-size: 0.66rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: 0;
}

/* Предупреждение показывается только когда оно верно: выключенные бэкапы или выключенный
   вывоз. Постоянная плашка на этом месте была бы фоном, который перестают читать. */
.nbm-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.55rem;
    border-left: 2px solid #C43F2B;
    background: rgba(196, 63, 43, 0.1);
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--color-text-main);
}

.nbm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.nbm-restore {
    margin: 0.6rem 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(196, 63, 43, 0.5);
    background: rgba(196, 63, 43, 0.08);
}

.nbm-restore-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.nbm-restore .nbm-check {
    display: flex;
    margin-top: 0.35rem;
}

.nbm-table td,
.nbm-table th {
    padding: 0.4rem 0.55rem;
    font-size: 0.75rem;
}

/* Обёртка таблиц бэкапов. Своя, а не .wallet-table-wrap, по одной конкретной причине:
   у той ниже 900px стоит display:none - страница кошелька показывает вместо таблицы
   карточки. Любая другая страница, взявшая ту обёртку, теряет таблицу на телефоне
   целиком и молча, без единого сообщения. Здесь таблица остаётся и уезжает вбок
   прокруткой, как того требует правило про обязательную мобильную адаптацию. */
.backup-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.backup-table-wrap .wallet-table {
    min-width: 440px;
}

.nbm-note {
    margin: 0.6rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.65rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
    opacity: 0.8;
}

@media (max-width: 640px) {
    .modal-content.nbm-modal {
        max-height: 92vh;
    }

    .nbm-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}

.nodes-token-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.nodes-token-row .btn-action {
    white-space: nowrap;
}

/* ==================== DASHBOARD GRID (HOME) ==================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
}

/* ==================== WALLET PAGE ==================== */
.wallet-page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.wallet-page-tab {
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    line-height: 1.2;
}

.wallet-page-tab:hover {
    color: var(--color-text-primary);
    border-color: var(--color-accent, #c43f2b);
}

.wallet-page-tab.active {
    color: var(--color-text-primary);
    border-color: var(--color-accent, #c43f2b);
    background: rgba(196, 63, 43, 0.15);
}

.backup-db-tabs {
    margin-bottom: 1rem;
    /* Фильтр по базе стоит в этом же ряду и по высоте отличается от вкладок. */
    align-items: center;
}

.backup-stub-card {
    margin-top: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.backup-stub-text {
    margin: 0.5rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.94rem;
    line-height: 1.45;
}

.wallet-backups-hint {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.85rem;
    line-height: 1.45;
}

.wallet-backups-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

.wallet-catalog-hint {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.85rem;
    line-height: 1.45;
}

.wallet-catalog-subtabs {
    margin-bottom: 0.65rem;
}

.wallet-catalog-editor {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

.wallet-catalog-editor-title {
    font-size: 0.9rem;
    margin: 0 0 0.65rem;
    font-weight: 600;
}

.wallet-catalog-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.wallet-catalog-checkbox-row {
    display: flex;
    align-items: center;
}

.wallet-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
}

.wallet-header {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
}

.wallet-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.wallet-filters .input-group {
    flex: 1 1 180px;
    min-width: 0;
}

.wallet-paging {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wallet-page-info {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.wallet-table-wrap {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.75rem 0.9rem;
}

.wallet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.wallet-table th,
.wallet-table td {
    padding: 0.45rem 0.35rem;
    text-align: left;
}

.wallet-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.wallet-table tbody tr:nth-child(odd) {
    background: rgba(255,255,255,0.02);
}

.wallet-table tbody tr:hover {
    background: rgba(196, 63, 43, 0.13);
}

.wallet-table th.sortable {
    cursor: pointer;
}

.admin-reward-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.2);
}

.admin-reward-icon-preview {
    width: 60px;
    height: 60px;
}

.players-row-clickable {
    cursor: pointer;
}

.players-row-clickable:hover {
    background: rgba(196, 63, 43, 0.14);
}

/* ---------- Игроки: поиск и фильтры ---------- */

/* Поиск и кнопки одной строкой; на телефоне поиск занимает всю ширину, кнопки уходят под него. */
.plist-toolbar {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}

.plist-search {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
    display: flex;
}

/* Два класса намеренно: .input-field объявлен ниже по файлу и задаёт padding шорткатом,
   при равной специфичности он затёр бы отступ под иконку и текст полез бы на неё.
   Префикс plist- тоже намеренный: players-* уже занят тулбаром на странице сервера. */
.plist-search .plist-search-input {
    width: 100%;
    padding-left: 2.2rem;
    padding-right: 2.1rem;
}

.plist-search-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.plist-search-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: .25rem .35rem;
    font-size: .85rem;
}

.plist-search-clear:hover {
    color: var(--color-primary);
}

.plist-toolbar .btn-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.plist-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    background: var(--color-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
}

.plist-filter-caret {
    font-size: .65rem;
    opacity: .7;
}

.plist-filters {
    margin-top: .5rem;
    padding: .85rem .9rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    clip-path: var(--clip-angle-br);
}

.plist-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .75rem 1rem;
}

.plist-filter-block--wide {
    grid-column: span 2;
}

.plist-filter-label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-secondary);
    margin-bottom: .3rem;
}

.plist-filter-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.plist-filter-row .input-field {
    flex: 1 1 0;
    min-width: 90px;
}

.plist-filter-text {
    flex: 2 1 140px;
}

.plist-filter-dash {
    color: var(--color-text-secondary);
    font-size: .8rem;
}

.plist-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .4rem;
}

.plist-preset,
.plist-mode {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .28rem .55rem;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}

.plist-preset:hover,
.plist-mode:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, .2);
}

.plist-mode.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.plist-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    margin-top: .6rem;
}

.plist-found {
    font-size: .78rem;
    color: var(--color-text-secondary);
}

.plist-found strong {
    color: var(--color-text-main);
}

.plist-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(196, 63, 43, .16);
    border: 1px solid rgba(196, 63, 43, .45);
    color: var(--color-text-main);
    font-family: inherit;
    font-size: .72rem;
    padding: .25rem .5rem;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}

.plist-chip:hover {
    background: rgba(196, 63, 43, .28);
}

.plist-chip i {
    font-size: .65rem;
    opacity: .8;
}

.plist-reset {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: .72rem;
    text-decoration: underline;
    cursor: pointer;
}

.plist-reset:hover {
    color: var(--color-primary);
}

.plist-sort-mark {
    font-size: .6rem;
    margin-left: .25rem;
    color: var(--color-primary);
}

/* Перезагрузка списка не подменяет таблицу текстом — просто гасит её, чтобы не моргало. */
.plist-busy {
    opacity: .55;
    transition: opacity .12s linear;
    pointer-events: none;
}

@media (max-width: 720px) {
    .plist-filter-block--wide {
        grid-column: span 1;
    }

    .plist-toolbar .btn-action {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.players-modal {
    width: min(980px, 96vw);
    max-width: 980px;
}

.players-modal-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--color-border);
    background: rgba(0,0,0,.18);
    padding: .6rem;
}

.players-avatar {
    width: 58px;
    height: 58px;
    border-radius: 0;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.15);
}

.players-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.players-steam {
    font-size: .8rem;
    color: var(--color-text-secondary);
}

.players-modal-meta {
    margin-top: .6rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
}

.players-modal-meta-item {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.02);
    padding: .35rem .45rem;
    min-height: 42px;
}

.players-modal-meta-label {
    display: block;
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.players-modal-meta-value {
    display: block;
    font-size: .78rem;
    color: var(--color-text-primary);
    line-height: 1.2;
    word-break: break-word;
}

.players-reward-grant {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: end;
}

.players-reward-grant .input-group {
    flex: 1 1 auto;
}

.players-note-indicator {
    color: #f5c04b;
    font-size: .95rem;
}

.players-note-tab {
    margin-top: .35rem;
}

.players-note-textarea {
    min-height: 180px;
    resize: vertical;
}

.players-note-actions {
    margin-top: .55rem;
}

.players-manage-tab {
    margin-top: .4rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .players-modal-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wallet-mono {
    font-family: "Share Tech Mono", monospace;
}

.wallet-modal-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.wallet-modal-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.wallet-modal-mode-hint {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.wallet-modal-balance-compact {
    margin-bottom: 0.75rem;
}

.wallet-modal-balance-compact .wallet-steam {
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.wallet-modal-balance-compact .wallet-steam-id {
    font-family: "Share Tech Mono", monospace;
    color: var(--color-text-main);
}

.wallet-modal-balance-compact .wallet-bal-inline {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 0.2rem;
    line-height: 1.35;
}

.wallet-modal-balance-compact .wallet-bal-inline strong {
    color: var(--color-text-main);
}

.wallet-modal-balance-compact .wallet-bal-divider {
    opacity: 0.45;
    padding: 0 0.2rem;
}

.wallet-modal-balance-compact .wallet-bal-total {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

@media (min-width: 769px) {
    .modal-content.wallet-balance-modal {
        max-width: 624px;
    }
}

.wallet-history-scroll {
    max-height: min(380px, 46vh);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.wallet-balance-modal .wallet-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    table-layout: fixed;
}

.wallet-balance-modal .wallet-history-table thead th {
    text-transform: none;
    letter-spacing: normal;
}

.wallet-balance-modal .wallet-history-table th,
.wallet-balance-modal .wallet-history-table td {
    padding: 0.32rem 0.22rem;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}

.wallet-modal-history-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.wallet-modal-history-pager span {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wallet-analytics-sort-label {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    padding-top: 0.15rem;
}

.wallet-analytics-table td {
    vertical-align: top;
}

.wallet-analytics-kpis {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.wallet-analytics-kpi-card {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.6rem 0.7rem;
}

.wallet-analytics-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    margin-bottom: 0.35rem;
}

.wallet-analytics-kpi-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.wallet-analytics-grid {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.wallet-analytics-card {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.65rem 0.75rem;
}

.wallet-analytics-card h4 {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.wallet-analytics-card-wide {
    grid-column: 1 / -1;
}

.wallet-analytics-empty {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.wallet-analytics-bar-row {
    margin-bottom: 0.45rem;
}

.wallet-analytics-bar-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.18rem;
}

.wallet-analytics-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
}

.wallet-analytics-bar-fill {
    height: 100%;
    min-width: 2px;
    background: linear-gradient(90deg, #c43f2b, #ff7a3c);
}

@media (max-width: 1080px) {
    .wallet-analytics-kpis {
        grid-template-columns: 1fr;
    }

    .wallet-analytics-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== PARTNERS PAGE ==================== */
.partners-header {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.partner-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    text-align: left;
    cursor: pointer;
}

.partner-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.partner-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.partner-steamid {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.partner-percent {
    text-align: right;
    font-size: 0.78rem;
}

.partner-percent .label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.partner-percent .value {
    font-weight: 600;
}

.partner-card-body {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.partner-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.partners-payouts-wrap {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.75rem 0.9rem;
}

.partners-payouts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.partners-payouts-table th,
.partners-payouts-table td {
    padding: 0.4rem 0.35rem;
    text-align: left;
}

.partners-payouts-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.partners-modal {
    max-width: 900px;
}

/* ==================== VERSIONS PAGE ==================== */
.version-container {
    display: flex;
    gap: 1.25rem;
    margin-top: 1rem;
}

.version-column {
    flex: 1 1 0;
    min-width: 0;
}

.version-table-container {
    margin-top: 0.9rem;
    overflow-x: auto;
}

.version-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.version-table td {
    padding: 0.25rem;
    vertical-align: top;
}

.version-block {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.version-block:hover {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.18);
    transform: translateY(-1px);
}

/* Метрики версии: скачивания, вес, тег. Цвета из семантики палитры
   (AI/07-Design-and-Frontend.md): зелёный — «плюс/рост», золотой — «вес, обрати внимание»,
   синий — нейтральная информация. Одинаковые серые строки читались как один блок текста,
   и глазом было не найти нужное число. */
.version-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.65rem;
    margin: 0.4rem 0 0 0;
    font-size: 0.9em;
}

.version-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.version-meta-downloads { color: #95C443; }
.version-meta-weight    { color: #e6b432; }

/* Тег — самая необязательная из трёх метрик, поэтому кегль на четверть меньше
   соседей: он не должен спорить за внимание со скачиваниями и весом. */
.version-meta-tag {
    color: #7ba3ff;
    font-size: 0.75em;
}

/* Заметка к версии лаунчера. Раньше шла тем же кеглем, что и всё остальное, и три
   абзаца changelog растягивали карточку на пол-экрана: в списке из десяти версий
   страница превращалась в простыню. Текст режется в коде до предела символов
   (Versions.razor, ShortNote), а здесь ограничивается ещё и высотой — на случай
   длинного слова без пробелов. Полный текст остаётся в title и в модалке правки. */
.version-note {
    margin: 0.4rem 0 0 0;
    padding: 0.45rem 0.55rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    font-size: 0.78em;
    line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Модалка «Задать версию» ---------------------------------------------
   У блока .version-preview не было ни одного правила: предпросмотр рисовался
   голыми абзацами и от списка версий ничем не отличался. */

.version-current-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0.5rem 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}

.version-current-line strong {
    color: #4ecdc4;
    font-size: 1rem;
}

.version-preview {
    margin-top: 0.9rem;
    padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
}

.version-preview-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.version-preview-version {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.version-preview-date { color: var(--color-text-secondary); font-size: 0.85rem; }

/* Заметку в модалке показываем целиком — её здесь и читают перед сменой версии, —
   но в окне с прокруткой: длинный changelog иначе растягивает модалку за экран. */
.version-preview-note {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    max-height: 9rem;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.25);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Отключённая кнопка без объяснения выглядит поломкой, а не отказом. */
.version-apply-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.9rem 0 0 0;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

/* Подсказка живёт в футере слева от кнопок: место там всё равно пустует.
   Перенос строк разрешён, иначе длинный текст выдавит кнопки за край узкой модалки. */
.modal-footer--hint {
    flex-wrap: wrap;
    align-items: center;
}

.modal-footer--hint .version-apply-hint {
    margin: 0 auto 0 0;
    flex: 1 1 12rem;
    min-width: 0;
    line-height: 1.3;
}

.game-jobs-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.game-jobs-strip .version-block {
    flex: 0 1 260px;
    cursor: default;
}

.game-jobs-strip .version-block:hover {
    transform: none;
    background: var(--color-bg-card);
}

.job-card-progress {
    border-color: #ffb347;
    box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.25) inset;
}

.job-card-delete {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.2) inset;
    background: rgba(255, 107, 107, 0.04);
}

.job-card-failed {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.25) inset;
}

.job-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.job-progress-bar {
    height: 100%;
    background: #ffb347;
    transition: width 0.3s ease;
}

.job-cancel-btn {
    padding: 0.25rem 0.6rem;
    font-size: 0.8em;
}

.versions-distribution {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.versions-column {
    flex: 1 1 0;
    min-width: 260px;
}

.versions-subtitle {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.versions-distribution-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .version-container {
        flex-direction: column;
    }
}

/* ==================== ACCOUNTS PAGE ==================== */
.accounts-header-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.accounts-table-wrap {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.75rem 0.9rem;
}

.accounts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.accounts-table th,
.accounts-table td {
    padding: 0.45rem 0.35rem;
    text-align: left;
}

.accounts-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.accounts-table tbody tr:nth-child(odd) {
    background: rgba(255,255,255,0.02);
}

.accounts-table tbody tr:hover {
    background: rgba(196, 63, 43, 0.13);
}

.accounts-table td.actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .accounts-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.55rem 0.6rem;
    }

    .accounts-table {
        min-width: 520px;
    }

    .accounts-table th,
    .accounts-table td {
        padding: 0.32rem 0.22rem;
        font-size: 0.74rem;
    }

    .accounts-header-row {
        justify-content: stretch;
    }

    .accounts-header-row .btn-action {
        width: 100%;
        justify-content: center;
    }

    .accounts-table td.actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .accounts-table td.actions .btn-icon span {
        display: none;
    }

    .accounts-table td.actions .btn-icon {
        padding: 0.32rem 0.42rem;
        min-width: 2.2rem;
        justify-content: center;
    }

    .wallet-header {
        flex-direction: column;
        align-items: stretch;
    }

    .wallet-filters {
        flex-direction: column;
    }

    .wallet-filters .input-group {
        flex: 1 1 auto;
    }

    .wallet-paging {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
    }

    .wallet-page-info {
        flex: 1 0 100%;
        order: -1;
        text-align: center;
        font-size: 0.72rem;
    }

    .wallet-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.55rem 0.6rem;
    }

    .wallet-table {
        min-width: 300px;
    }

    .wallet-table th,
    .wallet-table td {
        padding: 0.32rem 0.24rem;
        font-size: 0.72rem;
    }

    .wallet-balance-modal .modal-footer {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .wallet-balance-modal .modal-footer .btn-action {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        justify-content: center;
    }
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.btn-icon i {
    font-size: 0.8rem;
}

.btn-icon.edit {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.btn-icon.edit:hover {
    background: var(--color-primary);
}

.btn-icon.delete {
    border-color: #C43F2B;
    color: #ffd4c8;
}

.btn-icon.delete:hover {
    background: rgba(196, 63, 43, 0.85);
    color: #fff3ee;
}

.accounts-permissions {
    margin-top: 1rem;
}

.permissions-grid {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.perm-group {
    border: 1px solid var(--color-border);
    background: #05070c;
    padding: 0.6rem 0.75rem;
}

.perm-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.perm-group-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.perm-group-toggle {
    display: flex;
    gap: 0.25rem;
}

.perm-toggle {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.45rem;
    cursor: pointer;
}

.perm-toggle.is-active {
    border-color: var(--color-primary);
    color: var(--color-text-main);
    background: rgba(63, 136, 255, 0.14);
}

.perm-items {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.perm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.perm-item-badge {
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    border-radius: 2px;
    border: 1px solid var(--color-border);
}

.perm-item-badge-off {
    color: #C43F2B;
    border-color: #C43F2B;
}

.perm-item-badge-on {
    color: #95C443;
    border-color: #95C443;
}

.perm-table-wrap {
    margin-top: 0.45rem;
    border: 1px solid var(--color-border);
    overflow-x: auto;
}

.perm-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.perm-table th,
.perm-table td {
    border: 1px solid var(--color-border);
    padding: 0.35rem 0.45rem;
    font-size: 0.76rem;
    vertical-align: middle;
}

.perm-table th {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.03);
}

.perm-inline-actions {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.accounts-modal .modal-body {
    max-height: 76vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.35rem;
}

.perm-edit-toolbar {
    margin: 0.5rem 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.perm-edit-toolbar .input-field {
    min-width: 18rem;
    max-width: 28rem;
}

.perm-groups-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.perm-group-collapse-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--color-text-main);
    cursor: pointer;
    padding: 0;
}

.perm-group-count {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

/* ==================== PROFILE PAGE ==================== */
.profile-account-cards {
    margin-top: 0.5rem;
}

.profile-flag {
    font-size: 0.85rem;
}

.profile-flag-on {
    color: #95C443;
}

.profile-flag-off {
    color: #C43F2B;
}

.profile-table-wrap {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.75rem 0.9rem;
    margin-top: 0.75rem;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-sessions-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.profile-sessions-table th,
.profile-sessions-table td {
    padding: 0.4rem 0.35rem;
    text-align: left;
}

.profile-sessions-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.profile-sessions-table tbody tr:nth-child(odd) {
    background: rgba(255,255,255,0.02);
}

.profile-sessions-table tbody tr:hover {
    background: rgba(196, 63, 43, 0.13);
}

.profile-session-current {
    border-left: 2px solid var(--color-primary);
}

.profile-mono {
    font-family: "Share Tech Mono", monospace;
}

.profile-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-status-current {
    color: var(--color-primary);
}

.profile-status-active {
    color: var(--color-text-secondary);
}

.profile-disabled {
    color: var(--color-text-secondary);
    opacity: 0.6;
    font-size: 0.8rem;
}

.profile-sessions-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.profile-section {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 768px) {
    .profile-table-wrap {
        padding: 0.55rem 0.6rem;
    }

    .profile-sessions-table {
        min-width: 560px;
        font-size: 0.74rem;
    }

    .profile-sessions-table th,
    .profile-sessions-table td {
        padding: 0.32rem 0.22rem;
    }

    .profile-sessions-table td {
        word-break: break-word;
        vertical-align: top;
    }

    .profile-mono {
        word-break: break-all;
    }

    .profile-sessions-actions {
        justify-content: stretch;
    }

    .profile-sessions-actions .btn-action {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.3;
        padding: 0.5rem 0.65rem;
        font-size: 0.74rem;
    }
}

.profile-perm-flag {
    font-size: 0.85rem;
}

.profile-perm-flag.on {
    color: #95C443;
}

.profile-perm-flag.off {
    color: #C43F2B;
}

.profile-2fa-qr-and-secret {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    margin: 0.6rem 0 0.8rem;
}

.profile-2fa-qr img {
    width: 140px;
    height: 140px;
    border: 1px solid var(--color-border);
    background: #05070c;
    padding: 6px;
}

.profile-2fa-secret {
    border: 1px solid var(--color-border);
    background: #05070c;
    color: var(--color-text-main);
    padding: 0.45rem 0.7rem;
    font-family: "Share Tech Mono", monospace;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    white-space: nowrap;
}

.profile-2fa-secret code {
    background: transparent;
    padding: 0;
}

.profile-2fa-secret:hover {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.18);
}

.profile-2fa-copy-hint {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--color-border);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ==================== GAME STORES / BALANCE PAGE ==================== */
.balance-steamid-row {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.balance-steamid-flex {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.balance-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.8rem 0.9rem;
    margin-top: 0.75rem;
}

.balance-card.not-found {
    text-align: center;
}

.balance-user-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.steam-avatar {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.steam-avatar.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    background: #05070c;
}

.balance-user-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
}

.balance-display {
    font-size: 0.85rem;
}

.operations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.operation-block {
    border: 1px solid var(--color-border);
    padding: 0.7rem;
}

.operation-block h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ==================== ECONS / MARKET ITEMS ==================== */
.econs-toolbar {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    align-items: flex-end;
}

.econs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: flex-end;
}

.econs-filters .input-group {
    min-width: 160px;
    flex: 0 1 160px;
}

.econs-search {
    flex: 0 1 220px;
}

/* Кнопка сортировки в фильтрах витрины: красная обводка, чтобы читалась как действие,
   а не как ещё одно поле ввода. Меню выпадает поверх сетки товаров. */
.econs-sort-wrap {
    position: relative;
}

.econs-sort-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.6rem;
    background: rgba(196, 63, 43, 0.1);
    border: 1px solid #C43F2B;
    clip-path: var(--clip-angle-br);
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
}

.econs-sort-btn:hover,
.econs-sort-btn.is-open {
    background: rgba(196, 63, 43, 0.24);
}

.econs-sort-btn > i:first-child {
    color: #C43F2B;
    font-size: 0.8rem;
}

.econs-sort-btn-text {
    flex: 1;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.econs-sort-caret {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

.econs-sort-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.econs-sort-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid #C43F2B;
    clip-path: var(--clip-angle-br);
    z-index: 61;
}

.econs-sort-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.econs-sort-option:hover {
    background: rgba(196, 63, 43, 0.2);
    color: var(--color-text-main);
}

.econs-sort-option.is-active {
    color: var(--color-text-main);
}

.econs-sort-option > i:first-child {
    width: 14px;
    font-size: 0.75rem;
    color: #C43F2B;
}

.econs-sort-check {
    margin-left: auto;
    font-size: 0.7rem;
    color: #95C443;
}

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

.econs-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.econs-select-all input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Витрина товаров: компактная квадратная карточка. Иконка занимает всю площадь,
   текст лежит поверх неё на градиентных подложках — так карточка вдвое меньше,
   но читается лучше, чем сеткой из плиток «label + value». */
.econs-grid {
    margin-top: 0.75rem;
    display: grid;
    /* auto-fill, а не auto-fit: при паре товаров колонки не растягиваются
       в гигантские квадраты (высота теперь завязана на ширину). */
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 0.6rem;
    width: 100%;
}

.econs-card {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.econs-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(196, 63, 43, 0.4);
    transform: translateY(-1px);
}

.econs-card.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px rgba(255, 122, 60, 0.4);
}

.econs-card-add {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.econs-add-icon {
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.4rem auto;
    font-size: 1.25rem;
}

.econs-add-text {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

/* ---- Иконка во всю карточку ---- */
.econs-card-media {
    position: absolute;
    inset: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.econs-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Скрытый товар видно по приглушённой иконке и красному глазу — отдельная надпись не нужна. */
.econs-card.is-hidden .econs-card-image {
    opacity: 0.4;
    filter: grayscale(0.6);
}

/* ---- Шапка: выделение, название, переключатель видимости ---- */
.econs-card-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.45rem 0.9rem;
    background: linear-gradient(180deg, rgba(4, 6, 12, 0.95) 0%, rgba(4, 6, 12, 0.72) 45%, rgba(4, 6, 12, 0.3) 75%, rgba(4, 6, 12, 0) 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.econs-card-checkbox {
    display: flex;
    flex: 0 0 auto;
}

.econs-card-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.econs-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.98rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.econs-visibility-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
}

.econs-visibility-btn:hover {
    color: var(--color-text-main);
}

.econs-visibility-btn.is-off {
    color: var(--color-primary);
}

.econs-visibility-btn.is-off:hover {
    color: #e35139;
}

/* ---- Подвал: слева цена и продажи, справа ID / редкость / тип ---- */
.econs-card-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 1.05rem 0.45rem 0.4rem;
    background: linear-gradient(0deg, rgba(4, 6, 12, 0.96) 0%, rgba(4, 6, 12, 0.8) 45%, rgba(4, 6, 12, 0.35) 75%, rgba(4, 6, 12, 0) 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.econs-card-money {
    min-width: 0;
}

.econs-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.25rem;
}

.econs-current-price,
.econs-new-price {
    font-weight: 700;
    font-size: 1.04rem;
    color: var(--color-text-main);
}

/* Новая цена всегда своей строкой — над ней остаются старая цена и процент. */
.econs-new-price {
    flex: 0 0 100%;
}

.econs-old-price {
    text-decoration: line-through;
    opacity: 0.55;
    font-size: 0.86rem;
}

.econs-discount-badge {
    font-size: 0.8rem;
    padding: 0 0.22rem;
    background: rgba(196, 63, 43, 0.25);
    color: var(--color-accent);
}

.econs-card-sales {
    font-size: 0.86rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.econs-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.econs-card-meta-rarity {
    font-weight: 600;
}

/* ID стоит первым и крупнее соседей: по нему товар сверяют с игрой чаще,
   чем смотрят редкость и тип. Селектор из двух классов намеренно — ниже
   по файлу лежит `.wallet-mono` со своим мелким серым кеглем, и одиночный
   класс проиграл бы ему по порядку. */
.econs-card-meta .econs-card-meta-id {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.econs-card-meta-type i {
    margin-right: 0.2rem;
    color: var(--color-accent);
}

.econs-empty {
    grid-column: 1 / -1;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--color-text-secondary);
}

.econs-empty-icon {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
    color: var(--color-text-secondary);
}

.modal-content.econs-modal {
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.econs-modal .modal-body {
    padding: 1rem 1.1rem 0.6rem;
    overflow-y: auto;
}

.modal-content.econs-bulk-modal {
    max-width: 640px;
}

.econs-bulk-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.econs-bulk-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ---------- Модалка товара: форма ---------- */
.econ-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Шапка формы: слева иконка с превью, справа название и высокое описание. */
.econ-form-head {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0.75rem 1.25rem;
    align-items: start;
}

.econ-form-icon {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.econ-icon-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #05070c;
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.econ-icon-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Битая ссылка на иконку: показываем пустую рамку, а не сломанный значок браузера. */
.econ-icon-preview img.is-broken {
    visibility: hidden;
}

.econ-form-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.econ-form-description {
    flex: 1;
}

.econ-form-description .input-field {
    min-height: 8.5rem;
    height: 100%;
    resize: vertical;
}

.econ-form-row {
    display: grid;
    gap: 0.75rem 1.25rem;
    align-items: start;
}

.econ-form-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.econ-form-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Редкость — короткий список, растягивать её на пол-формы незачем. */
.econ-form-row--rarity {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}

/* У bootstrap .input-group стоит flex-wrap: wrap. Как только у группы появляется
   заданная высота (описание тянется на всю колонку), колонка переполняется и
   переносится второй колонкой — подпись остаётся слева, поле уезжает вправо. */
.econ-form .input-group {
    flex-wrap: nowrap;
}

/* Календарь в модалке раскрывается в потоке (DatePicker Inline): тело модалки
   прокручивается, и обычный поповер там обрезало бы. */
.econ-form .xdate.inline .xdate-pop {
    position: static;
    width: 100%;
    margin-top: 0.25rem;
    box-shadow: none;
}

/* Чекбокс и счётчик ссылок в одну строку: справа от «Доступно в маркете» оставалось
   пустое место, а знать, кто на скин ссылается, нужно ровно в момент снятия с витрины. */
.econ-form-marketable {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    align-self: end;
    padding-bottom: 0.55rem;
    min-width: 0;
}

.econ-form-marketable .econ-form-check {
    align-self: auto;
    padding-bottom: 0;
}

.econ-form-usage {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: help;
    border-bottom: 1px dotted var(--color-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Чекбокс в одну строку с подписью: раньше .input-group ставил их в столбик. */
.econ-form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: end;
    padding-bottom: 0.55rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--color-text-main);
}

.econ-form-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ---------- Модалка товара: состав пака и кейса ---------- */
.contained-section {
    margin-top: 0.9rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.contained-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    background: none;
    border: none;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.contained-toggle i {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.contained-count {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
}

/* Сумма содержимого пака прижата вправо; стрелка-шеврон после неё встаёт вплотную,
   иначе два margin-left: auto поделили бы свободное место пополам. */
.contained-sum {
    margin-left: auto;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Набор дешевле, чем вернёт его состав при продаже: это не ошибка ввода, а дыра
   в экономике, поэтому цветом опасности и с подсказкой про цифры. */
.contained-warn {
    margin-left: 0.6rem;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-primary);
    white-space: nowrap;
    cursor: help;
}

.contained-warn i {
    margin-right: 0.3rem;
}

.contained-sum b {
    color: #95C443;
    font-weight: 600;
}

.contained-toggle .contained-sum ~ i {
    margin-left: 0.5rem;
}

.contained-body {
    padding: 0 0.7rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.contained-empty,
.contained-note {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.contained-note {
    color: var(--color-accent);
}

.contained-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.contained-table th {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    text-align: left;
    padding: 0.25rem 0.35rem;
    font-weight: 500;
}

.contained-table td {
    padding: 0.3rem 0.35rem;
    border-top: 1px solid var(--color-border);
    vertical-align: middle;
}

.contained-col-icon {
    width: 36px;
}

.contained-col-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: #05070c;
    border: 1px solid var(--color-border);
}

.contained-col-icon img.is-broken {
    visibility: hidden;
}

.contained-col-id {
    width: 70px;
    color: var(--color-text-secondary);
}

.contained-col-rarity {
    width: 100px;
}

/* Заголовок цены выравнивается по числам: у .contained-table th стоит text-align: left,
   и без этого правила подпись оставалась слева, а значения уходили вправо. */
.contained-col-price,
.contained-table th.contained-col-price {
    width: 80px;
    text-align: right;
}

.contained-col-weight {
    width: 90px;
}

.contained-col-weight .input-field {
    padding: 0.25rem 0.35rem;
    width: 100%;
}

.contained-col-chance {
    width: 70px;
    color: #95C443;
}

.contained-col-actions {
    width: 32px;
    text-align: right;
}

.contained-name {
    display: block;
}

.contained-type {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.contained-missing {
    color: var(--color-primary);
    font-size: 0.75rem;
}

.contained-remove {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.3rem;
}

.contained-remove:hover {
    color: var(--color-primary);
}

/* Выбор товара в состав: поиск + список, а не выпадающий список — скинов сотни. */
.contained-picker {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contained-picker-search {
    position: relative;
    display: flex;
    align-items: center;
}

.contained-picker-search > i {
    position: absolute;
    left: 0.55rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.contained-picker-search .input-field {
    flex: 1;
    min-width: 0;
    padding-left: 1.85rem;
    padding-right: 1.85rem;
}

.contained-picker-clear {
    position: absolute;
    right: 0.35rem;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.3rem;
}

.contained-picker-clear:hover {
    color: var(--color-primary);
}

.contained-picker-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.25);
}

.contained-picker-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.contained-picker-row:last-child {
    border-bottom: none;
}

.contained-picker-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.contained-picker-row img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    background: #05070c;
    border: 1px solid var(--color-border);
    flex: none;
}

.contained-picker-row img.is-broken {
    visibility: hidden;
}

.contained-picker-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contained-picker-rarity {
    width: 100px;
    flex: none;
    font-size: 0.75rem;
}

.contained-picker-id {
    width: 70px;
    flex: none;
    color: var(--color-text-secondary);
}

.contained-picker-price {
    width: 80px;
    flex: none;
    text-align: right;
}

.contained-picker-row > i {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    flex: none;
}

.contained-picker-row:hover > i {
    color: #95C443;
}

@media (max-width: 768px) {
    .econ-form-head {
        grid-template-columns: 1fr;
    }

    .econ-form-icon {
        max-width: 220px;
    }

    .econ-form-row--3,
    .econ-form-row--2,
    .econ-form-row--rarity {
        grid-template-columns: 1fr;
    }

    .econ-form-check {
        align-self: start;
        padding-bottom: 0;
    }

    /* На телефоне счётчик ссылок уезжает под чекбокс: в строку они не помещаются. */
    .econ-form-marketable {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        align-self: start;
        padding-bottom: 0;
    }

    /* На телефоне в строке выбора остаётся только название: редкость, ID и цена
       не помещаются и превращали строку в кашу. */
    .contained-picker-rarity,
    .contained-picker-id {
        display: none;
    }
}

/* ==================== EXPLORER / FILE BROWSER ==================== */
.explorer-header {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    align-items: flex-start;
}

.explorer-path {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.explorer-path-main {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    align-items: center;
    font-size: 0.82rem;
}

.explorer-path-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
}

.explorer-path-label i {
    color: var(--color-primary);
}

.explorer-path-value {
    font-family: "Share Tech Mono", monospace;
    font-size: 0.8rem;
    color: var(--color-text-main);
}

.explorer-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.78rem;
}

.explorer-breadcrumb-separator {
    opacity: 0.5;
}

.explorer-breadcrumb {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    padding: 0.15rem 0.45rem;
    cursor: pointer;
    border-radius: 2px;
}

.explorer-breadcrumb.active {
    background: rgba(196, 63, 43, 0.24);
    color: var(--color-text-main);
}

.explorer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
}

.explorer-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    background: #05070c;
}

.explorer-stat-icon {
    color: var(--color-accent);
    font-size: 0.85rem;
}

.explorer-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.explorer-stat-value {
    font-family: "Share Tech Mono", monospace;
}

.explorer-content {
    margin-top: 0.75rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.6rem 0.7rem;
}

.explorer-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.3rem;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.explorer-row:last-child {
    border-bottom: none;
}

.explorer-row-icon {
    width: 22px;
    display: flex;
    justify-content: center;
    color: var(--color-text-secondary);
}

.explorer-row-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.explorer-row-name {
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explorer-row-meta {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}

.explorer-row-arrow {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.explorer-row-dir,
.explorer-row-back {
    cursor: pointer;
}

.explorer-row-file {
    cursor: default;
}

.explorer-row-clickable {
    cursor: pointer;
}

.explorer-row-dir:hover,
.explorer-row-back:hover,
.explorer-row-clickable:hover {
    background: rgba(255, 255, 255, 0.03);
}

.file-viewer-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
}

.file-viewer-content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    width: 100%;
    max-width: 900px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.file-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.file-viewer-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.file-viewer-icon i {
    color: var(--color-primary);
}

.file-viewer-close {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1rem;
}

.file-viewer-body {
    padding: 0.8rem 0.9rem;
    overflow: auto;
}

.file-viewer-pre {
    margin: 0;
    font-family: "Share Tech Mono", monospace;
    font-size: 0.8rem;
    white-space: pre;
}

.loading {
    padding: 1rem 0.3rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.loading.error-text {
    color: #C43F2B;
}

.loading.empty-text {
    color: var(--color-text-secondary);
}

.no-data {
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.no-data-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
}

/* ==================== BACKUP PAGE ==================== */
.backup-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.9rem 1rem;
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.backup-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.backup-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.backup-last {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.backup-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0.75rem 0 0.6rem;
}

.backup-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    border-radius: 0;
    min-width: 140px;
    justify-content: center;
}

.backup-tab + .backup-tab {
    margin-left: -1px;
}

.backup-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-main);
}

.backup-tab.active {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.24);
    color: var(--color-text-main);
}

.backup-tab i {
    font-size: 0.9rem;
}

/* ==================== NEWS PAGE ==================== */
.section-stats {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.stat-chip i {
    color: var(--color-primary);
}

.news-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    gap: 0.6rem;
}

.news-controls-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.news-tabs {
    display: flex;
    gap: 0.4rem;
}

.news-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--color-border);
    background: transparent;
    padding: 0.4rem 0.75rem;
    font-family: inherit;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.news-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-main);
}

.news-tab.active {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.24);
    color: var(--color-text-main);
}

.tab-count {
    padding: 0 0.3rem;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.7rem;
}

.news-search {
    position: relative;
    display: flex;
    align-items: center;
}

.news-search > i {
    position: absolute;
    left: 0.55rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.news-search .input-field {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    min-width: 230px;
}

.search-clear {
    position: absolute;
    right: 0.4rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}

.search-clear:hover {
    color: var(--color-primary);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 0.75rem;
}

.news-card {
    position: relative;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    clip-path: var(--clip-angle-br);
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Ссылка-подложка на всю карточку: обычный <a> нельзя обернуть вокруг кнопок действий
   (интерактивное внутри интерактивного), а средний клик и адрес в статусной строке
   работают только у настоящей ссылки. Кнопки лежат выше по z-index. */
.news-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}

.news-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.news-card-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background: #05070c;
}

.news-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card-cover-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.15);
    background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        #05070c;
    background-size: 16px 16px;
}

.news-card-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 63, 43, 0.85);
    clip-path: var(--clip-angle-br);
    font-size: 0.85rem;
    pointer-events: none;
}

.news-card-actions {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.news-card:hover .news-card-actions {
    opacity: 1;
}

.news-card-actions button,
.news-card-actions a {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: rgba(3, 5, 10, 0.92);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    text-decoration: none;
    cursor: pointer;
}

.news-card-actions button:hover,
.news-card-actions a:hover {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.news-card-actions button.danger:hover {
    background: var(--color-primary);
}

.news-card-body {
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.news-card-title {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-preview {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.news-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.news-card-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.news-card-stats .has-body {
    color: #95C443;
}

.news-card-stats .no-body {
    color: rgba(255, 255, 255, 0.22);
}

/* Черновик должен читаться как «ещё не вышло», а не как обычная новость: пунктир и
   приглушённая обложка отличают его на сетке с одного взгляда, без чтения подписей. */
.news-card.is-draft {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.22);
}

.news-card.is-draft .news-card-cover img,
.news-card.is-draft .news-card-cover-empty {
    opacity: 0.45;
}

.news-card-draft {
    position: absolute;
    left: 0;
    top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    background: rgba(3, 5, 10, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-left: none;
    clip-path: var(--clip-angle-br);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.stat-chip.draft {
    color: var(--color-text-secondary);
    border-style: dashed;
}

@media (max-width: 600px) {
    .news-controls-row,
    .news-controls-right {
        width: 100%;
    }

    .news-search {
        flex: 1;
    }

    .news-search .input-field {
        min-width: 0;
        width: 100%;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-card-actions {
        opacity: 1;
    }
}


/* ==================== SERVERS PAGE ==================== */
.servers-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow: visible;
}

.tools-quick-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* ---- Режимы одним списком вместо ряда кнопок ----
   Кнопок режимов ровно столько, сколько режимов на проекте, и каждый новый толкал панель
   выделения на вторую строку. Открывается наведением — тем же способом, что у соседних
   split-кнопок этого тулбара, чтобы поведение в одной панели не было разным. */
.tools-mode-dropdown {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    /* «Мост» для :hover: без него курсор теряет ховер в зазоре между кнопкой и меню.
       Отрицательный margin возвращает внешнюю высоту, иначе кнопка съезжает вверх. */
    padding-bottom: 8px;
    margin-bottom: -8px;
}

.tools-quick-select .tools-mode-main {
    white-space: nowrap;
}

.tools-mode-caret {
    font-size: 0.6rem;
    opacity: 0.7;
}

.tools-quick-select .action-dropdown-menu {
    min-width: 160px;
    left: 0;
    right: auto;
    z-index: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.tools-quick-select .action-dropdown-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
}

.servers-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    overflow: visible;
}

.tools-left,
.tools-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    min-width: 0;
    overflow: visible;
}

.tools-left {
    flex: 1 1 auto;
}

.tools-right {
    flex: 0 1 auto;
    justify-content: flex-end;
}

/* ---- Общий онлайн: точка + число, справа в тулбаре ---- */
.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(149, 196, 67, 0.35);
    background: rgba(149, 196, 67, 0.07);
    clip-path: var(--clip-angle-br);
    flex: 0 0 auto;
    cursor: default;
    user-select: none;
}

.online-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #95C443;
    box-shadow: 0 0 8px rgba(149, 196, 67, 0.85);
    animation: online-dot-breath 2.4s ease-in-out infinite;
}

.online-pill-value {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: #b3ff61;
    font-variant-numeric: tabular-nums;
}

/* Онлайн ещё считается — не показываем зелёный «всё хорошо» раньше времени. */
.online-pill.is-pending {
    border-color: var(--color-border);
    background: transparent;
}

.online-pill.is-pending .online-pill-dot {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: none;
}

.online-pill.is-pending .online-pill-value {
    color: var(--color-text-secondary);
}

/* Никого нет — зелёная лампочка врала бы. */
.online-pill.is-empty {
    border-color: var(--color-border);
    background: transparent;
}

.online-pill.is-empty .online-pill-dot {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    animation: none;
}

.online-pill.is-empty .online-pill-value {
    color: var(--color-text-secondary);
}

@keyframes online-dot-breath {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(149, 196, 67, 0.85); }
    50% { opacity: 0.65; box-shadow: 0 0 3px rgba(149, 196, 67, 0.45); }
}

.tools-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.tools-quick-select button,
.tools-actions button,
.btn-select-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.tools-actions .tools-split-dropdown {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    position: relative;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    /* «Мост» для :hover — без этого курсор теряет ховер в зазоре между кнопкой и меню */
    padding-bottom: 8px;
    margin-bottom: -8px;
}

.tools-actions .tools-split-main {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    clip-path: none;
    white-space: nowrap;
}

.tools-actions .tools-split-caret {
    flex: 0 0 auto;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    min-width: 2rem;
}

.tools-actions > button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tools-actions .action-dropdown-menu {
    min-width: 220px;
    left: 0;
    right: auto;
    z-index: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.tools-actions .action-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.76rem;
}

.tools-actions .action-dropdown-menu button i {
    flex: 0 0 0.85rem;
    width: 0.85rem;
    text-align: center;
    opacity: 0.85;
}

.tools-actions .action-dropdown:hover .action-dropdown-menu,
.tools-actions .action-dropdown:focus-within .action-dropdown-menu {
    display: flex;
}

.tools-quick-select button:hover,
.tools-actions button:hover,
.btn-select-mode:hover {
    border-color: var(--color-primary);
    color: var(--color-text-main);
    background: rgba(196, 63, 43, 0.18);
}

.btn-select-mode.active {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.25);
    color: var(--color-text-main);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.page-header-title h3 {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.15rem;
}

.page-header-title p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
}

.btn-refresh i {
    font-size: 0.9rem;
}

.btn-refresh:hover {
    border-color: var(--color-primary);
    color: var(--color-text-main);
    background: rgba(196, 63, 43, 0.18);
}

.btn-add-server {
    padding: 0.5rem 0.75rem;
    min-width: 2.5rem;
    justify-content: center;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-add-server:hover {
    background: rgba(196, 63, 43, 0.25);
}

.btn-refresh--icon-only {
    padding: 0.5rem 0.65rem;
    min-width: 2.5rem;
    justify-content: center;
    gap: 0;
}

/* ---- Обновление: основная кнопка + каретка жёсткого обновления (как reload в Chrome) ---- */
.refresh-split {
    position: relative;
    display: inline-flex;
}

.refresh-split .btn-refresh--icon-only {
    border-right: none;
}

.btn-refresh--caret {
    padding: 0.5rem 0.4rem;
    min-width: 1.6rem;
    justify-content: center;
    gap: 0;
    font-size: 0.7rem;
}

.btn-refresh--caret i {
    font-size: 0.65rem;
    opacity: 0.7;
}

.btn-refresh.is-busy i {
    animation: loader-spin 0.8s linear infinite;
}

.refresh-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 490;
}

.refresh-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    min-width: 210px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.refresh-menu button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
}

.refresh-menu button i {
    flex: 0 0 0.85rem;
    width: 0.85rem;
    text-align: center;
    opacity: 0.85;
}

.refresh-menu button:hover {
    color: var(--color-text-main);
    background: rgba(196, 63, 43, 0.18);
}

.refresh-menu-hint {
    padding: 0.25rem 0.8rem 0.5rem;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    opacity: 0.65;
}

.servers-create-server-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.servers-create-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-top: 0.35rem;
}

.servers-create-label:first-of-type {
    margin-top: 0;
}

.servers-create-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.servers-create-error {
    color: var(--color-danger, #c43f2b);
    font-size: 0.85rem;
    margin: 0.25rem 0 0 0;
}

.servers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.server-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 1rem 1.1rem 1rem;
    clip-path: var(--clip-angle-br);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.server-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
    border-color: rgba(196, 63, 43, 0.7);
}

.server-card.online {
    border-color: #99CA44;
}

.server-card.offline {
    border-color: #C43F2B;
    opacity: 0.9;
}

.server-card.selected {
    border-color: #FFBA59;
    box-shadow: 0 0 0 1px rgba(255, 186, 89, 0.6);
    background: linear-gradient(135deg, rgba(255, 186, 89, 0.08), transparent);
}

/* ---- Статусы ещё опрашиваются: не выдаём живой сервер за оффлайн ---- */
.server-card.pending {
    border-color: rgba(255, 255, 255, 0.14);
}

.server-status.pending {
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-text-secondary);
    animation: status-pulse 1.1s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.value-skeleton {
    display: inline-block;
    width: 3.2rem;
    height: 0.7rem;
    background: rgba(255, 255, 255, 0.09);
    animation: status-pulse 1.1s ease-in-out infinite;
}

.value-muted {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

/* ---- Тестовые серверы: скрыты с сайта, идут в конце сетки и выглядят иначе ---- */
.servers-grid-separator {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    opacity: 0.75;
}

.servers-grid-separator i {
    font-size: 0.75rem;
}

.server-card--test {
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.015) 0 10px,
        transparent 10px 20px
    ), var(--color-bg-card);
    border-style: dashed;
    opacity: 0.92;
}

.server-card--test:hover {
    opacity: 1;
}

/* Иконка держится в строке с именем: у длинных имён она иначе уезжает на строку выше. */
.server-card--test .server-name {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.server-name-icon {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.server-mode-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-main);
    border-radius: 0;
    line-height: 1.3;
}

.server-mode-badge.mode-fun {
    border-color: #f59e0b;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.server-mode-badge.mode-casual {
    border-color: #4fa9ff;
    color: #4fa9ff;
    background: rgba(79, 169, 255, 0.1);
}

.server-mode-badge.mode-vanilla {
    border-color: #52c77a;
    color: #52c77a;
    background: rgba(82, 199, 122, 0.1);
}

.server-mode-badge.mode-mode {
    border-color: #c084fc;
    color: #c084fc;
    background: rgba(192, 132, 252, 0.1);
}

.server-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.server-name {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.server-status {
    padding: 0.2rem 0.6rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.server-status.online {
    background: rgba(153, 202, 68, 0.18);
    color: #b3ff61;
}

.server-status.offline {
    background: rgba(196, 63, 43, 0.2);
    color: #ff8a6b;
}

.server-info {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.65rem 0;
    margin-bottom: 0.6rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.info-label {
    opacity: 0.8;
}

.online-count {
    color: #99CA44;
    font-weight: 700;
}

.server-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.btn-action {
    padding: 0.45rem 0.9rem;
    border-radius: 0;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-text-main);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.btn-action:hover {
    background: var(--color-primary);
}

.btn-action[disabled],
.btn-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--color-border);
    background: transparent;
}

.btn-action[disabled]:hover,
.btn-action:disabled:hover {
    background: transparent;
}

.btn-settings {
    min-width: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem;
}

.servers-edit-server-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.servers-edit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.servers-edit-actions-right {
    display: flex;
    gap: 0.5rem;
}

.loading-state,
.empty-state {
    padding: 1.5rem 0;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--color-primary);
    animation: loader-spin 0.8s linear infinite;
}

/* Command modal */
.servers-command-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
}

.servers-command-modal {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 1.2rem 1.4rem;
    width: 100%;
    max-width: 420px;
    clip-path: var(--clip-angle-br);
}

.servers-command-modal h4 {
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
}

.servers-command-modal textarea {
    width: 100%;
    resize: vertical;
    min-height: 90px;
    background: #05070c;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.75rem;
}

.servers-command-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.servers-command-actions .btn-cancel,
.servers-command-actions .btn-send {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 0;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* ==================== GENERIC MODALS & FORMS ==================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
}

.modal-content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    width: 100%;
    max-width: 520px;
    clip-path: var(--clip-angle-br);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.close-btn {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
}

.modal-body {
    padding: 0.9rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--color-border);
}

/* News editor modal - wider and scrollable for comfy writing */
.modal-content.news-editor {
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.news-editor .modal-body {
    padding: 1rem 1.1rem 0.6rem;
    overflow-y: auto;
}

/* Карточка редактора и просмотра, вынесенная на отдельную страницу. Ограничения высоты
   и собственная прокрутка тела нужны были модалке, висящей поверх экрана; на странице
   скроллится сама страница, а второй скролл внутри карточки только мешает — из него
   уезжает футер с кнопкой «Сохранить». Шапка липкая: переключатель режимов и вкладки
   должны оставаться под рукой на длинной статье. */
.modal-content.as-page {
    max-width: 100%;
    max-height: none;
}

.modal-content.as-page .modal-body {
    max-height: none;
    overflow-y: visible;
}

.modal-content.as-page .modal-header {
    position: sticky;
    top: var(--navbar-height, 49px);
    z-index: 5;
    background: var(--color-bg-card);
}

.editor-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.editor-form .form-row {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .editor-form .form-row {
        flex-direction: column;
    }

    /* Строка распалась на этажи: колонки больше не делят ширину, а идут друг за другом —
       каждая по высоте своего содержимого, иначе они наезжают друг на друга. */
    .editor-form .form-row > .input-group {
        flex: 0 0 auto;
    }

    .editor-form .cover-group {
        max-width: none;
    }

    .cover-box .cover-preview {
        height: 170px;
    }

    .cover-summary-row .summary-field {
        min-height: 4.5rem;
    }
}

.editor-textarea {
    width: 100%;
    min-height: 360px;
    max-height: 70vh;
    background: #05070c;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 0.6rem 0.7rem;
    font-size: 0.86rem;
    line-height: 1.6;
    resize: vertical;
}

/* --- News editor: шапка, режимы, черновик --- */
.modal-title i {
    margin-right: 0.4rem;
    color: var(--color-primary);
}

.editor-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.editor-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--color-border);
    background: transparent;
    padding: 0.3rem 0.6rem;
    font-family: inherit;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.editor-mode-btn.active {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.24);
    color: var(--color-text-main);
}

.editor-dirty {
    margin-left: 0.35rem;
    color: var(--color-accent);
    font-size: 1.3rem;
    line-height: 0;
    vertical-align: middle;
}

.editor-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.modal-footer .footer-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-action.ghost {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.btn-action.ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

.btn-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    border: 1px solid var(--color-border);
    background: transparent;
    padding: 0.3rem 0.6rem;
    font-family: inherit;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.btn-mini:hover {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.btn-mini.ghost:hover {
    border-color: var(--color-border);
    background: rgba(255, 255, 255, 0.06);
}

/* Файловый инпут прячем под кнопку — своя разметка вместо браузерной. */
.btn-mini.upload input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.btn-mini.square {
    padding: 0.3rem 0.45rem;
}

/* --- Форма редактора ---
   width: auto обязателен: у bootstrap свой .input-group с width: 100%, и без сброса
   первая колонка строки («Тип») забирала всю ширину, а заголовку новости оставалось
   несколько пикселей у правого края. */
.editor-form .input-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: auto;
    min-width: 0;
}

.editor-form .input-group.grow {
    flex: 1;
}

/* Поля формы тянутся на всю ширину своей колонки: у input ширина по умолчанию —
   это size=20, из-за чего заголовок новости жил в узком окошке посреди пустой строки. */
.editor-form .input-field {
    width: 100%;
}

.editor-form label {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.label-hint {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Тип новости в шапке — подпись, а не кнопка: менять его после создания нельзя. */
.editor-type-chip {
    flex-shrink: 0;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    vertical-align: middle;
}

.summary-field {
    width: 100%;
    line-height: 1.5;
    resize: vertical;
}

/* --- Обложка и краткий текст в одной строке --- */
.cover-summary-row {
    align-items: stretch;
}

.cover-group {
    flex: 0 0 240px;
    max-width: 240px;
}

/* Порядок сверху вниз: превью, адрес, кнопки — ближе к глазу то, что чаще смотрят. */
.cover-box {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Высота задана числом, а не aspect-ratio: пропорция от ширины не участвует в расчёте
   высоты колонки-флекс-элемента, из-за чего колонка получалась короче своего содержимого
   и на телефоне адрес обложки налезал на краткий текст. */
.cover-box .cover-preview {
    width: 100%;
    height: 135px;
    aspect-ratio: auto;
}

/* Адрес картинки читают, а не набирают руками — мелкий шрифт и узкое поле экономят строку. */
.cover-url {
    font-size: 0.68rem;
    padding: 0.3rem 0.4rem;
}

/* Анонс занимает всю высоту соседней колонки: пустое место рядом с обложкой ни к чему. */
.cover-summary-row .summary-field {
    flex: 1;
    min-height: 5.5rem;
}

.field-counter {
    align-self: flex-end;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
}

.field-counter.over {
    color: var(--color-primary);
}

.cover-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.cover-preview {
    width: 160px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background: #05070c;
    flex-shrink: 0;
}

.cover-preview.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.15);
}

.cover-actions {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.cover-buttons {
    display: flex;
    gap: 0.35rem;
}

/* --- Блоки статьи --- */
.blocks-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
}

.blocks-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.blocks-head h3 {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.blocks-head i {
    color: var(--color-primary);
    margin-right: 0.35rem;
}

.blocks-count {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

/* --- Подвкладки тела статьи: конструктор / JSON / ИИ --- */
.editor-subtabs {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.editor-subtabs .subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    clip-path: var(--clip-angle-br);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.editor-subtabs .subtab:hover {
    color: var(--color-text-main);
    border-color: var(--color-primary);
}

.editor-subtabs .subtab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* .blocks-head i красит иконку заголовка в основной цвет — внутри вкладок это лишнее. */
.editor-subtabs .subtab i {
    color: inherit;
    margin-right: 0;
}

/* --- Вкладка JSON --- */
.json-pane {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.json-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.json-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
}

.json-status.ok {
    color: #95C443;
}

.json-status.bad {
    color: #C43F2B;
}

.json-field {
    font-family: "Consolas", "Menlo", "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    /* pre-wrap, а не pre: абзац статьи это одна строка JSON длиной в сотни символов,
       и с горизонтальной прокруткой её пришлось бы читать, елозя полем вбок. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    resize: vertical;
    min-height: 260px;
}

.json-field.bad {
    border-color: #C43F2B;
}

.json-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.json-hint i {
    margin-right: 0.35rem;
}

/* --- Вкладка ИИ --- */
.ai-pane {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ai-lead {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.ai-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-main);
    clip-path: var(--clip-angle-br);
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
}

.ai-toggle:hover {
    border-color: var(--color-primary);
}

.ai-toggle-hint {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/* Инструкция длинная и её читают глазами, а не правят — своя прокрутка вместо
   растягивания модалки на несколько экранов. */
.ai-prompt {
    margin: 0;
    padding: 0.7rem 0.8rem;
    max-height: 340px;
    overflow: auto;
    border: 1px solid var(--color-border);
    background: #05070c;
    font-family: "Consolas", "Menlo", "Courier New", monospace;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Показатели новости --- */
.stats-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
}

/* --- Переключатель публикации в футере --- */
.publish-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    /* Футер прижимает содержимое вправо (justify-content: flex-end) — тумблер уводим влево,
       как это делает .editor-hint на его прежнем месте. */
    margin-right: auto;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
}

.publish-toggle input {
    width: 15px;
    height: 15px;
    accent-color: #95C443;
    cursor: pointer;
}

.publish-toggle i {
    color: var(--color-text-secondary);
}

.blocks-empty {
    padding: 1.4rem;
    text-align: center;
    border: 1px dashed var(--color-border);
    color: rgba(255, 255, 255, 0.35);
}

.blocks-empty i {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 0.4rem;
}

.blocks-empty p {
    margin: 0;
    font-size: 0.8rem;
}

.block-item {
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.3);
}

.block-item:focus-within {
    border-color: rgba(196, 63, 43, 0.6);
}

.block-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.block-kind {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

/* Стрелка сворачивания — часть шапки блока, а не действие над ним: без рамки,
   чтобы не путалась с кнопками перемещения и удаления справа. */
.block-fold {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
}

.block-fold:hover {
    color: var(--color-text-main);
}

/* Начало текста в шапке свёрнутого блока — одной строкой, с многоточием на обрыве. */
.block-peek {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}

.block-item.folded .block-bar {
    border-bottom: none;
}

.block-kind i {
    color: var(--color-primary);
}

.block-format {
    display: inline-flex;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.block-item:focus-within .block-format,
.block-item:hover .block-format {
    opacity: 1;
}

.block-move {
    margin-left: auto;
    display: inline-flex;
    gap: 0.2rem;
}

.block-bar button {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
}

.block-bar button:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.block-bar button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.block-bar button.danger:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.block-body {
    padding: 0.5rem;
}

/* Высоту textarea выставляет newsEditor.autosize по тексту; здесь только нижняя граница,
   чтобы пустой блок не схлопывался в полоску. */
.block-field {
    width: 100%;
    min-height: 2.4rem;
    line-height: 1.6;
    resize: vertical;
}

.heading-field {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.quote-field {
    border-left: 3px solid var(--color-primary);
    font-style: italic;
}

.block-divider {
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
}

.blocks-add {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding-top: 0.3rem;
}

.blocks-add-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

/* --- Предпросмотр и чтение статьи --- */
.editor-preview,
.article-view {
    font-size: 0.92rem;
    line-height: 1.7;
}

.preview-title {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.preview-meta {
    display: flex;
    gap: 0.9rem;
    margin-bottom: 0.8rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.preview-cover {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    margin-bottom: 0.8rem;
    display: block;
}

.preview-summary {
    margin: 0 0 0.9rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--color-primary);
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.article-view > * + * {
    margin-top: 0.8rem;
}

.article-h {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.article-p {
    margin: 0;
}

.article-p a,
.article-list a,
.article-quote a {
    color: var(--color-accent);
}

.article-quote {
    margin: 0;
    padding: 0.5rem 0.8rem;
    border-left: 3px solid var(--color-primary);
    background: rgba(196, 63, 43, 0.08);
    font-style: italic;
}

.article-list {
    margin: 0;
    padding-left: 1.2rem;
}

.article-figure {
    margin: 0;
}

.article-figure img {
    width: 100%;
    border: 1px solid var(--color-border);
    display: block;
}

.article-figure figcaption {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.article-hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
}

.article-empty {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.35);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 0.9rem;
}

.youtube-embed,
.youtube-preview-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 700px) {
    .cover-row {
        flex-direction: column;
    }

    .cover-preview {
        width: 100%;
    }

    .editor-hint {
        display: none;
    }

    /* На узком экране шапка редактора не помещалась в строку и уезжала за край:
       переключатель режимов остаётся иконками, заголовок сжимается. */
    .news-editor .modal-header {
        gap: 0.5rem;
    }

    /* Обрезается только сам текст заголовка: раньше overflow: hidden висел на всей строке
       и прятал чип с типом новости, стоящий за текстом. */
    .news-editor .modal-title {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .news-editor .editor-title-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .editor-header-actions {
        flex-shrink: 0;
    }

    .editor-mode-btn span {
        display: none;
    }

    .editor-mode-btn {
        padding: 0.3rem 0.45rem;
    }

    /* Заголовок «Статья», три подвкладки и счётчик блоков в одну строку на телефоне
       не помещаются — вкладки уходят на свою строку и занимают её целиком. */
    .blocks-head {
        flex-wrap: wrap;
    }

    .editor-subtabs {
        order: 3;
        width: 100%;
        margin-left: 0;
    }

    .editor-subtabs .subtab {
        flex: 1;
        justify-content: center;
        padding: 0.35rem 0.3rem;
    }

    .blocks-count {
        margin-left: auto;
    }

    .ai-actions .btn-action {
        width: 100%;
        justify-content: center;
    }

    /* Футер редактора: тумблер публикации и кнопки в столбик, иначе подпись обрезается. */
    .news-editor .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .publish-toggle {
        width: 100%;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
}

.input-group label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.input-field {
    background: #05070c;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
}

.input-field.big {
    padding: 0.6rem 0.7rem;
}

.validation-message {
    font-size: 0.7rem;
    color: #C43F2B;
}

.alert {
    border-radius: 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
    border: 1px solid transparent;
}

.alert.success {
    border-color: #2f6f3a;
    background: rgba(47, 111, 58, 0.18);
    color: #a5ffb9;
}

.alert.error {
    border-color: #C43F2B;
    background: rgba(196, 63, 43, 0.18);
    color: #ffe1d9;
}

/* ==================== FILE UPLOAD DROP ZONE ==================== */
.drop-zone {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px dashed var(--color-border);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.7rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.drop-zone::before {
    content: "DRAG & DROP / CLICK";
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.drop-zone .drop-zone-text {
    font-size: 0.8rem;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto;
}

.drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.drop-zone.dragging {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.25);
}

.drop-zone.has-file {
    border-style: solid;
    border-color: #99CA44;
}

.drop-zone.has-file::before {
    content: "FILE SELECTED";
    color: #99CA44;
}

.progress-container {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: rgba(255,255,255,0.06);
}

.progress-bar {
    height: 100%;
    background: var(--color-primary);
    position: relative;
}

.progress-text {
    position: absolute;
    right: 4px;
    top: -14px;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

.servers-command-actions .btn-send {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.servers-command-actions .btn-send:hover {
    background: var(--color-primary);
}

/* Toasts */
#admin-toast-container {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 200;
}

.admin-toast {
    min-width: 220px;
    max-width: 320px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 0.55rem 0.8rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    clip-path: var(--clip-angle-br);
}

.admin-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.admin-toast-success {
    border-color: #99CA44;
}

.admin-toast-error {
    border-color: #C43F2B;
}

.admin-toast-warning {
    border-color: #FFBA59;
}

.admin-toast-info {
    border-color: var(--color-blue);
}

/* ==================== SERVER DETAIL: RESTART DROPDOWN ==================== */
.action-dropdown {
    display: flex;
    flex-direction: row;
    position: relative;
}

.action-dropdown .restart-main {
    flex: 1;
}

.action-dropdown .restart-toggle {
    padding: 0 10px;
}

.action-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    display: none;
    flex-direction: column;
    min-width: 160px;
    z-index: 50;
}

.action-dropdown-menu button {
    padding: 0.35rem 0.8rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.action-dropdown-menu button:hover {
    background: rgba(196, 63, 43, 0.2);
    color: var(--color-text-main);
}

.action-dropdown:hover .action-dropdown-menu {
    display: flex;
}

/* ==================== SERVER DETAIL CONSOLE PAGE ==================== */
.server-info-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    top: 80px;
    left: 20px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    z-index: 900;
    clip-path: var(--clip-angle-br);
}

.server-icon i {
    font-size: 24px;
    color: #99CA44;
}

.server-text {
    display: flex;
    flex-direction: column;
}

.node-name,
.server-id {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.server-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 2px 0 0 0;
}

.console-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: calc(100vh - 120px);
}

.console-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 0.9rem 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.status-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.status-item .label {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.status-item .value {
    color: #99CA44;
}

.status-item .value.online {
    color: #5D7238;
}

.status-item .value.offline {
    color: #C43F2B;
}

.status-item .value.starting {
    color: #D09B42;
}

/* Процесс жив, но команды до игры не доходят: не «упал», но и не рабочий. */
.status-item .value.unmanaged {
    color: #C43F2B;
}

.console-body {
    display: flex;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

.console-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.console-main > * {
    width: 100%;
}

.console-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.console-tabs-left {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.console-tabs-right {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
}

.console-tabs-right .console-tab-configurator {
    margin-left: -1px;
}

.console-tabs-right .console-tab-configurator:first-child {
    margin-left: 0;
}

.console-tab {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.console-tab.active {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.24);
    color: var(--color-text-main);
}

.console-settings {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 1rem 1.1rem;
    width: 100%;
}

.console-settings h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.75rem;
}

.settings-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.settings-grid label span {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.settings-grid input[type="text"] {
    background: #05070c;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
}

.settings-grid input[type="text"]:focus {
    outline: none;
    border-color: #5D7238;
}

.settings-check {
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem !important;
}

.settings-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    /* Без этого на узком экране флекс ужимает квадрат в прямоугольник. */
    flex: 0 0 14px;
    border: 1px solid var(--color-border);
    background: #05070c;
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.settings-check input[type="checkbox"]:checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.settings-check input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: -1px;
    left: 1px;
    font-size: 0.7rem;
    color: #05070c;
}

/* Галочка с подписью, где текст на узком экране переносится: выравниваем по
   ПЕРВОЙ строке, а не по центру блока — иначе на мобиле квадрат уезжает
   на середину между строками. */
.auth-remember {
    margin-top: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.auth-remember input[type="checkbox"] {
    /* Строка текста 14.56px (0.7rem × 1.3), квадрат 14px: сдвиг в полразницы
       ставит его ровно по центру ПЕРВОЙ строки, даже когда подпись переносится. */
    margin-top: 0.02rem;
}

.auth-remember .check-text {
    font-size: 0.7rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.auth-remember:hover .check-text {
    color: var(--color-text-main);
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
}

.settings-actions .btn-action {
    padding: 0.45rem 0.9rem;
}

/* Заголовок блока админов и кнопка сброса — в одну строку. */
.settings-admins-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.settings-admins-head .btn-action {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
}

.settings-admins-list {
    margin: 0.45rem 0 0 0;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.settings-admins-list code {
    font-size: 0.78rem;
}

.logs-file-list {
    margin: 0.6rem 0 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.logs-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.logs-file-row:last-child {
    border-bottom: none;
}

.logs-file-download {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-text-main);
    text-align: left;
    cursor: pointer;
    padding: 0;
    font-size: 0.84rem;
}

.logs-file-download:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.logs-file-size {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    white-space: nowrap;
}

/* Donate tab */
.donate-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 1rem 1.1rem;
}

.donate-load-error {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-danger, #c43f2b);
    font-size: 0.85rem;
    margin: 0;
}

.donate-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.donate-toolbar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.donate-toolbar-btn {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-main);
    padding: 0.38rem 0.7rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.donate-toolbar-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Загрузка каталога с диска: <label> вокруг скрытого InputFile,
   поэтому кнопкой его делает отдельный класс, а не .donate-toolbar-btn. */
.donate-toolbar-file-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-main);
    padding: 0.38rem 0.7rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.donate-toolbar-file-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.donate-toolbar-btn.primary {
    border-color: var(--color-primary);
}

.donate-toolbar-btn.add {
    min-width: 2.1rem;
    padding: 0.38rem 0.55rem;
}

.donate-save-status {
    margin: 0 0 0.7rem 0;
    font-size: 0.82rem;
}

/* Состояние каталога относительно сервера: импорт, невыложенная версия, расхождение с файлом. */
.donate-catalog-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.7rem 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.donate-catalog-note.warn {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.donate-catalog-note i {
    margin-right: 0.4rem;
}

.donate-save-status.error {
    color: var(--color-danger, #c43f2b);
}

.donate-save-status.success {
    color: #99CA44;
}

.donate-search {
    min-width: 220px;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    background: #05070c;
    color: var(--color-text-main);
    font-size: 0.8rem;
}

.donate-filter-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.donate-filter {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.donate-filter.active {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.24);
    color: var(--color-text-main);
}

.donate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.donate-card {
    position: relative;
    border: 1px solid var(--color-border);
    background: #05070c;
    padding: 0.75rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.donate-card-clickable {
    cursor: grab;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.donate-card-clickable:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.donate-card-clickable.dragging {
    opacity: 0.55;
}

.donate-card-clickable.drop-target {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.12);
}

.donate-card-copy {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: rgba(5, 7, 12, 0.85);
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
}

.donate-card-copy:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.donate-type-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.donate-name {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.donate-desc {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.donate-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.74rem;
}

.donate-id {
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donate-footer {
    margin-top: 0.35rem;
    display: flex;
    justify-content: flex-end;
}

.donate-price {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: #FFBA59;
}

.donate-editor-modal {
    max-width: 900px;
    width: min(96vw, 900px);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.donate-editor-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-y: auto;
    max-height: calc(100vh - 11rem);
}

.donate-editor-modal .input-field {
    width: 100%;
}

.donate-editor-modal textarea.input-field {
    min-height: 72px;
    resize: vertical;
}

.donate-improvements-text {
    min-height: 120px !important;
}

.donate-editor-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.donate-editor-items-header {
    margin-top: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.donate-empty-items {
    margin: 0.4rem 0 0 0;
    color: var(--color-text-secondary);
}

.donate-editor-items-list {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.donate-editor-kits-list {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.donate-editor-kit-block {
    border: 1px solid var(--color-border);
    background: rgba(5, 7, 12, 0.6);
    padding: 0.55rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.donate-editor-kit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.donate-editor-item-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.8fr auto;
    gap: 0.45rem;
    align-items: center;
}

@media (max-width: 860px) {
    .donate-editor-grid2 {
        grid-template-columns: 1fr;
    }

    .donate-editor-item-row {
        grid-template-columns: 1fr;
    }

    .donate-item-remove {
        justify-self: end;
    }
}

.donate-item-hint {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donate-item-remove {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-danger, #c43f2b);
    min-width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.donate-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.btn-action.danger {
    border-color: var(--color-danger, #c43f2b);
    color: var(--color-danger, #c43f2b);
}

/* Players tab */
.players-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 0.55rem 0.65rem;
    width: 100%;
}

.reports-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.reports-header-filters {
    flex-direction: column;
    gap: 0.75rem;
}

.reports-filters-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.reports-filters-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    min-width: 70px;
}

.reports-filter-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.reports-filter-category {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-main);
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    min-width: 140px;
}

.reports-filter-category-select {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-main);
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    min-width: 180px;
}

.reports-filter-category::placeholder {
    color: var(--color-text-secondary);
}

.report-category-tag {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.status-ticket-0 { border-color: #5D7238; color: #99CA44; }
.status-ticket-1 { border-color: #FFBA59; color: #FFBA59; }
.status-ticket-2 { border-color: #555; color: #777; }
.status-ticket-3 { border-color: var(--color-primary); color: var(--color-primary); }

.reports-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
    flex: 1 1 auto;
}

.report-category-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-category-name {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.report-category-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.badge-new {
    color: #FFBA59;
}

.badge-inprogress {
    color: var(--color-primary);
}

.reports-filters {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 180px;
}

.reports-filter-btn {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    text-align: left;
}

.reports-filter-btn.active {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.24);
    color: var(--color-text-main);
}

.reports-grid {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    padding: 1rem 1.1rem;
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

.report-card-link {
    text-decoration: none;
    color: inherit;
}

.report-card {
    border: 1px solid var(--color-border);
    background: #05070c;
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.report-title {
    font-weight: 600;
}

.report-card-status-line {
    margin-top: 0.2rem;
}

.status-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--color-border);
}

.status-new {
    border-color: #5D7238;
    color: #99CA44;
}

.status-progress {
    border-color: #FFBA59;
    color: #FFBA59;
}

.status-closed {
    border-color: #555;
    color: #777;
}

.report-card-body {
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
}

.report-row {
    display: flex;
    gap: 0.4rem;
}

.report-row .label {
    min-width: 90px;
    color: var(--color-text-secondary);
}

.report-row .value {
    flex: 1;
    color: var(--color-text-main);
}

.report-card-footer {
    margin-top: 0.4rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/* Ticket page */
.ticket-page,
.ticket-detail-page {
    gap: 1.5rem;
}

/* Ticket detail page — header card */
.ticket-detail-header-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.ticket-detail-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ticket-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ticket-detail-back:hover {
    color: var(--color-primary);
}

.ticket-detail-back i {
    font-size: 0.8rem;
}

.ticket-detail-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ticket-detail-header-actions .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ticket-move-input,
.ticket-move-select {
    max-width: 200px;
    min-width: 160px;
}

.ticket-detail-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    line-height: 1.35;
    color: var(--color-text-main);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.ticket-detail-id {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
}

.ticket-detail-subject {
    flex: 1;
    min-width: 0;
}

.ticket-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem 1.5rem;
}

.ticket-detail-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ticket-detail-info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.ticket-detail-info-label i {
    margin-right: 0.25rem;
    opacity: 0.9;
}

.ticket-detail-info-value {
    font-size: 0.9rem;
    color: var(--color-text-main);
}

.ticket-detail-steamid {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
}

.ticket-detail-info-item .ticket-status-badge {
    align-self: flex-start;
}

.ticket-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.ticket-detail-title-block h2 {
    font-size: 1rem;
    margin: 0 0 0.35rem 0;
}

.ticket-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.ticket-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ticket-move-block {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.ticket-status-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
    border-radius: 2px;
}

.ticket-status-badge.status-0,
.ticket-status-badge.status-1 {
    background: rgba(43, 79, 196, 0.3);
    color: #7ba3ff;
}

.ticket-status-badge.status-2 {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-secondary);
}

.ticket-status-badge.status-3 {
    background: rgba(196, 63, 43, 0.2);
    color: var(--color-primary);
}

/* Модалка «Позвать» в тикет */
.ticket-invite-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ticket-invite-hint {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.ticket-invite-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.35rem 0;
}

.ticket-invite-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ticket-invite-item:hover,
.ticket-invite-item.selected {
    background: rgba(43, 79, 196, 0.15);
    border-color: var(--color-primary);
}

.ticket-invite-item input[type="radio"] {
    margin: 0;
}

.ticket-invite-nick {
    font-weight: 600;
    color: var(--color-text-main);
}

.ticket-invite-role {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.ticket-invite-empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.ticket-invite-msg-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0.25rem 0 0 0;
}

.ticket-invite-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-main);
    font-size: 0.9rem;
    resize: vertical;
}

.ticket-invite-error {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-danger, #c43f2b);
}

.tickets-filters {
    margin-bottom: 1rem;
}

.tickets-filters select {
    padding: 0.35rem 0.6rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 0.9rem;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.ticket-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ticket-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
}

.ticket-subtitle {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.8rem;
}

.ticket-actions {
    display: flex;
    gap: 0.5rem;
}

.ticket-chat {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 0.8rem 0.9rem;
}

.ticket-chat-messages {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticket-message {
    max-width: 70%;
    border: 1px solid var(--color-border);
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
}

.ticket-message.user {
    align-self: flex-start;
    background: #05070c;
}

.ticket-message.staff {
    align-self: flex-end;
    background: rgba(196, 63, 43, 0.15);
    border-color: var(--color-primary);
}

.ticket-message-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.2rem;
}

.ticket-message-delete {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto;
}

.ticket-message-delete:hover {
    color: #e74c3c;
}

.ticket-message-body {
    white-space: pre-wrap;
}

.ticket-chat-input {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ticket-chat-input textarea {
    flex: 1;
    min-height: 70px;
    max-height: 140px;
    background: #05070c;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 0.8rem;
    padding: 0.5rem 0.6rem;
    resize: vertical;
}

/* Оформление блока быстрых ответов — ниже, в разделе «ВЫБОР БЫСТРОГО ОТВЕТА В ТИКЕТЕ». */

.players-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.players-filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.players-filter-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-text-secondary);
}

.btn-filter {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
}

.btn-filter.active {
    border-color: #FFBA59;
    color: #FFBA59;
}

.btn-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.4rem;
}

.player-card {
    border: 1px solid var(--color-border);
    background: #05070c;
    padding: 0.35rem 0.4rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
}

.player-factors {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.factor {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--color-border);
}

.factor-vpn {
    border-color: #C43F2B;
    color: #C43F2B;
}

.factor-donate {
    border-color: #99CA44;
    color: #99CA44;
}

.factor-level {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.factor-new {
    border-color: #C43F2B;
    color: #C43F2B;
}

.player-avatar {
    width: 90%;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.2), transparent 55%),
                linear-gradient(135deg, #232323, #101010);
    border: 1px solid var(--color-border);
    margin: 0 auto;
}

.player-footer {
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 1.2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 70%);
}

.player-nick {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-risk {
    font-size: 0.65rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.console-stub {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 1rem 1.1rem;
    width: 100%;
}

.console-output {
    flex: 0 0 40rem;
    height: 40rem;
    min-height: 40rem;
    max-height: 40rem;
    background: #05070c;
    border: 1px solid var(--color-border);
    padding: 1rem 1.1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Courier New', monospace;
}

.output-lines {
    flex: 1;
    overflow-y: auto;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-text-main);
    padding-right: 12px;
    min-width: 100%;
    max-width: 100%;
}

.console-line {
    word-break: break-all;
    /* Игра выравнивает вывод пробелами (стектрейсы, таблицы /help): без pre-wrap
       HTML их схлопывает и отступы теряются. */
    white-space: pre-wrap;
    padding: 2px 0;
    border-bottom: 1px dashed var(--color-border);
}

.console-line.empty {
    color: var(--color-text-secondary);
    font-style: italic;
    text-align: center;
    margin-top: 30px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Ответ игры «неизвестная команда», падение команды, недоступный канал. */
.console-line.error {
    color: #C43F2B;
}

/* Служебные пометки панели: разрыв лога, перезапуск буфера, обрезанный вывод. */
.console-line.system {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ===== Подсветка строк игровой консоли =====
   Цветов намеренно мало: подсвечено то, что ищут глазами (ошибки, античит, вход игрока),
   всё остальное либо приглушено, либо остаётся обычным белым. Разбор строки - в
   XAdmin/Services/ConsoleLineFormatter.cs. */

/* Продолжение стектрейса: нужно видеть, что оно относится к ошибке выше,
   но читать построчно его никто не будет. */
.console-line.trace {
    color: rgba(196, 63, 43, 0.55);
}

/* Вход игрока на сервер. */
.console-line.join {
    color: #95C443;
}

/* Выход игрока: событие рядовое, гасим. */
.console-line.leave {
    color: rgba(255, 255, 255, 0.45);
}

/* Метка времени, уровень Info и имена плагинов: половина ширины строки,
   при этом смысла почти не несут. */
.con-dim {
    color: rgba(255, 255, 255, 0.35);
}

.con-warn {
    color: #D9A441;
}

.con-error {
    color: #C43F2B;
}

/* Античит Proton красит свой тег сам (ANSI), но в HTML это не работает:
   цвет назначаем здесь, последовательности вырезаются при разборе. */
.con-proton {
    color: #9B6BEF;
}

/* Каналы чата: [World], [Group], [Area]. Приглушённо-синий, чтобы разговор
   отделялся от служебных строк, но не спорил с ошибками за внимание. */
.con-chat {
    color: #6E8FA6;
}

.console-channel-hint {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: #C43F2B;
}

.output-lines::-webkit-scrollbar {
    width: 8px;
}

.output-lines::-webkit-scrollbar-track {
    background: #05070c;
    border: 1px solid var(--color-border);
}

.output-lines::-webkit-scrollbar-thumb {
    background: var(--color-primary-dark);
    border: 1px solid var(--color-border);
}

.output-lines::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.console-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 140px;
}

.console-actions .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

.console-actions .action-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.76rem;
}

.console-actions .action-dropdown-menu button i {
    flex: 0 0 auto;
    width: 0.85rem;
    text-align: center;
    opacity: 0.85;
}

.console-actions .action-btn.start {
    border-color: #5D7238;
    background: #5D7238;
    color: #99CA44;
}

.console-actions .action-btn.stop {
    border-color: #C43F2B;
    background: #C43F2B;
    color: #FFF3EE;
}

.console-actions .action-btn.clear {
    border-color: var(--color-border);
    background: transparent;
}

.wipe-server-modal {
    max-width: 420px;
}

.wipe-server-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.console-actions .action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

.console-input {
    display: flex;
    gap: 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 0.9rem 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.command-input {
    flex: 1;
    background: #05070c;
    border: 1px solid var(--color-border);
    padding: 0.7rem 0.9rem;
    color: var(--color-text-main);
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    transition: all 0.2s ease;
}

.command-input::placeholder {
    color: var(--color-text-secondary);
    font-style: italic;
}

.command-input:focus {
    outline: none;
    border-color: #5D7238;
    background: #05070c;
    box-shadow: 0 0 12px rgba(93, 114, 56, 0.4);
}

.send-btn {
    padding: 0.7rem 1.3rem;
    background: #5D7238;
    border: 1px solid #5D7238;
    color: #99CA44;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 110px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.send-btn:hover {
    background: #D09B42;
    color: #252525;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(208, 155, 66, 0.4);
}

@media (max-width: 992px) {
    .console-body {
        flex-direction: column;
    }

    .console-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: none;
        gap: 10px;
    }

    .console-actions > .action-btn,
    .console-actions > .action-dropdown {
        width: 100%;
        min-width: 0;
    }

    .console-actions .action-btn {
        max-width: none;
    }

    .console-actions .action-dropdown {
        display: flex;
    }
}

@media (max-width: 600px) {
    .console-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .status-item {
        justify-content: center;
        gap: 8px;
    }

    .console-input {
        flex-direction: column;
    }

    .send-btn {
        width: 100%;
    }
}

/* ==================== SERVER PAGE MOBILE TUNING ==================== */
@media (max-width: 900px) {
    .server-info-panel {
        position: static;
        margin: 0 0 0.6rem 0;
        width: 100%;
        z-index: auto;
        clip-path: none;
        border-radius: 0;
    }

    .console-page {
        max-width: none;
        min-height: auto;
        padding: 0.25rem 0.35rem 1rem;
        gap: 0.65rem;
    }

    .console-header {
        gap: 8px;
        padding: 0.65rem 0.7rem;
    }

    .status-item {
        font-size: 0.78rem;
    }

    .console-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .console-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .console-output,
    .console-input,
    .console-stub,
    .console-settings,
    .players-panel,
    .donate-panel {
        padding: 0.7rem;
    }

    .console-actions .action-dropdown {
        width: 100%;
        min-width: 0;
    }

    .console-actions .action-btn {
        max-width: none;
        min-height: 42px;
    }

    /* ServersAll: в узкой колонке те же 2 колонки, что и в 960px */
    .servers-tools .tools-actions .tools-split-dropdown,
    .servers-tools .tools-actions > .action-dropdown:not(.tools-split-dropdown) {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: min(160px, 100%);
        max-width: 100%;
    }

    .servers-tools .tools-actions .tools-split-main {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        font-size: 0.72rem;
    }

    .action-dropdown .restart-main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .console-actions .action-dropdown-menu {
        min-width: min(100%, 220px);
    }

    .action-dropdown-menu {
        min-width: 100%;
    }

    .donate-filters {
        gap: 0.55rem;
    }

    .donate-search {
        min-width: 0;
        width: 100%;
    }

    .donate-filter-buttons {
        width: 100%;
    }

    .donate-toolbar {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .console-page {
        padding: 0.2rem 0.15rem 0.9rem;
    }

    .server-info-panel {
        padding: 0.55rem 0.6rem;
        gap: 8px;
    }

    .server-icon i {
        font-size: 18px;
    }

    .server-name {
        font-size: 0.9rem;
    }

    .node-name,
    .server-id {
        font-size: 0.7rem;
    }

    .console-main {
        gap: 0.55rem;
    }

    /* Шесть строк «label: value» занимали треть экрана. Здесь это два ряда
       по три компактных блока — значение под подписью. */
    .console-header {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem 0.5rem;
        padding: 0.5rem 0.6rem;
        text-align: left;
    }

    .status-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.1rem;
        min-width: 0;
    }

    .status-item .label {
        font-size: 0.56rem;
        letter-spacing: 0.06em;
        opacity: 0.75;
    }

    .status-item .value {
        font-size: 0.74rem;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Консоль выше на треть: место освободили статусы и уехавший вниз блок действий. */
    .console-output {
        flex-basis: 55vh;
        height: 55vh;
        min-height: 55vh;
        max-height: 55vh;
    }

    .output-lines {
        font-size: 0.74rem;
        line-height: 1.42;
        padding-right: 8px;
    }

    .players-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.2rem;
    }

    .player-card-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.18rem 0.1rem;
        gap: 0.12rem;
    }

    .player-card-avatar {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        font-size: 0.52rem;
    }

    .player-card-name {
        font-size: 0.55rem;
        line-height: 1.12;
        white-space: normal;
        line-clamp: 2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .player-card-meta {
        justify-content: center;
        gap: 0.06rem;
    }

    .player-card-chip {
        font-size: 0.4rem;
        padding: 0.02rem 0.08rem;
        gap: 0.05rem;
    }

    .player-card-chip i {
        font-size: 0.34rem;
    }

    .player-card-action {
        display: none;
    }

    .player-card-steam {
        font-size: 0.42rem;
        padding: 0.08rem 0.18rem;
        line-height: 1.1;
    }

    .player-nick,
    .player-risk {
        font-size: 0.62rem;
    }

    .donate-grid {
        grid-template-columns: 1fr;
    }

    .donate-toolbar {
        justify-content: stretch;
    }

    .donate-toolbar-btn {
        flex: 1 1 auto;
    }

    .donate-toolbar-btn.add {
        flex: 0 0 auto;
    }

    .donate-editor-modal {
        width: calc(100vw - 0.5rem);
        max-height: calc(100vh - 0.5rem);
    }

    .donate-editor-modal .modal-header,
    .donate-editor-modal .modal-footer {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .donate-editor-modal .modal-body {
        max-height: calc(100vh - 9.5rem);
        padding: 0.55rem 0.6rem;
    }

    .action-dropdown:hover .action-dropdown-menu,
    .action-dropdown:focus-within .action-dropdown-menu {
        display: flex;
        position: static;
        width: 100%;
        margin-top: 0.15rem;
    }
}
.dashboard-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 1.3rem 1.4rem 1.4rem;
    position: relative;
    overflow: visible;
    min-width: 0;
    max-width: 100%;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    clip-path: var(--clip-angle-br);
}

.section-icon i {
    font-size: 1.1rem;
}

.section-header h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.dashboard-cards {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dashboard-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem 0.9rem;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 0;
    border: 1px solid transparent;
}

.dashboard-card:hover {
    border-color: rgba(196, 63, 43, 0.8);
    background: rgba(196, 63, 43, 0.16);
    transform: translateY(-1px);
}

/* Плитки разделов на главной держат общую высоту: описания у пунктов разной
   длины, часть переносится на вторую строку, и без этого разъезжались и сами
   карточки, и нижние края колонок. 5.4rem — замеренная высота карточки с
   описанием в две строки, то есть самый длинный из существующих вариантов:
   текст не режется. Селектор через `.dashboard-grid` намеренно — тот же класс
   используют профиль, 2FA и версии, а там плитки другого содержания и общая
   высота им не нужна. */
.dashboard-grid .dashboard-card {
    min-height: 5.4rem;
}

.dashboard-grid .card-content {
    min-width: 0;
}

/* Больше двух строк описание не занимает — иначе общая высота снова уедет. */
.dashboard-grid .card-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.card-icon {
    width: 32px;
    text-align: center;
}

.card-icon i {
    font-size: 1.25rem;
}

.card-content h3 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.1rem;
}

.card-content p {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.card-arrow {
    margin-left: auto;
    font-size: 0.9rem;
    opacity: 0.6;
}

/* ==================== RESPONSIVE ==================== */

/* ==================== RESPONSIVE ==================== */
@media (max-width: 960px) {
    :root {
        --navbar-height: 72px;
    }

    .navbar {
        padding: 0.65rem 1rem;
        min-height: var(--navbar-height);
        align-items: center;
    }

    .navbar .logo {
        flex: 1;
        min-width: 0;
        font-size: 0.82rem;
        align-items: center;
    }

    .logo-current {
        font-size: 0.82rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar .user-dropdown {
        flex: 0 0 auto;
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    .navbar .user-dropdown > .user-button {
        min-height: 48px;
        padding: 0.5rem 0.9rem;
        font-size: 0.78rem;
        box-sizing: border-box;
    }

    .nav-menu {
        display: none;
    }

    .main-container {
        padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        margin-top: var(--navbar-height);
    }

    .admin-footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 0.72rem;
        line-height: 1.45;
        padding: 0.75rem 1rem 0.85rem;
        gap: 0.35rem 0.5rem;
        row-gap: 0.4rem;
        background: rgba(4, 6, 10, 0.99);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .admin-footer-left,
    .admin-footer-center,
    .admin-footer-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem 0.45rem;
        width: 100%;
        max-width: 100%;
    }

    .admin-footer-center-link {
        font-size: 0.68rem;
        padding: 0.15rem 0;
    }

    .admin-footer-link {
        font-size: 0.7rem;
        gap: 0.35rem;
        padding: 0.35rem 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 4px;
        justify-content: center;
        max-width: 100%;
    }

    .admin-footer-link span {
        font-size: 0.68rem;
        letter-spacing: 0.04em;
    }

    .admin-footer-link i {
        font-size: 1rem;
    }

    /* Кнопки и счётчик онлайна — одной строкой: счётчик занимал отдельную
       строку, хотя справа от «Выделения» было пусто. */
    .servers-tools {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .tools-left {
        width: auto;
        flex: 1 1 auto;
        justify-content: flex-start;
        gap: 0.4rem;
    }

    .tools-right {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
    }

    .tools-actions {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        gap: 0.4rem;
    }

    .servers-tools .tools-actions > button,
    .servers-tools .tools-actions > .tools-split-dropdown {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: min(160px, 100%);
        max-width: 100%;
    }

    .servers-tools .tools-actions .tools-split-dropdown {
        display: inline-flex;
    }

    .servers-tools .tools-actions .tools-split-main {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        text-align: center;
        font-size: 0.72rem;
        padding: 0.4rem 0.45rem;
    }

    .servers-tools .tools-actions .tools-split-caret {
        flex: 0 0 auto;
    }

    .tools-left .btn-select-mode,
    .tools-left .btn-add-server,
    .tools-left .btn-refresh {
        flex: 0 0 auto;
    }

    /* Кнопка и счётчик ужаты ровно настолько, чтобы вместе с «плюсом» и
       обновлением уместиться в одну строку на 360px. */
    .tools-left .btn-select-mode {
        padding: 0.4rem 0.6rem;
        font-size: 0.72rem;
        gap: 0.35rem;
    }

    .tools-right .online-pill {
        padding: 0.3rem 0.55rem;
        font-size: 0.85rem;
        gap: 0.4rem;
    }

    .tools-quick-select {
        width: 100%;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1400px) {
    .main-content {
        max-width: 1680px;
    }

    .dashboard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .servers-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* ==================== COOKIE BANNER ==================== */
.cookie-banner {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    max-width: 288px;
    padding: 0.55rem 0.7rem;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    line-height: 1.35;
    display: none;
    z-index: 2000;
}

.cookie-text {
    margin-bottom: 0.4rem;
}

.cookie-link {
    color: var(--color-primary);
}

.cookie-link:hover {
    color: #ffffff;
}

.cookie-btn {
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: #ffffff;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.cookie-btn:hover {
    background: var(--color-primary);
}

@media (max-width: 576px) {
    .cookie-banner {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        max-width: none;
        width: calc(100% - 1.5rem);
        padding: 0.5rem 0.65rem;
        font-size: 0.65rem;
    }

    .cookie-text {
        margin-bottom: 0.35rem;
    }

    .cookie-btn {
        padding: 0.25rem 0.6rem;
        font-size: 0.6rem;
    }
}

/* ==================== SERVERS FILES MODAL (ServersAllFilesModal) ==================== */
.sfm-backdrop {
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.sfm-modal {
    width: min(1400px, 96vw);
    height: min(900px, 92vh);
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: rgba(14, 16, 22, 0.98);
    border: 1px solid var(--color-border);
    border-radius: 0;
}

.sfm-header {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.sfm-header .modal-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1rem;
}

.sfm-servers-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.sfm-servers-tabs {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.sfm-server-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 0.35rem 0.65rem;
    border-radius: 0;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.sfm-server-tab:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-main);
}

.sfm-server-tab.active {
    background: rgba(196, 63, 43, 0.2);
    border-color: var(--color-primary);
    color: #fff;
}

.sfm-server-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sfm-server-tab-label {
    font-weight: 600;
}

.sfm-server-tab-node {
    font-size: 0.7rem;
    opacity: 0.7;
}

.sfm-apply-mode {
    flex: 0 0 auto;
}

.sfm-apply-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
}

.sfm-apply-check input[type="checkbox"] {
    margin: 0;
}

.sfm-apply-check:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.2);
}

.sfm-path-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.25);
}

.sfm-path-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 0.35rem 0.55rem;
    border-radius: 0;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.sfm-path-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-main);
}

.sfm-path-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sfm-path-btn.primary {
    background: rgba(196, 63, 43, 0.18);
    border-color: var(--color-primary);
    color: #fff;
}

.sfm-path-btn.primary:hover:not(:disabled) {
    background: rgba(196, 63, 43, 0.35);
}

.sfm-path-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 0.4rem 0.6rem;
    border-radius: 0;
    font-family: "Consolas", "Fira Code", monospace;
    font-size: 0.8rem;
    outline: none;
}

.sfm-path-input:focus {
    border-color: var(--color-primary);
}

.sfm-body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    min-height: 0;
    overflow: hidden;
}

.sfm-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.sfm-pane-list {
    border-right: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.15);
}

.sfm-pane-editor {
    background: rgba(0, 0, 0, 0.08);
}

.sfm-pane-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sfm-current-path {
    font-family: "Consolas", "Fira Code", monospace;
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 0;
    word-break: break-all;
}

.sfm-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.3rem 0;
}

.sfm-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    border-left: 2px solid transparent;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}

.sfm-row:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-main);
}

.sfm-row.active {
    background: rgba(196, 63, 43, 0.18);
    color: #fff;
    border-left-color: var(--color-primary);
}

.sfm-row > i {
    width: 1rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.85;
}

.sfm-row-back > i {
    color: var(--color-accent);
}

.sfm-row-dir > i {
    color: #ffb347;
}

.sfm-row-file.binary {
    opacity: 0.85;
}

.sfm-row-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfm-row-meta {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.sfm-row-chevron {
    font-size: 0.7rem !important;
    opacity: 0.6 !important;
}

.sfm-editor-header {
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
}

.sfm-editor-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
}

.sfm-editor-title code {
    font-family: "Consolas", "Fira Code", monospace;
    font-size: 0.8rem;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfm-dirty-dot {
    color: var(--color-accent);
    font-size: 0.9rem;
}

.sfm-editor-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sfm-action-btn,
.sfm-action-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 0.35rem 0.65rem;
    border-radius: 0;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.sfm-action-btn:hover:not(:disabled),
.sfm-action-file-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sfm-action-btn:disabled,
.sfm-action-file-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.sfm-action-btn.primary {
    background: rgba(196, 63, 43, 0.25);
    border-color: var(--color-primary);
}

.sfm-action-btn.primary:hover:not(:disabled) {
    background: rgba(196, 63, 43, 0.45);
}

.sfm-editor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.6rem 0.75rem 0.75rem;
    gap: 0.5rem;
}

.sfm-editor-textarea {
    flex: 1;
    min-height: 260px;
    background: #0b0d12;
    color: #e7e7e7;
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0.6rem 0.75rem;
    font-family: "Consolas", "Fira Code", "Cascadia Code", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre;
    overflow: auto;
    resize: none;
    tab-size: 4;
    -moz-tab-size: 4;
    outline: none;
}

.sfm-editor-textarea:focus {
    border-color: var(--color-primary);
}

.sfm-loading,
.sfm-empty,
.sfm-hint {
    padding: 1rem 0.85rem;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    text-align: center;
}

.sfm-error {
    padding: 0.75rem 0.85rem;
    color: #ff9c8a;
    background: rgba(196, 63, 43, 0.08);
    border: 1px solid rgba(196, 63, 43, 0.3);
    border-radius: 0;
    font-size: 0.8rem;
    white-space: pre-wrap;
    margin: 0.5rem 0.75rem;
}

.sfm-status {
    padding: 0.5rem 0.7rem;
    border-radius: 0;
    font-size: 0.78rem;
    white-space: pre-wrap;
    border: 1px solid transparent;
}

.sfm-status.success {
    color: #b8efc6;
    background: rgba(46, 160, 67, 0.12);
    border-color: rgba(46, 160, 67, 0.4);
}

.sfm-status.error {
    color: #ffb3a8;
    background: rgba(196, 63, 43, 0.12);
    border-color: rgba(196, 63, 43, 0.4);
}

.sfm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.25);
}

.sfm-footer-hint {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* Tools-actions: Files button */
.tools-actions .btn-files {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 900px) {
    .sfm-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(180px, 35%) 1fr;
    }

    .sfm-pane-list {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
}

/* ==================== RECYCLER CONFIG MODAL (ServerRecyclerConfigModal) ==================== */
.rcm-backdrop {
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.rcm-modal {
    width: min(1100px, 96vw);
    height: min(880px, 92vh);
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: rgba(14, 16, 22, 0.98);
    border: 1px solid var(--color-border);
    border-radius: 0;
}

.rcm-header {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.rcm-header .modal-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1rem;
}

.rcm-path-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.25);
    flex-wrap: wrap;
}

.rcm-path-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rcm-path {
    font-family: "Consolas", "Fira Code", monospace;
    font-size: 0.78rem;
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.12rem 0.45rem;
    border-radius: 0;
    word-break: break-all;
}

.rcm-path-server {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    opacity: 0.8;
    margin-left: auto;
}

.rcm-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 0.35rem 0.6rem;
    border-radius: 0;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.rcm-toolbar-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-main);
}

.rcm-toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rcm-toolbar-btn.primary {
    background: rgba(196, 63, 43, 0.22);
    border-color: var(--color-primary);
    color: #fff;
}

.rcm-toolbar-btn.primary:hover:not(:disabled) {
    background: rgba(196, 63, 43, 0.4);
}

.rcm-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rcm-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.rcm-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rcm-field-label {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rcm-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 0.28rem 0.5rem;
    border-radius: 0;
    font-family: "Consolas", "Fira Code", monospace;
    font-size: 0.78rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.rcm-input:focus {
    border-color: var(--color-primary);
}

.rcm-input.rcm-amount {
    max-width: 100px;
}

.rcm-input.rcm-search {
    min-width: 240px;
    font-family: inherit;
}

.rcm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--color-border);
    margin-top: 0.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rcm-section-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.rcm-empty {
    padding: 0.75rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--color-border);
    font-size: 0.82rem;
    text-align: center;
    margin: 0;
}

.rcm-empty.small {
    padding: 0.45rem;
    font-size: 0.75rem;
}

.rcm-entries {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rcm-entry {
    border: 1px solid var(--color-border);
    background: rgba(5, 7, 12, 0.55);
    padding: 0.3rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rcm-entry.collapsed {
    padding: 0.18rem 0.4rem;
}

.rcm-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    min-height: 1.6rem;
}

.rcm-entry.collapsed .rcm-entry-header {
    gap: 0.5rem;
}

.rcm-entry-header-actions {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    flex: 0 0 auto;
}

.rcm-entry-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.rcm-entry-summary {
    font-family: "Consolas", "Fira Code", monospace;
    font-size: 0.76rem;
    color: var(--color-text-main);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.rcm-entry-num {
    color: var(--color-primary);
    font-weight: 600;
}

.rcm-entry-sep {
    font-size: 0.7rem;
    opacity: 0.6;
}

.rcm-entry-from {
    color: var(--color-text-main);
}

.rcm-entry-from-row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0.4rem;
    align-items: center;
}

.rcm-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rcm-sub-header i {
    margin-right: 0.25rem;
    color: var(--color-accent);
}

.rcm-adds {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.rcm-add-row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 90px 1fr auto;
    gap: 0.35rem;
    align-items: center;
}

.rcm-hint-inline {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.rcm-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-main);
}

.rcm-icon-btn.rcm-icon-danger {
    color: var(--color-danger, #c43f2b);
}

.rcm-icon-btn.rcm-icon-danger:hover {
    background: rgba(196, 63, 43, 0.15);
    border-color: var(--color-primary);
}

.rcm-icon-btn.rcm-icon-primary {
    background: rgba(196, 63, 43, 0.18);
    border-color: var(--color-primary);
    color: #fff;
}

.rcm-icon-btn.rcm-icon-primary:hover {
    background: rgba(196, 63, 43, 0.4);
}

.rcm-hint {
    padding: 1rem 0.85rem;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    text-align: center;
}

.rcm-error {
    padding: 0.75rem 0.85rem;
    color: #ff9c8a;
    background: rgba(196, 63, 43, 0.08);
    border: 1px solid rgba(196, 63, 43, 0.3);
    border-radius: 0;
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.rcm-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.25);
}

.rcm-footer-spacer {
    flex: 1;
}

.rcm-status {
    font-size: 0.78rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid transparent;
    white-space: pre-wrap;
}

.rcm-status.success {
    color: #b8efc6;
    background: rgba(46, 160, 67, 0.12);
    border-color: rgba(46, 160, 67, 0.4);
}

.rcm-status.error {
    color: #ffb3a8;
    background: rgba(196, 63, 43, 0.12);
    border-color: rgba(196, 63, 43, 0.4);
}

/* Console-tabs: icon-only configurator buttons (right cluster) */
.console-tab.console-tab-configurator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    padding: 0.35rem 0.55rem;
}

.console-tab.console-tab-configurator i {
    font-size: 0.85rem;
}

@media (max-width: 860px) {
    .rcm-top-grid {
        grid-template-columns: 1fr;
    }

    .rcm-entry-from-row,
    .rcm-add-row {
        grid-template-columns: 1fr;
    }

    .rcm-input.rcm-amount {
        max-width: none;
    }

    .rcm-icon-btn {
        justify-self: end;
    }

    .console-tabs {
        flex-wrap: wrap;
    }

    .console-tabs-right {
        margin-left: 0;
    }
}

/* ==================== TABLES CONFIG MODAL (ServerTablesConfigModal) ==================== */
.tcm-modal {
    width: min(1300px, 98vw);
    height: min(920px, 94vh);
    max-width: 98vw;
    max-height: 94vh;
}

.tcm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.2);
}

.tcm-tab {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tcm-tab:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-text-main);
}

.tcm-tab.active {
    background: rgba(106, 160, 255, 0.12);
    border-color: rgba(106, 160, 255, 0.6);
    color: #cfe0ff;
}

.tcm-tab-count {
    font-size: 0.68rem;
    opacity: 0.7;
    padding: 0.05rem 0.3rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0;
    min-width: 1.2rem;
    text-align: center;
}

.tcm-body {
    overflow: auto;
}

.tcm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem 0.45rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-wrap: wrap;
}

.rcm-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.rcm-input.rcm-search {
    min-width: 180px;
    max-width: 260px;
    font-size: 0.76rem;
    padding: 0.22rem 0.45rem;
    text-transform: none;
    letter-spacing: 0;
}

.tcm-group-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 0.5rem;
    padding: 0.3rem 0.1rem 0.1rem 0.1rem;
}

.tcm-loot-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.15rem 0;
}

.tcm-loot-head,
.tcm-loot-row {
    display: grid;
    grid-template-columns: 110px 80px 100px 70px 70px 1fr 1.6rem;
    gap: 0.3rem;
    align-items: center;
}

.tcm-loot-head {
    font-size: 0.66rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
    padding: 0 0.2rem;
}

.tcm-loot-row .rcm-input {
    padding: 0.2rem 0.4rem;
    font-size: 0.76rem;
}

.tcm-loot-row .rcm-hint-inline {
    font-size: 0.7rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcm-grid-grows {
    grid-template-columns: 110px 110px 90px 90px 110px 1fr 1.6rem;
}

.tcm-grid-tool {
    grid-template-columns: 110px 80px 100px 90px 100px 100px 1fr 1.6rem;
}

.tcm-grid-cactus {
    grid-template-columns: 1fr 110px 110px 80px 1.3fr 1.6rem;
}

.tcm-ids-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.1rem 0.1rem 0.2rem 0.1rem;
}

.tcm-id-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    padding: 0.15rem 0.3rem;
}

.tcm-id-row .rcm-input {
    width: 78px;
    padding: 0.2rem 0.4rem;
    font-size: 0.76rem;
}

.tcm-id-row .rcm-hint-inline {
    font-size: 0.7rem;
    opacity: 0.7;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcm-empty.small {
    font-size: 0.74rem;
    padding: 0.3rem 0.1rem;
    opacity: 0.7;
}

@media (max-width: 980px) {
    .tcm-group-fields {
        grid-template-columns: 1fr 1fr;
    }

    .tcm-loot-head,
    .tcm-loot-row {
        grid-template-columns: 90px 70px 90px 60px 60px 1fr 1.6rem;
    }

    .tcm-grid-grows {
        grid-template-columns: 90px 90px 80px 80px 90px 1fr 1.6rem;
    }

    .tcm-grid-tool {
        grid-template-columns: 90px 70px 90px 80px 90px 90px 1fr 1.6rem;
    }
}

@media (max-width: 720px) {
    .tcm-group-fields {
        grid-template-columns: 1fr;
    }

    .tcm-loot-head {
        display: none;
    }

    .tcm-loot-row,
    .tcm-loot-row.tcm-grid-grows,
    .tcm-loot-row.tcm-grid-tool,
    .tcm-loot-row.tcm-grid-cactus {
        grid-template-columns: 1fr 1fr auto;
    }
}

/* === Settings configurator modal shell === */
.scm-modal {
    width: min(900px, 96vw);
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

.scm-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.12);
}

.scm-body .console-settings {
    border-radius: 0;
}

/* === Donates configurator modal shell === */
.dcm-modal {
    width: min(1300px, 98vw);
    height: min(920px, 94vh);
    max-width: 98vw;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

.dcm-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.12);
}

.dcm-body .donate-panel {
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.dcm-body .donate-grid {
    margin-top: 0.6rem;
}

/* ==================== PLAYERS GRID (PLAYER CARDS) ==================== */
.players-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    width: 100%;
}

.players-toolbar .players-search-wrap {
    flex: 1 1 140px;
    min-width: 0;
    margin-right: auto;
}

.players-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.45rem 0.2rem 0.4rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--color-border);
    border-radius: 2px;
}

.players-search-icon {
    flex: 0 0 auto;
    font-size: 0.65rem;
    opacity: 0.55;
    color: var(--color-text-secondary);
}

.players-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--color-text-main);
    font: inherit;
    font-size: 0.78rem;
    padding: 0.2rem 0;
    outline: none;
}

.players-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.players-search-empty {
    margin: 0.5rem 0 0 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.player-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: #05070c;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    text-align: left;
    cursor: default;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
    font: inherit;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.player-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    background: rgba(196, 63, 43, 0.06);
}

.player-card:focus-within {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(196, 63, 43, 0.35);
}

.player-card-main {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.32rem 0.38rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    flex: 1 1 auto;
}

.player-card-main:hover {
    background: rgba(255, 255, 255, 0.02);
}

.player-card-main:focus-visible {
    outline: none;
}

.player-card-steam {
    display: block;
    padding: 0.18rem 0.38rem 0.26rem;
    font-size: 0.56rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: rgba(147, 197, 255, 0.95);
    text-decoration: none;
    border-top: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card-steam:hover {
    color: #b8d9ff;
    background: rgba(147, 197, 255, 0.08);
}

.player-card-avatar {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(196, 63, 43, 0.25), rgba(255, 122, 60, 0.15));
    border: 1px solid rgba(196, 63, 43, 0.35);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.player-card-avatar--has-image {
    padding: 0;
    border-color: rgba(255, 255, 255, 0.12);
}

.player-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.player-card-avatar-fallback {
    position: relative;
    z-index: 1;
}

.player-card-avatar i.player-card-avatar-fallback {
    font-size: 0.52rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.player-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

.player-card-name {
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-main);
}

.player-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.16rem;
}

.player-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.14rem;
    padding: 0.04rem 0.22rem;
    font-size: 0.56rem;
    line-height: 1.2;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 2px;
}

.player-card-chip i {
    font-size: 0.48rem;
    opacity: 0.8;
}

.player-card-action {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 0.06rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.58rem;
    transition: color 0.16s ease;
}

.player-card-main:hover .player-card-action {
    color: var(--color-primary);
}

/* ==================== PLAYER MODERATION MODAL ==================== */
.player-mod-modal {
    width: min(860px, 96vw);
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pmm-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.95rem 1.1rem 1.1rem;
}

.pmm-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
}

.pmm-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pmm-summary-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.pmm-summary-value {
    font-size: 0.92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmm-flag {
    font-size: 1rem;
    line-height: 1;
}

.pmm-muted {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.pmm-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 620px) {
    .pmm-grid-2 {
        grid-template-columns: 1fr;
    }
}

.pmm-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pmm-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.pmm-input-row {
    display: flex;
    gap: 0.35rem;
    align-items: stretch;
}

.pmm-input-row .input-field {
    flex: 1 1 auto;
    min-width: 0;
}

.pmm-icon-btn {
    flex: 0 0 auto;
    width: 36px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.pmm-icon-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(196, 63, 43, 0.08);
}

.pmm-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pmm-warn {
    font-size: 0.72rem;
    color: #e8b945;
}

.pmm-warn-strong {
    color: #ff5252;
    font-weight: 600;
    margin-top: 0.2rem;
}

.pmm-section {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.015);
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pmm-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text-main);
}

.pmm-section-hint {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.pmm-ban-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 0.4rem;
}

@media (max-width: 560px) {
    .pmm-ban-row {
        grid-template-columns: 1fr;
    }
}

.pmm-ban-term,
.pmm-ban-reason {
    min-width: 0;
}

.pmm-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.pmm-action-status {
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.pmm-action-status.error {
    border-color: rgba(255, 82, 82, 0.4);
    color: #ff8a8a;
    background: rgba(255, 82, 82, 0.08);
}

.pmm-action-status.success {
    border-color: rgba(72, 191, 128, 0.4);
    color: #8ae0ab;
    background: rgba(72, 191, 128, 0.08);
}

.pmm-vpn-result {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.pmm-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pmm-badge.good {
    color: #8ae0ab;
    background: rgba(72, 191, 128, 0.1);
    border-color: rgba(72, 191, 128, 0.4);
}

.pmm-badge.bad {
    color: #ff8a8a;
    background: rgba(255, 82, 82, 0.12);
    border-color: rgba(255, 82, 82, 0.45);
}

.pmm-risk {
    color: inherit;
}

.pmm-vpn-detail {
    font-size: 0.75rem;
}

.pmm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
}

.pmm-stat {
    padding: 0.55rem 0.65rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pmm-stat-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.pmm-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
}

.pmm-stat-small {
    font-size: 0.78rem;
    font-weight: 500;
}

.pmm-events {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.015);
    padding: 0.35rem 0.55rem;
}

.pmm-events summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    padding: 0.2rem 0;
}

.pmm-events[open] summary {
    margin-bottom: 0.35rem;
    color: var(--color-text-main);
}

.pmm-events-list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    border-top: 1px solid var(--color-border);
}

.pmm-event-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 0.5rem;
    padding: 0.3rem 0.1rem;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.pmm-event-row:last-child {
    border-bottom: none;
}

.pmm-event-time {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pmm-event-victim code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--color-text-main);
}

.pmm-event-head {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.pmm-event-head.yes {
    color: #ff8a8a;
    font-weight: 600;
}


/* ==================== Bans ====================
   Десктоп — таблица, мобилы — карточки. Углы срезаны clip-path, без border-radius. */

.bans-head-btn {
    margin-left: auto;
}

/* —— Поиск —— */
.bans-search-bar {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    margin: 0.75rem 0 0.6rem;
}

.bans-search-input {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
    padding: 0 0.55rem;
}

.bans-search-input > i {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    flex: none;
}

.bans-search-field {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--color-text-main);
    font-size: 0.78rem;
    padding: 0.5rem 0.5rem;
}

.bans-search-field::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.bans-search-clear {
    background: transparent;
    border: 0;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    font-size: 0.78rem;
}

.bans-search-clear:hover {
    color: var(--color-primary);
}

/* —— Фильтры-чипы —— */
.bans-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin-bottom: 0.7rem;
}

.bans-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.bans-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    padding: 0.26rem 0.6rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.bans-chip:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.2);
}

.bans-chip--on {
    background: rgba(196, 63, 43, 0.16);
    border-color: var(--color-primary);
    color: #fff;
}

/* —— Таблица —— */
.bans-table-panel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.bans-data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.7rem;
    line-height: 1.3;
}

.bans-data-table th,
.bans-data-table td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.bans-data-table thead th {
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.bans-row {
    cursor: pointer;
    transition: background 0.12s;
}

.bans-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.bans-col-id { width: 3.2rem; }
.bans-col-player { width: 17%; }
.bans-col-reason { width: 20%; }
.bans-col-term { width: 5.5rem; }
.bans-col-scope { width: 9%; }
.bans-col-time { width: 6.5rem; }
.bans-col-admin { width: 10%; }
.bans-col-state { width: 5.5rem; }

.bans-td-num {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.bans-td-center { text-align: center; }

.bans-td-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bans-td-empty {
    text-align: center;
    padding: 1.4rem 0.5rem;
    color: var(--color-text-secondary);
}

.bans-stack {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bans-sub {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
}

/* Пометки строки (идентификаторы, заметка) — в один ряд: родитель .bans-stack
   выстраивает детей столбиком, и каждый значок иначе занимает отдельную строку. */
.bans-marks {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.bans-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.63rem;
    color: var(--color-text-secondary);
}

.bans-clip {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

/* —— Бейджи состояния —— */
.bans-state {
    display: inline-block;
    font-size: 0.62rem;
    padding: 0.16rem 0.45rem;
    border: 1px solid transparent;
    white-space: nowrap;
}

.bans-state--active {
    background: rgba(196, 63, 43, 0.18);
    border-color: rgba(196, 63, 43, 0.65);
    color: #ff9d8c;
}

.bans-state--revoked {
    background: rgba(149, 196, 67, 0.14);
    border-color: rgba(149, 196, 67, 0.5);
    color: #b6d96f;
}

.bans-state--expired {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.bans-term {
    display: inline-block;
    font-size: 0.63rem;
    padding: 0.14rem 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.bans-term--perm {
    background: rgba(196, 63, 43, 0.2);
    border-color: rgba(196, 63, 43, 0.6);
    color: #ff9d8c;
}

.bans-badge {
    display: inline-block;
    font-size: 0.62rem;
    padding: 0.14rem 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.bans-badge--enforce {
    background: rgba(196, 63, 43, 0.2);
    border-color: rgba(196, 63, 43, 0.6);
    color: #ff9d8c;
}

.bans-badge--count {
    background: rgba(255, 255, 255, 0.08);
}

/* —— Карточки (мобилы) —— */
.bans-cards {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.bans-card {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.03);
    clip-path: var(--clip-angle-br);
    padding: 0.65rem 0.7rem;
    cursor: pointer;
}

.bans-card:active {
    background: rgba(255, 255, 255, 0.06);
}

.bans-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.bans-card-id {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.bans-card-player {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.3rem;
    min-width: 0;
}

.bans-card-name {
    font-size: 0.86rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bans-card-reason {
    font-size: 0.78rem;
    margin-bottom: 0.45rem;
    overflow-wrap: anywhere;
}

.bans-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    font-size: 0.66rem;
    color: var(--color-text-secondary);
}

.bans-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.bans-card-empty {
    text-align: center;
    padding: 1.4rem 0.5rem;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* —— Пагинация —— */
.bans-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
    margin-top: 0.7rem;
    font-size: 0.7rem;
}

.bans-page-meta {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* —— Модалки —— */
.bans-modal {
    width: min(46rem, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.bans-modal-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bans-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.6rem 0.9rem;
}

.bans-block {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.65rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bans-block-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.bans-hint {
    font-size: 0.66rem;
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.bans-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
}

.bans-radio,
.bans-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    cursor: pointer;
}

/* —— Конструктор идентификаторов —— */
.bans-ident-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.bans-ident-type {
    flex: 0 0 9rem;
    min-width: 0;
}

.bans-ident-label {
    flex: 0 0 9rem;
    min-width: 0;
}

.bans-ident-value {
    flex: 1 1 12rem;
    min-width: 0;
}

.bans-ident-enforce {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.bans-ident-del {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}

.bans-ident-del:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* —— Детали бана —— */
.bans-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.bans-detail-name {
    font-size: 1rem;
    font-weight: 600;
}

.bans-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bans-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
}

.bans-detail-grid dt {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 0.1rem;
}

.bans-detail-grid dd {
    margin: 0;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.bans-detail-ident {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.bans-detail-ident .bans-mono {
    flex: 1 1 8rem;
    min-width: 0;
}

/* Кнопка сохранения заметки и подсказка — в одну строку. Перенос разрешён, но
   подсказка получает базу 12rem: на ширине модалки обе влезают в строку, а на
   телефоне подсказка уезжает под кнопку вместо того, чтобы сжаться в столбик букв. */
.bans-note-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    margin-top: 0.5rem;
}

.bans-note-actions .bans-hint {
    flex: 1 1 12rem;
    min-width: 0;
}

.bans-lookup {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.45rem;
}

.bans-lookup-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    font-size: 0.72rem;
}

.bans-lookup-row .bans-clip {
    flex: 1 1 8rem;
    min-width: 0;
}

/* —— Мобильная адаптация: таблица уходит, приходят карточки —— */
@media (max-width: 900px) {
    .bans-table-panel {
        display: none;
    }

    .bans-cards {
        display: flex;
    }

    .bans-head-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .bans-search-bar {
        flex-wrap: wrap;
    }

    .bans-search-input {
        flex: 1 1 100%;
    }

    .bans-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        clip-path: none;
    }

    .bans-ident-type,
    .bans-ident-label {
        flex: 1 1 100%;
    }

    .bans-ident-value {
        flex: 1 1 100%;
    }
}


/* ==================== WALLET — переработка ====================
   Блок идёт последним намеренно: перекрывает старые правила той же
   специфичности без правки разбросанных по файлу кусков. */

/* —— Поиск —— */
.wallet-search-bar {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    margin: 0.75rem 0 0.6rem;
}

.wallet-search-input {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
    padding: 0 0.55rem;
}

.wallet-search-input > i {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    flex: none;
}

.wallet-search-field {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--color-text-main);
    font-size: 0.8rem;
    padding: 0.5rem 0;
}

.wallet-search-field::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.wallet-search-clear {
    background: transparent;
    border: 0;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.25rem;
}

.wallet-search-clear:hover {
    color: var(--color-primary);
}

/* —— Сортировка —— */
/* На десктопе сортировка живёт в заголовках таблицы, чипсы включаются
   только в мобильной раскладке, где таблица скрыта (см. медиазапрос ниже). */
.wallet-sort-chips {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}

.wallet-sort-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    padding: 0.26rem 0.6rem;
    cursor: pointer;
}

.wallet-sort-chip:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.2);
}

.wallet-sort-chip--on {
    background: rgba(196, 63, 43, 0.16);
    border-color: var(--color-primary);
    color: #fff;
}

/* Фильтр статусов в журнале пополнений — те же чипсы, но видны всегда:
   на мобиле у карточек платежей другого способа отфильтровать нет. */
.wallet-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}

/* —— Статус платежа —— */
.wallet-status {
    display: inline-block;
    padding: 0.14rem 0.45rem;
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.wallet-status--ok {
    border-color: rgba(149, 196, 67, 0.55);
    background: rgba(149, 196, 67, 0.14);
    color: #95C443;
}

.wallet-status--wait {
    border-color: rgba(224, 168, 47, 0.55);
    background: rgba(224, 168, 47, 0.14);
    color: #E0A82F;
}

.wallet-status--fail {
    border-color: rgba(196, 63, 43, 0.6);
    background: rgba(196, 63, 43, 0.16);
    color: #E06A55;
}

.wallet-status--back {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
}

/* —— Таблица —— */
.wallet-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    padding: 0;
}

.wallet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
    min-width: 0;
}

.wallet-table th,
.wallet-table td {
    padding: 0.45rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.wallet-table thead th {
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.wallet-table thead th.wallet-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.12s, background 0.12s;
}

.wallet-table thead th.wallet-th-sort:hover {
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.07);
}

.wallet-table thead th.wallet-th-sort--on {
    color: #fff;
}

.wallet-th-arrow {
    margin-left: 0.3rem;
    font-size: 0.62rem;
    opacity: 0.3;
}

.wallet-th-sort--on .wallet-th-arrow {
    opacity: 1;
    color: var(--color-primary);
}

.wallet-row {
    cursor: pointer;
    transition: background 0.12s;
}

.wallet-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.wallet-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wallet-num--total {
    font-weight: 700;
}

.wallet-row-actions {
    text-align: right;
    white-space: nowrap;
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
}

.wallet-stack {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.wallet-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

.wallet-empty {
    text-align: center;
    padding: 1.3rem 0.5rem;
    color: var(--color-text-secondary);
}

/* —— Карточки (мобилы) —— */
.wallet-cards {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.wallet-card {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.03);
    clip-path: var(--clip-angle-br);
    padding: 0.65rem 0.7rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wallet-card:active {
    background: rgba(255, 255, 255, 0.06);
}

.wallet-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.wallet-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.wallet-card-total {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.wallet-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.8rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.wallet-card-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.wallet-card-empty {
    text-align: center;
    padding: 1.3rem 0.5rem;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* —— Пагинация —— */
.wallet-paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
    margin-top: 0.7rem;
    font-size: 0.72rem;
}

.wallet-page-info {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.wallet-catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

/* —— Модалки —— */
.wallet-modal {
    width: min(42rem, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.wallet-catalog-modal {
    width: min(28rem, 96vw);
}

.wallet-modal-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.wallet-balance-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 0.9rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.03);
}

.wallet-balance-nums {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
}

.wallet-balance-nums strong {
    color: var(--color-text-main);
    font-variant-numeric: tabular-nums;
}

.wallet-balance-total strong {
    color: #95C443;
}

/* Тип операции внутри вкладки «Операция»: пополнить / бонус / списать.
   Раньше это были три соседние вкладки с одинаковыми полями — выбор один,
   и он выглядит как выбор, а не как навигация. Цвета семантические:
   приход зелёный, трата красная. */
.wallet-op-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0 0.5rem;
}

.wallet-op-kind {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 8rem;
    justify-content: center;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.wallet-op-kind:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.25);
}

.wallet-op-kind.plus.active,
.wallet-op-kind.bonus.active {
    color: #fff;
    border-color: #95C443;
    background: rgba(149, 196, 67, 0.16);
}

.wallet-op-kind.bonus.active {
    border-color: var(--color-accent);
    background: rgba(255, 122, 60, 0.14);
}

.wallet-op-kind.minus.active {
    color: #fff;
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.18);
}

/* —— Формы —— */
.wallet-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.wallet-hint {
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
}

.wallet-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Сворачиваемый блок платежа: по умолчанию закрыт, чтобы не мешать
   обычному начислению, где фиата нет вообще. */
.wallet-collapse-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
}

.wallet-collapse-toggle:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.25);
}

/* История и пополнения: две кнопки по центру под формой операции. По центру, а не во
   всю ширину, потому что это не выбор из обязательного набора — ни одна из них может быть
   не нажата, и растянутая пара читалась бы как переключатель с обязательным ответом.
   Отступ сверху отделяет их от кнопки действия, чтобы они не читались частью операции. */
.wallet-history-switch {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.3rem;
}

.wallet-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 11rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.wallet-history-btn:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.25);
}

.wallet-history-btn.active {
    color: #fff;
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.18);
}

.wallet-history-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.65rem 0.7rem;
    margin-top: 0.5rem;
}

.wallet-payment-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.65rem 0.7rem;
}

/* Валюта и способ стоят рядом: это один вопрос «чем заплатили», и по отдельной
   строке на каждый селект форма пополнения переставала помещаться в плитку главной.
   Ширины равные: коды валют короткие, но названия способов длинные, и колонка под
   содержимое сделала бы «Валюту» в палец шириной. */
.wallet-pay-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Селекты в паре: текст мельче обычного поля, иначе длинное название способа
   («Банковская карта») режется многоточием ещё до открытия списка. */
.wallet-pay-row .input-field.compact {
    width: 100%;
    min-width: 0;
    padding: 0.4rem 0.45rem;
    font-size: 0.72rem;
}

/* —— История —— */
.wallet-history {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wallet-history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.7rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.73rem;
}

.wallet-delta {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
    min-width: 4.5rem;
}

.wallet-delta--plus { color: #95C443; }
.wallet-delta--minus { color: #C43F2B; }

.wallet-history-bucket {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    padding: 0.08rem 0.35rem;
}

.wallet-history-reason {
    flex: 1 1 7rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wallet-history-actor {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    white-space: nowrap;
}

.wallet-history-date {
    white-space: nowrap;
    margin-left: auto;
}

.wallet-history-comment {
    flex: 1 1 100%;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    overflow-wrap: anywhere;
}

.wallet-modal-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

/* Кнопка действия денежной панели. Панель встраивается в чужие модалки, у которых
   свой подвал со своими кнопками, поэтому рисует свою — прижатую вправо, как в подвале. */
.wallet-panel-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border);
}

/* —— Быстрая сводка по игроку (модалка в реестре) —— */

.players-summary-block {
    margin-top: 0.85rem;
}

/* Плашка кошелька — сама себе кнопка, разворачивает историю вниз. Клик работает
   только когда есть что показывать, поэтому курсор и подсветка вешаются классом,
   а не на сам блок. Отступ сверху свой: сетка фактов над ней стоит вплотную. */
.players-wallet-strip {
    margin: 0;
}

.players-wallet-strip.is-clickable {
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.players-wallet-strip.is-clickable:hover {
    border-color: #C43F2B;
    background: rgba(196, 63, 43, 0.08);
}

.players-wallet-caret {
    margin-left: 0.35rem;
    font-size: 0.7em;
}

/* Раскрытая история прирастает к плашке снизу — без зазора и без второй рамки сверху. */
.players-wallet-strip + .players-mini-rows {
    border-top: none;
}

.players-summary-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/* Строки истории мельче обычных: их пять, и они справка, а не рабочий список. */
.players-mini-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.players-mini-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--color-border);
}

.players-mini-row:last-child {
    border-bottom: none;
}

.players-mini-main {
    flex: 1 1 8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.players-mini-sub,
.players-mini-date {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

/* Награды чипсами: коротко и мелко — счётчик важнее подробностей, они в полной карточке. */
.players-reward-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.players-reward-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.03);
}

.players-reward-chip img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.players-reward-chip--more {
    color: var(--color-text-secondary);
}

.players-partner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.players-partner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

/* Записка без подписи: плейсхолдер объясняет поле сам. Во всю ширину и заметно ниже —
   в сводке её читают, а пишут длинный текст в полной карточке. Кнопки — квадратные
   иконки справа от поля: подпись «Сохранить записку» занимала целую строку. */
.players-note-row {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.players-modal--summary .players-note-textarea {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    width: 100%;
    min-height: 4.5rem;
    height: 4.5rem;
    resize: vertical;
}

.players-note-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.players-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.players-icon-btn:hover:not(:disabled) {
    border-color: #C43F2B;
    background: rgba(196, 63, 43, 0.12);
}

.players-icon-btn:disabled {
    opacity: .45;
    cursor: default;
}

/* Статус игрока — подпись к нику, а не характеристика аккаунта: мелко и в углу шапки. */
.players-head-status {
    margin-left: auto;
    align-self: flex-start;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/* —— Причина выдачи награды (полная карточка) —— */

.pcard-reward-reason {
    flex: 1 1 12rem;
    min-width: 0;
}

.pcard-reason-cell {
    min-width: 12rem;
}

/* Причина в таблице выглядит текстом, но кликается: правка идёт на месте,
   заводить модалку ради одной строки избыточно. */
.pcard-reason-view {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.15rem 0.3rem;
    margin: -0.15rem -0.3rem;
    text-align: left;
    color: inherit;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.pcard-reason-view span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcard-reason-view i {
    flex: 0 0 auto;
    font-size: 0.7em;
    opacity: 0;
    transition: opacity .15s ease;
}

.pcard-reason-view:hover {
    border-color: var(--color-border);
}

.pcard-reason-view:hover i {
    opacity: .6;
}

.pcard-reason-edit {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pcard-reason-edit .input-field {
    min-width: 8rem;
}

/* Колонка записки в таблице — только значок, ширина по нему. */
.plist-note-col {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Строка с data-open-href открывается колесом мыши в новой вкладке — курсор об этом
   не сообщает, но и не должен: левый клик работает как раньше, открывая сводку. */

/* Подвал сводки: рабочие действия слева, закрытие — справа, как во всех модалках. */
.players-summary-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.players-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* —— Пополнения —— */

/* Кнопка «Создать пополнение» стоит в шапке справа от заголовка. margin-left:auto
   вместо justify-content: содержимое шапки слева выравнивается по иконке раздела,
   как на остальных страницах. */
.topups-header {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.topups-create {
    margin-left: auto;
}

/* Пара кнопок в шапке: «создать» подписана словами, возврат — квадратом с иконкой.
   Разный вес намеренный: одно действие ежедневное, второе разрушительное и редкое. */
.topups-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.topups-reverse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    /* Срез угла меньше общего (12px): на квадрате 32×32 он съел бы треть кнопки. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.topups-reverse:hover:not(:disabled) {
    border-color: #C43F2B;
    background: rgba(196, 63, 43, 0.16);
    color: var(--color-text-main);
}

.topups-reverse i {
    font-size: 0.85rem;
}

/* Номер платежа - кликом в буфер. Подчёркивание пунктиром, а не кнопка: это всё ещё
   ячейка таблицы, и превращать её в элемент управления ради одного действия незачем. */
.topups-id {
    cursor: copy;
    text-decoration: underline dotted var(--color-border);
    text-underline-offset: 3px;
}

.topups-id:hover {
    color: var(--color-text-main);
    text-decoration-color: var(--color-text-secondary);
}

.topups-id-mark {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    color: #95C443;
}

.topups-id-mark--fail {
    color: #C43F2B;
}

/* Факты о платеже в модалке возврата: пары «что — значение», без таблицы,
   чтобы на телефоне строки переносились, а не резались. */
.reverse-facts {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.reverse-fact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.reverse-fact-key {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.reverse-fact-val {
    text-align: right;
}

/* Выбор игрока в модалке быстрого пополнения: выпадающий список тут не годится —
   игроков тысячи, ищут набором. */
.topups-picker {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

.topups-picker-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    cursor: pointer;
}

.topups-picker-row:last-child {
    border-bottom: none;
}

.topups-picker-row:hover {
    background: rgba(196, 63, 43, 0.12);
}

/* —— Мобильная адаптация —— */
@media (max-width: 900px) {
    .wallet-table-wrap {
        display: none;
    }

    .wallet-cards {
        display: flex;
    }

    .wallet-sort-chips {
        display: flex;
    }

    .wallet-search-bar {
        flex-wrap: wrap;
    }

    .wallet-search-input {
        flex: 1 1 100%;
    }

    .wallet-page-info {
        flex: 1 0 100%;
        order: -1;
        text-align: center;
    }

    .wallet-modal,
    .wallet-catalog-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        clip-path: none;
    }

    .wallet-payment-block {
        grid-template-columns: 1fr;
    }

    .wallet-history-date {
        margin-left: 0;
    }
}

/* ==================== BACKUPS ==================== */
.backup-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.backup-panel {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.7rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.backup-panel-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.backup-badge {
    display: inline-block;
    font-size: 0.62rem;
    padding: 0.14rem 0.42rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.backup-badge--on {
    background: rgba(149, 196, 67, 0.14);
    border-color: rgba(149, 196, 67, 0.5);
    color: #b6d96f;
}

.backup-badge--fail {
    background: rgba(196, 63, 43, 0.18);
    border-color: rgba(196, 63, 43, 0.65);
    color: #ff9d8c;
}

.backup-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.45rem 0.9rem;
    margin: 0;
}

.backup-fact-wide {
    grid-column: 1 / -1;
    min-width: 0;
}

.backup-facts dt {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 0.1rem;
}

.backup-facts dd {
    margin: 0;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.backup-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.backup-hint {
    font-size: 0.66rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Сноска под таблицей архивов. Отделена чертой и приглушена намеренно: это предупреждение
   про откат, и место ему рядом с кнопкой, которая его вызывает, а не первой строкой вкладки,
   где оно закрывало собой то, за чем на неё заходят. */
.backup-note {
    margin: 0.7rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.66rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
    opacity: 0.75;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.backup-db-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.backup-run-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.7rem;
    font-size: 0.74rem;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--color-border);
}

.backup-run-row:last-child {
    border-bottom: 0;
}

.backup-error-text {
    flex: 1 1 100%;
    color: #ff9d8c;
    font-size: 0.68rem;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .backup-panels {
        grid-template-columns: 1fr;
    }
}

/* ==================== ЖУРНАЛ (Systems/Journal) ====================
   Действия админов и системные ошибки. Срезанные углы через clip-path, без border-radius.
   Красный — отказы и ошибки, жёлтый — предупреждения: цвет здесь несёт смысл, а не украшает. */

.journal-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.6rem;
}

.journal-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.journal-tab:hover {
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.06);
}

.journal-tab.is-active {
    color: var(--color-text-main);
    background: rgba(196, 63, 43, 0.16);
    border-color: rgba(196, 63, 43, 0.55);
}

.journal-badge {
    min-width: 1.4rem;
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-main);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.journal-badge--danger {
    background: rgba(196, 63, 43, 0.85);
}

/* Предупреждение — «посмотри», а не «чини». Красным красим только настоящие ошибки,
   иначе вкладка всегда горит и на неё перестают смотреть. */
.journal-badge--warn {
    background: rgba(232, 163, 61, 0.85);
    color: #1a1206;
}

.journal-tabs-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    color: #e8a33d;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ---------- Фильтры ---------- */

.journal-filters {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: var(--spacing-md);
}

.journal-ranges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.journal-range {
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.journal-range:hover {
    color: var(--color-text-main);
}

.journal-range.is-active {
    color: var(--color-text-main);
    border-color: rgba(196, 63, 43, 0.7);
    background: rgba(196, 63, 43, 0.14);
}

.journal-filter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.journal-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    min-width: 200px;
}

.journal-search > i {
    position: absolute;
    left: 0.7rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    pointer-events: none;
}

.journal-search input {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.85rem;
    clip-path: var(--clip-angle-br);
}

.journal-search input:focus {
    outline: none;
    border-color: rgba(196, 63, 43, 0.6);
}

.journal-search-clear {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.journal-select {
    padding: 0.5rem 0.7rem;
    /* Фон непрозрачный, как у .tickets-filters select. С полупрозрачным белым нативный
       выпадающий список Chrome складывает его с белой подложкой, и пункты становятся
       белым по белому — читается только подсвеченный. */
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
}

/* Пункты списка красит ОС, а не страница: без явного фона и цвета тёмная тема
   до выпадающего списка не доходит. */
.journal-select option {
    background: var(--color-bg-dark);
    color: var(--color-text-main);
}

.journal-select:focus {
    outline: none;
    border-color: rgba(196, 63, 43, 0.6);
}

/* ---------- Лента ---------- */

.journal-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.journal-row {
    display: grid;
    grid-template-columns: 72px 140px 1fr 110px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background 0.12s ease;
}

.journal-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.journal-row.is-open {
    background: rgba(255, 255, 255, 0.06);
}

/* Отказ в доступе — не мусор в ленте, а сигнал: кто-то щупает границы своих прав. */
.journal-row--denied {
    border-left-color: #e8a33d;
}

/* На вкладке входа справа только код ответа: длительность там ничего не объясняет,
   а колонка под неё оставляла бы в строке пустое место. */
.journal-row--access {
    grid-template-columns: 72px 140px 1fr 56px;
}

.journal-row--error {
    border-left-color: var(--color-primary);
}

.journal-row--warn {
    border-left-color: #e8a33d;
}

.journal-row-time {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.journal-time {
    color: var(--color-text-main);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.journal-date {
    color: var(--color-text-secondary);
    font-size: 0.7rem;
}

.journal-row-actor {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-row-actor > i {
    font-size: 0.72rem;
    opacity: 0.6;
}

.journal-level {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-main);
}

.journal-row-main {
    min-width: 0;
}

.journal-row-title {
    color: var(--color-text-main);
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-row-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}

.journal-chip {
    padding: 0.05rem 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.journal-chip--target {
    background: rgba(149, 196, 67, 0.16);
    color: #95C443;
}

/* Адрес на вкладке входа — главный носитель смысла в строке, поэтому моноширинный
   и заметнее прочих меток: глазами там ищут именно повторяющийся чужой IP. */
.journal-chip--ip {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-main);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    text-transform: none;
    letter-spacing: 0;
}

.journal-chip--danger {
    background: rgba(196, 63, 43, 0.2);
    color: #ff9a86;
}

.journal-mono {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-row-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.journal-status {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.journal-duration {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
}

.journal-count {
    padding: 0.1rem 0.45rem;
    background: rgba(196, 63, 43, 0.75);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* ---------- Детали ---------- */

/* Отступ сверху больше остальных: там висит кнопка копирования, вынутая из потока.
   Без этого запаса правая колонка фактов уезжает прямо под неё (замерено в браузере:
   при 2.4rem нижняя граница кнопки и верх колонки совпадали пиксель в пиксель). */
.journal-details {
    position: relative;
    padding: 3rem 1rem 1rem;
    background: rgba(0, 0, 0, 0.35);
    border-left: 2px solid rgba(255, 255, 255, 0.12);
}

/* Кнопка копирования — в правом верхнем углу раскрытой карточки. Приглушена, пока на неё
   не навели: она нужна изредка и не должна спорить за внимание с содержимым записи. */
.journal-copy {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.journal-copy:hover {
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.journal-copy.is-copied {
    color: #95C443;
    background: rgba(149, 196, 67, 0.14);
    border-color: rgba(149, 196, 67, 0.5);
}

/* Буфер может быть запрещён политикой браузера. Кнопка, которая на клик не делает ничего,
   читается как сломанная страница, поэтому отказ показываем явно. */
.journal-copy.is-failed {
    color: #ff9a86;
    background: rgba(196, 63, 43, 0.16);
    border-color: rgba(196, 63, 43, 0.5);
}

/* На узком экране подпись прячем: иконки достаточно, а место дороже. */
@media (max-width: 620px) {
    .journal-copy span {
        display: none;
    }

    .journal-copy {
        padding: 0.35rem 0.45rem;
    }
}

.journal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem 1.25rem;
}

.journal-facts > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.journal-fact-wide {
    grid-column: 1 / -1;
}

.journal-facts dt {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.journal-facts dd {
    color: var(--color-text-main);
    font-size: 0.85rem;
    word-break: break-word;
}

.journal-hidden {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.journal-pre {
    max-height: 260px;
    overflow: auto;
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-border);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    white-space: pre-wrap;
    word-break: break-word;
}

.journal-placeholder {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.journal-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: var(--spacing-md);
}

.journal-pager-info {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Мобилы: строка превращается в карточку ---------- */

@media (max-width: 860px) {
    .journal-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "main   status"
            "actor  time";
        gap: 0.35rem 0.5rem;
        padding: 0.65rem 0.75rem;
    }

    .journal-row-main {
        grid-area: main;
    }

    .journal-row-status {
        grid-area: status;
    }

    .journal-row-actor {
        grid-area: actor;
    }

    .journal-row-time {
        grid-area: time;
        flex-direction: row;
        gap: 0.4rem;
        align-items: baseline;
        justify-content: flex-end;
    }

    .journal-row-title {
        white-space: normal;
    }

    .journal-tabs-note {
        margin-left: 0;
        width: 100%;
    }

    .journal-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .journal-select {
        width: 100%;
    }
}

/* ==================== МОНИТОРИНГ (Systems/Monitoring) ====================
   Состояние хоста, сервисов и нод одной страницей. Срезанные углы через clip-path,
   без border-radius. Цвет здесь — единственный быстрый сигнал: зелёный #95C443 — норма,
   жёлтый — «посмотри», красный #C43F2B — «чини сейчас». Пороги одинаковы для CPU,
   памяти, диска и пула соединений, иначе один и тот же оттенок значил бы разное. */

.mon-meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.mon-meta-error {
    color: #e8a33d;
    font-weight: 600;
}

.mon-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mon-link:hover {
    color: var(--color-text-main);
}

.mon-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.mon-block {
    margin-bottom: var(--spacing-lg);
}

.mon-block-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    color: var(--color-text-main);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mon-block-note {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Источник может отвалиться в любой момент (у Kuma нет стабильного API) — гаснет
   отдельная карточка, а не страница. Поэтому «нет данных» выглядит спокойно, не тревожно. */
.mon-unavailable {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    clip-path: var(--clip-angle-br);
}

.mon-ok-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    background: rgba(149, 196, 67, 0.1);
    border: 1px solid rgba(149, 196, 67, 0.35);
    color: #95c443;
    font-size: 0.84rem;
    font-weight: 600;
    clip-path: var(--clip-angle-br);
}

/* ---------- Алерты ---------- */

.mon-alarm {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid transparent;
    font-size: 0.84rem;
    clip-path: var(--clip-angle-br);
}

.mon-alarm.is-critical {
    background: rgba(196, 63, 43, 0.14);
    border-left-color: #c43f2b;
}

.mon-alarm.is-warning {
    background: rgba(232, 163, 61, 0.12);
    border-left-color: #e8a33d;
}

.mon-alarm-status {
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mon-alarm.is-critical .mon-alarm-status {
    background: rgba(196, 63, 43, 0.85);
    color: var(--color-text-main);
}

.mon-alarm.is-warning .mon-alarm-status {
    background: rgba(232, 163, 61, 0.85);
    color: #1a1206;
}

.mon-alarm-chart,
.mon-alarm-since {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
}

.mon-alarm-value {
    color: var(--color-text-main);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mon-alarm-info {
    flex: 1 1 240px;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
}

/* ---------- Графики за час ----------
   Четыре линии, отвечающие на единственный ежедневный вопрос: «как обычно или нет».
   Рисуются голым SVG — библиотека графиков ради этого утяжелила бы WASM-бандл,
   а полноценные графики с зумом живут в Netdata. */

.mon-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.6rem;
}

.mon-chart {
    padding: 0.85rem 1rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    clip-path: var(--clip-angle-br);
}

.mon-chart.is-ok {
    border-top-color: #95c443;
}

.mon-chart.is-warning {
    border-top-color: #e8a33d;
}

.mon-chart.is-critical {
    border-top-color: #c43f2b;
}

.mon-chart.is-neutral,
.mon-chart.is-unknown {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.mon-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

/* Длинная подпись («Время ответа, p95») выталкивала значение на вторую строку,
   и карточка становилась выше соседних — ряд графиков переставал быть рядом.
   Режем подпись, значение не переносим никогда: цифра здесь главная. */
.mon-chart-head > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mon-chart-head strong {
    color: var(--color-text-main);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mon-chart-svg {
    display: block;
    width: 100%;
    height: 56px;
}

.mon-chart-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1;
    /* Без этого линия растягивается вместе с viewBox и превращается в клин. */
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.mon-chart-area {
    fill: rgba(255, 255, 255, 0.07);
    stroke: none;
}

.mon-chart.is-ok .mon-chart-line {
    stroke: #95c443;
}

.mon-chart.is-ok .mon-chart-area {
    fill: rgba(149, 196, 67, 0.12);
}

.mon-chart.is-warning .mon-chart-line {
    stroke: #e8a33d;
}

.mon-chart.is-warning .mon-chart-area {
    fill: rgba(232, 163, 61, 0.14);
}

.mon-chart.is-critical .mon-chart-line {
    stroke: #c43f2b;
}

.mon-chart.is-critical .mon-chart-area {
    fill: rgba(196, 63, 43, 0.16);
}

.mon-chart-scale,
.mon-chart-empty {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.mon-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin-top: 0;
}

.mon-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    background: rgba(255, 255, 255, 0.3);
}

/* ---------- Шкалы ресурсов ---------- */

.mon-gauges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.mon-gauge {
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
}

.mon-gauge-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

/* Та же защита, что у графиков: точка монтирования может быть длинной («Диск /var/lib/docker»). */
.mon-gauge-head > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mon-gauge-head strong {
    color: var(--color-text-main);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mon-gauge-note {
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.mon-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.mon-bar > span {
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.4s ease;
}

.mon-bar.is-ok > span {
    background: #95c443;
}

.mon-bar.is-warning > span {
    background: #e8a33d;
}

.mon-bar.is-critical > span {
    background: #c43f2b;
}

/* Второстепенные числа: без шкал и порогов — они объясняют картину, а не сигналят. */
.mon-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
}

.mon-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
}

.mon-fact strong {
    color: var(--color-text-main);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mon-fact > i {
    color: rgba(255, 255, 255, 0.35);
}

/* Ошибки 5xx: пока их ноль — обычная серая строка, а не вечно красная плашка,
   иначе на неё перестанут смотреть ровно к тому моменту, когда она станет важной. */
.mon-fact.is-bad,
.mon-fact.is-bad > i,
.mon-fact.is-bad strong {
    color: #c43f2b;
}

/* ---------- Свои метрики ---------- */

.mon-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.6rem;
}

.mon-card {
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    clip-path: var(--clip-angle-br);
}

.mon-card.is-ok {
    border-top-color: #95c443;
}

.mon-card.is-warning {
    border-top-color: #e8a33d;
}

.mon-card.is-critical {
    border-top-color: #c43f2b;
}

.mon-card.is-muted,
.mon-card.is-unknown {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.mon-card-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.mon-card-main {
    margin-bottom: 0.4rem;
    color: var(--color-text-main);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mon-card-of {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.mon-card-note {
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.74rem;
}

.mon-card-error {
    margin-top: 0.4rem;
    color: #c43f2b;
    font-size: 0.74rem;
    word-break: break-word;
}

.mon-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.mon-node {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.74rem;
    font-weight: 600;
}

.mon-node.is-online .mon-dot {
    background: #95c443;
}

.mon-node.is-offline {
    background: rgba(196, 63, 43, 0.16);
}

.mon-node.is-offline .mon-dot {
    background: #c43f2b;
}

.mon-footnote {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* ---------- Мобилы: всё в одну колонку ---------- */

@media (max-width: 860px) {
    .mon-charts,
    .mon-gauges,
    .mon-cards {
        grid-template-columns: 1fr;
    }

    .mon-alarm {
        align-items: flex-start;
    }

    .mon-alarm-info {
        flex-basis: 100%;
    }

    .mon-meta {
        gap: 0.6rem;
        font-size: 0.78rem;
    }
}

/* ==================== ДАШБОРД ПОДДЕРЖКИ (/Servers/Tickets) ====================
   Единый язык: срезанный угол через clip-path, без border-radius, иконки Font Awesome,
   красный #C43F2B — тревога, зелёный #95C443 — успех. Сетка карточек адаптивная:
   на 1280 помещается 4 карточки, на широком мониторе — 6, на телефоне — одна. */

.tickets-page .console-main {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Общий .section-header даёт padding-bottom + margin-bottom, и вместе с gap контейнера
   между шапкой и первой плиткой копилось почти три сантиметра пустоты. Здесь ритм
   задаёт только gap: у самой шапки нижнего отступа нет. */
.tickets-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
}

.tickets-head .section-icon {
    width: 32px;
    height: 32px;
}

.tickets-head .section-icon i {
    font-size: 0.95rem;
}

.tickets-head-actions {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
}

/* ---- Блок «сейчас»: крупные цифры, по которым видно, где горит ---- */
.tickets-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

.tickets-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    clip-path: var(--clip-angle-br);
    color: var(--color-text-main);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tickets-stat.static {
    cursor: default;
}

.tickets-stat:not(.static):hover,
.tickets-stat.active {
    background: rgba(196, 63, 43, 0.12);
    border-left-color: var(--color-primary);
}

.tickets-stat-icon {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.tickets-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.tickets-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.tickets-stat.accent-danger .tickets-stat-value {
    color: #C43F2B;
}

.tickets-stat.accent-success .tickets-stat-value {
    color: #95C443;
}

/* ---- Разрез очереди по категориям ----
   Полоса заметно уже плиток: это не показатель, а быстрый фильтр. */
.tickets-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.tickets-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.5rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tickets-cat:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.25);
}

.tickets-cat.active {
    color: var(--color-text-main);
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.14);
}

.tickets-cat i {
    font-size: 0.75rem;
    color: var(--color-accent);
}

/* Три числа через разделитель: новых — красным, в обработке — оранжевым,
   закрытых за сутки — зелёным. Цвет здесь несёт смысл, а не украшает. */
.tickets-cat-nums {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-weight: 700;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.tickets-cat-nums .sep {
    color: rgba(255, 255, 255, 0.22);
    font-weight: 400;
}

.tickets-cat-nums .n-new {
    color: #C43F2B;
}

.tickets-cat-nums .n-work {
    color: #ff7a3c;
}

.tickets-cat-nums .n-done {
    color: #95C443;
}

/* Ноль не должен кричать цветом: пустая категория гасится до фонового серого,
   иначе строка выглядит тревожной там, где всё в порядке. */
.tickets-cat-nums .zero {
    color: rgba(255, 255, 255, 0.28);
}

/* ---- Всплеск: массовая проблема, пойманная по частоте обращений ---- */
.tickets-spikes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tickets-spike {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background: rgba(196, 63, 43, 0.16);
    border: 1px solid rgba(196, 63, 43, 0.5);
    clip-path: var(--clip-angle-br);
    color: var(--color-text-main);
    font-size: 0.85rem;
    cursor: pointer;
}

.tickets-spike i {
    color: #C43F2B;
}

.tickets-spike-title {
    font-weight: 700;
}

.tickets-spike-value {
    font-weight: 700;
    color: #C43F2B;
}

.tickets-spike-norm {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
}

/* ---- Полоса инцидентов ---- */
.tickets-incidents {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
}

.tickets-incidents-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    padding-top: 0.3rem;
}

.tickets-incidents-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tickets-incident-chip {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.04);
}

.tickets-incident-chip.active {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.14);
}

.tickets-incident-main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.6rem;
    background: none;
    border: none;
    color: var(--color-text-main);
    font-size: 0.85rem;
    cursor: pointer;
}

.tickets-incident-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.tickets-incident-action {
    padding: 0.35rem 0.5rem;
    background: none;
    border: none;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.tickets-incident-action:hover {
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.06);
}

.tickets-incident-action.danger:hover {
    color: #C43F2B;
}

/* ---- Панель фильтров ----
   clip-path обрезает ВСЕХ потомков, включая position: absolute и fixed, и никакой
   z-index этого не отменяет. Поэтому у самой панели формы нет: срезанный угол рисует
   подложка ::before, а выпадающий календарь спокойно выходит за границы панели. */
.tickets-filters-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
}

.tickets-filters-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
    pointer-events: none;
}

/* Содержимое позиционировано — значит рисуется поверх подложки ::before. */
.tickets-filters-row,
.tickets-active-filter {
    position: relative;
}

.tickets-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.tickets-search {
    position: relative;
    flex: 1 1 280px;
    display: flex;
    align-items: center;
}

.tickets-search > i {
    position: absolute;
    left: 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.tickets-search .input-field {
    width: 100%;
    padding: 0.4rem 1.8rem 0.4rem 1.9rem;
}

.tickets-search-clear {
    position: absolute;
    right: 0.4rem;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.tickets-segments {
    display: flex;
    border: 1px solid var(--color-border);
}

.tickets-segments button {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-right: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tickets-segments button:last-child {
    border-right: none;
}

.tickets-segments button.active {
    background: var(--color-primary);
    color: #fff;
}

.tickets-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.tickets-field .input-field {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    min-width: 130px;
}

.tickets-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding-bottom: 0.35rem;
}

.tickets-filters-tools {
    margin-left: auto;
    display: flex;
    gap: 0.35rem;
}

.tickets-active-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.tickets-active-filter button {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* ---- Массовые действия над выбранными карточками ---- */
.tickets-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background: rgba(149, 196, 67, 0.12);
    border: 1px solid rgba(149, 196, 67, 0.45);
    clip-path: var(--clip-angle-br);
}

.tickets-bulk-count {
    font-weight: 700;
    color: #95C443;
}

.tickets-bulk-select {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

/* ---- Сетка карточек ----
   auto-fill даёт естественную плотность: чем шире монитор, тем больше карточек в строке.
   Режим «Плотно» сжимает колонку до 210px — в строку встаёт шесть. */
.tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.6rem;
}

.tickets-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.45rem;
}

.ticket-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.8rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    clip-path: var(--clip-angle-br);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.12s ease;
}

.ticket-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

/* Ждём нас — синий, ждём игрока — приглушённый, закрыт — серый, без ответа — красный. */
.ticket-card.status-0 {
    border-left-color: #7ba3ff;
}

.ticket-card.status-1 {
    border-left-color: rgba(255, 255, 255, 0.25);
}

.ticket-card.status-2 {
    border-left-color: rgba(255, 255, 255, 0.1);
    opacity: 0.75;
}

.ticket-card.is-new {
    border-left-color: #C43F2B;
}

.ticket-card.selected {
    border-color: #95C443;
    background: rgba(149, 196, 67, 0.1);
}

.ticket-card-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ticket-card-check {
    color: var(--color-text-secondary);
}

.ticket-card-check.on {
    color: #95C443;
}

.ticket-card-cat i {
    color: var(--color-accent);
}

.ticket-card-id {
    font-weight: 700;
    color: var(--color-text-main);
}

.ticket-card-status {
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}

.ticket-card-subject {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-card-preview {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
}

.ticket-card-meta i {
    margin-right: 0.2rem;
    opacity: 0.7;
}

.ticket-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.ticket-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-text-secondary);
}

.ticket-tag.danger {
    background: rgba(196, 63, 43, 0.2);
    color: #e0715f;
}

.ticket-tag.incident {
    background: rgba(149, 196, 67, 0.16);
    color: #95C443;
}

.tickets-grid.compact .ticket-card {
    padding: 0.5rem 0.6rem;
    gap: 0.3rem;
}

.tickets-grid.compact .ticket-card-subject {
    font-size: 0.85rem;
}

.tickets-grid.compact .ticket-card-meta {
    font-size: 0.7rem;
    gap: 0.4rem;
}

/* ---- Пагинация ---- */
.tickets-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
}

.tickets-pager-info {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

/* ---- Модалка инцидента ---- */
.tickets-modal-hint {
    margin: 0 0 0.5rem 0;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.tickets-modal-label {
    display: block;
    margin: 0.6rem 0 0.2rem 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

/* ---- Внутренняя заметка в переписке: видна только своим ---- */
.ticket-message.internal {
    border-left: 2px solid #95C443;
    background: rgba(149, 196, 67, 0.08);
}

.ticket-message-internal-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #95C443;
}

.ticket-reply-options {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.ticket-reply-hint {
    font-size: 0.78rem;
}

.ticket-similar {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    margin-top: 0.6rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
}

.ticket-similar-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.ticket-similar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-main);
    text-decoration: none;
    padding: 0.25rem 0;
    border-top: 1px solid var(--color-border);
}

.ticket-similar-item:hover {
    color: var(--color-accent);
}

.ticket-similar-score {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ---- Телефон: фильтры в столбик, карточки в одну колонку ---- */
@media (max-width: 860px) {
    .tickets-stats {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .tickets-stat-value {
        font-size: 1.25rem;
    }

    .tickets-filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .tickets-segments {
        overflow-x: auto;
    }

    .tickets-filters-tools {
        margin-left: 0;
    }

    .tickets-field .input-field {
        width: 100%;
    }

    .tickets-grid,
    .tickets-grid.compact {
        grid-template-columns: 1fr;
    }

    .tickets-incidents {
        flex-direction: column;
    }
}


/* ==================== ОБЩИЙ КАЛЕНДАРЬ (компонент DatePicker) ====================
   Нативный <input type="date"> рисуется браузером и не поддаётся оформлению — календарь
   свой. Живёт здесь, а не в стилях страницы: компонент общий для всей панели. */

.xdate {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    min-width: 150px;
}

.xdate-field {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.xdate-field:hover:not(:disabled),
.xdate.open .xdate-field {
    border-color: var(--color-primary);
}

.xdate-field:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xdate-field.filled {
    color: var(--color-text-main);
}

.xdate-field > i:first-child {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.xdate-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xdate-caret {
    font-size: 0.65rem;
    opacity: 0.5;
}

.xdate-clear {
    display: inline-flex;
    padding: 0 0.15rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.xdate-clear:hover {
    color: #C43F2B;
}

/* Подложка перехватывает клик мимо календаря — без неё пришлось бы вешать
   обработчик на document через JS-интероп. */
.xdate-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.xdate-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 41;
    width: 260px;
    padding: 0.6rem;
    background: #0b0e16;
    border: 1px solid rgba(255, 255, 255, 0.14);
    clip-path: var(--clip-angle-br);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.xdate-pop-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.xdate-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
}

.xdate-nav:hover {
    color: var(--color-text-main);
    border-color: var(--color-primary);
}

.xdate-title {
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.2rem;
    background: none;
    border: none;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.xdate-title:hover {
    color: var(--color-accent);
}

.xdate-title-year {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.xdate-weekdays,
.xdate-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.xdate-weekdays {
    margin-bottom: 3px;
}

.xdate-weekdays span {
    text-align: center;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
}

.xdate-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.xdate-day:hover:not(:disabled) {
    background: rgba(196, 63, 43, 0.25);
}

.xdate-day.outside {
    color: rgba(255, 255, 255, 0.28);
}

.xdate-day.today {
    border-color: rgba(149, 196, 67, 0.6);
}

.xdate-day.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.xdate-day:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.xdate-years {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.xdate-year {
    padding: 0.4rem 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.xdate-year:hover {
    background: rgba(196, 63, 43, 0.25);
}

.xdate-year.current {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.xdate-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.xdate-presets button {
    padding: 0.2rem 0.45rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.xdate-presets button:hover {
    color: var(--color-text-main);
    border-color: var(--color-primary);
}

.xdate-presets .xdate-preset-clear {
    margin-left: auto;
}

.xdate-presets .xdate-preset-clear:hover {
    color: #C43F2B;
}

/* На телефоне календарь распахивается на ширину поля, а не 260px фиксом. */
@media (max-width: 860px) {
    .xdate {
        width: 100%;
    }

    .xdate-pop {
        width: 100%;
        min-width: 240px;
    }
}

/* ==================== БЫСТРЫЕ ОТВЕТЫ (/Systems/QuickReplies) ==================== */

.qr-page .console-main {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.qr-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.qr-head-actions {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
}

.qr-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.qr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
}

.qr-groups {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.qr-group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin-bottom: 0.35rem;
}

.qr-group-title i {
    color: var(--color-accent);
}

.qr-group-count {
    margin-left: auto;
    font-size: 0.72rem;
}

.qr-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.qr-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    clip-path: var(--clip-angle-br);
}

.qr-item.editing {
    border-left-color: var(--color-primary);
}

.qr-item-order {
    min-width: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    padding-top: 0.15rem;
}

.qr-item-text {
    flex: 1;
    font-size: 0.88rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.qr-item-actions {
    display: flex;
    gap: 0.2rem;
}

.qr-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}

.qr-icon-btn:hover:not(:disabled) {
    color: var(--color-text-main);
    border-color: var(--color-primary);
}

.qr-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qr-icon-btn.danger:hover {
    color: #C43F2B;
    border-color: #C43F2B;
}

.qr-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    background: var(--color-bg-card);
    border: 1px solid rgba(149, 196, 67, 0.45);
    clip-path: var(--clip-angle-br);
}

.qr-editor-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.qr-editor textarea {
    width: 100%;
    min-height: 90px;
    padding: 0.5rem 0.6rem;
    background: var(--color-bg-darker);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
}

.qr-editor-counter {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.qr-editor-counter.over {
    color: #C43F2B;
    font-weight: 700;
}

.qr-confirm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #C43F2B;
}

@media (max-width: 860px) {
    .qr-item {
        flex-wrap: wrap;
    }

    .qr-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
}


/* ==================== ВЫБОР БЫСТРОГО ОТВЕТА В ТИКЕТЕ ====================
   Строка = код шаблона (он же тег категории) и сразу за ним полный текст. Панель
   превью справа убрана: она показывала целиком лишь один шаблон под курсором и
   забирала половину ширины. Блок сворачивается, цвет кода задан категорией —
   группы различимы, не читая подписей. */

.ticket-quick-replies {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
}

.qr-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.qr-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-family: inherit;
    cursor: pointer;
}

.qr-toggle:hover {
    color: var(--color-text-main);
}

.qr-toggle-icon {
    width: 0.8rem;
    font-size: 0.72rem;
    text-align: center;
}

.qr-toggle-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qr-toggle-count {
    padding: 0.05rem 0.35rem;
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--color-border);
}

.qr-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    max-width: 360px;
}

.qr-search > i {
    position: absolute;
    left: 0.55rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.qr-search .input-field {
    width: 100%;
    padding: 0.3rem 0.5rem 0.3rem 1.8rem;
    font-size: 0.82rem;
}

.qr-groups {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 0.2rem;
    scrollbar-gutter: stable;
}

/* Цвет группы: один ключ категории — всегда один цвет, и у заголовка, и у кода. */
.qr-group {
    --qr-cat: #8A8F98;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qr-group.cat-general { --qr-cat: #8FA3B8; }
.qr-group.cat-player_report { --qr-cat: #C43F2B; }
.qr-group.cat-admin_report { --qr-cat: #E0762E; }
.qr-group.cat-bug { --qr-cat: #A87BE4; }
.qr-group.cat-game_issue { --qr-cat: #5CA7E0; }
.qr-group.cat-donate_issue { --qr-cat: #95C443; }
.qr-group.cat-balance_topup { --qr-cat: #D7B33F; }
.qr-group.cat-ban_appeal { --qr-cat: #5FBFA8; }
.qr-group.cat-other { --qr-cat: #8A8F98; }

.qr-group-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0 0.1rem 0.4rem;
    border-left: 2px solid var(--qr-cat);
    color: var(--qr-cat);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qr-group-count {
    color: var(--color-text-secondary);
}

.qr-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.28rem 0.45rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.qr-row:hover,
.qr-row:focus-visible {
    background: rgba(196, 63, 43, 0.16);
    border-color: var(--color-primary);
}

/* Код набирается в поиске и вставляется по Enter — моноширинный, в цвете своей категории. */
.qr-row-code {
    flex: 0 0 auto;
    min-width: 2.6rem;
    padding: 0.05rem 0.25rem;
    border-left: 3px solid var(--qr-cat);
    background: rgba(255, 255, 255, 0.07);
    color: var(--qr-cat);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.qr-row-name {
    flex: 0 1 auto;
    font-weight: 600;
}

/* Текст целиком: смысл строки в том, чтобы видеть, что именно вставится. */
.qr-row-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text-secondary);
    word-break: break-word;
}

.qr-row:hover .qr-row-text {
    color: var(--color-text-main);
}

.qr-empty {
    padding: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

/* ---- Прицепить обращение к инциденту (модалка на странице тикета) ---- */
.ticket-incident-modes {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.ticket-incident-mode {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
}

.ticket-incident-mode:hover:not(:disabled) {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.2);
}

.ticket-incident-mode.active {
    background: rgba(196, 63, 43, 0.16);
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.ticket-incident-mode:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ticket-incident-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 0.4rem;
}

.ticket-incident-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.45rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
}

.ticket-incident-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.ticket-incident-item.selected {
    background: rgba(196, 63, 43, 0.16);
    border-color: var(--color-primary);
}

.ticket-incident-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-incident-item-meta {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ---- Список на странице настройки: код, название, полный текст ---- */
.qr-item-code {
    flex: 0 0 auto;
    min-width: 2.6rem;
    padding: 0.1rem 0.3rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-accent);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
}

.qr-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.qr-item-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.qr-item-title.auto {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.qr-item-noname {
    padding: 0 0.3rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Текст шаблона показывается целиком: страница настройки для того и нужна. */
.qr-item-text {
    font-size: 0.84rem;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.qr-editor-title {
    flex: 1 1 220px;
}

@media (max-width: 860px) {
    .qr-groups {
        max-height: 200px;
    }

    /* На узком экране текст уходит под код, а не жмётся в колонку в пару слов. */
    .qr-row {
        flex-wrap: wrap;
    }

    .qr-row-text {
        flex: 1 1 100%;
    }

    .ticket-incident-modes {
        flex-direction: column;
    }
}


/* ==================== МОДЕРАЦИЯ: ЖАЛОБЫ И ПРОВЕРКИ ====================
   Очередь строится по игрокам, а не по жалобам: карточка = цель, у которой есть
   репорты без проверки. Главный показатель на карточке — сколько РАЗНЫХ игроков
   пожаловалось: пять жалоб от одного накрутить легко, от пятерых — нет. */

.mod-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mod-tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.mod-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.mod-tab:hover {
    color: var(--color-text-main);
}

.mod-tab.active {
    color: var(--color-text-main);
    border-bottom-color: var(--color-primary);
}

.mod-tab-count {
    padding: 0.05rem 0.35rem;
    background: rgba(196, 63, 43, 0.2);
    border: 1px solid var(--color-primary);
    color: var(--color-text-main);
    font-size: 0.7rem;
}

.mod-error {
    margin: 0.5rem 0;
}

.mod-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.mod-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    clip-path: var(--clip-angle-br);
}

/* Уже забаненного видно сразу — иначе модератор идёт проверять решённое. */
.mod-card.banned {
    border-left-color: #8A8F98;
    opacity: 0.75;
}

.mod-card-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
}

.mod-card-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mod-card-name {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.mod-card-name:hover {
    color: var(--color-accent);
}

.mod-card-steam {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.mod-card-badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.mod-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

.mod-badge.strong {
    background: rgba(196, 63, 43, 0.16);
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.mod-badge.warn {
    border-color: #D7B33F;
    color: #D7B33F;
}

.mod-badge.danger {
    border-color: var(--color-primary);
    color: #E06A55;
}

/* Ступень тревоги внутри плашки: красит текст и иконку, рамку не трогает. У danger
   рамка цветная, и четыре цветные рамки подряд превращают ряд плашек в частокол, где
   тревожное перестаёт выделяться. Цвета те же, что у warn и danger, чтобы жёлтое и
   красное на странице означали одно и то же. Норма цвета не получает вовсе: серый ряд —
   это «вопросов нет», и подкрашивать его нечем. */
.mod-badge.ind-warn {
    color: #D7B33F;
}

.mod-badge.ind-bad {
    color: #E06A55;
}

/* Оранжевая плашка — «обрати внимание», но не «плохо»: так помечена версия токена. */
.mod-badge.accent {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.mod-card-reasons {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.mod-reason {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.35rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--color-accent);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.mod-reason-count {
    color: var(--color-text-main);
    font-weight: 600;
}

.mod-card-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.mod-card-comment {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
}

.mod-watch-left {
    color: #D7B33F;
}

.mod-card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.mod-paging {
    justify-content: center;
}

.mod-filters {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.mod-filter-select {
    width: auto;
    min-width: 140px;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
}

/* ---- Журнал проверок ---- */
/* Цвет вердикта одинаковый везде: в журнале, в карточке и в кнопках выбора. */
.verdict-0 { --mod-verdict: #95C443; }
.verdict-1 { --mod-verdict: #D7B33F; }
.verdict-2 { --mod-verdict: #C43F2B; }
.verdict-3 { --mod-verdict: #8A8F98; }

.mod-check-verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 130px;
    color: var(--mod-verdict, #8A8F98);
    font-weight: 600;
}

.mod-check-target {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.mod-check-target:hover {
    color: var(--color-accent);
}

.mod-check-admin,
.mod-check-covered,
.mod-check-date {
    color: var(--color-text-secondary);
}

.mod-check-comment {
    flex: 1 1 100%;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.mod-last-check {
    color: var(--mod-verdict, var(--color-text-secondary));
}

/* ---- Выбор вердикта ---- */
.mod-verdict-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.mod-verdict-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
}

.mod-verdict-option:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.2);
}

.mod-verdict-option.active {
    border-color: var(--mod-verdict, var(--color-primary));
    color: var(--mod-verdict, var(--color-text-main));
    background: rgba(255, 255, 255, 0.06);
}

/* ---- Карточка цели ---- */
.mod-target-modal {
    max-width: 900px;
    width: 100%;
}

.mod-target-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.9rem 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.mod-muted {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.mod-report {
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
}

/* Неразобранные жалобы подсвечены: именно они держат игрока в очереди. */
.mod-report.fresh {
    border-left: 3px solid var(--color-primary);
}

.mod-report-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.mod-report-reason {
    color: var(--color-text-main);
    font-weight: 600;
}

.mod-report-text {
    margin-top: 0.25rem;
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Контекст инцидента: подтип, кто кого убил, координаты. Пришёл на место свободного описания,
   поэтому и стоит там же, но читается как факты, а не как текст игрока. */
.mod-report-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.mod-report-chip {
    padding: 0.12rem 0.45rem;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    /* Срез угла вместо скругления — общее правило вёрстки проекта. */
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

@media (max-width: 720px) {
    .mod-card {
        flex-direction: column;
    }

    .mod-verdict-options {
        grid-template-columns: 1fr;
    }

    .mod-check-verdict {
        min-width: 0;
    }
}

/* ==================== КАРТОЧКА ИГРОКА (АДМИНСКИЙ ПРОФИЛЬ) ====================
   Одна страница вместо двух модалок, которые знали про игрока разные половины.
   Вкладки рисуются по правам: жалобы, обращения и экономика приходят с сервера
   только тем, у кого есть соответствующее право. */

.pcard-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.pcard-avatar {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-darker);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 1.6rem;
    overflow: hidden;
    clip-path: var(--clip-angle-br);
}

.pcard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcard-head-main {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pcard-name {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 1.35rem;
    font-weight: 700;
    /* Отступ h1 из bootstrap reboot (0.5rem снизу) и заголовочный интерлиньяж — это и был
       пустой провал между ником и SteamID: собственный отступ строки всего 5px, а сверху
       на него ложились ещё 8px чужого margin и полоса под буквами. */
    margin: 0;
    line-height: 1.15;
}

.pcard-status {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.pcard-steam-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* Строка ростом со свой текст: раскормленная иконка Steam делала её вдвое выше
       номера и отталкивала плашки вниз. */
    line-height: 1.2;
}

.pcard-steam-row .pmm-icon-btn {
    width: 24px;
    height: 20px;
    font-size: 0.78rem;
}

/* Номер сам себе кнопка: копирует по клику. Выглядит текстом, а не кнопкой, —
   подчёркивание и курсор появляются только под мышью, чтобы строка шапки не пестрела. */
.pcard-steam {
    padding: 0;
    border: none;
    background: transparent;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.pcard-steam:hover {
    color: var(--color-text-main);
    text-decoration: underline;
}

.pcard-copy-hint {
    font-size: 0.7rem;
    color: #95C443;
}

.pcard-badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Правая колонка шапки: деньги сверху, действия под ними. Баланс стоит здесь,
   а не в кошельке отдельной строкой — на него смотрят с любой вкладки. */
/* Правый край шапки — одна строка: «Проверить», «Забанить», баланс. Столбиком он
   забирал вдвое больше высоты, чем сам ник с плашками. Кнопки стоят перед балансом,
   потому что баланс тут для справки, а решение принимают кнопками.

   stretch тянет кнопки до высоты плашки баланса: она двухстрочная и задаёт высоту всему
   ряду, а невысокие кнопки рядом с ней выглядели недоделанным краем. */
.pcard-head-side {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

/* «Проверить» и «Забанить» одной ширины: это два соседних решения по игроку, и разная
   длина подписей делала их разными по весу. Сетка с auto-columns: 1fr раздаёт колонкам
   поровну, поэтому обе кнопки получают ширину длинной. */
.pcard-head-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.4rem;
}

.pcard-head-actions .btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Плашка баланса — сама себе кнопка: открывает вкладку кошелька. */
.pcard-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    padding: 0.4rem 0.65rem;
    background: rgba(149, 196, 67, 0.08);
    border: 1px solid rgba(149, 196, 67, 0.35);
    color: var(--color-text-main);
    font-family: inherit;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
    transition: border-color .15s ease, background .15s ease;
}

.pcard-balance:hover {
    background: rgba(149, 196, 67, 0.14);
    border-color: #95C443;
}

.pcard-balance-total {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: #95C443;
    font-variant-numeric: tabular-nums;
}

.pcard-balance-unit {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.pcard-balance-split {
    display: flex;
    gap: 0.6rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.pcard-balance-split strong {
    color: var(--color-text-main);
    font-variant-numeric: tabular-nums;
}

.pcard-balance-muted {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ---- Инвентарь игрока: сетка ячеек, как в витрине /Controls/Econs ----
   Ячейки заметно мельче витринных: там карточку разглядывают перед правкой цены,
   здесь же по инвентарю ищут глазами один предмет среди сотен, и крупная плитка
   заставляла бы прокручивать экран за экраном. */
.pcard-inv-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.4rem;
}

/* Предмет открывает модалку обычным кликом — курсор такой же, как у первой ячейки
   («Выдать»), потому что ведут они себя одинаково. */
.pcard-inv-card:not(.econs-card-add) {
    cursor: pointer;
}

/* Ячейка несёт только картинку, id и название — цена и редкость живут в модалке предмета. */
.pcard-inv-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    padding: 0.3rem 0.35rem 0.8rem;
}

.pcard-inv-id {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.pcard-inv-name {
    font-size: 0.75rem;
    line-height: 1.15;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Выдача — первая ячейка сетки, поэтому её надпись подгоняем под мелкий формат. */
.pcard-inv-grid .econs-add-icon {
    width: 26px;
    height: 26px;
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.pcard-inv-grid .econs-add-text {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

/* ---- Модалка выдачи ---- */
.modal-content.pcard-econ-modal {
    max-width: 560px;
}

.pcard-econ-modal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pcard-econ-modal-row .input-group:first-child {
    flex: 0 0 7rem;
}

.pcard-econ-modal-row .input-group:last-child {
    flex: 1 1 12rem;
    min-width: 0;
}

/* ---- Модалка предмета ---- */
.modal-content.pcard-item-modal {
    max-width: 600px;
}

.pcard-item-head {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.pcard-item-icon {
    flex: 0 0 128px;
    width: 128px;
    height: 128px;
    object-fit: contain;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
}

.pcard-item-facts {
    flex: 1 1 14rem;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.3rem 0.8rem;
}

.pcard-item-fact {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    min-width: 0;
}

.pcard-item-fact span {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pcard-item-fact b {
    color: var(--color-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Подтверждение денежного действия: возврат уходит в кошелёк сразу и отмены у него нет. */
.pcard-item-confirm {
    margin-top: 0.8rem;
    padding: 0.6rem 0.7rem;
    border-left: 3px solid var(--color-primary);
    background: rgba(196, 63, 43, 0.1);
}

.pcard-item-confirm-text {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.pcard-item-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/*
   Подвал модалки предмета. Раскладка задана сеткой, а не подобрана переносом: в подписи
   денежных кнопок входит сумма, и на flex-wrap ряд перестраивался от цены предмета —
   у скина за 55 550 X «вернуть за полную» уезжала на вторую строку, у скина за 150 X
   оставалась в первой. Кнопки прыгали под курсором при переходе между предметами, а
   промах по «вернуть за полную» на дорогом скине стоит проекту денег.

   Сумма вынесена второй строкой внутрь кнопки: подпись не удлиняется от числа, поэтому
   ширина и высота ряда одинаковы и для 0 X, и для девятизначной суммы.
*/
.pcard-item-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem;
}

/* «Забрать» — своей строкой и по содержимому: это единственное действие без денег,
   и растягивать его на всю ширину значит делать самым заметным то, что уносит предмет
   в никуда. */
.pcard-item-actions > .btn-action:first-child {
    grid-column: 1 / -1;
    justify-self: start;
}

.pcard-item-actions .btn-action--sum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    line-height: 1.2;
}

/* Сумма — моноширинным и без uppercase: цифры в ней сравнивают между собой
   («вернуть 2 500» против «за полную 2 100»), а не читают как подпись. */
.pcard-item-actions .btn-action-sum {
    font-family: "Share Tech Mono", ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
}

/* Узкий экран: две колонки по 1fr режут подписи, поэтому кнопки идут столбиком. */
@media (max-width: 520px) {
    .pcard-item-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .pcard-item-actions > .btn-action:first-child {
        justify-self: stretch;
    }
}

/* Бан и наблюдение — то, что должно быть видно до открытия любой вкладки. */
.pcard-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    border-left: 3px solid var(--color-primary);
    background: rgba(196, 63, 43, 0.12);
}

.pcard-alert.warn {
    border-left-color: #D7B33F;
    background: rgba(215, 179, 63, 0.1);
    color: #D7B33F;
}

.pcard-tabs {
    margin-top: 0.8rem;
}

.pcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
}

.pcard-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pcard-note {
    width: 100%;
    resize: vertical;
}

.pcard-note-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

/* Сохранить и очистить — квадратные и без подписей: две короткие команды под своим
   полем, которым текст не нужен, а ряд из двух надписей занимал полблока. */
.pcard-note-actions .pmm-icon-btn {
    width: 34px;
    height: 34px;
}

.pcard-note-status {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.pcard-facts {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pcard-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0.45rem;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.83rem;
}

.pcard-fact > span:first-child {
    color: var(--color-text-secondary);
}

.pcard-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pcard-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    color: var(--color-text-main);
    font-size: 0.82rem;
    text-decoration: none;
}

a.pcard-row:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.pcard-row.active-ban {
    border-left: 3px solid var(--color-primary);
}

.pcard-row-id {
    flex: 0 0 auto;
    min-width: 3rem;
    font-family: 'Consolas', 'Courier New', monospace;
    color: var(--color-accent);
}

.pcard-row-main {
    flex: 1 1 200px;
    min-width: 0;
}

.pcard-row-sub,
.pcard-row-date {
    color: var(--color-text-secondary);
}

@media (max-width: 720px) {
    /* На телефоне правый край шапки становится столбиком во всю ширину: кнопки рядом
       с балансом там сжимаются до нечитаемых. Кнопки при этом остаются в своей строке,
       вдвоём по половине ширины. */
    .pcard-head-side {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .pcard-head-actions {
        width: 100%;
    }

    /* На телефоне баланс становится строкой во всю ширину: столбик у правого края
       на узком экране читается хуже, чем «итого слева — разбивка справа». */
    .pcard-balance {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.6rem;
    }

    .pcard-avatar {
        width: 56px;
        height: 56px;
    }
}

/* ---- Вкладка «Онлайн»: кто сейчас на серверах и на кого смотреть первым ----
   Оценка слева — сумма явных сигналов, и рядом всегда видно из чего она сложилась.
   Это порядок просмотра, а не приговор: наказаний по оценке не бывает. */

.mod-online-bar {
    align-items: center;
}

.mod-online-meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.mod-online-warn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    color: #D7B33F;
    border-left: 2px solid #D7B33F;
    background: rgba(215, 179, 63, 0.08);
}

.mod-online-card {
    align-items: center;
}

.mod-online-score {
    flex: 0 0 auto;
    width: 2.6rem;
    padding: 0.3rem 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-main);
    background: rgba(196, 63, 43, 0.16);
    border-left: 3px solid var(--color-primary);
}

@media (max-width: 720px) {
    .mod-online-card {
        align-items: flex-start;
    }

    .mod-online-score {
        width: 100%;
        border-left: none;
        border-top: 3px solid var(--color-primary);
    }
}

/* ---- Панель инструментов, поиск и фильтры-карточки в модерации ----
   Фильтр карточками, а не выпадашкой: видно и распределение, и куда жать. */

.mod-header-action {
    margin-left: auto;
}

.mod-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.mod-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    max-width: 320px;
}

.mod-search-wide {
    max-width: none;
    margin-bottom: 0.6rem;
}

/* Переключатель причин стоит в одной строке с поиском: причины известны заранее из справочника,
   набор кнопок постоянен, и отдельный ряд под него был бы пустой тратой высоты. */
.mod-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.mod-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    /* Срез угла вместо скругления — общее правило вёрстки проекта. */
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.mod-chip:hover {
    color: var(--color-text-main);
    border-color: var(--color-primary, #C43F2B);
}

.mod-chip.active {
    color: var(--color-text-main);
    border-color: var(--color-primary, #C43F2B);
    background: rgba(196, 63, 43, 0.14);
}

/* По причине нет ни одной жалобы: кнопку видно, но она не перетягивает взгляд с тех,
   где разбирать действительно есть что. */
.mod-chip.empty:not(.active) {
    opacity: 0.5;
}

.mod-chip-num {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-main);
}

.mod-chip.empty:not(.active) .mod-chip-num {
    color: var(--color-text-secondary);
}

.mod-search > i {
    position: absolute;
    left: 0.55rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.mod-search .input-field {
    width: 100%;
    padding: 0.3rem 1.7rem 0.3rem 1.8rem;
    font-size: 0.82rem;
}

.mod-search-clear {
    position: absolute;
    right: 0.35rem;
    padding: 0.1rem 0.25rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.mod-search-clear:hover {
    color: var(--color-primary);
}

.mod-filter-cards {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.mod-filter-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    clip-path: var(--clip-angle-br);
}

.mod-filter-card:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.18);
}

.mod-filter-card.active {
    color: var(--color-text-main);
    background: rgba(196, 63, 43, 0.14);
    border-bottom-color: var(--mod-verdict, var(--color-primary));
}

.mod-filter-card > i {
    color: var(--mod-verdict, var(--color-accent));
}

.mod-filter-card-title {
    font-weight: 600;
}

.mod-filter-card-nums {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: var(--color-text-main);
}

.mod-filter-card-sep {
    color: var(--color-text-secondary);
}

.mod-filter-card-age {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

/* ---- Действия карточки: иконки в ряд ----
   Кнопки с подписями занимали половину ширины карточки и лезли в две строки. */
.mod-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    clip-path: var(--clip-angle-br);
}

.mod-icon-btn:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
}

.mod-icon-btn.primary {
    border-color: var(--color-primary);
    color: #E06A55;
    background: rgba(196, 63, 43, 0.14);
}

.mod-icon-btn.primary:hover {
    color: var(--color-text-main);
    background: rgba(196, 63, 43, 0.28);
}

.mod-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---- Выбор игрока для проверки по своей инициативе ---- */
.mod-picker-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.mod-picker-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.mod-picker-item:hover {
    background: rgba(196, 63, 43, 0.14);
    border-color: var(--color-primary);
}

.mod-picker-name {
    flex: 1 1 160px;
    font-weight: 600;
    min-width: 0;
}

/* ---- Поля в окне вердикта ---- */
.mod-verdict-comment {
    width: 100%;
    min-height: 90px;
    resize: vertical;
}

.mod-verdict-days {
    max-width: 140px;
}

.mod-verdict-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.2rem 0 0.4rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    border-left: 2px solid var(--color-accent);
    background: rgba(255, 255, 255, 0.03);
}

/* Ссылка на запись в журнале проверок. */
.mod-check-evidence {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.78rem;
}

.mod-check-evidence:hover {
    color: var(--color-text-main);
}

@media (max-width: 720px) {
    .mod-header-action {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .mod-search {
        max-width: none;
    }

    .mod-card-actions {
        width: auto;
    }
}

/* ---- Списки модерации раскладываются в сетку ----
   Строками во всю ширину половина экрана простаивала: на 1400px в карточке
   занято меньше половины, а остальное — пустота. Колонки набираются сами,
   на узком экране остаётся одна. */

.mod-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 0.5rem;
}

.mod-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.5rem;
}

.mod-reports {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 0.4rem;
}

/* Карточка проверки: вердикт и дата сверху, ниже игрок, подпись и комментарий. */
.mod-check-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--mod-verdict, #8A8F98);
    font-size: 0.8rem;
    clip-path: var(--clip-angle-br);
}

.mod-check-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mod-check-card-target {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mod-check-card-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    font-size: 0.76rem;
}

.mod-check-card .mod-check-verdict {
    min-width: 0;
}

.mod-check-card .mod-check-comment {
    flex: none;
    padding-top: 0.15rem;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 980px) {
    .mod-list,
    .mod-checks,
    .mod-reports {
        grid-template-columns: 1fr;
    }
}

/* ==================== МОБИЛЬНАЯ ГЛАВНАЯ ====================
   Главная должна помещаться в один экран: категории делят высоту поровну,
   а кнопки внутри категории листаются по горизонтали. Вертикальной
   прокрутки на этой странице нет — она и была главной претензией. */
@media (max-width: 960px) {
    /* Подвал на мобиле только на главной: на рабочих страницах он занимал
       экран и мешал контенту. На /login своя раскладка (EmptyLayout), там
       подвала нет вовсе. */
    .admin-footer {
        display: none;
    }

    /* На главной подвал остаётся, но в одну ленту: колонка из трёх строк
       съедала 106px — это высота целой категории. */
    .page--home .admin-footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.15rem 0.6rem;
        padding: 0.4rem 0.6rem;
        font-size: 0.62rem;
    }

    .page--home {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .page--home .main-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding: 0.7rem 0.7rem 0.7rem;
    }

    .page--home .main-content {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* auto-rows, а не фиксированные четыре: категорий может стать меньше
       после фильтра по правам — оставшиеся просто поделят высоту. */
    .page--home .dashboard-grid {
        flex: 1 1 auto;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .page--home .dashboard-section {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0.55rem 0.6rem;
    }

    .page--home .section-header {
        gap: 0.5rem;
        padding-bottom: 0.4rem;
        margin-bottom: 0.4rem;
    }

    /* Куб с иконкой не должен спорить с заголовком: он был крупнее самого текста. */
    .page--home .section-icon {
        width: 20px;
        height: 20px;
    }

    .page--home .section-icon i {
        font-size: 0.6rem;
    }

    .page--home .section-header h2 {
        font-size: 0.78rem;
        letter-spacing: 0.08em;
    }

    .page--home .hscroll-wrap {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Ряд кнопок: горизонтальная лента вместо колонки. */
    .page--home .dashboard-cards {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: row;
        align-items: stretch;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .page--home .dashboard-cards::-webkit-scrollbar {
        display: none;
    }

    .page--home .dashboard-card {
        /* 4.8rem — на 375px в ряд встают ровно четыре плитки и краешек пятой
           (видно, что лента листается), подпись при этом читается в две строки. */
        flex: 0 0 4.8rem;
        /* Общая высота плиток с десктопа здесь вредна: в ленте высоту задаёт
           сама полоса, а 4.9rem снизу вернули бы вертикальную прокрутку. */
        min-height: 0;
        /* Точка отсчёта для cqi-размеров подписи и иконки. */
        container-type: inline-size;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 0.3rem;
        padding: 0.4rem 0.3rem;
        scroll-snap-align: start;
    }

    .page--home .card-icon {
        width: auto;
    }

    /* Размеры зависят от высоты экрана: на 640px иконка и подпись фиксированного
       размера уже не помещались в плитку и подрезались снизу. */
    .page--home .card-icon i {
        font-size: clamp(0.9rem, 2.1vh, 1.15rem);
        font-size: clamp(0.85rem, min(2.1vh, 20cqi), 1.15rem);
    }

    /* Описание в ленту не влезает и не нужно: название пункта само себя объясняет. */
    .page--home .card-content p,
    .page--home .card-arrow {
        display: none;
    }

    /* Размер подписи считается от ширины самой плитки (cqi), а не от rem:
       системное увеличение шрифта в Android иначе раздувает текст, и «Модерация»
       рвётся по одной букве. Первая строка — запасной вариант для старых WebView. */
    .page--home .card-content h3 {
        font-size: 0.56rem;
        font-size: clamp(0.5rem, 13cqi, 0.58rem);
        line-height: 1.15;
        letter-spacing: 0;
        margin-bottom: 0;
        /* «Распространение» одним словом не помещается никак — режем по второй строке.
           hyphens сначала пробует перенести по слогам с дефисом, и только если
           словаря нет, слово рвётся где придётся. */
        hyphens: auto;
        -webkit-hyphens: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
}

/* ==================== МОБИЛЬНАЯ СТРАНИЦА СЕРВЕРОВ ====================
   Две карточки в ряд, а панели «быстрый выбор» и «действия» убраны в
   отдельные листы: на телефоне они занимали пол-экрана до первой карточки. */
.tools-mobile-actions {
    display: none;
}

@media (max-width: 960px) {
    .tools-mobile-actions {
        display: flex;
        width: 100%;
        gap: 0.4rem;
    }

    .tools-mobile-actions .btn-action {
        flex: 1 1 0;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.5rem 0.6rem;
        font-size: 0.72rem;
    }

    /* Десктопные плитки выбора и действий на мобиле не нужны — их заменяют листы. */
    .servers-tools .tools-quick-select,
    .servers-tools .tools-actions {
        display: none !important;
    }

    .servers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .server-card {
        padding: 0.6rem 0.6rem 0.55rem;
        min-width: 0;
    }

    .server-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
        margin-bottom: 0.45rem;
    }

    .server-name {
        font-size: 0.74rem;
        letter-spacing: 0.04em;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .server-status {
        font-size: 0.58rem;
        padding: 0.12rem 0.4rem;
        letter-spacing: 0.06em;
    }

    .server-info {
        padding: 0.45rem 0;
        margin-bottom: 0.45rem;
    }

    .info-row {
        gap: 0.4rem;
        font-size: 0.68rem;
    }

    .info-value {
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .server-mode-badge {
        font-size: 0.58rem;
        padding: 0.05rem 0.3rem;
        letter-spacing: 0.04em;
    }

    .server-actions {
        gap: 0.3rem;
    }

    .server-actions .btn-action {
        padding: 0.32rem 0.5rem;
        font-size: 0.66rem;
    }

    .servers-grid-separator {
        font-size: 0.62rem;
    }
}

/* ==================== МОБИЛЬНЫЕ ЛИСТЫ (ВЫБОР / ДЕЙСТВИЯ) ====================
   Обычная модалка проекта, но содержимое — вертикальный список крупных
   кнопок: попадать пальцем в плитки панели инструментов было неудобно. */
.mobile-sheet {
    width: min(420px, 100%);
    max-height: min(82vh, 620px);
    display: flex;
    flex-direction: column;
}

.mobile-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-sheet-list > button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    /* 44px — минимальная цель для пальца; ниже начинаются промахи. */
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.mobile-sheet-list > button:hover {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.14);
}

.mobile-sheet-list > button > i {
    width: 1.1rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.mobile-sheet-list > button.mobile-sheet-danger {
    border-color: rgba(196, 63, 43, 0.55);
    color: #E06A55;
}

.mobile-sheet-list > button.mobile-sheet-danger > i {
    color: #E06A55;
}

.mobile-sheet-group {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
}

.mobile-sheet-counter {
    margin-right: auto;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

/* ==================== ПОДСКАЗКИ ГОРИЗОНТАЛЬНОГО СКРОЛЛА ====================
   Классы has-prev / has-next ставит site.js по фактическому положению ленты:
   стрелка есть только там, куда можно листнуть, и гаснет, когда лента в упоре. */
.hscroll-wrap {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
}

.hscroll-wrap > .hscroll {
    flex: 1 1 auto;
    min-width: 0;
}

.hscroll-wrap::before,
.hscroll-wrap::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.4rem;
    display: flex;
    align-items: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.62rem;
    color: var(--color-text-secondary);
    /* Подсказка не должна перехватывать касание — под ней живая лента. */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.hscroll-wrap::before {
    content: "\f053";
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(to right, var(--color-bg-card) 35%, rgba(0, 0, 0, 0));
}

.hscroll-wrap::after {
    content: "\f054";
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(to left, var(--color-bg-card) 35%, rgba(0, 0, 0, 0));
}

.hscroll-wrap.has-prev::before,
.hscroll-wrap.has-next::after {
    opacity: 1;
}

/* ==================== ПАНЕЛЬ СЕРВЕРА НА МОБИЛЕ ====================
   Блок действий уезжал в самый низ страницы, за консоль: чтобы нажать Start,
   надо было прокрутить всё. На мобиле его заменяет кнопка наверху и лист. */
.console-mobile-actions {
    display: none;
}

@media (max-width: 900px) {
    .console-mobile-actions {
        display: flex;
    }

    .console-mobile-actions .btn-action {
        flex: 1 1 auto;
        justify-content: center;
        gap: 0.4rem;
        min-height: 40px;
        font-size: 0.78rem;
    }

    /* Нижний блок и его выпадашки на мобиле не нужны — всё переехало в лист. */
    .console-actions {
        display: none !important;
    }
}

/* ==================== БЫСТРЫЕ ДЕЙСТВИЯ НА ГЛАВНОЙ ====================
   Секция под разделами навигации: очередь работы (тикеты, модерация),
   сводка за сутки, выдача бонуса и создание пополнения. На ПК — плитки
   в один ряд, на мобиле плитки прячутся и вместо них идёт лента кнопок
   (.quick-strip), которая открывает то же содержимое в нижнем листе. */
.quick-panel {
    margin-top: 1.75rem;
}

/* Колонки не пересчитываются под число блоков (их от двух до четырёх — зависит
   от прав вошедшего), поэтому раскладка колонкой авто-потока: сколько блоков
   приехало, столько и колонок, и все они в одном ряду. С фиксированными тремя
   колонками четвёртый блок уезжал вниз и главная переставала быть одним экраном. */
.quick-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

/* На узком десктопе один ряд ужимает формы до нечитаемого — уходим в две колонки. */
@media (max-width: 1500px) {
    .quick-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

.quick-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
}

.quick-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.quick-card-head > i {
    width: 1.2rem;
    text-align: center;
    color: var(--color-primary);
}

.quick-card-head h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.quick-badge {
    margin-left: auto;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.1);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.quick-badge.danger {
    background: var(--color-primary);
    color: #fff;
}

.quick-badge.warn {
    background: rgba(196, 63, 43, 0.25);
    color: #E06A55;
}

.quick-body,
.quick-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

/* --- поддержка: тикеты и модерация счётчиками --- */
.quick-sub {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quick-sub-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
}

.quick-sub-title > i {
    width: 0.9rem;
    text-align: center;
}

/* Четыре счётчика в ряд; на узкой плитке ряд ломается сам. */
.quick-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr));
    gap: 0.3rem;
}

.quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.45rem 0.3rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid transparent;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* Красная подчёркивающая полоса — то, что ждёт человека, а не просто цифра. */
.quick-tile.hot {
    border-bottom-color: var(--color-primary);
}

.quick-tile-num {
    font-family: "Share Tech Mono", monospace;
    font-size: 1.25rem;
    line-height: 1.1;
}

.quick-tile.hot .quick-tile-num {
    color: #E06A55;
}

.quick-tile-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

/* --- сводка за сутки --- */
.quick-metric-hint .danger {
    color: #E06A55;
}

.quick-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.quick-metric {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.quick-metric:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.quick-metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.quick-metric-value {
    grid-row: span 2;
    align-self: center;
    font-family: "Share Tech Mono", monospace;
    font-size: 1.25rem;
    white-space: nowrap;
}

.quick-metric-value.good {
    color: #95C443;
}

.quick-metric-hint {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/* --- формы выдачи --- */
.quick-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Форма пополнения живёт прямо в плитке, второй модалки над ней больше нет. С раскрытым
   блоком платежа она выше экрана ноутбука, поэтому прокручивается внутри себя — иначе
   одна плитка растянула бы ряд на всю главную. */
.quick-deposit {
    max-height: min(46vh, 420px);
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* Карточка выбранного игрока. Раскладка колонкой, а не строкой: ник + 17-значный SteamId +
   два баланса в одну строку не помещаются на телефоне, и правый край («бонус N») просто
   срезался многоточием — то есть на мобильном было не видно ровно то число, ради которого
   в карточку и смотрят. */
.quick-found {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    background: rgba(149, 196, 67, 0.1);
    border-left: 2px solid #95C443;
    font-size: 0.76rem;
}

.quick-found-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.quick-found-head > i {
    color: #95C443;
}

.quick-found-nick {
    font-weight: 600;
}

/* SteamId ломается по символам: это одно длинное число без пробелов, и без break-all
   оно распирает карточку по ширине вместо переноса. */
.quick-found-id {
    font-family: "Share Tech Mono", monospace;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.quick-found-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    font-family: "Share Tech Mono", monospace;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
}

.quick-found-bal b {
    color: var(--color-text-main);
    font-weight: 600;
}

/* Общий баланс отделён цветом: кэш и бонус — слагаемые, и без выделения глаз читает
   три равнозначных числа вместо «два и их сумма». */
.quick-found-sum {
    color: #95C443;
}

.quick-found-sum b {
    color: #95C443;
}

.quick-found-total {
    margin-left: auto;
    font-family: "Share Tech Mono", monospace;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.quick-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: auto;
    width: 100%;
    min-height: 40px;
}

.quick-note {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    border-left: 2px solid var(--color-border);
    padding-left: 0.5rem;
}

/* Найденные игроки под полем поиска. */
.quick-results {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 9rem;
    overflow-y: auto;
}

.quick-result {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    min-width: 0;
    padding: 0.4rem 0.55rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 0.76rem;
    text-align: left;
    cursor: pointer;
}

.quick-result:hover {
    border-color: var(--color-primary);
    background: rgba(196, 63, 43, 0.16);
}

.quick-note-error {
    border-left-color: var(--color-primary);
    color: #E06A55;
}

.quick-note-ok {
    border-left-color: #95C443;
    color: #95C443;
}

/* Лента появляется только на мобиле. */
.quick-strip {
    display: none;
}

@media (max-width: 960px) {
    /* Главная на телефоне помещается в один экран, поэтому плитки заменяет
       лента кнопок фиксированной высоты, а содержимое открывается листом.
       Ленте отдаётся ровно её высота — остаток по-прежнему делят категории. */
    .page--home .quick-panel {
        flex: 0 0 auto;
        margin-top: 0.5rem;
    }

    .page--home .quick-grid {
        display: none;
    }

    .page--home .quick-strip {
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .page--home .quick-strip::-webkit-scrollbar {
        display: none;
    }

    .quick-chip {
        position: relative;
        flex: 0 0 5.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        /* 56px — палец попадает уверенно, но лента не съедает экран. */
        min-height: 56px;
        padding: 0.4rem 0.3rem;
        background: rgba(0, 0, 0, 0.35);
        border: 1px solid var(--color-border);
        color: var(--color-text-main);
        cursor: pointer;
        scroll-snap-align: start;
    }

    .quick-chip > i {
        font-size: 0.95rem;
        color: var(--color-primary);
    }

    .quick-chip-title {
        font-size: 0.55rem;
        line-height: 1.15;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        overflow-wrap: anywhere;
    }

    /* В ленте бейдж — угловая метка, в строку он не помещается. */
    .quick-chip .quick-badge {
        position: absolute;
        top: 0;
        right: 0;
        margin-left: 0;
        padding: 0 0.3rem;
        font-size: 0.6rem;
        line-height: 1.4;
    }

    .quick-sheet-body {
        padding: 0.7rem 0.8rem 0.9rem;
        overflow-y: auto;
    }

    /* В листе кнопка не должна прилипать к низу — тут нет колонки, которую
       надо выравнивать, как в плитке на ПК. */
    .quick-sheet-body .quick-submit {
        margin-top: 0.2rem;
    }

    /* В листе прокрутка уже своя: вторая, внутри формы пополнения, только мешала бы
       пальцу — лист и так открывается на весь экран. */
    .quick-deposit {
        max-height: none;
        overflow-y: visible;
    }
}

/* Отказ массовой правки: сообщение живёт в подвале модалки, рядом с кнопкой. */
.econs-bulk-error {
    margin-right: auto;
    font-size: 0.8rem;
    color: var(--color-primary);
}

/* ===== Отчёт по массовой команде на серверах ===== */

.mass-command-modal {
    width: 100%;
    max-width: 720px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}

.mass-command-modal .modal-body {
    overflow-y: auto;
}

.mass-command-progress {
    margin: 0 0 0.8rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.mass-command-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mass-command-row {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    padding: 0.5rem 0.7rem;
    background: #05070c;
}

.mass-command-row.ok {
    border-left-color: #95C443;
}

.mass-command-row.fail {
    border-left-color: #C43F2B;
}

.mass-command-row-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.8rem;
}

.mass-command-server {
    font-weight: 700;
    letter-spacing: 0.06em;
}

.mass-command-node,
.mass-command-ms {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.mass-command-status {
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.mass-command-row.ok .mass-command-status {
    color: #95C443;
}

.mass-command-row.fail .mass-command-status {
    color: #C43F2B;
}

.mass-command-message {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: #C43F2B;
}

.mass-command-output {
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--color-border);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
}

.mass-command-line {
    word-break: break-all;
}

.mass-command-line.more {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Фильтр по базе на странице бэкапов. Стоит в одном ряду с вкладками «Локально» и «В S3»,
   поэтому прижат вправо и не растягивается: при трёх базах длинный селект выглядел бы
   тяжелее самих вкладок. */
.backup-db-filter {
    margin-left: auto;
    width: auto;
    min-width: 140px;
}

/* Фильтры очереди вывоза архивов нод. Отдельный класс, а не backup-db-filter: там
   margin-left: auto прижимает единственный фильтр вправо, а здесь их два в ряд и
   второй уезжал бы от первого. */
.node-backup-filter {
    width: auto;
    min-width: 160px;
}

/* ---- Закрепление сертификата ноды ----
   Квадрат рядом со статусом. Три состояния, а не два: нода без отпечатка ещё не обновлена,
   и красный на ней означал бы поломку там, где её нет. Форма — срезом, не скруглением. */
.node-cert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
    border: 1px solid var(--color-border);
    clip-path: var(--clip-angle-br);
}

.node-cert--ok {
    color: #95C443;
    border-color: #95C443;
}

.node-cert--fail {
    color: #C43F2B;
    border-color: #C43F2B;
}

.node-cert--none,
.node-cert--idle {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.node-cert-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.node-cert-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    word-break: break-all;
}