/* Admin panel now uses the same visual language as the user panel.
   Page-specific Manage *.razor.css files are intentionally cleared. */

.admin-pro-page,
.manage-pro-page,
.support-admin-page,
.gateway-page,
.manage-blog-page,
.manage-slider-page,
.management-page {
    min-height: calc(100dvh - var(--header-height));
    padding-block: clamp(1rem, 2vw, 1.75rem) var(--space-16);
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .07), transparent 30rem),
        linear-gradient(180deg, rgba(248, 250, 252, .92), #fff 58%);
}

.admin-pro-page .admin-pro-container,
.manage-pro-page .admin-pro-container,
.support-admin-page .admin-pro-container,
.gateway-page .admin-pro-container,
.manage-blog-page .admin-pro-container,
.manage-slider-page .admin-pro-container {
    width: min(100% - 2rem, 1640px) !important;
    display: grid !important;
    gap: var(--space-5) !important;
    align-items: start !important;
    direction: rtl;
}

.admin-pro-main,
.admin-pro-main--dense,
.gateway-main {
    display: grid !important;
    min-width: 0 !important;
    align-content: start !important;
    gap: var(--space-5) !important;
}

.admin-pro-sidebar {
    display: none !important;
}

.admin-pro-brand {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    margin: 0 !important;
    padding-bottom: var(--space-4) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.admin-pro-brand__mark {
    display: grid !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    flex: 0 0 auto !important;
    place-items: center !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: #fff !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(1, 41, 24, .22) !important;
}

.admin-pro-brand strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: .92rem;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-nav__links {
    display: grid !important;
    gap: .35rem !important;
}

.admin-nav__link {
    display: flex !important;
    width: 100% !important;
    min-height: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--color-muted) !important;
    box-shadow: none !important;
    padding: .75rem .85rem !important;
    text-align: right !important;
    font-size: .86rem !important;
    font-weight: 900 !important;
    transform: none !important;
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-nav__link::before { display: none !important; }
.admin-nav__item-icon { display: none !important; }
.admin-nav__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-nav__link:hover,
.admin-nav__link.active {
    background: var(--color-primary-50) !important;
    color: var(--color-primary) !important;
}

.admin-pro-hero,
.gateway-hero,
.support-admin-hero {
    display: grid !important;
    gap: var(--space-4) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-2xl) !important;
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .10), transparent 24rem),
        linear-gradient(135deg, #fff, rgba(239, 246, 255, .86)) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: clamp(1rem, 2.2vw, 1.5rem) !important;
}

.admin-pro-hero h1,
.gateway-hero h1,
.support-admin-hero h1,
.admin-pro-hero p,
.gateway-hero p,
.support-admin-hero p {
    margin-bottom: 0 !important;
}

.admin-pro-hero p,
.gateway-hero p,
.support-admin-hero p {
    max-width: 58rem !important;
    color: var(--color-muted) !important;
    font-size: .92rem !important;
}

.admin-kpi-grid,
.support-admin-kpis,
.gateway-metrics {
    display: grid !important;
    gap: var(--space-4) !important;
}

.admin-kpi-card,
.support-kpi,
.gateway-metric-card {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    background: #fff !important;
    box-shadow: var(--shadow-xs) !important;
    padding: var(--space-5) !important;
}

.admin-kpi-card::before,
.support-kpi::before,
.gateway-metric-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    right: 0;
    width: .28rem;
    background: var(--color-primary);
}

.admin-kpi-card:nth-child(2)::before,
.support-kpi:nth-child(2)::before,
.gateway-metric-card:nth-child(2)::before { background: var(--color-success); }
.admin-kpi-card:nth-child(3)::before,
.support-kpi:nth-child(3)::before,
.gateway-metric-card:nth-child(3)::before { background: var(--color-warning); }
.admin-kpi-card:nth-child(4)::before,
.support-kpi:nth-child(4)::before,
.gateway-metric-card:nth-child(4)::before { background: var(--color-info); }

.admin-kpi-card span,
.support-kpi span,
.gateway-metric-card span,
.admin-kpi-card small,
.support-kpi small,
.gateway-metric-card small {
    display: block;
    color: var(--color-muted);
    font-size: .8rem;
    font-weight: 850;
}

.admin-kpi-card strong,
.support-kpi strong,
.gateway-metric-card strong {
    display: block;
    margin-block: .35rem;
    color: var(--color-text);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 950;
    line-height: 1.25;
}

.admin-pro-card,
.manage-card,
.manage-invoice-card,
.gateway-list-panel,
.gateway-editor-panel,
.blog-admin-toolbar,
.support-admin-list,
.support-admin-detail,
.management-card,
.summary-card,
.command-card,
.panel-card,
.gateway-card,
.gateway-live-preview,
.blog-preview-card,
.slider-preview-card,
.invoice-box {
    min-width: 0;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-2xl) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: clamp(1rem, 2vw, 1.35rem) !important;
}

.admin-section-head,
.manage-section-head,
.gateway-panel-head,
.gateway-editor-head,
.ticket-detail-head,
.support-admin-toolbar {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
}

.admin-section-head h2,
.manage-section-head h2,
.gateway-panel-head h2,
.gateway-editor-head h2,
.ticket-detail-head h2,
.admin-section-head p,
.manage-section-head p,
.gateway-panel-head p,
.gateway-editor-head p,
.ticket-detail-head p {
    margin-bottom: 0 !important;
}

.admin-section-head p,
.manage-section-head p,
.gateway-panel-head p,
.gateway-editor-head p,
.ticket-detail-head p {
    color: var(--color-muted);
    font-size: .88rem;
}

.admin-pro-grid,
.manage-grid-2,
.manage-blog-grid,
.manage-slider-grid,
.gateway-board,
.support-admin-layout,
.management-layout,
.management-stack,
.summary-grid,
.command-grid {
    display: grid !important;
    gap: var(--space-5) !important;
    min-width: 0 !important;
}

.manage-grid-2--wide-form,
.manage-grid-2--invoice,
.manage-blog-grid,
.manage-slider-grid,
.gateway-board,
.support-admin-layout {
    align-items: start !important;
}

