/* 🚀 OPTIMIZED CAFENET VIRTUAL CSS - RUTHLESS OPTIMIZATION */
/* فونت Vazir حذف شد از اینجا و به critical.css منتقل شد */

/* ==================== DASHBOARD STYLES ==================== */

/* Dashboard Header */
.dashboard-header {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid rgba(6, 255, 165, 0.3);
    margin-bottom: var(--space-2xl);
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(6, 255, 165, 0.05));
    border-radius: var(--radius-xl);
}

.dashboard-title {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--stellar-white);
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, var(--quantum-blue), var(--neon-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dashboard-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin: 0;
}

.user-avatar {
    text-align: center;
    animation: pulse 2s infinite;
}

/* Dashboard Stat Cards */
.dashboard-stat-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    backdrop-filter: var(--blur-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    height: 140px;
    overflow: hidden;
    transition: all var(--timing-smooth);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.dashboard-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-cosmic);
    border-color: rgba(6, 255, 165, 0.3);
}

.dashboard-stat-card .stat-icon {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
}

.dashboard-stat-card .stat-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 10px;
}

.dashboard-stat-card .stat-number {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--stellar-white);
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.dashboard-stat-card .stat-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

.dashboard-stat-card .stat-decoration {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    opacity: 0.1;
    transition: all var(--timing-smooth);
}

/* Individual Card Themes */
.orders-card {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(0, 82, 204, 0.1));
    border-color: rgba(0, 102, 255, 0.3);
}
.orders-card .stat-icon {
    background: linear-gradient(135deg, var(--quantum-blue), #0052cc);
    color: var(--stellar-white);
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}
.orders-card .stat-decoration {
    background: var(--quantum-blue);
}
.orders-card:hover .stat-decoration {
    transform: scale(1.2) rotate(45deg);
    opacity: 0.3;
}

.expenses-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(204, 153, 0, 0.1));
    border-color: rgba(255, 215, 0, 0.3);
}
.expenses-card .stat-icon {
    background: linear-gradient(135deg, var(--solar-gold), #cc9900);
    color: var(--void-black);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}
.expenses-card .stat-decoration {
    background: var(--solar-gold);
}
.expenses-card:hover .stat-decoration {
    transform: scale(1.2) rotate(-45deg);
    opacity: 0.3;
}

.referrals-card {
    background: linear-gradient(135deg, rgba(6, 255, 165, 0.15), rgba(0, 204, 122, 0.1));
    border-color: rgba(6, 255, 165, 0.3);
}
.referrals-card .stat-icon {
    background: linear-gradient(135deg, var(--neon-cyan), #00cc7a);
    color: var(--void-black);
    box-shadow: 0 4px 15px rgba(6, 255, 165, 0.3);
}
.referrals-card .stat-decoration {
    background: var(--neon-cyan);
}
.referrals-card:hover .stat-decoration {
    transform: scale(1.2) rotate(90deg);
    opacity: 0.3;
}

.wallet-card {
    background: linear-gradient(135deg, rgba(255, 0, 110, 0.15), rgba(204, 0, 85, 0.1));
    border-color: rgba(255, 0, 110, 0.3);
}
.wallet-card .stat-icon {
    background: linear-gradient(135deg, var(--plasma-pink), #cc0055);
    color: var(--stellar-white);
    box-shadow: 0 4px 15px rgba(255, 0, 110, 0.3);
}
.wallet-card .stat-decoration {
    background: var(--plasma-pink);
}
.wallet-card:hover .stat-decoration {
    transform: scale(1.2) rotate(-90deg);
    opacity: 0.3;
}

/* Dashboard Links */
.dashboard-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.dashboard-link:hover {
    color: inherit;
    text-decoration: none;
}

.dashboard-link .dashboard-stat-card {
    cursor: pointer;
}

.dashboard-link .dashboard-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-cosmic);
    border-color: rgba(6, 255, 165, 0.3);
}

/* Action Buttons */
.dashboard-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: var(--blur-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    color: var(--stellar-white);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-base);
    transition: all var(--timing-smooth);
    min-height: 60px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.dashboard-action-btn:hover {
    color: var(--stellar-white);
    text-decoration: none;
    transform: translateY(-4px);
}

.primary-action {
    background: linear-gradient(135deg, var(--quantum-blue), var(--cosmic-purple));
    border-color: var(--quantum-blue);
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3);
}
.primary-action:hover {
    box-shadow: var(--shadow-quantum);
    border-color: var(--neon-cyan);
    transform: translateY(-4px) scale(1.02);
}

