:root {
            --ink: #08060f;
            --panel: #120e22;
            --panel-2: #170f2c;
            --glass: rgba(255,255,255,0.035);
            --glass-hover: rgba(255,255,255,0.065);
            --border: rgba(255,255,255,0.08);
            --primary: #8657ff;
            --primary-dark: #5b32c7;
            --primary-light: #b79bff;
            --primary-glow: rgba(134, 87, 255, 0.35);
            --gold: #f0b429;
            --text: #f2f0fa;
            --text-muted: #9a93b8;
            --text-faint: #6b6088;
            --success: #34d399;
            --danger: #ff5577;
            --radius-lg: 20px;
            --radius-md: 14px;
            --radius-sm: 8px;
            --font-display: 'Space Grotesk', 'Vazirmatn', system-ui, sans-serif;
            --font-body: 'Inter', 'Vazirmatn', 'Segoe UI', system-ui, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--font-body);
        }

        body.lang-ckb, body.lang-ckb * {
            font-family: 'Vazirmatn', 'Segoe UI', system-ui, sans-serif;
        }

        h1, h2, h3, h4,
        .hero h2, .logo-text .optimizers, .card h3,
        .page-nav a, .btn-buy, .cart-btn, .auth-btn,
        .checkout-total, .price, .summary-price {
            font-family: var(--font-display);
        }
        body.lang-ckb h1, body.lang-ckb h2, body.lang-ckb h3, body.lang-ckb h4 {
            font-family: 'Vazirmatn', sans-serif;
        }

        ::selection { background: var(--primary); color: white; }

        /* Copy deterrents: disable text selection & image dragging site-wide,
           but keep selection enabled inside actual form fields so typing,
           editing, and copy/paste of the user's OWN input still works fine. */
        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }
        input, textarea, select,
        input::selection, textarea::selection {
            -webkit-user-select: text;
            -moz-user-select: text;
            user-select: text;
        }
        img {
            -webkit-user-drag: none;
            user-drag: none;
            pointer-events: auto;
        }

        :focus-visible {
            outline: 2px solid var(--primary-light);
            outline-offset: 2px;
            border-radius: 4px;
        }

        html[dir="rtl"] .page-nav {
            direction: rtl;
        }
        html[dir="rtl"] .header-right {
            direction: rtl;
        }
        html[dir="rtl"] .checkout-row,
        html[dir="rtl"] .checkout-grid {
            direction: rtl;
        }

        html {
            overflow-x: hidden;
        }
        body {
            background-color: #1c0040;
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            width: 100%;
            background-image:
                url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'%20result='noise'/%3E%3CfeColorMatrix%20in='noise'%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.035%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"),
                radial-gradient(1.6px 1.6px at 15% 12%, rgba(255,255,255,0.9), transparent 60%),
                radial-gradient(1.2px 1.2px at 38% 28%, rgba(255,255,255,0.7), transparent 60%),
                radial-gradient(1.8px 1.8px at 62% 8%, rgba(255,255,255,0.85), transparent 60%),
                radial-gradient(1.3px 1.3px at 84% 22%, rgba(255,255,255,0.6), transparent 60%),
                radial-gradient(1.5px 1.5px at 24% 55%, rgba(255,255,255,0.75), transparent 60%),
                radial-gradient(1.1px 1.1px at 70% 48%, rgba(255,255,255,0.55), transparent 60%),
                radial-gradient(1.7px 1.7px at 92% 65%, rgba(255,255,255,0.8), transparent 60%),
                radial-gradient(1.2px 1.2px at 8% 80%, rgba(255,255,255,0.65), transparent 60%),
                radial-gradient(1.4px 1.4px at 47% 88%, rgba(255,255,255,0.7), transparent 60%),
                radial-gradient(1.9px 1.9px at 78% 92%, rgba(255,255,255,0.9), transparent 60%),
                radial-gradient(ellipse 55% 40% at 18% 8%, rgba(183, 155, 255, 0.22), transparent 70%),
                radial-gradient(ellipse 45% 35% at 86% 18%, rgba(240, 180, 41, 0.10), transparent 70%),
                radial-gradient(ellipse 60% 45% at 50% 100%, rgba(134, 87, 255, 0.20), transparent 70%),
                linear-gradient(180deg, #2a114c 0%, #1f0a44 35%, #1c0040 65%, #120428 100%);
            background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
            background-size: 180px 180px, 340px 340px, 300px 300px, 380px 380px, 260px 260px, 320px 320px,
                              290px 290px, 400px 400px, 270px 270px, 330px 330px, 360px 360px,
                              auto, auto, auto, cover;
            background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
        }

        @media (max-width: 900px) {
            body { background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll; }
        }

        a { text-decoration: none; }

        .header {
            background: rgba(8, 2, 20, 0.72);
            backdrop-filter: blur(18px) saturate(150%);
            padding: 0.85rem 2.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .logo:hover { opacity: 0.85; transform: translateY(-1px); }
        .logo:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 4px; border-radius: 8px; }

        .logo-svg {
            width: 52px;
            height: 52px;
            flex-shrink: 0;
            border-radius: 14px;
            overflow: hidden;
        }

        .logo-svg img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1.05;
        }
        .logo-text .elite {
            font-family: var(--font-display);
            font-size: 0.72rem;
            font-weight: 600;
            color: #f2f0fa;
            letter-spacing: 5px;
            text-transform: uppercase;
        }
        .logo-text .optimizers {
            font-family: var(--font-display);
            font-size: 1.6rem;
            font-weight: 700;
            background: linear-gradient(135deg, #d9ccff, #8657ff 55%, #b79bff);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.3px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .badge {
            background: rgba(134, 87, 255, 0.15);
            padding: 0.4rem 1.2rem;
            border-radius: 40px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            border: 1px solid rgba(134, 87, 255, 0.25);
            font-size: 0.85rem;
            color: #c9b8ff;
        }
        .badge i { color: #8657ff; }
        .badge span {
            background: #8657ff;
            padding: 0.15rem 0.7rem;
            border-radius: 30px;
            font-size: 0.6rem;
            font-weight: 700;
            color: white;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .lang-btn {
            background: rgba(134, 87, 255, 0.1);
            padding: 0.5rem 1.1rem;
            border-radius: 40px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            border: 1px solid rgba(134, 87, 255, 0.25);
            font-size: 0.85rem;
            color: #c9b8ff;
            cursor: pointer;
            transition: all 0.3s;
        }
        .lang-btn:hover {
            background: rgba(134, 87, 255, 0.2);
            border-color: #8657ff;
        }
        .lang-btn i { color: #8657ff; }

        .cart-btn {
            position: relative;
            padding: 0.5rem 1.2rem;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.85rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            background: rgba(134, 87, 255, 0.15);
            color: #c9b8ff;
            border: 1px solid rgba(134, 87, 255, 0.2);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .cart-btn:hover {
            background: rgba(134, 87, 255, 0.25);
        }
        .cart-btn .cart-count {
            background: #8657ff;
            color: white;
            border-radius: 50%;
            padding: 0.1rem 0.5rem;
            font-size: 0.7rem;
            font-weight: 700;
            min-width: 20px;
            text-align: center;
        }

        .auth-btn {
            padding: 0.5rem 1.5rem;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.85rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .auth-btn.sign-in {
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
        }
        .auth-btn.sign-in:hover {
            transform: scale(0.95);
            box-shadow: 0 6px 16px rgba(134, 87, 255, 0.14);
        }
        .auth-btn.sign-out {
            background: rgba(255, 255, 255, 0.06);
            color: #c9b8ff;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .auth-btn.sign-out:hover {
            background: rgba(255, 85, 119, 0.15);
            border-color: rgba(255, 85, 119, 0.3);
            color: #ff5577;
        }

        .admin-badge {
            display: none;
            background: rgba(240, 180, 41, 0.15);
            color: #f0b429;
            padding: 0.2rem 0.8rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 600;
            border: 1px solid rgba(240, 180, 41, 0.2);
            letter-spacing: 0.5px;
        }
        .admin-badge.show { display: inline-block; }

        .cooldown-badge {
            display: none;
            background: rgba(255, 85, 119, 0.15);
            color: #ff5577;
            padding: 0.2rem 0.8rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 600;
            border: 1px solid rgba(255, 85, 119, 0.2);
            letter-spacing: 0.5px;
            margin-right: 0.5rem;
        }
        .cooldown-badge.show { display: inline-block; }

        .hero {
            padding: 3.5rem 2rem 2.2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 30% 40%, rgba(134, 87, 255, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 70% 60%, rgba(240, 180, 41, 0.03) 0%, transparent 45%);
            animation: float-bg 20s ease-in-out infinite alternate;
            pointer-events: none;
        }
        @keyframes float-bg {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(2%, 2%) rotate(3deg); }
        }
        .hero h2 {
            font-family: var(--font-display);
            font-size: 3.1rem;
            font-weight: 700;
            position: relative;
            z-index: 1;
            letter-spacing: 1px;
        }
        .hero h2 .highlight {
            color: var(--primary-light);
            text-shadow: 0 0 28px rgba(134, 87, 255, 0.3);
        }
        .hero .subtitle {
            color: var(--gold);
            font-family: var(--font-display);
            font-size: 0.95rem;
            letter-spacing: 8px;
            text-transform: uppercase;
            font-weight: 600;
            position: relative;
            z-index: 1;
            margin-top: 0.6rem;
        }
        .hero p {
            color: var(--text-muted);
            max-width: 620px;
            margin: 0.9rem auto 0;
            font-size: 1.05rem;
            line-height: 1.6;
            position: relative;
            z-index: 1;
        }

        .search-container {
            max-width: 600px;
            margin: 1.6rem auto 0;
            position: relative;
            z-index: 1;
        }
        .search-container .search-box {
            display: flex;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 0.3rem 0.3rem 0.3rem 1.5rem;
            align-items: center;
            transition: all 0.3s;
        }
        .search-container .search-box:focus-within {
            border-color: #8657ff;
            box-shadow: 0 4px 14px rgba(134, 87, 255, 0.08);
        }
        .search-container .search-box input {
            flex: 1;
            background: transparent;
            border: none;
            color: #f2f0fa;
            font-size: 0.95rem;
            padding: 0.7rem 0;
            outline: none;
        }
        .search-container .search-box input::placeholder {
            color: #6b6088;
        }
        .search-container .search-box .search-icon {
            color: #8657ff;
            padding: 0 0.8rem;
            font-size: 1.1rem;
        }
        .search-container .search-box button {
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            border: none;
            color: white;
            padding: 0.6rem 1.8rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        .search-container .search-box button:hover {
            transform: scale(0.97);
            box-shadow: 0 6px 16px rgba(134, 87, 255, 0.14);
        }

        .tagline {
            margin-top: 1.2rem;
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }
        .tagline span {
            background: rgba(134, 87, 255, 0.08);
            padding: 0.4rem 1.5rem;
            border-radius: 40px;
            border: 1px solid rgba(134, 87, 255, 0.12);
            font-weight: 500;
            font-size: 0.9rem;
            color: #c9b8ff;
            transition: all 0.3s;
        }
        .tagline span:hover {
            background: rgba(134, 87, 255, 0.15);
            border-color: rgba(134, 87, 255, 0.3);
            transform: translateY(-2px);
        }
        .tagline i { margin-right: 8px; color: #8657ff; }

        .page-nav {
            display: flex;
            gap: 0.6rem;
            flex-wrap: nowrap;
            justify-content: flex-start;
            padding: 0.75rem 2rem;
            position: sticky;
            top: var(--header-h, 76px);
            z-index: 40;
            background: transparent;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
            mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
            -webkit-mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
        }
        .page-nav::-webkit-scrollbar { display: none; }
        @media (min-width: 900px) {
            .page-nav { justify-content: center; flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
        }
        .page-nav a {
            padding: 0.6rem 1.3rem 0.6rem 1rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 0.2px;
            color: #9a93b8;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.25s ease;
            cursor: pointer;
            backdrop-filter: blur(4px);
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .page-nav a i {
            margin-right: 9px;
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.05);
            font-size: 0.8rem;
            transition: all 0.25s ease;
        }
        .page-nav a:hover {
            background: rgba(134, 87, 255, 0.12);
            color: #e0d4ff;
            border-color: rgba(134, 87, 255, 0.25);
            transform: translateY(-2px);
        }
        .page-nav a:hover i { background: rgba(134, 87, 255, 0.2); }
        .page-nav a.active {
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            border-color: transparent;
            box-shadow: 0 6px 20px -4px rgba(134, 87, 255, 0.55);
        }
        .page-nav a.active i { background: rgba(255, 255, 255, 0.18); }

        .section {
            display: none;
            animation: fadeSlide 0.4s ease;
        }
        .section.active { display: block; }
        @keyframes fadeSlide {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 1.5rem;
            padding: 0.5rem 2rem 3rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }

        .card {
            background: linear-gradient(180deg, rgba(18, 4, 40, 0.55), rgba(10, 2, 24, 0.65));
            backdrop-filter: blur(14px);
            border-radius: var(--radius-lg);
            padding: 1.4rem 1.4rem 1.6rem;
            border: 1px solid var(--border);
            box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
            transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.1), border-color 0.35s, box-shadow 0.35s, background 0.35s;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }
        .card::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary), var(--gold), transparent);
            opacity: 0;
            transform: scaleX(0.6);
            transition: opacity 0.35s, transform 0.35s;
        }
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 50% 0%, rgba(134, 87, 255, 0.12), transparent 70%);
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }
        .card:hover::before { opacity: 1; }
        .card:hover::after { opacity: 1; transform: scaleX(1); }
        .card:hover {
            transform: translateY(-6px);
            border-color: rgba(134, 87, 255, 0.4);
            box-shadow: 0 16px 32px -12px rgba(0,0,0,0.5), 0 4px 20px -6px rgba(134, 87, 255, 0.16);
            background: linear-gradient(180deg, rgba(24, 6, 52, 0.65), rgba(12, 3, 28, 0.72));
        }

        .account-image-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 10;
            height: auto;
            border-radius: var(--radius-md);
            overflow: hidden;
            margin-bottom: 1.1rem;
            background: rgba(134, 87, 255, 0.06);
            border: 1px solid var(--border);
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .account-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        .card:hover .account-image-wrapper img {
            transform: scale(1.06);
        }
        .account-image-wrapper .change-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
            backdrop-filter: blur(4px);
            cursor: pointer;
        }
        .account-image-wrapper .change-image-overlay.admin {
            background: rgba(0,0,0,0.6);
        }
        .account-image-wrapper .change-image-overlay.user {
            background: rgba(0,0,0,0.4);
        }
        .account-image-wrapper:hover .change-image-overlay {
            opacity: 1;
        }
        .account-image-wrapper .change-image-overlay span {
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 0.5rem 1.2rem;
            border-radius: 40px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .account-image-wrapper .change-image-overlay.admin span {
            background: rgba(134, 87, 255, 0.3);
        }
        .account-image-wrapper .change-image-overlay.user span {
            background: rgba(240, 180, 41, 0.15);
            color: #f0b429;
            border-color: rgba(240, 180, 41, 0.2);
        }

        .card h3 {
            font-size: 1.22rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.2px;
            line-height: 1.25;
        }
        .card .sub {
            color: var(--text-muted);
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 0.65rem;
            margin-bottom: 0.75rem;
        }
        .card .desc {
            color: #a79fc4;
            line-height: 1.55;
            flex: 1;
            font-size: 0.85rem;
            margin-bottom: 1.1rem;
        }
        .card .desc i { color: var(--success); margin-right: 8px; width: 18px; }
        .card .price {
            display: flex;
            align-items: baseline;
            gap: 4px;
            font-weight: 700;
            font-size: 1.55rem;
            color: var(--text);
            margin-bottom: 1rem;
            align-self: flex-start;
        }
        .card .price small {
            font-weight: 600;
            font-size: 0.72rem;
            color: var(--gold);
            margin-left: 2px;
            letter-spacing: 0.5px;
        }

        .price-row {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 0.35rem;
        }
        .price-row .price { margin-bottom: 0; }
        .price-old {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-faint);
            text-decoration: line-through;
            text-decoration-color: rgba(255, 85, 119, 0.6);
        }
        .price-savings {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--success);
            font-size: 0.75rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        .discount-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 5;
            background: linear-gradient(135deg, #ff6b8a, #ff3355);
            color: white;
            font-size: 0.78rem;
            font-weight: 800;
            padding: 6px 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 6px 16px -3px rgba(255, 51, 85, 0.65), 0 0 0 1px rgba(255,255,255,0.15) inset;
            letter-spacing: 0.4px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.25);
        }

        .btn-buy {
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            padding: 0.8rem 0;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: none;
            width: 100%;
            transition: all 0.25s ease;
            cursor: pointer;
        }
        .btn-buy:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(134, 87, 255, 0.16);
        }
        .btn-buy-light {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #c9b8ff;
        }
        .btn-buy-light:hover {
            background: rgba(134, 87, 255, 0.15);
            border-color: rgba(134, 87, 255, 0.25);
        }

        .btn-buy:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
        }

        .btn-add-cart {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #c9b8ff;
            padding: 0.8rem 0;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            transition: all 0.25s ease;
            cursor: pointer;
        }
        .btn-add-cart:hover {
            background: rgba(134, 87, 255, 0.15);
            border-color: rgba(134, 87, 255, 0.25);
            transform: translateY(-2px);
        }
        .btn-add-cart.in-cart {
            background: rgba(52, 211, 153, 0.15);
            border-color: rgba(52, 211, 153, 0.3);
            color: #34d399;
        }

        .btn-buy-wrapper {
            display: flex;
            gap: 0.5rem;
            width: 100%;
        }
        .btn-buy-wrapper .btn-buy,
        .btn-buy-wrapper .btn-add-cart {
            flex: 1;
            padding: 0.65rem 0;
            font-size: 0.8rem;
        }

        .stage-badge {
            background: linear-gradient(135deg, #8657ff, #5a2fd4);
            color: white;
            padding: 0.2rem 1.2rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.8px;
            display: inline-block;
            margin-bottom: 0.6rem;
            align-self: flex-start;
            text-transform: uppercase;
            border: 1px solid rgba(134, 87, 255, 0.3);
        }
        .stage-badge.purple-light {
            background: rgba(134, 87, 255, 0.15);
            color: #c9b8ff;
            border-color: rgba(134, 87, 255, 0.1);
        }

        .steam-badge {
            background: linear-gradient(135deg, #1a6b8a, #0d4a6b);
            color: #66c0f4;
            padding: 0.2rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-bottom: 0.6rem;
            align-self: flex-start;
            text-transform: uppercase;
            border: 1px solid rgba(102, 192, 244, 0.2);
        }
        .steam-badge i { margin-right: 4px; }

        .console-badge {
            background: linear-gradient(135deg, #0d4a6b, #1a6b8a);
            color: #66c0f4;
            padding: 0.2rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-bottom: 0.6rem;
            align-self: flex-start;
            text-transform: uppercase;
            border: 1px solid rgba(102, 192, 244, 0.2);
        }
        .console-badge i { margin-right: 4px; }

        .ark-badge {
            background: linear-gradient(135deg, #1a3a2a, #0d1f15);
            color: #5fd6a8;
            padding: 0.2rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-bottom: 0.6rem;
            align-self: flex-start;
            text-transform: uppercase;
            border: 1px solid rgba(95, 214, 168, 0.2);
        }
        .ark-badge i { margin-right: 4px; color: #5fd6a8; }

        .black-ops-badge {
            background: linear-gradient(135deg, #120e22, #08060f);
            color: #d4af6a;
            padding: 0.2rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-bottom: 0.6rem;
            align-self: flex-start;
            text-transform: uppercase;
            border: 1px solid rgba(212, 175, 106, 0.3);
            text-shadow: 0 0 10px rgba(212, 175, 106, 0.2);
        }
        .black-ops-badge i { margin-right: 4px; color: #d4af6a; }

        .bo6-card {
            border-color: rgba(212, 175, 106, 0.3) !important;
        }
        .bo6-card::before {
            background: radial-gradient(circle at 50% 0%, rgba(212, 175, 106, 0.08), transparent 70%) !important;
        }
        .bo6-card:hover {
            border-color: rgba(212, 175, 106, 0.5) !important;
            box-shadow: 0 20px 60px rgba(212, 175, 106, 0.1) !important;
        }

        .bo6-title {
            background: linear-gradient(135deg, #d4af6a, #a98a4a);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
        }

        /* Assassin's Creed Badge */
        .ac-badge {
            background: linear-gradient(135deg, #120e22, #08060f);
            color: #d4af6a;
            padding: 0.2rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-bottom: 0.6rem;
            align-self: flex-start;
            text-transform: uppercase;
            border: 1px solid rgba(212, 175, 106, 0.2);
        }
        .ac-badge i { margin-right: 4px; color: #d4af6a; }

        /* COD Badge */
        .cod-badge {
            background: linear-gradient(135deg, #120e22, #08060f);
            color: #66c0f4;
            padding: 0.2rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-bottom: 0.6rem;
            align-self: flex-start;
            text-transform: uppercase;
            border: 1px solid rgba(102, 192, 244, 0.2);
        }
        .cod-badge i { margin-right: 4px; color: #66c0f4; }

        /* Resident Evil Badge */
        .re-badge {
            background: linear-gradient(135deg, #2a0a0a, #1a0505);
            color: #ff3355;
            padding: 0.2rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-bottom: 0.6rem;
            align-self: flex-start;
            text-transform: uppercase;
            border: 1px solid rgba(255, 51, 85, 0.2);
        }
        .re-badge i { margin-right: 4px; color: #ff3355; }

        /* Shopping Cart Modal */
        .cart-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(4, 3, 8, 0.65);
            backdrop-filter: blur(6px);
            z-index: 3000;
            justify-content: flex-end;
            align-items: stretch;
        }
        .cart-modal.active { display: flex; }
        .cart-modal.active .cart-modal-content { animation: drawer-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes drawer-in {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
        .cart-modal .cart-modal-content {
            background: var(--panel);
            border-radius: 0;
            padding: 1.6rem 1.6rem 1.8rem;
            max-width: 440px;
            width: 100%;
            height: 100vh;
            max-height: 100vh;
            overflow-y: auto;
            border: none;
            border-left: 1px solid rgba(134, 87, 255, 0.2);
            box-shadow: -24px 0 60px rgba(0,0,0,0.5);
            position: relative;
            transform: translateX(100%);
            display: flex;
            flex-direction: column;
        }
        .cart-modal .cart-modal-content .close-modal {
            position: absolute;
            top: 1.2rem;
            right: 1.4rem;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9a93b8;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .cart-modal .cart-modal-content .close-modal:hover {
            color: #f2f0fa;
            background: rgba(255, 85, 119, 0.12);
            border-color: rgba(255, 85, 119, 0.3);
        }
        .cart-modal .cart-modal-content h2 {
            color: #f2f0fa;
            font-size: 1.4rem;
            margin-bottom: 1.2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.7rem;
            flex-shrink: 0;
        }
        .cart-modal .cart-modal-content h2 i {
            color: #8657ff;
        }
        .cart-modal .cart-modal-content .cart-empty {
            color: #9a93b8;
            text-align: center;
            padding: 3rem 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .cart-modal .cart-modal-content .cart-empty i {
            font-size: 4rem;
            color: #6b6088;
            margin-bottom: 1rem;
            display: block;
        }
        .cart-modal .cart-modal-content .cart-empty .browse-link {
            color: #8657ff;
            cursor: pointer;
            font-weight: 600;
            display: inline-block;
            margin-top: 0.5rem;
        }
        .cart-modal .cart-modal-content .cart-empty .browse-link:hover {
            text-decoration: underline;
        }

        .cart-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.8rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .cart-item .cart-item-info {
            flex: 1;
        }
        .cart-item .cart-item-info .cart-item-name {
            color: #f2f0fa;
            font-weight: 600;
            font-size: 1rem;
        }
        .cart-item .cart-item-info .cart-item-price {
            color: #8657ff;
            font-weight: 600;
            font-size: 0.9rem;
        }
        .cart-item .cart-item-info .cart-item-sub {
            color: #9a93b8;
            font-size: 0.75rem;
        }
        .cart-item .cart-item-remove {
            background: rgba(255, 85, 119,0.1);
            border: none;
            color: #ff5577;
            padding: 0.4rem 0.8rem;
            border-radius: 40px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.8rem;
        }
        .cart-item .cart-item-remove:hover {
            background: rgba(255, 85, 119,0.2);
        }

        #cartTotal {
            position: sticky;
            bottom: -1.8rem;
            margin: 1rem -1.6rem -1.8rem;
            padding: 0.2rem 1.6rem 1.8rem;
            background: var(--panel);
            border-top: 1px solid var(--border);
            z-index: 2;
        }

        .cart-total {
            display: flex;
            justify-content: space-between;
            padding: 1rem 0;
            border-top: 2px solid rgba(134, 87, 255, 0.2);
            margin-top: 0.5rem;
            font-size: 1.2rem;
            font-weight: 700;
            color: #f2f0fa;
        }
        .cart-total .total-price {
            color: var(--gold);
            font-family: var(--font-display);
        }

        .cart-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        .cart-actions .btn {
            flex: 1;
            padding: 0.8rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        .cart-actions .btn-clear {
            background: rgba(255, 85, 119,0.1);
            color: #ff5577;
            border: 1px solid rgba(255, 85, 119,0.1);
        }
        .cart-actions .btn-clear:hover {
            background: rgba(255, 85, 119,0.2);
        }
        .cart-actions .btn-checkout {
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
        }
        .cart-actions .btn-checkout:hover:not(:disabled) {
            transform: scale(0.97);
            box-shadow: 0 6px 16px rgba(134, 87, 255, 0.14);
        }
        .cart-actions .btn-checkout:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
        }

        .cooldown-warning {
            background: rgba(240, 180, 41, 0.1);
            border: 1px solid rgba(240, 180, 41, 0.2);
            border-radius: 12px;
            padding: 0.8rem 1rem;
            margin-top: 0.8rem;
            color: #f0b429;
            font-size: 0.85rem;
            text-align: center;
        }
        .cooldown-warning i {
            margin-right: 8px;
        }

        .recommended-products {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        .recommended-products h3 {
            color: #9a93b8;
            font-size: 1rem;
            margin-bottom: 1rem;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .recommended-products h3 i {
            color: #f0b429;
        }
        .recommended-product {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.03);
        }
        .recommended-product .rec-info {
            display: flex;
            flex-direction: column;
        }
        .recommended-product .rec-info .rec-name {
            color: #c9b8ff;
            font-size: 0.9rem;
            font-weight: 500;
        }
        .recommended-product .rec-info .rec-price {
            color: #9a93b8;
            font-size: 0.8rem;
        }
        .recommended-product .rec-info .rec-tag {
            color: #6b6088;
            font-size: 0.7rem;
        }
        .recommended-product .rec-add {
            background: rgba(134, 87, 255, 0.1);
            border: 1px solid rgba(134, 87, 255, 0.15);
            color: #c9b8ff;
            padding: 0.3rem 1rem;
            border-radius: 40px;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
        }
        .recommended-product .rec-add:hover {
            background: rgba(134, 87, 255, 0.2);
        }

        .discord-notification {
            display: none;
            background: rgba(88, 101, 242, 0.15);
            border: 2px solid #5865F2;
            border-radius: 16px;
            padding: 1.5rem;
            margin: 1rem 0;
            text-align: center;
            animation: pulse-glow 2s ease-in-out infinite;
        }
        .discord-notification.show { display: block; }
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(88, 101, 242, 0.2); }
            50% { box-shadow: 0 0 40px rgba(88, 101, 242, 0.4); }
        }
        .discord-notification .discord-icon {
            font-size: 3rem;
            color: #5865F2;
            margin-bottom: 0.5rem;
        }
        .discord-notification h3 {
            color: #f2f0fa;
            font-size: 1.3rem;
            margin-bottom: 0.3rem;
        }
        .discord-notification p {
            color: #c9b8ff;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .discord-notification .btn-discord {
            display: inline-block;
            margin-top: 0.8rem;
            padding: 0.6rem 2rem;
            border-radius: 40px;
            background: #5865F2;
            color: white;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
        }
        .discord-notification .btn-discord:hover {
            transform: scale(0.97);
            box-shadow: 0 8px 30px rgba(88, 101, 242, 0.4);
        }

        /* Auth Modal */
        .auth-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(12px);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }
        .auth-modal.active { display: flex; }
        .auth-modal .modal {
            background: #150f28;
            border-radius: 32px;
            padding: 2.5rem;
            max-width: 440px;
            width: 90%;
            border: 1px solid rgba(134, 87, 255, 0.2);
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
            animation: slideUp 0.3s ease;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }
        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .auth-modal .modal .auth-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .auth-modal .modal .auth-header h2 {
            color: #f2f0fa;
            font-size: 1.6rem;
            font-weight: 700;
        }
        .auth-modal .modal .auth-header p {
            color: #9a93b8;
            font-size: 0.9rem;
            margin-top: 0.2rem;
        }
        .auth-modal .modal label {
            display: block;
            color: #9a93b8;
            font-size: 0.75rem;
            font-weight: 700;
            margin-top: 1rem;
            margin-bottom: 0.3rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }
        .auth-modal .modal input[type="text"],
        .auth-modal .modal input[type="email"],
        .auth-modal .modal input[type="password"] {
            width: 100%;
            padding: 0.8rem 1rem;
            border-radius: 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: #f2f0fa;
            font-size: 1rem;
            transition: border 0.3s;
            outline: none;
        }
        .auth-modal .modal input:focus {
            border-color: #8657ff;
        }
        .auth-modal .modal .btn-auth {
            width: 100%;
            padding: 0.8rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            margin-top: 1.2rem;
        }
        .auth-modal .modal .btn-auth:hover {
            transform: scale(0.97);
            box-shadow: 0 6px 16px rgba(134, 87, 255, 0.14);
        }
        .auth-modal .modal .auth-switch {
            text-align: center;
            margin-top: 1rem;
            color: #9a93b8;
            font-size: 0.9rem;
        }
        .auth-modal .modal .auth-switch a {
            color: #8657ff;
            font-weight: 600;
            cursor: pointer;
        }
        .auth-modal .modal .auth-switch a:hover {
            text-decoration: underline;
        }
        .auth-modal .modal .close-modal {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: #9a93b8;
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.3s;
        }
        .auth-modal .modal .close-modal:hover {
            color: #f2f0fa;
        }
        .auth-modal .modal .error-msg {
            color: #ff5577;
            font-size: 0.85rem;
            margin-top: 0.5rem;
            display: none;
            text-align: center;
        }
        .auth-modal .modal .error-msg.show {
            display: block;
        }

        /* Profile Modal */
        .profile-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(12px);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }
        .profile-modal.active { display: flex; }
        .profile-modal .modal {
            background: #150f28;
            border-radius: 32px;
            padding: 2.5rem;
            max-width: 520px;
            width: 90%;
            border: 1px solid rgba(134, 87, 255, 0.2);
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
            animation: slideUp 0.3s ease;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }
        .profile-modal .modal .close-modal {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: #9a93b8;
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.3s;
        }
        .profile-modal .modal .close-modal:hover {
            color: #f2f0fa;
        }
        .profile-modal .modal .profile-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .profile-modal .modal .profile-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8657ff, #4a1fa8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            flex-shrink: 0;
        }
        .profile-modal .modal .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        .avatar-edit-overlay {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: rgba(0,0,0,0.55);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .profile-avatar:hover .avatar-edit-overlay { opacity: 1; }
        .profile-modal .modal .profile-info h3 {
            color: #f2f0fa;
            font-size: 1.2rem;
        }
        .profile-modal .modal .profile-info p {
            color: #9a93b8;
            font-size: 0.85rem;
        }
        .profile-modal .modal .profile-info .rank-badge {
            display: inline-block;
            background: rgba(240, 180, 41, 0.15);
            color: #f0b429;
            padding: 0.15rem 0.8rem;
            border-radius: 40px;
            font-size: 0.7rem;
            font-weight: 600;
            border: 1px solid rgba(240, 180, 41, 0.2);
            margin-top: 0.3rem;
        }
        .profile-modal .modal label {
            display: block;
            color: #9a93b8;
            font-size: 0.75rem;
            font-weight: 700;
            margin-top: 1rem;
            margin-bottom: 0.3rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }
        .profile-modal .modal input[type="text"],
        .profile-modal .modal input[type="email"],
        .profile-modal .modal input[type="date"],
        .profile-modal .modal input[type="tel"] {
            width: 100%;
            padding: 0.8rem 1rem;
            border-radius: 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: #f2f0fa;
            font-size: 1rem;
            transition: border 0.3s;
            outline: none;
        }
        .profile-modal .modal input:focus {
            border-color: #8657ff;
        }
        .profile-modal .modal .btn-save {
            width: 100%;
            padding: 0.8rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            margin-top: 1.2rem;
        }
        .profile-modal .modal .btn-save:hover {
            transform: scale(0.97);
            box-shadow: 0 6px 16px rgba(134, 87, 255, 0.14);
        }
        .profile-modal .modal .twofa-section {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .profile-modal .modal .twofa-section h4 {
            color: #f2f0fa;
            font-size: 1rem;
            margin-bottom: 0.3rem;
        }
        .profile-modal .modal .twofa-section p {
            color: #9a93b8;
            font-size: 0.85rem;
            margin-bottom: 0.8rem;
        }
        .profile-modal .modal .twofa-status {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            background: rgba(255,255,255,0.03);
            padding: 0.6rem 1rem;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .profile-modal .modal .twofa-status .status-off {
            color: #ff5577;
            font-weight: 600;
            font-size: 0.85rem;
        }
        .profile-modal .modal .twofa-status .status-on {
            color: #34d399;
            font-weight: 600;
            font-size: 0.85rem;
        }
        .profile-modal .modal .btn-twofa {
            padding: 0.5rem 1.5rem;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.85rem;
            border: 1px solid rgba(134, 87, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s;
            background: rgba(134, 87, 255, 0.1);
            color: #c9b8ff;
            margin-top: 0.8rem;
        }
        .profile-modal .modal .btn-twofa:hover {
            background: rgba(134, 87, 255, 0.2);
        }

        .profile-modal .modal .btn-signout {
            width: 100%;
            margin-top: 1.4rem;
            padding: 0.75rem 0;
            border-radius: var(--radius-sm, 8px);
            font-weight: 600;
            font-size: 0.88rem;
            border: 1px solid rgba(255, 85, 119, 0.25);
            background: rgba(255, 85, 119, 0.08);
            color: #ff5577;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.25s ease;
        }
        .profile-modal .modal .btn-signout:hover {
            background: rgba(255, 85, 119, 0.16);
            border-color: rgba(255, 85, 119, 0.45);
        }

        /* Payment Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
        }
        .modal-overlay.active { display: flex; }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal {
            background: #150f28;
            border-radius: 32px;
            padding: 2.5rem;
            max-width: 520px;
            width: 90%;
            border: 1px solid rgba(134, 87, 255, 0.2);
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
            animation: slideUp 0.3s ease;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }
        .modal h2 {
            font-size: 1.8rem;
            margin-bottom: 0.3rem;
            color: #f2f0fa;
        }
        .modal .product-name {
            color: #8657ff;
            font-weight: 600;
            font-size: 1.1rem;
        }
        .modal .product-price {
            color: #c9b8ff;
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
        }
        .modal label {
            display: block;
            color: #9a93b8;
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 1rem;
            margin-bottom: 0.3rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .modal input, .modal select {
            width: 100%;
            padding: 0.8rem 1rem;
            border-radius: 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: #f2f0fa;
            font-size: 1rem;
            transition: border 0.3s;
            outline: none;
        }
        .modal input:focus, .modal select:focus {
            border-color: #8657ff;
            box-shadow: 0 0 0 3px rgba(134, 87, 255, 0.15);
        }
        .modal select option { background: #150f28; }

        .payment-methods {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin: 0.5rem 0 1rem;
        }
        .payment-methods label {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.04);
            padding: 0.5rem 1.2rem;
            border-radius: 40px;
            border: 1px solid rgba(255,255,255,0.06);
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            font-size: 0.85rem;
            color: #9a93b8;
            text-transform: none;
            margin: 0;
        }
        .payment-methods label:hover {
            background: rgba(134, 87, 255, 0.08);
            border-color: rgba(134, 87, 255, 0.2);
        }
        .payment-methods input[type="radio"] {
            display: none;
        }
        .payment-methods input[type="radio"]:checked + label {
            background: rgba(134, 87, 255, 0.15);
            border-color: #8657ff;
            color: #c9b8ff;
        }
        .payment-methods label i { color: #8657ff; }

        .payment-info {
            background: rgba(134, 87, 255, 0.06);
            border: 1px solid rgba(134, 87, 255, 0.12);
            border-radius: 16px;
            padding: 1rem 1.2rem;
            margin: 1rem 0;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .payment-info i {
            font-size: 1.5rem;
            color: #8657ff;
        }
        .payment-info .info-text {
            color: #c9b8ff;
            font-size: 0.95rem;
        }
        .payment-info .info-text strong {
            color: #f2f0fa;
            font-size: 1.1rem;
            letter-spacing: 1px;
        }

        /* ── Checkout Modal (Billing / Order Summary / Payment) ── */
        .checkout-modal .modal {
            max-width: 960px;
        }
        .checkout-modal .close-modal {
            position: absolute;
            top: 1.2rem;
            right: 1.2rem;
            background: rgba(255,255,255,0.06);
            border: none;
            color: #9a93b8;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s;
        }
        .checkout-modal .close-modal:hover {
            background: rgba(255, 85, 119,0.15);
            color: #ff5577;
        }
        .checkout-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 1.5rem;
            align-items: start;
        }
        .billing-card, .order-summary-card, .payment-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 20px;
            padding: 1.5rem;
        }
        .payment-card {
            margin-top: 1.5rem;
        }
        .card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.15rem;
            color: #f2f0fa;
            margin: 0 0 1.2rem;
        }
        .card-title i {
            color: #8657ff;
        }
        .checkout-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .checkout-grid .modal input {
            margin-bottom: 0;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            color: #c9b8ff;
            font-size: 0.95rem;
            padding: 0.5rem 0;
        }
        .summary-price {
            color: #8657ff;
            font-weight: 700;
        }
        .summary-divider {
            height: 1px;
            background: rgba(255,255,255,0.08);
            margin: 0.5rem 0;
        }
        .summary-total {
            font-size: 1.1rem;
            font-weight: 700;
            color: #f2f0fa;
        }
        .summary-total .summary-price {
            font-size: 1.3rem;
            color: var(--gold);
        }
        .btn-place-order {
            width: 100%;
            justify-content: center;
        }
        @media (max-width: 720px) {
            .checkout-grid { grid-template-columns: 1fr; }
            .checkout-row { grid-template-columns: 1fr; }
        }
        .payment-info .info-text small {
            display: block;
            color: #9a93b8;
            font-size: 0.8rem;
            margin-top: 2px;
        }

        .order-id-badge {
            display: inline-block;
            background: rgba(134, 87, 255, 0.15);
            border: 1px solid rgba(134, 87, 255, 0.2);
            border-radius: 40px;
            padding: 0.3rem 1.2rem;
            font-size: 0.85rem;
            color: #c9b8ff;
            margin-bottom: 1rem;
        }
        .order-id-badge strong {
            color: #f2f0fa;
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
        }

        .modal-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .modal-actions .btn {
            flex: 1;
            padding: 0.8rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-confirm {
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
        }
        .btn-confirm:hover { transform: scale(0.97); box-shadow: 0 6px 16px rgba(134, 87, 255, 0.14); }
        .btn-cancel {
            background: rgba(255,255,255,0.05);
            color: #9a93b8;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .btn-cancel:hover { background: rgba(255,255,255,0.08); }

        .order-status {
            text-align: center;
            padding: 1.5rem;
        }
        .order-status .big-icon {
            font-size: 4rem;
            color: #34d399;
            margin-bottom: 1rem;
        }
        .order-status h3 { color: #f2f0fa; margin-bottom: 0.3rem; }
        .order-status p { color: #9a93b8; }
        .order-status .status-details {
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
            padding: 1rem;
            margin: 1rem 0;
            text-align: left;
            font-size: 0.9rem;
            color: #a79fc4;
            border: 1px solid rgba(255,255,255,0.05);
        }
        .order-status .status-details strong {
            color: #c9b8ff;
        }

        .login-required {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 1500;
            justify-content: center;
            align-items: center;
        }
        .login-required.active { display: flex; }
        .login-required .modal {
            background: #150f28;
            border-radius: 32px;
            padding: 2.5rem;
            max-width: 420px;
            width: 90%;
            border: 1px solid rgba(134, 87, 255, 0.2);
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
            text-align: center;
            animation: slideUp 0.3s ease;
        }
        .login-required .modal .big-icon {
            font-size: 4rem;
            color: #8657ff;
            margin-bottom: 0.5rem;
        }
        .login-required .modal h2 {
            color: #f2f0fa;
            font-size: 1.6rem;
            margin-bottom: 0.5rem;
        }
        .login-required .modal p {
            color: #9a93b8;
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
        }
        .login-required .modal .btn {
            padding: 0.8rem 2.5rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        .login-required .btn-primary {
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
        }
        .login-required .btn-primary:hover {
            transform: scale(0.97);
            box-shadow: 0 6px 16px rgba(134, 87, 255, 0.14);
        }
        .login-required .btn-secondary {
            background: rgba(255,255,255,0.05);
            color: #9a93b8;
            border: 1px solid rgba(255,255,255,0.06);
            margin-left: 0.8rem;
        }
        .login-required .btn-secondary:hover {
            background: rgba(255,255,255,0.08);
        }

        .image-upload-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 2500;
            justify-content: center;
            align-items: center;
        }
        .image-upload-modal.active { display: flex; }
        .image-upload-modal .modal {
            background: #150f28;
            border-radius: 32px;
            padding: 2.5rem;
            max-width: 420px;
            width: 90%;
            border: 1px solid rgba(134, 87, 255, 0.2);
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
            text-align: center;
            animation: slideUp 0.3s ease;
        }
        .image-upload-modal .modal .big-icon {
            font-size: 3rem;
            color: #8657ff;
            margin-bottom: 0.5rem;
        }
        .image-upload-modal .modal h2 {
            color: #f2f0fa;
            font-size: 1.4rem;
            margin-bottom: 0.5rem;
        }
        .image-upload-modal .modal p {
            color: #9a93b8;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
        }
        .image-upload-modal .modal input[type="file"] {
            width: 100%;
            padding: 1rem;
            border-radius: 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: #f2f0fa;
            font-size: 0.9rem;
            cursor: pointer;
        }
        .image-upload-modal .modal input[type="file"]::file-selector-button {
            padding: 0.4rem 1.2rem;
            border-radius: 40px;
            border: none;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            font-weight: 600;
            cursor: pointer;
        }
        .image-upload-modal .modal-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .image-upload-modal .modal-actions .btn {
            flex: 1;
            padding: 0.8rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }

        .server-section {
            background: rgba(255, 255, 255, 0.02);
            padding: 3rem 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.04);
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            margin: 0.5rem 0;
        }
        .server-wrap {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
        }
        .server-text { flex: 2; min-width: 250px; }
        .server-text h3 {
            font-size: 2.2rem;
            display: flex;
            align-items: center;
            gap: 14px;
            color: #f2f0fa;
        }
        .server-text h3 i { color: #8657ff; }
        .server-text p {
            color: #9a93b8;
            margin: 0.5rem 0 1rem;
            font-size: 1.05rem;
            line-height: 1.7;
        }
        .stats {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 0.5rem;
        }
        .stats div {
            background: rgba(255, 255, 255, 0.03);
            padding: 0.4rem 1.4rem;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-left: 3px solid #8657ff;
        }
        .stats span { font-weight: 600; color: #c9b8ff; }

        .server-cta {
            flex: 1;
            min-width: 200px;
            background: rgba(255, 255, 255, 0.03);
            padding: 2rem;
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            text-align: center;
            backdrop-filter: blur(8px);
        }
        .server-cta .big-icon { font-size: 3rem; color: #8657ff; }
        .server-cta h4 { font-size: 1.5rem; margin: 0.2rem 0; color: #f2f0fa; }
        .server-cta .btn {
            background: linear-gradient(135deg, #34d399, #1fae70);
            color: white;
            padding: 0.8rem 0;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: none;
            width: 100%;
            margin-top: 0.8rem;
            transition: all 0.3s;
            cursor: pointer;
        }
        .server-cta .btn:hover {
            transform: scale(0.97);
            box-shadow: 0 8px 30px rgba(52, 211, 153, 0.3);
        }

        .footer {
            background: rgba(10, 8, 18, 0.6);
            padding: 1.5rem 2rem;
            margin-top: auto;
            border-top: 1px solid rgba(255, 255, 255, 0.04);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        .footer .social { display: flex; gap: 1.5rem; }
        .footer .social a {
            color: #6a5a8a;
            font-size: 1.4rem;
            transition: all 0.3s;
        }
        .footer .social a:hover { color: #8657ff; transform: scale(1.1); }
        .footer .copy { color: #6b6088; font-size: 0.9rem; }
        .analytics-disclosure {
            color: var(--text-faint);
            font-size: 0.72rem;
            max-width: 480px;
            line-height: 1.5;
            margin-top: 0.4rem;
        }
        .footer .copy i { color: #8657ff; }

        .my-orders-section {
            margin-top: 2rem;
            padding: 0 2rem 2rem;
        }
        .my-orders-section h2 {
            color: #f2f0fa;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        .my-orders-section h2 i {
            color: #8657ff;
        }
        .order-item {
            background: rgba(255,255,255,0.03);
            border-radius: 16px;
            padding: 1.2rem 1.5rem;
            border: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 0.8rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
        }
        .order-item:hover {
            border-color: rgba(134, 87, 255,0.2);
            background: rgba(255,255,255,0.05);
        }
        .order-item .order-info {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .order-item .order-info .order-id {
            color: #8657ff;
            font-weight: 600;
            font-size: 0.9rem;
        }
        .order-item .order-info .order-product {
            color: #f2f0fa;
            font-weight: 500;
        }
        .order-item .order-info .order-status {
            font-size: 0.8rem;
            padding: 0.15rem 0.8rem;
            border-radius: 40px;
            display: inline-block;
            width: fit-content;
        }
        .order-item .order-info .order-status.pending {
            background: rgba(240, 180, 41,0.15);
            color: #f0b429;
        }
        .order-item .order-info .order-status.accepted {
            background: rgba(52, 211, 153,0.15);
            color: #34d399;
        }
        .order-item .order-info .order-status.rejected {
            background: rgba(255, 85, 119,0.15);
            color: #ff5577;
        }
        .order-item .order-account {
            background: rgba(134, 87, 255,0.08);
            border: 1px solid rgba(134, 87, 255,0.15);
            border-radius: 12px;
            padding: 0.8rem 1.2rem;
            font-size: 0.85rem;
            color: #c9b8ff;
            max-width: 300px;
            word-break: break-all;
        }
        .order-item .order-account strong {
            color: #f2f0fa;
        }
        .order-item .order-account .copy-btn {
            background: rgba(134, 87, 255,0.15);
            border: none;
            color: #c9b8ff;
            padding: 0.2rem 0.6rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.7rem;
            transition: all 0.2s;
            margin-left: 0.5rem;
        }
        .order-item .order-account .copy-btn:hover {
            background: rgba(134, 87, 255,0.3);
        }

        .my-tickets-section {
            margin-top: 2rem;
            padding: 0 2rem 2rem;
        }
        .my-tickets-section h2 {
            color: #f2f0fa;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        .my-tickets-section h2 i {
            color: #8657ff;
        }
        .ticket-item {
            background: rgba(255,255,255,0.03);
            border-radius: 16px;
            padding: 1.2rem 1.5rem;
            border: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 0.8rem;
            transition: all 0.3s;
        }
        .ticket-item:hover {
            border-color: rgba(134, 87, 255,0.2);
            background: rgba(255,255,255,0.05);
        }
        .ticket-item .ticket-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .ticket-item .ticket-title {
            color: #f2f0fa;
            font-weight: 600;
            font-size: 1rem;
        }
        .ticket-item .ticket-date {
            color: #9a93b8;
            font-size: 0.8rem;
        }
        .ticket-item .ticket-status {
            font-size: 0.8rem;
            padding: 0.15rem 0.8rem;
            border-radius: 40px;
            display: inline-block;
            width: fit-content;
        }
        .ticket-item .ticket-status.open {
            background: rgba(240, 180, 41,0.15);
            color: #f0b429;
        }
        .ticket-item .ticket-status.resolved {
            background: rgba(52, 211, 153,0.15);
            color: #34d399;
        }
        .ticket-item .ticket-message {
            color: #a79fc4;
            font-size: 0.9rem;
            margin-top: 0.5rem;
            word-break: break-word;
        }

        .admin-tickets-section {
            padding: 2rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }
        .admin-tickets-section h2 {
            color: #f2f0fa;
            font-size: 1.8rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        .admin-tickets-section h2 i {
            color: #8657ff;
        }
        .admin-tickets-section .ticket-item-admin {
            background: rgba(255,255,255,0.03);
            border-radius: 16px;
            padding: 1.2rem 1.5rem;
            border: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 0.8rem;
            transition: all 0.3s;
        }
        .admin-tickets-section .ticket-item-admin:hover {
            border-color: rgba(134, 87, 255,0.2);
            background: rgba(255,255,255,0.05);
        }
        .admin-tickets-section .ticket-item-admin .ticket-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .admin-tickets-section .ticket-item-admin .ticket-title {
            color: #f2f0fa;
            font-weight: 600;
            font-size: 1rem;
        }
        .admin-tickets-section .ticket-item-admin .ticket-user {
            color: #9a93b8;
            font-size: 0.85rem;
        }
        .admin-tickets-section .ticket-item-admin .ticket-status {
            font-size: 0.8rem;
            padding: 0.15rem 0.8rem;
            border-radius: 40px;
            display: inline-block;
            width: fit-content;
        }
        .admin-tickets-section .ticket-item-admin .ticket-status.open {
            background: rgba(240, 180, 41,0.15);
            color: #f0b429;
        }
        .admin-tickets-section .ticket-item-admin .ticket-status.resolved {
            background: rgba(52, 211, 153,0.15);
            color: #34d399;
        }
        .admin-tickets-section .ticket-item-admin .ticket-message {
            color: #a79fc4;
            font-size: 0.9rem;
            margin-top: 0.5rem;
            word-break: break-word;
        }
        .admin-tickets-section .ticket-item-admin .ticket-image {
            margin-top: 0.5rem;
            max-width: 200px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .admin-tickets-section .ticket-item-admin .ticket-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .admin-tickets-section .ticket-item-admin .ticket-actions button {
            padding: 0.3rem 1rem;
            border-radius: 40px;
            border: none;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        .admin-tickets-section .ticket-item-admin .ticket-actions .btn-resolve {
            background: linear-gradient(135deg, #34d399, #1fae70);
            color: white;
        }
        .admin-tickets-section .ticket-item-admin .ticket-actions .btn-resolve:hover {
            transform: scale(0.95);
        }
        .admin-tickets-section .ticket-item-admin .ticket-actions .btn-delete {
            background: rgba(255, 85, 119,0.2);
            color: #ff5577;
        }
        .admin-tickets-section .ticket-item-admin .ticket-actions .btn-delete:hover {
            background: rgba(255, 85, 119,0.3);
        }

        .support-form-container {
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }
        .support-form-container .support-header {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 0.5rem;
        }
        .support-form-container .support-header i {
            font-size: 2rem;
            color: #8657ff;
        }
        .support-form-container .support-header h2 {
            color: #f2f0fa;
            font-size: 1.8rem;
            font-weight: 700;
        }
        .support-form-container .support-sub {
            color: #9a93b8;
            margin-bottom: 2rem;
            font-size: 0.95rem;
        }
        .support-form-container label {
            display: block;
            color: #c9b8ff;
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 1.2rem;
            margin-bottom: 0.4rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .support-form-container input,
        .support-form-container textarea,
        .support-form-container select {
            width: 100%;
            padding: 0.8rem 1rem;
            border-radius: 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: #f2f0fa;
            font-size: 1rem;
            transition: border 0.3s;
            outline: none;
        }
        .support-form-container input:focus,
        .support-form-container textarea:focus,
        .support-form-container select:focus {
            border-color: #8657ff;
        }
        .support-form-container select option {
            background: #150f28;
        }
        .support-form-container textarea {
            min-height: 150px;
            resize: vertical;
        }
        .support-form-container .image-upload-area {
            border: 2px dashed rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 0.5rem;
            background: rgba(255,255,255,0.02);
        }
        .support-form-container .image-upload-area:hover {
            border-color: rgba(134, 87, 255,0.3);
            background: rgba(134, 87, 255,0.05);
        }
        .support-form-container .image-upload-area i {
            font-size: 2.5rem;
            color: #8657ff;
            margin-bottom: 0.5rem;
        }
        .support-form-container .image-upload-area p {
            color: #9a93b8;
        }
        .support-form-container .image-upload-area .file-info {
            color: #6b6088;
            font-size: 0.8rem;
            margin-top: 0.3rem;
        }
        .support-form-container .image-upload-area input[type="file"] {
            display: none;
        }
        .support-form-container .btn-submit {
            width: 100%;
            padding: 0.9rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            margin-top: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .support-form-container .btn-submit:hover {
            transform: scale(0.97);
            box-shadow: 0 6px 16px rgba(134, 87, 255, 0.14);
        }
        .support-form-container .btn-submit:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        .support-form-container .success-message {
            display: none;
            background: rgba(52, 211, 153,0.1);
            border: 1px solid rgba(52, 211, 153,0.2);
            border-radius: 16px;
            padding: 1.5rem;
            text-align: center;
            margin-top: 1.5rem;
        }
        .support-form-container .success-message i {
            font-size: 3rem;
            color: #34d399;
            margin-bottom: 0.5rem;
        }
        .support-form-container .success-message h3 {
            color: #f2f0fa;
            margin-bottom: 0.3rem;
        }
        .support-form-container .success-message p {
            color: #9a93b8;
        }
        .support-form-container .success-message.show {
            display: block;
        }

        .no-results {
            text-align: center;
            padding: 2rem;
            color: #9a93b8;
            grid-column: 1 / -1;
        }
        .no-results i {
            font-size: 3rem;
            color: #6b6088;
            margin-bottom: 0.5rem;
            display: block;
        }

        .delivery-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(12px);
            z-index: 4000;
            justify-content: center;
            align-items: center;
        }
        .delivery-modal.active { display: flex; }
        .delivery-modal .delivery-content {
            background: #150f28;
            border-radius: 32px;
            padding: 2.5rem;
            max-width: 500px;
            width: 90%;
            border: 1px solid rgba(134, 87, 255, 0.2);
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
            animation: slideUp 0.3s ease;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }
        .delivery-modal .delivery-content .close-modal {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: #9a93b8;
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.3s;
        }
        .delivery-modal .delivery-content .close-modal:hover {
            color: #f2f0fa;
        }
        .delivery-modal .delivery-content h2 {
            color: #f2f0fa;
            font-size: 1.6rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        .delivery-modal .delivery-content h2 i {
            color: #f0b429;
        }
        .delivery-modal .delivery-content .order-info-box {
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
            padding: 1rem;
            margin: 1rem 0;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .delivery-modal .delivery-content .order-info-box p {
            color: #c9b8ff;
            font-size: 0.95rem;
            margin: 0.3rem 0;
        }
        .delivery-modal .delivery-content .order-info-box strong {
            color: #f2f0fa;
        }
        .delivery-modal .delivery-content label {
            display: block;
            color: #9a93b8;
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 1rem;
            margin-bottom: 0.3rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .delivery-modal .delivery-content input {
            width: 100%;
            padding: 0.8rem 1rem;
            border-radius: 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: #f2f0fa;
            font-size: 1rem;
            transition: border 0.3s;
            outline: none;
        }
        .delivery-modal .delivery-content input:focus {
            border-color: #8657ff;
        }
        .delivery-modal .delivery-content .delivery-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .delivery-modal .delivery-content .delivery-actions .btn {
            flex: 1;
            padding: 0.8rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        .delivery-modal .delivery-content .delivery-actions .btn-send {
            background: linear-gradient(135deg, #34d399, #1fae70);
            color: white;
        }
        .delivery-modal .delivery-content .delivery-actions .btn-send:hover {
            transform: scale(0.97);
            box-shadow: 0 8px 30px rgba(52, 211, 153, 0.3);
        }
        .delivery-modal .delivery-content .delivery-actions .btn-cancel-delivery {
            background: rgba(255,255,255,0.05);
            color: #9a93b8;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .delivery-modal .delivery-content .delivery-actions .btn-cancel-delivery:hover {
            background: rgba(255,255,255,0.08);
        }

        @media (max-width: 700px) {
            .header { padding: 0.8rem 1.2rem; flex-direction: column; align-items: start; gap: 0.6rem; }
            .hero h2 { font-size: 2rem; }
            .server-wrap { flex-direction: column; }
            .page-nav { padding: 0.6rem 1rem; }
            .page-nav a { padding: 0.55rem 1rem 0.55rem 0.8rem; font-size: 0.8rem; }
            .grid { padding: 0.5rem 1rem 2rem; gap: 1.2rem; }
            .modal { padding: 1.8rem; }
            .payment-info { flex-direction: column; text-align: center; }
            .logo-svg { width: 42px; height: 42px; }
            .logo-text .optimizers { font-size: 1.4rem; }
            .header-right { width: 100%; justify-content: flex-start; }
            .login-required .modal .btn { padding: 0.6rem 1.5rem; font-size: 0.9rem; }
            .account-image-wrapper { aspect-ratio: 16 / 10; }
            .auth-modal .modal { padding: 1.5rem; max-width: 100%; margin: 0.5rem; }
            .cart-modal .cart-modal-content { max-width: 100%; }
            .cart-item { flex-wrap: wrap; }
            .btn-buy-wrapper { flex-direction: column; }
            .search-container .search-box { flex-wrap: wrap; padding: 0.5rem; }
            .search-container .search-box input { width: 100%; padding: 0.5rem; }
            .search-container .search-box button { width: 100%; }
            .order-item { flex-direction: column; align-items: stretch; gap: 0.8rem; }
            .order-item .order-account { max-width: 100%; }
            .ticket-item .ticket-header { flex-direction: column; align-items: flex-start; }
            .admin-tickets-section { padding: 1rem; }
            .cart-actions { flex-direction: column; }
            .delivery-modal .delivery-content { padding: 1.5rem; }
            .delivery-modal .delivery-content .delivery-actions { flex-direction: column; }
        }

        /* ===== Toast Notifications ===== */
        #toast-stack {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: min(380px, calc(100vw - 32px));
            pointer-events: none;
        }
        .toast {
            pointer-events: auto;
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: #ffffff;
            color: #211a35;
            border-radius: 14px;
            padding: 14px 16px 14px 14px;
            box-shadow: 0 12px 32px -8px rgba(80, 40, 160, 0.25), 0 2px 8px rgba(80, 40, 160, 0.08);
            border: 1px solid rgba(134, 87, 255, 0.15);
            border-left: 4px solid #8657ff;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-16px) scale(0.97);
            animation: toast-in 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
        }
        .toast.toast-leaving {
            animation: toast-out 0.28s ease forwards;
        }
        @keyframes toast-in {
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes toast-out {
            to { opacity: 0; transform: translateY(-10px) scale(0.97); }
        }
        .toast .toast-icon {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #8657ff;
            color: #ffffff;
            font-size: 0.78rem;
            margin-top: 1px;
        }
        .toast.toast-error .toast-icon { background: #ff3355; }
        .toast.toast-warning .toast-icon { background: #f0b429; }
        .toast.toast-info .toast-icon { background: #8657ff; }
        .toast.toast-error { border-left-color: #ff3355; }
        .toast.toast-warning { border-left-color: #f0b429; }
        .toast .toast-body {
            flex: 1;
            font-size: 0.9rem;
            line-height: 1.45;
            font-weight: 500;
            padding-top: 2px;
        }
        .toast .toast-close {
            flex-shrink: 0;
            background: none;
            border: none;
            color: #a0a5c0;
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
            padding: 2px;
            border-radius: 6px;
            transition: all 0.2s;
        }
        .toast .toast-close:hover { color: #8657ff; background: rgba(134, 87, 255, 0.1); }
        .toast .toast-bar {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            background: linear-gradient(90deg, #8657ff, #b79bff);
            width: 100%;
            transform-origin: left;
            animation: toast-shrink linear forwards;
        }
        .toast.toast-error .toast-bar { background: linear-gradient(90deg, #ff3355, #ff7d95); }
        .toast.toast-warning .toast-bar { background: linear-gradient(90deg, #f0b429, #ffd873); }
        @keyframes toast-shrink {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }
        @media (max-width: 480px) {
            #toast-stack { top: 12px; width: calc(100vw - 20px); }
        }

        /* ===== View Details Button (product card) ===== */
        .btn-view-details {
            width: 100%;
            background: rgba(240, 180, 41, 0.1);
            border: 1px solid rgba(240, 180, 41, 0.25);
            color: var(--gold);
            padding: 0.6rem 0;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            margin-bottom: 0.7rem;
            transition: all 0.25s ease;
        }
        .btn-view-details:hover {
            background: rgba(240, 180, 41, 0.18);
            border-color: rgba(240, 180, 41, 0.4);
            transform: translateY(-1px);
        }

        /* ===== Fortnite Account Gallery Modal ===== */
        .gallery-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(4, 3, 8, 0.85);
            backdrop-filter: blur(6px);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }
        .gallery-modal.active { display: flex; }
        .gallery-modal-content {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 2rem;
            max-width: 720px;
            width: 100%;
            max-height: 92vh;
            overflow-y: auto;
            position: relative;
        }
        .gallery-modal-content h2 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.4rem;
            color: var(--text);
        }
        .gallery-modal-content h2 i { color: var(--gold); margin-right: 8px; }
        .gallery-sub {
            color: var(--text-muted);
            font-size: 0.88rem;
            line-height: 1.5;
            margin-bottom: 1.2rem;
        }
        .gallery-viewer {
            position: relative;
            border-radius: var(--radius-md);
            overflow: hidden;
            background: #000;
            border: 1px solid var(--border);
            aspect-ratio: 16 / 9;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gallery-viewer img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #05070d;
        }
        .gallery-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.15);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            z-index: 2;
        }
        .gallery-nav:hover { background: var(--primary); border-color: var(--primary); }
        .gallery-prev { left: 12px; }
        .gallery-next { right: 12px; }
        .gallery-counter {
            position: absolute;
            bottom: 10px;
            right: 12px;
            background: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
        }
        .gallery-thumbs {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            margin-top: 1rem;
        }
        .gallery-thumbs img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            opacity: 0.6;
            transition: all 0.2s;
        }
        .gallery-thumbs img:hover { opacity: 0.9; }
        .gallery-thumbs img.active {
            border-color: var(--primary);
            opacity: 1;
        }
        @media (max-width: 600px) {
            .gallery-thumbs { grid-template-columns: repeat(5, 1fr); }
            .gallery-modal-content { padding: 1.2rem; }
        }

        /* ===== Scroll to Top ===== */
        .scroll-top-btn {
            position: fixed;
            bottom: 24px;
            left: 24px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: 0 6px 14px rgba(134, 87, 255, 0.16);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 500;
        }
        .scroll-top-btn.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .scroll-top-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(134, 87, 255, 0.2);
        }
        @media (max-width: 600px) {
            .scroll-top-btn { bottom: 16px; left: 16px; width: 42px; height: 42px; }
        }

        /* ===== FAQ Accordion ===== */
        .faq-container {
            max-width: 720px;
            margin: 0 auto 2rem;
            padding: 0 1rem;
        }
        .faq-container h2 {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 1.2rem;
            color: var(--text);
        }
        .faq-container h2 i { color: var(--primary-light); margin-right: 8px; }
        .faq-item {
            background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            margin-bottom: 0.7rem;
            overflow: hidden;
        }
        .faq-question {
            width: 100%;
            background: none;
            border: none;
            color: var(--text);
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 0.95rem;
            padding: 1rem 1.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            text-align: left;
            gap: 1rem;
        }
        .faq-question i {
            color: var(--primary-light);
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }
        .faq-item.open .faq-question i { transform: rotate(180deg); }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .faq-item.open .faq-answer { max-height: 200px; }
        .faq-answer p {
            padding: 0 1.2rem 1.1rem;
            color: var(--text-muted);
            font-size: 0.88rem;
            line-height: 1.6;
        }

        /* ===== Order Status Timeline ===== */
        .order-timeline {
            display: flex;
            align-items: flex-start;
            padding: 1rem 0.4rem 0.4rem;
            margin-top: 0.4rem;
        }
        .timeline-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
            width: 84px;
        }
        .timeline-dot {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            background: rgba(255,255,255,0.05);
            border: 2px solid var(--border);
            color: var(--text-faint);
            transition: all 0.3s ease;
        }
        .timeline-step.active .timeline-dot {
            background: rgba(134, 87, 255, 0.15);
            border-color: var(--primary);
            color: var(--primary-light);
            animation: timeline-pulse 1.6s ease-in-out infinite;
        }
        .timeline-step.done .timeline-dot {
            background: var(--success);
            border-color: var(--success);
            color: #08060f;
        }
        @keyframes timeline-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(134, 87, 255, 0.35); }
            50% { box-shadow: 0 0 0 6px rgba(134, 87, 255, 0); }
        }
        .timeline-label {
            font-size: 0.68rem;
            color: var(--text-muted);
            text-align: center;
            margin-top: 6px;
            line-height: 1.3;
        }
        .timeline-step.done .timeline-label,
        .timeline-step.active .timeline-label {
            color: var(--text);
            font-weight: 600;
        }
        .timeline-line {
            flex: 1;
            height: 2px;
            background: var(--border);
            margin-top: 15px;
            min-width: 20px;
            transition: background 0.3s ease;
        }
        .timeline-line.done { background: var(--success); }
        .timeline-rejected-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 51, 85, 0.1);
            border: 1px solid rgba(255, 51, 85, 0.25);
            color: var(--danger);
            padding: 0.5rem 1rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.85rem;
        }
        @media (max-width: 480px) {
            .timeline-step { width: 64px; }
            .timeline-label { font-size: 0.6rem; }
        }

        /* ===== Section Headers ===== */
        .section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            max-width: 1300px;
            margin: 0.5rem auto 1.3rem;
            padding: 0 2rem;
        }
        .section-header i {
            font-size: 1.4rem;
            color: var(--primary-light);
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(134,87,255,0.18), rgba(134,87,255,0.05));
            border: 1px solid rgba(134,87,255,0.2);
            flex-shrink: 0;
        }
        .section-header h2 {
            font-family: var(--font-display);
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.2rem;
        }
        .section-header p {
            color: var(--text-muted);
            font-size: 0.88rem;
        }
        @media (max-width: 600px) {
            .section-header { padding: 0 1rem; gap: 0.7rem; }
            .section-header i { width: 42px; height: 42px; font-size: 1.1rem; }
            .section-header h2 { font-size: 1.1rem; }
            .section-header p { font-size: 0.8rem; }
        }

        /* ===== Scroll Reveal ===== */
        .card.reveal {
            opacity: 0;
            transform: translateY(24px);
        }
        .card.reveal.in-view {
            animation: reveal-up 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
        }
        @keyframes reveal-up {
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== Field Hint ===== */
        .field-hint {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.8rem;
            color: var(--text);
            line-height: 1.5;
            margin: 0.6rem 0 1.1rem;
            padding: 0.7rem 0.9rem;
            background: rgba(134, 87, 255, 0.08);
            border: 1px solid rgba(134, 87, 255, 0.22);
            border-radius: var(--radius-sm);
        }
        .field-hint i {
            color: var(--primary-light);
            background: rgba(134, 87, 255, 0.18);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .field-hint strong { color: var(--primary-light); font-weight: 700; }

        /* ===== Order Feedback / Rating ===== */
        .btn-rate-order {
            width: 100%;
            margin-top: 0.7rem;
            background: rgba(240, 180, 41, 0.1);
            border: 1px solid rgba(240, 180, 41, 0.28);
            color: var(--gold);
            padding: 0.6rem 0;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        .btn-rate-order:hover {
            background: rgba(240, 180, 41, 0.18);
            transform: translateY(-1px);
        }
        .order-rated-badge {
            margin-top: 0.7rem;
            text-align: center;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--success);
        }

        .feedback-modal-content {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 2rem;
            max-width: 440px;
            width: 100%;
            position: relative;
        }
        .feedback-modal-content h2 {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.3rem;
            color: var(--text);
        }
        .feedback-modal-content h2 i { color: var(--primary-light); margin-right: 8px; }
        .feedback-stars {
            display: flex;
            justify-content: center;
            gap: 10px;
            font-size: 2.1rem;
            color: var(--primary-light);
            margin: 1.4rem 0 1.2rem;
        }
        .feedback-stars i {
            cursor: pointer;
            transition: transform 0.15s ease, filter 0.15s ease;
        }
        .feedback-stars i.fas {
            filter: drop-shadow(0 0 8px rgba(134, 87, 255, 0.55));
        }
        .feedback-stars i:hover { transform: scale(1.15); }
        .feedback-label {
            display: block;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }
        .feedback-textarea {
            width: 100%;
            min-height: 90px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 0.7rem 0.9rem;
            color: var(--text);
            font-family: var(--font-body);
            font-size: 0.88rem;
            resize: vertical;
        }
        .feedback-textarea:focus {
            outline: none;
            border-color: #8657ff;
            box-shadow: 0 0 0 3px rgba(134, 87, 255, 0.15);
        }

        /* ===== Gallery/Feedback Modal Close Button ===== */
        .gallery-modal .close-modal {
            position: absolute;
            top: 1.1rem;
            right: 1.2rem;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #b3aad0;
            font-size: 0.95rem;
            cursor: pointer;
            z-index: 3;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .gallery-modal .close-modal:hover {
            background: rgba(255, 85, 119, 0.15);
            border-color: rgba(255, 85, 119, 0.4);
            color: #ff5577;
            transform: rotate(90deg);
        }

        /* ===== Header Profile Button Avatar ===== */
        .profile-btn-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            vertical-align: middle;
            font-size: 1.1rem;
            background: rgba(134, 87, 255, 0.15);
        }
        .profile-btn-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ===== Order Accepted Modal ===== */
        .accepted-modal-content {
            text-align: center;
            animation: thankyou-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        .accepted-logo {
            width: 76px;
            height: 76px;
            border-radius: 20px;
            margin: 0.3rem auto 1.2rem;
            display: block;
            box-shadow: 0 6px 16px -4px rgba(134, 87, 255, 0.22);
        }
        .accepted-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(52, 211, 153, 0.08));
            border: 1px solid rgba(52, 211, 153, 0.35);
            color: #34d399;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }
        .accepted-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.4rem;
        }
        .accepted-modal-content .gallery-sub { text-align: center; }
        .accepted-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 0.7rem 1rem;
            margin-top: 0.7rem;
            text-align: left;
        }
        .accepted-label {
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .accepted-value {
            color: var(--text);
            font-weight: 600;
            font-size: 0.88rem;
            font-family: monospace;
            word-break: break-all;
            text-align: right;
        }
        .accepted-discord-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 1rem;
            background: rgba(88, 101, 242, 0.12);
            border: 1px solid rgba(88, 101, 242, 0.35);
            color: #5865F2;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 0.7rem;
            border-radius: var(--radius-sm);
            text-decoration: none;
            transition: all 0.2s ease;
        }
        .accepted-discord-link:hover { background: rgba(88, 101, 242, 0.2); }
        .accepted-note {
            color: var(--text-muted);
            font-size: 0.8rem;
            margin-top: 0.9rem;
            line-height: 1.5;
        }

        /* ===== Feedback Thank You View ===== */
        .feedback-thankyou {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0.5rem 0 0.8rem;
            animation: thankyou-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        @keyframes thankyou-in {
            from { opacity: 0; transform: scale(0.92); }
            to { opacity: 1; transform: scale(1); }
        }
        .feedback-thankyou-img {
            width: 120px;
            height: 120px;
            margin-bottom: 1rem;
        }
        .feedback-thankyou-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.4rem;
        }

        /* ═══════════════════════════════════════
           LIVE CHAT
        ═══════════════════════════════════════ */
        .live-chat-toggle-btn {
            position: fixed;
            bottom: 26px;
            right: 26px;
            z-index: 2500;
            display: flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            border: none;
            padding: 0.85rem 1.3rem;
            border-radius: 60px;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: var(--font-body);
            cursor: pointer;
            box-shadow: 0 12px 32px -8px rgba(134, 87, 255, 0.55);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .live-chat-toggle-btn:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 16px 40px -8px rgba(134, 87, 255, 0.7);
        }
        .live-chat-badge {
            background: #ff5577;
            color: white;
            font-size: 0.68rem;
            font-weight: 700;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .live-chat-panel {
            position: fixed;
            bottom: 26px;
            right: 26px;
            z-index: 2600;
            width: 360px;
            max-width: calc(100vw - 32px);
            height: 500px;
            max-height: calc(100vh - 100px);
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 20px;
            box-shadow: 0 30px 70px -12px rgba(0,0,0,0.6);
            display: none;
            flex-direction: column;
            overflow: hidden;
            opacity: 0;
            transform: translateY(16px) scale(0.97);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .live-chat-panel.active {
            display: flex;
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .live-chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.2rem;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(134,87,255,0.15), rgba(134,87,255,0.03));
            flex-shrink: 0;
        }
        .live-chat-header-info { display: flex; align-items: center; gap: 10px; }
        .live-chat-header-info h4 { font-size: 0.95rem; color: var(--text); font-weight: 700; }
        .live-chat-header-info p { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }
        .live-chat-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #6b6088;
            flex-shrink: 0;
        }
        .live-chat-dot.online { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.6); }
        .live-chat-dot.offline { background: #6b6088; }
        .live-chat-close-btn {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            color: #b3aad0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .live-chat-close-btn:hover { color: #ff5577; background: rgba(255,85,119,0.12); }

        .live-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 1rem 1.1rem;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .live-chat-welcome {
            margin: auto;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.85rem;
        }
        .live-chat-welcome i { font-size: 2.2rem; color: rgba(134,87,255,0.4); margin-bottom: 0.6rem; display: block; }

        .chat-bubble {
            max-width: 80%;
            padding: 0.55rem 0.85rem;
            border-radius: 14px;
            font-size: 0.85rem;
            line-height: 1.45;
        }
        .chat-bubble.from-user {
            align-self: flex-end;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            border-bottom-right-radius: 4px;
        }
        .chat-bubble.from-admin {
            align-self: flex-start;
            background: rgba(255,255,255,0.06);
            border: 1px solid var(--border);
            color: var(--text);
            border-bottom-left-radius: 4px;
        }
        .chat-bubble-time {
            font-size: 0.62rem;
            opacity: 0.6;
            margin-top: 3px;
        }

        .live-chat-closed-banner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 0.9rem;
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-muted);
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }
        .live-chat-closed-banner i { color: #34d399; margin-right: 4px; }
        .live-chat-cooldown-note {
            display: block;
            font-size: 0.72rem;
            color: var(--text-faint);
            margin-top: 2px;
        }
        .live-chat-closed-banner button {
            background: rgba(134,87,255,0.15);
            border: 1px solid rgba(134,87,255,0.3);
            color: #c9b8ff;
            padding: 0.4rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
        }

        .live-chat-input-row {
            display: flex;
            gap: 8px;
            padding: 0.8rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }
        .live-chat-input-row input {
            flex: 1;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 0.55rem 1rem;
            color: var(--text);
            font-size: 0.85rem;
            font-family: var(--font-body);
        }
        .live-chat-input-row input:focus {
            outline: none;
            border-color: #8657ff;
        }
        .live-chat-input-row button {
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            border: none;
            color: white;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }

        @media (max-width: 600px) {
            .live-chat-panel {
                right: 0;
                left: 0;
                bottom: 0;
                top: 0;
                width: 100%;
                max-width: 100%;
                height: 100%;
                max-height: 100%;
                border-radius: 0;
            }
            .live-chat-toggle-btn { right: 16px; bottom: 16px; }
            .live-chat-toggle-btn span { display: none; }
            .live-chat-toggle-btn { padding: 0.85rem; border-radius: 50%; }
        }

        /* ── Admin Chat Inbox ── */
        .chat-count-badge {
            background: var(--danger);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 20px;
            margin-left: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 16px;
        }
        .admin-chat-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 0;
            min-height: 500px;
            padding: 0 !important;
            overflow: hidden;
        }
        .admin-chat-sidebar {
            border-right: 1px solid var(--border);
            padding: 1.3rem;
            overflow-y: auto;
            max-height: 640px;
        }
        .admin-chat-sidebar h2 { font-size: 1.1rem; margin-bottom: 1rem; }
        .admin-chat-empty-list { color: var(--text-muted); font-size: 0.85rem; padding: 1rem 0; }
        .admin-chat-session-item {
            padding: 0.7rem 0.8rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            margin-bottom: 6px;
            border: 1px solid transparent;
            transition: all 0.2s;
        }
        .admin-chat-session-item:hover { background: rgba(255,255,255,0.04); }
        .admin-chat-session-item.active {
            background: rgba(134,87,255,0.12);
            border-color: rgba(134,87,255,0.3);
        }
        .admin-chat-session-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
        .admin-chat-session-name { font-weight: 600; font-size: 0.86rem; color: var(--text); }
        .admin-chat-session-status { font-size: 0.68rem; font-weight: 700; }
        .admin-chat-session-status.open { color: #34d399; }
        .admin-chat-session-status.closed { color: var(--text-faint); }
        .admin-chat-session-date { font-size: 0.7rem; color: var(--text-faint); margin-top: 3px; }

        .admin-chat-main { display: flex; flex-direction: column; min-height: 500px; }
        .admin-chat-empty {
            margin: auto;
            text-align: center;
            color: var(--text-muted);
        }
        .admin-chat-empty i { font-size: 2.6rem; color: rgba(134,87,255,0.3); margin-bottom: 0.8rem; display: block; }
        .admin-chat-conversation { display: flex; flex-direction: column; height: 100%; }
        .admin-chat-conv-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.1rem 1.3rem;
            border-bottom: 1px solid var(--border);
        }
        .admin-chat-conv-header h4 { font-size: 1rem; color: var(--text); }
        .admin-chat-conv-header p { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
        .btn-close-chat {
            background: rgba(255,85,119,0.1);
            border: 1px solid rgba(255,85,119,0.3);
            color: #ff5577;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-close-chat:hover { background: rgba(255,85,119,0.18); }
        .admin-chat-messages { max-height: 380px; }

        @media (max-width: 800px) {
            .admin-chat-layout { grid-template-columns: 1fr; }
            .admin-chat-sidebar { max-height: 240px; border-right: none; border-bottom: 1px solid var(--border); }
        }

        /* ═══════════════════════════════════════
           HOME — FEATURED SHOWCASE
        ═══════════════════════════════════════ */
        #section-home {
            padding-top: 1rem;
            padding-bottom: 4rem;
            overflow: hidden;
        }
        .showcase-intro {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 3.5rem;
            padding: 0 1.5rem;
        }
        .showcase-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(134, 87, 255, 0.12);
            border: 1px solid rgba(134, 87, 255, 0.3);
            color: var(--primary-light);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 2px;
            padding: 0.4rem 1rem;
            border-radius: 20px;
            margin-bottom: 1.2rem;
        }
        .showcase-title {
            font-family: var(--font-display);
            font-size: 2.6rem;
            font-weight: 800;
            line-height: 1.15;
            color: var(--text);
            margin-bottom: 0.9rem;
        }
        .showcase-title .highlight {
            background: linear-gradient(135deg, #d9ccff, #8657ff 55%, #b79bff);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .showcase-subtitle {
            color: var(--text-muted);
            font-size: 1rem;
            line-height: 1.6;
        }

        .showcase-fan {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 0;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem 1rem;
        }
        .showcase-card {
            position: relative;
            width: 190px;
            aspect-ratio: 3 / 4;
            border-radius: 16px;
            overflow: hidden;
            border: 2px solid rgba(255,255,255,0.08);
            box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6);
            cursor: pointer;
            flex-shrink: 0;
            margin: 0 -22px;
            transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease, z-index 0s;
            background: #150f28;
        }
        .showcase-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .showcase-card-info {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            padding: 0.9rem 0.8rem 0.8rem;
            background: linear-gradient(0deg, rgba(5,3,10,0.92) 15%, rgba(5,3,10,0.55) 60%, transparent 100%);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .showcase-card-name {
            color: white;
            font-weight: 700;
            font-size: 0.82rem;
            line-height: 1.25;
            text-shadow: 0 2px 6px rgba(0,0,0,0.6);
        }
        .showcase-card-price {
            color: #e0d4ff;
            font-weight: 700;
            font-size: 0.85rem;
            font-family: var(--font-display);
        }
        .showcase-old-price {
            color: rgba(255,255,255,0.5);
            text-decoration: line-through;
            font-weight: 500;
            font-size: 0.72rem;
            margin-left: 2px;
        }
        .showcase-discount-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 3;
            background: linear-gradient(135deg, #ff5577, #ff3355);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 4px 9px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 4px 12px -2px rgba(255, 51, 85, 0.5);
        }

        /* Fan positions: outer cards rotate away & sit lower; center card stands tall */
        .showcase-card.pos-1 { transform: rotate(-14deg) translateY(30px); z-index: 1; }
        .showcase-card.pos-2 { transform: rotate(-9deg) translateY(16px); z-index: 2; }
        .showcase-card.pos-3 { transform: rotate(-4deg) translateY(6px); z-index: 3; }
        .showcase-card.pos-center {
            width: 220px;
            transform: rotate(0deg) translateY(-14px) scale(1.08);
            z-index: 5;
            border-color: rgba(134, 87, 255, 0.55);
            box-shadow: 0 28px 60px -10px rgba(134, 87, 255, 0.45), 0 20px 40px -12px rgba(0,0,0,0.6);
        }
        .showcase-card.pos-4 { transform: rotate(4deg) translateY(6px); z-index: 3; }
        .showcase-card.pos-5 { transform: rotate(9deg) translateY(16px); z-index: 2; }
        .showcase-card.pos-6 { transform: rotate(14deg) translateY(30px); z-index: 1; }
        .showcase-card.pos-7 { transform: rotate(19deg) translateY(42px); z-index: 0; }

        .showcase-card:hover {
            z-index: 6 !important;
            border-color: rgba(134, 87, 255, 0.6);
            box-shadow: 0 30px 60px -10px rgba(134, 87, 255, 0.4), 0 20px 44px -10px rgba(0,0,0,0.65);
        }
        .showcase-card.pos-1:hover, .showcase-card.pos-2:hover, .showcase-card.pos-3:hover { transform: rotate(0deg) translateY(-16px) scale(1.06); }
        .showcase-card.pos-4:hover, .showcase-card.pos-5:hover, .showcase-card.pos-6:hover, .showcase-card.pos-7:hover { transform: rotate(0deg) translateY(-16px) scale(1.06); }
        .showcase-card.pos-center:hover { transform: rotate(0deg) translateY(-22px) scale(1.12); }

        @media (max-width: 900px) {
            .showcase-title { font-size: 1.9rem; }
            .showcase-card { width: 130px; margin: 0 -30px; }
            .showcase-card.pos-center { width: 155px; }
            .showcase-card-name { font-size: 0.72rem; }
            .showcase-card-price { font-size: 0.75rem; }
        }
        @media (max-width: 600px) {
            .showcase-fan { flex-wrap: wrap; gap: 1rem 0; padding-top: 1rem; }
            .showcase-card { margin: 10px -8px; width: 42%; }
            .showcase-card.pos-center { width: 46%; order: -1; margin-bottom: 1rem; }
            .showcase-card, .showcase-card.pos-1, .showcase-card.pos-2, .showcase-card.pos-3,
            .showcase-card.pos-4, .showcase-card.pos-5, .showcase-card.pos-6, .showcase-card.pos-7 { transform: none; }
            .showcase-card.pos-center { transform: scale(1.05); }
        }

        /* ═══════════════════════════════════════
           HOME — Category Grid & Features
        ═══════════════════════════════════════ */
        .home-section-title {
            text-align: center;
            font-family: var(--font-display);
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 1.8rem;
        }

        .home-categories {
            max-width: 1200px;
            margin: 5rem auto 0;
            padding: 0 2rem;
        }
        .home-category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 1.3rem;
        }
        .home-category-card {
            display: flex;
            flex-direction: column;
            background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.6rem;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .home-category-card:hover {
            transform: translateY(-5px);
            border-color: rgba(134, 87, 255, 0.4);
            box-shadow: 0 20px 40px -14px rgba(134, 87, 255, 0.3);
        }
        .home-category-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: white;
            margin-bottom: 1rem;
        }
        .home-category-icon.opt { background: linear-gradient(135deg, #8657ff, #5b32c7); }
        .home-category-icon.acc { background: linear-gradient(135deg, #b79bff, #6d4fd1); }
        .home-category-icon.steam { background: linear-gradient(135deg, #5ec8f5, #2f8fc0); }
        .home-category-icon.console { background: linear-gradient(135deg, #f0b429, #c98f12); }
        .home-category-card h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.4rem;
        }
        .home-category-card p {
            color: var(--text-muted);
            font-size: 0.85rem;
            line-height: 1.5;
            flex: 1;
            margin-bottom: 1rem;
        }
        .home-category-link {
            color: var(--primary-light);
            font-weight: 600;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .home-category-card:hover .home-category-link { gap: 10px; }
        .home-category-link i { transition: gap 0.2s ease; font-size: 0.75rem; }

        .home-features {
            max-width: 1200px;
            margin: 5rem auto 0;
            padding: 0 2rem;
        }
        .home-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.3rem;
        }
        .home-feature-card {
            text-align: center;
            padding: 1.8rem 1.2rem;
            background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
        }
        .home-feature-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(134, 87, 255, 0.12);
            border: 1px solid rgba(134, 87, 255, 0.25);
            color: var(--primary-light);
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }
        .home-feature-card h3 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.5rem;
        }
        .home-feature-card p {
            color: var(--text-muted);
            font-size: 0.83rem;
            line-height: 1.55;
        }

        @media (max-width: 600px) {
            .home-categories, .home-features { margin-top: 3.5rem; padding: 0 1.2rem; }
            .home-section-title { font-size: 1.3rem; }
        }

        /* ═══════════════════════════════════════
           HOME — Brand Banner
        ═══════════════════════════════════════ */
        .home-brand-banner {
            max-width: 720px;
            margin: 5rem auto 0;
            padding: 3rem 2rem;
            text-align: center;
            background: linear-gradient(180deg, rgba(134,87,255,0.1), rgba(134,87,255,0.02));
            border: 1px solid rgba(134, 87, 255, 0.25);
            border-radius: 24px;
            position: relative;
            overflow: hidden;
        }
        .home-brand-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 0%, rgba(134, 87, 255, 0.18), transparent 65%);
            pointer-events: none;
        }
        .home-brand-logo {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            margin: 0 auto 1.2rem;
            display: block;
            box-shadow: 0 12px 32px -8px rgba(134, 87, 255, 0.55);
            position: relative;
        }
        .home-brand-banner h2 {
            font-family: var(--font-display);
            font-size: 1.9rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 0.6rem;
            position: relative;
        }
        .home-brand-banner p {
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.6;
            max-width: 460px;
            margin: 0 auto 1.6rem;
            position: relative;
        }
        .home-brand-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            font-weight: 700;
            font-size: 0.9rem;
            padding: 0.75rem 1.7rem;
            border-radius: 12px;
            text-decoration: none;
            position: relative;
            transition: all 0.25s ease;
        }
        .home-brand-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px -6px rgba(134, 87, 255, 0.5);
        }

        @media (max-width: 600px) {
            .home-brand-banner { margin-top: 3.5rem; padding: 2.2rem 1.3rem; }
            .home-brand-banner h2 { font-size: 1.5rem; }
        }

        /* ═══════════════════════════════════════
           HOME — "Your Dream Games" 3D Coverflow
        ═══════════════════════════════════════ */
        .home-coverflow-section {
            max-width: 1200px;
            margin: 5rem auto 0;
            padding: 0 2rem;
        }
        .coverflow-intro {
            text-align: center;
            max-width: 600px;
            margin: 0 auto 2.5rem;
        }
        .coverflow-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(240, 180, 41, 0.1);
            border: 1px solid rgba(240, 180, 41, 0.3);
            color: var(--gold);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            padding: 0.4rem 1rem;
            border-radius: 20px;
            margin-bottom: 1rem;
        }
        .coverflow-title {
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 0.6rem;
        }
        .coverflow-subtitle {
            color: var(--text-muted);
            font-size: 0.92rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .coverflow-live {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--success);
            font-weight: 700;
            font-size: 0.72rem;
            background: rgba(52, 211, 153, 0.1);
            border: 1px solid rgba(52, 211, 153, 0.3);
            padding: 3px 10px;
            border-radius: 20px;
        }
        .coverflow-live i { font-size: 0.5rem; animation: coverflow-pulse 1.6s ease-in-out infinite; }
        @keyframes coverflow-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .coverflow-wrap {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 340px;
            perspective: 1200px;
        }
        .coverflow-track {
            position: relative;
            width: 220px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
        }
        .coverflow-card {
            position: absolute;
            width: 210px;
            height: 280px;
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid rgba(255,255,255,0.1);
            box-shadow: 0 25px 50px -15px rgba(0,0,0,0.6);
            transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, z-index 0s;
            background: #150f28;
        }
        .coverflow-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .coverflow-card-info {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            padding: 1rem 0.9rem 0.9rem;
            background: linear-gradient(0deg, rgba(5,3,10,0.95) 25%, rgba(5,3,10,0.6) 65%, transparent 100%);
        }
        .coverflow-card-info h4 {
            color: white;
            font-size: 0.98rem;
            font-weight: 700;
            margin-bottom: 0.6rem;
            text-shadow: 0 2px 6px rgba(0,0,0,0.6);
        }
        .coverflow-buy-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            border: none;
            padding: 0.55rem 0;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .coverflow-buy-btn:hover { transform: translateY(-2px); }

        .coverflow-arrow {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            color: var(--text);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.95rem;
            flex-shrink: 0;
            z-index: 20;
            transition: all 0.25s ease;
        }
        .coverflow-arrow:hover {
            background: rgba(134, 87, 255, 0.2);
            border-color: rgba(134, 87, 255, 0.4);
            color: var(--primary-light);
        }
        .coverflow-arrow.left { margin-right: -21px; }
        .coverflow-arrow.right { margin-left: -21px; }

        @media (max-width: 700px) {
            .home-coverflow-section { padding: 0 1rem; margin-top: 3.5rem; }
            .coverflow-title { font-size: 1.5rem; }
            .coverflow-wrap { height: 280px; }
            .coverflow-card { width: 160px; height: 220px; }
            .coverflow-arrow { width: 36px; height: 36px; }
        }

        /* ═══════════════════════════════════════
           HOME — Motion / Gaming-Store Feel
        ═══════════════════════════════════════ */

        /* Showcase cards "deal in" on page load, then settle into their fan position */
        @keyframes deal-in {
            0% { opacity: 0; transform: translateY(70px) rotate(0deg) scale(0.7); }
            100% { opacity: 1; }
        }
        .showcase-card {
            animation: deal-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
        }
        .showcase-card.pos-1 { animation-delay: 0.05s; }
        .showcase-card.pos-2 { animation-delay: 0.12s; }
        .showcase-card.pos-3 { animation-delay: 0.19s; }
        .showcase-card.pos-center { animation-delay: 0.26s; }
        .showcase-card.pos-4 { animation-delay: 0.19s; }
        .showcase-card.pos-5 { animation-delay: 0.12s; }
        .showcase-card.pos-6 { animation-delay: 0.05s; }
        .showcase-card.pos-7 { animation-delay: 0.02s; }

        /* Gentle idle float on the centerpiece card — subtle "alive" feel */
        @keyframes idle-float {
            0%, 100% { transform: rotate(0deg) translateY(-14px) scale(1.08); }
            50% { transform: rotate(0deg) translateY(-22px) scale(1.08); }
        }
        .showcase-card.pos-center {
            animation: deal-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.26s backwards,
                       idle-float 3.6s ease-in-out 1s infinite;
        }
        .showcase-card.pos-center:hover { animation: deal-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

        /* Pulsing glow on the discount badge to draw the eye */
        @keyframes badge-pulse {
            0%, 100% { box-shadow: 0 4px 12px -2px rgba(255, 51, 85, 0.5); }
            50% { box-shadow: 0 4px 20px 2px rgba(255, 51, 85, 0.8); }
        }
        .showcase-discount-badge {
            animation: badge-pulse 1.8s ease-in-out infinite;
        }

        /* Eyebrow tag gentle breathing glow */
        @keyframes eyebrow-glow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(134, 87, 255, 0); }
            50% { box-shadow: 0 0 16px 2px rgba(134, 87, 255, 0.25); }
        }
        .showcase-eyebrow, .coverflow-eyebrow {
            animation: eyebrow-glow 2.4s ease-in-out infinite;
        }

        /* Coverflow center card breathes gently too */
        @keyframes coverflow-idle {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.06); }
        }
        .coverflow-card.is-center {
            animation: coverflow-idle 3s ease-in-out infinite;
        }

        /* Category & feature icons get a subtle lift + glow on hover for extra life */
        .home-category-icon, .home-feature-icon {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .home-category-card:hover .home-category-icon { transform: scale(1.12) rotate(-4deg); }
        .home-feature-card:hover .home-feature-icon { transform: scale(1.12); }
        .home-feature-card { transition: transform 0.3s ease; }
        .home-feature-card:hover { transform: translateY(-4px); }

        @media (prefers-reduced-motion: reduce) {
            .showcase-card, .showcase-card.pos-center, .showcase-discount-badge,
            .showcase-eyebrow, .coverflow-eyebrow, .coverflow-card {
                animation: none !important;
            }
        }

        /* ═══════════════════════════════════════
           HOME — How It Works
        ═══════════════════════════════════════ */
        .home-how-it-works {
            max-width: 1000px;
            margin: 5rem auto 0;
            padding: 0 2rem;
        }
        .how-steps {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 0.5rem;
        }
        .how-step {
            flex: 1;
            max-width: 240px;
            text-align: center;
            position: relative;
            padding: 1.6rem 1.2rem;
            background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
        }
        .how-step-number {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            font-weight: 800;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 16px -3px rgba(134, 87, 255, 0.6);
        }
        .how-step-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: rgba(134, 87, 255, 0.12);
            border: 1px solid rgba(134, 87, 255, 0.25);
            color: var(--primary-light);
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0.7rem auto 1rem;
        }
        .how-step h3 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.5rem;
        }
        .how-step p {
            color: var(--text-muted);
            font-size: 0.82rem;
            line-height: 1.55;
        }
        .how-step-connector {
            color: var(--text-faint);
            font-size: 1.2rem;
            align-self: center;
            margin-top: 2.6rem;
            flex-shrink: 0;
        }

        @media (max-width: 700px) {
            .home-how-it-works { margin-top: 3.5rem; padding: 0 1.2rem; }
            .how-steps { flex-direction: column; align-items: stretch; gap: 1.2rem; }
            .how-step { max-width: 100%; }
            .how-step-connector { display: none; }
        }

        /* ═══════════════════════════════════════
           ADMIN PRODUCT MANAGEMENT
        ═══════════════════════════════════════ */
        .admin-only {
            display: none;
        }

        .section-header {
            position: relative;
        }
        .btn-add-product {
            margin-left: auto;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #8657ff, #5b32c7);
            color: white;
            border: none;
            padding: 0.6rem 1.2rem;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            box-shadow: 0 8px 20px -6px rgba(134, 87, 255, 0.5);
            transition: all 0.25s ease;
        }
        .btn-add-product:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 26px -6px rgba(134, 87, 255, 0.65);
        }
        @media (max-width: 700px) {
            .section-header { flex-wrap: wrap; }
            .btn-add-product { margin-left: 0; width: 100%; justify-content: center; margin-top: 0.6rem; }
        }

        .admin-delete-product-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 5;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 51, 85, 0.15);
            border: 1px solid rgba(255, 51, 85, 0.4);
            color: #ff5577;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.2s ease;
        }
        .admin-delete-product-btn:hover {
            background: rgba(255, 51, 85, 0.3);
            transform: scale(1.08);
        }

        /* ── Add Product Modal ── */
        .add-product-modal {
            max-width: 420px;
            text-align: left;
        }
        .add-product-modal .big-icon {
            text-align: center;
            font-size: 2.2rem;
            color: var(--primary-light);
            margin-bottom: 0.6rem;
        }
        .add-product-modal h2 {
            text-align: center;
            font-size: 1.3rem;
            margin-bottom: 0.3rem;
        }
        .add-product-modal > p {
            text-align: center;
            color: var(--text-muted);
            font-size: 0.82rem;
            margin-bottom: 1.2rem;
        }
        .add-product-modal label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0.9rem 0 0.4rem;
        }
        .add-product-modal input[type="text"],
        .add-product-modal select {
            width: 100%;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 0.65rem 0.9rem;
            color: var(--text);
            font-family: var(--font-body);
            font-size: 0.9rem;
        }
        .add-product-modal input[type="text"]:focus,
        .add-product-modal select:focus {
            outline: none;
            border-color: #8657ff;
            box-shadow: 0 0 0 3px rgba(134, 87, 255, 0.15);
        }
        .add-product-modal input[type="file"] {
            width: 100%;
            color: var(--text-muted);
            font-size: 0.82rem;
        }

        /* ===== USD → IQD converter (admin only) ===== */
        .fx-widget {
            position: fixed;
            left: 24px;
            bottom: 84px;
            width: 280px;
            max-width: calc(100vw - 48px);
            z-index: 1500;
            display: flex;
            flex-direction: column;
            background: linear-gradient(180deg, rgba(18, 4, 40, 0.95), rgba(10, 2, 24, 0.97));
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6);
            backdrop-filter: blur(14px);
            overflow: hidden;
        }
        .fx-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0.7rem 0.9rem; cursor: pointer; font-weight: 700; font-size: 0.85rem; color: var(--text);
        }
        .fx-header i.fa-dollar-sign { color: var(--success); margin-right: 4px; }
        .fx-live { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
        .fx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: fxPulse 1.4s infinite; }
        @keyframes fxPulse { 50% { opacity: 0.25; } }
        .fx-body { padding: 0 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 4px; }
        .fx-widget.collapsed .fx-body { display: none; }
        .fx-widget.collapsed #fxChevron { transform: rotate(180deg); }
        .fx-rate { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
        .fx-body label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 6px; }
        .fx-body input {
            width: 100%; padding: 0.55rem 0.7rem; border-radius: 8px;
            border: 1px solid var(--border); background: rgba(255,255,255,0.05);
            color: var(--text); font-size: 0.95rem; font-weight: 600; font-family: inherit; outline: none;
        }
        .fx-body input:focus { border-color: rgba(134, 87, 255, 0.7); }
        .fx-row { display: flex; gap: 6px; }
        .fx-row button {
            padding: 0 0.8rem; border-radius: 8px; border: none; cursor: pointer;
            background: linear-gradient(135deg, #8657ff, #5a2fd4); color: #fff; font-weight: 700; font-size: 0.8rem; white-space: nowrap;
        }
        .fx-status { font-size: 0.7rem; color: var(--text-muted); min-height: 1em; margin-top: 4px; }
        .fx-status.warn { color: #ffb347; }
        .fx-widget { width: 320px; }
        .fx-body { max-height: 70vh; overflow-y: auto; }
        .fx-body select {
            width: 100%; padding: 0.5rem 0.6rem; border-radius: 8px; margin-bottom: 4px;
            border: 1px solid var(--border); background: rgba(255,255,255,0.05);
            color: var(--text); font-size: 0.85rem; font-family: inherit; outline: none;
        }
        .fx-body select option { background: #12042a; color: #fff; }
        .fx-list { margin-top: 8px; }
        .fx-list table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
        .fx-list th { color: var(--text-muted); font-weight: 600; text-align: right; padding: 4px 4px; border-bottom: 1px solid var(--border); }
        .fx-list th:first-child, .fx-list td:first-child { text-align: left; }
        .fx-list td { padding: 4px 4px; text-align: right; color: var(--text); font-weight: 600; }
        .fx-list tr { cursor: pointer; }
        .fx-list tr.sel td { background: rgba(134, 87, 255, 0.22); }
        .fx-src { font-size: 0.7rem; color: #b79cff; text-decoration: none; margin-top: 4px; }
        .fx-src:hover { text-decoration: underline; }

        /* ===== Discord login ===== */
        .btn-discord {
            width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
            padding: 0.85rem 1rem; border: none; border-radius: 12px; cursor: pointer;
            background: #5865F2; color: #fff; font-size: 0.95rem; font-weight: 700; font-family: inherit;
            transition: background 0.2s, transform 0.2s; margin-bottom: 0.2rem;
        }
        .btn-discord:hover { background: #4752c4; transform: translateY(-1px); }
        .btn-discord i { font-size: 1.2rem; }
        .auth-or { display: flex; align-items: center; gap: 10px; margin: 0.9rem 0 0.4rem; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
        .auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }