/**
 * ==========================================
 *  JUTALOMPONT - DASHBOARD SPECIFIC STYLES
 *  2025 Modern Edition
 * ==========================================
 * 
 * FIGYELEM: A CSS változók a design-system.css-ben vannak!
 * Ez a fájl CSAK a dashboard-specifikus komponenseket tartalmazza.
 */

/* Dashboard Container - csak ha van body.dashboard-page */
body.dashboard-page main.container {
    max-width: 1400px;
}

/* Legacy support */
.dashboard-container {
    font-family: var(--jp-font-sans);
    color: var(--jp-text);
}

/* Stat Cards */
.stat-card {
    display: flex;
    align-items: center;
    padding: 1.5rem;
}

.stat-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.stat-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: var(--jp-text);
}

.stat-content p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--jp-text-secondary);
    font-weight: 500;
}

/* Welcome Hero */
.welcome-hero {
    background: var(--jp-gradient);
    color: white;
    border-radius: var(--jp-radius-lg);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.welcome-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.5;
}

/* Progress Bars */
.progress-custom {
    height: 8px;
    border-radius: 4px;
    background-color: var(--jp-border-light);
    overflow: hidden;
}

.progress-bar-custom {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* Timeline */
.timeline-item {
    position: relative;
    padding-left: 2rem;
    padding-bottom: 1.5rem;
    border-left: 2px solid var(--jp-border-light);
}

.timeline-item:last-child {
    border-left: 2px solid transparent;
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -9px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--jp-bg-card);
    border: 2px solid var(--jp-primary);
}

.timeline-content {
    position: relative;
    top: -4px;
}

/* Leaderboard */
.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--jp-border-light);
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.rank-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 0.75rem;
}

.rank-1 { background: #fef3c7; color: #d97706; }
.rank-2 { background: #f1f5f9; color: #475569; }
.rank-3 { background: #ffedd5; color: #c2410c; }

/* Quick Actions */
.quick-action-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-action-btn:hover {
    background: rgba(255,255,255,0.25);
    color: white;
    transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stat-content h3 { font-size: 1.5rem; }
    .welcome-hero { padding: 1.5rem; }
}
/* ============================================
   INLINE CSS MIGRATED FROM DASHBOARD.PHP
   Date: 2025-12-04
   ============================================ */
/* ============================================
   DASHBOARD 2025 - Premium Styles
   ============================================ */

:root {
    --dash-primary: var(--jp-primary);
    --dash-primary-light: rgba(var(--jp-primary-rgb), 0.1);
    --dash-secondary: var(--jp-text-muted);
    --dash-secondary-light: rgba(100, 116, 139, 0.1);
    --dash-success: var(--jp-success);
    --dash-success-light: rgba(var(--jp-success-rgb), 0.1);
    --dash-warning: var(--jp-warning);
    --dash-warning-light: rgba(var(--jp-warning-rgb), 0.1);
    --dash-info: var(--jp-info);
    --dash-info-light: rgba(var(--jp-info-rgb), 0.1);
    --dash-danger: var(--jp-danger);
    --dash-danger-light: rgba(var(--jp-danger-rgb), 0.1);
    --dash-pink: #ec4899;
    --dash-pink-light: rgba(236, 72, 153, 0.1);
    --dash-card-bg: var(--jp-bg-card, #ffffff);
    --dash-text: var(--jp-text, #1f2937);
    --dash-text-muted: var(--jp-text-muted, #6b7280);
    --dash-border: var(--jp-border, #e5e7eb);
    --dash-radius: 16px;
    --dash-radius-lg: 20px;
    --dash-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --dash-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    --dash-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode variable overrides */
[data-bs-theme="dark"] {
    --dash-card-bg: #1e293b;
    --dash-text: #f1f5f9;
    --dash-text-muted: #94a3b8;
    --dash-border: #334155;
    --dash-primary-light: rgba(var(--jp-primary-rgb), 0.2);
    --dash-success-light: rgba(var(--jp-success-rgb), 0.2);
    --dash-warning-light: rgba(var(--jp-warning-rgb), 0.2);
    --dash-info-light: rgba(var(--jp-info-rgb), 0.2);
    --dash-pink-light: rgba(236, 72, 153, 0.2);
    --dash-secondary-light: rgba(100, 116, 139, 0.2);
    --dash-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --dash-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* ====================================
   PREMIUM HERO SECTION 2025
   ==================================== */
.dash-hero {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: 24px;
    padding: 0;
    color: #ffffff;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3);
}

.dash-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
    animation: heroFloat 8s ease-in-out infinite;
}

.dash-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
    animation: heroFloat 10s ease-in-out infinite reverse;
}

@keyframes heroFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.05); }
}

/* Animated gradient border effect */
.dash-hero-inner {
    position: relative;
    z-index: 2;
    padding: 2rem 2.5rem;
}

/* Sparkle effects */
.dash-hero-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 3s ease-in-out infinite;
}
.dash-hero-sparkle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.dash-hero-sparkle:nth-child(2) { top: 60%; left: 25%; animation-delay: 0.5s; }
.dash-hero-sparkle:nth-child(3) { top: 30%; right: 20%; animation-delay: 1s; }
.dash-hero-sparkle:nth-child(4) { top: 70%; right: 30%; animation-delay: 1.5s; }
.dash-hero-sparkle:nth-child(5) { top: 40%; left: 40%; animation-delay: 2s; }

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

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

/* Premium Avatar */
.dash-avatar {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border: 3px solid rgba(255,255,255,0.4);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.dash-avatar:hover {
    transform: scale(1.05) rotate(2deg);
    border-color: rgba(255,255,255,0.6);
}

.dash-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 17px;
}

/* Online status indicator */
.dash-avatar::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    border: 3px solid #8b5cf6;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
}

/* Welcome Text */
.dash-welcome-text h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.5px;
}

.dash-welcome-text p {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* VIP Badge Premium */
.dash-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: vipPulse 2s ease-in-out infinite;
}

@keyframes vipPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 4px 25px rgba(245, 158, 11, 0.8); }
}

/* Balance Widget (Hero right side) */
.dash-balance-widget {
    text-align: right;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.08) 100%);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
}

.dash-balance-unit {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: 500;
    color: #ffffff;
    margin-top: 0.25rem;
}

/* Premium Balance Box */
.dash-balance-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.08) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(255,255,255,0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.dash-balance-box:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.12) 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Animated coin icon in balance box */
.dash-balance-box::before {
    content: 'đź’°';
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    font-size: 5rem;
    opacity: 0.1;
    pointer-events: none;
}

.dash-balance-label {
    font-size: 0.75rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-weight: 600;
}

.dash-balance-value {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -1px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.dash-balance-value .currency {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.8;
}

/* Premium Collect Button */
.btn-hero-collect {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    color: #6366f1;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.btn-hero-collect:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: #4f46e5;
}

.btn-hero-collect i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-hero-collect:hover i {
    transform: rotate(90deg);
}

/* Stats Grid */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dash-hero-inner {
        padding: 1.5rem;
    }
    .dash-welcome-text h1 {
        font-size: 1.5rem;
    }
    .dash-avatar {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }
    .dash-balance-value {
        font-size: 1.5rem;
    }
    .dash-balance-box {
        padding: 1rem 1.25rem;
    }
    .dash-balance-widget {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 1rem;
    }
}

@media (max-width: 576px) {
    .dash-stats-grid {
        grid-template-columns: 1fr;
    }
    .dash-hero {
        border-radius: 20px;
    }
    .dash-hero-inner {
        padding: 1.25rem;
    }
}

.dash-stat-card {
    background: var(--jp-card-bg);
    border-radius: var(--jp-radius);
    padding: 1.25rem;
    border: 1px solid var(--jp-border);
    transition: var(--jp-transition);
    position: relative;
    overflow: hidden;
}

.dash-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--jp-shadow-hover);
    border-color: transparent;
}

.dash-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.dash-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--jp-text);
    margin-bottom: 0.15rem;
    letter-spacing: -0.5px;
}

.dash-stat-label {
    font-size: 0.8rem;
    color: var(--jp-text-muted);
    font-weight: 500;
}

.dash-stat-trend {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
}

.dash-stat-decoration {
    position: absolute;
    bottom: -15px;
    right: -15px;
    font-size: 4.5rem;
    opacity: 0.05;
    color: var(--jp-text);
}

/* Card Styles */
.dash-card {
    background: var(--jp-card-bg);
    border-radius: var(--jp-radius);
    border: 1px solid var(--jp-border);
    overflow: hidden;
    transition: var(--jp-transition);
    margin-bottom: 1rem;
}

.dash-card:hover {
    box-shadow: var(--jp-shadow);
}

.dash-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--jp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
}

.dash-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--jp-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-card-body {
    padding: 1.25rem;
}

/* Info Box - Fiók áttekintés */
.dash-info-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--jp-card-bg);
    border: 1px solid var(--jp-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.dash-info-box:hover {
    border-color: var(--jp-primary);
    transform: translateY(-2px);
}

.dash-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-info-icon i {
    font-size: 1rem;
}

.dash-info-content {
    flex: 1;
    min-width: 0;
}

.dash-info-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--jp-text);
    line-height: 1.2;
}

.dash-info-label {
    font-size: 0.75rem;
    color: var(--jp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info color utilities */
.dash-secondary-light { background: var(--jp-secondary-light); }

/* Info colors */
.dash-secondary { color: #6b7280; }
.dash-info { color: #3b82f6; }

/* Progress Circle */
.dash-progress-ring {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.dash-progress-ring svg {
    transform: rotate(-90deg);
    width: 120px;
    height: 120px;
}

.dash-progress-ring .bg-circle {
    fill: none;
    stroke: var(--jp-border);
    stroke-width: 10;
}

.dash-progress-ring .progress-circle {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: calc(314 - (314 * var(--progress, 0)) / 100);
    transition: stroke-dashoffset 0.5s ease;
}

.dash-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.dash-progress-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--jp-text);
    line-height: 1;
}

.dash-progress-label {
    font-size: 0.7rem;
    color: var(--jp-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Quick Actions - Premium Modern UI */
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}

.dash-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--jp-border);
    background: var(--jp-bg-card, #fff);
    position: relative;
    overflow: hidden;
}

.dash-quick-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dash-quick-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.dash-quick-btn:hover::before {
    opacity: 1;
}

.dash-quick-btn:hover .dash-quick-icon {
    transform: scale(1.15) rotate(-5deg);
}

.dash-quick-btn:active {
    transform: translateY(-2px) scale(0.98);
}

.dash-quick-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.dash-quick-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--jp-text);
    position: relative;
    z-index: 1;
}

/* Transaction List - Premium UI */
.dash-tx-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dash-tx-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.15rem;
    background: var(--jp-bg-secondary, rgba(248, 250, 252, 0.8));
    border-radius: 14px;
    border: 1px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.dash-tx-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
    transition: all 0.25s ease;
}

.dash-tx-item.positive::before {
    background: linear-gradient(180deg, #10b981, #059669);
}

.dash-tx-item.negative::before {
    background: linear-gradient(180deg, #f43f5e, #dc2626);
}

.dash-tx-item:hover {
    transform: translateX(4px);
    background: var(--jp-bg-card, #fff);
    border-color: var(--jp-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.dash-tx-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
    transition: all 0.25s ease;
}

.dash-tx-icon.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
    color: #059669;
}

.dash-tx-icon.negative {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(220, 38, 38, 0.1));
    color: #dc2626;
}

.dash-tx-item:hover .dash-tx-icon {
    transform: scale(1.05);
}

.dash-tx-icon i {
    position: relative;
    z-index: 1;
}

.dash-tx-details {
    flex: 1;
    min-width: 0;
}

.dash-tx-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--jp-text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.dash-tx-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--jp-text-muted);
    background: rgba(0, 0, 0, 0.03);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

.dash-tx-time i {
    font-size: 0.7rem;
    opacity: 0.7;
}

.dash-tx-amount {
    font-weight: 700;
    font-size: 1rem;
    text-align: right;
    padding: 0.4rem 0.85rem;
    border-radius: 10px;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.dash-tx-amount.positive { 
    color: #059669;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.08));
}

.dash-tx-amount.negative { 
    color: #dc2626;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(220, 38, 38, 0.08));
}

.dash-tx-item:hover .dash-tx-amount {
    transform: scale(1.02);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .dash-tx-item {
    background: rgba(30, 41, 59, 0.5);
}

[data-bs-theme="dark"] .dash-tx-item:hover {
    background: rgba(51, 65, 85, 0.6);
}

[data-bs-theme="dark"] .dash-tx-time {
    background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .dash-tx-icon.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15));
}

[data-bs-theme="dark"] .dash-tx-icon.negative {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(220, 38, 38, 0.15));
}

[data-bs-theme="dark"] .dash-tx-amount.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
}

[data-bs-theme="dark"] .dash-tx-amount.negative {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(220, 38, 38, 0.1));
}

/* Leaderboard - Modern UI */
.dash-leaderboard {
    padding: 0;
}

.dash-leader-row {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    gap: 0.875rem;
    border-bottom: 1px solid var(--jp-border);
    transition: all 0.2s ease;
}

.dash-leader-row:last-child {
    border-bottom: none;
}

.dash-leader-row:hover {
    background: var(--jp-bg-secondary, rgba(99, 102, 241, 0.03));
}

.dash-leader-row.current-user {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border-left: 3px solid var(--jp-primary);
    margin-left: -1px;
}

.dash-leader-rank-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    background: var(--jp-border);
    color: var(--jp-text-muted);
}

.dash-leader-rank-badge.gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
}

.dash-leader-rank-badge.gold i { font-size: 0.75rem; }

.dash-leader-rank-badge.silver {
    background: linear-gradient(135deg, #e5e7eb, #9ca3af);
    color: #4b5563;
    box-shadow: 0 2px 8px rgba(156, 163, 175, 0.3);
}

.dash-leader-rank-badge.silver i { font-size: 0.7rem; }

.dash-leader-rank-badge.bronze {
    background: linear-gradient(135deg, #fbbf24, #b45309);
    color: #fff;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.3);
}

.dash-leader-rank-badge.bronze i { font-size: 0.65rem; }

.dash-leader-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--jp-primary), #8b5cf6);
}

