/* ═══════════════════════════════════════════════════════════════════════
   SECTION: style.css
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Vazirmatn", sans-serif;
    background: #0b0b12;
    color: #fff;
}

body {
    background:
        radial-gradient(
            circle at top right,
            rgba(120,40,255,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at top left,
            rgba(0,180,255,.12),
            transparent 25%
        ),
        #0b0b12;
}

button,
input,
select {
    font-family: inherit;
}

button {
    cursor: pointer;
}

button:active {
    transform: scale(.97);
}

.app {
    width: 100%;
    max-width: 600px;
    min-height: 100vh;
    margin: auto;
    padding:
        calc(18px + env(safe-area-inset-top))
        16px
        calc(105px + env(safe-area-inset-bottom));
}

/* HEADER */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;

    font-size: 26px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );

    box-shadow:
        0 10px 30px rgba(124,58,237,.35);
}

.logo h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.logo span {
    display: block;
    margin-top: 2px;
    color: #9ca3af;
    font-size: 11px;
}

.notification-btn {
    width: 45px;
    height: 45px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;

    background: rgba(255,255,255,.06);

    color: #fff;
    font-size: 19px;
}

/* WELCOME */

.welcome-card {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 145px;
    padding: 24px;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #9333ea,
            #db2777
        );

    box-shadow:
        0 15px 40px rgba(120,40,255,.28);

    margin-bottom: 18px;
}

.welcome-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    left: -80px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);
}

.welcome-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    top: -50px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.07);
}

.welcome-content {
    position: relative;
    z-index: 2;
}

.hello {
    font-size: 13px;
    opacity: .85;
}

.welcome-content h2 {
    margin: 7px 0;
    font-size: 25px;
}

.welcome-content p {
    margin: 0;
    font-size: 13px;
    opacity: .85;
}

.welcome-movie {
    position: relative;
    z-index: 2;

    font-size: 65px;

    animation:
        floating 3s ease-in-out infinite;
}

/* WALLET */

.wallet-card {
    padding: 22px;

    border-radius: 24px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(12px);

    margin-bottom: 25px;
}

.wallet-title {
    color: #a1a1aa;
    font-size: 13px;
}

.wallet-balance {
    margin-top: 10px;
    margin-bottom: 15px;

    font-size: 27px;
    font-weight: 800;
}

.wallet-balance small {
    margin-right: 4px;

    color: #a1a1aa;
    font-size: 13px;
}

.wallet-button {
    width: 100%;

    padding: 13px;

    border: none;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    color: #fff;

    font-size: 14px;
    font-weight: 700;
}

/* TITLES */

.section-title {
    margin:
        10px 5px
        15px;

    font-size: 17px;
}

/* MENU */

.menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
}

.menu-card {
    width: 100%;

    display: flex;
    align-items: center;

    padding: 18px;

    border: none;
    border-radius: 22px;

    color: #fff;

    text-align: right;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.menu-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin-left: 14px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.16);

    font-size: 26px;
}

.menu-text {
    flex: 1;
}

.menu-text h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

.menu-text span {
    color: rgba(255,255,255,.75);
    font-size: 11px;
}

.arrow {
    font-size: 22px;
    opacity: .7;
}

.movies {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );
}

.packages {
    background:
        linear-gradient(
            135deg,
            #f97316,
            #ef4444
        );
}

.account {
    background:
        linear-gradient(
            135deg,
            #0891b2,
            #06b6d4
        );
}

.vip {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );
}

/* BOTTOM NAV */

.bottom-nav {
    position: fixed;

    left: 50%;
    bottom: 0;

    transform:
        translateX(-50%);

    width: 100%;
    max-width: 600px;

    display: flex;
    justify-content: space-around;

    padding:
        12px 6px
        calc(18px + env(safe-area-inset-bottom));

    background:
        rgba(15,15,25,.95);

    border-top:
        1px solid rgba(255,255,255,.07);

    backdrop-filter: blur(20px);

    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    border: none;

    background: transparent;

    color: #71717a;

    font-size: 19px;

    padding: 0 4px;
    flex: 1;
    min-width: 0;
}

.nav-item small {
    font-size: 10px;
}

.nav-item.active {
    color: #f0f2f7;
}

/* INTERNAL PAGES */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 25px;
}

.page-header h2 {
    margin: 0;

    font-size: 19px;
}

.back-button {
    padding: 10px 14px;

    border: none;
    border-radius: 13px;

    background:
        rgba(255,255,255,.08);

    color: #fff;

    font-size: 12px;
}

/* MOVIES */

.movie-list {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 14px;
}

.movie-card {
    padding: 12px;

    border-radius: 22px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);
}

.movie-poster {
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #7c3aed
        );

    font-size: 50px;

    margin-bottom: 12px;
}

.movie-card h3 {
    margin: 5px 0;

    font-size: 14px;
}

.movie-card span {
    color: #a1a1aa;
    font-size: 10px;
}

.movie-card button {
    width: 100%;

    margin-top: 12px;
    padding: 10px;

    border: none;
    border-radius: 12px;

    background: #7c3aed;

    color: #fff;
}

/* PACKAGES */

.package-card {
    position: relative;

    overflow: hidden;

    padding: 25px;

    border-radius: 25px;

    margin-bottom: 16px;

    color: #fff;
}

.package-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

.package-card h2 {
    margin: 5px 0;
}

.package-card p {
    font-size: 13px;
    opacity: .8;
}

.package-card h3 {
    font-size: 20px;
}

.package-card button {
    width: 100%;

    padding: 14px;

    border: none;
    border-radius: 15px;

    background:
        rgba(255,255,255,.20);

    color: #fff;

    font-weight: 700;
}

.economy {
    background:
        linear-gradient(
            135deg,
            #f97316,
            #ef4444
        );
}

.premium {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );
}

/* ACCOUNT */

.account-info {
    text-align: center;

    padding: 30px 20px;

    border-radius: 25px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);

    margin-bottom: 20px;
}

.account-avatar {
    width: 80px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: auto;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );

    font-size: 38px;
}

.account-info h2 {
    margin: 15px 0 5px;
}

.account-info p {
    margin: 0;

    color: #a1a1aa;
    font-size: 12px;
}

.account-menu,
.wallet-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-menu button,
.wallet-menu button {
    width: 100%;

    display: flex;
    align-items: center;

    padding: 17px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 18px;

    background:
        rgba(255,255,255,.06);

    color: #fff;

    text-align: right;
}

.account-menu button span {
    margin-left: 14px;

    font-size: 20px;
}

/* WALLET */

.big-balance {
    text-align: center;

    padding: 35px 20px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #14532d,
            #16a34a
        );

    margin-bottom: 25px;

    box-shadow:
        0 15px 35px rgba(34,197,94,.18);
}

.big-balance span {
    font-size: 13px;
    opacity: .8;
}

.big-balance h1 {
    margin: 15px 0 0;
    font-size: 24px;
}

.wallet-menu button {
    gap: 15px;
}

.wallet-menu button > span {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 16px;

    background:
        rgba(255,255,255,.10);

    font-size: 24px;
}

.wallet-menu button div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wallet-menu small {
    color: #a1a1aa;
    font-size: 10px;
}

.wallet-menu .deposit > span {
    background:
        rgba(34,197,94,.18);
}

.wallet-menu .withdraw > span {
    background:
        rgba(239,68,68,.18);
}

/* VIP */

.vip-hero {
    text-align: center;

    padding: 35px 20px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #581c87,
            #7c3aed,
            #ec4899
        );

    margin-bottom: 20px;
}

.vip-icon {
    font-size: 55px;
    margin-bottom: 8px;
}

.vip-hero h1 {
    margin: 8px 0;
}

.vip-hero p {
    margin: 0;

    font-size: 12px;
    opacity: .85;
}

.vip-plan {
    padding: 22px;

    border-radius: 22px;

    margin-bottom: 15px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);
}

.vip-plan h2 {
    margin: 0;
}

.vip-plan p {
    color: #a1a1aa;
    font-size: 12px;
}

.vip-plan h3 {
    color: #e879f9;
}

.vip-plan button {
    width: 100%;

    padding: 13px;

    border: none;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );

    color: #fff;

    font-weight: 700;
}

/* PAYMENT */

.payment-box {
    padding: 20px;

    border-radius: 24px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);

    margin-bottom: 15px;
}

.payment-title {
    color: #a1a1aa;
    font-size: 12px;
}

.payment-amount {
    margin: 8px 0 4px;

    font-size: 27px;
    font-weight: 800;

    color: #c084fc;
}

.payment-currency {
    color: #a1a1aa;
    font-size: 12px;
}

.payment-address {
    margin-top: 18px;
}

.address-box {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 8px;
}

.address-box input {
    min-width: 0;
    flex: 1;

    padding: 12px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 13px;

    background:
        rgba(0,0,0,.25);

    color: #fff;

    direction: ltr;

    font-size: 11px;
}

.copy-btn {
    padding: 12px 14px;

    border: none;
    border-radius: 13px;

    background: #7c3aed;

    color: #fff;
}

.currency-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 10px;

    margin-top: 15px;
}

.currency-btn {
    padding: 14px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 16px;

    background:
        rgba(255,255,255,.05);

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.currency-btn svg {
    flex-shrink: 0;
}

.currency-btn.active {
    border-color: #f5c453;

    background:
        rgba(168,85,247,.16);
}

.primary-btn {
    width: 100%;

    padding: 14px;

    border: none;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );

    color: #fff;

    font-weight: 700;
}

.secondary-btn {
    width: 100%;

    padding: 13px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 15px;

    background:
        rgba(255,255,255,.06);

    color: #fff;
}

.order-code {
    direction: ltr;

    display: inline-block;

    padding: 7px 10px;

    border-radius: 9px;

    background:
        rgba(255,255,255,.07);

    color: #c4b5fd;

    font-size: 11px;
}

.status-box {
    padding: 16px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.05);

    margin: 15px 0;
}

.status-checking {
    color: #fbbf24;
}

.status-success {
    color: #4ade80;
}

.status-error {
    color: #f87171;
}

/* TOAST */

.toast {
    position: fixed;

    left: 50%;

    bottom: 90px;

    transform:
        translate(-50%,20px);

    max-width: calc(100% - 40px);

    padding: 12px 18px;

    border-radius: 14px;

    background:
        rgba(20,20,30,.95);

    border:
        1px solid rgba(255,255,255,.1);

    color: #fff;

    font-size: 12px;

    opacity: 0;

    pointer-events: none;

    transition:
        .25s ease;

    z-index: 999;
}

.toast.show {
    opacity: 1;

    transform:
        translate(-50%,0);
}

/* EMPTY */

.empty-state {
    text-align: center;

    padding: 45px 20px;

    border-radius: 24px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.07);

    color: #a1a1aa;
}

.empty-state .emoji {
    display: block;

    margin-bottom: 12px;

    font-size: 45px;
}

/* ANIMATION */

@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

/* MOBILE */

@media (max-width:400px) {

    .app {
        padding-left: 12px;
        padding-right: 12px;
    }

    .welcome-card {
        padding: 20px;
    }

    .welcome-content h2 {
        font-size: 21px;
    }

    .welcome-movie {
        font-size: 52px;
    }

    .movie-poster {
        height: 135px;
    }
}


/* =========================================================
   VPN NOTICE SCREEN
   ========================================================= */

.vpn-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 24px;
    text-align: center;
}

.vpn-icon {
    font-size: 48px;
}

.vpn-screen h2 {
    margin: 0;
    color: #fff;
}

.vpn-screen p {
    color: #a1a1aa;
    font-size: 13px;
    line-height: 2;
    margin: 0;
}

.vpn-screen .primary-btn {
    max-width: 220px;
    margin-top: 10px;
}

.vpn-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: #f5c453;
    animation: vpn-spin 0.8s linear infinite;
}

@keyframes vpn-spin {
    to { transform: rotate(360deg); }
}
/* ========== Coupon UI ========== */
.coupon-apply-btn {
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #ffd76a, #ff9a3c);
    color: #3a2400;
    font-weight: 900;
    font-size: 13px;
    font-family: inherit;
    box-shadow: 0 8px 20px rgba(255,154,60,.4);
    transition: .15s;
    white-space: nowrap;
}
.coupon-apply-btn:active { transform: scale(.95); }
.coupon-apply-btn:disabled { opacity: .5; cursor: not-allowed; }

.coupon-applied-box {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(74,222,128,.12), rgba(74,222,128,.04));
    border: 1px solid rgba(74,222,128,.35);
    position: relative;
}

.coupon-remove-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255,90,120,.15);
    color: #ff9aae;
    font-size: 14px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .15s;
    font-family: inherit;
}
.coupon-remove-btn:active { transform: scale(.9); background: rgba(255,90,120,.3); }

/* ═══════ Watchlist Heart Button ═══════ */
.wl-heart-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    padding: 0;
    background: rgba(20,20,35,.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all .22s cubic-bezier(.34, 1.56, .64, 1);
    font-family: inherit;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.wl-heart-btn:hover { transform: scale(1.1); }
.wl-heart-btn:active { transform: scale(.85); }
.wl-heart-btn.active {
    background: linear-gradient(135deg, rgba(255,90,120,.5), rgba(236,72,153,.4));
    border-color: rgba(255,90,120,.6);
    box-shadow: 0 0 14px rgba(255,90,120,.7), 0 4px 12px rgba(0,0,0,.5);
    animation: wlPulse .35s ease;
}
@keyframes wlPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION: home-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   🏠 HOME PAGE — Hunter Style
   ========================================================= */

/* ═══ پس‌زمینه ═══ */
body:has(.home-hero),
.app:has(.home-hero) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */

.app:has(.home-hero) .header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 18px !important;
    margin-bottom: 8px !important;
    border-bottom: none !important;
}

.app:has(.home-hero) .header::after {
    display: none !important;
}

.app:has(.home-hero) .logo {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

.app:has(.home-hero) .header-logo-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: #f5c453 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    animation: none !important;
    box-shadow: none !important;
    position: relative !important;
}

.app:has(.home-hero) .header-logo-icon::before,
.app:has(.home-hero) .header-logo-icon::after {
    display: none !important;
}

.app:has(.home-hero) .header-logo-icon svg {
    filter: none !important;
    color: #f5c453 !important;
    position: static !important;
}

.app:has(.home-hero) .logo h1 {
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

.app:has(.home-hero) .logo span {
    font-family: inherit !important;
    font-size: 10.5px !important;
    color: #8b95a8 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: block !important;
    margin-top: 3px !important;
}

/* دکمه نوتیفیکیشن */
.app:has(.home-hero) .notification-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: #e4e7ee !important;
    transition: .18s !important;
    position: relative !important;
}

.app:has(.home-hero) .notification-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 10px !important;
    right: 11px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ef4444 !important;
    border: 1.5px solid #1a1d24 !important;
    box-shadow: none !important;
    animation: none !important;
}

.app:has(.home-hero) .notification-btn:hover {
    background: #252932 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f0f2f7 !important;
}

/* ═══════════════════════════════════════════════════════════
   HOME HERO (کارت خوش‌آمد)
   ═══════════════════════════════════════════════════════════ */

