.stats-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
    gap: var(--gap);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: var(--gap);
}

.stats-grid-main,
.users-summary-grid,
.payments-stats,
.server-metrics-grid,
.network-grid,
.settings-grid {
    display: grid;
    gap: var(--gap);
}

.stats-grid-main {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.users-summary-grid {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.payments-stats {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin-bottom: var(--gap);
}

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

.settings-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.summary-card,
.users-summary-card,
.payment-stat,
.kpi-card,
.metric-card,
.server-metric {
    min-height: 86px;
    padding: var(--padding-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-muted);
}

.summary-card.active,
.users-summary-card.active {
    border-color: rgba(34, 197, 94, 0.38);
}

.summary-card.warning,
.users-summary-card.warning {
    border-color: rgba(245, 158, 11, 0.42);
}

.summary-card.danger,
.users-summary-card.danger {
    border-color: rgba(239, 68, 68, 0.42);
}

.summary-card.info {
    border-color: rgba(59, 130, 246, 0.42);
}

.summary-label,
.users-summary-label,
.kpi-label,
.metric-label,
.server-metric-label,
.stat-label {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.summary-value,
.users-summary-value,
.kpi-value,
.metric-value,
.server-metric-value,
.stat-value {
    margin-top: 8px;
    color: var(--color-text);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.kpi-card {
    min-height: 112px;
}

.kpi-card.ok {
    border-color: rgba(34, 197, 94, 0.42);
}

.kpi-card.warning {
    border-color: rgba(245, 158, 11, 0.46);
}

.kpi-card.danger {
    border-color: rgba(239, 68, 68, 0.52);
}

.kpi-card.ok .kpi-value {
    color: #86efac;
}

.kpi-card.warning .kpi-value {
    color: #fcd34d;
}

.kpi-card.danger .kpi-value {
    color: #fca5a5;
}

.kpi-unit {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.stat-card {
    min-height: 122px;
    text-align: left;
}

.stat-unit {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.users-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.users-card-subtitle,
.users-management-subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.chart-container {
    height: 430px;
}

.chart-container canvas,
.server-chart canvas,
.user-traffic-chart canvas {
    width: 100%;
    height: 100%;
}

.chart-header,
.server-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.server-chart {
    height: 340px;
}

.connection-mini-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--gap);
}

.connection-mini-card {
    min-height: 230px;
}

.section-heading.compact {
    margin-bottom: var(--gap-sm);
}

.connection-mini-chart {
    height: 170px;
}

.connection-mini-chart canvas {
    width: 100%;
    height: 100%;
}

.connection-errors-section {
    margin-top: var(--gap);
}

.runtime-servers-section {
    margin-top: var(--gap);
}

.runtime-summary-grid {
    margin-bottom: var(--gap);
}

.runtime-servers-table {
    min-width: 1080px;
}

.runtime-error-cell {
    max-width: 260px;
    color: var(--color-text-muted);
    word-break: break-word;
}

.runtime-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar,
.users-management-toolbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: var(--gap-sm);
    margin-bottom: var(--gap);
}

.users-toolbar-actions,
.payments-filters,
.settings-input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm);
}

.users-toolbar-actions {
    justify-content: space-between;
}

.payments-filters {
    min-width: min(520px, 100%);
}

.payments-search {
    flex: 1 1 260px;
}

.payments-problematic-toggle {
    min-height: 40px;
}

.payment-issues-panel {
    display: grid;
    gap: var(--gap-sm);
    margin-bottom: var(--gap);
    padding: var(--padding-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-muted);
}

.payment-issues-header div,
.payment-issue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
}

.payment-issues-header span {
    min-width: 28px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
    font-weight: 800;
    text-align: center;
}

.payment-issues-list {
    display: grid;
    gap: 8px;
}

.payment-issue-item {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.payment-issue-item small,
.payment-row-note,
.payment-issue-empty {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.payment-drawer {
    width: min(620px, 100%);
}

.payment-detail-grid {
    display: grid;
    gap: 8px;
}

.payment-detail-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr);
    gap: var(--gap-sm);
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.payment-detail-row span {
    color: var(--color-text-muted);
}

.payment-detail-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.payment-detail-section {
    display: grid;
    gap: var(--gap-sm);
    padding-top: var(--gap);
    border-top: 1px solid var(--color-border);
}

.payment-detail-section h3 {
    margin: 0;
    font-size: 15px;
}

.payment-event {
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-muted);
}

.payment-event summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.payment-event small {
    color: var(--color-text-muted);
}

.payload-view {
    max-height: 360px;
    overflow: auto;
    margin: 0;
    padding: var(--padding-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.plans-storefront-settings {
    display: grid;
    gap: var(--gap-sm);
    margin-bottom: var(--gap);
}

.plans-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: var(--gap-sm);
    margin-bottom: var(--gap);
}

.plans-form-wide,
.plans-form-flags {
    grid-column: span 2;
}

.plans-form-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm);
    min-height: 40px;
}

.settings-section {
    box-shadow: none;
}

.settings-item {
    display: grid;
    gap: 8px;
}

.settings-actions {
    align-items: stretch;
}

.settings-actions .button {
    justify-content: flex-start;
}

.system-status {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: var(--gap-sm);
}

