/*
  RootPanel shared glass interface layer.
  This file changes presentation only. It does not modify pricing,
  payment processing, provider routing, balances, or application logic.
*/

:root {
    --rp-glass-bg: rgba(20, 25, 58, 0.72);
    --rp-glass-bg-hover: rgba(27, 35, 78, 0.88);
    --rp-glass-border: rgba(148, 163, 255, 0.22);
    --rp-glass-highlight: rgba(255, 255, 255, 0.13);
    --rp-blue-1: #8defff;
    --rp-blue-2: #47cfff;
    --rp-blue-3: #2a95ff;
    --rp-purple-1: #c5a7ff;
    --rp-purple-2: #9d6fff;
    --rp-purple-3: #7c3aff;
    --rp-green-1: #78ffe0;
    --rp-green-2: #21e6b2;
    --rp-green-3: #00b98a;
    --rp-red-1: #ff9bad;
    --rp-red-2: #ff637d;
    --rp-red-3: #d93f5f;
}

/* Shared glass button foundation */
.top-header .pay-btn,
.top-header .lang-btn,
.top-header .logout-btn,
.top-header .hdr-collapse-btn,
.main-wrap .tab-btn,
.main-wrap .preset-btn,
.main-wrap .search-btn,
.main-wrap .submit-btn,
.main-wrap .btn-submit,
.main-wrap .btn-pay,
.main-wrap .quick-btn,
.main-wrap .filter-btn,
.main-wrap .page-btn,
.main-wrap .network-btn,
.main-wrap .acc-btn,
.main-wrap .acc-btn-ghost,
.main-wrap .request-btn,
.main-wrap .description-btn,
.main-wrap .fav-btn,
.main-wrap .guarantee-btn,
.main-wrap .paste-btn,
.main-wrap .sort-btn,
.main-wrap .new-order-btn,
.main-wrap .quick-order-btn,
.main-wrap .key-copy-btn,
.main-wrap .regen-btn,
.main-wrap .share-btn,
.main-wrap .url-copy-btn,
.main-wrap .code-copy,
.main-wrap .code-copy-btn,
.main-wrap .copy-btn,
.main-wrap .s-btn,
.ticket-header .back-button,
.ticket-page .send-button,
.wrap > .top .back,
.wrap .info-btn,
.wrap .cta,
.btn-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--rp-glass-border);
    background: linear-gradient(135deg, rgba(42, 149, 255, 0.15), rgba(124, 58, 255, 0.10));
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 var(--rp-glass-highlight),
        0 10px 28px rgba(3, 8, 32, 0.24);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        opacity 180ms ease;
}

.top-header .pay-btn::before,
.top-header .lang-btn::before,
.top-header .logout-btn::before,
.main-wrap .tab-btn::before,
.main-wrap .preset-btn::before,
.main-wrap .search-btn::before,
.main-wrap .submit-btn::before,
.main-wrap .btn-submit::before,
.main-wrap .btn-pay::before,
.main-wrap .quick-btn::before,
.main-wrap .filter-btn::before,
.main-wrap .page-btn::before,
.main-wrap .network-btn::before,
.main-wrap .acc-btn::before,
.main-wrap .acc-btn-ghost::before,
.main-wrap .request-btn::before,
.main-wrap .new-order-btn::before,
.main-wrap .quick-order-btn::before,
.ticket-page .send-button::before,
.wrap .info-btn::before,
.wrap .cta::before,
.btn-primary::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(180deg, var(--rp-blue-1), var(--rp-blue-2) 50%, var(--rp-blue-3));
    box-shadow: 0 0 9px rgba(71, 207, 255, 0.75), 0 0 22px rgba(42, 149, 255, 0.28);
}

.top-header .pay-btn::after,
.top-header .lang-btn::after,
.top-header .logout-btn::after,
.main-wrap .tab-btn::after,
.main-wrap .submit-btn::after,
.main-wrap .btn-submit::after,
.main-wrap .btn-pay::after,
.main-wrap .quick-btn::after,
.main-wrap .acc-btn::after,
.main-wrap .request-btn::after,
.ticket-page .send-button::after,
.wrap .info-btn::after,
.wrap .cta::after,
.btn-primary::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.9;
    background: linear-gradient(90deg, rgba(71, 207, 255, 0.18), transparent 58%);
    pointer-events: none;
}