.home-hero {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 16px 16px 18px !important;
    margin: 4px 0 14px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* حذف تزئینات قبلی */
.home-hero-blob,
.home-hero-dots,
.home-hero-dot {
    display: none !important;
}

.home-hero::before,
.home-hero::after {
    display: none !important;
}

.home-hero-content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* آواتار */
.home-avatar {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
}

.home-avatar-ring {
    background: transparent !important;
    padding: 0 !important;
    animation: none !important;
    position: static !important;
    inset: auto !important;
}

.home-avatar-inner {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #252932 !important;
    border: 2px solid rgba(255,255,255,.08) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8b95a8 !important;
    position: static !important;
    box-shadow: 0 0 0 3px rgba(15,17,23,.5) !important;
}

.home-avatar-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.home-avatar-online {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 13px !important;
    height: 13px !important;
    background: #22c55e !important;
    border: 2.5px solid #1a1d24 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    animation: none !important;
}

/* متن‌های hero */
.home-hero-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.home-hero-hello {
    display: inline-block !important;
    background: rgba(245,196,83,.12) !important;
    border: 1px solid rgba(245,196,83,.25) !important;
    color: #f5c453 !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    letter-spacing: 0 !important;
    margin-bottom: 6px !important;
}

.home-hero-name {
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    margin: 2px 0 4px !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.home-hero-sub {
    font-family: inherit !important;
    font-size: 11.5px !important;
    color: #8b95a8 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1.5 !important;
}

.home-hero-sub svg {
    color: #f5c453 !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════
   HOME WALLET
   ═══════════════════════════════════════════════════════════ */

.home-wallet {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 18px 16px 16px !important;
    margin-bottom: 18px !important;
    position: relative !important;
    overflow: hidden !important;
}

.home-wallet::before,
.home-wallet::after {
    display: none !important;
}

.home-wallet-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.home-wallet-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    color: #8b95a8 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.home-wallet-label .wl-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 6px rgba(34,197,94,.6) !important;
    animation: none !important;
}

.home-wallet-chip-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: none !important;
}

.home-wallet-chip-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.home-wallet-amount {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    direction: rtl !important;
    font-family: inherit !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #f5c453 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    margin-bottom: 12px !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
}

.home-wallet-amount small {
    font-size: 12.5px !important;
    color: #8b95a8 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.home-wallet-cardnum {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 12px !important;
    margin-top: 6px !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    font-size: 11px !important;
    color: #5b6478 !important;
    direction: ltr !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.home-wallet-cardnum .dots {
    letter-spacing: 1.5px !important;
    font-size: 13px !important;
    color: #5b6478 !important;
}

.home-wallet-cardnum .id {
    color: #8b95a8 !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
}

.home-wallet-btn {
    width: 100% !important;
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: none !important;
    transition: .18s !important;
}

.home-wallet-btn:hover,
.home-wallet-btn:active {
    background: #e0b13e !important;
    transform: scale(.98) !important;
    box-shadow: none !important;
}

.home-wallet-btn svg {
    filter: none !important;
    color: #1a1d24 !important;
    width: 15px !important;
    height: 15px !important;
}


/* ═══════════════════════════════════════════════════════════
   HOME SECTION TITLE
   ═══════════════════════════════════════════════════════════ */

.app:has(.home-hero) .home-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 4px 2px 12px !important;
}

.app:has(.home-hero) .home-section-title h3 {
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
}

.app:has(.home-hero) .home-section-title h3 svg {
    color: #f5c453 !important;
    filter: none !important;
    width: 15px !important;
    height: 15px !important;
}

.app:has(.home-hero) .home-section-title .line {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   HOME MENU GRID
   ═══════════════════════════════════════════════════════════ */

.app:has(.home-hero) .home-menu-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

.app:has(.home-hero) .home-menu-card {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 14px 14px 12px !important;
    min-height: 118px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: right !important;
    transition: .18s !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    animation: none !important;
}

.app:has(.home-hero) .home-menu-card::before,
.app:has(.home-hero) .home-menu-card::after {
    display: none !important;
}

.app:has(.home-hero) .home-menu-card:hover,
.app:has(.home-hero) .home-menu-card:active {
    background: #1e2128 !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: none !important;
}

/* حذف گرادیانت‌های رنگی قبلی */
.app:has(.home-hero) .home-menu-card.movies,
.app:has(.home-hero) .home-menu-card.packages,
.app:has(.home-hero) .home-menu-card.account,
.app:has(.home-hero) .home-menu-card.custompack {
    background: #1a1d24 !important;
}

/* آیکون منو */
.app:has(.home-hero) .home-menu-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    animation: none !important;
    box-shadow: none !important;
    margin-bottom: auto !important;
}

.app:has(.home-hero) .home-menu-icon svg {
    filter: none !important;
    color: inherit !important;
    width: 22px !important;
    height: 22px !important;
}

/* رنگ آیکون هر کارت */
.app:has(.home-hero) .home-menu-card.movies .home-menu-icon {
    background: rgba(239,68,68,.12) !important;
    color: #f87171 !important;
}

.app:has(.home-hero) .home-menu-card.packages .home-menu-icon {
    background: rgba(245,196,83,.12) !important;
    color: #f5c453 !important;
}

.app:has(.home-hero) .home-menu-card.account .home-menu-icon {
    background: rgba(96,165,250,.12) !important;
    color: #60a5fa !important;
}

.app:has(.home-hero) .home-menu-card.custompack .home-menu-icon {
    background: rgba(52,211,153,.12) !important;
    color: #34d399 !important;
}

/* متن منو */
.app:has(.home-hero) .home-menu-info {
    margin-top: 12px !important;
}

.app:has(.home-hero) .home-menu-info h4 {
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

.app:has(.home-hero) .home-menu-info p {
    font-family: inherit !important;
    font-size: 10.5px !important;
    color: #8b95a8 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* فلش گوشه */
.app:has(.home-hero) .home-menu-arrow {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    font-size: 14px !important;
    color: #5b6478 !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

.app:has(.home-hero) .home-menu-card:hover .home-menu-arrow,
.app:has(.home-hero) .home-menu-card:active .home-menu-arrow {
    color: #f5c453 !important;
    transform: none !important;
}

/* بج «جدید» */
.app:has(.home-hero) .home-menu-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: #ef4444 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    animation: none !important;
}

/* ═══════════════════════════════════════════════════════════
   HOME QUICK CHIPS
   ═══════════════════════════════════════════════════════════ */

.app:has(.home-hero) .home-quick {
    display: flex !important;
    gap: 7px !important;
    margin-top: 4px !important;
    padding: 2px 2px 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    animation: none !important;
}

.app:has(.home-hero) .home-quick::-webkit-scrollbar {
    display: none !important;
}

.app:has(.home-hero) .home-quick-chip {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 13px !important;
    border-radius: 10px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: .18s !important;
    white-space: nowrap !important;
}

.app:has(.home-hero) .home-quick-chip:hover,
.app:has(.home-hero) .home-quick-chip:active {
    background: #252932 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f0f2f7 !important;
    transform: none !important;
}

.app:has(.home-hero) .home-quick-chip svg {
    color: #f5c453 !important;
    filter: none !important;
    width: 15px !important;
    height: 15px !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */

.app:has(.home-hero) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app:has(.home-hero) .bottom-nav::before,
.app:has(.home-hero) .bottom-nav::after {
    display: none !important;
}

.app:has(.home-hero) .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app:has(.home-hero) .nav-item .nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app:has(.home-hero) .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
    transition: .18s !important;
}

.app:has(.home-hero) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.app:has(.home-hero) .nav-item:hover {
    color: #8b95a8 !important;
}

.app:has(.home-hero) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.home-hero) .nav-item.active::after {
    display: none !important;
}

.app:has(.home-hero) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

.app:has(.home-hero) .nav-item.active small {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   اسکرول بار
   ═══════════════════════════════════════════════════════════ */

.app:has(.home-hero) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.app:has(.home-hero) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}

.app:has(.home-hero) ::-webkit-scrollbar-track {
    background: transparent !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: account-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   👤 ACCOUNT PAGE — Hunter Style
   فقط بخش حساب کاربری — تم تیره، آیکون‌های رنگی، کارت‌های مدرن
   ========================================================= */

/* ═══ پس‌زمینه فقط برای صفحه‌ی حساب ═══ */
.app:has(.account-card-modern) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

body:has(.account-card-modern) {
    background: #0f1117 !important;
}

/* ═══ هدر صفحه ═══ */
.app:has(.account-card-modern) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 22px !important;
    justify-content: center !important;
    position: relative !important;
}

.app:has(.account-card-modern) .page-header h2 {
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
}

.app:has(.account-card-modern) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.account-card-modern) .page-header .back-button:hover {
    background: #252932 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f0f2f7 !important;
}

/* ═══ کارت اصلی حساب ═══ */
.account-card-modern {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 22px 18px 20px !important;
    margin-bottom: 14px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* حذف تمام تزئینات قبلی */
.account-bg-blob,
.premium-avatar-glow,
.premium-crown,
.premium-sparkle {
    display: none !important;
}

.account-card-modern::before,
.account-card-modern::after {
    display: none !important;
}

/* ═══ عنوان کارت «اطلاعات شخصی» ═══ */
.account-card-modern .premium-avatar-wrap::before {
    content: "اطلاعات شخصی";
    display: block;
    text-align: center;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #c5cbe0;
    margin-bottom: 16px;
    letter-spacing: 0;
}

/* ═══ آواتار ═══ */
.premium-avatar-wrap {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.premium-avatar-ring {
    background: transparent !important;
    padding: 0 !important;
    animation: none !important;
    box-shadow: none !important;
    width: 96px !important;
    height: 96px !important;
    position: static !important;
    inset: auto !important;
}

.premium-avatar-inner {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    background: #252932 !important;
    border: 2px solid rgba(255,255,255,.08) !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 4px rgba(15,17,23,.5) !important;
    position: static !important;
}

.premium-avatar-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ═══ نام کاربر ═══ */
.account-card-modern h2 {
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 10px 0 10px !important;
    position: static !important;
    text-shadow: none !important;
}

/* ═══ بج «عضو ویژه» ═══ */
.premium-badge {
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: inline-block !important;
    margin: 0 auto 16px !important;
    animation: none !important;
    box-shadow: none !important;
    position: static !important;
}

/* ═══ ردیف‌های شناسه (username + ID) ═══ */
.account-id-line {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
}

.account-id-line > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    font-size: 13px !important;
    color: #e4e7ee !important;
    direction: rtl !important;
    font-family: inherit !important;
}

.account-id-line > div:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* لیبل سمت راست (اگر username با @ شروع می‌شه) */
.account-id-line > div::before {
    font-size: 12.5px;
    color: #8b95a8;
    font-weight: 600;
    direction: rtl;
}

.account-id-line > div:first-child::before {
    content: "شناسه کاربری";
}

.account-id-line > div:last-child::before {
    content: "آیدی عددی";
}

.account-id-line > div {
    direction: ltr !important;
    padding-right: 8px !important;
}

.account-id-line > div > :first-child {
    order: 1;
}

/* ═══ منوی حساب ═══ */
.account-menu-modern {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.account-menu-modern button {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    color: #e4e7ee !important;
    text-align: right !important;
    font-family: inherit !important;
    transition: .18s !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.account-menu-modern button:hover,
.account-menu-modern button:active {
    background: #252932 !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* آیکون در دایره‌ی رنگی */
.account-menu-modern .amm-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: rgba(245,196,83,.12) !important;
    color: #f5c453 !important;
    border: none !important;
    position: relative !important;
}

.account-menu-modern .amm-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: inherit !important;
}

/* رنگ‌بندی هر آیکون بر اساس کلاس فعلی */
.amm-icon.amm-wallet       { background: rgba(245,196,83,.12) !important; color: #f5c453 !important; }
.amm-icon.amm-purchases    { background: rgba(96,165,250,.12) !important; color: #60a5fa !important; }
.amm-icon.amm-transactions { background: rgba(167,139,250,.12) !important; color: #a78bfa !important; }
.amm-icon.amm-custom       { background: rgba(52,211,153,.12) !important; color: #34d399 !important; }
.amm-icon.amm-ticket       { background: rgba(251,146,60,.12) !important; color: #fb923c !important; }
.amm-icon.amm-bell         { background: rgba(245,196,83,.12) !important; color: #f5c453 !important; }

/* آیکون‌هایی که inline style دارن (علاقه‌مندی، جشنواره) */
.account-menu-modern button > .amm-icon[style*="color:#f87171"] {
    background: rgba(248,113,113,.12) !important;
    color: #f87171 !important;
}

.account-menu-modern button > .amm-icon[style*="color:#ffb454"] {
    background: rgba(255,180,84,.12) !important;
    color: #ffb454 !important;
}

/* متن‌ها */
.account-menu-modern .amm-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.account-menu-modern .amm-text strong {
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #e4e7ee !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.account-menu-modern .amm-text small {
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

/* ═══ نوار پایین (فقط برای صفحه حساب) ═══ */
.app:has(.account-card-modern) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.app:has(.account-card-modern) .bottom-nav::before,
.app:has(.account-card-modern) .bottom-nav::after {
    display: none !important;
}

.app:has(.account-card-modern) .nav-item {
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
}

.app:has(.account-card-modern) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-top: 2px !important;
}

.app:has(.account-card-modern) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.account-card-modern) .nav-item.active small {
    color: #f5c453 !important;
}


.app:has(.account-card-modern) .nav-item.active::after {
    display: none !important;
}

.app:has(.account-card-modern) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

/* ═══ اسکرول بار تیره ═══ */
.app:has(.account-card-modern) ::-webkit-scrollbar {
    width: 6px;
}

.app:has(.account-card-modern) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1);
    border-radius: 3px;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: wallet-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */


/* =========================================================
   💰 WALLET PAGE — Hunter Style
   فقط صفحه‌ی کیف پول — تم تیره، کارت‌های مدرن
   ========================================================= */

/* ═══ پس‌زمینه فقط برای صفحه کیف پول ═══ */
body:has(.wallet-card-modern),
.app:has(.wallet-card-modern) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

/* ═══ هدر صفحه ═══ */
.app:has(.wallet-card-modern) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 22px !important;
    justify-content: center !important;
    position: relative !important;
}

.app:has(.wallet-card-modern) .page-header h2 {
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
}

.app:has(.wallet-card-modern) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.wallet-card-modern) .page-header .back-button:hover {
    background: #252932 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f0f2f7 !important;
}

/* ═══ کارت اصلی کیف پول ═══ */
.wallet-card-modern {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 22px 18px 20px !important;
    margin-bottom: 14px !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: right !important;
}

/* حذف تزئینات قبلی */
.wallet-card-modern::before,
.wallet-card-modern::after {
    display: none !important;
}

.wallet-blob {
    display: none !important;
}

/* ═══ سکه بالای کارت ═══ */
.wallet-coin {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(245,196,83,.12) !important;
    color: #f5c453 !important;
    font-size: 22px !important;
    margin: 0 auto 14px !important;
    animation: none !important;
    filter: none !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
}

/* ═══ برچسب «موجودی فعلی کیف پول» ═══ */
.wallet-balance-label {
    text-align: center !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 6px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ═══ مبلغ ═══ */
.wallet-balance-amount {
    text-align: center !important;
    background: none !important;
    -webkit-text-fill-color: #f5c453 !important;
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 34px !important;
    letter-spacing: -.01em !important;
    line-height: 1.1 !important;
    margin: 6px 0 4px !important;
    position: relative !important;
    z-index: 2 !important;
    font-variant-numeric: tabular-nums !important;
}

.wallet-balance-amount small {
    -webkit-text-fill-color: #8b95a8 !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin-right: 4px !important;
}

/* ═══ دکمه‌های عملیات ═══ */
.wallet-actions-modern {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.wallet-actions-modern button {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    color: #e4e7ee !important;
    text-align: right !important;
    font-family: inherit !important;
    transition: .18s !important;
    box-shadow: none !important;
}

.wallet-actions-modern button:hover,
.wallet-actions-modern button:active {
    background: #252932 !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: none !important;
}

/* ═══ آیکون دکمه‌ها ═══ */
.wallet-actions-modern .wa-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: rgba(52,211,153,.12) !important;
    color: #34d399 !important;
    border: none !important;
    position: relative !important;
}

.wallet-actions-modern .wa-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: inherit !important;
}

/* سبز برای deposit (افزایش موجودی) */
.wa-icon.wa-deposit {
    background: rgba(52,211,153,.12) !important;
    color: #34d399 !important;
}

/* آبی برای history (تاریخچه) */
.wa-icon.wa-history {
    background: rgba(96,165,250,.12) !important;
    color: #60a5fa !important;
}

/* ═══ متن دکمه‌ها ═══ */
.wallet-actions-modern .wa-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.wallet-actions-modern .wa-text strong {
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #e4e7ee !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.wallet-actions-modern .wa-text small {
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

/* ═══ نوار پایین ═══ */
.app:has(.wallet-card-modern) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.app:has(.wallet-card-modern) .bottom-nav::before,
.app:has(.wallet-card-modern) .bottom-nav::after {
    display: none !important;
}

.app:has(.wallet-card-modern) .nav-item {
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
}

.app:has(.wallet-card-modern) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-top: 2px !important;
}

.app:has(.wallet-card-modern) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.wallet-card-modern) .nav-item.active small {
    color: #f5c453 !important;
}


.app:has(.wallet-card-modern) .nav-item.active::after {
    display: none !important;
}

.app:has(.wallet-card-modern) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

/* ═══ اسکرول بار تیره ═══ */
.app:has(.wallet-card-modern) ::-webkit-scrollbar {
    width: 6px;
}

.app:has(.wallet-card-modern) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1);
    border-radius: 3px;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: movies-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   🎬 MOVIES PAGE — Hunter Style
   ========================================================= */

/* ═══ پس‌زمینه ═══ */
body:has(.mv-fx-list),
.app:has(.mv-fx-list) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

/* ═══ هدر ═══ */
.app:has(.mv-fx-list) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 18px !important;
    justify-content: center !important;
    position: relative !important;
}

.app:has(.mv-fx-list) .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
}

.app:has(.mv-fx-list) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.mv-fx-list) .page-header .back-button:hover {
    background: #252932 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f0f2f7 !important;
}

/* ═══ جستجو ═══ */
.mv-search-wrap {
    margin: 4px 0 12px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    padding: 2px 4px 2px 2px !important;
}

.mv-search {
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    padding: 12px 38px 12px 14px !important;
    font-weight: 500 !important;
}

.mv-search:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.mv-search::placeholder {
    color: #5b6478 !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

.mv-search-icon {
    color: #5b6478 !important;
    font-size: 15px !important;
    top: 50% !important;
    right: 16px !important;
}

/* ═══ ژانرها ═══ */
.mv-genres {
    gap: 6px !important;
    padding: 2px 2px 14px !important;
}

.mv-genre {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 8px 13px !important;
    letter-spacing: 0 !important;
    transition: .18s !important;
}

.mv-genre:hover {
    border-color: rgba(255,255,255,.14) !important;
    color: #e4e7ee !important;
    background: #252932 !important;
}

.mv-genre.active {
    background: #f5c453 !important;
    border-color: #f5c453 !important;
    color: #1a1d24 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ═══ Hero (فیلم ویژه) ═══ */
.mv-fx-hero {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin-bottom: 18px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: .2s !important;
}

.mv-fx-hero::before,
.mv-fx-hero::after {
    display: none !important;
}

.mv-fx-hero:active {
    transform: scale(.99) !important;
}

.mv-fx-hero-badge {
    background: rgba(245,196,83,.14) !important;
    color: #f5c453 !important;
    border: 1px solid rgba(245,196,83,.3) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    animation: none !important;
    letter-spacing: 0 !important;
    font-size: 10px !important;
    text-transform: none !important;
    padding: 4px 10px !important;
}

.mv-fx-hero-poster {
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: #f5c453 !important;
    filter: none !important;
    width: 82px !important;
    height: 82px !important;
}

.mv-fx-hero-poster svg {
    width: 38px !important;
    height: 38px !important;
}

.mv-fx-hero-title {
    font-family: inherit !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    color: #f0f2f7 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.mv-fx-hero-meta {
    color: #8b95a8 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
}

.mv-fx-hero-meta .rating {
    color: #f5c453 !important;
    font-weight: 800 !important;
}

.mv-fx-hero-price {
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
}

.mv-fx-hero-price small {
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.mv-fx-hero-cta {
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    font-size: 11.5px !important;
    padding: 8px 14px !important;
    box-shadow: none !important;
    transition: .18s !important;
    text-transform: none !important;
}

.mv-fx-hero:active .mv-fx-hero-cta {
    background: #e0b13e !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ═══ Section Head ═══ */
.mvx-head {
    margin: 20px 2px 12px !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.mvx-head h3 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mvx-head-bar {
    background: #f5c453 !important;
    box-shadow: none !important;
    width: 3px !important;
    height: 16px !important;
    border-radius: 2px !important;
}

.mvx-head-count {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: #8b95a8 !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    padding: 4px 9px !important;
    letter-spacing: 0 !important;
}

/* ═══ لیست فیلم‌ها ═══ */
.mv-fx-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
}

.mv-fx-card {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    transition: .18s !important;
    gap: 12px !important;
    position: relative !important;
}

.mv-fx-card:hover,
.mv-fx-card:active {
    border-color: rgba(255,255,255,.12) !important;
    background: #1e2128 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* تصویر فیلم */
.mv-fx-thumb {
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 12px !important;
    width: 72px !important;
    min-height: 76px !important;
}

.mv-fx-thumb::after {
    display: none !important;
}

.mv-fx-thumb-emoji {
    filter: none !important;
    color: #f5c453 !important;
}

.mv-fx-thumb-emoji svg {
    width: 34px !important;
    height: 34px !important;
    stroke: #f5c453 !important;
}

/* امتیاز */
.mv-fx-rating {
    background: #0f1117 !important;
    border: 1px solid rgba(245,196,83,.3) !important;
    color: #f5c453 !important;
    border-radius: 6px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    top: 6px !important;
    right: 6px !important;
}

.mv-fx-rating::before {
    font-size: 7.5px !important;
}

/* بج «جدید» */
.mv-fx-new-badge {
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    font-size: 9px !important;
    text-transform: none !important;
    padding: 2px 6px !important;
    top: 6px !important;
    left: 6px !important;
}

/* عنوان */
.mv-fx-title {
    font-family: inherit !important;
    font-weight: 700 !important;
    color: #f0f2f7 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

/* برچسب‌ها */
.mv-fx-tags {
    gap: 5px !important;
    margin: 3px 0 !important;
}

.mv-fx-tag {
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    color: #8b95a8 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-size: 9.5px !important;
    padding: 3px 8px !important;
}

.mv-fx-tag.year {
    color: #8b95a8 !important;
}

.mv-fx-tag.quality {
    background: rgba(52,211,153,.1) !important;
    border-color: rgba(52,211,153,.25) !important;
    color: #34d399 !important;
}

/* قیمت */
.mv-fx-price {
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

.mv-fx-price small {
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

/* دکمه خرید */
.mv-fx-buy {
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #e4e7ee !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    padding: 6px 12px !important;
    transition: .18s !important;
    text-transform: none !important;
}

.mv-fx-card:hover .mv-fx-buy {
    background: #f5c453 !important;
    border-color: #f5c453 !important;
    color: #1a1d24 !important;
    transform: none !important;
}


/* ═══════════════════════════════════════════════════════════
   COLLECTION PAGE
   ═══════════════════════════════════════════════════════════ */

body:has(.mv-collection-hero),
.app:has(.mv-collection-hero) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

.app:has(.mv-collection-hero) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 18px !important;
    justify-content: center !important;
    position: relative !important;
}

.app:has(.mv-collection-hero) .page-header h2 {
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.mv-collection-hero) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.mv-collection-hero) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* کارت hero کالکشن */
.mv-collection-hero {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
    margin-bottom: 14px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.mv-collection-hero::before {
    display: none !important;
}

.mv-collection-hero-icon {
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #f5c453 !important;
    box-shadow: none !important;
    animation: none !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
}

.mv-collection-hero-icon svg {
    filter: none !important;
    width: 26px !important;
    height: 26px !important;
}

.mv-collection-hero-text h3 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}

.mv-collection-hero-text p {
    color: #8b95a8 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

/* لیست آیتم‌های کالکشن */
.mv-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 16px 2px 10px !important;
}

.mv-section-head h3 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mv-section-head .count {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: #8b95a8 !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    padding: 4px 9px !important;
    letter-spacing: 0 !important;
}

.mv-list-item {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: .18s !important;
    position: relative !important;
}

.mv-list-item:hover,
.mv-list-item:active {
    background: #1e2128 !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: none !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
}

.mv-list-icon {
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 12px !important;
    color: #f5c453 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mv-list-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.mv-list-info h4 {
    font-family: inherit !important;
    font-weight: 700 !important;
    color: #f0f2f7 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px !important;
    line-height: 1.35 !important;
}

.mv-list-meta {
    color: #8b95a8 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}

.mv-list-meta .dot {
    opacity: .5 !important;
}

.mv-list-price {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
}

.mv-list-price span {
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
}

.mv-list-price small {
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════
   MOVIE DETAIL PAGE
   ═══════════════════════════════════════════════════════════ */

body:has(.mvd-hero),
.app:has(.mvd-hero) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

.app:has(.mvd-hero) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
    justify-content: center !important;
    position: relative !important;
}

.app:has(.mvd-hero) .page-header h2 {
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.mvd-hero) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.mvd-hero) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* کارت hero فیلم */
.mvd-hero {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    padding: 22px 16px 20px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.mvd-hero::before {
    display: none !important;
}

.mvd-poster {
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #f5c453 !important;
    box-shadow: none !important;
    filter: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.mvd-poster svg {
    width: 40px !important;
    height: 40px !important;
}

.mvd-title {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 17px !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    margin: 0 0 12px !important;
    line-height: 1.35 !important;
    position: relative !important;
    z-index: 1 !important;
}

.mvd-meta-chips {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    position: relative !important;
    z-index: 1 !important;
}

.mvd-chip {
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    color: #8b95a8 !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-size: 10.5px !important;
    padding: 4px 10px !important;
}

.mvd-chip.rating {
    background: rgba(245,196,83,.12) !important;
    border-color: rgba(245,196,83,.3) !important;
    color: #f5c453 !important;
    font-weight: 800 !important;
}

/* بخش‌های اطلاعات */
.mvd-section {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
}

.mvd-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    margin-bottom: 12px !important;
}

.mvd-section-title .icon {
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    border-radius: 10px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}

.mvd-desc {
    color: #a8afc0 !important;
    line-height: 1.9 !important;
    font-size: 12.5px !important;
    margin: 0 !important;
}

.mvd-info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    font-size: 12.5px !important;
}

.mvd-info-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.mvd-info-row .label {
    color: #8b95a8 !important;
    font-weight: 500 !important;
}

.mvd-info-row .value {
    color: #e4e7ee !important;
    font-weight: 700 !important;
}

/* قیمت و دکمه خرید */
.mvd-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    justify-content: center !important;
    padding: 8px 0 12px !important;
    direction: rtl !important;
}

.mvd-price {
    background: none !important;
    -webkit-text-fill-color: #f5c453 !important;
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    letter-spacing: 0 !important;
}

.mvd-price-unit {
    color: #8b95a8 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

.mvd-buy-btn {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    text-transform: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: .18s !important;
}

.mvd-buy-btn:hover,
.mvd-buy-btn:active {
    background: #e0b13e !important;
    transform: scale(.98) !important;
    box-shadow: none !important;
}

/* نوار پایین */
.app:has(.mvd-hero) .bottom-nav,
.app:has(.mv-collection-hero) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.app:has(.mvd-hero) .bottom-nav::before,
.app:has(.mvd-hero) .bottom-nav::after,
.app:has(.mv-collection-hero) .bottom-nav::before,
.app:has(.mv-collection-hero) .bottom-nav::after {
    display: none !important;
}

.app:has(.mvd-hero) .nav-item,
.app:has(.mv-collection-hero) .nav-item {
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
}

.app:has(.mvd-hero) .nav-item small,
.app:has(.mv-collection-hero) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-top: 2px !important;
}

.app:has(.mvd-hero) .nav-item.active,
.app:has(.mv-collection-hero) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.mvd-hero) .nav-item.active::after,
.app:has(.mv-collection-hero) .nav-item.active::after {
    display: none !important;
}

.app:has(.mvd-hero) .nav-item.active .nav-icon svg,
.app:has(.mv-collection-hero) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

/* نوار پایین صفحه اصلی فیلم‌ها */
.app:has(.mv-fx-list) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.app:has(.mv-fx-list) .bottom-nav::before,
.app:has(.mv-fx-list) .bottom-nav::after {
    display: none !important;
}

.app:has(.mv-fx-list) .nav-item {
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
}

.app:has(.mv-fx-list) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-top: 2px !important;
}

.app:has(.mv-fx-list) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.mvd-hero) .nav-item.active small,
.app:has(.mv-collection-hero) .nav-item.active small,
.app:has(.mv-fx-list) .nav-item.active small {
    color: #f5c453 !important;
}


.app:has(.mv-fx-list) .nav-item.active::after {
    display: none !important;
}

.app:has(.mv-fx-list) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

/* اسکرول بار تیره */
.app:has(.mv-fx-list) ::-webkit-scrollbar,
.app:has(.mvd-hero) ::-webkit-scrollbar,
.app:has(.mv-collection-hero) ::-webkit-scrollbar {
    width: 6px;
}

.app:has(.mv-fx-list) ::-webkit-scrollbar-thumb,
.app:has(.mvd-hero) ::-webkit-scrollbar-thumb,
.app:has(.mv-collection-hero) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1);
    border-radius: 3px;
}

/* Watchlist heart */
.app:has(.mv-fx-list) .wl-heart-btn,
.app:has(.mvd-hero) .wl-heart-btn,
.app:has(.mv-collection-hero) .wl-heart-btn {
    background: rgba(15,17,23,.85) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 50% !important;
    color: #e4e7ee !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: none !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    top: 8px !important;
    left: 8px !important;
}