.dash-leader-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-leader-avatar .avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.dash-leader-info {
    flex: 1;
    min-width: 0;
}

.dash-leader-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--jp-text);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dash-leader-level {
    font-size: 0.75rem;
    color: var(--jp-text-muted);
    margin-top: 0.125rem;
}

.dash-leader-score {
    text-align: right;
    flex-shrink: 0;
}

.dash-leader-score .score-value {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--jp-primary);
    line-height: 1.2;
}

.dash-leader-score .score-label {
    font-size: 0.7rem;
    color: var(--jp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Daily Goals - Premium UI */
.dash-goals-card .dash-goals-progress-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.dash-goals-progress-badge .completed {
    color: #059669;
    font-weight: 700;
}

.dash-goals-progress-badge .total {
    color: var(--jp-text-muted);
}

.dash-goals-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dash-goal-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--jp-bg-secondary, rgba(248, 250, 252, 0.8));
    border-radius: 14px;
    border: 1px solid var(--jp-border);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.dash-goal-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--jp-border);
    border-radius: 4px 0 0 4px;
    transition: all 0.25s ease;
}

.dash-goal-item.completed::before {
    background: linear-gradient(180deg, #10b981, #059669);
}

.dash-goal-item:hover {
    transform: translateX(4px);
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dash-goal-item.completed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.04));
    border-color: rgba(16, 185, 129, 0.2);
}

.dash-goal-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(99, 102, 241, 0.1);
    color: var(--jp-primary);
    transition: all 0.25s ease;
}

.dash-goal-icon.done {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.dash-goal-info {
    flex: 1;
    min-width: 0;
}

.dash-goal-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--jp-text);
    margin-bottom: 0.4rem;
}

.dash-goal-item.completed .dash-goal-title {
    color: #059669;
}

.dash-goal-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-goal-progress {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.dash-goal-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--jp-primary), #8b5cf6);
    border-radius: 10px;
    transition: width 0.4s ease;
}

.dash-goal-item.completed .dash-goal-fill {
    background: linear-gradient(90deg, #10b981, #059669);
}

.dash-goal-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--jp-text-muted);
    white-space: nowrap;
}

.dash-goal-reward {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 88, 12, 0.1));
    color: #d97706;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.dash-goal-item.completed .dash-goal-reward {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
    color: #059669;
}

.dash-goals-bonus {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 88, 12, 0.05));
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.dash-goals-bonus-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    animation: goalBounce 1s ease infinite;
}

@keyframes goalBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.dash-goals-bonus-text {
    font-size: 0.875rem;
    color: var(--jp-text);
}

.dash-goals-bonus-text strong {
    color: #d97706;
}

/* Dark mode for goals */
[data-bs-theme="dark"] .dash-goal-item {
    background: rgba(30, 41, 59, 0.5);
}

[data-bs-theme="dark"] .dash-goal-item.completed {
    background: rgba(16, 185, 129, 0.1);
}

[data-bs-theme="dark"] .dash-goals-bonus {
    background: rgba(245, 158, 11, 0.15);
}

/* Referral Card */
.dash-referral {
    background: linear-gradient(135deg, var(--jp-primary) 0%, #8b5cf6 100%);
    border-radius: var(--jp-radius);
    padding: 1.25rem;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.dash-referral::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

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

.dash-referral h6 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.dash-referral p {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-bottom: 0.75rem;
    color: #ffffff;
}

.dash-referral-input {
    display: flex;
    gap: 0.5rem;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 0.4rem;
}

.dash-referral-input input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    min-width: 0;
}

.dash-referral-input input::placeholder {
    color: rgba(255,255,255,0.6);
}

.dash-referral-input button {
    background: #ffffff;
    color: var(--jp-primary);
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--jp-transition);
    flex-shrink: 0;
}

.dash-referral-input button:hover {
    transform: scale(1.05);
}

/* XP Progress Bar - Premium */
.dash-level-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border-radius: 14px;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.dash-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.875rem;
}

.dash-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--jp-primary), #8b5cf6);
    color: #fff;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.dash-level-badge i {
    font-size: 0.8rem;
}

.dash-level-xp {
    font-size: 0.8rem;
    color: var(--jp-text-muted);
    font-weight: 500;
}

.dash-level-xp strong {
    color: var(--jp-primary);
}

.dash-xp-bar {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    height: 10px;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.dash-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--jp-primary), #8b5cf6, #ec4899);
    background-size: 200% 100%;
    border-radius: 20px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    animation: xpShimmer 2s ease-in-out infinite;
}

@keyframes xpShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.dash-xp-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    border-radius: 0 20px 20px 0;
}

.dash-level-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.dash-level-remaining {
    font-size: 0.8rem;
    color: var(--jp-text-muted);
}

.dash-level-remaining strong {
    color: var(--jp-warning);
    font-weight: 700;
}

/* Empty State */
.dash-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--jp-text-muted);
}

.dash-empty i {
    font-size: 2.5rem;
    opacity: 0.3;
    margin-bottom: 0.75rem;
}

.dash-empty p {
    margin: 0;
    font-size: 0.85rem;
}

/* Link Button */
.dash-link-btn {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--jp-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--jp-transition);
}

.dash-link-btn:hover {
    color: #4f46e5;
}

/* Dark Mode */
[data-bs-theme="dark"] .dash-stat-card,
[data-bs-theme="dark"] .dash-card {
    background: #1e1e2d;
    border-color: #3a3a5c;
}

[data-bs-theme="dark"] .dash-quick-btn {
    background: #252540;
    border-color: #3a3a5c;
}

[data-bs-theme="dark"] .dash-news-item:hover {
    background: #252540;
}

[data-bs-theme="dark"] .dash-leader-rank.default {
    background: #252540;
}

/* ============================================
   LAYOUT FIX - Row & Column Alignment
   Premium 2025 Dashboard Layout
   ============================================ */

/* Ensure row has proper spacing */
.dash-hero + .dash-stats-grid + .row {
    margin-top: 0;
}

/* Right column cards proper spacing */
.col-lg-4 .dash-card {
    margin-bottom: 1rem;
}

.col-lg-4 .dash-card:last-child,
.col-lg-4 .dash-referral {
    margin-bottom: 0;
}

/* Prevent content overflow */
.dash-card,
.dash-stat-card {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Row gap fix */
.row.g-4 > [class*="col-"] {
    margin-bottom: 0;
}

/* Progress bar inside cards */
.dash-card .progress {
    height: 8px;
    border-radius: 4px;
    background: var(--jp-border);
}

.dash-card .progress-bar {
    border-radius: 4px;
}

/* Info box dark mode */
[data-bs-theme="dark"] .dash-info-box {
    background: rgba(30, 41, 59, 0.5);
    border-color: var(--jp-border);
}

[data-bs-theme="dark"] .dash-info-box:hover {
    background: rgba(51, 65, 85, 0.5);
}

/* Level card dark mode */
[data-bs-theme="dark"] .dash-level-card {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Referral card consistent */
.dash-referral {
    background: linear-gradient(135deg, var(--jp-primary) 0%, #8b5cf6 100%);
    border-radius: var(--jp-radius);
    padding: 1.25rem;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

/* Responsive fixes for small screens */
@media (max-width: 991.98px) {
    .col-lg-4 {
        margin-top: 1.5rem;
    }
    
    .col-lg-4 .dash-card:first-child {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .dash-card-header {
        padding: 0.875rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .dash-card-body {
        padding: 1rem;
    }
    
    .dash-tx-item {
        padding: 0.875rem 1rem;
    }
    
    .dash-leader-row {
        padding: 0.75rem 1rem;
    }
    
    .dash-quick-grid {
        gap: 0.75rem;
    }
    
    .dash-quick-btn {
        padding: 1rem 0.75rem;
    }
    
    .dash-quick-icon {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }
}

/* Ensure Bootstrap col heights work */
.row.g-4 {
    --bs-gutter-y: 1.5rem;
}

/* Fix card title truncation */
.dash-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Avatar fallback consistent */
.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--jp-primary-light);
    color: var(--jp-primary);
    font-weight: 600;
    border-radius: inherit;
}

/* ============================================
   JP-DASHBOARD PREFIX CLASSES
   For dashboard.php template compatibility
   ============================================ */

/* ============================================
   HERO SECTION - Premium 2025 Modernized
   ============================================ */

/* Hero Container with Animated Mesh Gradient */
.jp-dashboard-hero {
    position: relative;
    border-radius: 28px;
    padding: 0;
    color: #ffffff;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 
        0 25px 80px rgba(var(--jp-primary-rgb), 0.35),
        0 10px 40px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Animated Mesh Gradient Background */
    background: 
        linear-gradient(125deg, 
            rgba(99, 102, 241, 0.95) 0%, 
            rgba(139, 92, 246, 0.9) 25%, 
            rgba(168, 85, 247, 0.85) 50%, 
            rgba(192, 132, 252, 0.8) 75%, 
            rgba(139, 92, 246, 0.95) 100%
        );
    background-size: 400% 400%;
    animation: heroMeshGradient 15s ease infinite;
}

@keyframes heroMeshGradient {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

.jp-dashboard-hero:hover {
    box-shadow: 
        0 35px 120px rgba(var(--jp-primary-rgb), 0.5),
        0 20px 60px rgba(99, 102, 241, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-6px) scale(1.002);
}

/* Noise Texture Overlay */
.jp-dashboard-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* Animated Gradient Blob 1 - Top Right */
.jp-dashboard-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 30%, transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    animation: heroOrb1 12s ease-in-out infinite;
    z-index: 0;
}

@keyframes heroOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    33% { transform: translate(-50px, 30px) scale(1.1); opacity: 0.8; }
    66% { transform: translate(30px, -20px) scale(0.95); opacity: 0.5; }
}

/* Floating Orbs Container */
.jp-hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Floating Orb Base Style */
.jp-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.4;
    animation: heroOrbFloat 10s ease-in-out infinite;
}

/* Orb 1 - Large Pink/Purple */
.jp-hero-orb--1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.5) 0%, transparent 70%);
    top: -20%;
    left: 10%;
    animation-duration: 14s;
    animation-delay: 0s;
}

/* Orb 2 - Medium Cyan */
.jp-hero-orb--2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.4) 0%, transparent 70%);
    bottom: -15%;
    right: 20%;
    animation-duration: 11s;
    animation-delay: -3s;
}

/* Orb 3 - Small White Glow */
.jp-hero-orb--3 {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
    top: 30%;
    right: 5%;
    animation-duration: 9s;
    animation-delay: -5s;
}

/* Orb 4 - Medium Yellow/Gold */
.jp-hero-orb--4 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.35) 0%, transparent 70%);
    bottom: 10%;
    left: -5%;
    animation-duration: 13s;
    animation-delay: -2s;
}

/* Orb 5 - Small Blue */
.jp-hero-orb--5 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, transparent 70%);
    top: 50%;
    left: 40%;
    animation-duration: 10s;
    animation-delay: -7s;
}

@keyframes heroOrbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translate(30px, -20px) scale(1.1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-20px, 30px) scale(0.9);
        opacity: 0.35;
    }
    75% {
        transform: translate(15px, 15px) scale(1.05);
        opacity: 0.5;
    }
}

/* Sparkle/Particle effects - Enhanced */
.jp-dashboard-hero-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: sparkleEnhanced 4s ease-in-out infinite;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.5);
    z-index: 3;
}

.jp-dashboard-hero-sparkle:nth-child(1) { top: 15%; left: 12%; animation-delay: 0s; width: 3px; height: 3px; }
.jp-dashboard-hero-sparkle:nth-child(2) { top: 55%; left: 22%; animation-delay: 0.7s; width: 5px; height: 5px; }
.jp-dashboard-hero-sparkle:nth-child(3) { top: 25%; right: 18%; animation-delay: 1.4s; }
.jp-dashboard-hero-sparkle:nth-child(4) { top: 65%; right: 28%; animation-delay: 2.1s; width: 6px; height: 6px; }
.jp-dashboard-hero-sparkle:nth-child(5) { top: 35%; left: 38%; animation-delay: 2.8s; width: 3px; height: 3px; }

@keyframes sparkleEnhanced {
    0%, 100% { 
        opacity: 0; 
        transform: scale(0.5) rotate(0deg); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2) rotate(180deg); 
    }
}

/* ============================================
   PARTICLE SYSTEM - CSS Only
   15-20 floating particles
   ============================================ */
.jp-hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.jp-hero-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 8s ease-in-out infinite;
}

/* Different particle shapes */
.jp-hero-particle--dot {
    background: rgba(255, 255, 255, 0.6);
}

.jp-hero-particle--ring {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.jp-hero-particle--star {
    background: transparent;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.5),
        2px 0 0 rgba(255, 255, 255, 0.3),
        -2px 0 0 rgba(255, 255, 255, 0.3),
        0 2px 0 rgba(255, 255, 255, 0.3),
        0 -2px 0 rgba(255, 255, 255, 0.3);
}