.manage-form-grid,
.gateway-form-grid,
.manage-upload-grid,
.invoice-grid,
.gateway-form,
.gateway-form-section,
.gateway-required-fields,
.support-admin-controls,
.support-form,
.user-form-grid,
.blog-admin-toolbar,
.support-admin-toolbar,
.gateway-toggle-row,
.manage-actions,
.manage-form-actions,
.gateway-form-actions {
    display: grid !important;
    gap: var(--space-4) !important;
}

.manage-form-grid,
.gateway-form-grid,
.user-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)) !important;
}

.manage-form-grid--single,
.gateway-field-full,
.gateway-form-grid .gateway-field-full {
    grid-column: 1 / -1 !important;
}

.manage-form-grid label,
.gateway-form-grid label,
.gateway-form label,
.support-admin-toolbar label,
.support-form label,
.blog-admin-toolbar label,
.manage-check-row,
.gateway-toggle-row,
.support-checkline {
    display: grid;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: .85rem;
    font-weight: 900;
}

.manage-form-grid input,
.manage-form-grid textarea,
.manage-form-grid select,
.gateway-form-grid input,
.gateway-form-grid textarea,
.gateway-form-grid select,
.gateway-form input,
.gateway-form textarea,
.gateway-form select,
.support-admin-toolbar input,
.support-admin-toolbar select,
.support-form textarea,
.manage-search,
.management-search {
    min-height: 2.58rem !important;
    border-radius: var(--radius-md) !important;
    padding-block: .62rem !important;
    font-size: .9rem !important;
}

.manage-form-grid textarea,
.gateway-form-grid textarea,
.support-form textarea {
    min-height: 7rem !important;
}

.manage-subsection-title,
.gateway-section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-block: var(--space-5) var(--space-3);
    color: var(--color-primary);
    font-size: .86rem;
    font-weight: 950;
}

.manage-subsection-title::before,
.gateway-section-title::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.manage-check-row,
.gateway-toggle-row,
.support-checkline {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    padding: .8rem .95rem;
}

.manage-check-row input,
.gateway-toggle-row input,
.support-checkline input {
    width: auto !important;
    min-height: auto !important;
    accent-color: var(--color-primary);
}

.manage-actions,
.manage-form-actions,
.gateway-form-actions,
.gateway-card__actions,
.blog-admin-item__actions,
.slider-admin-item__actions,
.blog-comment-admin-item__actions,
.manage-inline-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .55rem !important;
    align-items: center !important;
}

.manage-link-button,
.manage-small-button {
    display: inline-flex;
    min-height: 2.1rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-muted);
    padding: .48rem .75rem;
    font-size: .78rem;
    font-weight: 900;
}

.manage-link-button:hover,
.manage-small-button:hover {
    border-color: rgba(1, 41, 24, .30);
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.manage-danger-button,
.manage-small-button--danger {
    border-color: rgba(220, 38, 38, .18) !important;
    background: var(--color-danger-50) !important;
    color: var(--color-danger) !important;
}

.manage-small-button--success {
    border-color: rgba(1, 41, 24, .18) !important;
    background: var(--color-success-50) !important;
    color: var(--color-success) !important;
}

.admin-list-cards,
.manage-list,
.blog-admin-list,
.slider-admin-list,
.support-admin-ticket-list,
.gateway-list,
.blog-comment-admin-list,
.manage-lessons-list {
    display: grid !important;
    gap: var(--space-3) !important;
    min-width: 0;
}

.admin-mini-row,
.manage-row,
.manage-enrollment-row,
.blog-admin-item,
.slider-admin-item,
.blog-comment-admin-item,
.support-admin-ticket-row,
.gateway-card,
.manage-syllabus-section,
.manage-lesson-editor {
    display: grid !important;
    gap: .75rem !important;
    min-width: 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    background: #fff !important;
    box-shadow: var(--shadow-xs) !important;
    padding: var(--space-4) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.admin-mini-row:hover,
.manage-row--clickable:hover,
.blog-admin-item:hover,
.slider-admin-item:hover,
.support-admin-ticket-row:hover,
.gateway-card:hover,
.support-admin-ticket-row.is-active,
.gateway-card.is-selected,
.gateway-card.is-enabled {
    transform: translateY(-1px);
    border-color: rgba(1, 41, 24, .28) !important;
    background: var(--color-primary-50) !important;
    box-shadow: var(--shadow-sm) !important;
}

.admin-mini-row__avatar,
.comment-user__avatar {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 950;
}

.admin-mini-row__meta,
.manage-row__meta,
.gateway-card__meta,
.support-ticket-meta,
.blog-admin-item__meta,
.gateway-card__head,
.blog-admin-item__head,
.slider-admin-item__head,
.manage-syllabus-section__head,
.ticket-message__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .55rem !important;
    min-width: 0;
}

.manage-table-wrap,
.invoice-table-wrap,
.responsive-table {
    width: 100%;
    overflow-x: auto;
}

.manage-table,
.invoice-table-wrap table {
    width: 100%;
    min-width: 48rem;
    border-collapse: separate;
    border-spacing: 0;
}

.manage-table th,
.manage-table td,
.invoice-table-wrap th,
.invoice-table-wrap td {
    border-bottom: 1px solid var(--color-border);
    padding: .78rem .85rem;
    text-align: right;
    white-space: nowrap;
}

.manage-table th,
.invoice-table-wrap th {
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 950;
}

.manage-table td,
.invoice-table-wrap td {
    font-size: .84rem;
    font-weight: 800;
}

.manage-empty,
.gateway-empty-state,
.support-empty,
.support-admin-placeholder,
.management-empty {
    display: grid;
    gap: .5rem;
    border: 1px dashed var(--color-border-strong) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--color-surface-soft) !important;
    color: var(--color-muted);
    padding: var(--space-6) !important;
    text-align: center;
}

.manage-upload-box,
.gateway-upload-card,
.support-file-box {
    display: grid;
    gap: var(--space-3);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface-soft);
    padding: var(--space-4);
}

.manage-upload-label {
    color: var(--color-text);
    font-size: .86rem;
    font-weight: 950;
}

.manage-upload-preview,
.blog-cover-preview,
.slider-upload-preview,
.gateway-live-preview__logo img,
.gateway-card__logo img {
    width: 100%;
    max-height: 15rem;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.gateway-card__logo,
.gateway-live-preview__logo,
.blog-admin-item__image,
.slider-admin-item__image {
    display: grid;
    min-height: 6rem;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .16), transparent 12rem),
        linear-gradient(135deg, #eef2ff, #f8fafc);
    color: var(--color-primary);
    font-weight: 950;
}