.top-header .pay-btn:hover,
.top-header .lang-btn:hover,
.top-header .logout-btn:hover,
.top-header .hdr-collapse-btn:hover,
.main-wrap .tab-btn:hover,
.main-wrap .preset-btn:hover,
.main-wrap .search-btn:hover,
.main-wrap .submit-btn:hover,
.main-wrap .btn-submit:hover,
.main-wrap .btn-pay:hover,
.main-wrap .quick-btn:hover,
.main-wrap .filter-btn:hover,
.main-wrap .page-btn:hover,
.main-wrap .network-btn:hover,
.main-wrap .acc-btn:hover,
.main-wrap .acc-btn-ghost:hover,
.main-wrap .request-btn:hover,
.main-wrap .description-btn:hover,
.main-wrap .fav-btn:hover,
.main-wrap .guarantee-btn:hover,
.main-wrap .paste-btn:hover,
.main-wrap .sort-btn:hover,
.main-wrap .new-order-btn:hover,
.main-wrap .quick-order-btn:hover,
.main-wrap .key-copy-btn:hover,
.main-wrap .regen-btn:hover,
.main-wrap .share-btn:hover,
.main-wrap .url-copy-btn:hover,
.main-wrap .code-copy:hover,
.main-wrap .code-copy-btn:hover,
.main-wrap .copy-btn:hover,
.main-wrap .s-btn:hover,
.ticket-header .back-button:hover,
.ticket-page .send-button:hover,
.wrap > .top .back:hover,
.wrap .info-btn:hover,
.wrap .cta:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    border-color: rgba(141, 239, 255, 0.42);
    background: linear-gradient(135deg, rgba(42, 149, 255, 0.25), rgba(124, 58, 255, 0.16));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        0 14px 34px rgba(18, 83, 164, 0.25);
    color: #ffffff;
    opacity: 1;
}

.top-header .pay-btn:active,
.main-wrap .submit-btn:active,
.main-wrap .btn-submit:active,
.main-wrap .btn-pay:active,
.main-wrap .request-btn:active,
.ticket-page .send-button:active,
.btn-primary:active {
    transform: translateY(0) scale(0.992);
}

/* Header controls */
.top-header {
    background: linear-gradient(180deg, rgba(25, 22, 57, 0.86), rgba(19, 17, 47, 0.74));
    border-bottom-color: rgba(133, 146, 255, 0.18);
    box-shadow: 0 10px 34px rgba(2, 5, 22, 0.16);
}

.top-header .hdr-pill {
    border: 1px solid rgba(141, 154, 235, 0.18);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(86, 76, 170, 0.06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 7px 22px rgba(5, 8, 32, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.top-header .hdr-pill:hover {
    border-color: rgba(157, 111, 255, 0.34);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.12), rgba(42, 149, 255, 0.08));
}

.top-header .pay-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 28px;
    border-color: rgba(157, 111, 255, 0.30);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.36), rgba(74, 35, 170, 0.24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 10px 28px rgba(81, 38, 184, 0.25);
}

.top-header .pay-btn::before,
.main-wrap .submit-btn::before,
.main-wrap .btn-submit::before,
.main-wrap .acc-btn::before,
.main-wrap .request-btn::before,
.ticket-page .send-button::before {
    background: linear-gradient(180deg, var(--rp-purple-1), var(--rp-purple-2) 50%, var(--rp-purple-3));
    box-shadow: 0 0 9px rgba(157, 111, 255, 0.82), 0 0 22px rgba(124, 58, 255, 0.30);
}

.top-header .pay-btn::after,
.main-wrap .submit-btn::after,
.main-wrap .btn-submit::after,
.main-wrap .acc-btn::after,
.main-wrap .request-btn::after,
.ticket-page .send-button::after {
    background: linear-gradient(90deg, rgba(124, 58, 255, 0.24), transparent 62%);
}

.top-header .lang-btn,
.lang-wrap .lang-btn {
    min-height: 42px;
    padding: 9px 16px;
    border-color: rgba(71, 207, 255, 0.24);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(42, 149, 255, 0.20), rgba(71, 207, 255, 0.055));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 10px 28px rgba(25, 105, 190, 0.17);
}

.top-header .logout-btn {
    min-height: 42px;
    padding: 9px 15px;
    border-color: rgba(157, 111, 255, 0.22);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.18), rgba(71, 207, 255, 0.06));
}

