@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800&display=swap');

    :root {
        --rm-lila: #a73fdc;
        --rm-lila-dark: #8e24aa;
        --rm-lila-soft: #f4e8fb;
        --rm-lila-ultra-soft: #fcfaff;
        --rm-glass-bg: rgba(255, 255, 255, 0.15);
        --btn-radius: 99px;
    }

    .barlow-bold { font-family: 'Barlow', sans-serif; font-weight: 800; }
    .barlow { font-family: 'Barlow', sans-serif; font-weight: 700; }

    /* CORE HERO STYLES */
    .portal-hero-compact {
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(142, 36, 170, 0.2);
    }

    .portal-hero-gradient {
        background: radial-gradient(circle at top right, #9c27b0, #7b1fa2), linear-gradient(135deg, #a73fdc 0%, #fa1dab 100%);
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .portal-hero-gradient::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('https://www.transparenttextures.com/patterns/cubes.png');
        opacity: 0.1;
        pointer-events: none;
    }

    .portal-hero-title {
        font-size: 3rem;
        letter-spacing: -1px;
        line-height: 1;
        color: #fff !important;
    }

    .portal-hero-subtitle {
        font-size: 1.15rem;
        color: rgba(255,255,255,0.9);
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* SEARCH COMPONENT: GLASSMORPHISM */
    .portal-search-glass {
        background: var(--rm-glass-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 99px;
        transition: all 0.3s ease;
    }
    
    .portal-search-glass:focus-within {
        background: rgba(255, 255, 255, 0.25);
        box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
        transform: scale(1.01);
    }

    .portal-search-input {
        height: 54px;
        font-size: 1.1rem;
        color: #fff !important;
    }
    
    .portal-search-input::placeholder { color: rgba(255,255,255,0.6); }

    .btn-portal-explore {
        background: #fff;
        color: var(--rm-lila);
        border: none;
        border-radius: 99px;
        font-size: 1rem;
        letter-spacing: 1px;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .btn-outline-lila:hover {
        background-color: var(--rm-lila);
        color: #fff;
    }

    .badge-lila-soft {
        background-color: var(--rm-lila-soft);
        color: var(--rm-lila-dark);
    }

    .btn-portal-explore:hover {
        background: var(--rm-lila-soft);
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }

    .hero-mini-tag {
        background: rgba(255,255,255,0.1);
        color: #fff !important;
        padding: 5px 15px;
        border-radius: 99px;
        font-size: 0.8rem;
        font-weight: 600;
        border: 1px solid rgba(255,255,255,0.2);
        transition: all 0.2s;
        text-decoration: none !important;
    }
    
    .hero-mini-tag:hover {
        background: rgba(255,255,255,0.2);
        transform: translateY(-2px);
    }

    /* QUICK NAV MODERN BUTTONS */
    .gap-nav { gap: 12px; }
    
    .nav-btn-modern {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        border-radius: 14px;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid transparent;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        min-width: 140px;
    }

    .nav-icon {
        font-size: 1.3rem;
        margin-right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-text {
        font-weight: 700;
        font-size: 0.95rem;
    }

    .btn-lila { background: #f8f0fc; color: #a73fdc; border-color: #f0e0f8; }
    .btn-lila:hover { background: #a73fdc; color: #fff; }
    
    .btn-primary-gradient { background: #f0f7ff; color: #007bff; border-color: #e0efff; }
    .btn-primary-gradient:hover { background: #007bff; color: #fff; }
    
    .btn-warning-gradient { background: #fffcf0; color: #ff9800; border-color: #fff8e0; }
    .btn-warning-gradient:hover { background: #ff9800; color: #fff; }
    
    .btn-info-gradient { background: #f0fbff; color: #00bcd4; border-color: #e0f8ff; }
    .btn-info-gradient:hover { background: #00bcd4; color: #fff; }
    
    .btn-danger-gradient { background: #fff1f0; color: #f44336; border-color: #ffe0e0; }
    .btn-danger-gradient:hover { background: #f44336; color: #fff; }
    
    .btn-orange-gradient { background: #fff5f0; color: #ff5500; border-color: #ffe0d0; }
    .btn-orange-gradient:hover { background: #ff5500; color: #fff; }

    /* CONTENT STYLING */
    .header-icon-circle {
        width: 44px; height: 44px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
    }
    
    .bg-danger-soft { background: #fff1f0; }
    .rounded-xl { border-radius: 20px !important; }
    .shadow-xs { box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
    
    .activity-mini-card { transition: all 0.2s; }
    .activity-mini-card:hover { transform: translateY(-3px); border-color: var(--rm-lila) !important; background: #faf5fc; }

    .play-btn-circle-glow {
        width: 64px; height: 64px;
        background: var(--rm-lila);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.8rem;
        box-shadow: 0 0 25px rgba(167, 63, 220, 0.6);
        transition: all 0.3s;
    }
    
    .portal-video-card:hover .play-btn-circle-glow { transform: scale(1.15); }
    
    .portal-user-thumb { aspect-ratio: 1/1; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
    .thumb-label-mini {
        position: absolute; bottom: 0; left: 0; right: 0;
        background: rgba(0,0,0,0.6); color: #fff;
        font-size: 8px; padding: 2px 0; font-weight: 700;
        text-align: center;
    }

    .shadow-text-sm { text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
    .shadow-text-xs { text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
    .no-focus:focus { box-shadow: none !important; color: #fff; }
    .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

    /* TICKER ANIMATIONS */
    .portal-activity-ticker {
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .ticker-item {
        transition: all 0.5s ease;
    }
    
    .ticker-item.exit {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    
    .ticker-item.enter {
        animation: tickerEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    
    @keyframes tickerEnter {
        from { opacity: 0; transform: translateY(-30px) scale(0.9); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .ticker-overlay-bottom {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
        pointer-events: none;
        z-index: 2;
    }

    /* COMMUNITY ANIMATIONS */
    .community-item {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .community-item.fade-out {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    
    .community-item.fade-in {
        animation: communityFadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    
    @keyframes communityFadeIn {
        from { opacity: 0; transform: scale(0.5) rotate(5deg); }
        to { opacity: 1; transform: scale(1) rotate(0); }
    }