body.rjpay-auth {
    --rjpay-bg: #09090b;
    --rjpay-surface: #121214;
    --rjpay-surface-raised: #18181b;
    --rjpay-border: #27272a;
    --rjpay-primary: #2563eb;
    --rjpay-primary-hover: #1d4ed8;
    --rjpay-accent: #3b82f6;
    --rjpay-text: #f8fafc;
    --rjpay-muted: #a1a1aa;
    min-height: 100vh;
    background: var(--rjpay-bg) !important;
    color: var(--rjpay-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
    position: relative;
}

body.rjpay-auth #particles-js {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--rjpay-bg);
    pointer-events: none;
}

body.rjpay-auth .rjpay-auth-card {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 60rem;
    margin-left: 1rem;
    margin-right: 1rem;
    border: 1px solid var(--rjpay-border) !important;
    border-radius: 12px;
    background: var(--rjpay-surface) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

body.rjpay-auth .rjpay-auth-brand,
body.rjpay-auth .rjpay-auth-panel {
    background: var(--rjpay-surface) !important;
}

body.rjpay-auth .rjpay-auth-brand {
    border-right: 1px solid var(--rjpay-border);
}

body.rjpay-auth .rjpay-auth-brand > div:first-child {
    background: var(--rjpay-primary) !important;
}

body.rjpay-auth .rjpay-auth-brand > div:nth-child(2) {
    background: var(--rjpay-accent) !important;
}

body.rjpay-auth .rjpay-auth-brand h1,
body.rjpay-auth .rjpay-auth-panel h2,
body.rjpay-auth .rjpay-auth-panel h3 {
    color: var(--rjpay-text) !important;
}

body.rjpay-auth .rjpay-auth-brand p,
body.rjpay-auth .rjpay-auth-panel p,
body.rjpay-auth .rjpay-auth-panel label,
body.rjpay-auth .rjpay-auth-panel span {
    color: var(--rjpay-muted) !important;
}

body.rjpay-auth input:not([type="checkbox"]):not([type="radio"]) {
    border: 1px solid #3f3f46 !important;
    border-radius: 8px !important;
    background: var(--rjpay-bg) !important;
    color: var(--rjpay-text) !important;
}

body.rjpay-auth input::placeholder {
    color: #71717a !important;
}

body.rjpay-auth input:focus {
    border-color: var(--rjpay-primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

body.rjpay-auth button[type="submit"] {
    border: 1px solid var(--rjpay-primary) !important;
    border-radius: 8px !important;
    background: var(--rjpay-primary) !important;
    color: #fff !important;
}

body.rjpay-auth button[type="submit"]:hover {
    background: var(--rjpay-primary-hover) !important;
}

body.rjpay-auth button[type="button"] {
    border-color: #3f3f46 !important;
    border-radius: 8px !important;
    background: var(--rjpay-surface-raised) !important;
    color: var(--rjpay-text) !important;
}

body.rjpay-auth a {
    color: var(--rjpay-accent);
}

body.rjpay-auth #register-modal:not(.hidden) {
    background: rgba(9, 9, 11, 0.82) !important;
}

body.rjpay-auth .turnstile-slot {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 300px;
}

body.rjpay-auth #turnstile-widget,
body.rjpay-auth #register-turnstile-widget {
    flex: 1 1 auto;
    width: 100%;
    min-width: 300px;
    min-height: 65px;
}

body.rjpay-auth #turnstile-widget iframe,
body.rjpay-auth #register-turnstile-widget iframe {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    body.rjpay-auth .rjpay-auth-brand {
        border-right: 0;
    }

    body.rjpay-auth .rjpay-auth-panel {
        align-items: center;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

body.rjpay-auth #login-form {
    width: 100%;
    min-width: 300px;
}