.secondary-action:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.1));
    border-color: var(--cosmic-purple);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
    transform: translateY(-4px) scale(1.02);
}

.tertiary-action:hover {
    background: linear-gradient(135deg, rgba(6, 255, 165, 0.2), rgba(6, 255, 165, 0.1));
    border-color: var(--neon-cyan);
    box-shadow: 0 8px 25px rgba(6, 255, 165, 0.4);
    transform: translateY(-4px) scale(1.02);
}

.quaternary-action:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-color: var(--solar-gold);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    transform: translateY(-4px) scale(1.02);
}

/* Recent Orders Section */
.recent-orders-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    backdrop-filter: var(--blur-xl);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.recent-orders-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}

.section-header {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--stellar-white);
    margin: 0;
}

/* Order Cards */
.order-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: var(--blur-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: all var(--timing-smooth);
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.order-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--shadow-neon);
    border-color: rgba(6, 255, 165, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(6, 255, 165, 0.05));
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.order-id {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 600;
}

.order-status {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-status.pending {
    background: rgba(255, 193, 7, 0.2);
    color: var(--solar-gold);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.order-status.completed {
    background: rgba(6, 255, 165, 0.2);
    color: var(--neon-cyan);
    border: 1px solid rgba(6, 255, 165, 0.3);
}

.order-status.cancelled {
    background: rgba(255, 0, 110, 0.2);
    color: var(--plasma-pink);
    border: 1px solid rgba(255, 0, 110, 0.3);
}

.order-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--stellar-white);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.order-price {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--neon-cyan);
    margin-bottom: var(--space-xs);
    text-shadow: 0 2px 10px rgba(6, 255, 165, 0.3);
}

.order-date {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-4xl) var(--space-2xl);
}

.empty-icon {
    font-size: 5rem;
    color: var(--text-muted);
    margin-bottom: var(--space-xl);
    opacity: 0.6;
}

.empty-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--stellar-white);
    margin-bottom: var(--space-md);
}

.empty-description {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: var(--space-2xl);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-header {
        text-align: center;
    }
    
    .dashboard-title {
        font-size: var(--text-3xl);
    }
    
    .dashboard-stat-card {
        height: 120px;
        padding: var(--space-lg);
    }
    
    .dashboard-stat-card .stat-number {
        font-size: var(--text-2xl);
    }
    
    .recent-orders-section {
        padding: var(--space-lg);
    }
    
    .section-title {
        font-size: var(--text-xl);
    }
    
    .empty-state {
        padding: var(--space-2xl) var(--space-lg);
    }
    
    .empty-icon {
        font-size: 4rem;
    }
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

.service-item {
    transition: all 0.3s ease;
}

.category-filter:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(6, 255, 165, 0.3);
}

.category-filter.active {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(6, 255, 165, 0.4);
}

/* 
=== BACKUP: Old Variables with fixed units ===
--shadow-quantum: 0 1.25rem 3.75rem rgba(0, 102, 255, 0.3);
--shadow-cosmic: 0 1.5rem 4.375rem rgba(99, 102, 241, 0.4);
--shadow-neon: 0 0 3.125rem rgba(6, 255, 165, 0.5);
--space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-4xl: 6rem;
--text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-5xl: 3rem;
--radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 50%;
*/