.jp-hero-particle--diamond {
    background: rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Individual particle positions and timings */
.jp-hero-particle:nth-child(1) { width: 4px; height: 4px; top: 10%; left: 5%; animation-delay: 0s; animation-duration: 12s; }
.jp-hero-particle:nth-child(2) { width: 6px; height: 6px; top: 20%; left: 15%; animation-delay: 1s; animation-duration: 10s; }
.jp-hero-particle:nth-child(3) { width: 3px; height: 3px; top: 30%; left: 8%; animation-delay: 2s; animation-duration: 14s; }
.jp-hero-particle:nth-child(4) { width: 5px; height: 5px; top: 50%; left: 3%; animation-delay: 0.5s; animation-duration: 11s; }
.jp-hero-particle:nth-child(5) { width: 4px; height: 4px; top: 70%; left: 12%; animation-delay: 3s; animation-duration: 9s; }
.jp-hero-particle:nth-child(6) { width: 7px; height: 7px; top: 80%; left: 20%; animation-delay: 1.5s; animation-duration: 13s; }
.jp-hero-particle:nth-child(7) { width: 3px; height: 3px; top: 15%; left: 45%; animation-delay: 2.5s; animation-duration: 10s; }
.jp-hero-particle:nth-child(8) { width: 5px; height: 5px; top: 40%; left: 50%; animation-delay: 0.8s; animation-duration: 12s; }
.jp-hero-particle:nth-child(9) { width: 4px; height: 4px; top: 60%; left: 55%; animation-delay: 3.5s; animation-duration: 11s; }
.jp-hero-particle:nth-child(10) { width: 6px; height: 6px; top: 85%; left: 48%; animation-delay: 1.2s; animation-duration: 14s; }
.jp-hero-particle:nth-child(11) { width: 3px; height: 3px; top: 12%; right: 15%; animation-delay: 2.2s; animation-duration: 9s; }
.jp-hero-particle:nth-child(12) { width: 5px; height: 5px; top: 25%; right: 8%; animation-delay: 0.3s; animation-duration: 13s; }
.jp-hero-particle:nth-child(13) { width: 4px; height: 4px; top: 45%; right: 12%; animation-delay: 1.8s; animation-duration: 10s; }
.jp-hero-particle:nth-child(14) { width: 6px; height: 6px; top: 55%; right: 5%; animation-delay: 2.8s; animation-duration: 12s; }
.jp-hero-particle:nth-child(15) { width: 3px; height: 3px; top: 75%; right: 18%; animation-delay: 0.6s; animation-duration: 11s; }
.jp-hero-particle:nth-child(16) { width: 5px; height: 5px; top: 90%; right: 10%; animation-delay: 3.2s; animation-duration: 14s; }
.jp-hero-particle:nth-child(17) { width: 4px; height: 4px; top: 5%; left: 70%; animation-delay: 1.4s; animation-duration: 9s; }
.jp-hero-particle:nth-child(18) { width: 7px; height: 7px; top: 35%; left: 75%; animation-delay: 2.6s; animation-duration: 13s; }

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0);
    }
    10% {
        opacity: 0.8;
        transform: translateY(10px) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-30px) scale(0.8);
    }
    90% {
        opacity: 0.8;
        transform: translateY(-60px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0);
    }
}

/* Hero Inner Container - Glassmorphism */
.jp-dashboard-hero-inner {
    position: relative;
    z-index: 5;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.jp-dashboard-hero-content {
    position: relative;
    z-index: 5;
}

/* Avatar - Premium 3D Frame with Animated Gradient Border */
.jp-dashboard-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.jp-dashboard-avatar {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    /* 3D Setup */
    transform-style: preserve-3d;
    perspective: 500px;
    /* Floating animation */
    animation: avatarFloat 4s ease-in-out infinite;
}

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

/* Animated Gradient Border Ring */
.jp-dashboard-avatar::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 28px;
    background: conic-gradient(
        from 0deg,
        #ec4899,
        #8b5cf6,
        #3b82f6,
        #22d3ee,
        #10b981,
        #facc15,
        #f97316,
        #ec4899
    );
    z-index: -1;
    animation: avatarBorderSpin 6s linear infinite;
    opacity: 0.9;
}

@keyframes avatarBorderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Inner background to create border effect */
.jp-dashboard-avatar::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 21px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.95) 100%);
    z-index: -1;
}

.jp-dashboard-avatar:hover {
    animation: none;
    transform: scale(1.1) rotateY(15deg) rotateX(5deg);
    box-shadow: 
        -15px 15px 30px rgba(0, 0, 0, 0.2),
        10px -10px 30px rgba(139, 92, 246, 0.3);
}

.jp-dashboard-avatar:hover::before {
    animation: avatarBorderSpin 2s linear infinite;
    opacity: 1;
    filter: brightness(1.2);
}

.jp-dashboard-avatar img {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    object-fit: cover;
    border-radius: 21px;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.jp-dashboard-avatar:hover img {
    transform: scale(1.05);
}

.jp-dashboard-avatar .avatar-fallback {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 21px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

/* Online Status Indicator */
.jp-dashboard-avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: #22c55e;
    border-radius: 50%;
    border: 3px solid rgba(99, 102, 241, 0.9);
    z-index: 10;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
        transform: scale(1.1);
    }
}

/* KYC Badge positioned better */
.jp-dashboard-avatar-wrapper .jp-kyc-check {
    position: absolute;
    bottom: -4px;
    right: -4px;
    z-index: 15;
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* Welcome Text - Animated Greeting */
.jp-dashboard-welcome-text {
    animation: welcomeFadeIn 0.8s ease-out;
}

@keyframes welcomeFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jp-dashboard-welcome-text h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Username with gradient highlight */
.jp-dashboard-welcome-text h1 .jp-hero-username {
    position: relative;
    display: inline-block;
}

.jp-dashboard-welcome-text h1 .jp-hero-username::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #facc15, #f97316, #ec4899);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineGrow 1s ease-out 0.5s forwards;
}

@keyframes underlineGrow {
    to { transform: scaleX(1); }
}

/* Animated Wave Emoji */
.jp-hero-wave-emoji {
    display: inline-block;
    font-size: 1.8rem;
    animation: waveHand 2.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

@keyframes waveHand {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60%, 100% { transform: rotate(0deg); }
}

.jp-dashboard-welcome-text p {
    font-size: 1.05rem;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    animation: subtitleFadeIn 0.8s ease-out 0.3s both;
}

@keyframes subtitleFadeIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Subtitle text with subtle glow */
.jp-dashboard-welcome-text p > span:first-child {
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

/* VIP Badge - Premium Animated */
.jp-dashboard-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 
        0 4px 20px rgba(251, 191, 36, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    animation: vipBadgeSlideIn 0.6s ease-out 0.6s both;
}

@keyframes vipBadgeSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* VIP Badge shimmer effect */
.jp-dashboard-vip-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: vipShimmer 3s ease-in-out infinite;
}

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

.jp-dashboard-vip-badge i {
    animation: crownBounce 2s ease-in-out infinite;
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-5deg); }
    75% { transform: translateY(-2px) rotate(5deg); }
}

/* ============================================
   HERO QUICK STATS STRIP
   Mini stat badges in hero section
   ============================================ */
.jp-hero-stats-strip {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.jp-hero-stat-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
    animation: statBadgeFadeIn 0.6s ease-out backwards;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.jp-hero-stat-badge:nth-child(1) { animation-delay: 0.3s; }
.jp-hero-stat-badge:nth-child(2) { animation-delay: 0.4s; }
.jp-hero-stat-badge:nth-child(3) { animation-delay: 0.5s; }
.jp-hero-stat-badge:nth-child(4) { animation-delay: 0.6s; }

@keyframes statBadgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.jp-hero-stat-badge:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

/* Stat badge icon */
.jp-hero-stat-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.jp-hero-stat-badge-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.8s ease;
    opacity: 0;
}

.jp-hero-stat-badge:hover .jp-hero-stat-badge-icon {
    transform: scale(1.2) rotate(8deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.jp-hero-stat-badge:hover .jp-hero-stat-badge-icon::before {
    opacity: 1;
    animation: iconShine 1.2s ease-in-out;
}

/* Icon color variants */
.jp-hero-stat-badge-icon--streak {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

.jp-hero-stat-badge-icon--rank {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.jp-hero-stat-badge-icon--earnings {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.jp-hero-stat-badge-icon--level {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Stat badge content */
.jp-hero-stat-badge-content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.jp-hero-stat-badge-value {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
}

.jp-hero-stat-badge-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Animated pulse for streak */
.jp-hero-stat-badge--streak .jp-hero-stat-badge-icon {
    animation: streakPulse 2s ease-in-out infinite;
}

@keyframes streakPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(249, 115, 22, 0.7), 0 0 30px rgba(249, 115, 22, 0.3); }
}

/* Hover tooltip */
.jp-hero-stat-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: none;
}

.jp-hero-stat-badge[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   HERO RESPONSIVE STYLES
   ============================================ */

/* Tablet */
@media (max-width: 992px) {
    .jp-dashboard-hero-inner {
        padding: 2rem;
    }
    
    .jp-dashboard-avatar {
        width: 70px;
        height: 70px;
        border-radius: 20px;
    }
    
    .jp-dashboard-avatar::before {
        inset: -3px;
        border-radius: 24px;
    }
    
    .jp-dashboard-avatar::after {
        inset: 2px;
        border-radius: 18px;
    }
    
    .jp-dashboard-welcome-text h1 {
        font-size: 1.8rem;
    }
    
    .jp-dashboard-balance-value {
        font-size: 2.5rem;
    }
    
    .jp-hero-stats-strip {
        justify-content: flex-start;
    }
    
    .jp-hero-stat-badge {
        padding: 0.5rem 0.75rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .jp-dashboard-hero {
        border-radius: 20px;
        margin-bottom: 1rem;
    }
    
    .jp-dashboard-hero-inner {
        padding: 1.5rem;
    }
    
    /* Stack layout on mobile */
    .jp-dashboard-hero-content .row {
        flex-direction: column;
    }
    
    .jp-dashboard-hero-content .col-lg-7,
    .jp-dashboard-hero-content .col-lg-5 {
        width: 100%;
        text-align: center !important;
    }
    
    .jp-dashboard-hero-content .d-flex.align-items-center.gap-4 {
        flex-direction: column;
        gap: 1rem !important;
    }
    
    .jp-dashboard-avatar-wrapper {
        margin-bottom: 0.5rem;
    }
    
    .jp-dashboard-avatar {
        width: 80px;
        height: 80px;
    }
    
    .jp-dashboard-welcome-text {
        text-align: center;
    }
    
    .jp-dashboard-welcome-text h1 {
        font-size: 1.5rem;
        justify-content: center;
    }
    
    .jp-dashboard-welcome-text p {
        justify-content: center;
    }
    
    .jp-hero-stats-strip {
        justify-content: center;
        margin-top: 1rem;
    }
    
    .jp-hero-stat-badge {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .jp-hero-stat-badge-icon {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    
    .jp-hero-stat-badge-value {
        font-size: 0.9rem;
    }
    
    .jp-hero-stat-badge-label {
        font-size: 0.6rem;
    }
    
    /* Hide some tooltip on mobile */
    .jp-hero-stat-badge[data-tooltip]::after {
        display: none;
    }
    
    .jp-dashboard-balance-widget {
        margin-top: 1.5rem;
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .jp-dashboard-balance-value {
        font-size: 2.2rem;
    }
    
    /* Reduce orb sizes on mobile */
    .jp-hero-orb--1 { width: 200px; height: 200px; }
    .jp-hero-orb--2 { width: 150px; height: 150px; }
    .jp-hero-orb--3 { width: 100px; height: 100px; }
    .jp-hero-orb--4 { width: 130px; height: 130px; }
    .jp-hero-orb--5 { width: 80px; height: 80px; }
    
    /* Hide some particles on mobile */
    .jp-hero-particle:nth-child(n+13) {
        display: none;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .jp-dashboard-hero-inner {
        padding: 1.25rem;
    }
    
    .jp-dashboard-avatar {
        width: 70px;
        height: 70px;
    }
    
    .jp-dashboard-welcome-text h1 {
        font-size: 1.3rem;
    }
    
    .jp-hero-wave-emoji {
        font-size: 1.4rem;
    }
    
    .jp-hero-stats-strip {
        gap: 0.5rem;
    }
    
    .jp-hero-stat-badge {
        padding: 0.4rem 0.5rem;
    }
    
    .jp-hero-stat-badge-icon {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
        border-radius: 6px;
    }
    
    .jp-hero-stat-badge-content {
        gap: 0;
    }
    
    .jp-hero-stat-badge-value {
        font-size: 0.85rem;
    }
    
    .jp-hero-stat-badge-label {
        font-size: 0.55rem;
    }
    
    .jp-dashboard-balance-value {
        font-size: 2rem;
    }
}

/* ============================================
   HERO REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* Disable all hero animations */
    .jp-dashboard-hero {
        animation: none;
        background-size: 100% 100%;
    }
    
    .jp-dashboard-hero::after,
    .jp-hero-orb,
    .jp-dashboard-hero-sparkle,
    .jp-hero-particle {
        animation: none;
        opacity: 0.3;
    }
    
    .jp-dashboard-avatar {
        animation: none;
    }
    
    .jp-dashboard-avatar::before {
        animation: none;
    }
    
    .jp-dashboard-balance-value {
        animation: none;
    }
    
    .jp-dashboard-balance-widget::before {
        animation: none;
    }
    
    .jp-dashboard-vip-badge::before {
        animation: none;
    }
    
    .jp-dashboard-vip-badge i {
        animation: none;
    }
    
    .jp-hero-wave-emoji {
        animation: none;
    }
    
    .jp-dashboard-avatar-status {
        animation: none;
    }
    
    .jp-hero-stat-badge,
    .jp-dashboard-welcome-text,
    .jp-dashboard-welcome-text p {
        animation: none;
    }
    
    .jp-hero-stat-badge--streak .jp-hero-stat-badge-icon {
        animation: none;
    }
    
    /* Remove hover transforms */
    .jp-dashboard-hero:hover,
    .jp-dashboard-avatar:hover,
    .jp-dashboard-balance-widget:hover,
    .jp-hero-stat-badge:hover {
        transform: none;
    }
    
    /* Keep simple fade transitions */
    .jp-dashboard-hero,
    .jp-dashboard-avatar,
    .jp-dashboard-balance-widget,
    .jp-hero-stat-badge {
        transition: opacity 0.2s ease, background 0.2s ease;
    }
}

/* Stat card modifiers (avoid inline styles in template) */
.jp-dashboard-stat-icon--streak {
    background: linear-gradient(135deg, var(--jp-warning) 0%, var(--jp-warning-dark) 100%);
    color: var(--jp-text-inverse);
}

.jp-dashboard-stat-trend--streak {
    background: rgba(var(--jp-warning-rgb), 0.15);
    color: var(--jp-warning);
}

.jp-dashboard-stat-icon--rank {
    background: linear-gradient(135deg, var(--jp-secondary) 0%, var(--jp-secondary-dark) 100%);
    color: var(--jp-text-inverse);
}

/* Balance Widget - Premium 3D Glassmorphism */
.jp-dashboard-balance-widget {
    text-align: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
    /* 3D Transform Setup */
    transform-style: preserve-3d;
    perspective: 1000px;
    /* Animated Border Glow */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Animated gradient border */
.jp-dashboard-balance-widget::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.5) 0%, 
        rgba(255, 255, 255, 0.1) 25%,
        rgba(236, 72, 153, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        rgba(255, 255, 255, 0.5) 100%
    );
    background-size: 300% 300%;
    border-radius: 22px;
    z-index: -1;
    animation: balanceBorderGlow 8s ease infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.jp-dashboard-balance-widget:hover::before {
    opacity: 1;
}

@keyframes balanceBorderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Inner glow effect */
.jp-dashboard-balance-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    border-radius: 20px;
    pointer-events: none;
    opacity: 0.5;
}

.jp-dashboard-balance-widget:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-8px) rotateX(8deg) scale(1.02);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.25),
        0 15px 40px rgba(99, 102, 241, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.jp-dashboard-balance-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.jp-dashboard-balance-label::before,
.jp-dashboard-balance-label::after {
    content: '';
    width: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.jp-dashboard-balance-value {
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    line-height: 1;
    /* Animated number glow */
    animation: balanceValuePulse 3s ease-in-out infinite;
}

@keyframes balanceValuePulse {
    0%, 100% { text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); }
    50% { text-shadow: 0 4px 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(139, 92, 246, 0.3); }
}

.jp-dashboard-balance-widget:hover .jp-dashboard-balance-value {
    transform: scale(1.08);
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.2);
}

.jp-dashboard-balance-unit {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.25rem;
    letter-spacing: 1px;
}

.jp-dashboard-balance-converted {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Stats Grid */
.jp-dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .jp-dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .jp-dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Stat Card */
.jp-dashboard-stat-card {
    background: var(--dash-card-bg);
    border-radius: 20px;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--dash-shadow), 0 0 0 1px rgba(0, 0, 0, 0.02) inset;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--dash-border);
    cursor: default;
}

.jp-dashboard-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--jp-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.jp-dashboard-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(139, 92, 246, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.jp-dashboard-stat-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 16px 50px rgba(0,0,0,0.18), 0 0 0 1px rgba(99, 102, 241, 0.1) inset;
    border-color: rgba(99, 102, 241, 0.3);
}

.jp-dashboard-stat-card:hover::before {
    transform: scaleX(1);
}

.jp-dashboard-stat-card:hover::after {
    opacity: 1;
}

.jp-dashboard-stat-card:hover .jp-dashboard-stat-icon {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.jp-dashboard-stat-card:hover .jp-dashboard-stat-decoration {
    opacity: 0.12;
    transform: translate(15px, 15px) scale(1.1);
}

.jp-dashboard-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.jp-dashboard-stat-value {
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--dash-text);
    margin-bottom: 0.375rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.jp-dashboard-stat-card:hover .jp-dashboard-stat-value {
    transform: scale(1.05);
    background: var(--jp-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jp-dashboard-stat-label {
    font-size: 0.875rem;
    color: var(--dash-text-muted);
    font-weight: 500;
}

.jp-dashboard-stat-trend {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.jp-dashboard-stat-decoration {
    position: absolute;
    bottom: -15px;
    right: -15px;
    font-size: 5rem;
    opacity: 0.05;
    color: var(--dash-text);
    transition: all 0.3s ease;
}

/* Dashboard Cards */
.jp-dashboard-card {
    background: var(--dash-card-bg);
    border-radius: 20px;
    box-shadow: var(--dash-shadow), 0 0 0 1px rgba(0, 0, 0, 0.02) inset;
    border: 2px solid var(--dash-border);
    margin-bottom: 1.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.jp-dashboard-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.1) inset;
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.2);
}

.jp-dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--dash-border);
}

.jp-dashboard-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dash-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.jp-dashboard-card-body {
    padding: 1.5rem;
}

/* ============================================
   NAPI CÉLOK - MODERN REDESIGN 2025
   ============================================ */

.dash-goals-card {
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.05) 0%, 
        rgba(139, 92, 246, 0.03) 100%
    );
    border: 1px solid rgba(99, 102, 241, 0.1);
    position: relative;
    overflow: hidden;
}

.dash-goals-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
    animation: goalsPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes goalsPulse {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-10%, -10%) scale(1.1); opacity: 0.8; }
}