.app:has(.mv-fx-list) .wl-heart-btn.active,
.app:has(.mvd-hero) .wl-heart-btn.active,
.app:has(.mv-collection-hero) .wl-heart-btn.active {
    background: rgba(239,68,68,.25) !important;
    border-color: rgba(239,68,68,.5) !important;
    color: #f87171 !important;
    box-shadow: 0 0 12px rgba(239,68,68,.35) !important;
    animation: none !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: packages-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   🔥 PACKAGES PAGE — Hunter Style
   ========================================================= */

/* ═══ پس‌زمینه ═══ */
body:has(.pk-hero),
.app:has(.pk-hero) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

/* ═══ هدر ═══ */
.app:has(.pk-hero) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 18px !important;
    justify-content: center !important;
    position: relative !important;
}

.app:has(.pk-hero) .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.pk-hero) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.pk-hero) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* ═══════════════════════════════════════════════════════════
   PK HERO (بالای صفحه پکیج‌ها)
   ═══════════════════════════════════════════════════════════ */

.pk-hero {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 16px 16px 14px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: none !important;
}

.pk-hero::before,
.pk-hero::after {
    display: none !important;
}

.pk-hero-top {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    position: relative !important;
    z-index: 1 !important;
}

.pk-hero-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    box-shadow: none !important;
    animation: none !important;
    overflow: hidden !important;
    position: relative !important;
}

.pk-hero-icon::before {
    display: none !important;
}

.pk-hero-icon svg {
    filter: none !important;
    color: #f5c453 !important;
    width: 22px !important;
    height: 22px !important;
    position: static !important;
    z-index: 1 !important;
}

.pk-hero-title {
    flex: 1 !important;
    min-width: 0 !important;
}

.pk-hero-title h2 {
    font-family: inherit !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

.pk-hero-title p {
    font-family: inherit !important;
    font-size: 11.5px !important;
    color: #8b95a8 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ═══════════════════════════════════════════════════════════
   PK CARD (کارت‌های پکیج)
   ═══════════════════════════════════════════════════════════ */

.pk-card {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 16px 16px 14px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: none !important;
    transition: .18s !important;
}

.pk-card::before,
.pk-card::after {
    display: none !important;
}

.pk-card:hover,
.pk-card:active {
    background: #1e2128 !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* حذف border گرادیانت قدیمی */
.pk-card.premium,
.pk-card.vip {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: none !important;
}

/* بج «محبوب» */
.pk-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border: none !important;
    border-radius: 7px !important;
    font-family: inherit !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 4px 10px !important;
    box-shadow: none !important;
    animation: none !important;
    z-index: 2 !important;
}

/* قلب */
.pk-heart {
    top: 12px !important;
    left: auto !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(15,17,23,.6) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 50% !important;
    color: #8b95a8 !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    z-index: 3 !important;
}

.pk-heart.active {
    background: rgba(239,68,68,.25) !important;
    border-color: rgba(239,68,68,.5) !important;
    color: #f87171 !important;
    box-shadow: 0 0 12px rgba(239,68,68,.35) !important;
    animation: none !important;
}

/* ═══ بخش بالای کارت ═══ */
.pk-head {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
    padding-right: 42px !important;
}

.pk-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    box-shadow: none !important;
    animation: none !important;
    font-size: 24px !important;
    filter: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: none !important;
}

.pk-icon::before {
    display: none !important;
}

.pk-icon svg {
    filter: none !important;
    color: inherit !important;
    width: 26px !important;
    height: 26px !important;
    position: relative !important;
    z-index: 2 !important;
}

.pk-card:hover .pk-icon {
    transform: none !important;
}

/* رنگ آیکون بر اساس نوع پکیج (اگه inline style داره، همون می‌مونه) */
.pk-card.premium .pk-icon {
    background: rgba(245,196,83,.12) !important;
    color: #f5c453 !important;
}

.pk-card.vip .pk-icon {
    background: rgba(239,68,68,.12) !important;
    color: #f87171 !important;
}

/* متن پکیج */
.pk-head-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.pk-title {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

.pk-desc {
    font-family: inherit !important;
    font-size: 11.5px !important;
    color: #8b95a8 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}


/* ═══════════════════════════════════════════════════════════
   PK FEATURES (چیپ‌های ویژگی)
   ═══════════════════════════════════════════════════════════ */

.pk-features {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    position: relative !important;
    z-index: 1 !important;
}

.pk-feature {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    color: #a8afc0 !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-size: 10.5px !important;
    padding: 5px 9px !important;
    line-height: 1 !important;
}

.pk-feature svg {
    color: #34d399 !important;
    filter: none !important;
    width: 12px !important;
    height: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   PK FOOTER (قیمت + دکمه)
   ═══════════════════════════════════════════════════════════ */

.pk-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    position: relative !important;
    z-index: 1 !important;
}

.pk-price {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.pk-price-label {
    font-family: inherit !important;
    font-size: 10.5px !important;
    color: #5b6478 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.pk-price-amount {
    background: none !important;
    -webkit-text-fill-color: #f5c453 !important;
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    direction: rtl !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    font-variant-numeric: tabular-nums !important;
}

.pk-price-amount small {
    -webkit-text-fill-color: #8b95a8 !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* حذف گرادیانت‌های قیمت قدیمی */
.pk-card.premium .pk-price-amount,
.pk-card.vip .pk-price-amount {
    background: none !important;
    -webkit-text-fill-color: #f5c453 !important;
    color: #f5c453 !important;
}

.pk-card.vip .pk-price-amount {
    -webkit-text-fill-color: #f87171 !important;
    color: #f87171 !important;
}

/* ═══ دکمه خرید ═══ */
.pk-buy-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    text-transform: none !important;
    box-shadow: none !important;
    animation: none !important;
    transition: .18s !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.pk-buy-btn:hover,
.pk-buy-btn:active {
    background: #e0b13e !important;
    transform: scale(.97) !important;
    box-shadow: none !important;
}

.pk-buy-btn svg {
    color: #1a1d24 !important;
    filter: none !important;
    width: 14px !important;
    height: 14px !important;
}

/* حذف گرادیانت‌های دکمه قدیمی */
.pk-card.premium .pk-buy-btn {
    background: #f5c453 !important;
    color: #1a1d24 !important;
    animation: none !important;
}

.pk-card.premium .pk-buy-btn:hover {
    background: #e0b13e !important;
}

.pk-card.vip .pk-buy-btn {
    background: #f87171 !important;
    color: #1a1d24 !important;
    animation: none !important;
    box-shadow: none !important;
}

.pk-card.vip .pk-buy-btn:hover {
    background: #ef4444 !important;
}

/* ═══════════════════════════════════════════════════════════
   PK EMPTY (حالت خالی)
   ═══════════════════════════════════════════════════════════ */

.app:has(.pk-hero) .pk-empty {
    background: #1a1d24 !important;
    border: 1px dashed rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    color: #8b95a8 !important;
    padding: 50px 24px !important;
    font-family: inherit !important;
}

.app:has(.pk-hero) .pk-empty .emoji {
    color: #f5c453 !important;
    filter: none !important;
    opacity: .5 !important;
    font-size: 44px !important;
}

.app:has(.pk-hero) .pk-empty h4 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    margin: 14px 0 6px !important;
}

.app:has(.pk-hero) .pk-empty p {
    font-family: inherit !important;
    font-size: 12px !important;
    color: #8b95a8 !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */

.app:has(.pk-hero) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app:has(.pk-hero) .bottom-nav::before,
.app:has(.pk-hero) .bottom-nav::after {
    display: none !important;
}

.app:has(.pk-hero) .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app:has(.pk-hero) .nav-item .nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app:has(.pk-hero) .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
    transition: .18s !important;
}

.app:has(.pk-hero) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.app:has(.pk-hero) .nav-item:hover {
    color: #8b95a8 !important;
}

.app:has(.pk-hero) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.pk-hero) .nav-item.active::after {
    display: none !important;
}

.app:has(.pk-hero) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

.app:has(.pk-hero) .nav-item.active small {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

.app:has(.pk-hero) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.app:has(.pk-hero) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}

.app:has(.pk-hero) ::-webkit-scrollbar-track {
    background: transparent !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: festivals-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   🎉 FESTIVALS — Hunter Style
   ========================================================= */

/* ═══ پس‌زمینه ═══ */
body:has(.fst-hero),
body:has(.fst-empty),
.app:has(.fst-hero),
.app:has(.fst-empty) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

/* ═══ هدر ═══ */
.app:has(.fst-hero) .page-header,
.app:has(.fst-empty) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 18px !important;
    justify-content: center !important;
    position: relative !important;
}

.app:has(.fst-hero) .page-header h2,
.app:has(.fst-empty) .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.fst-hero) .page-header .back-button,
.app:has(.fst-empty) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.fst-hero) .page-header .back-button:hover,
.app:has(.fst-empty) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* ═══════════════════════════════════════════════════════════
   FST HERO (بنر بالای صفحه جشنواره‌ها)
   ═══════════════════════════════════════════════════════════ */

.fst-hero {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 20px 16px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: none !important;
}

.fst-hero::before,
.fst-hero::after,
.fst-hero-lights,
.fst-hero-particles {
    display: none !important;
}

.fst-hero-content {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
}

/* آیکون جایزه بزرگ */
.fst-hero-prize-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 14px !important;
    color: #f5c453 !important;
    filter: none !important;
    font-size: initial !important;
    line-height: 1 !important;
    animation: none !important;
}

.fst-hero-prize-icon span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    border-radius: 20px !important;
    color: #f5c453 !important;
    box-shadow: none !important;
}

.fst-hero-prize-icon span svg {
    width: 34px !important;
    height: 34px !important;
}

/* صندوق جایزه */
.fst-hero-prize-box {
    display: inline-block !important;
    background: transparent !important;
    border: 1px solid rgba(245,196,83,.25) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin-bottom: 14px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    max-width: 100% !important;
}

.fst-hero-prize-label {
    display: block !important;
    color: #f5c453 !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 4px !important;
}

.fst-hero-prize-value {
    display: block !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 17px !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.fst-hero-prize-desc {
    display: block !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

.fst-hero-title {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    margin: 4px 0 6px !important;
    line-height: 1.3 !important;
}

.fst-hero-desc {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    margin: 0 0 12px !important;
}

/* بج وضعیت */
.fst-hero-status {
    display: inline-block !important;
    border-radius: 9px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 11px !important;
    padding: 6px 14px !important;
    margin: 4px 0 12px !important;
}

.fst-hero-status.ACTIVE {
    background: rgba(34,197,94,.14) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34,197,94,.3) !important;
}

.fst-hero-status.UPCOMING {
    background: rgba(245,196,83,.14) !important;
    color: #f5c453 !important;
    border: 1px solid rgba(245,196,83,.3) !important;
}

.fst-hero-status.ENDED {
    background: rgba(139,149,168,.14) !important;
    color: #8b95a8 !important;
    border: 1px solid rgba(139,149,168,.25) !important;
}

.fst-hero-status.DISABLED {
    background: rgba(239,68,68,.14) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239,68,68,.3) !important;
}

/* دکمه کانال */
.fst-channel-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 16px !important;
    border-radius: 11px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: .18s !important;
    margin: 4px 0 0 !important;
}

.fst-channel-btn:hover,
.fst-channel-btn:active {
    background: #1e2128 !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #f5c453 !important;
    transform: none !important;
}

.fst-channel-btn svg {
    width: 15px !important;
    height: 15px !important;
    color: #f5c453 !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════
   FST CARD (کارت‌های جشنواره در لیست)
   ═══════════════════════════════════════════════════════════ */

.fst-card {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    transition: .18s !important;
    animation: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-card:hover,
.fst-card:active {
    background: #1e2128 !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: none !important;
}

.fst-card-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 1 !important;
}

.fst-card-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    box-shadow: none !important;
    animation: none !important;
    flex-shrink: 0 !important;
}

.fst-card-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
    filter: none !important;
}

.fst-card-title {
    flex: 1 !important;
    min-width: 0 !important;
}

.fst-card-title h3 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

.fst-card-title small {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.fst-status {
    display: inline-block !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 10px !important;
    padding: 4px 9px !important;
    flex-shrink: 0 !important;
}

.fst-status.ACTIVE {
    background: rgba(34,197,94,.14) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34,197,94,.3) !important;
}

.fst-status.UPCOMING {
    background: rgba(245,196,83,.14) !important;
    color: #f5c453 !important;
    border: 1px solid rgba(245,196,83,.3) !important;
}

.fst-status.ENDED {
    background: rgba(139,149,168,.14) !important;
    color: #8b95a8 !important;
    border: 1px solid rgba(139,149,168,.25) !important;
}

.fst-status.DISABLED {
    background: rgba(239,68,68,.14) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239,68,68,.3) !important;
}

.fst-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    position: relative !important;
    z-index: 1 !important;
}

.fst-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    color: #8b95a8 !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-size: 10px !important;
    padding: 4px 9px !important;
    line-height: 1 !important;
}

.fst-chip b {
    color: #e4e7ee !important;
    font-weight: 800 !important;
}


/* ═══════════════════════════════════════════════════════════
   FST SECTION (بخش‌های صفحه جزئیات)
   ═══════════════════════════════════════════════════════════ */

.fst-section {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    animation: none !important;
}

.fst-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

.fst-section-title .icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.fst-section-title .icon svg {
    width: 15px !important;
    height: 15px !important;
    color: inherit !important;
}

/* ═══ قوانین ═══ */
.fst-rules-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.fst-rule-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 11px !important;
    padding: 10px 12px !important;
    color: #a8afc0 !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    font-size: 11.5px !important;
    line-height: 1.7 !important;
}

.fst-rule-item .rule-dot {
    flex-shrink: 0 !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #f5c453 !important;
    box-shadow: none !important;
    margin-top: 8px !important;
}

.fst-rule-item b {
    color: #f5c453 !important;
    font-weight: 800 !important;
}

/* ═══ اطلاعات ═══ */
.fst-info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    font-size: 12.5px !important;
}

.fst-info-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.fst-info-row .lbl {
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.fst-info-row .val {
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
}

.fst-info-row .val.positive {
    color: #22c55e !important;
}

.fst-info-row .val.highlight {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   BUY BOX (صندوق خرید بلیت)
   ═══════════════════════════════════════════════════════════ */

.fst-buy-box {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    animation: none !important;
}

.fst-buy-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    margin-bottom: 12px !important;
}

.fst-buy-label {
    font-family: inherit !important;
    font-weight: 600 !important;
    color: #8b95a8 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.fst-buy-price {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f5c453 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
}

/* ═══ کنترل تعداد ═══ */
.fst-qty-control {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 6px 0 14px !important;
    margin: 0 !important;
}

.fst-qty-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: .18s !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding-bottom: 3px !important;
}

.fst-qty-btn:hover:not(:disabled),
.fst-qty-btn:active:not(:disabled) {
    background: #f5c453 !important;
    border-color: #f5c453 !important;
    color: #1a1d24 !important;
    transform: scale(.95) !important;
}

.fst-qty-btn:disabled {
    background: #1a1d24 !important;
    color: #3a4054 !important;
    cursor: not-allowed !important;
    opacity: .5 !important;
}

.fst-qty-value {
    min-width: 50px !important;
    text-align: center !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f5c453 !important;
    font-size: 26px !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    direction: ltr !important;
    line-height: 1 !important;
}

/* ═══ مبلغ کل ═══ */
.fst-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
}

.fst-total-label {
    font-family: inherit !important;
    font-weight: 600 !important;
    color: #8b95a8 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.fst-total-value {
    background: none !important;
    -webkit-text-fill-color: #f5c453 !important;
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    direction: rtl !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    font-variant-numeric: tabular-nums !important;
}

.fst-total-value small {
    -webkit-text-fill-color: #8b95a8 !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
}

/* ═══ دکمه خرید ═══ */
.fst-buy-btn {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 13px !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    animation: none !important;
    transition: .18s !important;
    cursor: pointer !important;
    margin-top: 4px !important;
}

.fst-buy-btn:hover:not(:disabled),
.fst-buy-btn:active:not(:disabled) {
    background: #e0b13e !important;
    transform: scale(.98) !important;
    box-shadow: none !important;
}

.fst-buy-btn:disabled {
    background: #252932 !important;
    color: #5b6478 !important;
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════
   REFERRAL BOX
   ═══════════════════════════════════════════════════════════ */

.fst-referral-box {
    background: #1a1d24 !important;
    border: 1px solid rgba(52,211,153,.2) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    animation: none !important;
}

.fst-referral-box .fst-section-title .icon {
    background: rgba(52,211,153,.12) !important;
    color: #34d399 !important;
}

.fst-referral-box p {
    color: #a8afc0 !important;
    font-size: 12px !important;
    line-height: 1.85 !important;
}

.fst-referral-box p b {
    color: #34d399 !important;
    font-weight: 800 !important;
}

/* صندوق لینک */
.fst-ref-link-box {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    padding: 4px 4px 4px 12px !important;
    margin: 10px 0 !important;
}

.fst-ref-link-box input {
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #a8afc0 !important;
    font-family: monospace !important;
    font-size: 11px !important;
    direction: ltr !important;
    padding: 8px 0 !important;
}

.fst-ref-copy-btn {
    padding: 9px 12px !important;
    border-radius: 9px !important;
    border: none !important;
    background: #34d399 !important;
    color: #0a2a1a !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: .18s !important;
    box-shadow: none !important;
}

.fst-ref-copy-btn:hover,
.fst-ref-copy-btn:active {
    background: #22c55e !important;
    transform: scale(.95) !important;
}

/* ═══ آمار رفرال ═══ */
.fst-ref-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    margin: 12px 0 !important;
}

.fst-ref-stat {
    text-align: center !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 12px !important;
    padding: 11px 6px !important;
}

.fst-ref-stat .stat-icon {
    display: block !important;
    font-size: 18px !important;
    margin-bottom: 5px !important;
    filter: none !important;
}

.fst-ref-stat .stat-value {
    display: block !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    direction: ltr !important;
}

.fst-ref-stat .stat-label {
    display: block !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 9.5px !important;
    margin-top: 5px !important;
    line-height: 1.3 !important;
}

.fst-ref-stat.verified .stat-value {
    color: #34d399 !important;
}

.fst-ref-stat.tickets .stat-value {
    color: #f5c453 !important;
}

/* ═══ نوار پیشرفت ═══ */
.fst-ref-progress {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 12px 0 8px !important;
}

.fst-ref-bar {
    flex: 1 !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: #252932 !important;
    border: none !important;
    overflow: hidden !important;
}

.fst-ref-bar-inner {
    height: 100% !important;
    background: linear-gradient(90deg, #34d399, #22c55e) !important;
    border-radius: 4px !important;
    transition: width .5s ease !important;
    box-shadow: none !important;
}

.fst-ref-count {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #34d399 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    direction: ltr !important;
}


/* ═══════════════════════════════════════════════════════════
   FST TICKETS (بلیت‌های شما)
   ═══════════════════════════════════════════════════════════ */

.fst-ticket-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 12px !important;
    padding: 11px 13px !important;
    margin-bottom: 6px !important;
    animation: none !important;
}

.fst-ticket-item:last-child {
    margin-bottom: 0 !important;
}

.fst-ticket-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
}

.fst-ticket-icon svg {
    width: 18px !important;
    height: 18px !important;
    color: inherit !important;
}

.fst-ticket-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.fst-ticket-info b {
    display: block !important;
    color: #f0f2f7 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    margin-bottom: 3px !important;
    direction: ltr !important;
}

.fst-ticket-info small {
    display: block !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
}

.fst-ticket-src {
    display: inline-block !important;
    padding: 3px 9px !important;
    border-radius: 7px !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    flex-shrink: 0 !important;
}

.fst-ticket-src.referral {
    background: rgba(52,211,153,.15) !important;
    color: #34d399 !important;
}

.fst-ticket-src.purchase {
    background: rgba(245,196,83,.15) !important;
    color: #f5c453 !important;
}

.fst-ticket-src.admin {
    background: rgba(239,68,68,.15) !important;
    color: #f87171 !important;
}

/* ═══════════════════════════════════════════════════════════
   FST WINNERS (برندگان)
   ═══════════════════════════════════════════════════════════ */

.fst-winner-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(245,196,83,.06) !important;
    border: 1px solid rgba(245,196,83,.2) !important;
    border-radius: 12px !important;
    padding: 11px 13px !important;
    margin-bottom: 6px !important;
}

.fst-winner-row:last-child {
    margin-bottom: 0 !important;
}

