/* ═══════════════════════════════════════════════════════════════════════════════
   ✦ MODIAK — CINEMATIC LUXURY DESIGN SYSTEM v3.0
   ✦ Complete Visual Overhaul: Aurora, Glass, Motion, Depth
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Typography Foundation ─── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── Design Tokens ─── */
:root {
    /* Typography */
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Aurora Palette */
    --aurora-1: #6366f1;
    --aurora-2: #8b5cf6;
    --aurora-3: #a78bfa;
    --aurora-4: #c084fc;
    --aurora-5: #e879f9;
    
    /* Surface Colors */
    --surface-bg: #fafbfe;
    --surface-card: #ffffff;
    --surface-elevated: #ffffff;
    --surface-sunken: #f1f5f9;
    --surface-overlay: rgba(255, 255, 255, 0.72);
    
    /* Borders & Shadows */
    --border-subtle: rgba(99, 102, 241, 0.06);
    --border-glow: rgba(99, 102, 241, 0.18);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
    --shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.08), 0 0 0 1px var(--border-subtle);
    --shadow-xl: 0 25px 65px -15px rgba(99, 102, 241, 0.12), 0 0 0 1px var(--border-glow);
    --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.2);
    
    /* Radii */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    
    /* Timing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-fast: 0.2s;
    --duration-normal: 0.4s;
    --duration-slow: 0.6s;
    --transition-base: all 0.35s var(--ease-out-expo);
}

/* ─── Dark Mode Tokens ─── */
[data-bs-theme="dark"] {
    --surface-bg: #07080f;
    --surface-card: rgba(17, 20, 35, 0.8);
    --surface-elevated: rgba(25, 28, 48, 0.9);
    --surface-sunken: #0c0e1a;
    --surface-overlay: rgba(15, 18, 32, 0.82);
    --border-subtle: rgba(139, 92, 246, 0.08);
    --border-glow: rgba(139, 92, 246, 0.2);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
    --shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.4), 0 0 0 1px var(--border-subtle);
    --shadow-xl: 0 25px 65px -15px rgba(99, 102, 241, 0.15), 0 0 0 1px var(--border-glow);
    --shadow-glow: 0 0 60px -10px rgba(139, 92, 246, 0.25);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   1. GLOBAL RESETS & BASE
   ═══════════════════════════════════════════════════════════════════════════════ */
   
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body) !important;
    background-color: var(--surface-bg) !important;
    color: #334155 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    letter-spacing: -0.01em;
    overflow-x: hidden;
}

[data-bs-theme="dark"] body {
    color: #cbd5e1 !important;
}

/* Animated Aurora Background Mesh */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse 600px 400px at 20% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 500px 350px at 80% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 50% 50%, rgba(236, 72, 153, 0.02) 0%, transparent 70%);
    animation: aurora-drift 30s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

@keyframes aurora-drift {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(2%, -3%) rotate(1deg); }
    66% { transform: translate(-1%, 2%) rotate(-0.5deg); }
    100% { transform: translate(1%, -1%) rotate(0.5deg); }
}

/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    color: #0f172a !important;
}

[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5, 
[data-bs-theme="dark"] h6 {
    color: #f1f5f9 !important;
}

/* ─── Container ─── */
.container {
    max-width: 1280px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ─── Selection ─── */
::selection {
    background: rgba(99, 102, 241, 0.15);
    color: #312e81;
}

[data-bs-theme="dark"] ::selection {
    background: rgba(139, 92, 246, 0.25);
    color: #ede9fe;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--aurora-1), var(--aurora-2));
    border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--aurora-2), var(--aurora-5));
}


/* ═══════════════════════════════════════════════════════════════════════════════
   2. TOPBAR — FROSTED GLASS TICKER
   ═══════════════════════════════════════════════════════════════════════════════ */
   
.finance-ticker.bg-dark {
    background: linear-gradient(135deg, #0f0a2e 0%, #1a1145 50%, #0d0b2a 100%) !important;
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
    padding: 10px 0 !important;
    position: relative;
    overflow: hidden;
}

/* Animated shimmer line on topbar */
.finance-ticker.bg-dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--aurora-3), transparent);
    animation: shimmer-line 4s ease-in-out infinite;
}