.blog-admin-item__image img,
.slider-admin-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-pill--warning,
.status-pill--muted { background: var(--color-warning-50); color: var(--color-warning); }
.status-pill--danger { background: var(--color-danger-50); color: var(--color-danger); }
.status-pill--failed { background: var(--color-danger-50); color: var(--color-danger); }
.status-pill--success { background: var(--color-success-50); color: var(--color-success); }
.status-pill--neutral { background: var(--color-surface-soft); color: var(--color-muted); }

.gateway-status-badge,
.manage-payment-badge,
.blog-count-badge,
.slider-count-badge,
.internal-note-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    padding: .25rem .65rem;
    font-size: .76rem;
    font-weight: 950;
}

.gateway-status-badge.is-success,
.is-success { background: var(--color-success-50); color: var(--color-success); }
.gateway-status-badge.is-muted { background: var(--color-surface-soft); color: var(--color-muted); }
.is-warning { background: var(--color-warning-50); color: var(--color-warning); }

.ticket-thread {
    display: grid;
    gap: var(--space-3);
    max-height: min(62dvh, 38rem);
    overflow-y: auto;
    padding-inline-end: .25rem;
}

.ticket-message {
    display: grid;
    gap: .55rem;
    max-width: min(86%, 46rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: #fff;
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
}

.ticket-message--admin {
    justify-self: end;
    border-color: rgba(1, 41, 24, .22);
    background: var(--color-primary-50);
}

.ticket-message--user {
    justify-self: start;
}

.ticket-message--note {
    justify-self: center;
    border-color: rgba(217, 119, 6, .24);
    background: var(--color-warning-50);
}

.ticket-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.ticket-row__status {
    width: .65rem;
    height: .65rem;
    border-radius: var(--radius-pill);
    background: var(--color-muted);
}
.ticket-row__status.is-success { background: var(--color-success); }
.ticket-row__status.is-warning { background: var(--color-warning); }
.ticket-row__status.is-danger { background: var(--color-danger); }
.ticket-row__status.is-info { background: var(--color-info); }

.invoice-header,
.invoice-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    padding: var(--space-4);
}

.invoice-number {
    direction: ltr;
    color: var(--color-primary);
    font-weight: 950;
}

.ui-alert,
.management-error {
    border-radius: var(--radius-lg);
    padding: .85rem 1rem;
    font-size: .88rem;
    font-weight: 850;
}
.ui-alert--danger,
.management-error { background: var(--color-danger-50); color: var(--color-danger); }

.management-page .app-container {
    width: min(100% - 2rem, 1640px) !important;
    margin-inline: auto;
}

.management-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.management-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.management-sidebar {
    display: grid;
    gap: .35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}

.management-nav {
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-muted);
    padding: .75rem .85rem;
    text-align: right;
    font-size: .86rem;
    font-weight: 900;
}

.management-nav:hover,
.management-nav.is-active {
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.management-content {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

@media (min-width: 560px) {
    .admin-kpi-grid,
    .support-admin-kpis,
    .gateway-metrics,
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 840px) {
    .admin-pro-hero,
    .gateway-hero,
    .support-admin-hero {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
    }

    .admin-pro-grid,
    .manage-grid-2,
    .manage-blog-grid,
    .manage-slider-grid,
    .gateway-board,
    .support-admin-layout,
    .management-layout {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, .72fr) !important;
    }

    .manage-grid-2--wide-form,
    .manage-blog-grid,
    .manage-slider-grid,
    .gateway-board {
        grid-template-columns: minmax(0, 1.18fr) minmax(22rem, .82fr) !important;
    }

    .support-admin-layout {
        grid-template-columns: minmax(22rem, .55fr) minmax(0, 1.45fr) !important;
    }

    .management-layout {
        grid-template-columns: 14.5rem minmax(0, 1fr) !important;
    }
}

@media (min-width: 1120px) {
    .admin-pro-page .admin-pro-container,
    .manage-pro-page .admin-pro-container,
    .support-admin-page .admin-pro-container,
    .gateway-page .admin-pro-container,
    .manage-blog-page .admin-pro-container,
    .manage-slider-page .admin-pro-container {
        grid-template-columns: 14.5rem minmax(0, 1fr) !important;
        gap: var(--space-5) !important;
    }

    .admin-pro-sidebar {
        position: sticky !important;
        top: calc(var(--header-height) + 1rem) !important;
        display: grid !important;
        gap: var(--space-4) !important;
        align-self: start !important;
        max-height: calc(100dvh - var(--header-height) - 2rem);
        overflow-y: auto;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-2xl) !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: var(--shadow-sm) !important;
        padding: var(--space-4) !important;
    }

    .admin-kpi-grid,
    .support-admin-kpis,
    .gateway-metrics,
    .summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1440px) {
    .admin-pro-page .admin-pro-container,
    .manage-pro-page .admin-pro-container,
    .support-admin-page .admin-pro-container,
    .gateway-page .admin-pro-container,
    .manage-blog-page .admin-pro-container,
    .manage-slider-page .admin-pro-container {
        width: min(100% - 3rem, 1720px) !important;
        grid-template-columns: 14.5rem minmax(0, 1fr) !important;
    }

    .manage-grid-2--wide-form,
    .manage-blog-grid,
    .manage-slider-grid,
    .gateway-board {
        grid-template-columns: minmax(0, 1.28fr) minmax(24rem, .72fr) !important;
    }
}

@media (max-width: 767.98px) {
    .admin-pro-page .admin-pro-container,
    .manage-pro-page .admin-pro-container,
    .support-admin-page .admin-pro-container,
    .gateway-page .admin-pro-container,
    .manage-blog-page .admin-pro-container,
    .manage-slider-page .admin-pro-container,
    .management-page .app-container {
        width: min(100% - 1.25rem, 100%) !important;
    }

    .admin-pro-sidebar {
        display: block !important;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        background: rgba(255, 255, 255, .94);
        box-shadow: var(--shadow-sm);
        padding: .45rem;
        backdrop-filter: blur(14px);
    }

    .admin-pro-brand { display: none !important; }
    .admin-nav__links { display: flex !important; width: max-content; min-width: 100%; gap: .35rem !important; }
    .admin-nav__link { width: auto !important; flex: 0 0 auto; padding: .62rem .78rem !important; font-size: .78rem !important; white-space: nowrap; }

    .admin-section-head,
    .manage-section-head,
    .gateway-panel-head,
    .gateway-editor-head,
    .ticket-detail-head,
    .support-admin-toolbar,
    .management-header,
    .management-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .manage-form-grid,
    .gateway-form-grid,
    .user-form-grid {
        grid-template-columns: 1fr !important;
    }

    .ticket-message { max-width: 100%; }
}