[data-bs-theme="dark"] .dash-goals-card {
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.08) 0%, 
        rgba(139, 92, 246, 0.05) 100%
    );
    border-color: rgba(99, 102, 241, 0.15);
}

.dash-goals-card .jp-dashboard-card-body {
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.jp-dashboard-link-btn {
    font-size: 0.875rem;
    color: var(--jp-primary, #6366f1);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.jp-dashboard-link-btn:hover {
    color: var(--jp-primary-dark, #4f46e5);
}

/* Empty State */
.jp-dashboard-empty {
    text-align: center;
    padding: 2rem;
    color: var(--dash-text-muted);
}

.jp-dashboard-empty i {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
    display: block;
}

.jp-dashboard-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* Transaction List */
.jp-dashboard-tx-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.jp-dashboard-tx-item {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    background: var(--jp-bg-secondary, #f8fafc);
    border-radius: 16px;
    gap: 1.25rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.jp-dashboard-tx-item:hover {
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.jp-dashboard-tx-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

.jp-dashboard-tx-item:hover::before {
    left: 100%;
}

[data-bs-theme="dark"] .jp-dashboard-tx-item {
    background: rgba(255,255,255,0.05);
}

.jp-dashboard-tx-item:hover {
    transform: translateX(10px) scale(1.01);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    background: var(--dash-card-bg);
}

.jp-dashboard-tx-item:active {
    transform: translateX(4px) scale(0.99);
}

.jp-dashboard-tx-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.jp-dashboard-tx-item:hover .jp-dashboard-tx-icon {
    transform: scale(1.1);
}

.jp-dashboard-tx-icon.positive {
    background: var(--dash-success-light);
    color: var(--dash-success);
}

.jp-dashboard-tx-icon.negative {
    background: var(--dash-danger-light);
    color: var(--dash-danger);
}

.jp-dashboard-tx-details {
    flex: 1;
    min-width: 0;
}

.jp-dashboard-tx-title {
    font-weight: 600;
    color: var(--dash-text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.jp-dashboard-tx-item:hover .jp-dashboard-tx-title {
    color: var(--jp-primary);
}

.jp-dashboard-tx-time {
    font-size: 0.8rem;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.jp-dashboard-tx-amount {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

.jp-dashboard-tx-amount.positive {
    color: var(--dash-success);
}

.jp-dashboard-tx-amount.negative {
    color: var(--dash-danger);
}

/* Goals Section */
.jp-dashboard-goals-progress-badge {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
}

.jp-dashboard-goals-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Daily Goals card: scroll is handled by .jp-tx-scroll-container on the card-body */
.dash-goals-card .jp-dashboard-goals-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.jp-dashboard-goals-list::-webkit-scrollbar {
    width: 6px;
}

.jp-dashboard-goals-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
}

.jp-dashboard-goals-list::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.3);
    border-radius: 10px;
}

.jp-dashboard-goals-list::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,0.5);
}

.jp-dashboard-goal-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--jp-bg-secondary, #f8fafc);
    border-radius: 12px;
    gap: 1rem;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
}

[data-bs-theme="dark"] .jp-dashboard-goal-item {
    background: rgba(255,255,255,0.05);
}

.jp-dashboard-goal-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.jp-dashboard-goal-item:hover .jp-dashboard-goal-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Completed state - HTML uses .completed class */
.jp-dashboard-goal-item.completed,
.jp-dashboard-goal-item.done {
    background: linear-gradient(135deg, var(--dash-success-light) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-left: 3px solid var(--dash-success);
}

.jp-dashboard-goal-item.completed:hover,
.jp-dashboard-goal-item.done:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15);
}

.jp-dashboard-goal-item.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.jp-dashboard-goal-item.locked:hover {
    transform: none;
    box-shadow: none;
}

/* Goal icon with done state */
.jp-dashboard-goal-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: var(--jp-bg-tertiary, #f1f5f9);
    color: var(--jp-text-muted);
    transition: all 0.3s ease;
}

.jp-dashboard-goal-icon.done {
    background: linear-gradient(135deg, var(--dash-success) 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.jp-dashboard-goal-content {
    flex: 1;
    min-width: 0;
}

.jp-dashboard-goal-title {
    font-weight: 600;
    color: var(--dash-text);
    margin-bottom: 0.35rem;
    transition: color 0.2s ease;
}

.jp-dashboard-goal-item:hover .jp-dashboard-goal-title {
    color: var(--jp-primary);
}

/* Goal Info wrapper - used in HTML */
.jp-dashboard-goal-info {
    flex: 1;
    min-width: 0;
}

/* Goal Progress wrap - used in HTML */
.jp-dashboard-goal-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.jp-dashboard-goal-progress {
    flex: 1;
    height: 8px;
    background: var(--dash-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* Goal Fill - HTML uses jp-dashboard-goal-fill, not progress-bar */
.jp-dashboard-goal-fill,
.jp-dashboard-goal-progress-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--dash-primary) 0%, #8b5cf6 100%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.jp-dashboard-goal-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: goalShimmer 2s infinite;
}

@keyframes goalShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Goal count text - used in HTML */
.jp-dashboard-goal-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--jp-text-muted);
    white-space: nowrap;
}

/* Goal reward styling - modernized */
.jp-dashboard-goal-reward {
    text-align: right;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    background: var(--dash-success-light);
    border-radius: 10px;
    min-width: 70px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dash-success);
}

.jp-dashboard-goal-reward i {
    margin-right: 0.25rem;
}

.jp-dashboard-goal-reward small {
    display: block;
    font-size: 0.7rem;
    opacity: 0.8;
    margin-top: 0.125rem;
}

.jp-dashboard-goal-reward-value {
    font-weight: 700;
    color: var(--dash-success);
    font-size: 0.95rem;
}

.jp-dashboard-goal-reward-label {
    font-size: 0.7rem;
    color: var(--dash-text-muted);
    text-transform: uppercase;
}

.jp-dashboard-goals-bonus {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--dash-success-light) 0%, var(--dash-primary-light) 100%);
    border-radius: 12px;
    margin-top: 1rem;
}

.jp-dashboard-goals-bonus-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--dash-success) 0%, #059669 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.jp-dashboard-goals-bonus-text {
    flex: 1;
    color: var(--dash-text);
}

/* Info Box */
.jp-dashboard-info-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--jp-bg-secondary, #f8fafc);
    border-radius: 12px;
}

[data-bs-theme="dark"] .jp-dashboard-info-box {
    background: rgba(255,255,255,0.05);
}

.jp-dashboard-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.jp-dashboard-info-content {
    flex: 1;
}

.jp-dashboard-info-value {
    font-weight: 700;
    color: var(--dash-text);
    font-size: 1.1rem;
}

.jp-dashboard-info-label {
    font-size: 0.75rem;
    color: var(--dash-text-muted);
}

/* Level Section */
.jp-dashboard-level-card {
    padding: 1.5rem;
}

.jp-dashboard-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.jp-dashboard-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--dash-warning) 0%, #d97706 100%);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.jp-dashboard-level-badge i {
    font-size: 1rem;
}

/* Level XP display - used in HTML */
.jp-dashboard-level-xp {
    font-size: 0.95rem;
    color: var(--jp-text-muted);
}

.jp-dashboard-level-xp strong {
    color: var(--jp-text);
    font-weight: 700;
}

.jp-dashboard-level-info {
    text-align: right;
}

.jp-dashboard-level-current {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dash-text);
}

.jp-dashboard-level-next {
    font-size: 0.85rem;
    color: var(--dash-text-muted);
}

.jp-dashboard-xp-bar {
    height: 10px;
    background: var(--dash-border);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.jp-dashboard-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dash-warning) 0%, #f59e0b 50%, #fbbf24 100%);
    border-radius: 5px;
    transition: width 0.6s ease;
}

.jp-dashboard-level-footer {
    text-align: center;
}

.jp-dashboard-level-remaining {
    font-size: 0.85rem;
    color: var(--dash-text-muted);
}

/* Quick Actions */
.jp-dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 576px) {
    .jp-dashboard-quick-grid {
        grid-template-columns: 1fr;
    }
}

.jp-dashboard-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--jp-bg-secondary, #f8fafc);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.jp-dashboard-quick-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.jp-dashboard-quick-btn:hover::before {
    width: 200%;
    height: 200%;
}

[data-bs-theme="dark"] .jp-dashboard-quick-btn {
    background: rgba(255,255,255,0.05);
}

[data-bs-theme="dark"] .jp-dashboard-quick-btn::before {
    background: rgba(99, 102, 241, 0.15);
}

.jp-dashboard-quick-btn:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.jp-dashboard-quick-btn:active {
    transform: translateY(-2px) scale(0.98);
}

.jp-dashboard-quick-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.jp-dashboard-quick-btn:hover .jp-dashboard-quick-icon {
    transform: scale(1.15) rotate(5deg);
}

.jp-dashboard-quick-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dash-text);
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
}

.jp-dashboard-quick-btn:hover .jp-dashboard-quick-label {
    color: var(--jp-primary);
}

/* Leaderboard */
.jp-dashboard-leaderboard {
    padding: 0;
}

.jp-dashboard-leader-row {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--dash-border);
    gap: 1rem;
    transition: all 0.25s ease;
    cursor: default;
}

.jp-dashboard-leader-row:hover {
    background: var(--jp-bg-secondary, #f8fafc);
}

[data-bs-theme="dark"] .jp-dashboard-leader-row:hover {
    background: rgba(255,255,255,0.03);
}

.jp-dashboard-leader-row:hover .jp-dashboard-leader-rank-badge {
    transform: scale(1.1);
}

.jp-dashboard-leader-row:hover .jp-dashboard-leader-avatar {
    transform: scale(1.08);
}

.jp-dashboard-leader-row:last-child {
    border-bottom: none;
}

.jp-dashboard-leader-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.jp-dashboard-leader-rank.gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
}

.jp-dashboard-leader-rank.silver {
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    color: #475569;
}