@keyframes shimmer-line {
    0% { left: -100%; }
    100% { left: 100%; }
}

.finance-ticker .finance-item .name {
    color: rgba(255,255,255,0.4) !important;
}
.finance-ticker .finance-item .value {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;
    font-size: 0.82rem !important;
}

.finance-ticker .social-icons a {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: var(--transition-base) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
}

.finance-ticker .social-icons a:hover {
    color: #ffffff !important;
    background: rgba(139, 92, 246, 0.2);
    transform: translateY(-2px) scale(1.1);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   3. HEADER — FLOATING FROSTED GLASS NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.header {
    background: transparent !important;
    border: none !important;
    position: relative;
    z-index: 100;
}

/* Logo Section */
.second-header {
    background: var(--surface-overlay) !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 16px 0 !important;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm) !important;
}

[data-bs-theme="dark"] .second-header {
    background: rgba(7, 8, 15, 0.75) !important;
    border-bottom-color: rgba(139, 92, 246, 0.06) !important;
}

/* Logo hover micro-animation */
.main-logo a {
    display: inline-block;
    transition: var(--transition-base);
}
.main-logo a:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.15));
}

/* Navigation Bar - Floating Pill */
.showbacktop.full-nav {
    background: var(--surface-overlay) !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 6px 0 !important;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm) !important;
}

[data-bs-theme="dark"] .showbacktop.full-nav {
    background: rgba(7, 8, 15, 0.82) !important;
    border-bottom-color: rgba(139, 92, 246, 0.06) !important;
}

/* Nav Links — Morphing Pill Style */
.main-menu .nav-link {
    color: #475569 !important;
    font-family: var(--font-display) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    padding: 8px 18px !important;
    border-radius: var(--radius-full);
    transition: var(--transition-base) !important;
    position: relative;
    overflow: hidden;
}

[data-bs-theme="dark"] .main-menu .nav-link {
    color: #94a3b8 !important;
}

.main-menu .nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2));
    opacity: 0;
    transform: scale(0.85);
    transition: var(--transition-base);
    z-index: -1;
}

.main-menu .nav-link:hover {
    color: var(--aurora-1) !important;
    transform: translateY(-1px);
}

.main-menu .nav-link:hover::before {
    opacity: 0.08;
    transform: scale(1);
}

.main-menu .nav-link.active {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.main-menu .nav-link.active::before {
    opacity: 1;
    transform: scale(1);
}

.main-menu .nav-link.active {
    box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.2);
}

/* Auth Buttons in Header */
.second-header .btn-custom-filled,
.second-header .btn-custom-outline {
    font-family: var(--font-display) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    padding: 8px 20px !important;
    transition: var(--transition-base) !important;
    letter-spacing: -0.01em;
}

/* Search Input */
.header-search-form .search-wrapper {
    background: var(--surface-sunken) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-full) !important;
    padding: 6px 12px !important;
    transition: var(--transition-base);
}

.header-search-form .search-wrapper:focus-within {
    background: var(--surface-card) !important;
    border-color: var(--aurora-1) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), var(--shadow-md) !important;
    transform: scale(1.02);
}

[data-bs-theme="dark"] .header-search-form .search-wrapper {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
}

.header-search-form .search-input {
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   4. PREMIUM BUTTONS — AURORA GRADIENT SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

.btn-custom-filled, .btn-premium, .btn-primary {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    background: linear-gradient(135deg, var(--theme-button-color, var(--aurora-1)) 0%, var(--theme-button-hover-color, var(--aurora-2)) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 28px !important;
    box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.35) !important;
    transition: var(--transition-base) !important;
    position: relative;
    overflow: hidden;
    letter-spacing: -0.01em;
}

/* Shimmer highlight on hover */
.btn-custom-filled::after, .btn-premium::after, .btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--ease-out-expo);
}

.btn-custom-filled:hover::after, .btn-premium:hover::after, .btn-primary:hover::after {
    left: 120%;
}

.btn-custom-filled:hover, .btn-premium:hover, .btn-primary:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 16px 40px -8px rgba(99, 102, 241, 0.45) !important;
    color: #ffffff !important;
}

.btn-custom-filled:active, .btn-premium:active, .btn-primary:active {
    transform: translateY(-1px) scale(0.99) !important;
}

/* Outline Variant */
.btn-custom-outline, .btn-premium-outline, .btn-outline-primary {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    background: transparent !important;
    border: 2px solid var(--theme-button-color, var(--aurora-1)) !important;
    color: var(--theme-button-color, var(--aurora-1)) !important;
    border-radius: var(--radius-full) !important;
    padding: 10px 26px !important;
    transition: var(--transition-base) !important;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

.btn-custom-outline:hover, .btn-premium-outline:hover {
    background: linear-gradient(135deg, var(--theme-button-color, var(--aurora-1)), var(--theme-button-hover-color, var(--aurora-2))) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px -6px rgba(99, 102, 241, 0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   5. CARDS — DEPTH & GLASS SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

.card, .card-widget, .fixture-widget, .poll-widget {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-base);
    overflow: hidden;
    position: relative;
}

/* Subtle gradient border glow on hover */
.card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0), rgba(139, 92, 246, 0), rgba(236, 72, 153, 0));
    z-index: -1;
    transition: var(--transition-base);
    opacity: 0;
}

.card:hover::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06), rgba(236, 72, 153, 0.04));
    opacity: 1;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 20px 24px !important;
    font-family: var(--font-display) !important;
}

/* Block Title Divider — Gradient Accent */
.block-title-div {
    border-left: 4px solid transparent !important;
    border-image: linear-gradient(180deg, var(--aurora-1), var(--aurora-4)) 1 !important;
    padding-left: 18px;
    margin-bottom: 28px;
    position: relative;
}

.block-title-div h4 {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.025em !important;
    margin: 0;
    text-transform: uppercase;
    background: linear-gradient(135deg, #0f172a, #334155) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-bs-theme="dark"] .block-title-div h4 {
    background: linear-gradient(135deg, #f1f5f9, #94a3b8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   6. HERO SECTION — IMMERSIVE CINEMATIC BLOCK
   ═══════════════════════════════════════════════════════════════════════════════ */

.community-hero {
    background: linear-gradient(150deg, #0c0a2a 0%, #1a1052 35%, #0f0d30 70%, #090726 100%) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    box-shadow: 
        0 40px 80px -20px rgba(0, 0, 0, 0.4),
        0 0 80px -20px rgba(99, 102, 241, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    padding: 80px 64px !important;
    position: relative;
    overflow: hidden;
}

/* Animated particle dots */
.community-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(139, 92, 246, 0.3), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(99, 102, 241, 0.2), transparent),
        radial-gradient(1px 1px at 60% 20%, rgba(168, 85, 247, 0.3), transparent),
        radial-gradient(2px 2px at 80% 50%, rgba(236, 72, 153, 0.15), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(99, 102, 241, 0.2), transparent),
        radial-gradient(1px 1px at 70% 90%, rgba(139, 92, 246, 0.2), transparent);
    background-size: 300px 300px;
    animation: particle-float 20s linear infinite;
    opacity: 0.6;
}

/* Aurora glow behind hero */
.community-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, rgba(99, 102, 241, 0.05) 40%, transparent 70%);
    animation: hero-aurora-pulse 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes particle-float {
    0% { background-position: 0 0; }
    100% { background-position: 300px 300px; }
}

@keyframes hero-aurora-pulse {
    0% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    50% { transform: scale(1.2) translate(-5%, 5%); opacity: 0.9; }
    100% { transform: scale(0.9) translate(3%, -3%); opacity: 0.5; }
}

.hero-welcome-text {
    font-family: var(--font-display) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    color: var(--aurora-3) !important;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.hero-heading {
    font-family: var(--font-display) !important;
    font-size: 3.8rem !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 40%, #a78bfa 70%, #e879f9 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 200% auto;
    animation: text-shimmer 6s ease-in-out infinite alternate;
    position: relative;
    z-index: 2;
}

@keyframes text-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 100% center; }
}

.hero-desc {
    color: #94a3b8 !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    position: relative;
    z-index: 2;
}

/* Hero Swiper */
.hero-swiper {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.1) !important;
    position: relative;
    z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   7. ANNOUNCEMENT CARDS — FLOATING GLASS PANELS
   ═══════════════════════════════════════════════════════════════════════════════ */

.card-announcement {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-base);
    overflow: hidden;
}

