/* =========================================
   EiFaStars - Red Crystal Glass Theme
   Premium glassmorphism design system
   ========================================= */

/* Theme Variables */
[data-theme="crystal-red"], .theme-crystal-red {
    /* Primary Crystal Red Colors */
    --primary: #DC2626;
    --primary-light: #EF4444;
    --primary-dark: #B91C1C;
    --primary-glow: rgba(220, 38, 38, 0.5);
    --accent: #F43F5E;
    --accent-light: #FB7185;
    --accent-dark: #BE123C;

    /* Crystal Colors */
    --crystal-red: #DC2626;
    --crystal-pink: #F43F5E;
    --crystal-orange: #F97316;
    --crystal-amber: #F59E0B;

    /* Gradients - Crystal Effect */
    --gradient-main: linear-gradient(135deg, #DC2626 0%, #F43F5E 50%, #F97316 100%);
    --gradient-crystal: linear-gradient(135deg,
        rgba(220, 38, 38, 0.9) 0%,
        rgba(244, 63, 94, 0.7) 25%,
        rgba(249, 115, 22, 0.8) 50%,
        rgba(244, 63, 94, 0.7) 75%,
        rgba(220, 38, 38, 0.9) 100%);
    --gradient-glass: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    --gradient-card: linear-gradient(180deg,
        rgba(220, 38, 38, 0.15) 0%,
        rgba(244, 63, 94, 0.08) 50%,
        rgba(0, 0, 0, 0.2) 100%);
    --gradient-bg: linear-gradient(180deg,
        #0A0A0F 0%,
        #1A0A0F 30%,
        #150A0D 60%,
        #0A0A0F 100%);
    --gradient-header: linear-gradient(180deg,
        rgba(220, 38, 38, 0.2) 0%,
        rgba(0, 0, 0, 0.8) 100%);
    --gradient-shine: linear-gradient(135deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.1) 100%);

    /* Glass Effect Colors */
    --glass-bg: rgba(220, 38, 38, 0.08);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shine: rgba(255, 255, 255, 0.15);
    --glass-shadow: rgba(220, 38, 38, 0.3);

    /* Background Colors */
    --bg-dark: #0A0A0F;
    --bg-primary: #0F0A0C;
    --bg-secondary: #1A0F12;
    --bg-card: rgba(30, 15, 20, 0.7);
    --bg-card-hover: rgba(50, 25, 35, 0.8);
    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-glass-strong: rgba(255, 255, 255, 0.08);

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-accent: #F87171;

    /* Star Theme - Crystal Style */
    --star-color: #FCD34D;
    --star-glow: rgba(252, 211, 77, 0.6);

    /* Status Colors */
    --success: #10B981;
    --success-light: #34D399;
    --warning: #F59E0B;
    --warning-light: #FBBF24;
    --error: #EF4444;
    --error-light: #F87171;
    --info: #3B82F6;
    --info-light: #60A5FA;

    /* Shadows - Crystal Glass Effect */
    --shadow-sm: 0 2px 10px rgba(220, 38, 38, 0.15);
    --shadow-md: 0 8px 25px rgba(220, 38, 38, 0.2);
    --shadow-lg: 0 15px 50px rgba(220, 38, 38, 0.3);
    --shadow-glow: 0 0 40px rgba(220, 38, 38, 0.4);
    --shadow-crystal:
        0 0 20px rgba(220, 38, 38, 0.3),
        0 0 40px rgba(244, 63, 94, 0.2),
        0 0 60px rgba(249, 115, 22, 0.1);
    --shadow-glass:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-inner-glow: inset 0 0 20px rgba(220, 38, 38, 0.2);

    /* Border */
    --border-glass: 1px solid rgba(255, 255, 255, 0.1);
    --border-crystal: 1px solid rgba(220, 38, 38, 0.3);
}

/* =========================================
   Global Styles - Crystal Red Theme
   ========================================= */

[data-theme="crystal-red"] body,
.theme-crystal-red body {
    background: var(--gradient-bg);
    background-attachment: fixed;
}

/* Crystal Background Pattern */
[data-theme="crystal-red"]::before,
.theme-crystal-red::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(220, 38, 38, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(244, 63, 94, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* =========================================
   Glass Card Component
   ========================================= */

[data-theme="crystal-red"] .glass-card,
.theme-crystal-red .glass-card,
[data-theme="crystal-red"] .package-card,
.theme-crystal-red .package-card,
[data-theme="crystal-red"] .bento-card,
.theme-crystal-red .bento-card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Crystal Shine Effect */
[data-theme="crystal-red"] .glass-card::before,
.theme-crystal-red .glass-card::before,
[data-theme="crystal-red"] .package-card::before,
.theme-crystal-red .package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%);
    transition: left 0.5s ease;
    pointer-events: none;
}

[data-theme="crystal-red"] .glass-card:hover::before,
.theme-crystal-red .glass-card:hover::before,
[data-theme="crystal-red"] .package-card:hover::before,
.theme-crystal-red .package-card:hover::before {
    left: 100%;
}

/* =========================================
   Buttons - Crystal Style
   ========================================= */

[data-theme="crystal-red"] .btn,
.theme-crystal-red .btn,
[data-theme="crystal-red"] .primary-btn,
.theme-crystal-red .primary-btn,
[data-theme="crystal-red"] .buy-btn,
.theme-crystal-red .buy-btn,
[data-theme="crystal-red"] .bento-btn,
.theme-crystal-red .bento-btn {
    background: linear-gradient(135deg, #DC2626 0%, #F43F5E 100%);
    border: none;
    border-radius: 14px;
    color: white;
    font-weight: 600;
    padding: 14px 28px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 15px rgba(220, 38, 38, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

[data-theme="crystal-red"] .btn::before,
.theme-crystal-red .btn::before,
[data-theme="crystal-red"] .primary-btn::before,
.theme-crystal-red .primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        transparent 100%);
    pointer-events: none;
}

[data-theme="crystal-red"] .btn:hover,
.theme-crystal-red .btn:hover,
[data-theme="crystal-red"] .primary-btn:hover,
.theme-crystal-red .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(220, 38, 38, 0.5),
        0 0 40px rgba(244, 63, 94, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="crystal-red"] .btn:active,
.theme-crystal-red .btn:active {
    transform: translateY(0);
}

/* Secondary Button */
[data-theme="crystal-red"] .btn-secondary,
.theme-crystal-red .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: var(--text-primary);
}

[data-theme="crystal-red"] .btn-secondary:hover,
.theme-crystal-red .btn-secondary:hover {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.5);
}