/* 🎯 NEW RESPONSIVE VARIABLES - Modern CSS with clamp() and relative units */
:root {
    /* Colors - unchanged */
    --quantum-blue: #0066ff; --cosmic-purple: #6366f1; --neon-cyan: #06ffa5; --solar-gold: #ffd700;
    --plasma-pink: #ff006e; --void-black: #000000; --space-gray: #0a0a0a; --stellar-white: #ffffff;
    --text-primary: #ffffff; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --text-accent: #06ffa5;
    --glass-card: rgba(10, 10, 10, 0.9); --glass-overlay: rgba(0, 0, 0, 0.7);
    
    /* 🚀 RESPONSIVE SHADOWS - با clamp() و viewport units */
    --shadow-quantum: 0 clamp(0.5rem, 2.5vw, 1.25rem) clamp(1rem, 5vw, 3.75rem) rgba(0, 102, 255, 0.3);
    --shadow-cosmic: 0 clamp(0.75rem, 3vw, 1.5rem) clamp(1.5rem, 6vw, 4.375rem) rgba(99, 102, 241, 0.4);
    --shadow-neon: 0 0 clamp(1rem, 4vw, 3.125rem) rgba(6, 255, 165, 0.5);
    
    /* Timing - unchanged */
    --timing-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* 📱 RESPONSIVE SPACING - با clamp() برای adaptability */
    --space-sm: clamp(0.25rem, 1vw, 0.5rem);
    --space-md: clamp(0.5rem, 2vw, 1rem);
    --space-lg: clamp(0.75rem, 3vw, 1.5rem);
    --space-xl: clamp(1rem, 4vw, 2rem);
    --space-2xl: clamp(1.5rem, 6vw, 3rem);
    --space-4xl: clamp(3rem, 8vw, 6rem);
    
    /* 🔤 RESPONSIVE TYPOGRAPHY - با clamp() برای readability */
    --text-sm: clamp(0.75rem, 2vw, 0.875rem);
    --text-base: clamp(0.875rem, 2.5vw, 1rem);
    --text-lg: clamp(1rem, 3vw, 1.125rem);
    --text-xl: clamp(1.125rem, 3.5vw, 1.25rem);
    --text-2xl: clamp(1.25rem, 4vw, 1.5rem);
    --text-3xl: clamp(1.5rem, 5vw, 2rem);
    --text-4xl: clamp(2rem, 6vw, 2.5rem);
    --text-5xl: clamp(2.5rem, 8vw, 3rem);
    
    /* 🎨 RESPONSIVE RADIUS - با clamp() */
    --radius-sm: clamp(0.25rem, 1vw, 0.5rem);
    --radius-md: clamp(0.375rem, 1.5vw, 0.75rem);
    --radius-lg: clamp(0.5rem, 2vw, 0.75rem);
    --radius-xl: clamp(0.75rem, 2.5vw, 1rem);
    --radius-2xl: clamp(1rem, 3vw, 1.5rem);
    --radius-full: 50%;
    
    /* 🌫️ RESPONSIVE BLUR */
    --blur-sm: blur(clamp(0.25rem, 1vw, 0.5rem));
    --blur-md: blur(clamp(0.5rem, 2vw, 0.75rem));
    --blur-lg: blur(clamp(0.75rem, 2.5vw, 1rem));
    --blur-xl: blur(clamp(1rem, 3vw, 1.5rem));
}

/* Global Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:1rem;overflow-x:hidden;width:100%;max-width:100vw}
* { box-sizing: border-box !important; }

/* 🔤 RESPONSIVE TYPOGRAPHY */
* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Vazir', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* 📏 RESPONSIVE FONT SIZING */
html {
    font-size: clamp(14px, 2.5vw, 16px); /* Base responsive font size */
}