/* Admin form consistency pass: Blog CMS + Payment Gateways */
.admin-pro-page input[type="checkbox"],
.manage-pro-page input[type="checkbox"],
.gateway-page input[type="checkbox"],
.manage-blog-page input[type="checkbox"],
.support-admin-page input[type="checkbox"] {
    display: inline-grid !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    min-width: 1.05rem !important;
    min-height: 1.05rem !important;
    flex: 0 0 1.05rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: .32rem !important;
    accent-color: var(--color-primary) !important;
}

.admin-pro-page form,
.manage-pro-page form,
.gateway-page form,
.manage-blog-page form,
.support-admin-page form {
    min-width: 0 !important;
}

.blog-editor-card form,
.gateway-form {
    display: grid !important;
    gap: var(--space-5) !important;
}

.gateway-form-section,
.blog-editor-card .user-form-grid,
.blog-editor-card .manage-upload-box,
.blog-editor-card .blog-preview-card {
    min-width: 0 !important;
}

.gateway-form-section {
    display: grid !important;
    gap: var(--space-4) !important;
    border: 1px solid rgba(229, 231, 235, .9) !important;
    border-radius: var(--radius-xl) !important;
    background: linear-gradient(180deg, #fff, rgba(248, 250, 252, .72)) !important;
    padding: clamp(.95rem, 1.8vw, 1.25rem) !important;
}

.gateway-section-title,
.manage-subsection-title {
    margin-block: 0 var(--space-2) !important;
    padding-bottom: .55rem !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.gateway-section-title span {
    display: inline-grid !important;
    width: 2rem !important;
    height: 2rem !important;
    place-items: center !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-primary-50) !important;
    color: var(--color-primary) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
}

.gateway-section-title strong,
.manage-subsection-title strong {
    color: var(--color-text) !important;
}

.gateway-section-title small,
.manage-subsection-title small {
    display: block !important;
    margin-top: .1rem !important;
    color: var(--color-muted) !important;
    font-size: .78rem !important;
    font-weight: 750 !important;
}

.manage-form-grid label,
.gateway-form-grid label,
.gateway-form > label,
.gateway-form-section > label,
.blog-admin-toolbar label,
.support-admin-toolbar label {
    margin: 0 !important;
    min-width: 0 !important;
}

.manage-form-grid input,
.manage-form-grid textarea,
.manage-form-grid select,
.gateway-form-grid input,
.gateway-form-grid textarea,
.gateway-form-grid select,
.gateway-form input,
.gateway-form textarea,
.gateway-form select,
.blog-admin-toolbar input,
.blog-admin-toolbar select,
.support-admin-toolbar input,
.support-admin-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
}

.manage-form-grid textarea,
.gateway-form-grid textarea,
.gateway-form textarea,
.blog-editor-card textarea {
    display: block !important;
    line-height: 1.85 !important;
}

.blog-editor-card textarea[rows="12"] {
    min-height: 15rem !important;
}

.blog-editor-card textarea[rows="3"],
.blog-editor-card textarea[rows="2"],
.gateway-form textarea[rows="2"] {
    min-height: 5.4rem !important;
}

.gateway-form textarea[rows="5"] {
    min-height: 9rem !important;
}

.gateway-toggle-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-3) !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

.gateway-toggle-row label,
.manage-check-row,
.support-checkline {
    display: flex !important;
    min-height: 3.25rem !important;
    align-items: center !important;
    gap: .75rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--color-surface-soft) !important;
    padding: .78rem .9rem !important;
    color: var(--color-text) !important;
    font-size: .84rem !important;
    font-weight: 900 !important;
}

.gateway-toggle-row label span,
.manage-check-row span,
.support-checkline span {
    min-width: 0 !important;
    line-height: 1.55 !important;
}

.gateway-upload-card,
.manage-upload-box,
.support-file-box {
    margin-top: 0 !important;
}

.manage-form-actions,
.gateway-form-actions {
    margin-top: 0 !important;
    padding-top: var(--space-4) !important;
    border-top: 1px solid var(--color-border) !important;
}

.manage-form-actions .btn,
.gateway-form-actions .btn,
.blog-admin-hero__actions .btn,
.gateway-hero__actions .btn,
.gateway-card__actions .btn,
.blog-admin-item__actions .manage-small-button,
.blog-comment-admin-item__actions .manage-small-button {
    margin: 0 !important;
}

.blog-admin-toolbar {
    align-items: end !important;
}

.blog-admin-toolbar label {
    display: grid !important;
    gap: var(--space-2) !important;
}

.blog-editor-card,
.blog-list-card,
.blog-comments-admin-card,
.gateway-list-panel,
.gateway-editor-panel {
    display: grid !important;
    align-content: start !important;
    gap: var(--space-4) !important;
}

.blog-admin-item {
    grid-template-columns: 7.5rem minmax(0, 1fr) !important;
    align-items: stretch !important;
}

.blog-admin-item__image {
    min-height: 7rem !important;
    height: 100% !important;
}

.blog-admin-item__body,
.blog-comment-admin-item {
    display: grid !important;
    gap: .75rem !important;
    min-width: 0 !important;
}

.blog-admin-item__head strong,
.blog-admin-item__head small,
.blog-admin-item__meta span,
.gateway-card__content strong,
.gateway-card__content p,
.gateway-card__content code {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.blog-admin-item__meta,
.gateway-card__meta {
    justify-content: flex-start !important;
}

.blog-admin-item__meta span,
.gateway-card__meta span {
    border-radius: var(--radius-pill) !important;
    background: var(--color-surface-soft) !important;
    color: var(--color-muted) !important;
    padding: .24rem .58rem !important;
    font-size: .75rem !important;
    font-weight: 850 !important;
}

.blog-preview-card {
    display: grid !important;
    gap: .45rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--color-surface-soft) !important;
    padding: var(--space-4) !important;
}