.fst-winner-rank {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

.fst-winner-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.fst-winner-info b {
    display: block !important;
    color: #f0f2f7 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    margin-bottom: 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fst-winner-info small {
    display: block !important;
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   FST REF SPOILER
   ═══════════════════════════════════════════════════════════ */

.fst-ref-spoiler {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: .3s !important;
    background: #252932 !important;
    border: 1px dashed rgba(52,211,153,.3) !important;
    padding: 4px !important;
    min-height: 60px !important;
    animation: none !important;
}

.fst-ref-spoiler.revealed {
    border-style: solid !important;
    border-color: rgba(52,211,153,.5) !important;
    background: #252932 !important;
}

.fst-ref-spoiler.hidden .fst-ref-link-box {
    filter: blur(8px) !important;
    user-select: none !important;
    pointer-events: none !important;
    opacity: .5 !important;
}

.fst-ref-spoiler.hidden::after {
    content: '🔒 لینک مخفی است — دکمه‌ی ساخت لینک دعوت رو بزن' !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #34d399 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    z-index: 2 !important;
    background: rgba(15,17,23,.55) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    text-align: center !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* ═══════════════════════════════════════════════════════════
   FST SHARE BTN
   ═══════════════════════════════════════════════════════════ */

.fst-share-btn {
    width: 100% !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    background: #34d399 !important;
    color: #0a2a1a !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    transition: .18s !important;
    cursor: pointer !important;
    margin-top: 10px !important;
}

.fst-share-btn:hover,
.fst-share-btn:active {
    background: #22c55e !important;
    transform: scale(.98) !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   FST EMPTY STATE
   ═══════════════════════════════════════════════════════════ */

.fst-empty {
    background: #1a1d24 !important;
    border: 1px dashed rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    text-align: center !important;
    padding: 50px 24px !important;
}

.fst-empty .em {
    display: block !important;
    font-size: 44px !important;
    margin-bottom: 14px !important;
    opacity: .5 !important;
    color: #f5c453 !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════
   HISTORY CARD (تاریخچه جشنواره‌های من)
   ═══════════════════════════════════════════════════════════ */

.fst-section[style*="animation-delay"] {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    animation: none !important;
}

/* آیکون تاریخچه */
.fst-section[style*="animation-delay"] > div:first-child > div:first-child {
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    border-radius: 13px !important;
    color: #f5c453 !important;
}

.fst-section[style*="animation-delay"] > div:first-child > div:first-child svg {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV (فقط این صفحات)
   ═══════════════════════════════════════════════════════════ */

.app:has(.fst-hero) .bottom-nav,
.app:has(.fst-empty) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app:has(.fst-hero) .bottom-nav::before,
.app:has(.fst-hero) .bottom-nav::after,
.app:has(.fst-empty) .bottom-nav::before,
.app:has(.fst-empty) .bottom-nav::after {
    display: none !important;
}

.app:has(.fst-hero) .nav-item,
.app:has(.fst-empty) .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app:has(.fst-hero) .nav-item .nav-icon svg,
.app:has(.fst-empty) .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
    transition: .18s !important;
}

.app:has(.fst-hero) .nav-item small,
.app:has(.fst-empty) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.app:has(.fst-hero) .nav-item:hover,
.app:has(.fst-empty) .nav-item:hover {
    color: #8b95a8 !important;
}

.app:has(.fst-hero) .nav-item.active,
.app:has(.fst-empty) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.fst-hero) .nav-item.active::after,
.app:has(.fst-empty) .nav-item.active::after {
    display: none !important;
}

.app:has(.fst-hero) .nav-item.active .nav-icon svg,
.app:has(.fst-empty) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

.app:has(.fst-hero) .nav-item.active small,
.app:has(.fst-empty) .nav-item.active small {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

.app:has(.fst-hero) ::-webkit-scrollbar,
.app:has(.fst-empty) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.app:has(.fst-hero) ::-webkit-scrollbar-thumb,
.app:has(.fst-empty) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}

.app:has(.fst-hero) ::-webkit-scrollbar-track,
.app:has(.fst-empty) ::-webkit-scrollbar-track {
    background: transparent !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: festivals-vibrant.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   🎉 FESTIVALS — Vibrant Layer
   روی festivals-hunter.css میاد و جذابیت اضافه می‌کنه
   ========================================================= */

/* ═══════════════════════════════════════════════════════════
   پس‌زمینه‌ی رنگی مخصوص جشنواره
   ═══════════════════════════════════════════════════════════ */

body:has(.fst-hero),
.app:has(.fst-hero) {
    background: #0f1117 !important;
    position: relative !important;
}

body:has(.fst-hero)::before,
.app:has(.fst-hero)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(245,196,83,.08), transparent 45%),
        radial-gradient(circle at 85% 100%, rgba(236,72,153,.06), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(249,168,212,.03), transparent 60%) !important;
}

/* ═══════════════════════════════════════════════════════════
   FST HERO — بنر جشنواره با گلوی طلایی-صورتی
   ═══════════════════════════════════════════════════════════ */

.fst-hero {
    background:
        radial-gradient(circle at 20% 0%, rgba(245,196,83,.12), transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(236,72,153,.1), transparent 55%),
        linear-gradient(155deg, #1a1d24 0%, #181b22 100%) !important;
    border: 1.5px solid rgba(245,196,83,.28) !important;
    box-shadow: 0 0 0 1px rgba(245,196,83,.06) inset,
        0 0 60px -20px rgba(245,196,83,.3),
        0 20px 40px -20px rgba(15,17,23,.6) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ذرات تزئینی */
.fst-hero::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 200% !important;
    height: 200% !important;
    background:
        radial-gradient(circle, rgba(245,196,83,.15) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(236,72,153,.12) 1px, transparent 1.5px) !important;
    background-size: 40px 40px, 60px 60px !important;
    background-position: 0 0, 20px 30px !important;
    animation: fstvStars 30s linear infinite !important;
    pointer-events: none !important;
    opacity: .5 !important;
    display: block !important;
}

@keyframes fstvStars {
    from { transform: translate(0, 0); }
    to { transform: translate(-40px, -60px); }
}

/* آیکون جام بزرگ با گلو */
.fst-hero-prize-icon span {
    background:
        radial-gradient(circle at 30% 25%, rgba(255,215,106,.5), rgba(245,196,83,.15)) !important;
    border: 1.5px solid rgba(245,196,83,.6) !important;
    box-shadow:
        0 0 30px rgba(245,196,83,.4),
        0 0 60px -20px rgba(245,196,83,.6),
        inset 0 0 24px rgba(255,215,106,.2) !important;
    animation: fstvPrizePulse 3s ease-in-out infinite !important;
}

@keyframes fstvPrizePulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(245,196,83,.4),
            0 0 60px -20px rgba(245,196,83,.6),
            inset 0 0 24px rgba(255,215,106,.2);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 40px rgba(245,196,83,.6),
            0 0 80px -20px rgba(245,196,83,.8),
            inset 0 0 30px rgba(255,215,106,.3);
        transform: scale(1.04);
    }
}

/* صندوق جایزه با گرادیانت طلایی */
.fst-hero-prize-box {
    background:
        linear-gradient(155deg, rgba(245,196,83,.1), rgba(236,72,153,.05)) !important;
    border: 1.5px solid rgba(245,196,83,.4) !important;
    box-shadow:
        0 0 40px -10px rgba(245,196,83,.25),
        inset 0 0 30px rgba(245,196,83,.06) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-hero-prize-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,215,106,.15), transparent) !important;
    animation: fstvShine 4s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes fstvShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.fst-hero-prize-value {
    background: linear-gradient(135deg, #ffd76a, #f5c453, #ff9ad4) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    font-weight: 900 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* عنوان جشنواره */
.fst-hero-title {
    background: linear-gradient(135deg, #f0f2f7, #ffd76a) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════
   FST STATUS — بج وضعیت با pulse
   ═══════════════════════════════════════════════════════════ */

.fst-hero-status.ACTIVE {
    background: rgba(34,197,94,.18) !important;
    color: #4ade80 !important;
    border: 1.5px solid rgba(34,197,94,.5) !important;
    box-shadow: 0 0 20px -4px rgba(34,197,94,.5) !important;
    animation: fstvActivePulse 2s ease-in-out infinite !important;
    position: relative !important;
}

.fst-hero-status.ACTIVE::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
    margin-left: 6px !important;
    box-shadow: 0 0 8px rgba(34,197,94,.9) !important;
    animation: fstvDotPulse 1.5s ease-in-out infinite !important;
}

@keyframes fstvActivePulse {
    0%, 100% { box-shadow: 0 0 20px -4px rgba(34,197,94,.5); }
    50% { box-shadow: 0 0 30px -4px rgba(34,197,94,.8); }
}

@keyframes fstvDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.3); }
}

.fst-hero-status.UPCOMING {
    background: rgba(245,196,83,.18) !important;
    color: #ffd76a !important;
    border: 1.5px solid rgba(245,196,83,.5) !important;
    box-shadow: 0 0 20px -4px rgba(245,196,83,.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   FST CARD — کارت‌های لیست جشنواره
   ═══════════════════════════════════════════════════════════ */

.fst-card {
    background:
        radial-gradient(circle at 15% 0%, rgba(245,196,83,.06), transparent 50%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1px solid rgba(245,196,83,.15) !important;
    transition: all .25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 60px !important;
    height: 60px !important;
    background: radial-gradient(circle at top right, rgba(245,196,83,.15), transparent 60%) !important;
    pointer-events: none !important;
    opacity: .8 !important;
}

.fst-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(245,196,83,.35) !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(245,196,83,.1), transparent 50%),
        linear-gradient(155deg, #1e2128, #1c1f27) !important;
    box-shadow:
        0 20px 40px -20px rgba(245,196,83,.35),
        0 0 0 1px rgba(245,196,83,.1) inset !important;
}

/* آیکون کارت جشنواره */
.fst-card-icon {
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.28), rgba(245,196,83,.08)) !important;
    border: 1.5px solid rgba(245,196,83,.35) !important;
    color: #f5c453 !important;
    box-shadow:
        0 8px 20px -8px rgba(245,196,83,.4),
        inset 0 0 20px rgba(245,196,83,.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-card-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: -50% !important;
    background: conic-gradient(from 0deg, transparent, rgba(245,196,83,.4), transparent 30%) !important;
    animation: fstvIconSpin 5s linear infinite !important;
    pointer-events: none !important;
}

.fst-card-icon svg {
    position: relative !important;
    z-index: 2 !important;
}

@keyframes fstvIconSpin {
    to { transform: rotate(360deg); }
}

.fst-card:hover .fst-card-icon {
    transform: scale(1.05) !important;
    transition: transform .3s ease !important;
}

/* ═══════════════════════════════════════════════════════════
   FST CHIP — چیپ‌ها با گرادیانت
   ═══════════════════════════════════════════════════════════ */

.fst-chip {
    background: linear-gradient(155deg, #252932, #1f232b) !important;
    border: 1px solid rgba(245,196,83,.15) !important;
    transition: all .2s !important;
}

.fst-chip b {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
}


/* ═══════════════════════════════════════════════════════════
   FST BUY BOX — صندوق خرید بلیت با درخشش طلایی
   ═══════════════════════════════════════════════════════════ */

.fst-buy-box {
    background:
        radial-gradient(circle at 50% 0%, rgba(245,196,83,.08), transparent 60%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1.5px solid rgba(245,196,83,.25) !important;
    box-shadow:
        0 0 0 1px rgba(245,196,83,.05) inset,
        0 20px 40px -20px rgba(245,196,83,.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-buy-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #f5c453, transparent) !important;
    opacity: .8 !important;
}

/* بخش قیمت هر بلیت */
.fst-buy-price {
    background: linear-gradient(135deg, #ffd76a, #f5c453, #ff9ad4) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
    font-size: 17px !important;
    text-shadow: none !important;
}

/* کنترل تعداد */
.fst-qty-control {
    padding: 10px 0 16px !important;
}

.fst-qty-btn {
    background: linear-gradient(155deg, #252932, #1f232b) !important;
    border: 1.5px solid rgba(245,196,83,.2) !important;
    color: #e4e7ee !important;
    transition: all .2s !important;
    box-shadow: 0 4px 12px -6px rgba(15,17,23,.5) !important;
}

.fst-qty-btn:hover:not(:disabled),
.fst-qty-btn:active:not(:disabled) {
    background: linear-gradient(135deg, #f5c453, #e0b13e) !important;
    border-color: #f5c453 !important;
    color: #1a1d24 !important;
    transform: scale(.95) !important;
    box-shadow:
        0 0 20px -4px rgba(245,196,83,.6),
        0 6px 16px -6px rgba(245,196,83,.4) !important;
}

.fst-qty-value {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 0 12px rgba(245,196,83,.5)) !important;
    font-weight: 900 !important;
}

/* مبلغ کل */
.fst-total-row {
    background:
        linear-gradient(155deg, rgba(245,196,83,.08), rgba(245,196,83,.02)) !important;
    border: 1.5px dashed rgba(245,196,83,.35) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-total-row::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 50%, rgba(245,196,83,.1), transparent 70%) !important;
    pointer-events: none !important;
}

.fst-total-value {
    background: linear-gradient(135deg, #ffd76a, #f5c453, #ff9ad4) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    text-shadow: none !important;
    position: relative !important;
    z-index: 1 !important;
    filter: drop-shadow(0 0 14px rgba(245,196,83,.4)) !important;
}

.fst-total-value small {
    -webkit-text-fill-color: #8b95a8 !important;
    color: #8b95a8 !important;
    font-size: 11px !important;
    filter: none !important;
}

/* دکمه خرید */
.fst-buy-btn {
    background: linear-gradient(135deg, #f5c453, #e0b13e, #c99a2c) !important;
    color: #1a1d24 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        0 12px 30px -10px rgba(245,196,83,.5),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: all .18s !important;
}

.fst-buy-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) !important;
    animation: fstvBuyShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes fstvBuyShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.fst-buy-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffd76a, #f5c453, #e0b13e) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(245,196,83,.7),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.fst-buy-btn:disabled {
    background: linear-gradient(155deg, #252932, #1f232b) !important;
    color: #5b6478 !important;
    box-shadow: none !important;
}

.fst-buy-btn:disabled::before {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   FST REFERRAL — رفرال با گرادیانت سبز-فیروزه‌ای
   ═══════════════════════════════════════════════════════════ */

.fst-referral-box {
    background:
        radial-gradient(circle at 15% 0%, rgba(52,211,153,.1), transparent 55%),
        radial-gradient(circle at 85% 100%, rgba(25,199,217,.08), transparent 55%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1.5px solid rgba(52,211,153,.28) !important;
    box-shadow:
        0 0 0 1px rgba(52,211,153,.06) inset,
        0 20px 40px -20px rgba(52,211,153,.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-referral-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #34d399, transparent) !important;
    opacity: .8 !important;
}

.fst-referral-box .fst-section-title .icon {
    background:
        radial-gradient(circle at 30% 25%, rgba(52,211,153,.35), rgba(52,211,153,.1)) !important;
    border: 1.5px solid rgba(52,211,153,.4) !important;
    color: #34d399 !important;
    box-shadow: 0 8px 20px -8px rgba(52,211,153,.5) !important;
}

/* صندوق لینک */
.fst-ref-link-box {
    background: linear-gradient(155deg, #252932, #1f232b) !important;
    border: 1.5px solid rgba(52,211,153,.3) !important;
    box-shadow: inset 0 0 20px rgba(52,211,153,.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-ref-link-box::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(115deg, transparent, rgba(52,211,153,.06), transparent) !important;
    pointer-events: none !important;
}

.fst-ref-link-box input {
    color: #7ee6a8 !important;
    position: relative !important;
    z-index: 1 !important;
}

.fst-ref-copy-btn {
    background: linear-gradient(135deg, #34d399, #22c55e) !important;
    color: #052a1a !important;
    box-shadow:
        0 8px 20px -8px rgba(52,211,153,.5),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
    transition: all .18s !important;
}

.fst-ref-copy-btn:hover,
.fst-ref-copy-btn:active {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    transform: scale(.94) !important;
    box-shadow:
        0 6px 16px -6px rgba(52,211,153,.6),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* آمار رفرال */
.fst-ref-stat {
    background:
        linear-gradient(155deg, #252932, #1f232b) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all .25s !important;
}

.fst-ref-stat::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 60%) !important;
    pointer-events: none !important;
}

.fst-ref-stat.verified {
    border-color: rgba(52,211,153,.3) !important;
    background:
        linear-gradient(155deg, rgba(52,211,153,.06), rgba(52,211,153,.02)) !important;
}

.fst-ref-stat.verified .stat-value {
    background: linear-gradient(135deg, #7ee6a8, #34d399) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 0 10px rgba(52,211,153,.5)) !important;
}

.fst-ref-stat.tickets {
    border-color: rgba(245,196,83,.3) !important;
    background:
        linear-gradient(155deg, rgba(245,196,83,.06), rgba(245,196,83,.02)) !important;
}

.fst-ref-stat.tickets .stat-value {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 0 10px rgba(245,196,83,.5)) !important;
}

/* نوار پیشرفت */
.fst-ref-bar {
    background: #252932 !important;
    border: 1px solid rgba(52,211,153,.2) !important;
    height: 10px !important;
    position: relative !important;
    overflow: hidden !important;
}

.fst-ref-bar::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        repeating-linear-gradient(45deg,
            transparent,
            transparent 4px,
            rgba(255,255,255,.03) 4px,
            rgba(255,255,255,.03) 8px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.fst-ref-bar-inner {
    background: linear-gradient(90deg, #34d399, #22c55e, #22d3ee) !important;
    background-size: 200% 100% !important;
    animation: fstvBarFlow 3s linear infinite !important;
    box-shadow:
        0 0 12px rgba(52,211,153,.6),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    position: relative !important;
    z-index: 2 !important;
}

@keyframes fstvBarFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.fst-ref-count {
    background: linear-gradient(135deg, #7ee6a8, #34d399) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
    filter: drop-shadow(0 0 8px rgba(52,211,153,.5)) !important;
}

/* Spoiler */
.fst-ref-spoiler {
    background:
        linear-gradient(155deg, rgba(52,211,153,.05), rgba(52,211,153,.01)) !important;
    border: 1.5px dashed rgba(52,211,153,.35) !important;
    transition: all .3s !important;
}

.fst-ref-spoiler.revealed {
    border-style: solid !important;
    border-color: rgba(52,211,153,.5) !important;
    background:
        linear-gradient(155deg, rgba(52,211,153,.08), rgba(52,211,153,.02)) !important;
    box-shadow: 0 0 30px -10px rgba(52,211,153,.4) !important;
}

.fst-ref-spoiler.hidden::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(15,17,23,.9), rgba(15,17,23,.75)) !important;
    color: #7ee6a8 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(52,211,153,.5) !important;
    letter-spacing: 0 !important;
}

/* دکمه اشتراک */
.fst-share-btn {
    background: linear-gradient(135deg, #34d399, #22c55e, #16a34a) !important;
    color: #052a1a !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        0 12px 30px -10px rgba(52,211,153,.5),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
    transition: all .18s !important;
}

.fst-share-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) !important;
    animation: fstvShareShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes fstvShareShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.fst-share-btn:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a, #15803d) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(52,211,153,.7),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   FST TICKET — بلیت‌های شما
   ═══════════════════════════════════════════════════════════ */

.fst-ticket-item {
    background:
        linear-gradient(155deg, #252932, #1f232b) !important;
    border: 1px solid rgba(245,196,83,.12) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all .25s !important;
}

.fst-ticket-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, #f5c453, #e0b13e) !important;
    border-radius: 0 3px 3px 0 !important;
    opacity: .7 !important;
}

.fst-ticket-item::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, #f5c453, #e0b13e) !important;
    border-radius: 3px 0 0 3px !important;
    opacity: .7 !important;
}

.fst-ticket-item:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(245,196,83,.3) !important;
    box-shadow: 0 12px 28px -14px rgba(245,196,83,.4) !important;
}

.fst-ticket-icon {
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.3), rgba(245,196,83,.1)) !important;
    border: 1.5px solid rgba(245,196,83,.35) !important;
    color: #f5c453 !important;
    box-shadow: 0 6px 16px -6px rgba(245,196,83,.4) !important;
}

.fst-ticket-info b {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
}

.fst-ticket-src.referral {
    background: linear-gradient(135deg, rgba(52,211,153,.2), rgba(52,211,153,.08)) !important;
    color: #7ee6a8 !important;
    border: 1px solid rgba(52,211,153,.35) !important;
    box-shadow: 0 4px 12px -6px rgba(52,211,153,.4) !important;
}

.fst-ticket-src.purchase {
    background: linear-gradient(135deg, rgba(245,196,83,.2), rgba(245,196,83,.08)) !important;
    color: #ffd76a !important;
    border: 1px solid rgba(245,196,83,.35) !important;
    box-shadow: 0 4px 12px -6px rgba(245,196,83,.4) !important;
}

.fst-ticket-src.admin {
    background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(239,68,68,.08)) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239,68,68,.35) !important;
}

/* ═══════════════════════════════════════════════════════════
   FST WINNERS — برندگان با جشن
   ═══════════════════════════════════════════════════════════ */

.fst-winner-row {
    background:
        linear-gradient(155deg, rgba(245,196,83,.08), rgba(236,72,153,.03)) !important;
    border: 1px solid rgba(245,196,83,.28) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all .25s !important;
}

.fst-winner-row::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 80px !important;
    height: 80px !important;
    background: radial-gradient(circle, rgba(245,196,83,.2), transparent 70%) !important;
    pointer-events: none !important;
}

.fst-winner-row:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(245,196,83,.5) !important;
    box-shadow: 0 12px 28px -14px rgba(245,196,83,.5) !important;
}

.fst-winner-rank {
    background: linear-gradient(135deg, #ffd76a, #f5c453, #e0b13e) !important;
    color: #1a1d24 !important;
    box-shadow:
        0 6px 16px -6px rgba(245,196,83,.6),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    position: relative !important;
    z-index: 1 !important;
}

.fst-winner-info b {
    background: linear-gradient(135deg, #f0f2f7, #ffd76a) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
}

.fst-winner-info small {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   FST EMPTY — با ستاره‌های چشمک‌زن
   ═══════════════════════════════════════════════════════════ */

.app:has(.fst-hero) .fst-empty,
.app:has(.fst-empty) .fst-empty {
    background:
        radial-gradient(circle at 50% 0%, rgba(245,196,83,.06), transparent 60%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1.5px dashed rgba(245,196,83,.25) !important;
    position: relative !important;
    overflow: hidden !important;
}

.app:has(.fst-hero) .fst-empty .em,
.app:has(.fst-empty) .fst-empty .em {
    animation: fstvEmFloat 3s ease-in-out infinite !important;
    color: #f5c453 !important;
    text-shadow: 0 0 30px rgba(245,196,83,.5) !important;
}

@keyframes fstvEmFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-6px) rotate(3deg); }
}

/* ═══════════════════════════════════════════════════════════
   FST SECTION TITLE — تیتر با گرادیانت طلایی
   ═══════════════════════════════════════════════════════════ */

.fst-section-title {
    border-bottom: 1px solid rgba(245,196,83,.15) !important;
    position: relative !important;
}

.fst-section-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: 0 !important;
    width: 40px !important;
    height: 1px !important;
    background: linear-gradient(90deg, #f5c453, transparent) !important;
    opacity: .8 !important;
}

.fst-section-title .icon {
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.35), rgba(245,196,83,.1)) !important;
    border: 1.5px solid rgba(245,196,83,.35) !important;
    color: #f5c453 !important;
    box-shadow: 0 6px 16px -6px rgba(245,196,83,.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   FST INFO ROW — ردیف‌ها با hover
   ═══════════════════════════════════════════════════════════ */

.fst-info-row {
    transition: all .2s !important;
    border-radius: 6px !important;
    padding: 9px 6px !important;
    margin: 0 -6px !important;
}

.fst-info-row:hover {
    background: rgba(245,196,83,.04) !important;
}

.fst-info-row .val.highlight {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
}

.fst-info-row .val.positive {
    color: #4ade80 !important;
    text-shadow: 0 0 10px rgba(52,211,153,.4) !important;
    font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════
   FST RULE ITEM — قوانین با نماد رنگی
   ═══════════════════════════════════════════════════════════ */

.fst-rule-item {
    background:
        linear-gradient(155deg, #252932, #1f232b) !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    transition: all .2s !important;
}

.fst-rule-item:hover {
    border-color: rgba(245,196,83,.2) !important;
    background:
        linear-gradient(155deg, #2a2e38, #232830) !important;
}

.fst-rule-item .rule-dot {
    background: linear-gradient(135deg, #f5c453, #e0b13e) !important;
    box-shadow: 0 0 8px rgba(245,196,83,.7) !important;
}

.fst-rule-item b {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: support-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   🎫 SUPPORT / TICKETS — Hunter Style
   ========================================================= */

/* ═══ پس‌زمینه ═══ */
body:has(.ticket-hero),
body:has(.ticket-chat-header),
.app:has(.ticket-hero),
.app:has(.ticket-chat-header) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
}

/* ═══ هدر ═══ */
.app:has(.ticket-hero) .page-header,
.app:has(.ticket-chat-header) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
    justify-content: center !important;
    position: relative !important;
}

.app:has(.ticket-hero) .page-header h2,
.app:has(.ticket-chat-header) .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.ticket-hero) .page-header .back-button,
.app:has(.ticket-chat-header) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.ticket-hero) .page-header .back-button:hover,
.app:has(.ticket-chat-header) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* ═══════════════════════════════════════════════════════════
   TICKET HERO (بنر بالای صفحه پشتیبانی)
   ═══════════════════════════════════════════════════════════ */

.ticket-hero {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: none !important;
}

.ticket-hero::before,
.ticket-hero::after {
    display: none !important;
}

.ticket-hero-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(96,165,250,.12) !important;
    border: none !important;
    color: #60a5fa !important;
    font-size: 24px !important;
    box-shadow: none !important;
    animation: none !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.ticket-hero-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
    filter: none !important;
}

.ticket-hero-dot {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    border: 2.5px solid #1a1d24 !important;
    box-shadow: none !important;
    animation: none !important;
}

.ticket-hero-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.ticket-hero h3 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

.ticket-hero p {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   TICKET TABS
   ═══════════════════════════════════════════════════════════ */

.ticket-tabs {
    display: flex !important;
    gap: 6px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    padding: 5px !important;
    margin-bottom: 14px !important;
}

.ticket-tab {
    flex: 1 !important;
    padding: 11px 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: .18s !important;
}

.ticket-tab svg {
    width: 14px !important;
    height: 14px !important;
    color: inherit !important;
}

.ticket-tab:hover {
    color: #e4e7ee !important;
}

.ticket-tab.active {
    background: #f5c453 !important;
    color: #1a1d24 !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TICKET COMPOSE (ارسال تیکت جدید)
   ═══════════════════════════════════════════════════════════ */

.ticket-view {
    display: none !important;
}

.ticket-view.active {
    display: block !important;
    animation: none !important;
}

.ticket-compose {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 16px !important;
}

.ticket-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    outline: none !important;
    resize: vertical !important;
    min-height: 130px !important;
    line-height: 1.8 !important;
    transition: .18s !important;
}

.ticket-textarea:focus {
    border-color: rgba(245,196,83,.4) !important;
    background: #2a2e38 !important;
    box-shadow: 0 0 0 3px rgba(245,196,83,.1) !important;
}

.ticket-textarea::placeholder {
    color: #5b6478 !important;
    font-style: normal !important;
}

.ticket-send-btn {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 14px 16px !important;
    border-radius: 13px !important;
    border: none !important;
    cursor: pointer !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    transition: .18s !important;
    animation: none !important;
}

.ticket-send-btn:hover,
.ticket-send-btn:active {
    background: #e0b13e !important;
    transform: scale(.98) !important;
    box-shadow: none !important;
}

.ticket-send-btn:disabled {
    background: #252932 !important;
    color: #5b6478 !important;
    cursor: not-allowed !important;
    opacity: .7 !important;
}

.ticket-send-btn span {
    font-size: 15px !important;
}


/* ═══════════════════════════════════════════════════════════
   TICKET LIST (کارت‌های تیکت)
   ═══════════════════════════════════════════════════════════ */

.ticket-card2 {
    position: relative !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    transition: .18s !important;
    animation: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.ticket-card2::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    bottom: 12px !important;
    right: 0 !important;
    left: auto !important;
    width: 3px !important;
    border-radius: 2px 0 0 2px !important;
    background: #f5c453 !important;
    opacity: .85 !important;
}

.ticket-card2.is-closed::before {
    background: #5b6478 !important;
}

.ticket-card2.is-waiting::before {
    background: #f87171 !important;
}

.ticket-card2:hover,
.ticket-card2:active {
    background: #1e2128 !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: none !important;
}

.ticket-card2-avatar {
    flex-shrink: 0 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(96,165,250,.12) !important;
    border: none !important;
    color: #60a5fa !important;
    font-size: 18px !important;
}

.ticket-card2-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.ticket-card2-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.ticket-card2-id {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
}

.ticket-badges {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.ticket-card-status2 {
    display: inline-block !important;
    font-size: 9.5px !important;
    padding: 3px 9px !important;
    border-radius: 7px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    border: none !important;
}

.ticket-card-status2.open {
    background: rgba(34,197,94,.14) !important;
    color: #22c55e !important;
}

.ticket-card-status2.closed {
    background: rgba(139,149,168,.14) !important;
    color: #8b95a8 !important;
}

.ticket-wait-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9.5px !important;
    padding: 3px 9px !important;
    border-radius: 7px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    background: rgba(248,113,113,.14) !important;
    color: #f87171 !important;
    border: none !important;
}

.ticket-wait-pill .dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #f87171 !important;
    animation: none !important;
}

.ticket-card2-last {
    color: #8b95a8 !important;
    font-size: 11.5px !important;
    line-height: 1.7 !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 0 6px !important;
}

.ticket-card2-meta {
    color: #5b6478 !important;
    font-size: 10px !important;
    display: flex !important;
    gap: 7px !important;
    align-items: center !important;
    font-family: inherit !important;
    font-weight: 500 !important;
}

.ticket-card2-arrow {
    color: #5b6478 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    font-weight: 700 !important;
}

/* حالت خالی لیست */
.ticket-list-empty {
    text-align: center !important;
    padding: 46px 24px !important;
    color: #8b95a8 !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    background: #1a1d24 !important;
    border: 1px dashed rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
}

.ticket-list-empty .em {
    display: block !important;
    font-size: 42px !important;
    margin-bottom: 12px !important;
    opacity: .55 !important;
    color: #f5c453 !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TICKET DETAIL (چت)
   ═══════════════════════════════════════════════════════════ */

.ticket-detail-wrap {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 130px) !important;
    padding: 0 !important;
}

/* هدر چت */
.ticket-chat-header {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.ticket-chat-header::before,
.ticket-chat-header::after {
    display: none !important;
}

.ticket-chat-avatar {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    background: rgba(96,165,250,.12) !important;
    color: #60a5fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.ticket-chat-avatar::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    border: 2.5px solid #1a1d24 !important;
    box-shadow: none !important;
    animation: none !important;
}

.ticket-chat-info {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.ticket-chat-info h4 {
    margin: 0 0 3px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
}

.ticket-chat-info p {
    margin: 0 !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #22c55e !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: inherit !important;
}

.ticket-chat-info p::before {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: none !important;
}

/* ناحیه پیام‌ها */
.ticket-detail-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: #15181f !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.04) !important;
    scroll-behavior: smooth !important;
}

.ticket-detail-messages::-webkit-scrollbar {
    width: 4px !important;
}

.ticket-detail-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}

/* جداکننده تاریخ */
.ticket-date-sep {
    align-self: center !important;
    font-size: 10px !important;
    color: #8b95a8 !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    background: #252932 !important;
    border-radius: 9px !important;
    margin: 12px 0 8px !important;
    letter-spacing: 0 !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: inherit !important;
}

/* پیام‌ها */
.ticket-msg-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    max-width: 78% !important;
    margin-bottom: 4px !important;
    animation: none !important;
}

.ticket-msg-row.user {
    align-self: flex-start !important;
    flex-direction: row !important;
}

.ticket-msg-row.admin {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
    margin-top: 6px !important;
}

.ticket-msg-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
    font-family: inherit !important;
}

.ticket-msg-avatar.user {
    background: rgba(96,165,250,.18) !important;
    color: #60a5fa !important;
}

.ticket-msg-avatar.admin {
    background: rgba(52,211,153,.18) !important;
    color: #34d399 !important;
}

.ticket-msg-bubble {
    position: relative !important;
    padding: 10px 14px 20px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    max-width: 100% !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
}

.ticket-msg-row.user .ticket-msg-bubble {
    background: #1a1d24 !important;
    color: #e4e7ee !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-bottom-right-radius: 5px !important;
    box-shadow: none !important;
}

.ticket-msg-row.admin .ticket-msg-bubble {
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border: none !important;
    border-bottom-left-radius: 5px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.ticket-msg-time {
    position: absolute !important;
    bottom: 4px !important;
    font-size: 8.5px !important;
    opacity: .55 !important;
    font-weight: 500 !important;
    direction: ltr !important;
    font-family: inherit !important;
}

.ticket-msg-row.user .ticket-msg-time {
    left: 10px !important;
    color: #8b95a8 !important;
}

.ticket-msg-row.admin .ticket-msg-time {
    right: 10px !important;
    color: #5b6478 !important;
}

/* یادداشت بسته بودن */
.ticket-closed-note {
    text-align: center !important;
    padding: 10px 14px !important;
    border-radius: 11px !important;
    background: rgba(248,113,113,.08) !important;
    border: 1px dashed rgba(248,113,113,.3) !important;
    color: #f87171 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin: 12px auto 4px !important;
    max-width: 90% !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
}

/* ناحیه تایپ */
.ticket-detail-input {
    display: flex !important;
    gap: 8px !important;
    padding: 12px 0 4px !important;
    align-items: flex-end !important;
}

.ticket-detail-input textarea {
    flex: 1 !important;
    resize: none !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    background: #1a1d24 !important;
    color: #e4f0ff !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    max-height: 110px !important;
    outline: none !important;
    transition: .18s !important;
    line-height: 1.55 !important;
    min-height: 46px !important;
    box-shadow: none !important;
}

.ticket-detail-input textarea:focus {
    border-color: rgba(245,196,83,.4) !important;
    background: #252932 !important;
    box-shadow: 0 0 0 3px rgba(245,196,83,.08) !important;
}

.ticket-detail-input textarea:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

.ticket-detail-input textarea::placeholder {
    color: #5b6478 !important;
    font-weight: 500 !important;
}

.ticket-detail-input button {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: .18s !important;
    box-shadow: none !important;
}

.ticket-detail-input button:hover:not(:disabled),
.ticket-detail-input button:active:not(:disabled) {
    background: #e0b13e !important;
    transform: scale(1.05) !important;
    box-shadow: none !important;
}

.ticket-detail-input button:disabled {
    opacity: .4 !important;
    cursor: not-allowed !important;
}

.ticket-detail-input button svg {
    color: #1a1d24 !important;
    filter: none !important;
    width: 20px !important;
    height: 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   LOADING
   ═══════════════════════════════════════════════════════════ */

.ticket-chat-loading {
    align-self: center !important;
    margin: 30px auto !important;
    padding: 10px 20px !important;
    border-radius: 14px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    color: #8b95a8 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: inherit !important;
}

.ticket-chat-loading::before {
    content: '' !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(245,196,83,.3) !important;
    border-top-color: #f5c453 !important;
    animation: tkhSpin .8s linear infinite !important;
}

@keyframes tkhSpin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */

.app:has(.ticket-hero) .bottom-nav,
.app:has(.ticket-chat-header) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app:has(.ticket-hero) .bottom-nav::before,
.app:has(.ticket-hero) .bottom-nav::after,
.app:has(.ticket-chat-header) .bottom-nav::before,
.app:has(.ticket-chat-header) .bottom-nav::after {
    display: none !important;
}

.app:has(.ticket-hero) .nav-item,
.app:has(.ticket-chat-header) .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app:has(.ticket-hero) .nav-item .nav-icon svg,
.app:has(.ticket-chat-header) .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
    transition: .18s !important;
}

.app:has(.ticket-hero) .nav-item small,
.app:has(.ticket-chat-header) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.app:has(.ticket-hero) .nav-item:hover,
.app:has(.ticket-chat-header) .nav-item:hover {
    color: #8b95a8 !important;
}

.app:has(.ticket-hero) .nav-item.active,
.app:has(.ticket-chat-header) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.ticket-hero) .nav-item.active::after,
.app:has(.ticket-chat-header) .nav-item.active::after {
    display: none !important;
}

.app:has(.ticket-hero) .nav-item.active .nav-icon svg,
.app:has(.ticket-chat-header) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

.app:has(.ticket-hero) .nav-item.active small,
.app:has(.ticket-chat-header) .nav-item.active small {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

.app:has(.ticket-hero) ::-webkit-scrollbar,
.app:has(.ticket-chat-header) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.app:has(.ticket-hero) ::-webkit-scrollbar-thumb,
.app:has(.ticket-chat-header) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}

.app:has(.ticket-hero) ::-webkit-scrollbar-track,
.app:has(.ticket-chat-header) ::-webkit-scrollbar-track {
    background: transparent !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: payment-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   💳 PAYMENT — Hunter Premium Style
   با گلوی ملایم، تزئینات، حس پریمیوم
   ========================================================= */

/* ═══ پس‌زمینه با گرادیانت ظریف ═══ */
body:has(.payx-order-card),
body:has(.pay-hero),
body:has(.wd-hero),
body:has(.dm-method),
body:has(.payment-box),
.app:has(.payx-order-card),
.app:has(.pay-hero),
.app:has(.wd-hero),
.app:has(.dm-method),
.app:has(.payment-box) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
    position: relative;
}

body:has(.payx-order-card)::before,
body:has(.pay-hero)::before,
body:has(.wd-hero)::before,
.app:has(.payx-order-card)::before,
.app:has(.pay-hero)::before,
.app:has(.wd-hero)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(245,196,83,.06), transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(96,165,250,.04), transparent 50%) !important;
}

/* ═══ هدر ═══ */
.app:has(.payx-order-card) .page-header,
.app:has(.pay-hero) .page-header,
.app:has(.wd-hero) .page-header,
.app:has(.dm-method) .page-header,
.app:has(.payment-box) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
}

.app:has(.payx-order-card) .page-header h2,
.app:has(.pay-hero) .page-header h2,
.app:has(.wd-hero) .page-header h2,
.app:has(.dm-method) .page-header h2,
.app:has(.payment-box) .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.payx-order-card) .page-header .back-button,
.app:has(.pay-hero) .page-header .back-button,
.app:has(.wd-hero) .page-header .back-button,
.app:has(.dm-method) .page-header .back-button,
.app:has(.payment-box) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.payx-order-card) .page-header .back-button:hover,
.app:has(.pay-hero) .page-header .back-button:hover,
.app:has(.wd-hero) .page-header .back-button:hover,
.app:has(.dm-method) .page-header .back-button:hover,
.app:has(.payment-box) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* ═══════════════════════════════════════════════════════════
   PAYX ORDER CARD (کارت سفارش)
   با هاله‌ی طلایی ظریف
   ═══════════════════════════════════════════════════════════ */