.card-announcement:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-xl) !important;
    border-color: rgba(99, 102, 241, 0.12) !important;
}

.card-announcement .badge-category {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06)) !important;
    color: var(--aurora-1) !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.5px;
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-xs);
    padding: 4px 10px !important;
}

.card-announcement .card-body {
    padding: 24px 28px !important;
}

.card-announcement h5 a {
    color: #0f172a !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    transition: var(--transition-base) !important;
}

[data-bs-theme="dark"] .card-announcement h5 a {
    color: #f1f5f9 !important;
}

.card-announcement h5 a:hover {
    color: var(--aurora-1) !important;
}

/* Image zoom on card hover */
.zoom-img-container img {
    transition: transform 0.8s var(--ease-out-expo) !important;
}
.card-announcement:hover .zoom-img-container img {
    transform: scale(1.08);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   8. CULTURE QUOTE CARD — ELEGANT ACCENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.culture-quote-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(168, 85, 247, 0.02) 50%, rgba(236, 72, 153, 0.02) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.08) !important;
    border-radius: var(--radius-lg) !important;
    padding: 36px !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-base);
}

.culture-quote-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--aurora-1), var(--aurora-4), var(--aurora-5));
    border-radius: 4px;
}

.culture-quote-card:hover {
    border-color: rgba(99, 102, 241, 0.15) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
}

.culture-quote-icon {
    color: rgba(99, 102, 241, 0.1) !important;
    font-size: 4rem !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   9. BROADCAST HUB — IMMERSIVE RADIO & CHAT DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.unified-hub-card {
    border-radius: var(--radius-xl) !important;
    background: linear-gradient(150deg, #0d0a2e 0%, #141035 40%, #0f0c28 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    box-shadow: 
        0 30px 70px -15px rgba(0, 0, 0, 0.45),
        0 0 60px -15px rgba(99, 102, 241, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    overflow: hidden;
    position: relative;
}

/* Animated gradient border */
.unified-hub-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), transparent 40%, transparent 60%, rgba(168, 85, 247, 0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.hub-left-pane {
    background: transparent !important;
}

.hub-right-pane {
    background: rgba(7, 8, 15, 0.3) !important;
}

/* Glowing Orbs */
.glow-bg-1 {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%) !important;
    animation: glow-float-1 10s ease-in-out infinite alternate;
}

.glow-bg-2 {
    background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%) !important;
    animation: glow-float-2 12s ease-in-out infinite alternate;
}

@keyframes glow-float-1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 20px) scale(1.15); }
}

@keyframes glow-float-2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-20px, -30px) scale(1.1); }
}

/* Live Badge */
.live-status-badge {
    background: rgba(244, 63, 94, 0.1) !important;
    color: #fb7185 !important;
    border: 1px solid rgba(244, 63, 94, 0.15) !important;
    font-family: var(--font-display) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    padding: 6px 16px !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
}

.live-dot-pulse {
    width: 8px;
    height: 8px;
    background: #f43f5e;
    border-radius: 50%;
    animation: live-pulse-glow 1.5s ease-in-out infinite;
}

@keyframes live-pulse-glow {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.6); }
    50% { transform: scale(1); box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

/* Listener Badge */
.current-listeners-badge {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-family: var(--font-display) !important;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(8px);
}

/* Vinyl Display */
.vinyl-display-wrapper {
    position: relative;
    width: 220px !important;
    height: 220px !important;
}

.vinyl-outer {
    width: 200px !important;
    height: 200px !important;
    border: 4px solid rgba(139, 92, 246, 0.15) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(99, 102, 241, 0.08),
        inset 0 0 20px rgba(139, 92, 246, 0.05) !important;
}

.vinyl-placeholder {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)) !important;
}