.jp-dashboard-leader-rank.bronze {
    background: linear-gradient(135deg, #fed7aa 0%, #fb923c 100%);
    color: #9a3412;
}

.jp-dashboard-leader-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.jp-dashboard-leader-info {
    flex: 1;
    min-width: 0;
}

.jp-dashboard-leader-name {
    font-weight: 600;
    color: var(--dash-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.jp-dashboard-leader-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.jp-dashboard-leader-level {
    font-size: 0.8rem;
    color: var(--dash-text-muted);
}

.jp-dashboard-leader-points {
    font-weight: 700;
    color: var(--dash-primary);
    white-space: nowrap;
}

/* Leader Rank Badge - HTML uses jp-dashboard-leader-rank-badge */
.jp-dashboard-leader-rank-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    background: var(--jp-bg-tertiary, #f1f5f9);
    color: var(--jp-text-muted);
    transition: all 0.3s ease;
}

.jp-dashboard-leader-rank-badge.gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.jp-dashboard-leader-rank-badge.silver {
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    color: #475569;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.3);
}

.jp-dashboard-leader-rank-badge.bronze {
    background: linear-gradient(135deg, #fed7aa 0%, #fb923c 100%);
    color: #9a3412;
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3);
}

/* Leader Score - HTML uses jp-dashboard-leader-score with score-value/score-label */
.jp-dashboard-leader-score {
    text-align: right;
    flex-shrink: 0;
}

.jp-dashboard-leader-score .score-value {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--jp-primary);
    line-height: 1.2;
}

.jp-dashboard-leader-score .score-label {
    font-size: 0.7rem;
    color: var(--jp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Current user highlight in leaderboard */
.jp-dashboard-leader-row.current-user {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-left: 3px solid var(--jp-primary);
}

/* Leader Avatar with fallback support */
.jp-dashboard-leader-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--jp-bg-tertiary, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.jp-dashboard-leader-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jp-dashboard-leader-avatar .avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: var(--jp-primary);
    font-weight: 700;
    font-size: 1rem;
}

/* Referral Card */
.jp-dashboard-referral {
    background: linear-gradient(135deg, var(--dash-primary) 0%, #8b5cf6 100%);
    border-radius: var(--dash-radius);
    padding: 1.5rem;
    color: #fff;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.jp-dashboard-referral::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
    transition: all 0.5s ease;
}

.jp-dashboard-referral:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.jp-dashboard-referral:hover::before {
    transform: scale(1.5);
}

.jp-dashboard-referral h6 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.jp-dashboard-referral p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.jp-dashboard-referral-input {
    display: flex;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.jp-dashboard-referral-input input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.jp-dashboard-referral-input input:focus {
    outline: none;
    background: rgba(255,255,255,0.3);
}

.jp-dashboard-referral-input input::placeholder {
    color: rgba(255,255,255,0.6);
}

.jp-dashboard-referral-input button {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: var(--dash-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.jp-dashboard-referral-input button:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.jp-dashboard-referral-input button:active {
    transform: scale(1.02);
}

/* Responsive Hero */
@media (max-width: 992px) {
    .jp-dashboard-hero-inner {
        padding: 1.5rem;
    }
    
    .jp-dashboard-welcome-text h1 {
        font-size: 1.5rem;
    }
    
    .jp-dashboard-balance-value {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .jp-dashboard-avatar {
        width: 56px;
        height: 56px;
    }
    
    .jp-dashboard-welcome-text h1 {
        font-size: 1.25rem;
    }
    
    .jp-dashboard-balance-widget {
        width: 100%;
        text-align: center;
        margin-top: 1rem;
    }
    
    /* Mobile tap feedback */
    .jp-dashboard-stat-card:active,
    .jp-dashboard-quick-btn:active,
    .jp-dashboard-tx-item:active,
    .jp-dashboard-goal-item:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
        .jp-dashboard-hero,
        .jp-dashboard-stat-card,
        .jp-dashboard-quick-btn,
        .jp-dashboard-tx-item,
        .jp-dashboard-goal-item,
        .jp-dashboard-referral,
        .jp-dashboard-avatar,
        .jp-dashboard-balance-widget {
            transition: none;
        }
        
        .jp-dashboard-hero::before,
        .jp-dashboard-hero::after,
        .jp-dashboard-hero-sparkle,
        .jp-dashboard-goal-fill::after {
            animation: none;
        }
    }
}

/* Info box hover */
.jp-dashboard-info-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--jp-bg-secondary, #f8fafc);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.jp-dashboard-info-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.jp-dashboard-info-box:hover .jp-dashboard-info-icon {
    transform: scale(1.1);
}

[data-bs-theme="dark"] .jp-dashboard-info-box {
    background: rgba(255,255,255,0.05);
}

.jp-dashboard-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Dark mode improvements */
[data-bs-theme="dark"] .jp-dashboard-hero {
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.2);
}

[data-bs-theme="dark"] .jp-dashboard-stat-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .jp-dashboard-stat-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .jp-dashboard-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .jp-dashboard-referral {
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

[data-bs-theme="dark"] .jp-dashboard-referral:hover {
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.3);
}

/* Card hover improvements */
.jp-dashboard-card {
    background: var(--dash-card-bg);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow);
    border: 1px solid var(--dash-border);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.jp-dashboard-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

/* XP bar shimmer animation */
.jp-dashboard-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dash-warning) 0%, #f59e0b 50%, #fbbf24 100%);
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.jp-dashboard-xp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: xpShimmer 2.5s infinite;
}

@keyframes xpShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================
   NEW DASHBOARD COMPONENTS 2025
   ========================================== */

/* Streak Card Special Styling */
.jp-streak-card.streak-fire {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05)) !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

.jp-streak-card .streak-flame {
    font-size: 1.2rem;
    animation: flameWiggle 0.5s ease-in-out infinite;
}

@keyframes flameWiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* Active Events Banner */
.jp-active-events-banner {
    margin-top: 1rem;
}

.jp-event-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--event-color) 15%, transparent),
        color-mix(in srgb, var(--event-color) 5%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--event-color) 30%, transparent);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.jp-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--event-color) 20%, transparent);
    color: inherit;
    text-decoration: none;
}

.jp-event-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--event-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.jp-event-content {
    flex: 1;
}

.jp-event-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--jp-text);
}

.jp-event-desc {
    font-size: 0.85rem;
    color: var(--jp-text-secondary);
    margin-top: 0.125rem;
}

.jp-event-arrow {
    color: var(--event-color);
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.jp-event-card:hover .jp-event-arrow {
    transform: translateX(4px);
}

.jp-event-pulse {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: var(--event-color);
    border-radius: 50%;
    animation: eventPulse 2s infinite;
}

@keyframes eventPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Daily Bonus Reminder */
.jp-daily-bonus-reminder {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    animation: bonusGlow 3s ease-in-out infinite;
}

@keyframes bonusGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 20px 0 rgba(34, 197, 94, 0.15); }
}

.jp-daily-bonus-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.jp-daily-bonus-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    position: relative;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.jp-daily-bonus-icon .jp-bonus-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgePulse 1s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.jp-daily-bonus-text {
    flex: 1;
}

.jp-daily-bonus-text strong {
    display: block;
    font-size: 1rem;
    color: var(--jp-text);
}

.jp-daily-bonus-text span {
    font-size: 0.85rem;
    color: var(--jp-text-secondary);
}

.jp-daily-bonus-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.jp-daily-bonus-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
    color: white;
}

/* VIP Benefits Banner */
.jp-vip-benefits-banner {
    position: relative;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--vip-color) 15%, var(--jp-bg)),
        color-mix(in srgb, var(--vip-color) 5%, var(--jp-bg))
    );
    border: 1px solid color-mix(in srgb, var(--vip-color) 40%, transparent);
    border-radius: 16px;
    padding: 1.25rem;
    overflow: hidden;
}

.jp-vip-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffd700' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.jp-vip-banner-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.jp-vip-banner-icon {
    width: 56px;
    height: 56px;
    background: var(--vip-color);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--vip-color) 40%, transparent);
}

.jp-vip-banner-info {
    flex: 1;
}

.jp-vip-banner-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--vip-color);
    text-shadow: 0 0 30px color-mix(in srgb, var(--vip-color) 30%, transparent);
}

.jp-vip-banner-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.375rem;
}

.jp-vip-banner-perks span {
    font-size: 0.8rem;
    color: var(--jp-text-secondary);
    display: flex;
    align-items: center;
}

.jp-vip-banner-perks span i {
    color: var(--vip-color);
    margin-right: 0.25rem;
}

.jp-vip-banner-expiry {
    text-align: right;
}

.jp-vip-banner-expiry small {
    color: var(--jp-text-secondary);
    font-size: 0.75rem;
}

/* Dark Mode Support for New Components */
[data-theme="dark"] .jp-event-card {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--event-color) 20%, #1a1a2e),
        color-mix(in srgb, var(--event-color) 10%, #1a1a2e)
    );
}

[data-theme="dark"] .jp-daily-bonus-reminder {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.08));
}

[data-theme="dark"] .jp-vip-benefits-banner {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--vip-color) 20%, #1a1a2e),
        color-mix(in srgb, var(--vip-color) 10%, #1a1a2e)
    );
}

/* Responsive */
@media (max-width: 768px) {
    .jp-daily-bonus-content {
        text-align: center;
        justify-content: center;
    }
    
    .jp-daily-bonus-text {
        flex: none;
        width: 100%;
        text-align: center;
    }
    
    .jp-vip-banner-content {
        flex-direction: column;
        text-align: center;
    }
    
    .jp-vip-banner-perks {
        justify-content: center;
    }
    
    .jp-vip-banner-expiry {
        text-align: center;
        width: 100%;
    }
}

/* ============================================
   Dashboard addons (quick strip, chart)
   ============================================ */
.jp-dashboard-quick-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 16px 0 8px;
}

.quick-pill {
    background: var(--jp-bg-card);
    border: 1px solid var(--jp-border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--jp-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pill-title {
    font-weight: 700;
    color: var(--jp-text);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
}

.pill-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--jp-primary);
}

.pill-muted {
    color: var(--jp-text-muted);
    font-size: 0.9rem;
}

.pill-link {
    font-weight: 700;
    color: var(--jp-success);
    text-decoration: none;
}

.pill-link:hover {
    text-decoration: underline;
}

.jp-dashboard-chart-card .chart-wrap {
    position: relative;
    min-height: 180px;
}

.jp-dashboard-chart-card canvas {
    width: 100%;
}

.chart-empty {
    opacity: 0.6;
}

.jp-dashboard-chip {
    background: var(--jp-bg-card);
    border: 1px solid var(--jp-border);
    border-radius: 999px;
    padding: 4px 10px;
}

.jp-dashboard-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