@media (max-width: 367px) {
    body.rjpay-auth .rjpay-auth-card {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 399px) {
    body.rjpay-auth .rjpay-auth-panel {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 317px) {
    body.rjpay-auth #login-form,
    body.rjpay-auth .turnstile-slot {
        min-width: 0;
    }

    body.rjpay-auth #turnstile-widget,
    body.rjpay-auth #register-turnstile-widget {
        flex: 0 0 150px;
        min-width: 150px;
        width: 150px;
    }
}

html.dark,
html.dark body,
html.dark body.app {
    background: #09090b !important;
    color: #f8fafc !important;
}

html.dark .content,
html.dark body.app .content {
    background: #09090b !important;
    color: #f8fafc !important;
}

html.dark body.app {
    --rjpay-bg: #09090b;
    --rjpay-surface: #121214;
    --rjpay-surface-raised: #18181b;
    --rjpay-border: #27272a;
    --rjpay-primary: #f97316;
    --rjpay-primary-light: #fb923c;
    --rjpay-accent: #f59e0b;
    --rjpay-accent-light: #fb923c;
    --rjpay-text: #f8fafc;
    --rjpay-muted: #a1a1aa;
    --rjpay-success: #10b981;
    --rjpay-warning: #f59e0b;
    --rjpay-danger: #ef4444;
    min-height: 100vh;
    background: var(--rjpay-bg);
    color: var(--rjpay-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.dark body.app .content {
    background: var(--rjpay-bg);
    color: var(--rjpay-text);
}

html.dark body.app .side-nav {
    background: var(--rjpay-bg);
    border-right: 1px solid var(--rjpay-border);
    box-shadow: inset -2px 0 0 rgba(249, 115, 22, 0.28);
}

html.dark body.app .zenix-brand strong,
html.dark body.app .zenix-profile strong,
html.dark body.app .topbar-mobile-brand,
html.dark body.app .topbar-agent-name {
    color: var(--rjpay-text);
}

html.dark body.app .zenix-brand small,
html.dark body.app .zenix-profile small,
html.dark body.app .side-nav .side-menu {
    color: var(--rjpay-muted);
}

html.dark body.app .zenix-profile,
html.dark body.app .side-nav .side-nav__devider {
    border-color: var(--rjpay-border);
}

html.dark body.app .side-nav .side-menu {
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

html.dark body.app .side-nav .side-menu:hover {
    background: var(--rjpay-surface-raised);
    color: var(--rjpay-text);
}

html.dark body.app .side-nav .side-menu.side-menu--active {
    border-radius: 8px;
    background: var(--rjpay-surface-raised) !important;
    color: var(--rjpay-text) !important;
}

html.dark body.app .side-nav .side-menu.side-menu--active::before {
    background: #f97316;
}

html.dark body.app .side-nav > ul ul {
    border-radius: 8px;
    background: var(--rjpay-surface);
}

html.dark body.app .side-nav > ul ul li a:not(.side-menu--active) {
    color: var(--rjpay-muted);
}

html.dark body.app .top-bar {
    border-color: var(--rjpay-border);
    background: var(--rjpay-surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

html.dark body.app .topbar-metric {
    border-color: var(--rjpay-border);
    border-radius: 8px;
    background: var(--rjpay-bg);
}

html body.app .top-bar .topbar-metric:first-child {
    margin-left: 13px;
}

@media (max-width: 767px) {
    html body.app .top-bar {
        box-sizing: border-box;
        right: 0;
        width: auto;
        min-width: 0;
        padding-right: 8px;
        padding-left: 8px;
    }

    html body.app .top-bar .topbar-mobile-left,
    html body.app .top-bar .topbar-actions {
        min-width: 0;
    }

    html body.app .top-bar .mobile-sidebar-toggle svg {
        width: 30px;
        height: 30px;
    }

    html body.app .top-bar .topbar-mobile-left {
        margin-left: 16px;
    }

    html body.app .top-bar .topbar-mobile-brand {
        gap: 4px;
        font-size: 13px;
    }

    html body.app .top-bar .topbar-mobile-brand img {
        width: 24px;
        height: 24px;
    }

    html body.app .top-bar .topbar-metric:first-child {
        margin-left: 0;
    }

    html body.app .top-bar .topbar-metrics {
        position: relative;
        left: -26px;
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    html body.app .top-bar .topbar-metric:first-child {
        padding: 5px 8px;
    }

    html body.app .top-bar .topbar-metric:first-child .topbar-metric-label {
        font-size: 9px;
    }

    html body.app .top-bar .topbar-metric:first-child .topbar-metric-value {
        font-size: 12px;
    }

    html body.app .top-bar .topbar-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-left: auto !important;
        margin-right: 12px;
        gap: 6px;
    }

    html body.app .top-bar .topbar-actions > .dropdown {
        position: static;
        left: auto;
    }

    html body.app .top-bar .topbar-actions > .dropdown:first-child .dropdown-toggle {
        padding: 5px 7px;
        font-size: 12px;
    }

    html body.app .top-bar .topbar-actions > .dropdown:first-child svg {
        width: 20px;
        height: 20px;
    }

    html body.app .top-bar .topbar-actions .dropdown-toggle.notification--bullet,
    html body.app .top-bar .topbar-profile-avatar {
        width: 34px;
        height: 36px;
        flex-basis: 34px;
    }

    html body.app .top-bar .topbar-actions .notification__icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 380px) {
    html body.app .top-bar .topbar-mobile-left {
        gap: 2px;
    }

    html body.app .top-bar .mobile-sidebar-toggle {
        width: 34px;
        height: 38px;
    }

    html body.app .top-bar .mobile-sidebar-toggle svg {
        width: 30px;
        height: 30px;
    }

    html body.app .top-bar .topbar-mobile-brand {
        gap: 2px;
        font-size: 12px;
    }

    html body.app .top-bar .topbar-mobile-brand img {
        width: 22px;
        height: 22px;
    }

    html body.app .top-bar .topbar-metric:first-child {
        padding-right: 6px;
        padding-left: 6px;
    }

    html body.app .top-bar .topbar-metric:first-child .topbar-metric-label {
        font-size: 8px;
    }

    html body.app .top-bar .topbar-metric:first-child .topbar-metric-value {
        font-size: 11px;
    }

    html body.app .top-bar .topbar-actions {
        gap: 4px;
    }

    html body.app .top-bar .topbar-actions > .dropdown:first-child .dropdown-toggle {
        padding: 4px;
        font-size: 10px;
    }

    html body.app .top-bar .topbar-actions > .dropdown:first-child svg {
        width: 17px;
        height: 17px;
        margin-right: 2px;
    }

    html body.app .top-bar .topbar-actions .dropdown-toggle.notification--bullet,
    html body.app .top-bar .topbar-profile-avatar {
        width: 30px;
        height: 32px;
        flex-basis: 30px;
    }
}

.zenix-copyright-footer {
    box-sizing: border-box;
    width: 100%;
    padding: 16px 24px;
    border-top: 1px solid #27272a;
    background: #09090b;
    color: #71717a;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.zenix-copyright-footer span {
    color: #a1a1aa;
    font-weight: 600;
    letter-spacing: 0.04em;
}

html.dark body.app .topbar-metric-label {
    color: var(--rjpay-muted);
}

html.dark body.app .topbar-metric-value {
    color: var(--rjpay-text);
}

html.dark body.app .topbar-change {
    border-color: #2563eb;
    color: #60a5fa;
}

html.dark body.app .topbar-profile-avatar,
html.dark body.app .zenix-profile-avatar {
    border-color: var(--rjpay-accent);
    background: linear-gradient(145deg, var(--rjpay-primary), #14532d);
    color: #fff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

html.dark body.app .mobile-sidebar-toggle,
html.dark body.app .mobile-sidebar-close {
    color: var(--rjpay-text);
}

html.dark body.app .mobile-sidebar-toggle {
    color: var(--rjpay-warning);
}

html.dark body.app .box,
html.dark body.app .report-box .box,
html.dark body.app .dropdown-box__content,
html.dark body.app .notification-content__box,
html.dark body.app .intro-y.box,
html.dark body.app .modal-content,
html.dark body.app .card {
    border: 1px solid var(--rjpay-border);
    border-radius: 12px;
    background-color: var(--rjpay-surface);
    color: var(--rjpay-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

html body.app .content .payment-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

html.dark body.app .modal .modal__content {
    border: 1px solid var(--rjpay-border);
    border-radius: 12px;
    background: var(--rjpay-surface);
    color: var(--rjpay-text);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

html.dark body.app .report-box .box,
html.dark body.app .dropdown-box__content,
html.dark body.app .notification-content__box {
    border-left: 1px solid var(--rjpay-border);
}

html body.app .content .dashboard-stat-card {
    transition: transform 120ms ease;
}

html.dark body.app .dashboard-popup-card {
    border: 1px solid rgba(59, 130, 246, 0.45);
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    background: #111827;
    color: #f8fafc;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

html.dark body.app .dashboard-popup-message {
    font-size: 13px;
    line-height: 1.5;
}

html.dark body.app .dashboard-popup-date {
    color: #bfdbfe;
    font-size: 11px;
}

html.dark body.app .content .dashboard-stat-card .text-gray-600 {
    color: #d4d4d8;
}

html body.app .content .dashboard-stat-card:active {
    transform: scale(0.99);
}

html.dark body.app .report-box.user-count-card > .box {
    border-left: 3px solid #2563eb !important;
}

html.dark body.app .report-box.agent-count-card > .box {
    border-left: 3px solid var(--rjpay-warning) !important;
}

html.dark body.app .report-box .text-theme-10 {
    color: var(--rjpay-primary) !important;
}

html.dark body.app .content .report-box .dashboard-active-player-icon,
html body.app .content .dashboard-active-player-icon {
    color: var(--rjpay-success, #10b981) !important;
}

html body.app .content .dashboard-reload-link {
    color: #fff !important;
}

html body.app .content .dashboard-reload-link svg {
    color: #fff !important;
}

html.dark body.app .report-box:before {
    display: none;
}

html.dark body.app .text-gray-600,
html.dark body.app .text-gray-700,
html.dark body.app .text-gray-800 {
    color: var(--rjpay-muted);
}

html.dark body.app .report-box .text-base.text-gray-600 {
    font-size: 16px;
    line-height: 1.4;
}

html.dark body.app input:not([type="checkbox"]):not([type="radio"]),
html.dark body.app select,
html.dark body.app textarea,
html.dark body.app .tail-select,
html.dark body.app .tail-select .select-dropdown {
    border-color: #3f3f46;
    border-radius: 8px;
    background-color: var(--rjpay-bg);
    color: var(--rjpay-text);
}

html.dark body.app input::placeholder,
html.dark body.app textarea::placeholder {
    color: #71717a;
}

html.dark body.app input:focus,
html.dark body.app select:focus,
html.dark body.app textarea:focus {
    border-color: var(--rjpay-primary-light);
    outline-color: var(--rjpay-primary-light);
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

html.dark body.app .button,
html.dark body.app button.button {
    border-radius: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

html.dark body.app .button.bg-theme-1,
html.dark body.app .button[class*="bg-theme-1"] {
    border-color: #2563eb;
    background-color: #2563eb;
    color: #fff;
}

html.dark body.app .button.bg-theme-1:hover,
html.dark body.app .button[class*="bg-theme-1"]:hover {
    border-color: #1d4ed8;
    background-color: #1d4ed8;
}

html.dark body.app .button[class*="border-theme-1"],
html.dark body.app .button[class*="text-theme-1"],
html.dark body.app .button[class*="dark:border-theme-10"],
html.dark body.app .button[class*="dark:text-theme-10"] {
    border-color: #2563eb !important;
    color: #60a5fa !important;
}

html.dark body.app .button[class*="border-theme-1"]:hover,
html.dark body.app .button[class*="text-theme-1"]:hover,
html.dark body.app .button[class*="dark:border-theme-10"]:hover,
html.dark body.app .button[class*="dark:text-theme-10"]:hover {
    border-color: #1d4ed8 !important;
    color: #93c5fd !important;
}

html.dark body.app table,
html.dark body.app .table {
    border-color: var(--rjpay-border) !important;
    background-color: var(--rjpay-surface);
    color: #e4e4e7 !important;
}

html.dark body.app table thead th,
html.dark body.app .table thead th,
html.dark body.app .table .thead-light th,
html.dark body.app table.treetable thead tr th {
    border-color: var(--rjpay-border) !important;
    background: var(--rjpay-surface-raised) !important;
    color: var(--rjpay-muted) !important;
}

html.dark body.app table tbody td,
html.dark body.app table tbody th,
html.dark body.app .table tbody td,
html.dark body.app .table tbody th,
html.dark body.app table.treetable tbody tr td {
    border-color: var(--rjpay-border) !important;
    background: var(--rjpay-surface) !important;
    color: #e4e4e7 !important;
}

html.dark body.app .table-striped tbody tr:nth-of-type(odd) > *,
html.dark body.app table.table-striped tbody tr:nth-of-type(odd) > * {
    background: #151518 !important;
    color: #e4e4e7 !important;
}

html.dark body.app table th,
html.dark body.app table td,
html.dark body.app .table th,
html.dark body.app .table td {
    border-color: var(--rjpay-border) !important;
}

html.dark body.app .table-hover tbody tr:hover,
html.dark body.app table.table-hover tbody tr:hover,
html.dark body.app .table-hover > tbody > tr:hover > td,
html.dark body.app .table-hover > tbody > tr:hover > th,
html.dark body.app table.treetable.table-hover > tbody > tr:hover > td {
    background: #202024 !important;
    color: var(--rjpay-text) !important;
}

html.dark body.app table.dataTable thead .sorting,
html.dark body.app table.dataTable thead .sorting_asc,
html.dark body.app table.dataTable thead .sorting_desc {
    color: var(--rjpay-muted);
}

html.dark body.app .dataTables_wrapper .dataTables_filter input,
html.dark body.app .dataTables_wrapper .dataTables_length select,
html.dark body.app .tail-select .select-dropdown {
    border-color: #3f3f46 !important;
    background: var(--rjpay-bg) !important;
    color: var(--rjpay-text) !important;
}

html.dark body.app .dataTables_wrapper .dataTables_length,
html.dark body.app .dataTables_wrapper .dataTables_filter,
html.dark body.app .dataTables_wrapper .dataTables_info {
    color: var(--rjpay-muted);
}

html.dark body.app .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-color: var(--rjpay-border);
    border-radius: 6px;
    color: var(--rjpay-muted) !important;
}

html.dark body.app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark body.app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff !important;
}

html.dark body.app .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: #2563eb;
    background: var(--rjpay-surface-raised);
    color: var(--rjpay-text) !important;
}

html.dark body.app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark body.app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    border-color: transparent;
    background: transparent;
    color: #52525b !important;
}

html.dark body.app .dropdown-box__content a:hover {
    background-color: var(--rjpay-surface-raised);
}

html.dark body.app .mobile-sidebar-backdrop:not([hidden]) {
    background: rgba(0, 0, 0, 0.64);
}

html.dark body.app .mobile-menu {
    background: var(--rjpay-bg);
}

html.dark body.app .page-loader,
html.dark body.app .preloader {
    background-color: var(--rjpay-bg);
}

html.dark body.app .swal2-popup {
    border: 1px solid var(--rjpay-border);
    border-radius: 12px;
    background: var(--rjpay-surface);
    color: var(--rjpay-text);
}

html.dark body.app .swal2-title,
html.dark body.app .swal2-html-container {
    color: var(--rjpay-text);
}

@media (prefers-reduced-motion: reduce) {
    html.dark body.app *,
    html.dark body.app *::before,
    html.dark body.app *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

html body.app,
html body.rjpay-auth {
    --zenix-accent-green: #f97316;
    --zenix-accent-orange: #f97316;
}

html body.app .content h1,
html body.app .content h2 {
    text-decoration-color: var(--zenix-accent-orange);
    text-underline-offset: 6px;
}

html body.app .content .intro-y.box,
html body.app .content .report-box .box,
html body.app .content .card,
html body.app .content .accordion__pane {
    border-top: 2px solid var(--zenix-accent-green);
}

html body.app .content .intro-y.box:nth-child(even),
html body.app .content .accordion__pane:nth-child(even) {
    border-top-color: var(--zenix-accent-orange);
}

html body.app .content .box,
html body.app .content .card,
html body.app .content .accordion__pane {
    border-top: 1px solid var(--rjpay-border, #27272a) !important;
}

html body.app .content .button.bg-theme-1,
html body.app .content .button[class*="bg-theme-1"] {
    border-color: var(--zenix-accent-green);
    background-color: var(--zenix-accent-green);
}

html body.app .content .button.bg-theme-1:hover,
html body.app .content .button[class*="bg-theme-1"]:hover {
    border-color: var(--rjpay-primary-hover);
    background-color: var(--rjpay-primary-hover);
}

html body.app .content a.text-theme-1,
html body.app .content .text-theme-1 {
    color: var(--zenix-accent-green);
}

html body.app .content .text-theme-9,
html body.app .content .text-theme-10,
html body.app .content .text-theme-11 {
    color: var(--zenix-accent-orange);
}

html body.app .content .border-theme-1,
html body.app .content .border-theme-9 {
    border-color: var(--zenix-accent-green);
}

html body.app .side-nav > ul > li > .side-menu.side-menu--active {
    background: var(--zenix-accent-green) !important;
}

html body.app .side-nav > ul > li > .side-menu.side-menu--active::before {
    background: var(--zenix-accent-orange);
}

html body.app .top-bar {
    border-bottom: 2px solid var(--zenix-accent-orange);
}

html body.app .topbar-metric:first-child {
    border-left: 5px solid var(--zenix-accent-green);
}

html body.app .topbar-metric:nth-child(2) {
    border-left: 5px solid var(--zenix-accent-orange);
}

html body.app input:focus,
html body.app select:focus,
html body.app textarea:focus {
    border-color: var(--zenix-accent-green) !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18) !important;
}

html body.rjpay-auth .rjpay-auth-card {
    border-top: 1px solid var(--rjpay-border) !important;
}

html body.rjpay-auth .rjpay-auth-brand > div:nth-child(2) {
    background: var(--zenix-accent-orange) !important;
}

html body.app .error-page {
    background: radial-gradient(circle at 15% 20%, rgba(249, 115, 22, 0.18), transparent 34%),
        radial-gradient(circle at 85% 80%, rgba(245, 158, 11, 0.16), transparent 32%),
        #09090b;
}

html body.app .error-page .button {
    border-color: var(--zenix-accent-orange);
    background: var(--zenix-accent-green);
    color: #fff;
}

html.dark body.app.rjpay-docs .content .accordion__pane {
    border: 1px solid var(--rjpay-border);
    border-radius: 12px;
    background: var(--rjpay-surface);
    color: var(--rjpay-text);
}

html.dark body.app.rjpay-docs .content .accordion__pane__toggle {
    color: var(--rjpay-text);
}

html.dark body.app.rjpay-docs .content .accordion__pane__toggle:hover {
    color: var(--rjpay-primary-light);
}

html.dark body.app.rjpay-docs .content .accordion__pane__content {
    color: var(--rjpay-muted);
}

html.dark body.app.rjpay-docs .content .accordion__pane__content .bg-white,
html.dark body.app.rjpay-docs .content .accordion__pane__content .bg-gray-50,
html.dark body.app.rjpay-docs .content .accordion__pane__content .bg-gray-100 {
    border-color: var(--rjpay-border);
    background-color: var(--rjpay-surface-raised);
}

html.dark body.app.rjpay-docs .content .accordion__pane__content .text-gray-600,
html.dark body.app.rjpay-docs .content .accordion__pane__content .text-gray-700,
html.dark body.app.rjpay-docs .content .accordion__pane__content .text-gray-800 {
    color: var(--rjpay-muted);
}

body.rjpay-auth {
    background:
        radial-gradient(ellipse at 18% 18%, rgba(37, 99, 235, 0.22), transparent 38%),
        radial-gradient(ellipse at 85% 82%, rgba(14, 165, 233, 0.12), transparent 34%),
        #080b14 !important;
}

body.rjpay-auth #particles-js {
    background: transparent;
}

html body.rjpay-auth .rjpay-auth-card {
    max-width: 64rem;
    min-height: 38rem;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.92) !important;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.55), 0 0 70px rgba(37, 99, 235, 0.1);
}

body.rjpay-auth .rjpay-auth-brand {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(37, 99, 235, 0.24), transparent 52%),
        linear-gradient(145deg, #101a31, #0b1222 72%) !important;
}

body.rjpay-auth .rjpay-auth-brand > div:first-child {
    background: #2563eb !important;
    opacity: 0.18;
}

body.rjpay-auth .rjpay-auth-brand > div:nth-child(2) {
    background: #0ea5e9 !important;
    opacity: 0.14;
}

body.rjpay-auth .auth-brand-mark {
    display: grid;
    width: 68px;
    height: 68px;
    margin: 0 auto 24px;
    place-items: center;
    border: 1px solid rgba(147, 197, 253, 0.45);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.9), rgba(30, 64, 175, 0.7));
    box-shadow: 0 14px 38px rgba(37, 99, 235, 0.28);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.06em;
}

body.rjpay-auth .auth-brand-eyebrow,
body.rjpay-auth .auth-panel-eyebrow {
    margin: 0 0 10px;
    color: #93c5fd !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

body.rjpay-auth .auth-brand-title {
    margin: 0 0 18px;
    color: #f8fafc !important;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: 0.015em;
}

body.rjpay-auth .auth-brand-pills {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

body.rjpay-auth .auth-brand-pills span {
    padding: 7px 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.52);
    color: #bfdbfe !important;
    font-size: 11px;
    letter-spacing: 0.04em;
}

body.rjpay-auth .rjpay-auth-panel {
    background: rgba(15, 23, 42, 0.96) !important;
}

body.rjpay-auth #register-modal > .rjpay-auth-panel {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

@media (max-width: 767px) {
    html body.rjpay-auth .rjpay-auth-card {
        min-height: 0;
        margin-top: 16px;
        margin-bottom: 16px;
        border-radius: 20px;
    }

    body.rjpay-auth .rjpay-auth-panel {
        padding: 36px 24px !important;
    }

    body.rjpay-auth #register-modal > .rjpay-auth-panel {
        padding: 24px 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.rjpay-auth *,
    body.rjpay-auth *::before,
    body.rjpay-auth *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}