.top-header .logout-btn::before {
    background: linear-gradient(180deg, var(--rp-purple-1), var(--rp-purple-2) 50%, var(--rp-purple-3));
    box-shadow: 0 0 8px rgba(157, 111, 255, 0.72), 0 0 20px rgba(124, 58, 255, 0.25);
}

.top-header .hdr-collapse-btn {
    border-radius: 13px;
    color: #d7d9ff;
}

/* Language menu */
.lang-wrap .lang-menu {
    border: 1px solid rgba(141, 154, 235, 0.22);
    border-radius: 15px;
    background: linear-gradient(155deg, rgba(23, 25, 58, 0.97), rgba(15, 16, 42, 0.97));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.lang-wrap .lang-item {
    border: 1px solid transparent;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.lang-wrap .lang-item:hover {
    transform: translateX(2px);
    border-color: rgba(71, 207, 255, 0.16);
    background: linear-gradient(135deg, rgba(42, 149, 255, 0.14), rgba(124, 58, 255, 0.08));
}

.lang-wrap .lang-item.sel {
    border-color: rgba(157, 111, 255, 0.28);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.22), rgba(42, 149, 255, 0.10));
}

/* Sidebar polish */
.sidebar {
    background: linear-gradient(180deg, rgba(30, 25, 67, 0.97), rgba(23, 20, 54, 0.97));
    box-shadow: 14px 0 38px rgba(3, 5, 22, 0.16);
}

.sidebar .nav-item {
    border: 1px solid transparent;
    border-radius: 12px;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.sidebar .nav-item:hover {
    transform: translateX(2px);
    border-color: rgba(71, 207, 255, 0.13);
    background: linear-gradient(135deg, rgba(42, 149, 255, 0.10), rgba(124, 58, 255, 0.08));
}

.sidebar .nav-item.active {
    border-color: rgba(157, 111, 255, 0.30);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.24), rgba(71, 207, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 9px 24px rgba(41, 21, 102, 0.16);
}

.sidebar .nav-item.active::before {
    background: linear-gradient(180deg, var(--rp-green-1), var(--rp-green-2), var(--rp-green-3));
    box-shadow: 0 0 12px rgba(33, 230, 178, 0.50);
}

/* Tabs and compact page controls */
.main-wrap .tabs {
    padding: 5px;
    gap: 6px;
    border-color: rgba(141, 154, 235, 0.18);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(69, 59, 144, 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.main-wrap .tab-btn {
    min-height: 42px;
    border-radius: 11px;
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

.main-wrap .tab-btn::before,
.main-wrap .tab-btn::after {
    opacity: 0;
}

.main-wrap .tab-btn.active {
    border-color: rgba(157, 111, 255, 0.30);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.38), rgba(82, 35, 185, 0.26));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 8px 24px rgba(75, 34, 168, 0.22);
}

.main-wrap .tab-btn.active::before,
.main-wrap .tab-btn.active::after {
    opacity: 1;
}

.main-wrap .tab-btn:nth-child(2).active {
    border-color: rgba(71, 207, 255, 0.30);
    background: linear-gradient(135deg, rgba(42, 149, 255, 0.30), rgba(40, 94, 185, 0.20));
}

.main-wrap .tab-btn:nth-child(2).active::before {
    background: linear-gradient(180deg, var(--rp-blue-1), var(--rp-blue-2) 50%, var(--rp-blue-3));
}

.main-wrap .tab-btn:nth-child(3).active {
    border-color: rgba(33, 230, 178, 0.28);
    background: linear-gradient(135deg, rgba(0, 185, 138, 0.26), rgba(28, 112, 99, 0.18));
}

.main-wrap .tab-btn:nth-child(3).active::before {
    background: linear-gradient(180deg, var(--rp-green-1), var(--rp-green-2) 50%, var(--rp-green-3));
}

.main-wrap .preset-btn,
.main-wrap .filter-btn,
.main-wrap .page-btn,
.main-wrap .network-btn,
.main-wrap .description-btn,
.main-wrap .fav-btn,
.main-wrap .guarantee-btn,
.main-wrap .paste-btn,
.main-wrap .sort-btn,
.main-wrap .new-order-btn,
.main-wrap .quick-order-btn,
.main-wrap .key-copy-btn,
.main-wrap .regen-btn,
.main-wrap .share-btn,
.main-wrap .url-copy-btn,
.main-wrap .code-copy,
.main-wrap .code-copy-btn,
.main-wrap .copy-btn,
.main-wrap .s-btn,
.main-wrap .acc-btn-ghost {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(80, 72, 157, 0.055));
}

.main-wrap .filter-btn.active,
.main-wrap .page-btn.active,
.main-wrap .network-btn.active,
.main-wrap .fav-btn.active,
.main-wrap .guarantee-btn.active,
.main-wrap .sort-btn.active {
    border-color: rgba(157, 111, 255, 0.38);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.27), rgba(42, 149, 255, 0.10));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 22px rgba(72, 32, 164, 0.16);
    color: #ffffff;
}