/* Emoji System - Basic emoji support (animations removed per user request) */
.emoji,.emoji-diamond::before,.emoji-chart::before,.emoji-gift::before,.emoji-handshake::before,.emoji-heart::before,.emoji-rocket::before,.emoji-money::before,.emoji-clipboard::before{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'!important}
.emoji-diamond::before{content:"💎"}.emoji-chart::before{content:"📊"}.emoji-gift::before{content:"🎁"}.emoji-handshake::before{content:"🤝"}.emoji-heart::before{content:"💝"}.emoji-rocket::before{content:"🚀"}.emoji-money::before{content:"💰"}.emoji-clipboard::before{content:"📋"}

/* Body */
body{
    font-family:'Vazir',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
    direction:rtl;line-height:1.7;font-weight:400;color:var(--stellar-white);
    background:radial-gradient(circle at 20% 80%,rgba(0,102,255,0.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(99,102,241,0.3) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(6,255,165,0.2) 0%,transparent 50%),linear-gradient(135deg,#000000 0%,#0a0a0a 50%,#1a1a1a 100%);
    background-size:100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh;
    background-attachment:fixed;
    min-height:100vh;position:relative;overflow-x:hidden;width:100vw;margin:0;padding:0
}
/* Navigation */
.navbar{
    position:fixed;top:0;left:0;right:0;z-index:1000;padding:2.3rem 0;
    background:rgba(0,0,0,0.9);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(6,255,165,0.2);
    width:100%;box-sizing:border-box
}
.navbar.scrolled{padding:var(--space-md) 0;background:rgba(0,0,0,0.95);box-shadow:var(--shadow-quantum)}
.navbar-brand{
    font-size:var(--text-2xl);font-weight:800;color:#000000;text-decoration:none;
    display:flex;align-items:center;gap:var(--space-sm);
    transition:all var(--timing-smooth);position:relative;z-index:2
}
.navbar-brand::before{content:'⚡';font-size:var(--text-xl)}
.navbar-brand:hover{transform:scale(1.05);filter:drop-shadow(0 0 1.25rem rgba(6,255,165,0.5))}
.nav-links{display:flex;list-style:none;gap:var(--space-xl);margin:0;padding:0;position:relative;z-index:2}
.nav-link{
    color:#ffffff;
    text-decoration:none;
    font-weight:700;
    font-size:var(--text-base);
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-lg);
    transition:all var(--timing-smooth);
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,0.1);
}
.nav-link::before{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(135deg,#0066ff 0%,#6366f1 50%,#06ffa5 100%);
    opacity:0;transition:all var(--timing-smooth);z-index:-1
}
.nav-link:hover{color:var(--stellar-white);transform:translateY(-0.125rem);box-shadow:var(--shadow-neon)}
.nav-link:hover::before{left:0;opacity:0.2}
.nav-link.active{color:var(--text-primary);background:rgba(6,255,165,0.15);box-shadow:0 0 1.25rem rgba(6,255,165,0.3);border:0.0625rem solid rgba(6,255,165,0.3)}

/* 📦 RESPONSIVE CONTAINER - Modern CSS approach */
.container {
    max-width: 100vw;
    width: 100vw;
    margin: 0;
    padding: 0 1rem;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

/* 🎭 RESPONSIVE HERO SECTION */
.hero-quantum {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,102,255,0.8) 0%, rgba(99,102,241,0.8) 100%);
    color: white;
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    position: relative;
    z-index: 10;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .hero-quantum {
        min-height: 30vh;
        padding: var(--space-lg) var(--space-sm);
    }
    .navbar {
        padding: 0.5rem 0;
    }
    .container {
        margin: 0 !important;
        padding: 0 0.5rem !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }
    body, html {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    * {
        max-width: 100vw !important;
    }
}
.hero-quantum::before{
    content:'';position:absolute;top:50%;left:50%;width:50rem;height:50rem;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(0,102,255,0.1) 0%,transparent 70%);
    /* انیمیشن پالس حذف شد */
    pointer-events:none
}
.hero-content{position:relative;z-index:3;max-width:900px;margin:0 auto;padding:20px}
/* 🎯 RESPONSIVE HERO TYPOGRAPHY */
.hero-title {
    font-size: var(--text-5xl);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    color: white;
    text-shadow: 0 0 var(--space-lg) rgba(255,255,255,0.3);
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
    font-weight: 400;
}
.hero-cta{display:flex;gap:var(--space-lg);justify-content:center;flex-wrap:wrap}

/* Button System */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
    padding:var(--space-lg) var(--space-2xl);border:none;border-radius:var(--radius-xl);
    font-size:var(--text-base);font-weight:700;text-decoration:none;
    transition:all var(--timing-smooth);cursor:pointer;position:relative;overflow:hidden;
    backdrop-filter:var(--blur-md);min-width:160px;
    transform-style:preserve-3d;will-change:transform;contain:layout style paint
}
.btn::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.6s cubic-bezier(0.25,0.46,0.45,0.94)
}
.btn:hover::before{left:100%}
.btn-quantum{
    background:linear-gradient(45deg,#06ffa5,#00d4aa)!important;
    color:#000000!important;box-shadow:var(--shadow-quantum);border:none!important;font-weight:700!important
}
.btn-quantum *{color:#000000!important;-webkit-text-fill-color:#000000!important}
.btn-quantum:hover{
    transform:translateY(-0.3125rem) scale(1.05);
    box-shadow:0 1.5625rem 5rem rgba(6,255,165,0.4);
    filter:brightness(1.1);color:#000000!important;-webkit-text-fill-color:#000000!important
}
.btn-plasma{
    background:linear-gradient(135deg,#ff006e 0%,#8338ec 50%,#3a86ff 100%);
    color:var(--stellar-white)!important;box-shadow:0 0.9375rem 2.5rem rgba(255,0,110,0.3);
    -webkit-text-fill-color:var(--stellar-white)!important
}
.btn-plasma:hover{
    transform:translateY(-0.3125rem) scale(1.05);
    box-shadow:0 1.5625rem 5rem rgba(255,0,110,0.4);
    filter:brightness(1.1);color:var(--stellar-white)!important;-webkit-text-fill-color:var(--stellar-white)!important
}
.btn-ghost{
    background:rgba(255,255,255,0.95)!important;color:#000000!important;
    border:2px solid rgba(6,255,165,0.6)!important;backdrop-filter:var(--blur-lg);font-weight:700!important
}
.btn-ghost *{color:#000000!important;-webkit-text-fill-color:#000000!important}
.btn-ghost:hover{
    background:rgba(6,255,165,0.9)!important;border-color:var(--neon-cyan)!important;
    box-shadow:var(--shadow-neon);transform:translateY(-0.1875rem);
    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
    text-shadow:0 1px 3px rgba(0,0,0,0.8)!important
}
.btn-solar{
    background:linear-gradient(135deg,#ffd700 0%,#ff8c00 50%,#ff4500 100%)!important;
    color:#ffffff!important;box-shadow:0 0.9375rem 2.5rem rgba(255,215,0,0.4);
    border:none!important;font-weight:700!important;
    text-shadow:0 2px 4px rgba(0,0,0,0.3);
    -webkit-text-fill-color:#ffffff!important
}
.btn-solar *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
.btn-solar:hover{
    transform:translateY(-0.3125rem) scale(1.05);
    box-shadow:0 1.5625rem 5rem rgba(255,215,0,0.6);
    filter:brightness(1.2);color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:0 2px 6px rgba(0,0,0,0.4)
}
.btn-solar:disabled,.btn-solar:disabled:hover{
    background:linear-gradient(135deg,#666666 0%,#888888 100%)!important;
    color:#cccccc!important;-webkit-text-fill-color:#cccccc!important;
    box-shadow:none;transform:none;cursor:not-allowed;
    filter:none;opacity:0.6
}

/* Hero Button Overrides */
.hero-cta a,.hero-cta .btn{
    color:#ffffff!important;text-decoration:none!important;font-weight:700!important;
    text-shadow:0 2px 4px rgba(0,0,0,0.9)!important
}
.hero-cta .btn-quantum{
    background:linear-gradient(135deg,#0066ff 0%,#6366f1 50%,#06ffa5 100%)!important;
    color:#ffffff!important;border:none!important
}
.hero-cta .btn-ghost{
    background:rgba(255,255,255,0.2)!important;color:#ffffff!important;
    border:2px solid rgba(6,255,165,0.8)!important
}

/* Card System */
.card-quantum{
    background:var(--glass-card);backdrop-filter:var(--blur-xl);
    border:1px solid rgba(6,255,165,0.3);border-radius:var(--radius-2xl);
    padding:var(--space-2xl);margin-bottom:var(--space-xl);
    transition:all var(--timing-smooth);position:relative;overflow:hidden;
    color:var(--text-primary);box-shadow:0 8px 32px rgba(0,0,0,0.5);
    background-image:linear-gradient(135deg,rgba(0,0,0,0.8) 0%,rgba(10,10,10,0.9) 50%,rgba(0,0,0,0.8) 100%);
    will-change:transform;contain:layout style paint
}
.card-quantum::before{
    content:'';position:absolute;top:0;left:0;right:0;height:0.0625rem;
    background:linear-gradient(135deg,#0066ff 0%,#6366f1 50%,#06ffa5 100%);opacity:0.5
}
.card-quantum:hover{
    transform:translateY(-0.625rem) rotateX(5deg);
    box-shadow:var(--shadow-cosmic);border-color:var(--neon-cyan);
    background:rgba(6,255,165,0.05)
}
.card-quantum:hover::before{opacity:1;box-shadow:0 0 1.25rem rgba(6,255,165,0.5)}

/* Form System */
.form-quantum{
    background:var(--glass-card);backdrop-filter:var(--blur-xl);
    border-radius:var(--radius-2xl);padding:var(--space-2xl);
    border:1px solid rgba(6,255,165,0.3);box-shadow:0 8px 32px rgba(0,0,0,0.5);
    contain:layout style
}
.form-group{margin-bottom:var(--space-lg)}
.form-label{display:block;margin-bottom:var(--space-sm);color:var(--text-primary);font-weight:700}
.form-control{
    width:100%;padding:var(--space-md);border:1px solid rgba(6,255,165,0.3);
    border-radius:var(--radius-lg);background:rgba(0,0,0,0.7);color:var(--text-primary);
    font-size:var(--text-base);transition:all var(--timing-smooth);
    backdrop-filter:var(--blur-md)
}
.form-control:focus{
    outline:none;border-color:var(--neon-cyan);
    box-shadow:0 0 0 2px rgba(6,255,165,0.2);
    background:rgba(0,0,0,0.9)
}
.form-control::placeholder{color:var(--text-muted)}

/* Text Gradients */
.text-gradient-quantum{
    background:linear-gradient(135deg,#0066ff 0%,#6366f1 50%,#06ffa5 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent;font-weight:900
}
.text-gradient-plasma{
    background:linear-gradient(135deg,#ff006e 0%,#8338ec 50%,#3a86ff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent;font-weight:900
}
.text-gradient-solar{
    background:linear-gradient(135deg,#ffd700 0%,#ff8c00 50%,#ff4500 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent;font-weight:900
}
.text-gradient-cosmic{
    background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a855f7 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent;font-weight:900
}

/* Gradient Text Emoji Fix */
.text-gradient-quantum::before,.text-gradient-plasma::before,.text-gradient-solar::before,
.text-gradient-quantum .emoji,.text-gradient-plasma .emoji,.text-gradient-solar .emoji{
    -webkit-text-fill-color:unset!important;color:unset!important;
    background:transparent!important;-webkit-background-clip:unset!important;
    background-clip:unset!important
}

/* Fix emoji display in gradient text headers */
.text-gradient-quantum,
.text-gradient-plasma,
.text-gradient-solar,
.text-gradient-cosmic {
    /* Ensure emojis are visible within gradient text */
    position: relative;
}

/* DISABLED: First letter styling removed to maintain gradient consistency
.text-gradient-quantum::first-letter,
.text-gradient-plasma::first-letter,
.text-gradient-solar::first-letter,
.text-gradient-cosmic::first-letter {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    background: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji' !important;
}
*/

/* Animations */
/* انیمیشن‌های fade-in-up و slide-up-fade حذف شدند */

/* Utilities */
.text-center{text-align:center}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:1rem}
.mb-4{margin-bottom:1.5rem}
.mb-5{margin-bottom:3rem}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}
.mt-5{margin-top:3rem}
.d-flex{display:flex}
.align-items-center{align-items:center}
.justify-content-center{justify-content:center}
.justify-content-between{justify-content:space-between}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-3{gap:1rem}
.gap-4{gap:1.5rem}
.gap-5{gap:3rem}
.text-muted{color:var(--text-muted)}
.text-primary{color:var(--text-primary)}
.text-accent{color:var(--text-accent)}
.p-3{padding:1rem}
.p-4{padding:1.5rem}
.p-5{padding:3rem}
.px-3{padding-left:1rem;padding-right:1rem}
.py-3{padding-top:1rem;padding-bottom:1rem}

/* 🚀 CSS-FIRST RESPONSIVE: No more breakpoints! Everything flows naturally with clamp() */

/* High Performance Optimizations */
*{will-change:auto}
.btn:hover,.card-quantum:hover{will-change:transform}
.hero-quantum::before{will-change:transform,opacity}
body{will-change:background-position}

/* 🚀 REVOLUTIONARY ERROR PAGES - ULTIMATE SEO & UX OPTIMIZATION */
.error-container {
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(16, 16, 32, 0.98) 50%, rgba(10, 10, 20, 1) 100%);
    position: relative; overflow-x: hidden;
}
.error-container::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, rgba(6, 255, 165, 0.05) 0%, transparent 70%);
    pointer-events: none;
}
.error-hero { padding: 4rem 0; text-align: center; position: relative; z-index: 2; }
.error-content { max-width: 800px; margin: 0 auto; padding: 0 1rem; }
.error-logo { margin-bottom: 2rem; animation: float 3s ease-in-out infinite; }
.error-number {
    display: flex; justify-content: center; align-items: center; gap: 1rem;
    margin-bottom: 2rem; font-size: clamp(4rem, 12vw, 8rem); font-weight: 900;
}
.digit { color: #06ffa5; text-shadow: 0 0 30px rgba(6, 255, 165, 0.6); animation: pulse 2s infinite; }
.digit-special { color: #ff006e; text-shadow: 0 0 30px rgba(255, 0, 110, 0.6); animation: bounce 2s infinite; transform-origin: center bottom; }
.error-title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; color: var(--stellar-white); margin-bottom: 1.5rem; line-height: 1.3; }
.error-description { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.error-search { margin-bottom: 3rem; }
.search-form { max-width: 500px; margin: 0 auto; }
.search-input-group { display: flex; gap: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.search-input { flex: 1; padding: 1rem 1.5rem; border: 2px solid rgba(6, 255, 165, 0.3); border-right: none; background: rgba(255, 255, 255, 0.05); color: var(--stellar-white); font-size: 1rem; outline: none; backdrop-filter: blur(10px); }
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--neon-cyan); background: rgba(255, 255, 255, 0.08); }
.search-btn { padding: 1rem 2rem; background: linear-gradient(135deg, var(--neon-cyan), var(--quantum-blue)); border: 2px solid var(--neon-cyan); color: var(--stellar-white); font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.search-btn:hover { background: linear-gradient(135deg, var(--quantum-blue), var(--neon-cyan)); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(6, 255, 165, 0.4); }
.error-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem; }
.error-suggestions { padding: 4rem 0; background: rgba(255, 255, 255, 0.02); border-top: 1px solid rgba(6, 255, 165, 0.1); position: relative; }
.suggestions-title { text-align: center; font-size: 2rem; font-weight: 700; color: var(--stellar-white); margin-bottom: 3rem; background: linear-gradient(135deg, var(--neon-cyan), var(--quantum-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.suggestions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.suggestion-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-2xl); padding: 2rem; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; }
.suggestion-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(6, 255, 165, 0.1), transparent); transition: left 0.5s ease; }
.suggestion-card:hover::before { left: 100%; }
.suggestion-card:hover { transform: translateY(-8px); border-color: rgba(6, 255, 165, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
.suggestion-icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
.suggestion-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--stellar-white); margin-bottom: 0.5rem; }
.suggestion-card p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; }
.suggestion-link { display: inline-block; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, rgba(6, 255, 165, 0.2), rgba(99, 102, 241, 0.2)); border: 1px solid rgba(6, 255, 165, 0.3); border-radius: var(--radius-lg); color: var(--neon-cyan); text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.suggestion-link:hover { background: linear-gradient(135deg, rgba(6, 255, 165, 0.3), rgba(99, 102, 241, 0.3)); color: var(--stellar-white); transform: translateY(-2px); }
.error-help { padding: 4rem 0; background: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.help-content { max-width: 1000px; margin: 0 auto; padding: 0 1rem; text-align: center; }
.help-title { font-size: 2rem; font-weight: 700; color: var(--stellar-white); margin-bottom: 3rem; }
.help-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.help-item { padding: 2rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl); transition: all 0.3s ease; }
.help-item:hover { transform: translateY(-5px); border-color: rgba(6, 255, 165, 0.3); }
.help-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.help-item h3 { font-size: 1.2rem; font-weight: 700; color: var(--stellar-white); margin-bottom: 0.5rem; }
.help-item p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; }
.help-link { display: inline-block; padding: 0.5rem 1rem; background: rgba(6, 255, 165, 0.1); border: 1px solid rgba(6, 255, 165, 0.3); border-radius: var(--radius-md); color: var(--neon-cyan); text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.help-link:hover { background: rgba(6, 255, 165, 0.2); color: var(--stellar-white); }
.social-links { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.social-link { padding: 0.5rem 1rem; border-radius: var(--radius-md); color: var(--stellar-white); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; }
.social-link.telegram { background: linear-gradient(135deg, #0088cc, #0077b5); }
.social-link.eitaa { background: linear-gradient(135deg, #7b68ee, #6a5acd); }
.social-link.soroush { background: linear-gradient(135deg, #ff6b6b, #ee5a24); }
.social-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.error-report { padding: 3rem 0; background: rgba(255, 0, 110, 0.05); border-top: 1px solid rgba(255, 0, 110, 0.1); }
.report-box { max-width: 600px; margin: 0 auto; padding: 2rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl); text-align: center; }
.report-box h3 { color: var(--stellar-white); margin-bottom: 1rem; font-size: 1.3rem; }
.report-box p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; }
.report-details { background: rgba(0, 0, 0, 0.3); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.5rem; text-align: left; direction: ltr; }
.error-url { display: block; color: var(--neon-cyan); font-family: 'Courier New', monospace; font-size: 0.9rem; word-break: break-all; margin-bottom: 0.5rem; }
.error-time { color: var(--text-muted); font-size: 0.8rem; }
.digit-warning { color: #ffa500; text-shadow: 0 0 30px rgba(255, 165, 0, 0.6); animation: pulse 2s infinite; }
.digit-special-warning { color: #ff4500; text-shadow: 0 0 30px rgba(255, 69, 0, 0.6); animation: bounce 2s infinite; transform-origin: center bottom; }
.digit-forbidden { color: #ff006e; text-shadow: 0 0 30px rgba(255, 0, 110, 0.6); animation: pulse 2s infinite; }
.digit-special-forbidden { color: #8338ec; text-shadow: 0 0 30px rgba(131, 56, 236, 0.6); animation: bounce 2s infinite; transform-origin: center bottom; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@media (max-width: 768px) {
    .error-hero { padding: 2rem 0; }
    .error-number { font-size: 4rem; gap: 0.5rem; }
    .error-actions { gap: 0.5rem; }
    .error-actions .btn { padding: 0.75rem 1rem; font-size: 0.9rem; }
    .suggestions-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .help-options { grid-template-columns: 1fr; gap: 1.5rem; }
    .search-input-group { flex-direction: column; }
    .search-input { border-right: 2px solid rgba(6, 255, 165, 0.3); border-bottom: none; }
    .search-btn { border-top: none; }
}