.payx-order-card {
    background: linear-gradient(155deg, #1a1d24 0%, #181b22 100%) !important;
    border: 1px solid rgba(245,196,83,.18) !important;
    border-radius: 18px !important;
    box-shadow:
        0 0 0 1px rgba(245,196,83,.05) inset,
        0 20px 40px -20px rgba(245,196,83,.15) !important;
    padding: 18px 18px 16px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: none !important;
}

/* خط تزئینی بالا */
.payx-order-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #f5c453, transparent) !important;
    border-radius: 0 0 2px 2px !important;
    opacity: .7 !important;
}

/* هاله‌ی گوشه */
.payx-order-card::after {
    content: '' !important;
    position: absolute !important;
    top: -50px !important;
    right: -50px !important;
    width: 140px !important;
    height: 140px !important;
    background: radial-gradient(circle, rgba(245,196,83,.12), transparent 70%) !important;
    pointer-events: none !important;
}

.payx-order-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    gap: 10px !important;
}

.payx-order-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    color: #f5c453 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: rgba(245,196,83,.1) !important;
    border: 1px solid rgba(245,196,83,.25) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
}

.payx-order-label::before {
    content: '◆' !important;
    font-size: 8px !important;
    color: #f5c453 !important;
}

.payx-order-id {
    font-family: monospace !important;
    font-size: 9.5px !important;
    color: #5b6478 !important;
    direction: ltr !important;
    letter-spacing: .3px !important;
}

.payx-order-name {
    font-family: inherit !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    letter-spacing: 0 !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

.payx-order-amount {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    direction: rtl !important;
    flex-wrap: wrap !important;
}

.payx-amount-num {
    background: none !important;
    -webkit-text-fill-color: #f5c453 !important;
    color: #f5c453 !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    font-size: 30px !important;
    letter-spacing: -.5px !important;
    line-height: 1 !important;
    text-shadow: 0 0 24px rgba(245,196,83,.35) !important;
    font-variant-numeric: tabular-nums !important;
}

.payx-amount-unit {
    font-family: inherit !important;
    font-size: 12px !important;
    color: #8b95a8 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.payx-coupon-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    padding: 4px 10px !important;
    background: rgba(52,211,153,.14) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52,211,153,.3) !important;
    border-radius: 8px !important;
    margin-right: auto !important;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   COUPON BAR
   ═══════════════════════════════════════════════════════════ */

.payx-coupon-bar {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 10px !important;
    margin-bottom: 14px !important;
    border-radius: 14px !important;
    background: #1a1d24 !important;
    border: 1px dashed rgba(245,196,83,.22) !important;
    transition: all .25s !important;
    animation: none !important;
}

.payx-coupon-bar.active {
    background: rgba(52,211,153,.06) !important;
    border: 1px solid rgba(52,211,153,.3) !important;
    border-style: solid !important;
}

.payx-coupon-input {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    outline: none !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-size: 12.5px !important;
    font-family: monospace !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.payx-coupon-input:focus {
    border-color: rgba(245,196,83,.4) !important;
    background: #2a2e38 !important;
    box-shadow: 0 0 0 3px rgba(245,196,83,.08) !important;
}

.payx-coupon-input::placeholder {
    color: #5b6478 !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

.payx-coupon-apply {
    padding: 10px 16px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    transition: .18s !important;
    cursor: pointer !important;
}

.payx-coupon-apply:hover,
.payx-coupon-apply:active {
    background: #e0b13e !important;
    transform: scale(.96) !important;
}

.payx-coupon-apply:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

.payx-coupon-applied {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 6px 6px !important;
}

.payx-coupon-check {
    font-size: 15px !important;
}

.payx-coupon-code {
    font-family: monospace !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    color: #34d399 !important;
    letter-spacing: 1.5px !important;
    flex: 1 !important;
}

.payx-coupon-save {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #34d399 !important;
    direction: rtl !important;
    white-space: nowrap !important;
}

.payx-coupon-x {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(248,113,113,.3) !important;
    background: rgba(248,113,113,.12) !important;
    color: #f87171 !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: .18s !important;
}

.payx-coupon-x:hover,
.payx-coupon-x:active {
    background: rgba(248,113,113,.25) !important;
    transform: scale(.92) !important;
}

/* ═══════════════════════════════════════════════════════════
   PAYX TITLE
   ═══════════════════════════════════════════════════════════ */

.payx-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 4px 2px 12px !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #e4e7ee !important;
    letter-spacing: 0 !important;
}

.payx-title-icon {
    font-size: 15px !important;
    color: #f5c453 !important;
}


/* ═══════════════════════════════════════════════════════════
   PAYX OPTIONS (گزینه‌های پرداخت)
   با border گرادیانت ظریف
   ═══════════════════════════════════════════════════════════ */

.payx-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    border-radius: 16px !important;
    background: linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: #e4e7ee !important;
    text-align: right !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    animation: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* خط تزئینی سمت راست */
.payx-option::before {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    bottom: 14px !important;
    right: 0 !important;
    left: auto !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #f5c453 !important;
    opacity: .5 !important;
    transition: .18s !important;
}

.payx-option:hover:not(:disabled),
.payx-option:active:not(:disabled) {
    transform: translateY(-1px) !important;
    border-color: rgba(245,196,83,.35) !important;
    background: linear-gradient(155deg, #1e2128, #1c1f27) !important;
    box-shadow: 0 12px 28px -14px rgba(245,196,83,.3) !important;
}

.payx-option:hover:not(:disabled)::before {
    opacity: 1 !important;
}

.payx-option.available {
    border-color: rgba(52,211,153,.3) !important;
}

.payx-option.available::before {
    background: #34d399 !important;
}

.payx-option.available:hover:not(:disabled) {
    border-color: rgba(52,211,153,.5) !important;
    box-shadow: 0 12px 28px -14px rgba(52,211,153,.35) !important;
}

.payx-option.disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

/* آیکون گزینه */
.payx-option-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.payx-option-icon.wallet {
    background: radial-gradient(circle at 30% 25%, rgba(52,211,153,.25), rgba(52,211,153,.08)) !important;
    border: 1px solid rgba(52,211,153,.3) !important;
}

.payx-option-icon.card {
    background: radial-gradient(circle at 30% 25%, rgba(245,196,83,.25), rgba(245,196,83,.08)) !important;
    border: 1px solid rgba(245,196,83,.3) !important;
}

.payx-option-icon.crypto {
    background: radial-gradient(circle at 30% 25%, rgba(96,165,250,.25), rgba(96,165,250,.08)) !important;
    border: 1px solid rgba(96,165,250,.3) !important;
}

/* اطلاعات */
.payx-option-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.payx-option-title {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.payx-option-sub {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

.payx-option-arrow {
    font-size: 20px !important;
    color: #8b95a8 !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    transition: .18s !important;
}

.payx-option:hover:not(:disabled) .payx-option-arrow {
    color: #f5c453 !important;
    transform: translateX(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════
   CRYPTO SECTION
   ═══════════════════════════════════════════════════════════ */

.payx-crypto-section {
    padding: 14px 16px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
    background: linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1px solid rgba(96,165,250,.15) !important;
    animation: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.payx-crypto-section::before {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 100px !important;
    height: 100px !important;
    background: radial-gradient(circle, rgba(96,165,250,.15), transparent 70%) !important;
    pointer-events: none !important;
}

.payx-crypto-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.payx-crypto-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 1 !important;
}

.payx-crypto-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 6px !important;
    border-radius: 12px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    color: #e4e7ee !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .18s !important;
    position: relative !important;
    overflow: hidden !important;
}

.payx-crypto-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 0%, rgba(96,165,250,.2), transparent 70%) !important;
    opacity: 0 !important;
    transition: .2s !important;
    pointer-events: none !important;
}

.payx-crypto-btn:hover::before,
.payx-crypto-btn:active::before {
    opacity: 1 !important;
}

.payx-crypto-btn:hover,
.payx-crypto-btn:active {
    transform: translateY(-2px) !important;
    border-color: rgba(96,165,250,.4) !important;
    background: #2a2e38 !important;
}

.payx-crypto-btn svg {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)) !important;
    position: relative !important;
    z-index: 1 !important;
    width: 28px !important;
    height: 28px !important;
}

.payx-crypto-name {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #cdd5e8 !important;
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   SECURE FOOTER
   ═══════════════════════════════════════════════════════════ */

.payx-secure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px !important;
    margin-top: 6px !important;
    font-family: inherit !important;
    font-size: 11px !important;
    color: #5b6478 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.payx-secure-icon {
    font-size: 13px !important;
    color: #34d399 !important;
}

/* ═══════════════════════════════════════════════════════════
   WD HERO (کارت مبلغ پرداخت کریپتو)
   ═══════════════════════════════════════════════════════════ */

.wd-hero {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    padding: 20px 18px 18px !important;
    margin-bottom: 14px !important;
    background: linear-gradient(155deg, #1a1d24 0%, #181b22 100%) !important;
    border: 1px solid rgba(245,196,83,.2) !important;
    box-shadow:
        0 0 0 1px rgba(245,196,83,.05) inset,
        0 20px 40px -20px rgba(245,196,83,.2) !important;
    animation: none !important;
}

.wd-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 15% !important;
    right: 15% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #f5c453, transparent) !important;
    opacity: .8 !important;
}

.wd-hero::after {
    content: '' !important;
    position: absolute !important;
    top: -50px !important;
    left: -50px !important;
    width: 140px !important;
    height: 140px !important;
    background: radial-gradient(circle, rgba(245,196,83,.12), transparent 70%) !important;
    pointer-events: none !important;
}

.wd-hero-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.wd-hero-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    color: #f5c453 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: rgba(245,196,83,.1) !important;
    border: 1px solid rgba(245,196,83,.25) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
}

.wd-hero-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    color: #f5c453 !important;
    border: none !important;
}