@media (max-width: 768px) {
    .jp-dashboard-quick-strip {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   QUICK FOCUS STRIP - REDESIGNED 2025
   ============================================ */
.jp-dashboard-quick-strip-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.jp-quick-card {
    background: var(--jp-bg-card, #ffffff);
    border: 1px solid var(--jp-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.jp-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--jp-primary, #6366f1);
}

[data-bs-theme="dark"] .jp-quick-card {
    background: var(--jp-bg-card, #1e293b);
    border-color: var(--jp-border, #334155);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .jp-quick-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Icon Container */
.jp-quick-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.jp-quick-card:hover .jp-quick-card-icon {
    transform: scale(1.1);
}

/* Bonus Card */
.jp-quick-card--bonus .jp-quick-card-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10b981;
}

/* Expiration Card */
.jp-quick-card--expiration .jp-quick-card-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #8b5cf6;
}

.jp-quick-card-urgent {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.75rem;
    color: #ef4444;
    background: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

[data-bs-theme="dark"] .jp-quick-card-urgent {
    background: #1e293b;
}

/* Tasks Card */
.jp-quick-card--tasks .jp-quick-card-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
    color: #3b82f6;
}

/* Content */
.jp-quick-card-content {
    flex: 1;
    min-width: 0;
}

.jp-quick-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--jp-text-muted, #64748b);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.jp-quick-card-title i {
    font-size: 0.8rem;
}

/* Value (for expiration card) */
.jp-quick-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--jp-text, #1e293b);
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.jp-quick-card--expiration .jp-quick-card-value {
    color: #8b5cf6;
}

[data-bs-theme="dark"] .jp-quick-card-value {
    color: var(--jp-text, #f1f5f9);
}

/* Subtitle */
.jp-quick-card-subtitle {
    font-size: 0.75rem;
    color: var(--jp-text-muted, #94a3b8);
    font-weight: 500;
}

/* Action Button */
.jp-quick-card-action {
    margin-bottom: 0.5rem;
}

.jp-quick-card-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.jp-quick-card-btn--primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.jp-quick-card-btn--primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
    color: #ffffff;
}

/* Status (for claimed bonus) */
.jp-quick-card-status {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

/* Footer (for tasks reset time) */
.jp-quick-card-footer {
    font-size: 0.75rem;
    color: var(--jp-text-muted, #94a3b8);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
}

.jp-quick-card-footer i {
    font-size: 0.7rem;
}

/* Responsive */
@media (max-width: 768px) {
    .jp-dashboard-quick-strip-modern {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .jp-quick-card {
        padding: 1.25rem;
    }
    
    .jp-quick-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .jp-quick-card-value {
        font-size: 1.5rem;
    }
}

/* ============================================
   STATS GRID - REDESIGNED 2025
   ============================================ */
.jp-dashboard-stats-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.jp-stat-card-modern {
    background: var(--jp-bg-card, #ffffff);
    border: 1px solid var(--jp-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
}

.jp-stat-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--jp-primary, #6366f1);
    text-decoration: none;
    color: inherit;
}

[data-bs-theme="dark"] .jp-stat-card-modern {
    background: var(--jp-bg-card, #1e293b);
    border-color: var(--jp-border, #334155);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .jp-stat-card-modern:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Icon */
.jp-stat-card-icon-modern {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    font-size: 1.75rem;
    transition: all 0.3s ease;
}

.jp-stat-card-modern:hover .jp-stat-card-icon-modern {
    transform: scale(1.1) rotate(5deg);
}

/* Earnings Card - Green */
.jp-stat-card-modern--earnings .jp-stat-card-icon-modern {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10b981;
}

/* Tasks Card - Purple */
.jp-stat-card-modern--tasks .jp-stat-card-icon-modern {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #8b5cf6;
}

/* Streak Card - Orange */
.jp-stat-card-modern--streak .jp-stat-card-icon-modern {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.08) 100%);
    color: #f97316;
}

.jp-stat-card-modern--streak.streak-fire .jp-stat-card-icon-modern {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(249, 115, 22, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3); }
    50% { box-shadow: 0 6px 24px rgba(249, 115, 22, 0.5); }
}

/* Rank Card - Purple */
.jp-stat-card-modern--rank .jp-stat-card-icon-modern {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #8b5cf6;
}

/* Content */
.jp-stat-card-content-modern {
    flex: 1;
    min-width: 0;
}

.jp-stat-card-value-modern {
    font-size: 2rem;
    font-weight: 700;
    color: var(--jp-text, #1e293b);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

[data-bs-theme="dark"] .jp-stat-card-value-modern {
    color: var(--jp-text, #f1f5f9);
}

.jp-stat-card-label-modern {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--jp-text-muted, #64748b);
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.jp-stat-card-label-modern i {
    font-size: 0.8rem;
}

/* Trend Badge */
.jp-stat-card-trend-modern {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    margin-top: 0.25rem;
}

.jp-stat-card-trend-modern--record {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

/* Decoration (background icon) */
.jp-stat-card-decoration-modern {
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 8rem;
    opacity: 0.03;
    color: var(--jp-text, #1e293b);
    pointer-events: none;
    transition: all 0.3s ease;
}

.jp-stat-card-modern:hover .jp-stat-card-decoration-modern {
    opacity: 0.06;
    transform: scale(1.1);
}

[data-bs-theme="dark"] .jp-stat-card-decoration-modern {
    color: var(--jp-text, #f1f5f9);
    opacity: 0.05;
}

/* Streak Flame */
.streak-flame {
    font-size: 1.25rem;
    margin-left: 0.25rem;
    animation: flame-flicker 1.5s ease-in-out infinite;
}

@keyframes flame-flicker {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-2deg); }
    50% { transform: scale(0.95) rotate(2deg); }
    75% { transform: scale(1.05) rotate(-1deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .jp-dashboard-stats-grid-modern {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .jp-stat-card-modern {
        padding: 1.5rem;
    }
    
    .jp-stat-card-icon-modern {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    
    .jp-stat-card-value-modern {
        font-size: 1.75rem;
    }
}

/* ============================================
   PAYOUT PROGRESS CARD - REDESIGNED 2025
   ============================================ */
.jp-payout-progress-card {
    background: var(--jp-bg-card, #ffffff);
    border: 1px solid var(--jp-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.jp-payout-progress-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--jp-primary, #6366f1);
}

[data-bs-theme="dark"] .jp-payout-progress-card {
    background: var(--jp-bg-card, #1e293b);
    border-color: var(--jp-border, #334155);
}

.jp-payout-progress-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.jp-payout-progress-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.jp-payout-progress-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--jp-text, #1e293b);
}

[data-bs-theme="dark"] .jp-payout-progress-title {
    color: var(--jp-text, #f1f5f9);
}

.jp-payout-progress-status {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--jp-text-muted, #64748b);
    white-space: nowrap;
}

.jp-payout-progress-status--available {
    color: #10b981;
}

.jp-payout-progress-bar-wrapper {
    margin-bottom: 0.75rem;
}

.jp-payout-progress-bar {
    height: 10px;
    background: var(--jp-border-light, #f1f5f9);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

[data-bs-theme="dark"] .jp-payout-progress-bar {
    background: var(--jp-border-light, #334155);
}

.jp-payout-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 8px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.jp-payout-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.jp-payout-progress-fill--complete {
    background: linear-gradient(90deg, #10b981 0%, #16a34a 100%);
}

.jp-payout-progress-footer {
    font-size: 0.75rem;
    color: var(--jp-text-muted, #64748b);
    display: flex;
    align-items: center;
}

/* ============================================
   ACCOUNT INFO GRID - REDESIGNED 2025
   ============================================ */
.jp-account-info-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.jp-account-info-card-modern {
    background: var(--jp-bg-card, #ffffff);
    border: 1px solid var(--jp-border, #e2e8f0);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.jp-account-info-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--jp-primary, #6366f1);
}

[data-bs-theme="dark"] .jp-account-info-card-modern {
    background: var(--jp-bg-card, #1e293b);
    border-color: var(--jp-border, #334155);
}

.jp-account-info-icon-modern {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.jp-account-info-card-modern:hover .jp-account-info-icon-modern {
    transform: scale(1.1) rotate(5deg);
}

.jp-account-info-icon-modern--calendar {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
    color: #6366f1;
}

.jp-account-info-icon-modern--status {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.15) 0%, rgba(100, 116, 139, 0.08) 100%);
    color: #64748b;
}

.jp-account-info-icon-modern--vip {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.08) 100%);
    color: #fbbf24;
}

.jp-account-info-icon-modern--level {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10b981;
}

.jp-account-info-icon-modern--referrals {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
    color: #3b82f6;
}

.jp-account-info-content-modern {
    flex: 1;
    min-width: 0;
}

.jp-account-info-value-modern {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jp-text, #1e293b);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .jp-account-info-value-modern {
    color: var(--jp-text, #f1f5f9);
}

.jp-account-info-label-modern {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--jp-text-muted, #64748b);
    display: flex;
    align-items: center;
}

/* ============================================
   PAYOUT BUTTON - REDESIGNED 2025
   ============================================ */
.jp-payout-btn-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 100%;
    justify-content: space-between;
}

.jp-payout-btn-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.jp-payout-btn-modern:hover::before {
    left: 100%;
}

.jp-payout-btn-modern--success {
    background: linear-gradient(135deg, #10b981 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.jp-payout-btn-modern--success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    color: white;
    text-decoration: none;
}

.jp-payout-btn-modern--primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.jp-payout-btn-modern--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
    color: white;
    text-decoration: none;
}

.jp-payout-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.jp-payout-btn-modern span {
    flex: 1;
    text-align: left;
}

.jp-payout-btn-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.jp-payout-btn-modern:hover .jp-payout-btn-arrow {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 576px) {
    .jp-account-info-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .jp-payout-btn-modern {
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .jp-payout-btn-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* ============================================
   CHAT WALL - REDESIGNED 2025
   ============================================ */
.chat-wall-modern {
    background: var(--jp-bg-card, #ffffff);
    border: 1px solid var(--jp-border, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .chat-wall-modern {
    background: var(--jp-bg-card, #1e293b);
    border-color: var(--jp-border, #334155);
}

/* Header */
.cw-header-modern {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    padding: 1rem 1.25rem;
    border-bottom: none;
}

.cw-icon-modern {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 0.75rem;
}

.cw-online-modern {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cw-online-modern .cw-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.cw-btn-modern {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cw-btn-modern:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.cw-btn-modern.cw-btn-admin:hover {
    background: rgba(251, 191, 36, 0.3);
}

/* Input Area */
.cw-input-area-modern {
    padding: 1rem 1.25rem;
    background: var(--jp-bg-card, #ffffff);
    border-top: 1px solid var(--jp-border, #e2e8f0);
}

[data-bs-theme="dark"] .cw-input-area-modern {
    background: var(--jp-bg-card, #1e293b);
    border-top-color: var(--jp-border, #334155);
}

.cw-form-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--jp-border-light, #f1f5f9);
    border-radius: 12px;
    padding: 0.5rem;
    border: 1px solid var(--jp-border, #e2e8f0);
    transition: all 0.3s ease;
}

.cw-form-modern:focus-within {
    border-color: var(--jp-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

[data-bs-theme="dark"] .cw-form-modern {
    background: var(--jp-border-light, #334155);
    border-color: var(--jp-border, #475569);
}

.cw-emoji-btn-modern {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--jp-text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.cw-emoji-btn-modern:hover {
    background: var(--jp-border, #e2e8f0);
    color: var(--jp-primary, #6366f1);
}

[data-bs-theme="dark"] .cw-emoji-btn-modern:hover {
    background: var(--jp-border, #475569);
}

.cw-input-modern {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--jp-text, #1e293b);
    outline: none;
}

[data-bs-theme="dark"] .cw-input-modern {
    color: var(--jp-text, #f1f5f9);
}

.cw-input-modern::placeholder {
    color: var(--jp-text-muted, #94a3b8);
}

.cw-char-modern {
    font-size: 0.75rem;
    color: var(--jp-text-muted, #64748b);
    padding: 0 0.5rem;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.cw-char-modern.warning {
    color: #f59e0b;
}

.cw-char-modern.danger {
    color: #ef4444;
}

.cw-send-btn-modern {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.cw-send-btn-modern:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.cw-send-btn-modern:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.cw-login-modern {
    padding: 1rem;
    text-align: center;
    color: var(--jp-text-muted, #64748b);
    font-size: 0.875rem;
}

.cw-login-modern a {
    color: var(--jp-primary, #6366f1);
    text-decoration: none;
    font-weight: 600;
}

.cw-login-modern a:hover {
    text-decoration: underline;
}

/* Empty State */
.cw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--jp-text-muted, #64748b);
}

.cw-empty i {
    font-size: 4rem;
    color: var(--jp-border, #e2e8f0);
    margin-bottom: 1rem;
}

.cw-empty p {
    font-size: 0.9375rem;
    margin: 0;
}

/* ============================================
   ACTIVE EVENTS BANNER - REDESIGNED 2025
   ============================================ */
.jp-active-events-banner-modern {
    margin-bottom: 2rem;
}

.jp-active-events-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.jp-event-card-modern {
    background: var(--jp-bg-card, #ffffff);
    border: 1px solid var(--jp-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.jp-event-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--event-color, #6366f1);
    text-decoration: none;
    color: inherit;
}

[data-bs-theme="dark"] .jp-event-card-modern {
    background: var(--jp-bg-card, #1e293b);
    border-color: var(--jp-border, #334155);
}

.jp-event-icon-modern {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--event-color, #6366f1)20, var(--event-color, #6366f1)10);
    color: var(--event-color, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.jp-event-card-modern:hover .jp-event-icon-modern {
    transform: scale(1.1) rotate(5deg);
}

.jp-event-content-modern {
    flex: 1;
    min-width: 0;
}

.jp-event-title-modern {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--jp-text, #1e293b);
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .jp-event-title-modern {
    color: var(--jp-text, #f1f5f9);
}

.jp-event-desc-modern {
    font-size: 0.875rem;
    color: var(--jp-text-muted, #64748b);
}

.jp-event-arrow-modern {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--jp-border-light, #f1f5f9);
    color: var(--jp-text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.jp-event-card-modern:hover .jp-event-arrow-modern {
    background: var(--event-color, #6366f1);
    color: white;
    transform: translateX(4px);
}

.jp-event-pulse-modern {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: var(--event-color, #6366f1);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    pointer-events: none;
    animation: event-pulse 2s ease-in-out infinite;
}

@keyframes event-pulse {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 0.1; transform: translate(-50%, -50%) scale(1.1); }
}

/* ============================================
   DAILY BONUS REMINDER - REDESIGNED 2025
   ============================================ */
.jp-daily-bonus-reminder-modern {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
    position: relative;
    overflow: hidden;
}

.jp-daily-bonus-reminder-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: bonus-shimmer 3s ease-in-out infinite;
}

@keyframes bonus-shimmer {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.jp-daily-bonus-content-modern {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.jp-daily-bonus-icon-modern {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    position: relative;
    flex-shrink: 0;
}

.jp-bonus-badge-modern {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    animation: bonus-badge-pulse 1.5s ease-in-out infinite;
}

@keyframes bonus-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.jp-daily-bonus-text-modern {
    flex: 1;
    color: white;
}

.jp-daily-bonus-text-modern strong {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.jp-daily-bonus-text-modern span {
    display: block;
    font-size: 0.875rem;
    opacity: 0.95;
}

.jp-daily-bonus-btn-modern {
    padding: 0.75rem 1.5rem;
    background: white;
    color: #f59e0b;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.jp-daily-bonus-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    color: #f59e0b;
    text-decoration: none;
}

/* ============================================
   VIP BANNER - REDESIGNED 2025
   ============================================ */
.jp-vip-benefits-banner-modern {
    background: linear-gradient(135deg, var(--vip-color, #fbbf24) 0%, #f59e0b 100%);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);
    position: relative;
    overflow: hidden;
}

.jp-vip-banner-bg-modern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.jp-vip-banner-content-modern {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.jp-vip-banner-icon-modern {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.jp-vip-banner-info-modern {
    flex: 1;
    color: white;
}

.jp-vip-banner-title-modern {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.jp-vip-banner-perks-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    opacity: 0.95;
}

.jp-vip-banner-perks-modern span {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
}

.jp-vip-banner-expiry-modern {
    color: white;
    opacity: 0.9;
    font-size: 0.875rem;
    text-align: right;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .jp-active-events-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .jp-daily-bonus-content-modern {
        flex-direction: column;
        text-align: center;
    }
    
    .jp-vip-banner-content-modern {
        flex-direction: column;
        text-align: center;
    }
    
    .jp-vip-banner-expiry-modern {
        text-align: center;
    }
}

/* ============================================
   BOOST INDICATOR - DASHBOARD HERO
   ============================================ */
.jp-boost-indicator {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.95) 0%, rgba(255, 165, 0, 0.95) 100%);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4), 0 0 40px rgba(255, 165, 0, 0.3);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.jp-boost-indicator::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    animation: boostGlow 3s ease-in-out infinite;
}

@keyframes boostGlow {
    0%, 100% { transform: translate(0, 0); opacity: 0.5; }
    50% { transform: translate(10%, 10%); opacity: 0.8; }
}

.boost-indicator-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.boost-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
    animation: boostIconPulse 2s ease-in-out infinite;
}

@keyframes boostIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.boost-info {
    flex: 1;
    color: #fff;
}

.boost-title {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.boost-multiplier {
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 800;
}

.boost-timer {
    font-size: 0.875rem;
    opacity: 0.95;
    display: flex;
    align-items: center;
}

.boost-count {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 2px;
}

.boost-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    margin-top: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.boost-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ============================================
   FLOATING BOOST BADGE
   ============================================ */
.jp-boost-floating {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    pointer-events: none;
}

.boost-floating-inner {
    background: linear-gradient(135deg, #FF6B35 0%, #FFA500 100%);
    border-radius: 50px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.5), 0 0 60px rgba(255, 165, 0, 0.4);
    border: 2px solid rgba(255, 215, 0, 0.4);
    position: relative;
    animation: floatBounce 3s ease-in-out infinite;
}

@keyframes floatBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.boost-icon-animated {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    animation: boostIconSpin 4s linear infinite;
}

@keyframes boostIconSpin {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(10deg) scale(1.1); }
    50% { transform: rotate(0deg) scale(1); }
    75% { transform: rotate(-10deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

.boost-text {
    color: #fff;
    line-height: 1.2;
}

.boost-text .boost-multiplier {
    font-size: 1.1rem;
    font-weight: 900;
    display: block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.boost-text .boost-time {
    font-size: 0.75rem;
    opacity: 0.95;
    font-weight: 600;
}

.boost-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: 2px solid rgba(255, 215, 0, 0.6);
    animation: boostPulse 2s ease-out infinite;
}

@keyframes boostPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* Mobile optimalizáció */
@media (max-width: 767.98px) {
    .jp-boost-indicator {
        padding: 0.875rem 1rem;
    }
    
    .boost-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .boost-title {
        font-size: 0.9rem;
    }
    
    .jp-boost-floating {
        bottom: 70px;
        right: 15px;
    }
    
    .boost-floating-inner {
        padding: 10px 16px;
        gap: 10px;
    }
    
    .boost-icon-animated {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .boost-text .boost-multiplier {
        font-size: 1rem;
    }
    
    .boost-text .boost-time {
        font-size: 0.7rem;
    }
}

/* Dark mode támogatás */
[data-bs-theme="dark"] .jp-boost-indicator {
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3), 0 0 40px rgba(255, 165, 0, 0.2);
}

[data-bs-theme="dark"] .jp-boost-floating .boost-floating-inner {
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.4), 0 0 60px rgba(255, 165, 0, 0.3);
}

/* ============================================
   INTERACTIVE STAT CARDS - 2025 Modernization
   ============================================ */

/* Make stat cards clickable */
.jp-stat-card-interactive {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    cursor: pointer;
}

.jp-stat-card-interactive:hover {
    color: inherit;
}

/* Main content wrapper */
.jp-dashboard-stat-main {
    position: relative;
    z-index: 2;
}

/* Hover Details Panel */
.jp-stat-hover-details {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--dash-card-bg) 0%, var(--jp-bg-secondary, #f8fafc) 100%);
    border-radius: var(--dash-radius);
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}

.jp-stat-card-interactive:hover .jp-stat-hover-details,
.jp-stat-card-interactive:focus .jp-stat-hover-details {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.jp-stat-card-interactive:hover .jp-dashboard-stat-main {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.25s ease;
}

/* Hover Title */
.jp-stat-hover-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dash-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

/* Breakdown List */
.jp-stat-hover-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.jp-stat-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--dash-border);
}

.jp-stat-breakdown-item:last-child {
    border-bottom: none;
}

.jp-stat-breakdown-item .label {
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.jp-stat-breakdown-item .label i {
    font-size: 0.7rem;
    width: 14px;
    text-align: center;
}

.jp-stat-breakdown-item .value {
    font-weight: 700;
    color: var(--dash-text);
}

/* Sparkline Container */
.jp-stat-sparkline {
    margin-top: auto;
    height: 30px;
    position: relative;
}

.sparkline-canvas {
    width: 100%;
    height: 100%;
}

/* Comparison Text */
.jp-stat-compare {
    font-size: 0.7rem;
    text-align: center;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    background: var(--jp-bg-secondary, #f1f5f9);
}

.jp-stat-compare .positive {
    color: var(--dash-success);
}

.jp-stat-compare .negative {
    color: var(--dash-danger);
}

/* Streak Rewards in Hover */
.jp-stat-streak-rewards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
}

.jp-streak-milestone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    background: var(--jp-bg-secondary, #f1f5f9);
    border-radius: 6px;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.jp-streak-milestone.achieved {
    opacity: 1;
    background: linear-gradient(135deg, var(--dash-success-light) 0%, rgba(16, 185, 129, 0.2) 100%);
    border: 1px solid var(--dash-success);
}

.jp-streak-milestone .days {
    font-weight: 600;
    color: var(--dash-text);
}

.jp-streak-milestone .bonus {
    font-weight: 700;
    color: var(--dash-success);
}

.jp-streak-milestone i {
    color: var(--dash-success);
    font-size: 0.65rem;
}

.jp-stat-next-milestone {
    text-align: center;
    font-size: 0.75rem;
    color: var(--dash-text-muted);
    margin-top: 0.25rem;
}

/* Rank Context in Hover */
.jp-stat-rank-context {
    margin-bottom: 0.5rem;
}

.jp-rank-ahead {
    padding: 0.5rem;
    background: var(--jp-bg-secondary, #f1f5f9);
    border-radius: 8px;
}

.jp-rank-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}

.jp-rank-user .name {
    font-weight: 600;
    color: var(--dash-text);
    font-size: 0.85rem;
}

.jp-rank-user .diff {
    font-weight: 700;
    font-size: 0.8rem;
}

/* Motivation Text */
.jp-stat-motivation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    padding: 0.5rem;
    background: linear-gradient(135deg, var(--dash-warning-light) 0%, rgba(245, 158, 11, 0.15) 100%);
    border-radius: 8px;
    color: var(--dash-text);
    font-weight: 500;
    margin-top: auto;
}

.jp-stat-motivation.gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.3) 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
}

.jp-stat-motivation i {
    font-size: 0.9rem;
}

/* Dark Mode adjustments for hover details */
[data-bs-theme="dark"] .jp-stat-hover-details {
    background: linear-gradient(135deg, var(--dash-card-bg) 0%, #0f172a 100%);
}

[data-bs-theme="dark"] .jp-streak-milestone,
[data-bs-theme="dark"] .jp-rank-ahead,
[data-bs-theme="dark"] .jp-stat-compare {
    background: rgba(30, 41, 59, 0.8);
}

/* Mobile: Show details on tap */
@media (max-width: 768px) {
    .jp-stat-hover-details {
        padding: 0.75rem;
    }
    
    .jp-stat-hover-title {
        font-size: 0.7rem;
    }
    
    .jp-stat-breakdown-item {
        font-size: 0.75rem;
    }
    
    .jp-streak-milestone {
        font-size: 0.65rem;
        padding: 0.25rem 0.4rem;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .jp-stat-hover-details {
        transition: opacity 0.15s ease;
        transform: none;
    }
    
    .jp-stat-card-interactive:hover .jp-dashboard-stat-main {
        transform: none;
    }
}

/* ============================================
   TRANSACTIONS INFINITE SCROLL & FILTERING
   ============================================ */

/* Header Actions */
.jp-tx-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.jp-tx-filter-toggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--dash-border);
    background: var(--dash-card-bg);
    color: var(--dash-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.jp-tx-filter-toggle:hover,
.jp-tx-filter-toggle.active {
    background: var(--dash-primary);
    color: #fff;
    border-color: var(--dash-primary);
}

/* Filters Panel */
.jp-tx-filters {
    padding: 0.75rem 1.25rem;
    background: var(--jp-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--dash-border);
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    animation: slideDown 0.25s ease;
}

.jp-tx-filters.show {
    display: flex;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Filter Chips */
.jp-tx-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jp-tx-chip {
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    border: 1px solid var(--dash-border);
    background: var(--dash-card-bg);
    color: var(--dash-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.jp-tx-chip:hover {
    border-color: var(--dash-primary);
    color: var(--dash-primary);
}

.jp-tx-chip.active {
    background: var(--dash-primary);
    border-color: var(--dash-primary);
    color: #fff;
}

.jp-tx-chip i {
    font-size: 0.7rem;
}

/* Search Input */
.jp-tx-search {
    position: relative;
    max-width: 280px;
}

.jp-tx-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-muted);
    font-size: 0.85rem;
}

.jp-tx-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    background: var(--dash-card-bg);
    color: var(--dash-text);
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.jp-tx-search-input:focus {
    outline: none;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Scroll Container */
.jp-tx-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dash-border) transparent;
    scrollbar-gutter: stable;
}

.jp-tx-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.jp-tx-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.jp-tx-scroll-container::-webkit-scrollbar-thumb {
    background: var(--dash-border);
    border-radius: 3px;
}

.jp-tx-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--dash-text-muted);
}

/* Transaction Item - clickable for modal */
.jp-dashboard-tx-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.jp-dashboard-tx-item:hover {
    background: var(--jp-bg-secondary, #f8fafc);
    transform: translateX(4px);
}

.jp-dashboard-tx-item.hidden {
    display: none;
}

/* Load More Section */
.jp-tx-load-more {
    padding: 1rem;
    text-align: center;
}

.jp-tx-load-btn {
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    border: 1px solid var(--dash-border);
    background: var(--dash-card-bg);
    color: var(--dash-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.jp-tx-load-btn:hover {
    background: var(--dash-primary);
    border-color: var(--dash-primary);
    color: #fff;
}

.jp-tx-load-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading Spinner */
.jp-tx-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--dash-text-muted);
    font-size: 0.85rem;
}

.jp-tx-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--dash-border);
    border-top-color: var(--dash-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Empty Filter State */
.jp-tx-empty-filter {
    padding: 2rem;
    text-align: center;
    color: var(--dash-text-muted);
}

.jp-tx-empty-filter i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.jp-tx-empty-filter p {
    margin: 0;
    font-size: 0.9rem;
}

/* Dark Mode for TX Filters */
[data-bs-theme="dark"] .jp-tx-filters {
    background: rgba(30, 41, 59, 0.5);
}

[data-bs-theme="dark"] .jp-tx-chip {
    background: var(--dash-card-bg);
}

[data-bs-theme="dark"] .jp-dashboard-tx-item:hover {
    background: rgba(30, 41, 59, 0.8);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .jp-tx-filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        margin: 0 -0.5rem;
        padding-left: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .jp-tx-chip {
        flex-shrink: 0;
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }
    
    .jp-tx-search {
        max-width: 100%;
    }
    
    .jp-tx-scroll-container {
        max-height: 350px;
    }
}

/* ============================================
   DAILY GOALS GAMIFICATION
   ============================================ */

/* Goals Header: match Transactions header look */
.jp-goals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: transparent;
    border-bottom: 1px solid var(--dash-border);
}

/* Header inner layout: left title, right meta (ring + reset) */
.jp-goals-header .jp-dashboard-card-title {
    flex: 1;
    min-width: 0;
}

/* Reuse the same right-side alignment as Transactions */
.jp-goals-header-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.jp-goals-reset-chip {
    white-space: nowrap;
}

/* Main Progress Ring */
.jp-goals-ring-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.jp-goals-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.jp-goals-ring-bg {
    fill: none;
    stroke: var(--dash-border);
    stroke-width: 3;
}

.jp-goals-ring-progress {
    fill: none;
    stroke: var(--dash-success);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease;
}

.jp-goals-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
}

.jp-goals-ring-completed {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--dash-success);
}

.jp-goals-ring-total {
    font-size: 0.65rem;
    color: var(--dash-text-muted);
}

/* Gamified Goal Item */
.jp-goal-gamified {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: var(--jp-bg-secondary, #f8fafc);
    margin-bottom: 0.6rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

/* Match Transactions: stable content alignment + single-line title */
.jp-goal-gamified .jp-dashboard-goal-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.jp-goal-gamified .jp-dashboard-goal-title {
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CSS cleanup: legacy reward box styles should not apply to gamified goals */
.jp-goal-gamified .jp-dashboard-goal-reward {
    background: transparent;
    padding: 0;
    min-width: 0;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.jp-goal-gamified .jp-dashboard-goal-reward i {
    margin-right: 0;
}

/* Avoid double spacing: container already uses gap */
.jp-dashboard-goals-list .jp-goal-gamified {
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .jp-goals-header {
        flex-wrap: wrap;
    }

    .jp-goals-header-meta {
        width: 100%;
        justify-content: flex-end;
    }
}

.jp-goal-gamified:hover {
    background: var(--dash-card-bg);
    border-color: var(--dash-border);
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.jp-goal-gamified.completed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

.jp-goal-gamified.locked {
    opacity: 0.6;
    filter: grayscale(0.5);
}

/* Goal SVG Ring Icon */
.jp-goal-ring-icon {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.jp-goal-svg-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.jp-goal-svg-ring .jp-goal-ring-bg {
    stroke: var(--dash-border);
}

.jp-goal-svg-ring .jp-goal-ring-progress {
    transition: stroke-dashoffset 0.8s ease;
    stroke-linecap: round;
}

.jp-goal-icon-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: var(--dash-card-bg);
    transition: all 0.3s ease;
}

.jp-goal-icon-inner.done {
    background: var(--dash-success);
    color: #fff;
}

/* Goal Rewards */
.jp-dashboard-goal-reward {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    margin-left: auto;
}

.jp-goal-xp, .jp-goal-points {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.jp-goal-xp {
    background: var(--dash-warning-light);
    color: var(--dash-warning);
}

.jp-goal-points {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.jp-goal-xp i, .jp-goal-points i {
    font-size: 0.65rem;
}

/* Completion Badge */
.jp-goal-complete-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    background: var(--dash-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.6rem;
    animation: badgePop 0.5s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

@keyframes badgePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Celebration Section */
.jp-dashboard-goals-celebration {
    margin-top: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    position: relative;
    overflow: hidden;
}

.jp-goals-celebration-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.jp-goals-trophy-wrapper {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: trophyBounce 2s ease-in-out infinite;
}

@keyframes trophyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.jp-goals-trophy-wrapper i {
    font-size: 1.5rem;
    color: #fff;
}

.jp-trophy-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.jp-trophy-sparkles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fbbf24;
    border-radius: 50%;
    animation: sparkleFloat 1.5s ease-in-out infinite;
}

.jp-trophy-sparkles span:nth-child(1) { top: -5px; left: 50%; animation-delay: 0s; }
.jp-trophy-sparkles span:nth-child(2) { top: 50%; right: -5px; animation-delay: 0.5s; }
.jp-trophy-sparkles span:nth-child(3) { bottom: -5px; left: 30%; animation-delay: 1s; }

@keyframes sparkleFloat {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

.jp-goals-celebration-text {
    flex: 1;
}

.jp-goals-celebration-text strong {
    display: block;
    font-size: 1rem;
    color: var(--dash-text);
    margin-bottom: 0.25rem;
}

.jp-goals-celebration-text p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--dash-text-muted);
}

.jp-goals-share-btn {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.jp-goals-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

/* Confetti Container */
.jp-goals-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.jp-confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(150px) rotate(720deg);
        opacity: 0;
    }
}

/* Dark Mode */
[data-bs-theme="dark"] .jp-goal-gamified {
    background: rgba(30, 41, 59, 0.5);
}

[data-bs-theme="dark"] .jp-goal-gamified:hover {
    background: var(--dash-card-bg);
}

[data-bs-theme="dark"] .jp-goal-icon-inner {
    background: rgba(30, 41, 59, 0.8);
}

[data-bs-theme="dark"] .jp-dashboard-goals-celebration {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
}

/* Mobile */
@media (max-width: 576px) {
    .jp-goals-ring-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .jp-goal-ring-icon {
        width: 38px;
        height: 38px;
    }
    
    .jp-goal-icon-inner {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .jp-goals-celebration-content {
        flex-wrap: wrap;
    }
    
    .jp-goals-share-btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ============================================
   XP & LEVEL SYSTEM - PREMIUM 3D VISUALIZATION
   ============================================ */

.jp-xp-card {
    overflow: hidden;
}

.jp-xp-premium-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--jp-bg-secondary, #f8fafc) 0%, var(--dash-card-bg) 100%);
}

/* 3D Level Badge */
.jp-xp-badge-3d {
    perspective: 200px;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    position: relative;
}

.jp-xp-badge-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    50% { transform: translateY(-4px) rotateY(10deg); }
}

.jp-xp-badge-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--level-color) 0%, var(--level-light) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 
        0 8px 30px rgba(99, 102, 241, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.jp-xp-badge-face i {
    font-size: 1.5rem;
    margin-bottom: 0.1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.jp-xp-level-num {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.jp-xp-badge-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--level-light) 0%, transparent 70%);
    opacity: 0.4;
    animation: glowPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); }
}

.jp-xp-badge-shadow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 8px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
    animation: shadowPulse 3s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.4; }
    50% { transform: translateX(-50%) scaleX(0.8); opacity: 0.2; }
}

/* XP Info */
.jp-xp-info {
    flex: 1;
    min-width: 0;
}

.jp-xp-level-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.jp-xp-numbers {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.jp-xp-current {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dash-text);
}

.jp-xp-separator {
    color: var(--dash-text-muted);
    font-weight: 400;
}

.jp-xp-total {
    font-size: 0.9rem;
    color: var(--dash-text-muted);
}

/* XP Progress Bar */
.jp-xp-progress-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.jp-xp-progress-bar {
    flex: 1;
    height: 10px;
    background: var(--dash-border);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.jp-xp-progress-fill {
    height: 100%;
    border-radius: 5px;
    position: relative;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.jp-xp-progress-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    border-radius: 5px 5px 0 0;
}

.jp-xp-progress-percent {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dash-primary);
    min-width: 35px;
    text-align: right;
}

/* Remaining XP */
.jp-xp-remaining {
    font-size: 0.8rem;
    color: var(--dash-text-muted);
    margin-top: 0.5rem;
}

.jp-xp-remaining i {
    color: var(--dash-success);
    margin-right: 0.25rem;
}

.jp-xp-remaining strong {
    color: var(--dash-text);
}

/* Next Level Preview */
.jp-xp-next-preview {
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%);
    border-top: 1px solid var(--dash-border);
}

.jp-xp-next-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dash-warning);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.jp-xp-next-title i {
    margin-right: 0.4rem;
}

.jp-xp-next-rewards {
    display: flex;
    gap: 1rem;
}

.jp-xp-reward-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--dash-text);
    font-weight: 500;
}

.jp-xp-reward-item i {
    font-size: 0.75rem;
    color: var(--dash-warning);
}

/* Dark Mode XP */
[data-bs-theme="dark"] .jp-xp-premium-container {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, var(--dash-card-bg) 100%);
}

[data-bs-theme="dark"] .jp-xp-next-preview {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
}

/* Mobile XP */
@media (max-width: 576px) {
    .jp-xp-premium-container {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .jp-xp-badge-3d {
        width: 60px;
        height: 60px;
    }
    
    .jp-xp-numbers {
        justify-content: center;
    }
    
    .jp-xp-progress-container {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .jp-xp-progress-percent {
        text-align: center;
    }
    
    .jp-xp-next-rewards {
        justify-content: center;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .jp-xp-badge-inner,
    .jp-xp-badge-glow,
    .jp-xp-badge-shadow {
        animation: none;
    }
}

/* ============================================
   LEADERBOARD - ANIMATED & MOTIVATIONAL
   ============================================ */

.jp-leaderboard-card {
    overflow: hidden;
}

/* Top 3 Podium */
.jp-leaderboard-top3 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 1rem 1rem 0.5rem;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, transparent 100%);
}

.jp-top3-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.jp-top3-item.gold {
    order: 2;
    transform: translateY(-8px);
}

.jp-top3-item.silver {
    order: 1;
}

.jp-top3-item.bronze {
    order: 3;
}

.jp-top3-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: visible;
    margin-bottom: 0.35rem;
}

.jp-top3-item.gold .jp-top3-avatar {
    width: 64px;
    height: 64px;
}

.jp-top3-avatar img,
.jp-top3-avatar .avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
}

.jp-top3-item.gold .jp-top3-avatar img,
.jp-top3-item.gold .jp-top3-avatar .avatar-fallback {
    border-color: #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

.jp-top3-item.silver .jp-top3-avatar img,
.jp-top3-item.silver .jp-top3-avatar .avatar-fallback {
    border-color: #94a3b8;
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.3);
}

.jp-top3-item.bronze .jp-top3-avatar img,
.jp-top3-item.bronze .jp-top3-avatar .avatar-fallback {
    border-color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

.jp-top3-crown {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
}

.jp-top3-item.gold .jp-top3-crown {
    color: #fbbf24;
    font-size: 1.1rem;
    top: -14px;
    animation: crownBounce 2s ease-in-out infinite;
}

@keyframes crownBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
}

.jp-top3-item.silver .jp-top3-crown,
.jp-top3-item.bronze .jp-top3-crown {
    width: 18px;
    height: 18px;
    background: var(--dash-text-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
}

.jp-top3-item.bronze .jp-top3-crown {
    background: #f59e0b;
}

.jp-top3-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dash-text);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 0 0.25rem;
}

.jp-top3-score {
    font-size: 0.7rem;
    color: var(--dash-text-muted);
}

/* Animated Leaderboard Rows */
.jp-leaderboard-animated .jp-leader-animated {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInRow 0.5s ease forwards;
}

@keyframes slideInRow {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.jp-dashboard-leader-row {
    transition: all 0.3s ease;
}

.jp-dashboard-leader-row:hover {
    background: var(--jp-bg-secondary, #f8fafc);
    transform: translateX(4px);
}

.jp-dashboard-leader-row.current-user {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.03) 100%);
    border-left: 3px solid var(--dash-primary);
}

/* Score counter animation */
.jp-dashboard-leader-score .score-value {
    font-variant-numeric: tabular-nums;
}

/* Motivation Banner */
.jp-leaderboard-motivation {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-top: 1px solid var(--dash-border);
    font-size: 0.8rem;
    color: var(--dash-text);
}

.jp-leaderboard-motivation i {
    color: var(--dash-primary);
    font-size: 0.9rem;
}

.jp-leaderboard-motivation strong {
    color: var(--dash-primary);
}

.jp-leaderboard-motivation.gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
}

.jp-leaderboard-motivation.gold i {
    color: #fbbf24;
}

.jp-leaderboard-motivation.gold strong {
    color: #f59e0b;
}

/* Dark Mode Leaderboard */
[data-bs-theme="dark"] .jp-leaderboard-top3 {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.12) 0%, transparent 100%);
}

[data-bs-theme="dark"] .jp-dashboard-leader-row:hover {
    background: rgba(30, 41, 59, 0.5);
}

[data-bs-theme="dark"] .jp-dashboard-leader-row.current-user {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
}

/* Mobile Leaderboard */
@media (max-width: 576px) {
    .jp-leaderboard-top3 {
        padding: 0.75rem 0.5rem 0.25rem;
    }
    
    .jp-top3-avatar {
        width: 44px;
        height: 44px;
    }
    
    .jp-top3-item.gold .jp-top3-avatar {
        width: 52px;
        height: 52px;
    }
    
    .jp-top3-name {
        max-width: 55px;
        font-size: 0.7rem;
    }
    
    .jp-leaderboard-motivation {
        font-size: 0.75rem;
        padding: 0.6rem 0.75rem;
    }
}

/* ============================================
   GAME RECOMMENDATIONS WIDGET
   ============================================ */

.jp-games-widget {
    overflow: hidden;
}

.jp-games-grid {
    display: flex;
    flex-direction: column;
}

.jp-game-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--dash-border);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.jp-game-card:last-child {
    border-bottom: none;
}

.jp-game-card:hover {
    background: linear-gradient(90deg, var(--jp-bg-secondary, #f8fafc) 0%, transparent 100%);
    transform: translateX(4px);
}

.jp-game-card:hover .jp-game-play {
    opacity: 1;
    transform: translateX(0);
}

.jp-game-card:hover .jp-game-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Game Icon */
.jp-game-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Game Info */
.jp-game-info {
    flex: 1;
    min-width: 0;
}

.jp-game-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dash-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.jp-game-tag {
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jp-game-desc {
    font-size: 0.8rem;
    color: var(--dash-text-muted);
    margin-top: 0.15rem;
}

/* Play Button */
.jp-game-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dash-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* Dark Mode Games */
[data-bs-theme="dark"] .jp-game-card:hover {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.5) 0%, transparent 100%);
}

/* Mobile Games */
@media (max-width: 576px) {
    .jp-game-card {
        padding: 0.75rem 1rem;
    }
    
    .jp-game-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
    
    .jp-game-name {
        font-size: 0.9rem;
    }
    
    .jp-game-desc {
        font-size: 0.75rem;
    }
    
    .jp-game-play {
        opacity: 1;
        transform: translateX(0);
        width: 28px;
        height: 28px;
    }
}

/* ============================================
   MOBILE OPTIMIZATION - 2025
   ============================================ */

/* Swipeable Stats Container */
@media (max-width: 768px) {
    .jp-dashboard-stats-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.75rem;
        padding-bottom: 0.5rem;
        margin: 0 -0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .jp-dashboard-stats-grid::-webkit-scrollbar {
        display: none;
    }
    
    .jp-dashboard-stat-card,
    .jp-stat-card-interactive {
        flex: 0 0 calc(75% - 0.5rem);
        scroll-snap-align: center;
        min-width: calc(75% - 0.5rem);
    }
    
    /* Scroll indicators */
    .jp-stats-scroll-indicator {
        display: flex;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.5rem 0;
    }
    
    .jp-stats-scroll-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--dash-border);
        transition: all 0.2s ease;
    }
    
    .jp-stats-scroll-dot.active {
        width: 18px;
        border-radius: 3px;
        background: var(--dash-primary);
    }
}

/* Pull to Refresh Indicator */
.jp-pull-refresh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--dash-primary) 0%, transparent 100%);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    pointer-events: none;
}

.jp-pull-refresh.visible {
    transform: translateY(0);
}

.jp-pull-refresh-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-primary);
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.jp-pull-refresh.loading .jp-pull-refresh-icon i {
    animation: spin 0.8s linear infinite;
}

/* Bottom Sheet - Quick Actions */
.jp-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dash-card-bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
    max-height: 70vh;
    overflow: hidden;
}

.jp-bottom-sheet.open {
    transform: translateY(0);
}

.jp-bottom-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1049;
}

.jp-bottom-sheet-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.jp-bottom-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--dash-border);
    border-radius: 2px;
    margin: 0.75rem auto;
}

.jp-bottom-sheet-header {
    padding: 0.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--dash-border);
}

.jp-bottom-sheet-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dash-text);
    margin: 0;
}

.jp-bottom-sheet-body {
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(70vh - 80px);
}

/* Bottom Sheet Quick Actions Grid */
.jp-bs-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.jp-bs-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: var(--jp-bg-secondary, #f8fafc);
    border-radius: 14px;
    text-decoration: none;
    color: var(--dash-text);
    transition: all 0.2s ease;
}

.jp-bs-quick-btn:hover,
.jp-bs-quick-btn:active {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    transform: scale(0.98);
}

.jp-bs-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.jp-bs-quick-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

/* Floating Action Button */
.jp-fab {
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dash-primary) 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    display: none;
}

@media (max-width: 768px) {
    .jp-fab {
        display: flex;
    }
}

.jp-fab:hover,
.jp-fab:active {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
}

.jp-fab.active {
    transform: rotate(45deg);
}

/* Touch Feedback */
@media (hover: none) {
    .jp-dashboard-stat-card:active,
    .jp-dashboard-quick-btn:active,
    .jp-game-card:active,
    .jp-dashboard-tx-item:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* Compact Mode Toggle */
.jp-compact-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--jp-bg-secondary, #f8fafc);
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--dash-text-muted);
}

@media (max-width: 576px) {
    .jp-compact-toggle {
        display: flex;
    }
}

.jp-compact-switch {
    width: 36px;
    height: 20px;
    background: var(--dash-border);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.jp-compact-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.jp-compact-switch.active {
    background: var(--dash-primary);
}

.jp-compact-switch.active::after {
    transform: translateX(16px);
}

/* Compact Mode Styles */
body.jp-compact-mode .jp-dashboard-card {
    margin-bottom: 0.75rem;
}

body.jp-compact-mode .jp-dashboard-card-header {
    padding: 0.75rem 1rem;
}

body.jp-compact-mode .jp-dashboard-card-body {
    padding: 0.75rem 1rem;
}

body.jp-compact-mode .jp-dashboard-tx-item {
    padding: 0.5rem 0;
}

body.jp-compact-mode .jp-dashboard-goal-item {
    padding: 0.6rem;
    margin-bottom: 0.4rem;
}

/* Safe Area for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .jp-bottom-sheet {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .jp-fab {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* Dark Mode Mobile */
[data-bs-theme="dark"] .jp-bottom-sheet {
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .jp-bs-quick-btn {
    background: rgba(30, 41, 59, 0.8);
}

[data-bs-theme="dark"] .jp-bs-quick-btn:hover {
    background: var(--dash-primary-light);
}