.system-status-item {
    min-height: 70px;
    padding: var(--padding-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-muted);
}

.system-status-item.ok {
    border-color: rgba(34, 197, 94, 0.38);
}

.system-status-item.warn {
    border-color: rgba(245, 158, 11, 0.42);
}

.system-status-item.error {
    border-color: rgba(239, 68, 68, 0.42);
}

.system-status-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.system-status-name {
    color: var(--color-text-soft);
    font-weight: 800;
}

.system-status-detail {
    margin-top: 6px;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alerts-widget {
    border-left: 4px solid var(--color-primary);
    box-shadow: none;
}

.alert-empty {
    color: #86efac;
    font-weight: 700;
    text-align: center;
}

.alerts-summary,
.alerts-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.alerts-list {
    flex-direction: column;
}

.alert-item {
    display: flex;
    gap: var(--gap-sm);
    padding: var(--padding-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-muted);
}

.alert-content {
    min-width: 0;
    flex: 1;
}

.alert-title {
    color: var(--color-text);
    font-weight: 800;
}

.alert-description,
.alert-more {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.alert-summary-critical,
.alert-critical {
    color: #fca5a5;
}

.alert-summary-warning,
.alert-warning {
    color: #fcd34d;
}

.alert-summary-info,
.alert-info {
    color: #93c5fd;
}

.management-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    text-transform: inherit;
}

.management-sort-btn.active {
    color: var(--color-text);
}

.management-sort-indicator {
    min-width: 10px;
    color: var(--color-primary);
}

.traffic-usage {
    display: grid;
    gap: 6px;
    min-width: 180px;
}

.traffic-usage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.traffic-meter {
    display: block;
    width: 100%;
    height: 7px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--color-bg-soft);
}

.traffic-meter::-webkit-progress-bar {
    background: var(--color-bg-soft);
    border-radius: 999px;
}

.traffic-meter::-webkit-progress-value {
    background: var(--color-primary);
    border-radius: 999px;
}

.traffic-meter::-moz-progress-bar {
    background: var(--color-primary);
    border-radius: 999px;
}

.traffic-meter.warning::-webkit-progress-value {
    background: var(--color-warning);
}

.traffic-meter.warning::-moz-progress-bar {
    background: var(--color-warning);
}

.traffic-meter.danger::-webkit-progress-value {
    background: var(--color-danger);
}

.traffic-meter.danger::-moz-progress-bar {
    background: var(--color-danger);
}

.traffic-percent {
    color: #86efac;
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.traffic-percent.warning {
    color: #fcd34d;
}

.traffic-percent.danger {
    color: #fca5a5;
}

.table-menu {
    position: relative;
    display: inline-block;
}

.table-menu summary {
    list-style: none;
}

.table-menu summary::-webkit-details-marker {
    display: none;
}

.menu-trigger {
    width: 40px;
    padding-inline: 0;
}

.user-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: grid;
    gap: 6px;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.menu-item {
    justify-content: flex-start;
    width: 100%;
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.58);
}

.drawer-backdrop.open {
    display: flex;
}

.user-drawer {
    width: min(460px, 100%);
    height: 100%;
    overflow-y: auto;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface);
}

.user-drawer-header {
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
    padding: var(--padding);
    border-bottom: 1px solid var(--color-border);
}

.user-drawer-title {
    font-size: 18px;
    font-weight: 800;
    word-break: break-word;
}

.user-drawer-subtitle {
    color: var(--color-text-muted);
}

.drawer-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-muted);
    color: var(--color-text);
    cursor: pointer;
    font-size: 22px;
}

.user-drawer-body {
    display: grid;
    gap: var(--gap-sm);
    padding: var(--padding);
}

.user-traffic-chart {
    height: 260px;
    padding-top: var(--gap);
    border-top: 1px solid var(--color-border);
}

.telegram-cell {
    max-width: 160px;
    word-break: break-word;
}

.broadcast-form {
    display: grid;
    gap: var(--gap-sm);
    margin-bottom: var(--gap);
}

.broadcast-textarea {
    min-height: 150px;
}

.broadcast-options,
.broadcast-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: var(--gap-sm);
}

.broadcast-options {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.broadcast-status-grid {
    margin-bottom: var(--gap);
}

.broadcasts-table .selected-row {
    background: rgba(59, 130, 246, 0.08);
}

@media (max-width: 1180px) {
    .stats-wrapper,
    .network-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid-main {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .users-summary-grid,
    .kpi-grid,
    .payments-stats,
    .broadcast-status-grid,
    .system-status,
    .server-metrics-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .toolbar,
    .users-management-toolbar,
    .plans-form {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 640px) {
    .stats-grid-main,
    .users-summary-grid,
    .kpi-grid,
    .payments-stats,
    .broadcast-status-grid,
    .broadcast-options,
    .system-status,
    .server-metrics-grid,
    .toolbar,
    .users-management-toolbar,
    .plans-form {
        grid-template-columns: 1fr;
    }

    .plans-form-wide,
    .plans-form-flags {
        grid-column: span 1;
    }

    .chart-header,
    .server-chart-header,
    .payments-filters,
    .settings-input-group {
        align-items: stretch;
        flex-direction: column;
    }

    .chart-container {
        height: 360px;
    }

    .detail-row {
        grid-template-columns: 1fr;
    }
}