.blog-preview-card span {
    width: fit-content !important;
    border-radius: var(--radius-pill) !important;
    background: var(--color-primary-50) !important;
    color: var(--color-primary) !important;
    padding: .25rem .65rem !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
}

.blog-preview-card strong {
    color: var(--color-text) !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
}

.blog-preview-card p {
    margin: 0 !important;
    color: var(--color-muted) !important;
    font-size: .86rem !important;
}

.comment-user {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
}

.comment-user__meta {
    display: grid !important;
    gap: .1rem !important;
}

.comment-user__meta span {
    color: var(--color-muted) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
}

.blog-comment-admin-item p {
    margin: 0 !important;
    border-radius: var(--radius-lg) !important;
    background: var(--color-surface-soft) !important;
    padding: .8rem .9rem !important;
    color: var(--color-text) !important;
    font-size: .88rem !important;
}

.gateway-live-preview {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--color-surface-soft) !important;
    padding: var(--space-4) !important;
}

.gateway-live-preview__logo,
.gateway-card__logo {
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    height: 4.25rem !important;
    min-height: 4.25rem !important;
    padding: .55rem !important;
    border: 1px solid var(--color-border) !important;
    background: #fff !important;
}

.gateway-live-preview__logo img,
.gateway-card__logo img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: .6rem !important;
    box-shadow: none !important;
}

.gateway-live-preview small,
.gateway-live-preview p,
.gateway-card__content p {
    margin: 0 !important;
    color: var(--color-muted) !important;
    font-size: .84rem !important;
}

.gateway-live-preview strong {
    display: block !important;
    margin-top: .15rem !important;
    color: var(--color-text) !important;
    font-weight: 950 !important;
}

.gateway-live-preview__status {
    border-radius: var(--radius-pill) !important;
    background: var(--color-success-50) !important;
    color: var(--color-success) !important;
    padding: .3rem .7rem !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.gateway-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
}

.gateway-card__actions {
    grid-column: 1 / -1 !important;
    padding-top: .2rem !important;
}

.gateway-required-fields {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    border: 1px solid rgba(1, 41, 24, .16) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--color-primary-50) !important;
    padding: var(--space-4) !important;
}

.gateway-required-fields > span {
    display: grid !important;
    width: 2.45rem !important;
    height: 2.45rem !important;
    place-items: center !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
    color: var(--color-primary) !important;
    font-weight: 950 !important;
}

.gateway-required-fields p {
    margin: .15rem 0 0 !important;
    color: var(--color-muted) !important;
    font-size: .84rem !important;
}

.gateway-card code {
    display: block !important;
    direction: ltr !important;
    border-radius: var(--radius-md) !important;
    background: #0f172a !important;
    color: #e5e7eb !important;
    padding: .55rem .7rem !important;
    font-size: .76rem !important;
    line-height: 1.7 !important;
}

@media (min-width: 840px) {
    .manage-blog-page .blog-admin-toolbar {
        grid-template-columns: minmax(0, 1.4fr) minmax(14rem, .6fr) !important;
    }

    .manage-blog-page .manage-blog-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(24rem, .9fr) !important;
    }

    .gateway-page .gateway-board {
        grid-template-columns: minmax(21rem, .62fr) minmax(0, 1.38fr) !important;
    }
}