.wd-hero-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: inherit !important;
}

.wd-hero-title {
    position: relative !important;
    z-index: 1 !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    margin: 0 0 8px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

.wd-hero-sub {
    position: relative !important;
    z-index: 1 !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    color: #8b95a8 !important;
    line-height: 1.85 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════
   WD SECTION (فرم‌های واریز)
   ═══════════════════════════════════════════════════════════ */

.wd-section {
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    animation: none !important;
}

.wd-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #e4e7ee !important;
    margin-bottom: 12px !important;
    letter-spacing: 0 !important;
}

.wd-title .icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    flex-shrink: 0 !important;
}

.wd-title .icon svg {
    width: 15px !important;
    height: 15px !important;
    color: inherit !important;
}

.wd-input {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    color: #e4e7ee !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: .18s !important;
}

.wd-input:focus {
    border-color: rgba(245,196,83,.4) !important;
    background: #2a2e38 !important;
    box-shadow: 0 0 0 3px rgba(245,196,83,.08) !important;
}

.wd-input::placeholder {
    color: #5b6478 !important;
    font-weight: 500 !important;
}

.wd-input.amount-input {
    font-family: inherit !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    letter-spacing: -.3px !important;
    text-align: center !important;
    color: #f5c453 !important;
    padding: 16px 14px !important;
    background: #252932 !important;
    text-shadow: 0 0 16px rgba(245,196,83,.25) !important;
}

.wd-input.amount-input::placeholder {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #5b6478 !important;
    text-shadow: none !important;
}

.wd-input.wd-address {
    font-family: monospace !important;
    direction: ltr !important;
    font-size: 12px !important;
    letter-spacing: .3px !important;
    color: #a8afc0 !important;
}

.wd-submit {
    width: 100% !important;
    margin-top: 10px !important;
    padding: 14px 16px !important;
    border-radius: 13px !important;
    border: none !important;
    cursor: pointer !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 12px 28px -10px rgba(245,196,83,.4) !important;
    transition: .18s !important;
    animation: none !important;
}

.wd-submit:hover,
.wd-submit:active {
    background: #e0b13e !important;
    transform: scale(.98) !important;
    box-shadow: 0 8px 20px -8px rgba(245,196,83,.5) !important;
}

.wd-submit svg {
    color: #1a1d24 !important;
    width: 16px !important;
    height: 16px !important;
}

/* ═══════════════════════════════════════════════════════════
   DM METHOD (انتخاب روش واریز)
   ═══════════════════════════════════════════════════════════ */

.dm-method {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    text-align: right !important;
    cursor: pointer !important;
    font-family: inherit !important;
    border-radius: 18px !important;
    padding: 18px 16px !important;
    margin-bottom: 10px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    transition: all .2s !important;
    animation: none !important;
}

.dm-method:hover,
.dm-method:active {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 36px -18px rgba(15,17,23,.5) !important;
}

.dm-method-icon {
    flex-shrink: 0 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    position: relative !important;
    overflow: hidden !important;
}

.dm-method-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.dm-method-title {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 14.5px !important;
    margin-bottom: 5px !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.dm-method-sub {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
}

.dm-method-arrow {
    flex-shrink: 0 !important;
    font-size: 18px !important;
    color: #8b95a8 !important;
    transition: .18s !important;
}

.dm-method:hover .dm-method-arrow {
    color: #f5c453 !important;
    transform: translateX(-2px) !important;
}

/* کارت به کارت (درگاه) */
.dm-method.dm-gateway {
    background: linear-gradient(155deg, #1f1a10, #1a1710) !important;
    border-color: rgba(245,196,83,.25) !important;
    box-shadow:
        0 0 0 1px rgba(245,196,83,.05) inset,
        0 12px 32px -16px rgba(245,196,83,.3) !important;
    padding: 22px 18px !important;
    position: relative !important;
    overflow: hidden !important;
}

.dm-method.dm-gateway::before {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 140px !important;
    height: 140px !important;
    background: radial-gradient(circle, rgba(245,196,83,.18), transparent 70%) !important;
    pointer-events: none !important;
}

.dm-method.dm-gateway::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #f5c453, transparent) !important;
    opacity: .8 !important;
}

.dm-method.dm-gateway .dm-method-icon {
    background: radial-gradient(circle at 30% 25%, rgba(245,196,83,.35), rgba(245,196,83,.1)) !important;
    border: 1px solid rgba(245,196,83,.4) !important;
    color: #f5c453 !important;
    box-shadow: 0 8px 20px -8px rgba(245,196,83,.4) !important;
}

/* کریپتو */
.dm-method.dm-crypto {
    background: linear-gradient(155deg, #1a1d24, #181b22) !important;
    border-color: rgba(96,165,250,.18) !important;
}

.dm-method.dm-crypto .dm-method-icon {
    background: radial-gradient(circle at 30% 25%, rgba(96,165,250,.25), rgba(96,165,250,.08)) !important;
    border: 1px solid rgba(96,165,250,.3) !important;
    color: #60a5fa !important;
}

.dm-method.dm-crypto .dm-method-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
}


/* ═══════════════════════════════════════════════════════════
   PAY HERO (کارت مبلغ پرداخت)
   ═══════════════════════════════════════════════════════════ */

.pay-hero {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    padding: 20px 18px 18px !important;
    margin-bottom: 14px !important;
    background: linear-gradient(155deg, #1a1d24 0%, #181b22 100%) !important;
    border: 1px solid rgba(245,196,83,.2) !important;
    box-shadow:
        0 0 0 1px rgba(245,196,83,.05) inset,
        0 20px 40px -20px rgba(245,196,83,.2) !important;
    animation: none !important;
}

.pay-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 15% !important;
    right: 15% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #f5c453, transparent) !important;
    opacity: .8 !important;
}

.pay-hero::after {
    content: '' !important;
    position: absolute !important;
    top: -50px !important;
    right: -50px !important;
    width: 140px !important;
    height: 140px !important;
    background: radial-gradient(circle, rgba(245,196,83,.12), transparent 70%) !important;
    pointer-events: none !important;
}

.pay-hero-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
    position: relative !important;
    z-index: 1 !important;
}

.pay-hero-label {
    font-family: inherit !important;
    font-size: 10.5px !important;
    color: #8b95a8 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.pay-hero-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
}

.pay-hero-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: inherit !important;
}

.pay-hero-name {
    position: relative !important;
    z-index: 1 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #a8afc0 !important;
    margin: 2px 0 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
}

.pay-hero-amount {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    direction: rtl !important;
    margin-bottom: 14px !important;
}

.pay-hero-amount .num {
    font-family: inherit !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -.5px !important;
    line-height: 1 !important;
    background: none !important;
    -webkit-text-fill-color: #f5c453 !important;
    color: #f5c453 !important;
    text-shadow: 0 0 24px rgba(245,196,83,.4) !important;
    font-variant-numeric: tabular-nums !important;
}

.pay-hero-amount .unit {
    font-family: inherit !important;
    font-size: 12.5px !important;
    color: #8b95a8 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.pay-hero-code {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(245,196,83,.15) !important;
    font-family: inherit !important;
    font-size: 11px !important;
    color: #8b95a8 !important;
    font-weight: 500 !important;
}

.pay-hero-code b {
    color: #a8afc0 !important;
    font-family: monospace !important;
    font-weight: 800 !important;
    direction: ltr !important;
    letter-spacing: .3px !important;
    font-size: 10px !important;
}

.pay-hero-code span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* ═══════════════════════════════════════════════════════════
   PAY SECTION
   ═══════════════════════════════════════════════════════════ */

.pay-section {
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    animation: none !important;
}

.pay-section-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #e4e7ee !important;
    margin-bottom: 12px !important;
    letter-spacing: 0 !important;
}

.pay-section-title .icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,196,83,.12) !important;
    border: none !important;
    color: #f5c453 !important;
    flex-shrink: 0 !important;
}

.pay-section-title .icon svg {
    width: 15px !important;
    height: 15px !important;
    color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════
   ADDRESS BOX
   ═══════════════════════════════════════════════════════════ */

.pay-address-input {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 12px !important;
    padding: 4px 4px 4px 12px !important;
    margin-top: 6px !important;
}

.pay-address-input input {
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #a8afc0 !important;
    font-size: 12px !important;
    font-family: monospace !important;
    direction: ltr !important;
    padding: 9px 0 !important;
    letter-spacing: .3px !important;
}

.pay-copy-btn {
    padding: 9px 12px !important;
    border-radius: 9px !important;
    border: none !important;
    cursor: pointer !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    letter-spacing: 0 !important;
    transition: .18s !important;
    white-space: nowrap !important;
}

.pay-copy-btn:hover,
.pay-copy-btn:active {
    background: #e0b13e !important;
    transform: scale(.96) !important;
}

.pay-copy-btn svg {
    color: #1a1d24 !important;
    width: 13px !important;
    height: 13px !important;
}

/* ═══════════════════════════════════════════════════════════
   STATUS
   ═══════════════════════════════════════════════════════════ */

.pay-status {
    margin-top: 10px !important;
    padding: 13px 14px !important;
    border-radius: 13px !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    border: 1px solid transparent !important;
    transition: .2s !important;
    line-height: 1.5 !important;
}

.pay-status svg {
    flex-shrink: 0 !important;
    width: 17px !important;
    height: 17px !important;
}

.pay-status small {
    display: block !important;
    font-weight: 500 !important;
    font-size: 10.5px !important;
    margin-top: 3px !important;
    opacity: .85 !important;
    line-height: 1.55 !important;
}

.pay-status.status-box {
    background: #252932 !important;
    border-color: rgba(255,255,255,.05) !important;
    color: #a8afc0 !important;
}

.pay-status.status-checking {
    background: rgba(245,196,83,.1) !important;
    border-color: rgba(245,196,83,.3) !important;
    color: #f5c453 !important;
}

.pay-status.status-checking svg {
    animation: paySpinner 1.5s linear infinite !important;
}

@keyframes paySpinner {
    to { transform: rotate(360deg); }
}

.pay-status.status-success {
    background: rgba(52,211,153,.1) !important;
    border-color: rgba(52,211,153,.3) !important;
    color: #34d399 !important;
}

.pay-status.status-error {
    background: rgba(248,113,113,.1) !important;
    border-color: rgba(248,113,113,.3) !important;
    color: #f87171 !important;
}

/* ═══════════════════════════════════════════════════════════
   PAY SUBMIT BTN
   ═══════════════════════════════════════════════════════════ */

.pay-submit-btn {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 14px 16px !important;
    border-radius: 13px !important;
    border: none !important;
    cursor: pointer !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 12px 28px -10px rgba(245,196,83,.4) !important;
    transition: .18s !important;
    animation: none !important;
}

.pay-submit-btn:hover,
.pay-submit-btn:active {
    background: #e0b13e !important;
    transform: scale(.98) !important;
}

.pay-submit-btn svg {
    color: #1a1d24 !important;
    width: 16px !important;
    height: 16px !important;
}

/* ═══════════════════════════════════════════════════════════
   PAYMENT BOX + CURRENCY
   ═══════════════════════════════════════════════════════════ */

.payment-box {
    padding: 20px !important;
    border-radius: 18px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    margin-bottom: 12px !important;
    position: relative !important;
    overflow: hidden !important;
}

.payment-box::before {
    display: none !important;
}

.payment-title {
    display: block !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.payment-amount {
    display: block !important;
    margin: 8px 0 4px !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    font-size: 28px !important;
    letter-spacing: -.5px !important;
    color: #f5c453 !important;
    text-shadow: 0 0 20px rgba(245,196,83,.3) !important;
    direction: rtl !important;
    font-variant-numeric: tabular-nums !important;
}

.payment-currency {
    display: block !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.payment-address {
    margin-top: 16px !important;
}

.address-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.address-box input {
    min-width: 0 !important;
    flex: 1 !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 12px !important;
    background: #252932 !important;
    color: #a8afc0 !important;
    direction: ltr !important;
    font-size: 11px !important;
    font-family: monospace !important;
    letter-spacing: .3px !important;
    outline: none !important;
}

.copy-btn {
    padding: 12px 14px !important;
    border: none !important;
    border-radius: 12px !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
    transition: .18s !important;
    letter-spacing: 0 !important;
}

.copy-btn:hover,
.copy-btn:active {
    background: #e0b13e !important;
    transform: scale(.96) !important;
}

/* شبکه ارزها */
.currency-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.currency-btn {
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 13px !important;
    background: #252932 !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all .18s !important;
    position: relative !important;
    overflow: hidden !important;
}

.currency-btn:hover,
.currency-btn:active {
    background: #2a2e38 !important;
    border-color: rgba(245,196,83,.3) !important;
    transform: translateY(-1px) !important;
}

.currency-btn.active {
    border-color: rgba(245,196,83,.4) !important;
    background: rgba(245,196,83,.08) !important;
    color: #f5c453 !important;
}

.currency-btn.active::after {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #f5c453 !important;
    box-shadow: 0 0 8px rgba(245,196,83,.8) !important;
}

.currency-btn svg {
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   PRIMARY / SECONDARY BTN
   ═══════════════════════════════════════════════════════════ */

.primary-btn {
    width: 100% !important;
    padding: 14px 16px !important;
    border: none !important;
    border-radius: 13px !important;
    background: #f5c453 !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 28px -10px rgba(245,196,83,.4) !important;
    transition: .18s !important;
}

.primary-btn:hover,
.primary-btn:active {
    background: #e0b13e !important;
    transform: scale(.98) !important;
}

.secondary-btn {
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 13px !important;
    background: #252932 !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: .18s !important;
}

.secondary-btn:hover,
.secondary-btn:active {
    background: #2a2e38 !important;
    border-color: rgba(245,196,83,.3) !important;
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   ORDER CODE
   ═══════════════════════════════════════════════════════════ */

.order-code {
    display: inline-block !important;
    direction: ltr !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    background: #252932 !important;
    border: 1px dashed rgba(245,196,83,.2) !important;
    color: #f5c453 !important;
    font-size: 11px !important;
    font-family: monospace !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
}

/* ═══════════════════════════════════════════════════════════
   STATUS BOX (قدیمی - برای سازگاری)
   ═══════════════════════════════════════════════════════════ */

.status-box {
    padding: 16px !important;
    border-radius: 14px !important;
    background: #252932 !important;
    margin: 14px 0 !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.05) !important;
}

.status-box::before {
    content: '' !important;
    position: absolute !important;
    top: 10px !important;
    bottom: 10px !important;
    right: 0 !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #8b95a8 !important;
}

.status-checking {
    color: #f5c453 !important;
}

.status-checking::before {
    background: #f5c453 !important;
}

.status-success {
    color: #34d399 !important;
}

.status-success::before {
    background: #34d399 !important;
}

.status-error {
    color: #f87171 !important;
}

.status-error::before {
    background: #f87171 !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */

.app:has(.payx-order-card) .bottom-nav,
.app:has(.pay-hero) .bottom-nav,
.app:has(.wd-hero) .bottom-nav,
.app:has(.dm-method) .bottom-nav,
.app:has(.payment-box) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app:has(.payx-order-card) .bottom-nav::before,
.app:has(.payx-order-card) .bottom-nav::after,
.app:has(.pay-hero) .bottom-nav::before,
.app:has(.pay-hero) .bottom-nav::after,
.app:has(.wd-hero) .bottom-nav::before,
.app:has(.wd-hero) .bottom-nav::after,
.app:has(.dm-method) .bottom-nav::before,
.app:has(.dm-method) .bottom-nav::after,
.app:has(.payment-box) .bottom-nav::before,
.app:has(.payment-box) .bottom-nav::after {
    display: none !important;
}

.app:has(.payx-order-card) .nav-item,
.app:has(.pay-hero) .nav-item,
.app:has(.wd-hero) .nav-item,
.app:has(.dm-method) .nav-item,
.app:has(.payment-box) .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app:has(.payx-order-card) .nav-item .nav-icon svg,
.app:has(.pay-hero) .nav-item .nav-icon svg,
.app:has(.wd-hero) .nav-item .nav-icon svg,
.app:has(.dm-method) .nav-item .nav-icon svg,
.app:has(.payment-box) .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
    transition: .18s !important;
}

.app:has(.payx-order-card) .nav-item small,
.app:has(.pay-hero) .nav-item small,
.app:has(.wd-hero) .nav-item small,
.app:has(.dm-method) .nav-item small,
.app:has(.payment-box) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.app:has(.payx-order-card) .nav-item.active,
.app:has(.pay-hero) .nav-item.active,
.app:has(.wd-hero) .nav-item.active,
.app:has(.dm-method) .nav-item.active,
.app:has(.payment-box) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.payx-order-card) .nav-item.active::after,
.app:has(.pay-hero) .nav-item.active::after,
.app:has(.wd-hero) .nav-item.active::after,
.app:has(.dm-method) .nav-item.active::after,
.app:has(.payment-box) .nav-item.active::after {
    display: none !important;
}

.app:has(.payx-order-card) .nav-item.active .nav-icon svg,
.app:has(.pay-hero) .nav-item.active .nav-icon svg,
.app:has(.wd-hero) .nav-item.active .nav-icon svg,
.app:has(.dm-method) .nav-item.active .nav-icon svg,
.app:has(.payment-box) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

.app:has(.payx-order-card) .nav-item.active small,
.app:has(.pay-hero) .nav-item.active small,
.app:has(.wd-hero) .nav-item.active small,
.app:has(.dm-method) .nav-item.active small,
.app:has(.payment-box) .nav-item.active small {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

.app:has(.payx-order-card) ::-webkit-scrollbar,
.app:has(.pay-hero) ::-webkit-scrollbar,
.app:has(.wd-hero) ::-webkit-scrollbar,
.app:has(.dm-method) ::-webkit-scrollbar,
.app:has(.payment-box) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.app:has(.payx-order-card) ::-webkit-scrollbar-thumb,
.app:has(.pay-hero) ::-webkit-scrollbar-thumb,
.app:has(.wd-hero) ::-webkit-scrollbar-thumb,
.app:has(.dm-method) ::-webkit-scrollbar-thumb,
.app:has(.payment-box) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: custompack-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   🎁 CUSTOM PACK — Hunter Vibrant Style
   ========================================================= */

/* ═══ پس‌زمینه با گرادیانت ظریف ═══ */
body:has(.cp-hero),
.app:has(.cp-hero) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
    position: relative;
}

body:has(.cp-hero)::before,
.app:has(.cp-hero)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(52,211,153,.08), transparent 45%),
        radial-gradient(circle at 85% 100%, rgba(96,165,250,.06), transparent 50%) !important;
}

/* ═══ هدر ═══ */
.app:has(.cp-hero) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
}

.app:has(.cp-hero) .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.cp-hero) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.cp-hero) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* ═══════════════════════════════════════════════════════════
   CP HERO
   با گلوی سبز + خط بالای کارت
   ═══════════════════════════════════════════════════════════ */

.cp-hero {
    background: linear-gradient(155deg, #161a26 0%, #141a20 100%) !important;
    border: 1px solid rgba(52,211,153,.22) !important;
    border-radius: 20px !important;
    box-shadow:
        0 0 0 1px rgba(52,211,153,.05) inset,
        0 20px 40px -20px rgba(52,211,153,.2) !important;
    padding: 20px 18px 18px !important;
    margin-bottom: 14px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: none !important;
}

.cp-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #34d399, transparent) !important;
    opacity: .8 !important;
}

.cp-hero::after {
    content: '' !important;
    position: absolute !important;
    top: -50px !important;
    right: -50px !important;
    width: 150px !important;
    height: 150px !important;
    background: radial-gradient(circle, rgba(52,211,153,.15), transparent 70%) !important;
    pointer-events: none !important;
}

.cp-hero-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: radial-gradient(circle at 30% 25%, rgba(52,211,153,.35), rgba(52,211,153,.1)) !important;
    border: 1px solid rgba(52,211,153,.4) !important;
    color: #34d399 !important;
    box-shadow: 0 10px 24px -10px rgba(52,211,153,.5), inset 0 0 20px rgba(52,211,153,.15) !important;
    overflow: hidden !important;
    animation: none !important;
    margin-bottom: 14px !important;
}

.cp-hero-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: -50% !important;
    background: conic-gradient(from 0deg, transparent, rgba(52,211,153,.4), transparent 30%) !important;
    animation: cpHeroSpin 5s linear infinite !important;
    pointer-events: none !important;
}

.cp-hero-icon svg {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    width: 26px !important;
    height: 26px !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)) !important;
}

@keyframes cpHeroSpin {
    to { transform: rotate(360deg); }
}

.cp-hero h3 {
    position: relative !important;
    z-index: 1 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 19px !important;
    letter-spacing: 0 !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
}

.cp-hero p {
    position: relative !important;
    z-index: 1 !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 12.5px !important;
    line-height: 1.85 !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   CP INFO BAR
   ═══════════════════════════════════════════════════════════ */

.cp-info-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    background: linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1px solid rgba(52,211,153,.2) !important;
    color: #34d399 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.cp-info-bar::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: -20px !important;
    width: 80px !important;
    height: 80px !important;
    background: radial-gradient(circle, rgba(52,211,153,.12), transparent 70%) !important;
    pointer-events: none !important;
}

.cp-info-bar small {
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    position: relative !important;
    z-index: 1 !important;
}

.cp-info-bar span {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ═══════════════════════════════════════════════════════════
   CP ITEM (آیتم‌های پک)
   با نوار رنگی چرخشی
   ═══════════════════════════════════════════════════════════ */

.cp-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-bottom: 150px !important;
    position: relative !important;
    z-index: 1 !important;
}

.cp-item {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1.5px solid rgba(255,255,255,.06) !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    animation: none !important;
}

.cp-item::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    bottom: 12px !important;
    right: 0 !important;
    left: auto !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #5b6478 !important;
    opacity: .5 !important;
    transition: .2s !important;
}

