@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');
        
        * {
            font-family: 'Vazirmatn', sans-serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .dark-gradient {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        }
        
        .glow-effect {
            box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
        }
        
        .hover-glow:hover {
            box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .fade-in {
            animation: fadeIn 1s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .pulse-glow {
            animation: pulseGlow 2s infinite;
        }
        
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); }
            50% { box-shadow: 0 0 40px rgba(102, 126, 234, 0.6); }
        }
        
        .slide-in-left {
            animation: slideInLeft 0.8s ease-out;
        }
        
        @keyframes slideInLeft {
            from { transform: translateX(-100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .slide-in-right {
            animation: slideInRight 0.8s ease-out;
        }
        
        @keyframes slideInRight {
            from { transform: translateX(100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .server-status {
            position: relative;
            overflow: hidden;
        }
        
        .server-status::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        /* Loading Screen Styles */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .loading-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .loading-logo {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            margin-bottom: 2rem;
            animation: loadingPulse 2s infinite;
            box-shadow: 0 0 40px rgba(102, 126, 234, 0.5);
        }
        
        @keyframes loadingPulse {
            0%, 100% { 
                transform: scale(1);
                box-shadow: 0 0 40px rgba(102, 126, 234, 0.5);
            }
            50% { 
                transform: scale(1.1);
                box-shadow: 0 0 60px rgba(102, 126, 234, 0.8);
            }
        }
        
        .loading-text {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .loading-subtitle {
            font-size: 1.2rem;
            color: #9ca3af;
            margin-bottom: 3rem;
        }
        
        .loading-bar {
            width: 300px;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        
        .loading-progress {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 3px;
            width: 0%;
            animation: loadingProgress 3s ease-in-out;
        }
        
        @keyframes loadingProgress {
            0% { width: 0%; }
            100% { width: 100%; }
        }
        
        .loading-percentage {
            color: #667eea;
            font-weight: bold;
            font-size: 1.1rem;
        }
        
        /* Ticket System Styles */
        .ticket-status-open {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
        
        .ticket-status-in-progress {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        }
        
        .ticket-status-resolved {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
        
        .ticket-status-closed {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        }
        
        .ticket-priority-low {
            border-left: 4px solid #10b981;
        }
        
        .ticket-priority-medium {
            border-left: 4px solid #f59e0b;
        }
        
        .ticket-priority-high {
            border-left: 4px solid #ef4444;
        }
        
        .ticket-priority-urgent {
            border-left: 4px solid #dc2626;
            animation: urgentPulse 2s infinite;
        }
        
        @keyframes urgentPulse {
            0%, 100% { border-left-color: #dc2626; }
            50% { border-left-color: #fca5a5; }
        }

        /* Support Modal Animations */
        .modal-enter {
            animation: modalEnter 0.3s ease-out;
        }
        
        @keyframes modalEnter {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        .modal-exit {
            animation: modalExit 0.2s ease-in;
        }
        
        @keyframes modalExit {
            from {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
            to {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
        }
        

        
        .ticket-card-hover {
            transition: all 0.3s ease;
        }
        
        .ticket-card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }
        
        .form-input-focus {
            transition: all 0.3s ease;
        }
        
        .form-input-focus:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            transform: scale(1.02);
        }
        
        .button-press {
            transition: all 0.1s ease;
        }
        
        .button-press:active {
            transform: scale(0.98);
        }
        
        .typing-indicator {
            display: inline-block;
            animation: typing 1.5s infinite;
        }
        
        @keyframes typing {
            0%, 60%, 100% {
                opacity: 1;
            }
            30% {
                opacity: 0.3;
            }
        }
        
        .success-checkmark {
            animation: checkmarkDraw 0.5s ease-in-out;
        }
        
        @keyframes checkmarkDraw {
            0% {
                stroke-dasharray: 0 100;
            }
            100% {
                stroke-dasharray: 100 0;
            }
        }
        
        /* Alert Animations */
        .alert-slide-in {
            animation: alertSlideIn 0.5s ease-out;
        }
        
        @keyframes alertSlideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        .alert-slide-out {
            animation: alertSlideOut 0.3s ease-in;
        }
        
        @keyframes alertSlideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }
        
        .alert-shake {
            animation: alertShake 0.5s ease-in-out;
        }
        
        @keyframes alertShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        .progress-bar {
            animation: progressFill 0.3s ease-out;
        }
        
        @keyframes progressFill {
            from { width: 0%; }
            to { width: 100%; }
        }
        
        .notification-badge {
            animation: badgePulse 2s infinite;
        }
        
        @keyframes badgePulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }
        }

        /* Survey Fluid Animations */
        .survey-option {
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: linear-gradient(135deg, rgba(75, 85, 99, 0.8) 0%, rgba(55, 65, 81, 0.9) 100%);
            border: 2px solid transparent;
        }
        
        .survey-option::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
            transition: left 0.6s ease;
        }
        
        .survey-option:hover::before {
            left: 100%;
        }
        
        .survey-option:hover {
            transform: translateY(-3px) scale(1.02);
            border-color: rgba(102, 126, 234, 0.5);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        }
        
        .survey-option.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #667eea;
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);
        }
        
        .survey-option.selected::after {
            content: '✓';
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(255, 255, 255, 0.9);
            color: #667eea;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            animation: checkmarkPop 0.3s ease-out;
        }
        
        @keyframes checkmarkPop {
            0% { transform: scale(0) rotate(180deg); opacity: 0; }
            50% { transform: scale(1.2) rotate(0deg); opacity: 1; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        
        .survey-star {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            filter: brightness(0.4) saturate(0.5);
        }
        
        .survey-star:hover {
            transform: scale(1.3) rotate(10deg);
            filter: brightness(1.2) saturate(1.5) drop-shadow(0 0 10px gold);
        }
        
        .survey-star.active {
            filter: brightness(1.5) saturate(1.8) drop-shadow(0 0 15px gold);
            transform: scale(1.1);
            animation: starGlow 2s infinite alternate;
        }
        
        @keyframes starGlow {
            0% { filter: brightness(1.5) saturate(1.8) drop-shadow(0 0 15px gold); }
            100% { filter: brightness(1.8) saturate(2) drop-shadow(0 0 25px gold); }
        }
        
        .survey-textarea {
            transition: all 0.3s ease;
            background: linear-gradient(135deg, rgba(75, 85, 99, 0.8) 0%, rgba(55, 65, 81, 0.9) 100%);
            border: 2px solid rgba(75, 85, 99, 0.5);
        }
        
        .survey-textarea:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 0 20px rgba(102, 126, 234, 0.3);
            transform: scale(1.02);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        }
        
        .survey-submit-btn {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .survey-submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s ease;
        }
        
        .survey-submit-btn:hover::before {
            left: 100%;
        }
        
        .survey-submit-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }
        
        .survey-submit-btn:active {
            transform: translateY(0) scale(0.98);
        }
        
        .encouragement-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 20px 30px;
            border-radius: 20px;
            font-size: 18px;
            font-weight: bold;
            z-index: 1000;
            box-shadow: 0 20px 40px rgba(16, 185, 129, 0.4);
            animation: encouragementPop 2s ease-out;
        }
        
        @keyframes encouragementPop {
            0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; }
            20% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); opacity: 1; }
            80% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; }
        }
        
        .survey-progress {
            height: 6px;
            background: rgba(75, 85, 99, 0.3);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .survey-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 3px;
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        
        .survey-progress-bar::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: progressShine 2s infinite;
        }
        
        @keyframes progressShine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        .survey-section-title {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
        }
        
        .survey-section-title::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 2px;
            animation: titleUnderline 0.8s ease-out 0.5s forwards;
        }
        
        @keyframes titleUnderline {
            to { width: 100%; }
        }

         /* Chat Message Animations */
        .message-enter {
            animation: messageSlideIn 0.3s ease-out;
        }
        
        @keyframes messageSlideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .own-message {
            border: 2px solid rgba(102, 126, 234, 0.5);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        }
        
        .new-message-indicator {
            animation: newMessagePulse 2s ease-out;
        }
        
        @keyframes newMessagePulse {
            0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
            100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
        }

        /* Modal Animations */
        .modal-enter {
            animation: modalEnter 0.3s ease-out;
        }
        
        @keyframes modalEnter {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        .modal-exit {
            animation: modalExit 0.2s ease-in;
        }
        
        @keyframes modalExit {
            from {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
            to {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
        }

        .button-press {
            transition: all 0.1s ease;
        }
        
        .button-press:active {
            transform: scale(0.98);
        }