@media (min-width: 1440px) {
    .manage-blog-page .manage-blog-grid {
        grid-template-columns: minmax(0, 1.22fr) minmax(27rem, .78fr) !important;
    }

    .gateway-page .gateway-board {
        grid-template-columns: minmax(23rem, .58fr) minmax(0, 1.42fr) !important;
    }

    .gateway-page .gateway-form-grid,
    .manage-blog-page .manage-form-grid:not(.manage-form-grid--single) {
        grid-template-columns: repeat(2, minmax(18rem, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .gateway-toggle-row {
        grid-template-columns: 1fr !important;
    }

    .blog-admin-item,
    .gateway-card,
    .gateway-live-preview,
    .gateway-required-fields {
        grid-template-columns: 1fr !important;
    }

    .blog-admin-item__image,
    .gateway-live-preview__logo,
    .gateway-card__logo {
        width: 100% !important;
        min-width: 0 !important;
    }

    .gateway-live-preview__logo,
    .gateway-card__logo {
        height: 4rem !important;
    }

    .gateway-live-preview__status {
        width: fit-content !important;
    }
}

/* Blog CMS focused UI + binding fix pass */
.manage-blog-page .admin-pro-main {
    gap: var(--space-5) !important;
}

.manage-blog-page .blog-admin-hero {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
}

.manage-blog-page .blog-admin-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: .75rem !important;
}

.manage-blog-page .blog-admin-toolbar {
    display: grid !important;
    gap: var(--space-4) !important;
    align-items: end !important;
}

.manage-blog-page .blog-admin-toolbar label,
.manage-blog-page .manage-field {
    display: grid !important;
    gap: .45rem !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.manage-blog-page .manage-field label,
.manage-blog-page .blog-admin-toolbar label {
    color: var(--color-text) !important;
    font-size: .84rem !important;
    font-weight: 950 !important;
    line-height: 1.65 !important;
}

.manage-blog-page .manage-input,
.manage-blog-page .manage-textarea,
.manage-blog-page .blog-admin-toolbar input,
.manage-blog-page .blog-admin-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    background: #fff !important;
    color: var(--color-text) !important;
    padding: .78rem .9rem !important;
    font: inherit !important;
    font-size: .9rem !important;
    line-height: 1.8 !important;
    box-shadow: none !important;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base) !important;
}

.manage-blog-page .manage-textarea {
    min-height: 6rem !important;
    resize: vertical !important;
}

.manage-blog-page .manage-textarea--content {
    min-height: 20rem !important;
    direction: rtl !important;
}

.manage-blog-page .manage-input:focus,
.manage-blog-page .manage-textarea:focus,
.manage-blog-page .blog-admin-toolbar input:focus,
.manage-blog-page .blog-admin-toolbar select:focus {
    border-color: rgba(1, 41, 24, .48) !important;
    box-shadow: 0 0 0 4px rgba(1, 41, 24, .10) !important;
    outline: none !important;
}

.manage-blog-page .field-error {
    display: block !important;
    margin: .05rem 0 0 !important;
    color: var(--color-danger) !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    line-height: 1.7 !important;
}

.manage-blog-page .blog-editor-form {
    display: grid !important;
    gap: var(--space-4) !important;
}

.manage-blog-page .blog-editor-section {
    display: grid !important;
    gap: var(--space-4) !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: var(--radius-xl) !important;
    background: linear-gradient(180deg, #fff, rgba(248, 250, 252, .72)) !important;
    padding: clamp(.95rem, 1.7vw, 1.25rem) !important;
}

.manage-blog-page .blog-editor-section__head {
    display: flex !important;
    align-items: flex-start !important;
    gap: .75rem !important;
    padding-bottom: .85rem !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.manage-blog-page .blog-editor-section__head > span {
    display: grid !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    flex: 0 0 2.2rem !important;
    place-items: center !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-primary-50) !important;
    color: var(--color-primary) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    direction: ltr !important;
}

.manage-blog-page .blog-editor-section__head h3 {
    margin: 0 !important;
    color: var(--color-text) !important;
    font-size: .98rem !important;
    font-weight: 950 !important;
    line-height: 1.55 !important;
}

.manage-blog-page .blog-editor-section__head p {
    margin: .12rem 0 0 !important;
    color: var(--color-muted) !important;
    font-size: .78rem !important;
    font-weight: 750 !important;
    line-height: 1.8 !important;
}

.manage-blog-page .blog-editor-fields {
    gap: var(--space-4) !important;
}

.manage-blog-page .blog-media-grid {
    display: grid !important;
    gap: var(--space-4) !important;
}

.manage-blog-page .blog-cover-upload {
    display: grid !important;
    gap: .75rem !important;
    border: 1px dashed rgba(1, 41, 24, .26) !important;
    border-radius: var(--radius-xl) !important;
    background: rgba(1, 41, 24, .045) !important;
    padding: var(--space-4) !important;
}

.manage-blog-page .manage-upload-label {
    margin: 0 !important;
    color: var(--color-text) !important;
    font-size: .86rem !important;
    font-weight: 950 !important;
}

.manage-blog-page .blog-cover-upload input[type="file"] {
    display: block !important;
    width: 100% !important;
    border: 1px solid rgba(1, 41, 24, .18) !important;
    border-radius: var(--radius-lg) !important;
    background: #fff !important;
    padding: .72rem !important;
    color: var(--color-muted) !important;
    font-size: .82rem !important;
}

.manage-blog-page .blog-cover-upload progress {
    width: 100% !important;
    height: .55rem !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
}

.manage-blog-page .blog-cover-preview {
    width: 100% !important;
    max-height: 15rem !important;
    object-fit: cover !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    background: #fff !important;
    padding: .35rem !important;
}

.manage-blog-page .blog-preview-card {
    align-content: start !important;
    min-height: 100% !important;
    border: 1px solid rgba(1, 41, 24, .14) !important;
    border-radius: var(--radius-xl) !important;
    background: radial-gradient(circle at top left, rgba(1, 41, 24, .10), transparent 14rem), #fff !important;
    padding: var(--space-4) !important;
}

.manage-blog-page .blog-editor-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .75rem !important;
    margin-top: .25rem !important;
    padding-top: var(--space-4) !important;
    border-top: 1px solid var(--color-border) !important;
}

.manage-blog-page .blog-list-card,
.manage-blog-page .blog-comments-admin-card {
    gap: var(--space-4) !important;
}

.manage-blog-page .blog-admin-list,
.manage-blog-page .blog-comment-admin-list {
    display: grid !important;
    gap: var(--space-3) !important;
}

.manage-blog-page .blog-admin-item {
    display: grid !important;
    gap: var(--space-3) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    background: #fff !important;
    padding: .8rem !important;
    box-shadow: var(--shadow-xs) !important;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.manage-blog-page .blog-admin-item:hover,
.manage-blog-page .blog-admin-item.is-selected {
    transform: translateY(-1px) !important;
    border-color: rgba(1, 41, 24, .24) !important;
    box-shadow: var(--shadow-sm) !important;
}

.manage-blog-page .blog-admin-item.is-selected {
    background: rgba(1, 41, 24, .045) !important;
}

.manage-blog-page .blog-admin-item__image {
    overflow: hidden !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(135deg, var(--color-primary-50), #eef2ff) !important;
}

.manage-blog-page .blog-admin-item__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.manage-blog-page .blog-admin-item__image span {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
    color: var(--color-primary) !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
}

.manage-blog-page .blog-admin-item__actions,
.manage-blog-page .blog-comment-admin-item__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    align-items: center !important;
}

.manage-blog-page .blog-comment-admin-item {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    background: #fff !important;
    padding: var(--space-4) !important;
    box-shadow: var(--shadow-xs) !important;
}

@media (min-width: 840px) {
    .manage-blog-page .blog-media-grid {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr) !important;
        align-items: stretch !important;
    }
}

@media (max-width: 767.98px) {
    .manage-blog-page .blog-admin-hero {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .manage-blog-page .blog-admin-hero__actions,
    .manage-blog-page .blog-editor-actions {
        display: grid !important;
        justify-content: stretch !important;
    }

    .manage-blog-page .blog-admin-hero__actions .btn,
    .manage-blog-page .blog-editor-actions .btn {
        width: 100% !important;
    }
}

/* Secure integrations: SMS and SpotPlayer */
.integration-page {
    min-height: calc(100dvh - var(--header-height));
    padding-block: clamp(1rem, 2vw, 1.75rem) var(--space-16);
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .08), transparent 26rem),
        radial-gradient(circle at top right, rgba(1, 41, 24, .08), transparent 32rem),
        linear-gradient(180deg, rgba(248, 250, 252, .95), #fff 62%);
}

.integration-page .admin-pro-container {
    width: min(100% - 2rem, 1640px) !important;
}

.integration-main {
    display: grid !important;
    gap: var(--space-5) !important;
    min-width: 0 !important;
}

.integration-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-5) !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: var(--radius-2xl) !important;
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .10), transparent 24rem),
        linear-gradient(135deg, #fff, rgba(239, 246, 255, .9)) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: clamp(1rem, 2.2vw, 1.6rem) !important;
}