.tonearm-needle {
    width: 90px !important;
    height: 90px !important;
    top: -8px !important;
    right: -15px !important;
    transform-origin: 75px 10px !important;
}

.vinyl-playing .tonearm-needle {
    transform: rotate(26deg) !important;
}

/* Show Info */
.show-title-text {
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.show-host-text .host-pill {
    background: rgba(99, 102, 241, 0.08) !important;
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
    color: var(--aurora-3) !important;
    font-family: var(--font-display) !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--radius-full);
}

/* Play Button */
.hub-play-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    border: none !important;
    background: linear-gradient(135deg, var(--aurora-1) 0%, var(--aurora-2) 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.45);
    transition: var(--transition-base) !important;
    position: relative;
    overflow: hidden;
}

.hub-play-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aurora-1), var(--aurora-5));
    z-index: -1;
    opacity: 0;
    transition: var(--transition-base);
    animation: play-ring-rotate 3s linear infinite;
}

@keyframes play-ring-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hub-play-btn:hover::before {
    opacity: 1;
}

.hub-play-btn:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 12px 32px -4px rgba(99, 102, 241, 0.55);
}

.hub-play-btn i {
    font-size: 18px !important;
    z-index: 1;
}

/* EQ Waves */
.hub-eq-waves {
    opacity: 0.12;
    transition: opacity 0.4s ease;
}

.vinyl-playing .hub-eq-waves {
    opacity: 1;
}

.hub-wave {
    width: 4px !important;
    background: linear-gradient(180deg, #f43f5e 0%, var(--aurora-1) 50%, var(--aurora-4) 100%) !important;
    border-radius: var(--radius-full) !important;
}

/* Volume */
.volume-hub-slider {
    background: rgba(255,255,255,0.1) !important;
}
.volume-hub-slider::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--aurora-1), var(--aurora-3)) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* Chat Room */
.chat-header {
    background: rgba(13, 10, 46, 0.5) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.06) !important;
    backdrop-filter: blur(12px);
}

.chat-messages-container {
    background: rgba(7, 8, 15, 0.2) !important;
}

.msg-bubble {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 4px 18px 18px 18px !important;
    padding: 12px 16px !important;
    max-width: 88% !important;
    backdrop-filter: blur(4px);
}

.chat-message-item.is-member-msg .msg-bubble {
    background-color: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
}

.chat-message-item.is-admin-msg .msg-bubble {
    background-color: rgba(244, 63, 94, 0.1) !important;
    border-color: rgba(244, 63, 94, 0.15) !important;
}

.msg-sender-name {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
}

/* Chat Footer */
.chat-footer-form {
    background: rgba(7, 8, 15, 0.45) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.06) !important;
    padding: 18px 24px !important;
    backdrop-filter: blur(8px);
}

.chat-footer-form .form-control {
    background-color: rgba(7, 8, 15, 0.5) !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 20px !important;
    color: #f3f4f6 !important;
    font-family: var(--font-body) !important;
    transition: var(--transition-base) !important;
}

.chat-footer-form .form-control:focus {
    border-color: var(--aurora-1) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12) !important;
}

/* Quick message buttons */
.quick-messages-bar {
    background: rgba(7, 8, 15, 0.3) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.04) !important;
}

.quick-msg-btn {
    font-family: var(--font-display) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
    border-radius: var(--radius-full) !important;
    padding: 4px 12px !important;
    transition: var(--transition-base) !important;
}

.quick-msg-btn:hover {
    background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2)) !important;
    border-color: transparent !important;
    color: white !important;
    transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   10. SIDEBAR WIDGETS — GLASS DEPTH PANELS
   ═══════════════════════════════════════════════════════════════════════════════ */

.card-widget .card-header {
    background: linear-gradient(135deg, var(--aurora-1) 0%, var(--aurora-2) 100%) !important;
    border: none !important;
    padding: 18px 24px !important;
    font-family: var(--font-display) !important;
    position: relative;
    overflow: hidden;
}