.cp-item:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(255,255,255,.12) !important;
    background: linear-gradient(155deg, #1e2128, #1c1f27) !important;
}

.cp-item:hover::before {
    background: #34d399 !important;
    opacity: 1 !important;
}

.cp-item.selected {
    border-color: rgba(52,211,153,.5) !important;
    background: linear-gradient(155deg, rgba(52,211,153,.08), rgba(52,211,153,.03)) !important;
    box-shadow:
        0 0 0 3px rgba(52,211,153,.08),
        0 12px 28px -14px rgba(52,211,153,.35) !important;
}

.cp-item.selected::before {
    background: #34d399 !important;
    opacity: 1 !important;
}

/* چک‌باکس */
.cp-item-check {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #252932 !important;
    border: 2px solid rgba(255,255,255,.1) !important;
    color: transparent !important;
    transition: all .2s !important;
    flex-shrink: 0 !important;
}

.cp-item-check svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 3 !important;
    transition: .2s !important;
}

.cp-item.selected .cp-item-check {
    background: #34d399 !important;
    border-color: #34d399 !important;
    color: #1a1d24 !important;
    box-shadow: 0 4px 12px -4px rgba(52,211,153,.6) !important;
    transform: scale(1.05) !important;
}

/* آیکون */
.cp-item-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    background: radial-gradient(circle at 30% 25%, rgba(96,165,250,.2), rgba(96,165,250,.06)) !important;
    border: 1px solid rgba(96,165,250,.25) !important;
    color: #60a5fa !important;
    transition: .25s !important;
    flex-shrink: 0 !important;
}

.cp-item-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: inherit !important;
}

.cp-item.selected .cp-item-icon {
    background: radial-gradient(circle at 30% 25%, rgba(52,211,153,.3), rgba(52,211,153,.1)) !important;
    border-color: rgba(52,211,153,.4) !important;
    color: #34d399 !important;
    transform: scale(1.05) !important;
}

/* متن */
.cp-item-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.cp-item-body h4 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.cp-item-body p {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* قیمت */
.cp-item-price {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f5c453 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    direction: rtl !important;
    flex-shrink: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums !important;
}

.cp-item-price small {
    display: block !important;
    font-size: 9.5px !important;
    color: #8b95a8 !important;
    font-weight: 500 !important;
    margin-top: 3px !important;
}


/* ═══════════════════════════════════════════════════════════
   CP FOOTER FIXED (فوتر ثابت پایین)
   با گلوی سبز + خط بالای کارت
   ═══════════════════════════════════════════════════════════ */

.cp-footer-fixed {
    position: fixed !important;
    bottom: 84px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: calc(600px - 24px) !important;
    margin-inline: auto !important;
    padding: 14px 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #181d28 0%, #141a20 100%) !important;
    border: 1.5px solid rgba(52,211,153,.35) !important;
    box-shadow: 0 0 0 1px rgba(52,211,153,.08) inset,
        0 20px 50px -20px rgba(15,17,23,.7),
        0 20px 50px -20px rgba(52,211,153,.25) !important;
    z-index: 50 !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    animation: cpfSlideUp .35s cubic-bezier(.3, 1.2, .4, 1) both !important;
    overflow: hidden !important;
}

.cp-footer-fixed::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 25% !important;
    right: 25% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #34d399, transparent) !important;
    opacity: .8 !important;
}

.cp-footer-fixed::after {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 100px !important;
    height: 100px !important;
    background: radial-gradient(circle, rgba(52,211,153,.15), transparent 70%) !important;
    pointer-events: none !important;
}

@keyframes cpfSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cp-footer-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
    gap: 10px !important;
}

.cp-footer-label {
    font-family: inherit !important;
    font-weight: 600 !important;
    color: #8b95a8 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

.cp-footer-label b {
    display: block !important;
    color: #34d399 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    margin-top: 3px !important;
}

.cp-footer-total {
    font-family: inherit !important;
    font-weight: 900 !important;
    color: #f5c453 !important;
    font-size: 22px !important;
    letter-spacing: -.3px !important;
    direction: rtl !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    text-shadow: 0 0 20px rgba(245,196,83,.4) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

.cp-footer-total small {
    font-size: 11px !important;
    color: #8b95a8 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}

/* دکمه پرداخت */
.cp-submit-btn {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 13px !important;
    border: none !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #34d399, #22c55e) !important;
    color: #052a1a !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow:
        0 12px 28px -10px rgba(52,211,153,.5),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
    transition: all .18s !important;
    animation: none !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.cp-submit-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent) !important;
    animation: cpfShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes cpfShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.cp-submit-btn:hover:not(:disabled),
.cp-submit-btn:active:not(:disabled) {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    transform: scale(.98) !important;
    box-shadow:
        0 8px 20px -8px rgba(52,211,153,.6),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
}

.cp-submit-btn:disabled {
    background: linear-gradient(135deg, #252932, #1f232b) !important;
    color: #5b6478 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: .7 !important;
}

.cp-submit-btn:disabled::before {
    display: none !important;
}

.cp-submit-btn svg {
    color: inherit !important;
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   CP EMPTY
   ═══════════════════════════════════════════════════════════ */

.app:has(.cp-hero) .cp-empty {
    text-align: center !important;
    padding: 56px 24px !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    background: #1a1d24 !important;
    border: 1px dashed rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    margin: 4px 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.app:has(.cp-hero) .cp-empty .em {
    display: block !important;
    font-size: 48px !important;
    margin-bottom: 14px !important;
    opacity: .6 !important;
    color: #34d399 !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */

.app:has(.cp-hero) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app:has(.cp-hero) .bottom-nav::before,
.app:has(.cp-hero) .bottom-nav::after {
    display: none !important;
}

.app:has(.cp-hero) .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app:has(.cp-hero) .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
    transition: .18s !important;
}

.app:has(.cp-hero) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.app:has(.cp-hero) .nav-item:hover {
    color: #8b95a8 !important;
}

.app:has(.cp-hero) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.cp-hero) .nav-item.active::after {
    display: none !important;
}

.app:has(.cp-hero) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

.app:has(.cp-hero) .nav-item.active small {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

.app:has(.cp-hero) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.app:has(.cp-hero) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}

.app:has(.cp-hero) ::-webkit-scrollbar-track {
    background: transparent !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: purchases-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   📦 PURCHASES — Hunter Vibrant Style
   ========================================================= */

body:has(.pc-card),
body:has(.empty-state),
.app:has(.pc-card),
.app:has(.empty-state) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
    position: relative;
}

body:has(.pc-card)::before,
.app:has(.pc-card)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(96,165,250,.06), transparent 45%),
        radial-gradient(circle at 85% 100%, rgba(245,196,83,.05), transparent 50%) !important;
}

.app:has(.pc-card) .page-header,
.app:has(.empty-state) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
}

.app:has(.pc-card) .page-header h2,
.app:has(.empty-state) .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.pc-card) .page-header .back-button,
.app:has(.empty-state) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.pc-card) .page-header .back-button:hover,
.app:has(.empty-state) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

.pc-card {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    transition: all .2s ease !important;
    z-index: 1 !important;
}

.pc-card::before {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    bottom: 14px !important;
    right: 0 !important;
    left: auto !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #f5c453 !important;
    opacity: .6 !important;
}

.pc-card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(255,255,255,.12) !important;
    background: linear-gradient(155deg, #1e2128, #1c1f27) !important;
}

.pc-card:hover::before {
    opacity: 1 !important;
}

.pc-card::after {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    left: -40px !important;
    width: 100px !important;
    height: 100px !important;
    background: radial-gradient(circle, rgba(245,196,83,.08), transparent 70%) !important;
    pointer-events: none !important;
}

.pc-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.pc-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    background: radial-gradient(circle at 30% 25%, rgba(245,196,83,.22), rgba(245,196,83,.06)) !important;
    border: 1px solid rgba(245,196,83,.28) !important;
    color: #f5c453 !important;
    flex-shrink: 0 !important;
}

.pc-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.pc-title {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    margin: 0 0 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pc-type-chip {
    display: inline-block !important;
    padding: 3px 9px !important;
    border-radius: 7px !important;
    background: rgba(96,165,250,.12) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(96,165,250,.25) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.pc-price {
    font-family: inherit !important;
    font-weight: 900 !important;
    color: #34d399 !important;
    font-size: 14px !important;
    letter-spacing: -.2px !important;
    direction: rtl !important;
    flex-shrink: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 0 14px rgba(52,211,153,.3) !important;
}

.pc-price small {
    font-size: 10px !important;
    color: #8b95a8 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    margin-right: 2px !important;
}

.pc-items-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.pc-item-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    background: #252932 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    color: #a8afc0 !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.pc-meta-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 10px !important;
    margin-bottom: 4px !important;
    position: relative !important;
    z-index: 1 !important;
}

.pc-meta-grid span {
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
}

.pc-meta-grid .order-code {
    color: #f5c453 !important;
    font-family: monospace !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    letter-spacing: .3px !important;
    direction: ltr !important;
}

.pc-hash {
    color: #5b6478 !important;
    font-family: monospace !important;
    font-size: 9.5px !important;
    margin: 6px 0 0 !important;
    direction: ltr !important;
    word-break: break-all !important;
    position: relative !important;
    z-index: 1 !important;
}


/* ═══════════════════════════════════════════════════════════
   PC VIDEO BOX (باکس ویدیو)
   ═══════════════════════════════════════════════════════════ */

.pc-video-box {
    margin-top: 12px !important;
    border-radius: 14px !important;
    padding: 13px 14px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.pc-video-active {
    background: linear-gradient(155deg, rgba(52,211,153,.1), rgba(52,211,153,.03)) !important;
    border: 1px solid rgba(52,211,153,.28) !important;
    position: relative !important;
}

.pc-video-active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #34d399, transparent) !important;
    opacity: .7 !important;
}

.pc-video-countdown {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 1 !important;
}

.pc-video-countdown span {
    font-family: inherit !important;
    font-size: 11px !important;
    color: #a8afc0 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.pc-video-countdown b {
    font-family: inherit !important;
    font-size: 14px !important;
    color: #34d399 !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
    direction: ltr !important;
    text-shadow: 0 0 12px rgba(52,211,153,.4) !important;
}

.pc-video-btn {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #34d399, #22c55e) !important;
    color: #052a1a !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow:
        0 10px 24px -10px rgba(52,211,153,.5),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
    transition: all .18s !important;
    position: relative !important;
    z-index: 1 !important;
}

.pc-video-btn:hover,
.pc-video-btn:active {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    transform: scale(.97) !important;
}

/* باکس تخفیف */
.pc-discount-box {
    background: linear-gradient(155deg, rgba(245,196,83,.1), rgba(245,196,83,.03)) !important;
    border: 1px solid rgba(245,196,83,.3) !important;
    position: relative !important;
}

.pc-discount-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #f5c453, transparent) !important;
    opacity: .7 !important;
}

.pc-discount-title {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f5c453 !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.pc-discount-sub {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #a8afc0 !important;
    font-size: 11px !important;
    line-height: 1.7 !important;
    margin: 0 0 11px !important;
    position: relative !important;
    z-index: 1 !important;
}

.pc-discount-btn {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #f5c453, #e0b13e) !important;
    color: #1a1d24 !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow:
        0 10px 24px -10px rgba(245,196,83,.5),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
    transition: all .18s !important;
    position: relative !important;
    z-index: 1 !important;
}

.pc-discount-btn:hover,
.pc-discount-btn:active {
    background: linear-gradient(135deg, #e0b13e, #c99a2c) !important;
    transform: scale(.97) !important;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */

.app:has(.pc-card) .empty-state,
.app:has(.empty-state) .empty-state {
    text-align: center !important;
    padding: 56px 24px !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    background: #1a1d24 !important;
    border: 1px dashed rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    position: relative !important;
    z-index: 1 !important;
}

.app:has(.pc-card) .empty-state .emoji,
.app:has(.empty-state) .empty-state .emoji {
    display: block !important;
    font-size: 48px !important;
    margin-bottom: 14px !important;
    opacity: .55 !important;
    color: #f5c453 !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */

.app:has(.pc-card) .bottom-nav,
.app:has(.empty-state) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app:has(.pc-card) .bottom-nav::before,
.app:has(.pc-card) .bottom-nav::after,
.app:has(.empty-state) .bottom-nav::before,
.app:has(.empty-state) .bottom-nav::after {
    display: none !important;
}

.app:has(.pc-card) .nav-item,
.app:has(.empty-state) .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app:has(.pc-card) .nav-item .nav-icon svg,
.app:has(.empty-state) .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
    transition: .18s !important;
}

.app:has(.pc-card) .nav-item small,
.app:has(.empty-state) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.app:has(.pc-card) .nav-item:hover,
.app:has(.empty-state) .nav-item:hover {
    color: #8b95a8 !important;
}

.app:has(.pc-card) .nav-item.active,
.app:has(.empty-state) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.pc-card) .nav-item.active::after,
.app:has(.empty-state) .nav-item.active::after {
    display: none !important;
}

.app:has(.pc-card) .nav-item.active .nav-icon svg,
.app:has(.empty-state) .nav-item.active .nav-icon svg {
    filter: none !important;
    transform: none !important;
    color: #f5c453 !important;
}

.app:has(.pc-card) .nav-item.active small,
.app:has(.empty-state) .nav-item.active small {
    color: #f5c453 !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

.app:has(.pc-card) ::-webkit-scrollbar,
.app:has(.empty-state) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.app:has(.pc-card) ::-webkit-scrollbar-thumb,
.app:has(.empty-state) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}

.app:has(.pc-card) ::-webkit-scrollbar-track,
.app:has(.empty-state) ::-webkit-scrollbar-track {
    background: transparent !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: watchlist-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   ❤️ WATCHLIST — Hunter Style
   ========================================================= */

/* ═══ پس‌زمینه ═══ */
body:has(.wl-page),
body.wl-page {
    background: #0f1117 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

.app.wl-page {
    background: #0f1117 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    position: relative !important;
}

.app.wl-page::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(239,68,68,.06), transparent 45%),
        radial-gradient(circle at 85% 100%, rgba(236,72,153,.05), transparent 50%) !important;
}

/* ═══ هدر ═══ */
.app.wl-page .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
}

.app.wl-page .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app.wl-page .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app.wl-page .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* ═══ MVX HEAD ═══ */
.app.wl-page .mvx-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 4px 2px 14px !important;
    padding: 0 !important;
    border: none !important;
}

.app.wl-page .mvx-head h3 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.app.wl-page .mvx-head-bar {
    background: linear-gradient(180deg, #ef4444, #ec4899) !important;
    box-shadow: 0 0 12px rgba(239,68,68,.6) !important;
    width: 3px !important;
    height: 16px !important;
    border-radius: 2px !important;
}

.app.wl-page .mvx-head-count {
    background: rgba(239,68,68,.12) !important;
    border: 1px solid rgba(239,68,68,.3) !important;
    color: #f87171 !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    padding: 4px 9px !important;
    letter-spacing: 0 !important;
}

/* ═══ EMPTY STATE ═══ */
.app.wl-page .mv-fx-empty {
    text-align: center !important;
    padding: 60px 24px !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(239,68,68,.05), transparent 60%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1.5px dashed rgba(239,68,68,.2) !important;
    border-radius: 18px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    margin-top: 20px !important;
}

.app.wl-page .mv-fx-empty .em {
    display: block !important;
    font-size: 52px !important;
    margin-bottom: 16px !important;
    opacity: .8 !important;
    animation: wlHeartBeat 1.8s ease-in-out infinite !important;
    filter: drop-shadow(0 0 20px rgba(239,68,68,.6)) !important;
}

@keyframes wlHeartBeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.1); }
    60% { transform: scale(1); }
}

.app.wl-page .mv-fx-empty h4 {
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
}

.app.wl-page .mv-fx-empty p {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    font-size: 12px !important;
    line-height: 1.85 !important;
    margin: 0 !important;
}

/* ═══ WATCHLIST CARD ═══ */
.app.wl-page .mv-fx-card {
    background:
        radial-gradient(circle at 15% 0%, rgba(239,68,68,.04), transparent 50%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1px solid rgba(239,68,68,.12) !important;
    transition: all .25s ease !important;
}

.app.wl-page .mv-fx-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(239,68,68,.3) !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(239,68,68,.08), transparent 50%),
        linear-gradient(155deg, #1e2128, #1c1f27) !important;
    box-shadow:
        0 20px 40px -20px rgba(239,68,68,.35),
        0 0 0 1px rgba(239,68,68,.08) inset !important;
}

.app.wl-page .wl-heart-btn {
    background: rgba(15,17,23,.85) !important;
    border: 1.5px solid rgba(239,68,68,.3) !important;
    color: #f87171 !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    box-shadow:
        0 4px 12px -4px rgba(0,0,0,.6),
        0 0 16px -4px rgba(239,68,68,.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.app.wl-page .wl-heart-btn.active {
    background:
        radial-gradient(circle at 30% 25%, rgba(239,68,68,.5), rgba(236,72,153,.35)) !important;
    border-color: rgba(239,68,68,.7) !important;
    color: #fff !important;
    box-shadow:
        0 0 20px rgba(239,68,68,.6),
        0 0 40px -10px rgba(236,72,153,.5),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
    animation: wlPulseAnim 1.8s ease-in-out infinite !important;
}

@keyframes wlPulseAnim {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(239,68,68,.6),
            0 0 40px -10px rgba(236,72,153,.5),
            inset 0 1px 0 rgba(255,255,255,.2);
    }
    50% {
        box-shadow:
            0 0 30px rgba(239,68,68,.9),
            0 0 60px -10px rgba(236,72,153,.8),
            inset 0 1px 0 rgba(255,255,255,.3);
    }
}

.app.wl-page .mv-fx-thumb {
    background:
        radial-gradient(circle at 30% 25%, rgba(239,68,68,.18), rgba(239,68,68,.04)) !important;
    border: 1px solid rgba(239,68,68,.15) !important;
}

.app.wl-page .mv-fx-new-badge {
    background: linear-gradient(135deg, #ef4444, #ec4899) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -4px rgba(239,68,68,.5) !important;
}

.app.wl-page .mv-fx-price {
    color: #f5c453 !important;
}

.app.wl-page .mv-fx-title {
    color: #f0f2f7 !important;
}

/* ═══ BOTTOM NAV ═══ */
.app.wl-page .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app.wl-page .bottom-nav::before,
.app.wl-page .bottom-nav::after {
    display: none !important;
}

.app.wl-page .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app.wl-page .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
}

.app.wl-page .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
}

.app.wl-page .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
}

.app.wl-page .nav-item.active::after {
    display: none !important;
}

.app.wl-page .nav-item.active .nav-icon svg {
    color: #f5c453 !important;
    filter: none !important;
}

.app.wl-page .nav-item.active small {
    color: #f5c453 !important;
}

/* ═══ SCROLLBAR ═══ */
.app.wl-page ::-webkit-scrollbar {
    width: 6px !important;
}

.app.wl-page ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION: transactions-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   📜 TRANSACTIONS — Hunter Style
   ========================================================= */

/* ═══ پس‌زمینه ═══ */
body:has(.tx-tabs),
.app:has(.tx-tabs) {
    background: #0f1117 !important;
    min-height: 100vh; min-height: 100dvh;
    position: relative;
}

body:has(.tx-tabs)::before,
.app:has(.tx-tabs)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(96,165,250,.06), transparent 45%),
        radial-gradient(circle at 85% 100%, rgba(52,211,153,.05), transparent 50%) !important;
}

/* ═══ هدر ═══ */
.app:has(.tx-tabs) .page-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
}

.app:has(.tx-tabs) .page-header h2 {
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #f0f2f7 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    padding: 0 44px !important;
}

.app:has(.tx-tabs) .page-header .back-button {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.app:has(.tx-tabs) .page-header .back-button:hover {
    background: #252932 !important;
    color: #f0f2f7 !important;
}

/* ═══════════════════════════════════════════════════════════
   TX TABS — تب‌های تراکنش
   ═══════════════════════════════════════════════════════════ */

.tx-tabs {
    display: flex !important;
    gap: 6px !important;
    padding: 5px !important;
    margin-bottom: 14px !important;
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.tx-tabs::-webkit-scrollbar {
    display: none !important;
}

.tx-tabs button {
    flex: 1 !important;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: transparent !important;
    color: #8b95a8 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: all .18s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.tx-tabs button:hover {
    color: #e4e7ee !important;
    background: rgba(255,255,255,.03) !important;
}

.tx-tabs button.active {
    background: linear-gradient(135deg, #f5c453, #e0b13e) !important;
    color: #1a1d24 !important;
    border-color: transparent !important;
    box-shadow:
        0 8px 20px -8px rgba(245,196,83,.5),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   TX CARD — کارت تراکنش
   با نوار رنگی چرخشی (بسته به نوع)
   ═══════════════════════════════════════════════════════════ */

.tx-card {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    transition: all .22s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

.tx-card::before {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    bottom: 14px !important;
    right: 0 !important;
    left: auto !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #f5c453 !important;
    opacity: .6 !important;
    transition: .2s !important;
}

.tx-card::after {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    left: -40px !important;
    width: 100px !important;
    height: 100px !important;
    background: radial-gradient(circle, rgba(245,196,83,.08), transparent 70%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: .25s !important;
}

.tx-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(245,196,83,.25) !important;
    background: linear-gradient(155deg, #1e2128, #1c1f27) !important;
    box-shadow:
        0 16px 36px -18px rgba(245,196,83,.35),
        0 0 0 1px rgba(245,196,83,.08) inset !important;
}

.tx-card:hover::before {
    opacity: 1 !important;
}

.tx-card:hover::after {
    opacity: 1 !important;
}

/* بالا */
.tx-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.tx-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #e4e7ee !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
}

.tx-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.25), rgba(245,196,83,.08)) !important;
    border: 1px solid rgba(245,196,83,.3) !important;
    color: #f5c453 !important;
    flex-shrink: 0 !important;
    transition: all .25s !important;
    position: relative !important;
    overflow: hidden !important;
}

.tx-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: -50% !important;
    background: conic-gradient(from 0deg, transparent, rgba(245,196,83,.3), transparent 30%) !important;
    animation: txSpin 6s linear infinite !important;
    pointer-events: none !important;
    opacity: .5 !important;
}

.tx-icon svg {
    position: relative !important;
    z-index: 2 !important;
    width: 15px !important;
    height: 15px !important;
}

@keyframes txSpin {
    to { transform: rotate(360deg); }
}

.tx-icon.plus {
    background:
        radial-gradient(circle at 30% 25%, rgba(52,211,153,.3), rgba(52,211,153,.08)) !important;
    border-color: rgba(52,211,153,.35) !important;
    color: #34d399 !important;
    box-shadow: 0 6px 16px -6px rgba(52,211,153,.4) !important;
}

.tx-icon.plus::before {
    background: conic-gradient(from 0deg, transparent, rgba(52,211,153,.3), transparent 30%) !important;
}

.tx-icon.minus {
    background:
        radial-gradient(circle at 30% 25%, rgba(248,113,113,.3), rgba(248,113,113,.08)) !important;
    border-color: rgba(248,113,113,.35) !important;
    color: #f87171 !important;
    box-shadow: 0 6px 16px -6px rgba(248,113,113,.4) !important;
}

.tx-icon.minus::before {
    background: conic-gradient(from 0deg, transparent, rgba(248,113,113,.3), transparent 30%) !important;
}

.tx-icon.pending {
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.3), rgba(245,196,83,.08)) !important;
    border-color: rgba(245,196,83,.35) !important;
    color: #f5c453 !important;
}