.integration-hero h1,
.integration-hero p {
    margin-bottom: 0 !important;
}

.integration-hero p {
    max-width: 62rem;
    color: var(--color-muted);
    font-size: .92rem;
    line-height: 2;
}

.integration-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.integration-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) !important;
}

.integration-kpi-card {
    position: relative;
    overflow: hidden;
}

.integration-board {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: var(--space-5);
    align-items: start;
}

.integration-panel {
    display: grid !important;
    gap: var(--space-4) !important;
    min-width: 0 !important;
}

.integration-panel__head h2,
.integration-panel__head p {
    margin-bottom: 0 !important;
}

.integration-panel__head p {
    color: var(--color-muted);
    font-size: .88rem;
    line-height: 1.9;
}

.integration-empty {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    background: rgba(248, 250, 252, .75);
    color: var(--color-muted);
    padding: var(--space-5);
    text-align: center;
}

.integration-provider-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.integration-provider-tab {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: #fff;
    color: var(--color-text);
    padding: .85rem 1rem;
    cursor: pointer;
    text-align: right;
    transition:
        border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

.integration-provider-tab:hover,
.integration-provider-tab.is-active {
    transform: translateY(-2px);
    border-color: rgba(1, 41, 24, .32);
    background: rgba(239, 246, 255, .78);
    box-shadow: var(--shadow-xs);
}

.integration-provider-tab span {
    font-size: .92rem;
    font-weight: 950;
}

.integration-provider-tab small {
    border-radius: var(--radius-pill);
    background: rgba(15, 23, 42, .06);
    color: var(--color-muted);
    padding: .25rem .55rem;
    font-size: .72rem;
    font-weight: 900;
}

.integration-form {
    display: grid;
    gap: var(--space-4);
}

.integration-current-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid rgba(1, 41, 24, .16);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .08), transparent 18rem),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .74));
    padding: 1rem;
}

.integration-current-card--spotplayer {
    border-color: rgba(1, 41, 24, .18);
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .09), transparent 18rem),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(245, 243, 255, .7));
}

.integration-current-card__mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 950;
    letter-spacing: .04em;
    box-shadow: 0 14px 24px rgba(1, 41, 24, .18);
}

.integration-current-card small,
.integration-current-card p {
    color: var(--color-muted);
}

.integration-current-card strong {
    display: block;
    margin-block: .15rem;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 950;
}

.integration-current-card p {
    margin-bottom: 0;
    font-size: .82rem;
    line-height: 1.8;
}

.integration-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    border-radius: var(--radius-pill);
    padding: .35rem .65rem;
    font-size: .76rem;
    font-weight: 950;
}

.integration-status-badge.is-success {
    background: rgba(1, 41, 24, .11);
    color: var(--color-success);
}

.integration-status-badge.is-muted {
    background: rgba(100, 116, 139, .12);
    color: var(--color-muted);
}

.integration-form-section {
    display: grid;
    gap: var(--space-3);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--radius-xl);
    background: rgba(248, 250, 252, .5);
    padding: clamp(.9rem, 1.8vw, 1.15rem);
}

.integration-section-title {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.integration-section-title > span {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 950;
}

.integration-section-title strong {
    display: block;
    color: var(--color-text);
    font-weight: 950;
}

.integration-section-title small {
    display: block;
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.7;
}

.integration-form-grid,
.integration-device-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem !important;
}

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

.integration-form label,
.integration-field-full {
    display: grid;
    gap: .45rem;
    color: var(--color-text);
    font-size: .83rem;
    font-weight: 900;
}

.integration-form input,
.integration-form textarea,
.integration-form select {
    width: 100%;
    min-height: 2.72rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    color: var(--color-text);
    padding: .72rem .85rem;
    font: inherit;
    line-height: 1.8;
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base);
}

.integration-form textarea {
    resize: vertical;
}

.integration-form input:focus,
.integration-form textarea:focus,
.integration-form select:focus {
    border-color: rgba(1, 41, 24, .42);
    box-shadow: 0 0 0 4px rgba(1, 41, 24, .10);
    outline: none;
}

.integration-field-full {
    grid-column: 1 / -1;
}

.integration-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.integration-toggle-row label {
    display: inline-flex;
    min-height: 2.7rem;
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    padding: .5rem .85rem;
    cursor: pointer;
}

.integration-toggle-row input {
    width: 1rem;
    min-height: auto;
    height: 1rem;
    padding: 0;
}

.integration-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
}

@media (max-width: 1100px) {
    .integration-kpis,
    .integration-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .integration-hero,
    .integration-current-card {
        grid-template-columns: 1fr;
        align-items: start !important;
    }

    .integration-kpis,
    .integration-board,
    .integration-form-grid,
    .integration-device-grid,
    .integration-provider-tabs {
        grid-template-columns: 1fr;
    }

    .integration-form-actions {
        justify-content: stretch;
    }

    .integration-form-actions .btn {
        width: 100%;
    }
}

/* Payment gateway callback domain controls */
.gateway-card__callback {
    display: grid;
    gap: .35rem;
    margin-block: .75rem .35rem;
    border: 1px solid rgba(1, 41, 24, .10);
    border-radius: var(--radius-lg);
    background: rgba(1, 41, 24, .045);
    padding: .62rem .72rem;
}

.gateway-card__callback span,
.gateway-callback-preview span {
    color: var(--color-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.gateway-card__callback code,
.gateway-callback-preview code {
    display: block;
    overflow: hidden;
    direction: ltr;
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.7;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gateway-callback-box {
    display: grid;
    gap: .9rem;
    margin-top: 1rem;
    border: 1px solid rgba(1, 41, 24, .14);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .10), transparent 17rem),
        linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(255, 255, 255, .98));
    padding: 1rem;
}

.gateway-callback-box__head {
    display: grid;
    gap: .26rem;
}

.gateway-callback-box__head span {
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.gateway-callback-box__head strong {
    color: var(--color-text);
    font-size: .98rem;
    font-weight: 950;
}

.gateway-callback-box__head p {
    max-width: 48rem;
    margin: 0;
    color: var(--color-muted);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.9;
}

.gateway-callback-preview {
    display: grid;
    gap: .35rem;
    border: 1px dashed rgba(1, 41, 24, .26);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .84);
    padding: .75rem .85rem;
}

