/* ===== VARIABLES DE TEMA (Dark + Orange) ===== */
        :root {
            --bg-primary: #0a0a0a;
            --bg-secondary: #111111;
            --bg-tertiary: #1a1a1a;
            --text-primary: #f5f5f5;
            --text-secondary: #cccccc;
            --text-muted: #888888;
            --border-color: #2a2a2a;
            --card-bg: #161616;
            --card-shadow: 0 4px 12px rgba(0,0,0,0.5);
            --accent-color: #FB5533;
            --accent-secondary: #FF7A00;
        }
        
        /* Aplicar variables */
        body {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
        }
        
        .bg-white {
            background-color: var(--card-bg) !important;
        }
        
        .bg-gray-50 {
            background-color: var(--bg-secondary) !important;
        }
        
        .bg-gray-100 {
            background-color: var(--bg-tertiary) !important;
        }
        
        .text-gray-600,
        .text-gray-700 {
            color: var(--text-secondary) !important;
        }
        
        .text-gray-500,
        .text-gray-400 {
            color: var(--text-muted) !important;
        }
        
        .text-gray-900,
        .text-black {
            color: var(--text-primary) !important;
        }
        
        .border-gray-200,
        .border-gray-300 {
            border-color: var(--border-color) !important;
        }
        
        .order-card {
            background-color: var(--card-bg);
            border-color: var(--border-color);
        }
        
        header {
            background-color: var(--card-bg) !important;
            border-color: var(--border-color) !important;
        }
        
        /* Selector de moneda/país */
        select,
        #countrySelector,
        #countrySelectorMobile {
            background-color: var(--bg-tertiary) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        select option {
            background-color: var(--bg-tertiary);
            color: var(--text-primary);
        }
        
        /* Inputs y elementos de formulario */
        input,
        textarea {
            background-color: var(--bg-tertiary) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        input::placeholder,
        textarea::placeholder {
            color: var(--text-muted) !important;
        }
        
        /* Mobile menu */
        .mobile-menu {
            background-color: var(--card-bg) !important;
            border-color: var(--border-color) !important;
        }
        .mobile-menu a {
            border-color: var(--border-color) !important;
            color: var(--text-primary) !important;
        }
        

        /* ===== SKELETON LOADING ===== */
        .skeleton {
            background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
            border-radius: 8px;
        }
        
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .skeleton-card {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            background: var(--card-bg);
        }

        /* ===== PROFILE AVATAR + AURA SYSTEM ===== */
        .profile-avatar-container {
            position: relative;
            width: 100px;
            height: 100px;
            flex-shrink: 0;
        }
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--border-color);
            background: var(--bg-tertiary);
            cursor: pointer;
            transition: transform 0.3s, border-color 0.3s;
            position: relative;
            z-index: 2;
        }
        .profile-avatar:hover {
            transform: scale(1.05);
        }
        .profile-avatar-placeholder {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            font-weight: 800;
            background: linear-gradient(135deg, #1a1a1a, #333);
            color: #fff;
            cursor: pointer;
            position: relative;
            z-index: 2;
            transition: transform 0.3s;
            border: 3px solid var(--border-color);
        }
        .profile-avatar-placeholder:hover {
            transform: scale(1.05);
        }
        .avatar-edit-icon {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 28px;
            height: 28px;
            background: var(--accent-color);
            color: var(--bg-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            z-index: 3;
            border: 2px solid var(--bg-primary);
            cursor: pointer;
            transition: transform 0.2s;
        }
        .avatar-edit-icon:hover {
            transform: scale(1.15);
        }

        /* Aura Tiers */
        .aura-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            z-index: 1;
            pointer-events: none;
        }

        /* Tier 0: Sin aura (0 compras) */
        .aura-tier-0 .aura-ring { display: none; }

        /* Tier 1: Bronce (1-2 compras) - sutil glow gris */
        .aura-tier-1 .aura-ring {
            width: 116px;
            height: 116px;
            border: 2px solid #a8a29e;
            box-shadow: 0 0 12px rgba(168, 162, 158, 0.4);
            animation: auraPulse1 3s ease-in-out infinite;
        }
        @keyframes auraPulse1 {
            0%, 100% { box-shadow: 0 0 12px rgba(168, 162, 158, 0.3); }
            50% { box-shadow: 0 0 20px rgba(168, 162, 158, 0.6); }
        }

        /* Tier 2: Plata (3-5 compras) - glow plateado */
        .aura-tier-2 .aura-ring {
            width: 120px;
            height: 120px;
            border: 2px solid #94a3b8;
            box-shadow: 0 0 18px rgba(148, 163, 184, 0.5), 0 0 36px rgba(148, 163, 184, 0.2);
            animation: auraPulse2 2.5s ease-in-out infinite;
        }
        @keyframes auraPulse2 {
            0%, 100% { box-shadow: 0 0 18px rgba(148, 163, 184, 0.4), 0 0 36px rgba(148, 163, 184, 0.15); }
            50% { box-shadow: 0 0 28px rgba(148, 163, 184, 0.7), 0 0 50px rgba(148, 163, 184, 0.3); }
        }

        /* Tier 3: Oro (6-9 compras) - glow dorado */
        .aura-tier-3 .aura-ring {
            width: 124px;
            height: 124px;
            border: 3px solid #fbbf24;
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.5), 0 0 45px rgba(251, 191, 36, 0.2);
            animation: auraPulse3 2s ease-in-out infinite;
        }
        .aura-tier-3 .profile-avatar,
        .aura-tier-3 .profile-avatar-placeholder {
            border-color: #fbbf24;
        }
        @keyframes auraPulse3 {
            0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 45px rgba(251, 191, 36, 0.15); }
            50% { box-shadow: 0 0 35px rgba(251, 191, 36, 0.7), 0 0 65px rgba(251, 191, 36, 0.3); }
        }

        /* Tier 4: Diamante (10-19 compras) - glow azul eléctrico */
        .aura-tier-4 .aura-ring {
            width: 128px;
            height: 128px;
            border: 3px solid #3b82f6;
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.5), 0 0 55px rgba(59, 130, 246, 0.25), 0 0 80px rgba(59, 130, 246, 0.1);
            animation: auraPulse4 1.8s ease-in-out infinite;
        }
        .aura-tier-4 .profile-avatar,
        .aura-tier-4 .profile-avatar-placeholder {
            border-color: #3b82f6;
        }
        @keyframes auraPulse4 {
            0%, 100% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.4), 0 0 55px rgba(59, 130, 246, 0.2); }
            50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.7), 0 0 75px rgba(59, 130, 246, 0.35), 0 0 100px rgba(59, 130, 246, 0.15); }
        }

        /* Tier 5: Legendario (20+ compras) - glow púrpura con partículas */
        .aura-tier-5 .aura-ring {
            width: 132px;
            height: 132px;
            border: 3px solid #a855f7;
            box-shadow: 0 0 30px rgba(168, 85, 247, 0.6), 0 0 60px rgba(168, 85, 247, 0.3), 0 0 100px rgba(168, 85, 247, 0.15);
            animation: auraPulse5 1.5s ease-in-out infinite;
        }
        .aura-tier-5 .profile-avatar,
        .aura-tier-5 .profile-avatar-placeholder {
            border-color: #a855f7;
        }
        @keyframes auraPulse5 {
            0%, 100% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), 0 0 60px rgba(168, 85, 247, 0.25), 0 0 100px rgba(168, 85, 247, 0.1); }
            50% { box-shadow: 0 0 50px rgba(168, 85, 247, 0.8), 0 0 90px rgba(168, 85, 247, 0.4), 0 0 130px rgba(168, 85, 247, 0.2); }
        }

        /* Medal badges */
        .medal-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .medal-tier-0 { background: var(--bg-tertiary); color: var(--text-muted); }
        .medal-tier-1 { background: linear-gradient(135deg, #d6d3d1, #a8a29e); color: #44403c; }
        .medal-tier-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #1e293b; }
        .medal-tier-3 { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #78350f; }
        .medal-tier-4 { background: linear-gradient(135deg, #93c5fd, #3b82f6); color: #fff; }
        .medal-tier-5 { background: linear-gradient(135deg, #c084fc, #a855f7); color: #fff; box-shadow: 0 2px 10px rgba(168,85,247,0.4); }

        /* Profile edit name */
        .editable-name {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .editable-name:hover {
            opacity: 0.7;
        }
        .editable-name .edit-pencil {
            font-size: 14px;
            color: var(--text-muted);
        }
        .name-edit-input {
            font-size: 1.5rem;
            font-weight: 700;
            border: 2px solid var(--accent-color);
            border-radius: 8px;
            padding: 4px 12px;
            background: var(--bg-primary);
            color: var(--text-primary);
            outline: none;
            width: 200px;
        }

        /* Profile tab redesign */
        .profile-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 32px;
            text-align: center;
        }
        .profile-card-avatar {
            width: 140px;
            height: 140px;
        }
        .profile-card-avatar .profile-avatar,
        .profile-card-avatar .profile-avatar-placeholder {
            width: 140px;
            height: 140px;
            font-size: 56px;
        }
        .profile-card-avatar .aura-ring {
            width: calc(100% + 20px);
            height: calc(100% + 20px);
        }
        .aura-progress-bar {
            width: 100%;
            height: 8px;
            background: var(--bg-tertiary);
            border-radius: 99px;
            overflow: hidden;
            margin-top: 4px;
        }
        .aura-progress-fill {
            height: 100%;
            border-radius: 99px;
            transition: width 0.6s ease;
        }
        .aura-progress-fill.tier-1 { background: linear-gradient(90deg, #a8a29e, #d6d3d1); }
        .aura-progress-fill.tier-2 { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
        .aura-progress-fill.tier-3 { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .aura-progress-fill.tier-4 { background: linear-gradient(90deg, #2563eb, #3b82f6); }
        .aura-progress-fill.tier-5 { background: linear-gradient(90deg, #9333ea, #a855f7); }
        
        .skeleton-avatar {
            width: 80px;
            height: 80px;
            border-radius: 12px;
        }
        
        .skeleton-text {
            height: 16px;
            margin-bottom: 8px;
        }
        
        .skeleton-text-sm {
            height: 12px;
            margin-bottom: 6px;
        }
        
        .skeleton-btn {
            height: 40px;
            width: 120px;
            border-radius: 8px;
        }
        
        .skeleton-tracker {
            height: 60px;
            margin: 16px 0;
        }
        
        /* ===== NOTIFICACIONES PUSH ===== */
        .push-notification {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px 20px;
            min-width: 320px;
            max-width: 400px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            animation: slideInRight 0.5s ease-out, fadeOut 0.5s ease-out 4.5s forwards;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .push-notification:hover {
            transform: translateX(-5px);
        }
        
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(100%); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes fadeOut {
            to { opacity: 0; transform: translateX(100%); }
        }
        
        .push-notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .push-notification-icon.success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }
        
        .push-notification-icon.info {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
        }
        
        .push-notification-icon.warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }
        
        .push-notification-icon.error {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
        }
        
        .push-notification-content {
            flex: 1;
        }
        
        .push-notification-title {
            font-weight: 600;
            font-size: 14px;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .push-notification-message {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        
        .push-notification-time {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 6px;
        }
        
        .push-notification-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 16px;
            line-height: 1;
        }
        
        .push-notification-close:hover {
            color: var(--text-primary);
        }
        
        /* ===== ANIMACIONES DE FEEDBACK ===== */
        .btn-feedback {
            transition: transform 0.1s;
        }
        
        .btn-feedback:active {
            transform: scale(0.95);
        }
        
                /* Animación toast entregado */
                .entregado-toast {
                    background: linear-gradient(90deg, #1e3a8a 0%, #38bdf8 100%);
                    color: #fff;
                    padding: 22px 48px;
                    border-radius: 2rem;
                    box-shadow: 0 8px 32px rgba(30,58,138,0.18);
                    font-size: 1.5rem;
                    font-weight: 700;
                    letter-spacing: 1px;
                    display: flex;
                    align-items: center;
                    gap: 18px;
                    animation: fadeInScale 0.5s, fadeOutScale 0.5s 2.5s forwards;
                }
                .entregado-toast i {
                    font-size: 2.2rem;
                    color: #facc15;
                    filter: drop-shadow(0 2px 8px #fde68a88);
                }
                @keyframes fadeInScale {
                    0% { opacity: 0; transform: scale(0.85) translateY(-30px); }
                    100% { opacity: 1; transform: scale(1) translateY(0); }
                }
                @keyframes fadeOutScale {
                    to { opacity: 0; transform: scale(0.95) translateY(-30px); }
                }
        .tabs-container { overflow: visible; }
        .tab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .tab-button { padding: 12px 24px; border: none; border-bottom: 2px solid transparent; background: transparent; transition: all 0.3s; cursor: pointer; color: var(--text-secondary); }
        .tab-button.active { border-bottom-color: var(--accent-color); font-weight: 600; color: var(--text-primary); }
        .tab-more-menu-wrapper { position: relative; flex-shrink: 0; }
        .tab-more-toggle {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s ease;
            font-size: 1.9rem;
            line-height: 1;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
        }
        .tab-more-toggle:hover,
        .tab-more-toggle.active {
            border-color: var(--accent-color);
            color: var(--accent-color);
            background: rgba(251, 85, 51, 0.08);
            transform: translateY(-1px);
        }
        .tab-more-menu {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            min-width: 250px;
            padding: 8px;
            border-radius: 18px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
            display: none;
            z-index: 40;
        }
        .tab-more-menu.is-open { display: block; }
        .tab-more-item {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border: none;
            border-radius: 12px;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;
        }
        .tab-more-item:hover,
        .tab-more-item.active {
            background: rgba(251, 85, 51, 0.08);
            color: var(--accent-color);
        }
        .tab-more-item.active { font-weight: 600; }
        .order-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 16px; transition: all 0.3s; background: var(--card-bg); content-visibility: auto; contain-intrinsic-size: 320px; }
        .order-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        
        /* ===== BARRA DE SEGUIMIENTO ===== */
        .order-tracker {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 16px 0;
            padding: 16px 0;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }
        .tracker-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            position: relative;
        }
        .tracker-step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 16px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: var(--border-color);
            z-index: 0;
        }
        .tracker-step.completed:not(:last-child)::after {
            background: var(--accent-color);
        }
        .tracker-step.active:not(:last-child)::after {
            background: linear-gradient(to right, var(--accent-color) 50%, var(--border-color) 50%);
        }
        .tracker-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            color: var(--text-muted);
            font-size: 12px;
            position: relative;
            z-index: 1;
            transition: all 0.3s;
        }
        .tracker-step.completed .tracker-icon {
            background: var(--accent-color);
            color: #fff;
        }
        .tracker-step.active .tracker-icon {
            background: var(--accent-color);
            color: #fff;
            box-shadow: 0 0 0 4px rgba(251,85,51,0.2);
        }
        .tracker-step.rejected .tracker-icon {
            background: #dc2626;
            color: #fff;
        }
        .tracker-label {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 8px;
            text-align: center;
            font-weight: 500;
        }
        .tracker-step.completed .tracker-label,
        .tracker-step.active .tracker-label {
            color: var(--accent-color);
            font-weight: 600;
        }
        .tracker-step.rejected .tracker-label {
            color: #dc2626;
            font-weight: 600;
        }
        @media (max-width: 768px) {
            .order-tracker {
                padding: 12px 0;
            }
            .tracker-icon {
                width: 28px;
                height: 28px;
                font-size: 10px;
            }
            .tracker-label {
                font-size: 9px;
            }
            .tracker-step:not(:last-child)::after {
                top: 14px;
            }
        }
        .status-badge { padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-block; }
        .status-pending { background: #fef3c7; color: #92400e; }
        .status-paid { background: #d1fae5; color: #065f46; }
        .status-delivered { background: #dbeafe; color: #1e40af; }
        .status-keypending { background: #fff7ed; color: #9a3412; }
        .status-rejected { background: #fee2e2; color: #991b1b; }
        .btn-download { background: var(--accent-color); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; transition: all 0.3s; display: inline-flex; align-items: center; }
        .btn-download:hover { background: var(--accent-secondary); }
        .btn-download:disabled { background: #333; cursor: not-allowed; }
        
        /* ===== ESTILOS BOTON DETALLES ===== */
        .btn-details { 
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); 
            color: #fff; 
            padding: 10px 20px; 
            border-radius: 8px; 
            font-size: 14px; 
            transition: all 0.3s; 
            display: inline-flex; 
            align-items: center; 
            text-decoration: none;
            cursor: pointer;
            border: none;
        }
        .btn-details:hover { 
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); 
            transform: scale(1.02); 
            color: #fff;
        }
                /* ===== ESTILOS BOTó“N KEY ===== */
        .btn-key { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; transition: all 0.3s; display: inline-flex; align-items: center; cursor: pointer; border: none; }
        .btn-key:hover { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); transform: scale(1.02); }
        .btn-key-expired { background: #dc2626; }
        .btn-key-expired:hover { background: #b91c1c; }
        
        /* ===== MENSAJE DE DEMORA EN PEDIDOS ===== */
        .delay-notice {
            background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
            border: 1px solid #b45309;
            border-radius: 12px;
            padding: 16px;
            margin: 16px 0;
            position: relative;
            overflow: hidden;
        }
        .delay-notice::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
        }
        .delay-notice-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .delay-notice-icon {
            width: 36px;
            height: 36px;
            background: #f59e0b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
        }
        .delay-notice-title {
            font-weight: 700;
            color: #fef3c7;
            font-size: 15px;
        }
        .delay-notice-text {
            color: #fde68a;
            font-size: 13px;
            line-height: 1.6;
            padding-left: 46px;
        }
        .delay-notice-footer {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding-left: 46px;
        }
        .delay-notice-guarantee {
            background: #065f46;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* Modal Key */
        .key-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
        .key-modal-content { background: var(--card-bg); margin: 10% auto; padding: 30px; border-radius: 16px; max-width: 500px; width: 90%; }
        .key-display { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; border-radius: 12px; padding: 20px; text-align: center; margin: 20px 0; }
        .key-code { font-family: monospace; font-size: 1.5rem; font-weight: bold; color: #92400e; letter-spacing: 2px; word-break: break-all; }
        .key-timer { background: #dbeafe; border-radius: 8px; padding: 12px; margin-top: 16px; text-align: center; }
        .key-timer-text { color: #1e40af; font-weight: 600; }
        .key-expired-box { background: #fee2e2; border: 2px solid #dc2626; border-radius: 12px; padding: 20px; text-align: center; }
        .key-no-stock { background: #fef3c7; border: 2px solid #f59e0b; border-radius: 12px; padding: 20px; text-align: center; }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.85; }
        }
        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        /* ===== BANNER WHATSAPP ACTUALIZACIONES ===== */
        .whatsapp-banner {
            display: none;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            border-radius: 12px;
            padding: 16px 24px;
            margin-bottom: 24px;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
            animation: slideIn 0.5s ease-out;
        }
        .whatsapp-banner.show {
            display: flex;
        }
        .whatsapp-banner-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            flex-wrap: wrap;
            gap: 12px;
        }
        .whatsapp-banner-text {
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
        }
        .whatsapp-banner-icon {
            font-size: 2rem;
            animation: pulse 2s infinite;
        }
        .whatsapp-banner h4 {
            font-size: 1.1rem;
            font-weight: 700;
            margin: 0;
        }
        .whatsapp-banner p {
            font-size: 0.875rem;
            opacity: 0.9;
            margin: 0;
        }
        .whatsapp-banner-btn {
            background: var(--card-bg);
            color: #25D366;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .whatsapp-banner-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 768px) {
            .whatsapp-banner {
                padding: 14px 16px;
            }
            .whatsapp-banner-content {
                flex-direction: column;
                text-align: center;
            }
            .whatsapp-banner-text {
                flex-direction: column;
                gap: 8px;
            }
            .whatsapp-banner-btn {
                width: 100%;
                justify-content: center;
            }
        }
        
        /* ===== ESTILOS Mó“VILES DASHBOARD ===== */
        @media (max-width: 768px) {
            /* Welcome section */
            .welcome-section {
                flex-direction: column;
                text-align: center;
                gap: 16px;
            }
            .welcome-section .text-right {
                text-align: center;
            }
            .welcome-section h1 {
                font-size: 1.5rem;
            }
            
            /* Stats cards */
            .stats-grid {
                grid-template-columns: 1fr !important;
                gap: 12px;
            }
            .stats-grid > div {
                padding: 16px;
            }
            .stats-grid h3 {
                font-size: 1.75rem;
            }
            
            /* Tabs */
            .tabs-container {
                overflow: visible;
            }
            .tab-toolbar {
                gap: 12px;
            }
            .tab-button {
                padding: 10px 16px;
                font-size: 0.875rem;
                white-space: nowrap;
            }
            .tab-more-toggle {
                width: 42px;
                height: 42px;
                border-radius: 12px;
                font-size: 1.7rem;
            }
            .tab-more-menu {
                min-width: min(240px, calc(100vw - 48px));
            }
            
            /* Order cards */
            .order-card {
                padding: 14px;
            }
            .order-card h3 {
                font-size: 1rem;
            }
            .order-card .flex {
                flex-wrap: wrap;
                gap: 8px;
            }
            .order-card img {
                width: 60px !important;
                height: 60px !important;
            }
            
            /* Download button */
            .btn-download, .btn-key {
                width: 100%;
                justify-content: center;
                padding: 12px 16px;
            }
            
            /* Header móvil */
            .header-links {
                display: none;
            }
            .mobile-menu-btn {
                display: block !important;
            }
            
            /* Key modal responsive */
            .key-modal-content {
                margin: 5% auto;
                padding: 20px;
            }
            .key-code {
                font-size: 1.1rem;
            }
        }
        
        .mobile-menu-btn { display: none; }
        
        /* ===== BADGES DE PLATAFORMA ===== */
        .platform-badges {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            background: var(--bg-tertiary);
            border-radius: 6px;
            font-size: 11px;
            color: var(--text-muted);
        }
        .platform-badges i {
            font-size: 12px;
        }
        .platform-badges .fa-apple { color: #555; }
        .platform-badges .fa-android { color: #3ddc84; }
        .platform-badges .fa-windows { color: #0078d4; }
        
        /* Opción 2: Solo iconos minimalistas */
        .platform-icons-mini {
            display: inline-flex;
            gap: 4px;
            opacity: 0.5;
        }
        .platform-icons-mini i {
            font-size: 10px;
            color: var(--text-muted);
        }
        
        /* Opción 3: Badge compacto con texto */
        .platform-tag {
            font-size: 10px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .platform-tag i {
            font-size: 9px;
        }
        
        /* ===== ESTILOS BOTÓN SOPORTE ===== */
        .btn-support {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: #fff;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            border: none;
            position: relative;
        }
        .btn-support:hover {
            background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
            transform: scale(1.02);
        }
        
        /* Modal de Soporte */
        .support-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            animation: fadeIn 0.3s ease;
        }
        .support-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .support-modal-content {
            background: var(--card-bg);
            padding: 30px;
            border-radius: 16px;
            max-width: 420px;
            width: 90%;
            animation: slideUp 0.3s ease;
        }
        .support-modal-header {
            text-align: center;
            margin-bottom: 24px;
        }
        .support-modal-header i {
            font-size: 3rem;
            color: #25D366;
            margin-bottom: 12px;
        }
        .support-modal-header h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .support-modal-header p {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 8px;
        }
        .support-option {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            color: inherit;
        }
        .support-option:hover {
            border-color: #25D366;
            background: rgba(37, 211, 102, 0.1);
            transform: translateX(4px);
        }
        .support-option-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 1.3rem;
        }
        .support-option-fast .support-option-icon {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }
        .support-option-slow .support-option-icon {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
        }
        .support-option-info h4 {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .support-option-info p {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .support-option-arrow {
            margin-left: auto;
            color: var(--text-muted);
            font-size: 1.2rem;
        }
        .support-modal-close {
            display: block;
            width: 100%;
            padding: 12px;
            margin-top: 16px;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 8px;
            color: var(--text-secondary);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        .support-modal-close:hover {
            background: var(--border-color);
        }
        .support-resolution-option:has(input:checked) {
            border-color: #FB5533 !important;
            background: rgba(251,85,51,0.08);
        }
        #supportCharCount.valid { color: #22c55e !important; }
        #supportCharCount.invalid { color: #ef4444 !important; }
        .ticket-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .ticket-status-open { background: #fef3c7; color: #92400e; }
        .ticket-status-resolved { background: #d1fae5; color: #065f46; }
        .ticket-status-refunded { background: #dbeafe; color: #1e40af; }
        .ticket-status-product_changed { background: #ede9fe; color: #5b21b6; }
        .ticket-status-responded { background: #fee2e2; color: #991b1b; animation: ticketPulse 2s infinite; }
        .ticket-notification-dot {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 10px;
            height: 10px;
            background: #ef4444;
            border-radius: 50%;
            border: 2px solid white;
            animation: dotPulse 1.5s infinite;
        }
        @keyframes dotPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.8; }
        }
        @keyframes ticketPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
            50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
        }
        .ticket-status-escalated { background: #fce4ec; color: #b71c1c; }
        .ticket-status-escalated_closed { background: #e8eaf6; color: #283593; }

        /* Escalation chat */
        .escalation-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
            background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
            border: none; cursor: pointer; margin-top: 14px; transition: all 0.2s;
        }
        .escalation-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,68,68,0.4); }

        #escalationChatModal .esc-chat-container {
            display: flex; flex-direction: column; height: 60vh; max-height: 500px;
        }
        #escalationChatModal .esc-chat-messages {
            flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
            background: var(--bg-primary); border-radius: 12px; margin-bottom: 12px;
        }
        #escalationChatModal .esc-msg {
            max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 14px; word-break: break-word;
        }
        #escalationChatModal .esc-msg.user {
            align-self: flex-end; background: #FB5533; color: #fff; border-bottom-right-radius: 4px;
        }
        #escalationChatModal .esc-msg.admin {
            align-self: flex-start; background: var(--bg-tertiary); color: var(--text-primary); border-bottom-left-radius: 4px;
        }
        #escalationChatModal .esc-msg .esc-msg-time {
            font-size: 11px; opacity: 0.7; margin-top: 4px;
        }
        #escalationChatModal .esc-msg audio {
            max-width: 100%; margin-top: 6px;
        }
        #escalationChatModal .esc-msg .esc-msg-image {
            display: block;
            max-width: 240px;
            width: 100%;
            margin-top: 8px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.25);
            cursor: zoom-in;
            background: rgba(0,0,0,0.08);
        }
        #escalationChatModal .esc-msg.admin .esc-msg-image {
            border-color: rgba(0,0,0,0.14);
        }
        #escalationChatModal .esc-chat-input {
            display: flex; gap: 8px; align-items: center;
        }
        #escalationChatModal .esc-chat-input textarea {
            flex: 1; resize: none; padding: 10px 14px; border-radius: 10px;
            font-size: 14px; font-family: inherit; min-height: 42px; max-height: 100px;
        }
        #escalationChatModal .esc-chat-input button {
            padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
            border: none; cursor: pointer; background: #FB5533; color: #fff;
        }
        #escalationChatModal .esc-chat-input button:disabled {
            opacity: 0.4; cursor: not-allowed;
        }
        .esc-status-banner {
            padding: 12px 16px; border-radius: 10px; margin-bottom: 12px;
            font-size: 13px; display: flex; align-items: center; gap: 8px;
        }
        .esc-status-banner.waiting { background: rgba(251,85,51,0.1); border: 1px solid rgba(251,85,51,0.2); color: #FB5533; }
        .esc-status-banner.closed { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); color: #22c55e; }
        .esc-status-banner.photo { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); color: #1d4ed8; }
        .esc-resolution-box {
            padding: 14px; border-radius: 10px; margin-top: 12px;
            background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @media (max-width: 768px) {
            .btn-support {
                width: 100%;
                justify-content: center;
                padding: 12px 16px;
            }
            .support-modal-content {
                margin: 20px;
                padding: 20px;
            }
        }
        
        /* ===== TOUR DE COMPRAS (TIPO TEMU) ===== */
        .shopping-tour-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 9999;
            animation: fadeIn 0.3s ease-in;
            padding: 20px;
            overflow-y: auto;
        }
        
        .shopping-tour-overlay.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .shopping-tour-container {
            background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
            border: 3px solid #dc2626;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            width: 100%;
            position: relative;
            box-shadow: 0 0 40px rgba(220, 38, 38, 0.4), 0 0 80px rgba(239, 68, 68, 0.2);
            animation: slideUp 0.5s ease-out;
        }
        
        @media (max-width: 768px) {
            .shopping-tour-container {
                padding: 20px;
                border-radius: 16px;
                max-width: 95%;
            }
        }
        
        @media (max-width: 480px) {
            .shopping-tour-container {
                padding: 16px;
                border-radius: 12px;
                max-width: 100%;
            }
            
            .shopping-tour-overlay {
                padding: 10px;
            }
        }
        
        .shopping-tour-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #ef4444;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-header {
                margin-bottom: 15px;
                padding-bottom: 12px;
            }
        }
        
        .shopping-tour-title {
            margin: 0;
            font-size: 28px;
            font-weight: 900;
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-title {
                font-size: 22px;
            }
        }
        
        .shopping-tour-subtitle {
            margin: 5px 0 0 0;
            font-size: 12px;
            color: #991b1b;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .shopping-tour-close {
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
            flex-shrink: 0;
            margin-left: 10px;
        }
        
        .shopping-tour-close:hover {
            transform: scale(1.1) rotate(90deg);
            box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
        }
        
        @media (max-width: 480px) {
            .shopping-tour-close {
                width: 36px;
                height: 36px;
                font-size: 20px;
            }
        }
        
        .shopping-tour-timer {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: #78350f;
            padding: 12px 16px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 14px;
            text-align: center;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
            animation: pulse 1s infinite;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-timer {
                padding: 10px 12px;
                font-size: 13px;
                margin-bottom: 12px;
            }
        }
        
        .shopping-tour-product {
            background: var(--card-bg);
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15);
            transition: all 0.3s;
        }
        
        .shopping-tour-product:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 36px rgba(220, 38, 38, 0.25);
        }
        
        .shopping-tour-product-image {
            width: 100%;
            height: 280px;
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
            position: relative;
            overflow: hidden;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-product-image {
                height: 220px;
                font-size: 60px;
            }
        }
        
        .shopping-tour-product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .tour-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            color: white;
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 900;
            font-size: 13px;
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
            animation: pulse 2s infinite;
        }
        
        @media (max-width: 480px) {
            .tour-badge {
                padding: 6px 12px;
                font-size: 11px;
            }
        }
        
        .shopping-tour-product-info {
            padding: 20px;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-product-info {
                padding: 16px;
            }
        }
        
        .shopping-tour-product-name {
            margin: 0 0 8px 0;
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        @media (max-width: 480px) {
            .shopping-tour-product-name {
                font-size: 18px;
            }
        }
        
        .shopping-tour-product-desc {
            margin: 0 0 15px 0;
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
            height: 40px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-product-desc {
                font-size: 13px;
                margin-bottom: 12px;
            }
        }
        
        .shopping-tour-product-pricing {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        
        .shopping-tour-price-normal {
            color: var(--text-muted);
            text-decoration: line-through;
            font-size: 16px;
            font-weight: 600;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-price-normal {
                font-size: 14px;
            }
        }
        
        .shopping-tour-price-discount {
            font-size: 28px;
            font-weight: 900;
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-price-discount {
                font-size: 24px;
            }
        }
        
        .shopping-tour-savings {
            background: #fef2f2;
            color: #991b1b;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-savings {
                font-size: 11px;
                padding: 3px 8px;
            }
        }
        
        .shopping-tour-button {
            width: 100%;
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
        }
        
        .shopping-tour-button:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 28px rgba(220, 38, 38, 0.4);
        }
        
        .shopping-tour-button:active {
            transform: scale(0.98);
        }
        
        @media (max-width: 480px) {
            .shopping-tour-button {
                padding: 12px 16px;
                font-size: 14px;
            }
        }
        
        .shopping-tour-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        
        .shopping-tour-nav-btn {
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            font-size: 18px;
        }
        
        .shopping-tour-nav-btn:hover {
            transform: scale(1.1);
        }
        
        @media (max-width: 480px) {
            .shopping-tour-nav-btn {
                width: 36px;
                height: 36px;
                font-size: 16px;
            }
        }
        
        .shopping-tour-counter {
            color: var(--text-primary);
            font-weight: 700;
            font-size: 14px;
            min-width: 80px;
            text-align: center;
        }
        
        @media (max-width: 480px) {
            .shopping-tour-counter {
                font-size: 12px;
                min-width: 60px;
            }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== PEPECOIN STYLES ===== */
        .pepecoin-header-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 1px solid #FFD700;
            border-radius: 20px;
            padding: 6px 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
        }
        .pepecoin-header-btn:hover {
            box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
            transform: translateY(-1px);
        }
        .pepecoin-icon {
            color: #FFD700;
            font-size: 16px;
            filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
        }
        .pepecoin-amount {
            color: #FFD700;
            font-weight: 700;
            font-size: 14px;
            font-family: 'Courier New', monospace;
        }

        /* PepeCoin Card */
        .pepecoin-balance-card {
            background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d0d2b 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 16px;
            padding: 24px;
            position: relative;
            overflow: hidden;
        }
        .pepecoin-balance-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,215,0,0.05) 0%, transparent 60%);
            animation: pepecoinGlow 4s ease-in-out infinite;
        }
        @keyframes pepecoinGlow {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }
        .pepecoin-big-balance {
            font-size: 42px;
            font-weight: 900;
            color: #FFD700;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
            font-family: 'Courier New', monospace;
            position: relative;
            z-index: 1;
        }
        .pepecoin-usd-equiv {
            color: #aaa;
            font-size: 14px;
            position: relative;
            z-index: 1;
        }
        .pepecoin-recharge-btn {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #000;
            border: none;
            padding: 12px 28px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }
        .pepecoin-recharge-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
        }

        /* Transaction History */
        .pepecoin-tx {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color, #2a2a2a);
        }
        .pepecoin-tx:last-child { border-bottom: none; }
        .pepecoin-tx-amount.positive { color: #22c55e; }
        .pepecoin-tx-amount.negative { color: #ef4444; }

        /* ===== DASHBOARD LOADER ===== */
        body.dashboard-loading {
            overflow: hidden;
        }
        .dashboard-loader-overlay {
            position: fixed;
            inset: 0;
            min-height: 100dvh;
            z-index: 12000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding:
                max(20px, env(safe-area-inset-top))
                max(16px, env(safe-area-inset-right))
                max(20px, env(safe-area-inset-bottom))
                max(16px, env(safe-area-inset-left));
            background: linear-gradient(180deg, #ff7a00 0%, #FB5533 52%, #ef5b2a 100%);
            transition: opacity 0.42s ease, visibility 0.42s ease;
        }
        .dashboard-loader-overlay.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .dashboard-loader-card {
            width: min(520px, 100%);
            padding: clamp(20px, 4vw, 32px);
            border-radius: clamp(20px, 4vw, 28px);
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 30px 80px rgba(139, 38, 0, 0.28);
            backdrop-filter: blur(10px);
            text-align: center;
        }
        .dashboard-loader-brand {
            display: block;
            margin-bottom: clamp(14px, 3vw, 22px);
        }
        .dashboard-loader-badge {
            display: none;
        }
        .dashboard-loader-kicker {
            margin: 0 0 clamp(6px, 1.6vw, 10px);
            font-size: clamp(32px, 7vw, 48px);
            line-height: 0.95;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #fff;
            text-wrap: balance;
        }
        .dashboard-loader-title {
            margin: 0;
            font-size: clamp(18px, 4.6vw, 24px);
            line-height: 1.15;
            font-weight: 700;
            color: rgba(255,255,255,0.92);
            text-wrap: balance;
        }
        .dashboard-loader-progress-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
            color: rgba(255,255,255,0.9);
        }
        .dashboard-loader-progress-label {
            font-size: clamp(11px, 2.6vw, 13px);
            font-weight: 700;
            letter-spacing: 0.03em;
            opacity: 0.88;
        }
        .dashboard-loader-progress-value {
            font-size: clamp(20px, 5vw, 30px);
            line-height: 1;
            font-weight: 900;
            color: #fff;
        }
        .dashboard-loader-line {
            position: relative;
            height: 8px;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(255,255,255,0.22);
            margin-bottom: clamp(16px, 3vw, 22px);
        }
        .dashboard-loader-line span {
            position: absolute;
            inset: 0 auto 0 0;
            width: 0%;
            border-radius: inherit;
            background: linear-gradient(90deg, rgba(255,255,255,0.45), #fff 60%, rg ba(255,255,255,0.6));
            transition: width 0.28s ease;
            overflow: hidden;
        }
        .dashboard-loader-line span::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.25) 55%, transparent 100%);
            transform: translateX(-120%);
            animation: dashboard-loader-sheen 1.6s linear infinite;
        }
        @keyframes dashboard-loader-sheen {
            to { transform: translateX(220%); }
        }
        .dashboard-loader-tip-box {
            border-radius: clamp(16px, 3vw, 20px);
            padding: clamp(14px, 3vw, 20px);
            border: 1px solid rgba(255,255,255,0.24);
            background: rgba(255,255,255,0.14);
        }
        .dashboard-loader-tip-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: clamp(8px, 2vw, 12px);
        }
        .dashboard-loader-tip-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0;
            font-size: clamp(10px, 2.3vw, 12px);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.82);
        }
        .dashboard-loader-tip-label::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
        }
        .dashboard-loader-tip-counter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(255,255,255,0.18);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            flex-shrink: 0;
        }
        .dashboard-loader-tip-text {
            margin: 0;
            min-height: clamp(50px, 12vw, 68px);
            color: #fff;
            font-size: clamp(14px, 3.7vw, 16px);
            line-height: 1.55;
            transition: opacity 0.22s ease, transform 0.22s ease;
            text-wrap: pretty;
        }
        .dashboard-loader-tip-text.is-swapping {
            opacity: 0;
            transform: translateY(6px);
        }

        @media (max-width: 640px) {
            .dashboard-loader-overlay {
                align-items: center;
            }
            .dashboard-loader-card {
                width: 100%;
            }
            .dashboard-loader-kicker {
                font-size: clamp(30px, 9vw, 40px);
            }
            .dashboard-loader-title {
                font-size: clamp(17px, 5vw, 22px);
            }
            .dashboard-loader-progress-value {
                font-size: clamp(18px, 7vw, 24px);
            }
            .dashboard-loader-tip-text {
                min-height: clamp(54px, 16vw, 72px);
            }
            .dashboard-loader-tip-meta {
                gap: 10px;
            }
            .dashboard-loader-tip-counter {
                min-width: 40px;
                padding: 4px 8px;
                font-size: 10px;
            }
        }

        @media (max-width: 380px) {
            .dashboard-loader-overlay {
                padding:
                    max(14px, env(safe-area-inset-top))
                    max(12px, env(safe-area-inset-right))
                    max(14px, env(safe-area-inset-bottom))
                    max(12px, env(safe-area-inset-left));
            }
            .dashboard-loader-card {
                padding: 18px;
            }
            .dashboard-loader-tip-box {
                padding: 13px 14px;
            }
            .dashboard-loader-tip-label {
                gap: 6px;
                letter-spacing: 1.1px;
            }
            .dashboard-loader-tip-counter {
                min-width: 36px;
            }
        }

        @media (max-height: 540px) {
            .dashboard-loader-overlay {
                align-items: flex-start;
                overflow-y: auto;
            }
            .dashboard-loader-card {
                margin: auto 0;
            }
            .dashboard-loader-tip-text {
                min-height: 0;
            }
        }