/* Primary action buttons */
.main-wrap .submit-btn,
.main-wrap .btn-submit,
.main-wrap .request-btn,
.main-wrap .acc-btn,
.ticket-page .send-button {
    border-color: rgba(157, 111, 255, 0.34);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.44), rgba(58, 38, 145, 0.30));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 32px rgba(77, 37, 175, 0.26);
}

/* Secure checkout action */
.main-wrap .btn-pay {
    min-height: 62px;
    border-radius: 17px;
    border-color: rgba(71, 207, 255, 0.34);
    background:
        radial-gradient(circle at 18% 25%, rgba(71, 207, 255, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(36, 105, 180, 0.72), rgba(76, 48, 176, 0.70));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(12, 19, 63, 0.30),
        0 16px 38px rgba(28, 82, 172, 0.26),
        0 0 28px rgba(124, 58, 255, 0.14);
    letter-spacing: 0.1px;
}

.main-wrap .btn-pay::before {
    width: 7px;
    background: linear-gradient(180deg, #b7f7ff, #47cfff 50%, #2a95ff);
    box-shadow: 0 0 12px rgba(71, 207, 255, 0.86), 0 0 30px rgba(42, 149, 255, 0.34);
}

.main-wrap .btn-pay::after {
    background: linear-gradient(90deg, rgba(71, 207, 255, 0.26), rgba(124, 58, 255, 0.06) 58%, transparent);
}

.main-wrap .btn-pay:hover {
    border-color: rgba(183, 247, 255, 0.52);
    background:
        radial-gradient(circle at 18% 25%, rgba(71, 207, 255, 0.24), transparent 36%),
        linear-gradient(135deg, rgba(42, 123, 208, 0.80), rgba(94, 54, 199, 0.78));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 20px 46px rgba(28, 82, 172, 0.34),
        0 0 34px rgba(124, 58, 255, 0.20);
}

/* Quick deposit amounts */
.main-wrap .quick-amounts {
    gap: 9px;
}

.main-wrap .quick-btn {
    min-width: 64px;
    min-height: 38px;
    padding: 8px 15px;
    border-radius: 11px;
    color: #f4f1ff;
}

.main-wrap .quick-btn:nth-child(3n + 1) {
    border-color: rgba(157, 111, 255, 0.28);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.22), rgba(86, 50, 158, 0.10));
}

.main-wrap .quick-btn:nth-child(3n + 1)::before {
    background: linear-gradient(180deg, var(--rp-purple-1), var(--rp-purple-2), var(--rp-purple-3));
}

.main-wrap .quick-btn:nth-child(3n + 2) {
    border-color: rgba(71, 207, 255, 0.26);
    background: linear-gradient(135deg, rgba(42, 149, 255, 0.20), rgba(34, 86, 155, 0.10));
}

.main-wrap .quick-btn:nth-child(3n + 3) {
    border-color: rgba(33, 230, 178, 0.25);
    background: linear-gradient(135deg, rgba(0, 185, 138, 0.20), rgba(25, 104, 91, 0.10));
}

.main-wrap .quick-btn:nth-child(3n + 3)::before {
    background: linear-gradient(180deg, var(--rp-green-1), var(--rp-green-2), var(--rp-green-3));
    box-shadow: 0 0 9px rgba(33, 230, 178, 0.72), 0 0 22px rgba(0, 185, 138, 0.26);
}