/* مبلغ */
.tx-amount {
    font-family: inherit !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    direction: rtl !important;
    letter-spacing: -.2px !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

.tx-amount.plus {
    background: linear-gradient(135deg, #7ee6a8, #34d399) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 0 10px rgba(52,211,153,.4)) !important;
}

.tx-amount.minus {
    background: linear-gradient(135deg, #ff9aae, #f87171) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 0 10px rgba(248,113,113,.4)) !important;
}

/* متادیتا */
.tx-meta {
    color: #a8afc0 !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    line-height: 1.9 !important;
    position: relative !important;
    z-index: 1 !important;
    font-weight: 500 !important;
}

.tx-meta .row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 2px 0 !important;
}

.tx-meta .row b {
    color: #e4e7ee !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
}

/* استاتوس‌ها */
.tx-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: inherit !important;
    font-size: 10px !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.tx-status-pill.pending {
    background: rgba(245,196,83,.12) !important;
    color: #f5c453 !important;
    border: 1px solid rgba(245,196,83,.3) !important;
    box-shadow: 0 0 12px -4px rgba(245,196,83,.5) !important;
}

.tx-status-pill.approved {
    background: rgba(52,211,153,.12) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52,211,153,.3) !important;
    box-shadow: 0 0 12px -4px rgba(52,211,153,.5) !important;
}

.tx-status-pill.rejected {
    background: rgba(248,113,113,.12) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248,113,113,.3) !important;
}

/* هش */
.tx-hash {
    direction: ltr !important;
    word-break: break-all !important;
    font-family: monospace !important;
    font-size: 10px !important;
    color: #5b6478 !important;
    margin-top: 6px !important;
    padding: 6px 9px !important;
    background: #252932 !important;
    border-radius: 8px !important;
    border: 1px dashed rgba(245,196,83,.15) !important;
    letter-spacing: .2px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   TX EMPTY
   ═══════════════════════════════════════════════════════════ */

.app:has(.tx-tabs) .tx-empty {
    text-align: center !important;
    padding: 60px 24px !important;
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(96,165,250,.05), transparent 60%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1.5px dashed rgba(96,165,250,.2) !important;
    border-radius: 18px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.app:has(.tx-tabs) .tx-empty .tx-empty-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 16px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(96,165,250,.25), rgba(96,165,250,.08)) !important;
    border: 1.5px solid rgba(96,165,250,.3) !important;
    color: #60a5fa !important;
    box-shadow: 0 10px 24px -10px rgba(96,165,250,.4) !important;
    animation: txEmFloat 3s ease-in-out infinite !important;
}

.app:has(.tx-tabs) .tx-empty .tx-empty-icon svg {
    width: 28px !important;
    height: 28px !important;
}

@keyframes txEmFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */

.app:has(.tx-tabs) .bottom-nav {
    background: #0f1117 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 10px 8px calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
}

.app:has(.tx-tabs) .bottom-nav::before,
.app:has(.tx-tabs) .bottom-nav::after {
    display: none !important;
}

.app:has(.tx-tabs) .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #5b6478 !important;
    font-family: inherit !important;
    transition: .18s !important;
    position: relative !important;
    min-width: 0 !important;
}

.app:has(.tx-tabs) .nav-item .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    transform: none !important;
}

.app:has(.tx-tabs) .nav-item small {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
}

.app:has(.tx-tabs) .nav-item.active {
    color: #f0f2f7 !important;
    background: #1e2128 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
}

.app:has(.tx-tabs) .nav-item.active::after {
    display: none !important;
}

.app:has(.tx-tabs) .nav-item.active .nav-icon svg {
    color: #f5c453 !important;
    filter: none !important;
}

.app:has(.tx-tabs) .nav-item.active small {
    color: #f5c453 !important;
}

/* اسکرول بار */
.app:has(.tx-tabs) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.app:has(.tx-tabs) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: referral-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================
   🚪 REFERRAL JOIN — Hunter Style
   صفحه ورود با لینک دعوت + VPN/Closed Notices
   ========================================================= */

/* ═══════════════════════════════════════════════════════════
   REFERRAL CONTAINER
   ═══════════════════════════════════════════════════════════ */

body:has(.rj-box),
.app:has(.rj-box) {
    background: #0f1117 !important;
    min-height: 100vh;
    position: relative;
}

body:has(.rj-box)::before,
.app:has(.rj-box)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 15% 15%, rgba(245,196,83,.08), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(52,211,153,.06), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(96,165,250,.04), transparent 60%) !important;
}

.rj-container {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 18px !important;
    position: relative !important;
    z-index: 1 !important;
}

.rj-box {
    width: 100% !important;
    max-width: 420px !important;
    border-radius: 20px !important;
    padding: 30px 22px 24px !important;
    text-align: center !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(245,196,83,.08), transparent 55%),
        radial-gradient(circle at 90% 100%, rgba(52,211,153,.06), transparent 55%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1.5px solid rgba(245,196,83,.25) !important;
    box-shadow:
        0 0 0 1px rgba(245,196,83,.06) inset,
        0 0 60px -20px rgba(245,196,83,.25),
        0 24px 60px -20px rgba(0,0,0,.6) !important;
    position: relative !important;
    overflow: hidden !important;
    animation: rjFadeUp .55s cubic-bezier(.3, 1.2, .4, 1) both !important;
}

.rj-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #f5c453, transparent) !important;
    opacity: .9 !important;
}

.rj-box::after {
    content: '' !important;
    position: absolute !important;
    top: -60px !important;
    right: -60px !important;
    width: 180px !important;
    height: 180px !important;
    background: radial-gradient(circle, rgba(245,196,83,.15), transparent 70%) !important;
    pointer-events: none !important;
}

.rj-box > * {
    position: relative !important;
    z-index: 1 !important;
}

@keyframes rjFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   RJ ICON
   ═══════════════════════════════════════════════════════════ */

.rj-icon {
    width: 86px !important;
    height: 86px !important;
    margin: 0 auto 20px !important;
    border-radius: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 40px !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.4), rgba(245,196,83,.1)) !important;
    border: 1.5px solid rgba(245,196,83,.5) !important;
    box-shadow:
        0 12px 32px -10px rgba(245,196,83,.5),
        inset 0 0 24px rgba(245,196,83,.15) !important;
    animation: rjIconFloat 3s ease-in-out infinite !important;
    position: relative !important;
    overflow: hidden !important;
}

.rj-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: -50% !important;
    background: conic-gradient(from 0deg, transparent, rgba(255,215,106,.5), transparent 30%) !important;
    animation: rjSpin 5s linear infinite !important;
    pointer-events: none !important;
    opacity: .6 !important;
}

.rj-icon > * {
    position: relative !important;
    z-index: 2 !important;
}

.rj-icon.success {
    background:
        radial-gradient(circle at 30% 25%, rgba(52,211,153,.4), rgba(52,211,153,.1)) !important;
    border-color: rgba(52,211,153,.5) !important;
    box-shadow:
        0 12px 32px -10px rgba(52,211,153,.5),
        inset 0 0 24px rgba(52,211,153,.15) !important;
    animation: rjIconPulse 2s ease-in-out infinite !important;
}

.rj-icon.success::before {
    background: conic-gradient(from 0deg, transparent, rgba(126,230,168,.5), transparent 30%) !important;
}

.rj-icon.error {
    background:
        radial-gradient(circle at 30% 25%, rgba(248,113,113,.4), rgba(248,113,113,.1)) !important;
    border-color: rgba(248,113,113,.5) !important;
    box-shadow:
        0 12px 32px -10px rgba(248,113,113,.5),
        inset 0 0 24px rgba(248,113,113,.15) !important;
}

.rj-icon.error::before {
    background: conic-gradient(from 0deg, transparent, rgba(255,154,174,.5), transparent 30%) !important;
}

@keyframes rjIconFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes rjIconPulse {
    0%, 100% {
        box-shadow:
            0 12px 32px -10px rgba(52,211,153,.5),
            inset 0 0 24px rgba(52,211,153,.15);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 16px 40px -10px rgba(52,211,153,.7),
            inset 0 0 30px rgba(52,211,153,.25);
        transform: scale(1.05);
    }
}

@keyframes rjSpin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   RJ TITLE + SUBTITLE
   ═══════════════════════════════════════════════════════════ */

.rj-title {
    margin: 0 0 10px !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #f0f2f7 !important;
    letter-spacing: -.01em !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
}

.rj-subtitle {
    margin: 0 0 22px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    line-height: 2 !important;
    letter-spacing: 0 !important;
}

.rj-subtitle b {
    display: inline-block !important;
    color: #f5c453 !important;
    font-weight: 900 !important;
    direction: ltr !important;
    padding: 0 4px !important;
}

/* ═══════════════════════════════════════════════════════════
   RJ WELCOME BADGE
   ═══════════════════════════════════════════════════════════ */

.rj-welcome-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 16px !important;
    border-radius: 11px !important;
    background: rgba(52,211,153,.14) !important;
    border: 1.5px solid rgba(52,211,153,.4) !important;
    color: #7ee6a8 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    margin-bottom: 16px !important;
    box-shadow: 0 0 24px -8px rgba(52,211,153,.5) !important;
}


/* ═══════════════════════════════════════════════════════════
   RJ BUTTONS
   ═══════════════════════════════════════════════════════════ */

.rj-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px 18px !important;
    border-radius: 13px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    transition: all .18s !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.rj-btn:last-child {
    margin-bottom: 0 !important;
}

.rj-btn:active {
    transform: scale(.98) !important;
}

.rj-btn:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
}

/* دکمه اصلی - طلایی */
.rj-btn-primary {
    background: linear-gradient(135deg, #f5c453, #e0b13e) !important;
    color: #1a1d24 !important;
    box-shadow:
        0 12px 30px -10px rgba(245,196,83,.5),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.rj-btn-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) !important;
    animation: rjShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

.rj-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(245,196,83,.7),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* دکمه موفقیت - سبز */
.rj-btn-success {
    background: linear-gradient(135deg, #34d399, #22c55e) !important;
    color: #052a1a !important;
    box-shadow:
        0 12px 30px -10px rgba(52,211,153,.5),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.rj-btn-success::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) !important;
    animation: rjShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

.rj-btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(52,211,153,.7),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

@keyframes rjShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* دکمه outline - تیره */
.rj-btn-outline {
    background: #252932 !important;
    color: #e4e7ee !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

.rj-btn-outline:hover {
    background: #2a2e38 !important;
    border-color: rgba(245,196,83,.3) !important;
    color: #f5c453 !important;
}

/* دکمه کانال */
.rj-btn-channel {
    background: linear-gradient(135deg, #229ED9, #19c7d9) !important;
    color: #fff !important;
    box-shadow:
        0 12px 30px -10px rgba(34,158,217,.5),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.rj-btn-channel:hover {
    background: linear-gradient(135deg, #19c7d9, #0ea5e9) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(34,158,217,.7),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   RJ CHANNEL CHIP
   ═══════════════════════════════════════════════════════════ */

.rj-channel-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(155deg, rgba(34,158,217,.15), rgba(25,199,217,.06)) !important;
    border: 1.5px solid rgba(34,158,217,.4) !important;
    color: #6fd0ea !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 0 20px !important;
    direction: ltr !important;
    letter-spacing: 0 !important;
    box-shadow: 0 0 30px -10px rgba(34,158,217,.4) !important;
    transition: all .18s !important;
}

.rj-channel-chip:hover {
    background:
        linear-gradient(155deg, rgba(34,158,217,.25), rgba(25,199,217,.1)) !important;
    border-color: rgba(34,158,217,.6) !important;
    color: #8adfff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 40px -10px rgba(34,158,217,.6) !important;
}

/* ═══════════════════════════════════════════════════════════
   RJ SPINNER
   ═══════════════════════════════════════════════════════════ */

.rj-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(26,29,36,.3) !important;
    border-top-color: #1a1d24 !important;
    border-radius: 50% !important;
    animation: rjSpin360 .8s linear infinite !important;
}

@keyframes rjSpin360 {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   RJ ERROR TEXT
   ═══════════════════════════════════════════════════════════ */

.rj-error-text {
    color: #f87171 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 2 !important;
    margin: 10px 0 20px !important;
    letter-spacing: 0 !important;
}

.rj-success-text {
    color: #7ee6a8 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.9 !important;
    margin: 12px 0 8px !important;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   VPN / CLOSED NOTICE SCREEN
   ═══════════════════════════════════════════════════════════ */

.vpn-screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    padding: 80px 28px !important;
    text-align: center !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #0f1117 !important;
    position: relative !important;
}

.vpn-screen::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(245,196,83,.08), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(96,165,250,.06), transparent 50%) !important;
}

.vpn-screen > * {
    position: relative !important;
    z-index: 1 !important;
}

.vpn-icon {
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 42px !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.35), rgba(245,196,83,.08)) !important;
    border: 1.5px solid rgba(245,196,83,.4) !important;
    box-shadow:
        0 16px 40px -12px rgba(245,196,83,.5),
        inset 0 0 24px rgba(245,196,83,.15) !important;
    animation: vpnFloat 3s ease-in-out infinite !important;
    color: #f5c453 !important;
    filter: none !important;
}

@keyframes vpnFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

.vpn-screen h2 {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #f0f2f7 !important;
    letter-spacing: -.01em !important;
    line-height: 1.35 !important;
}

.vpn-screen p {
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 2 !important;
    margin: 0 !important;
    max-width: 340px !important;
}

.vpn-screen p strong {
    color: #f5c453 !important;
    font-weight: 800 !important;
}

.vpn-screen .primary-btn {
    max-width: 240px !important;
    margin-top: 12px !important;
    padding: 14px 20px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #f5c453, #e0b13e) !important;
    color: #1a1d24 !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow:
        0 12px 30px -10px rgba(245,196,83,.5),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: all .18s !important;
    letter-spacing: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.vpn-screen .primary-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) !important;
    animation: rjShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

.vpn-screen .primary-btn:hover {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(245,196,83,.7),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.vpn-spinner {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2.5px solid rgba(255,255,255,.1) !important;
    border-top-color: #f5c453 !important;
    border-right-color: #f5c453 !important;
    animation: rjSpin360 .8s linear infinite !important;
    box-shadow: 0 0 20px -4px rgba(245,196,83,.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

body:has(.rj-box) ::-webkit-scrollbar,
.app:has(.rj-box) ::-webkit-scrollbar {
    width: 6px !important;
}

body:has(.rj-box) ::-webkit-scrollbar-thumb,
.app:has(.rj-box) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   SECTION: boot-hunter.css
   ═══════════════════════════════════════════════════════════════════════ */


/* =========================================================
   🎬 BOOT SCREEN — Cinema Opening Experience
   صفحه ورودی و لودینگ
   ========================================================= */

/* ═══ Override فوری پس‌زمینه قدیمی ═══ */
html {
    background: #0f1117 !important;
}

body {
    background: #0f1117 !important;
}

/* ═══════════════════════════════════════════════════════════
   BOOT SCREEN
   ═══════════════════════════════════════════════════════════ */

.boot-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(245,196,83,.1), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(52,211,153,.06), transparent 50%),
        #0f1117 !important;
    padding: 30px !important;
    overflow: hidden !important;
    animation: bootScreenIn .4s ease both !important;
}

@keyframes bootScreenIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   FILM STRIP (نوار فیلم بالا و پایین)
   ═══════════════════════════════════════════════════════════ */

.boot-filmstrip {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 24px !important;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(245,196,83,.15) 0 10px,
        transparent 10px 20px
    ) !important;
    opacity: .35 !important;
    animation: bootStripMove 8s linear infinite !important;
}

.boot-filmstrip.top {
    top: 0 !important;
    border-bottom: 1px solid rgba(245,196,83,.15) !important;
}

.boot-filmstrip.bottom {
    bottom: 0 !important;
    border-top: 1px solid rgba(245,196,83,.15) !important;
    animation-direction: reverse !important;
}

@keyframes bootStripMove {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}

/* ═══════════════════════════════════════════════════════════
   PARTICLES (ذرات طلایی)
   ═══════════════════════════════════════════════════════════ */

.boot-particles {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.boot-particle {
    position: absolute !important;
    bottom: -10% !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #f5c453 !important;
    opacity: 0 !important;
    box-shadow:
        0 0 10px #f5c453,
        0 0 20px rgba(245,196,83,.5) !important;
    animation: bootParticleFloat 6s ease-in-out infinite !important;
}

.boot-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.boot-particle:nth-child(2) { left: 22%; animation-delay: .8s; width: 3px; height: 3px; }
.boot-particle:nth-child(3) { left: 38%; animation-delay: 1.6s; background: #34d399; box-shadow: 0 0 10px #34d399; }
.boot-particle:nth-child(4) { left: 52%; animation-delay: 2.4s; }
.boot-particle:nth-child(5) { left: 68%; animation-delay: 3.2s; width: 4px; height: 4px; }
.boot-particle:nth-child(6) { left: 82%; animation-delay: 4s; background: #34d399; box-shadow: 0 0 10px #34d399; }
.boot-particle:nth-child(7) { left: 30%; animation-delay: 4.8s; width: 3px; height: 3px; }
.boot-particle:nth-child(8) { left: 75%; animation-delay: 5.6s; }
.boot-particle:nth-child(9) { left: 46%; animation-delay: 2s; background: #f87171; box-shadow: 0 0 10px #f87171; width: 4px; height: 4px; }
.boot-particle:nth-child(10) { left: 88%; animation-delay: 1.2s; width: 3px; height: 3px; }

@keyframes bootParticleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(.5);
    }
    15% {
        opacity: 1;
        transform: translateY(-10vh) scale(1);
    }
    85% {
        opacity: .8;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) scale(.4);
    }
}

/* ═══════════════════════════════════════════════════════════
   LOGO
   ═══════════════════════════════════════════════════════════ */

.boot-logo {
    position: relative !important;
    z-index: 2 !important;
    width: 110px !important;
    height: 110px !important;
    border-radius: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.4), rgba(245,196,83,.08)) !important;
    border: 2px solid rgba(245,196,83,.5) !important;
    box-shadow:
        0 0 50px rgba(245,196,83,.5),
        0 0 100px -20px rgba(245,196,83,.7),
        inset 0 0 30px rgba(245,196,83,.15) !important;
    animation: bootLogoPulse 2.5s ease-in-out infinite !important;
    margin-bottom: 26px !important;
    overflow: hidden !important;
}

.boot-logo::before {
    content: '' !important;
    position: absolute !important;
    inset: -50% !important;
    background: conic-gradient(from 0deg, transparent, rgba(255,215,106,.5), transparent 30%) !important;
    animation: bootLogoS pin 4s linear infinite !important;
    pointer-events: none !important;
    opacity: .5 !important;
}

.boot-logo svg {
    position: relative !important;
    z-index: 2 !important;
    color: #f5c453 !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)) !important;
}

@keyframes bootLogoPulse {
    0%, 100% {
        transform: scale(1) rotate(-2deg);
        box-shadow:
            0 0 50px rgba(245,196,83,.5),
            0 0 100px -20px rgba(245,196,83,.7),
            inset 0 0 30px rgba(245,196,83,.15);
    }
    50% {
        transform: scale(1.06) rotate(2deg);
        box-shadow:
            0 0 70px rgba(245,196,83,.8),
            0 0 120px -20px rgba(245,196,83,.9),
            inset 0 0 40px rgba(245,196,83,.25);
    }
}

@keyframes bootLogoS pin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   BRAND + TAGLINE
   ═══════════════════════════════════════════════════════════ */

.boot-brand {
    position: relative !important;
    z-index: 2 !important;
    font-family: inherit !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #f0f2f7 !important;
    letter-spacing: -.5px !important;
    text-align: center !important;
    margin-bottom: 6px !important;
    text-shadow: 0 0 30px rgba(245,196,83,.3) !important;
    animation: bootFadeUp .6s ease .1s both !important;
}

.boot-tagline {
    position: relative !important;
    z-index: 2 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #8b95a8 !important;
    letter-spacing: .15em !important;
    text-align: center !important;
    margin-bottom: 38px !important;
    animation: bootFadeUp .6s ease .2s both !important;
}

@keyframes bootFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   STATUS (متن چرخشی)
   ═══════════════════════════════════════════════════════════ */

.boot-status {
    position: relative !important;
    z-index: 2 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f5c453 !important;
    min-height: 26px !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    letter-spacing: 0 !important;
}

.boot-status-text {
    display: inline-block !important;
    animation: bootTextIn .4s cubic-bezier(.3, 1.2, .4, 1) both !important;
}

@keyframes bootTextIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════ */

.boot-progress {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 260px !important;
    height: 4px !important;
    background: rgba(255,255,255,.06) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3) !important;
}

.boot-progress-inner {
    height: 100% !important;
    width: 35% !important;
    background: linear-gradient(90deg, #f5c453, #34d399) !important;
    border-radius: 2px !important;
    animation: bootProgressMove 1.8s ease-in-out infinite !important;
    box-shadow: 0 0 12px rgba(245,196,83,.7) !important;
}

@keyframes bootProgressMove {
    0% {
        margin-left: -35%;
    }
    100% {
        margin-left: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   MESSAGE
   ═══════════════════════════════════════════════════════════ */

.boot-message {
    position: relative !important;
    z-index: 2 !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #5b6478 !important;
    text-align: center !important;
    max-width: 280px !important;
    line-height: 1.9 !important;
    letter-spacing: 0 !important;
    animation: bootFadeUp .6s ease .4s both !important;
}

/* ═══════════════════════════════════════════════════════════
   SPINNER (برای صفحه VPN/خطا)
   ═══════════════════════════════════════════════════════════ */

.vpn-screen {
    background: #0f1117 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

.vpn-spinner {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(245,196,83,.15) !important;
    border-top-color: #f5c453 !important;
    animation: bootSpin 0.9s linear infinite !important;
    box-shadow: 0 0 20px -4px rgba(245,196,83,.5) !important;
}

@keyframes bootSpin {
    to { transform: rotate(360deg); }
}