@media (max-width: 767.98px) {
    .gateway-callback-box {
        padding: .85rem;
    }
}

/* Senior admin console redesign patch */
.admin-console-page,
.admin-pro-page,
.manage-pro-page,
.support-admin-page,
.gateway-page,
.manage-blog-page,
.manage-slider-page {
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .16), transparent 28rem),
        radial-gradient(circle at bottom right, rgba(1, 41, 24, .13), transparent 30rem),
        linear-gradient(180deg, #eef2ff 0%, #f8fafc 38%, #ffffff 100%) !important;
}

@media (min-width: 1120px) {
    .admin-console-container,
    .admin-pro-page .admin-pro-container,
    .manage-pro-page .admin-pro-container,
    .support-admin-page .admin-pro-container,
    .gateway-page .admin-pro-container,
    .manage-blog-page .admin-pro-container,
    .manage-slider-page .admin-pro-container {
        grid-template-columns: 17.5rem minmax(0, 1fr) !important;
        gap: 1.35rem !important;
    }
}

.admin-console-sidebar,
.admin-pro-sidebar {
    border: 0 !important;
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .28), transparent 16rem),
        linear-gradient(180deg, #111827, #0f172a) !important;
    color: #fff !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .20) !important;
}

.admin-console-brand,
.admin-pro-brand {
    border-bottom-color: rgba(255, 255, 255, .12) !important;
}

.admin-console-brand strong,
.admin-pro-brand strong {
    color: #fff !important;
}

.admin-pro-brand__mark {
    background: linear-gradient(135deg, #012918, #012918) !important;
    box-shadow: 0 14px 34px rgba(1, 41, 24, .28) !important;
}

.admin-console-sidebar .admin-nav__link,
.admin-pro-sidebar .admin-nav__link {
    color: rgba(255, 255, 255, .72) !important;
    border: 1px solid transparent !important;
}

.admin-console-sidebar .admin-nav__link:hover,
.admin-console-sidebar .admin-nav__link.active,
.admin-pro-sidebar .admin-nav__link:hover,
.admin-pro-sidebar .admin-nav__link.active {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .13) !important;
    color: #fff !important;
}

.admin-console-sidebar .admin-nav__item-icon,
.admin-pro-sidebar .admin-nav__item-icon {
    display: inline-grid !important;
    width: 1.65rem !important;
    height: 1.65rem !important;
    place-items: center !important;
    border-radius: .65rem !important;
    background: rgba(255,255,255,.08) !important;
    color: currentColor !important;
}

.admin-console-main,
.admin-pro-main {
    gap: 1.1rem !important;
}

.admin-console-hero,
.admin-pro-hero,
.gateway-hero,
.support-admin-hero {
    border: 1px solid rgba(255, 255, 255, .80) !important;
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .14), transparent 22rem),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .86)) !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .09) !important;
}

.admin-console-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    justify-content: flex-end;
}

.admin-list-panel,
.admin-sms-panel,
.admin-form-panel,
.admin-details-card,
.manage-card,
.admin-pro-card,
.gateway-list-panel,
.gateway-editor-panel,
.support-admin-list,
.support-admin-detail {
    border: 1px solid rgba(226, 232, 240, .92) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .075) !important;
}

.admin-search {
    max-width: 24rem;
}

.admin-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--color-surface-soft), #fff);
    padding: .8rem 1rem;
}

.admin-table-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: #fff;
}

.admin-data-table tr:hover td {
    background: rgba(239, 246, 255, .72);
}

.admin-user-cell,
.admin-user-profile-head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.admin-user-cell > span,
.admin-user-profile-head > span {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 2.45rem;
    place-items: center;
    border-radius: .9rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 950;
}

.admin-user-cell strong,
.admin-user-profile-head h2 {
    margin: 0;
    color: var(--color-text);
    font-weight: 950;
}

.admin-user-profile-head p {
    margin: .1rem 0 0;
}

.admin-details-grid {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.admin-details-grid > div {
    display: grid;
    gap: .25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    padding: var(--space-4);
}

.admin-details-grid span {
    color: var(--color-muted);
    font-size: .8rem;
    font-weight: 850;
}

.admin-details-grid strong {
    color: var(--color-text);
    font-size: .95rem;
    font-weight: 950;
}

.admin-check-row {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)) !important;
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(6px);
}

.admin-confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1210;
    display: grid;
    width: min(calc(100vw - 2rem), 28rem);
    gap: var(--space-3);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: var(--radius-2xl);
    background: #fff;
    box-shadow: 0 30px 90px rgba(15,23,42,.24);
    padding: var(--space-6);
    text-align: center;
}

.admin-confirm-modal__icon {
    display: grid;
    width: 3.3rem;
    height: 3.3rem;
    place-items: center;
    margin-inline: auto;
    border-radius: 1.1rem;
    background: var(--color-danger-50);
    color: var(--color-danger);
    font-size: 1.55rem;
    font-weight: 950;
}

.admin-confirm-modal h2,
.admin-confirm-modal p {
    margin: 0;
}

.admin-confirm-modal__actions {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: var(--space-2);
}

.admin-danger-solid {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    box-shadow: 0 14px 34px rgba(220, 38, 38, .24) !important;
}

@media (max-width: 767.98px) {
    .admin-search {
        max-width: none;
    }

    .admin-confirm-modal__actions,
    .admin-console-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-console-actions .btn,
    .admin-confirm-modal__actions .btn {
        width: 100%;
    }
}

/* Course delivery instructors */
.admin-instructor-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

.admin-instructor-split__column {
    display: grid;
    gap: .85rem;
    align-content: start;
    min-width: 0;
    border: 1px solid rgba(1, 41, 24, .14);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .08), transparent 12rem),
        #fff;
    padding: 1rem;
}

.admin-instructor-split__column > strong {
    color: var(--color-text);
    font-size: .92rem;
    font-weight: 950;
}

.admin-instructor-split__column .admin-select-list {
    max-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: .15rem;
}

@media (max-width: 767.98px) {
    .admin-instructor-split {
        grid-template-columns: 1fr;
    }
}

.admin-mini-stack {
    display: grid;
    gap: .25rem;
    min-width: 12rem;
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.8;
}