/* Shimmer overlay on widget headers */
.card-widget .card-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: widget-shimmer 5s ease-in-out infinite;
}

@keyframes widget-shimmer {
    0%, 100% { left: -100%; }
    50% { left: 200%; }
}

.schedule-item {
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: var(--transition-base);
}

.schedule-item:hover {
    background: rgba(99, 102, 241, 0.03);
    padding-left: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   11. FLOATING RADIO PLAYER — PREMIUM GLASS WIDGET
   ═══════════════════════════════════════════════════════════════════════════════ */

.player-toggle-btn {
    background: linear-gradient(135deg, var(--aurora-1) 0%, var(--aurora-2) 100%) !important;
    box-shadow: 0 8px 30px -4px rgba(99, 102, 241, 0.4);
}

.player-toggle-btn:hover {
    box-shadow: 0 12px 40px -4px rgba(99, 102, 241, 0.55) !important;
    transform: scale(1.1) !important;
}

.pulse-ring {
    border-color: rgba(99, 102, 241, 0.4) !important;
}

.player-expanded-card {
    background: var(--surface-overlay) !important;
    backdrop-filter: blur(24px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-glow) !important;
    box-shadow: var(--shadow-xl) !important;
}

[data-bs-theme="dark"] .player-expanded-card {
    background: rgba(13, 10, 46, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
}

.play-btn {
    background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2)) !important;
    box-shadow: 0 6px 20px -4px rgba(99, 102, 241, 0.4) !important;
    transition: var(--transition-base) !important;
}

.play-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 10px 28px -4px rgba(99, 102, 241, 0.5) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   12. FOOTER — DEEP SPACE GRADIENT
   ═══════════════════════════════════════════════════════════════════════════════ */

#footer.footer-dark {
    background: linear-gradient(180deg, #0a0820 0%, #070615 100%) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.06) !important;
    padding: 80px 0 40px !important;
    position: relative;
    overflow: hidden;
}

/* Footer Aurora */
#footer.footer-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--aurora-3), var(--aurora-5), transparent);
    opacity: 0.4;
}

.footer-widget-title {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.02em;
}

.footer-links li a {
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: var(--transition-base) !important;
    padding: 3px 0;
}

.footer-links li a:hover {
    transform: translateX(6px) !important;
    color: var(--aurora-3) !important;
}

.footer-links li a i {
    transition: transform 0.3s var(--ease-spring) !important;
}

.footer-links li a:hover i {
    transform: translateX(3px) !important;
}

/* Footer Social Icons */
#footer .footer-social a {
    transition: var(--transition-base) !important;
}

#footer .footer-social a:hover {
    background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.35) !important;
}

/* Footer Contact Icons */
#footer .contact-icon-box {
    background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2)) !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition-base) !important;
}

#footer .footer-contact li:hover .contact-icon-box {
    transform: rotate(8deg) scale(1.08) !important;
    box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.35) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   13. SEO SECTION (Bottom of Index) — PREMIUM INFO BLOCK
   ═══════════════════════════════════════════════════════════════════════════════ */

section.bg-white.py-5.mt-5.border-top.shadow-sm {
    background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--surface-bg) 100%) !important;
    border-top: 1px solid var(--border-subtle) !important;
    box-shadow: inset 0 1px 0 rgba(99, 102, 241, 0.05) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    position: relative;
}