/* =========================================
   Header - Crystal Glass
   ========================================= */

[data-theme="crystal-red"] .app-header,
.theme-crystal-red .app-header,
[data-theme="crystal-red"] header,
.theme-crystal-red header {
    background: linear-gradient(180deg,
        rgba(220, 38, 38, 0.15) 0%,
        rgba(15, 10, 12, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* =========================================
   Navigation - Crystal Style
   ========================================= */

[data-theme="crystal-red"] .bottom-nav,
.theme-crystal-red .bottom-nav {
    background: linear-gradient(180deg,
        rgba(25, 15, 18, 0.95) 0%,
        rgba(15, 10, 12, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="crystal-red"] .nav-item.active,
.theme-crystal-red .nav-item.active {
    color: #F87171;
}

[data-theme="crystal-red"] .nav-item.active svg,
.theme-crystal-red .nav-item.active svg {
    fill: #F87171;
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.5));
}

/* =========================================
   Package Cards - Crystal Glass
   ========================================= */

[data-theme="crystal-red"] .package-card,
.theme-crystal-red .package-card,
[data-theme="crystal-red"] .bento-package,
.theme-crystal-red .bento-package {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(220, 38, 38, 0.05) 50%,
        rgba(0, 0, 0, 0.1) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

[data-theme="crystal-red"] .package-card:hover,
.theme-crystal-red .package-card:hover,
[data-theme="crystal-red"] .bento-package:hover,
.theme-crystal-red .bento-package:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow:
        0 12px 40px rgba(220, 38, 38, 0.3),
        0 0 60px rgba(244, 63, 94, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="crystal-red"] .package-card.selected,
.theme-crystal-red .package-card.selected,
[data-theme="crystal-red"] .bento-package.selected,
.theme-crystal-red .bento-package.selected {
    border-color: #DC2626;
    box-shadow:
        0 0 0 2px rgba(220, 38, 38, 0.3),
        0 12px 40px rgba(220, 38, 38, 0.4),
        inset 0 0 20px rgba(220, 38, 38, 0.1);
}

/* Package Badge */
[data-theme="crystal-red"] .package-badge,
.theme-crystal-red .package-badge,
[data-theme="crystal-red"] .bento-package-badge,
.theme-crystal-red .bento-package-badge {
    background: linear-gradient(135deg, #DC2626, #F43F5E);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    position: absolute;
    top: -8px;
    right: 10px;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================
   Input Fields - Glass Style
   ========================================= */

[data-theme="crystal-red"] input,
.theme-crystal-red input,
[data-theme="crystal-red"] textarea,
.theme-crystal-red textarea,
[data-theme="crystal-red"] select,
.theme-crystal-red select {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    padding: 14px 16px;
    transition: all 0.3s ease;
}

[data-theme="crystal-red"] input:focus,
.theme-crystal-red input:focus,
[data-theme="crystal-red"] textarea:focus,
.theme-crystal-red textarea:focus {
    outline: none;
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.1),
        0 0 20px rgba(220, 38, 38, 0.2);
}

/* =========================================
   Modal - Crystal Glass
   ========================================= */

[data-theme="crystal-red"] .modal-content,
.theme-crystal-red .modal-content {
    background: linear-gradient(145deg,
        rgba(30, 20, 25, 0.95) 0%,
        rgba(15, 10, 12, 0.98) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(220, 38, 38, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* =========================================
   Sidebar - Desktop Crystal
   ========================================= */

[data-theme="crystal-red"] .desktop-sidebar,
.theme-crystal-red .desktop-sidebar {
    background: linear-gradient(180deg,
        rgba(30, 15, 20, 0.95) 0%,
        rgba(15, 10, 12, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3);
}

[data-theme="crystal-red"] .sidebar-nav .nav-item:hover,
.theme-crystal-red .sidebar-nav .nav-item:hover {
    background: rgba(220, 38, 38, 0.1);
}

[data-theme="crystal-red"] .sidebar-nav .nav-item.active,
.theme-crystal-red .sidebar-nav .nav-item.active {
    background: linear-gradient(90deg,
        rgba(220, 38, 38, 0.2) 0%,
        transparent 100%);
    border-left: 3px solid #DC2626;
    color: #F87171;
}

/* =========================================
   Toast Notifications - Crystal
   ========================================= */

[data-theme="crystal-red"] .toast,
.theme-crystal-red .toast {
    background: linear-gradient(135deg,
        rgba(30, 20, 25, 0.95) 0%,
        rgba(20, 15, 18, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="crystal-red"] .toast.success,
.theme-crystal-red .toast.success {
    border-left: 4px solid #10B981;
}

[data-theme="crystal-red"] .toast.error,
.theme-crystal-red .toast.error {
    border-left: 4px solid #EF4444;
}

/* =========================================
   Deal Cards - Crystal Style
   ========================================= */

[data-theme="crystal-red"] .deal-item,
.theme-crystal-red .deal-item,
[data-theme="crystal-red"] .bento-deal,
.theme-crystal-red .bento-deal {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(0, 0, 0, 0.1) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

[data-theme="crystal-red"] .deal-item:hover,
.theme-crystal-red .deal-item:hover,
[data-theme="crystal-red"] .bento-deal:hover,
.theme-crystal-red .bento-deal:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
    transform: translateX(4px);
}

/* =========================================
   Battery Widget - Crystal
   ========================================= */

[data-theme="crystal-red"] .battery-mini-fill,
.theme-crystal-red .battery-mini-fill,
[data-theme="crystal-red"] .battery-fill,
.theme-crystal-red .battery-fill {
    background: linear-gradient(90deg, #DC2626, #F43F5E, #F97316);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.5);
}

/* =========================================
   Scrollbar - Crystal Style
   ========================================= */

[data-theme="crystal-red"] ::-webkit-scrollbar,
.theme-crystal-red ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-theme="crystal-red"] ::-webkit-scrollbar-track,
.theme-crystal-red ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

[data-theme="crystal-red"] ::-webkit-scrollbar-thumb,
.theme-crystal-red ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #DC2626, #F43F5E);
    border-radius: 3px;
}

[data-theme="crystal-red"] ::-webkit-scrollbar-thumb:hover,
.theme-crystal-red ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #EF4444, #F87171);
}

/* =========================================
   Animations - Crystal Effects
   ========================================= */

@keyframes crystal-pulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(220, 38, 38, 0.3),
            0 0 40px rgba(244, 63, 94, 0.2);
    }
    50% {
        box-shadow:
            0 0 30px rgba(220, 38, 38, 0.5),
            0 0 60px rgba(244, 63, 94, 0.3);
    }
}

@keyframes crystal-shine {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes crystal-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

[data-theme="crystal-red"] .animate-pulse,
.theme-crystal-red .animate-pulse {
    animation: crystal-pulse 2s ease-in-out infinite;
}

/* =========================================
   Floating Stars - Crystal Theme
   ========================================= */

[data-theme="crystal-red"] .floating-star,
.theme-crystal-red .floating-star {
    filter: hue-rotate(0deg) saturate(1.5) drop-shadow(0 0 10px rgba(220, 38, 38, 0.5));
}

/* =========================================
   Reviews - Crystal Style
   ========================================= */

[data-theme="crystal-red"] .review-card,
.theme-crystal-red .review-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

[data-theme="crystal-red"] .review-avatar,
.theme-crystal-red .review-avatar {
    background: linear-gradient(135deg, #DC2626, #F43F5E);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

/* =========================================
   Referral Section - Crystal
   ========================================= */

[data-theme="crystal-red"] .referral-card-mini,
.theme-crystal-red .referral-card-mini {
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.1) 0%,
        rgba(244, 63, 94, 0.05) 100%);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 16px;
}

[data-theme="crystal-red"] .referral-card-mini:hover,
.theme-crystal-red .referral-card-mini:hover {
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.2);
}

/* =========================================
   Profile Stats - Crystal
   ========================================= */

[data-theme="crystal-red"] .profile-stats .stat-item,
.theme-crystal-red .profile-stats .stat-item,
[data-theme="crystal-red"] .bento-stat,
.theme-crystal-red .bento-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
}

[data-theme="crystal-red"] .stat-value,
.theme-crystal-red .stat-value,
[data-theme="crystal-red"] .bento-stat-value,
.theme-crystal-red .bento-stat-value {
    background: linear-gradient(135deg, #F87171, #FCD34D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================
   Custom Amount Section - Crystal
   ========================================= */

[data-theme="crystal-red"] .custom-amount-section,
.theme-crystal-red .custom-amount-section {
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.08) 0%,
        rgba(0, 0, 0, 0.1) 100%);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 16px;
}

/* =========================================
   Promo Banner - Crystal
   ========================================= */

[data-theme="crystal-red"] .promo-banner,
.theme-crystal-red .promo-banner {
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.2) 0%,
        rgba(244, 63, 94, 0.15) 50%,
        rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(220, 38, 38, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* =========================================
   Loading Screen - Crystal
   ========================================= */

[data-theme="crystal-red"] #loading-screen,
.theme-crystal-red #loading-screen {
    background: var(--gradient-bg);
}

[data-theme="crystal-red"] .ms-dot,
.theme-crystal-red .ms-dot {
    background: linear-gradient(135deg, #DC2626, #F43F5E);
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
}

/* =========================================
   Selection - Crystal
   ========================================= */

[data-theme="crystal-red"] ::selection,
.theme-crystal-red ::selection {
    background: rgba(220, 38, 38, 0.4);
    color: white;
}

/* =========================================
   Links - Crystal
   ========================================= */

[data-theme="crystal-red"] a,
.theme-crystal-red a {
    color: #F87171;
    transition: color 0.3s ease;
}

[data-theme="crystal-red"] a:hover,
.theme-crystal-red a:hover {
    color: #FCA5A5;
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* =========================================
   Support Chat - Crystal
   ========================================= */

[data-theme="crystal-red"] .chat-input-container,
.theme-crystal-red .chat-input-container {
    background: linear-gradient(180deg,
        rgba(30, 20, 25, 0.95) 0%,
        rgba(15, 10, 12, 0.98) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="crystal-red"] .chat-messages,
.theme-crystal-red .chat-messages {
    background: linear-gradient(180deg,
        rgba(15, 10, 12, 0.5) 0%,
        rgba(10, 8, 10, 0.8) 100%);
}