/* Cards and fields receive a subtle visual lift without changing layout */
.main-wrap .page-card,
.main-wrap .amount-card,
.main-wrap .card {
    border-color: rgba(141, 154, 235, 0.18);
    box-shadow: 0 14px 46px rgba(2, 5, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.main-wrap input:focus,
.main-wrap textarea:focus,
.main-wrap select:focus {
    border-color: rgba(71, 207, 255, 0.48);
    box-shadow: 0 0 0 3px rgba(42, 149, 255, 0.10), 0 0 24px rgba(124, 58, 255, 0.08);
}

.main-wrap .coin-card:hover {
    transform: translateY(-2px);
    border-color: rgba(71, 207, 255, 0.28);
    background: linear-gradient(135deg, rgba(42, 149, 255, 0.09), rgba(124, 58, 255, 0.07));
    box-shadow: 0 12px 28px rgba(4, 7, 28, 0.20);
}

/* Standalone customer pages */
.ticket-header .back-button,
.wrap > .top .back,
.wrap .info-btn,
.wrap .cta {
    border-radius: 12px;
}

.ticket-header .lang-btn,
.wrap > .top .lang-btn {
    min-height: 42px;
}

.btn-primary {
    border-color: rgba(157, 111, 255, 0.32);
    background: linear-gradient(135deg, rgba(124, 58, 255, 0.44), rgba(42, 149, 255, 0.20));
}

/* Disabled states */
.main-wrap button:disabled,
.main-wrap a.disabled,
.btn-primary:disabled,
.ticket-page .send-button:disabled {
    transform: none;
    opacity: 0.46;
    box-shadow: none;
    cursor: not-allowed;
}

/* RTL alignment for the accent strip and hover movement */
body.rp-rtl .lang-wrap .lang-item:hover,
html[dir="rtl"] .lang-wrap .lang-item:hover {
    transform: translateX(-2px);
}

body.rp-rtl .sidebar .nav-item:hover,
html[dir="rtl"] .sidebar .nav-item:hover {
    transform: translateX(-2px);
}

body.rp-rtl .top-header .pay-btn::before,
body.rp-rtl .top-header .lang-btn::before,
body.rp-rtl .top-header .logout-btn::before,
body.rp-rtl .main-wrap .tab-btn::before,
body.rp-rtl .main-wrap .submit-btn::before,
body.rp-rtl .main-wrap .btn-submit::before,
body.rp-rtl .main-wrap .btn-pay::before,
body.rp-rtl .main-wrap .quick-btn::before,
body.rp-rtl .main-wrap .acc-btn::before,
body.rp-rtl .main-wrap .request-btn::before,
html[dir="rtl"] .top-header .pay-btn::before,
html[dir="rtl"] .top-header .lang-btn::before,
html[dir="rtl"] .top-header .logout-btn::before,
html[dir="rtl"] .main-wrap .tab-btn::before,
html[dir="rtl"] .main-wrap .submit-btn::before,
html[dir="rtl"] .main-wrap .btn-submit::before,
html[dir="rtl"] .main-wrap .btn-pay::before,
html[dir="rtl"] .main-wrap .quick-btn::before,
html[dir="rtl"] .main-wrap .acc-btn::before,
html[dir="rtl"] .main-wrap .request-btn::before {
    border-radius: 0 3px 3px 0;
}

@media (max-width: 900px) {
    .top-header .pay-btn {
        padding-inline: 18px;
    }

    .top-header .lang-btn,
    .top-header .logout-btn {
        padding-inline: 12px;
    }
}

@media (max-width: 560px) {
    .top-header .pay-btn {
        min-height: 40px;
        padding-inline: 15px;
    }

    .top-header .lang-btn,
    .top-header .logout-btn {
        min-height: 40px;
        border-radius: 12px;
    }

    .main-wrap .btn-pay {
        min-height: 58px;
        border-radius: 15px;
        padding-inline: 18px;
    }

    .main-wrap .quick-btn {
        min-width: 58px;
        flex: 1 1 calc(33.333% - 9px);
    }
}

/* Green glass refinements requested for key dashboard controls */
.top-header .pay-btn {
    border-color: rgba(33, 230, 178, 0.34);
    background:
        radial-gradient(circle at 18% 24%, rgba(120, 255, 224, 0.15), transparent 35%),
        linear-gradient(135deg, rgba(0, 185, 138, 0.34), rgba(18, 75, 68, 0.28));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 10px 28px rgba(0, 185, 138, 0.20),
        0 0 24px rgba(33, 230, 178, 0.10);
}

.top-header .pay-btn::before {
    background: linear-gradient(180deg, var(--rp-green-1), var(--rp-green-2) 50%, var(--rp-green-3));
    box-shadow: 0 0 10px rgba(33, 230, 178, 0.82), 0 0 24px rgba(0, 185, 138, 0.30);
}

.top-header .pay-btn::after {
    background: linear-gradient(90deg, rgba(33, 230, 178, 0.24), transparent 62%);
}

.top-header .pay-btn:hover {
    border-color: rgba(120, 255, 224, 0.52);
    background:
        radial-gradient(circle at 18% 24%, rgba(120, 255, 224, 0.22), transparent 36%),
        linear-gradient(135deg, rgba(0, 185, 138, 0.44), rgba(19, 92, 79, 0.34));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 14px 34px rgba(0, 185, 138, 0.26),
        0 0 30px rgba(33, 230, 178, 0.14);
}

.main-wrap .tabs {
    border-color: rgba(33, 230, 178, 0.20);
    background: linear-gradient(135deg, rgba(0, 185, 138, 0.055), rgba(255, 255, 255, 0.035));
}

.main-wrap .tab-btn {
    border-color: rgba(33, 230, 178, 0.06);
    background: linear-gradient(135deg, rgba(0, 185, 138, 0.045), rgba(20, 74, 68, 0.025));
}

.main-wrap .tab-btn:hover {
    border-color: rgba(33, 230, 178, 0.22);
    background: linear-gradient(135deg, rgba(0, 185, 138, 0.14), rgba(20, 92, 78, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px rgba(0, 185, 138, 0.12);
}

.main-wrap .tab-btn.active,
.main-wrap .tab-btn:nth-child(2).active,
.main-wrap .tab-btn:nth-child(3).active {
    border-color: rgba(33, 230, 178, 0.36);
    background:
        radial-gradient(circle at 18% 24%, rgba(120, 255, 224, 0.13), transparent 36%),
        linear-gradient(135deg, rgba(0, 185, 138, 0.34), rgba(19, 83, 73, 0.24));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 24px rgba(0, 185, 138, 0.18),
        0 0 22px rgba(33, 230, 178, 0.08);
}

.main-wrap .tab-btn.active::before,
.main-wrap .tab-btn:nth-child(2).active::before,
.main-wrap .tab-btn:nth-child(3).active::before {
    background: linear-gradient(180deg, var(--rp-green-1), var(--rp-green-2) 50%, var(--rp-green-3));
    box-shadow: 0 0 10px rgba(33, 230, 178, 0.82), 0 0 24px rgba(0, 185, 138, 0.28);
}

.main-wrap .tab-btn.active::after,
.main-wrap .tab-btn:nth-child(2).active::after,
.main-wrap .tab-btn:nth-child(3).active::after {
    background: linear-gradient(90deg, rgba(33, 230, 178, 0.22), transparent 62%);
}

.main-wrap .fav-btn {
    border-color: rgba(33, 230, 178, 0.28);
    background:
        radial-gradient(circle at 24% 22%, rgba(120, 255, 224, 0.12), transparent 38%),
        linear-gradient(135deg, rgba(0, 185, 138, 0.20), rgba(18, 74, 68, 0.16));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 9px 24px rgba(0, 185, 138, 0.14);
}

.main-wrap .fav-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(180deg, var(--rp-green-1), var(--rp-green-2) 50%, var(--rp-green-3));
    box-shadow: 0 0 9px rgba(33, 230, 178, 0.76), 0 0 22px rgba(0, 185, 138, 0.26);
}

.main-wrap .fav-btn:hover,
.main-wrap .fav-btn.active {
    border-color: rgba(120, 255, 224, 0.48);
    background:
        radial-gradient(circle at 24% 22%, rgba(120, 255, 224, 0.20), transparent 38%),
        linear-gradient(135deg, rgba(0, 185, 138, 0.30), rgba(20, 94, 80, 0.22));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 12px 30px rgba(0, 185, 138, 0.20),
        0 0 24px rgba(33, 230, 178, 0.10);
}

body.rp-rtl .main-wrap .fav-btn::before,
html[dir="rtl"] .main-wrap .fav-btn::before {
    border-radius: 0 3px 3px 0;
}