[data-bs-theme="dark"] section.bg-white.py-5.mt-5.border-top.shadow-sm {
    background: linear-gradient(135deg, var(--surface-sunken) 0%, #0a0820 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   14. GLOBAL MICRO-INTERACTIONS & TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Smooth page entrance */
main#content {
    animation: page-fade-in 0.6s var(--ease-out-expo) forwards;
}

@keyframes page-fade-in {
    from { 
        opacity: 0; 
        transform: translateY(12px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Staggered card entrance */
.card-announcement:nth-child(1) { animation: card-rise 0.5s 0.1s var(--ease-out-expo) both; }
.card-announcement:nth-child(2) { animation: card-rise 0.5s 0.2s var(--ease-out-expo) both; }
.card-announcement:nth-child(3) { animation: card-rise 0.5s 0.3s var(--ease-out-expo) both; }
.card-announcement:nth-child(4) { animation: card-rise 0.5s 0.4s var(--ease-out-expo) both; }

@keyframes card-rise {
    from { 
        opacity: 0; 
        transform: translateY(24px) scale(0.97); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Image hover parallax feel */
.zoom-img-container {
    overflow: hidden;
    position: relative;
}

.zoom-img-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.03) 100%);
    pointer-events: none;
    transition: var(--transition-base);
}

.card-announcement:hover .zoom-img-container::after {
    background: linear-gradient(180deg, transparent 30%, rgba(99, 102, 241, 0.05) 100%);
}

/* General Link Styling */
a {
    transition: color 0.25s var(--ease-out-expo) !important;
}

/* Input focus rings */
input:focus, 
textarea:focus, 
select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   15. RESPONSIVE REFINEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .community-hero {
        padding: 48px 28px !important;
        border-radius: var(--radius-lg) !important;
    }
    
    .hero-heading {
        font-size: 2.4rem !important;
    }
    
    .culture-quote-card {
        padding: 24px !important;
    }
}

@media (max-width: 575.98px) {
    .community-hero {
        padding: 36px 20px !important;
        border-radius: var(--radius-md) !important;
    }
    
    .hero-heading {
        font-size: 1.9rem !important;
    }
    
    .hero-desc {
        font-size: 0.95rem !important;
    }
    
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .card, .card-widget {
        border-radius: var(--radius-md) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   16. WEATHER WIDGET OVERRIDE
   ═══════════════════════════════════════════════════════════════════════════════ */

.weather-widget-mini {
    font-family: var(--font-display) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   17. EVENTS WIDGET — SWIPER CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.swiper-slide .card {
    transition: var(--transition-base) !important;
}

.swiper-slide .card:hover {
    transform: translateY(-4px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   18. UTILITY CLASSES FOR PREMIUM FEEL
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Gradient Text Helper */
.text-gradient {
    background: linear-gradient(135deg, var(--aurora-1), var(--aurora-4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glass surface helper */
.glass {
    background: var(--surface-overlay);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid var(--border-subtle);
}

/* Glow ring helper */
.ring-glow {
    box-shadow: var(--shadow-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   19. AGGRESSIVE GLOBAL OVERRIDES (THE "NO BOOTSTRAP LEFT BEHIND" POLICY)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Global Premium Button Overrides */
.btn-primary,
.btn-danger,
.btn-success,
.btn-info,
.btn-warning,
.btn-secondary {
    border-radius: 50px !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 0.65rem 1.5rem !important;
    border: none !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary::after,
.btn-danger::after,
.btn-success::after,
.btn-info::after,
.btn-warning::after,
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(255,255,255,0.15), transparent);
    z-index: -1;
    border-radius: inherit;
}

/* Primary Button to Aurora Indigo */
.btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}
.btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5) !important;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}

/* Danger Button to Aurora Ruby */
.btn-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3) !important;
}
.btn-danger:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(244, 63, 94, 0.5) !important;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
}

/* Secondary Button to Glass Dark */
.btn-secondary {
    background: #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.3) !important;
}
.btn-secondary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.5) !important;
    background: #0f172a !important;
}

/* Input Fields & Forms */
.form-control, .form-select {
    border-radius: 12px !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    padding: 0.75rem 1.25rem !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    font-family: var(--font-body) !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

.form-control:focus, .form-select:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15), inset 0 2px 4px rgba(0,0,0,0.02) !important;
    background: #fff !important;
}

/* Fallback Card Styling for Any Remaining Widget */
.widget-body, .widget-content, aside .card {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05) !important;
    overflow: hidden;
}

/* Global Pagination */
.pagination .page-item .page-link {
    border-radius: 10px !important;
    margin: 0 4px;
    border: none !important;
    color: #64748b;
    font-weight: 700;
    transition: all 0.3s ease;
    background: rgba(139, 92, 246, 0.05);
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.pagination .page-item .page-link:hover:not(.active) {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    transform: translateY(-2px);
}