* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            color: #6b7280;
            line-height: 1.6;
            padding-top: 0;
            overflow-x: hidden;
        }

        /* ====== NAVBAR ====== */
        .navbar { background: rgba(255,255,255,0.97); box-shadow: 0 1px 0 #e5e7eb; backdrop-filter: blur(8px); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
        
        .nav-container { width: 100%; padding: 0; display: flex; align-items: center; }
        .logo-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
        .mobile-toggle {
            display: flex; align-items: center; justify-content: center;
            background: transparent; border: none; font-size: 1.2rem; cursor: pointer;
            color: #1a1a1a; width: 56px; height: 56px; flex-shrink: 0;
        }
        .mobile-toggle:hover { background: rgba(0,0,0,0.06); }
        
        .navbar.sidebar-open .logo-name { color: #1a1a1a !important; }
        .logo { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; font-weight: 700; padding-left: 4px; flex-shrink: 0; }
        .logo-name { color: #1a1a1a; }
        
        
        
        @media (max-width: 1024px) { .logo { padding-left: 6px; } }

        /* Login/Signup Modal */
        .auth-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10002;
            justify-content: center;
            align-items: center;
        }
        
        .auth-modal.active {
            display: flex;
        }
        
        .auth-container {
            background: white;
            border-radius: 16px;
            padding: 2rem 2.5rem;
            max-width: 400px;
            width: 90%;
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            max-height: 90vh;
            overflow-y: auto;
        }
            
        .forgot-password-section {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .forgot-password-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: none;
            border: none;
            color: #6b7280;
            font-size: 0.85rem;
            cursor: pointer;
            padding: 0.5rem 0;
            font-weight: 500;
            width: 100%;
        }

        .forgot-password-btn:hover {
            color: #1a1a1a;
        }

        .forgot-password-btn svg {
            transition: transform 0.3s;
        }

        .forgot-password-btn:hover svg {
            transform: translateX(3px);
        }
        
        .auth-close {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #6b7280;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.3s;
        }
        
        .auth-close:hover {
            background: #f3f4f6;
        }
        
        .back-to-login {
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            z-index: 10;
        }
        
        .back-to-login button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: none;
            border: none;
            color: #6b7280;
            font-size: 0.9rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .back-to-login button:hover {
            background: #f3f4f6;
            color: #1a1a1a;
        }
        
        .back-to-login button svg {
            transition: transform 0.3s;
        }
        
        .back-to-login button:hover svg {
            transform: translateX(-3px);
        }
        
        .auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; text-align: left; }
            .auth-logo img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
            .auth-logo-text { display: flex; flex-direction: column; }
            .auth-logo h3 { font-size: 1.1rem; color: #1a1a1a; margin-bottom: 0.1rem; }
            .auth-logo p { color: #6b7280; font-size: 0.8rem; }
        
        .auth-tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.25rem;
            border-bottom: 2px solid #e5e7eb;
        }
        
        .auth-tab {
            flex: 1;
            padding: 0.6rem;
            background: none;
            border: none;
            font-size: 0.95rem;
            font-weight: 600;
            color: #6b7280;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: all 0.3s;
        }
        
        .auth-tab.active {
            color: #1a1a1a;
            border-bottom-color: #1a1a1a;
        }
        
        .auth-form {
            display: none;
        }
        
        .auth-form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 0.75rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.4rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: #1a1a1a;
        }
        
        .form-group input {
            width: 100%;
            padding: 0.65rem;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.9rem;
            transition: border-color 0.3s;
        }
        
        .form-group select {
            width: 100%;
            padding: 0.65rem;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.9rem;
            color: #1a1a1a;
            background: white;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #1a1a1a;
        }

        /* suppress browser default :invalid red border/shadow */
        .form-group input:invalid,
        .form-group select:invalid {
            box-shadow: none;
            border-color: #e5e7eb;
        }

        /* ensure hidden attribute always wins over any display class */
        [hidden] { display: none !important; }

        /* 6-box OTP input */
        .otp-boxes {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin: 0.5rem 0 1rem;
        }
        .otp-box {
            width: 44px;
            height: 44px;
            text-align: center;
            font-size: 1.4rem;
            font-weight: 700;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            outline: none;
            transition: border-color 0.2s, background 0.2s;
            caret-color: transparent;
            color: #1a1a1a;
            background: #fff;
            padding: 0;
        }
        .otp-box:focus { border-color: #1a1a1a; }
        .otp-box.filled { border-color: #1a1a1a; background: #f9fafb; }
        
        .form-group small {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 0.25rem;
            display: block;
        }
        
        .btn-auth {
            width: 100%;
            padding: 0.7rem;
            background: #1a1a1a;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 0.75rem;
        }
        
        .btn-auth:hover {
            background: #374151;
        }
        
        .auth-divider {
            text-align: center;
            margin: 1rem 0;
            position: relative;
        }
        
        .auth-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #e5e7eb;
        }
        
        .auth-divider span {
            background: white;
            padding: 0 1rem;
            position: relative;
            color: #6b7280;
            font-size: 0.8rem;
        }
        
        .btn-google {
            width: 100%;
            padding: 0.7rem;
            background: white;
            color: #1a1a1a;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .btn-google:hover {
            background: #f9fafb;
            border-color: #1a1a1a;
        }
        
        .otp-section {
            display: none;
        }
        
        .otp-section.active {
            display: block;
        }

        .otp-msg {
            display: none;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            margin-bottom: 0.5rem;
        }
        .otp-msg.success { display: block; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
        .otp-msg.error   { display: block; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; }

        .btn-primary {
            background: #1a1a1a;
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.3s;
        }

        .btn-primary:hover {
            background: #374151;
        }

        /* Hamburger — always visible, 56px wide to match sidebar icon column */
        .logo {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 1.25rem;
            font-weight: 700;
            padding-left: 4px;
            flex-shrink: 0;
            background: transparent;
        }

        /* Mobile: sidebar slides in as full overlay drawer */
        @media (max-width: 1024px) {
            .left-sidebar {
                display: flex !important;
                top: 0;
                height: 100vh;
                width: 230px !important;
                transform: translateX(-100%);
                transition: transform 0.26s cubic-bezier(0.4,0,0.2,1) !important;
            }
            .left-sidebar.mobile-open { transform: translateX(0); }
            .left-sidebar:hover { width: 230px !important; }
            .left-sidebar .sidebar-item .sidebar-label,
            .left-sidebar .sidebar-bottom-info { opacity: 1 !important; }
        }

        /* Hero Section with Slider */
        .hero {
            position: relative;
            overflow: hidden;
        }

        .hero-slider {
            position: relative;
            width: 100%;
            height: 650px;
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            display: none;
            transition: opacity 0.4s ease-in-out;
        }

        .slide.active {
            opacity: 1;
            display: block;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slide-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(55, 65, 81, 0.7) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            padding: 2rem;
            position: relative;
            z-index: 2;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: white;
        }

        .hero p {
            font-size: 1.25rem;
            color: #d1d5db;
            margin-bottom: 2rem;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-secondary {
            background: white;
            color: #1a1a1a;
            padding: 0.75rem 2rem;
            border-radius: 6px;
            border: 2px solid white;
            cursor: pointer;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .btn-secondary:hover {
            background: transparent;
            color: white;
            transform: translateY(-2px);
        }

        .slider-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 3;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background 0.3s;
        }

        .dot.active {
            background: white;
        }

        /* Stats Section */
        .stats {
            background: #f9fafb;
            padding: 3rem 2rem;
        }

        .stats-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: center;
        }

        .stat-item h3 {
            font-size: 2.5rem;
            color: #1e3a5f;
            margin-bottom: 0.5rem;
        }

        .stat-item p {
            color: #6b7280;
            font-size: 1rem;
        }

        /* Courses Section */
        .courses {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-header h2 {
            font-size: 2.5rem;
            color: #1e3a5f;
            margin-bottom: 1rem;
        }

        .section-header p {
            color: #6b7280;
            font-size: 1.1rem;
        }

        .course-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }

        /* Tablet: 2 columns at 741px - 1200px */
        @media (max-width: 1200px) and (min-width: 741px) {
            .course-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile: 1 column below 740px */
        @media (max-width: 740px) {
            .course-grid {
                grid-template-columns: 1fr;
            }
        }

        .course-card {
            background: white;
            border-radius: 12px;
            overflow: visible;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 420px;
        }

        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }

        .course-image {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            object-fit: cover;
            margin: 1.5rem auto 0.75rem;
            border: 4px solid #f3f4f6;
        }

        .course-content {
            padding: 0.75rem 1.5rem 1.5rem;
            text-align: center;
        }

        .course-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: #1e3a5f;
            margin-bottom: 0.25rem;
        }

        .course-instructor {
            color: #6b7280;
            font-size: 0.85rem;
            margin-bottom: 0.75rem;
        }
        
        .course-description {
            color: #6b7280;
            font-size: 0.825rem;
            line-height: 1.5;
            margin-bottom: 0.75rem;
            min-height: 2.5em;
        }

        .course-meta {
            display: flex;
            gap: 1rem;
            margin-top: auto;
            padding-top: 1rem;
            padding-bottom: 0.75rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: #6b7280;
            font-size: 0.875rem;
        }

        .rating {
            color: #fbbf24;
        }

        .course-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid #e5e7eb;
            width: 100%;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        .price {
            font-size: 1.5rem;
            font-weight: bold;
            color: #1a1a1a;
        }

        .btn-enroll {
            background: #1a1a1a;
            color: white;
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.3s;
        }

        .btn-enroll:hover {
            background: #374151;
        }

        /* Features Section */
        .features {
            background: #f9fafb;
            padding: 4rem 2rem;
        }

        .features-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
            position: relative;
            overflow: hidden;
            height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }

        .feature-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2;
        }

        .feature-card:nth-child(1)::before {
            background-image: url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=400&h=300&fit=crop');
        }

        .feature-card:nth-child(2)::before {
            background-image: url('https://images.unsplash.com/photo-1571260899304-425eee4c7efc?w=400&h=300&fit=crop');
        }

        .feature-card:nth-child(3)::before {
            background-image: url('https://images.unsplash.com/photo-1501139083538-0139583c060f?w=400&h=300&fit=crop');
        }

        .feature-card:nth-child(4)::before {
            background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=300&fit=crop');
        }

        .feature-card h3,
        .feature-card p {
            position: relative;
            z-index: 3;
            color: white;
        }

        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 0.75rem;
        }

        /* Categories Section */
        .categories {
            padding: 4rem 2rem;
            background: white;
            overflow: hidden;
        }

        .categories-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .category-scroll-container {
            background: white;
            border-radius: 16px;
            padding: 3rem 0;
            margin-top: 3rem;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .category-grid {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .category-row {
            display: flex;
            gap: 1.5rem;
            animation: scrollLeft 40s linear infinite;
            width: max-content;
        }
        
        .category-row:nth-child(2) {
            animation: scrollRight 40s linear infinite;
        }
        
        @keyframes scrollLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-250px * 5 - 1.5rem * 5));
            }
        }
        
        @keyframes scrollRight {
            0% {
                transform: translateX(calc(-250px * 5 - 1.5rem * 5));
            }
            100% {
                transform: translateX(0);
            }
        }

        .category-card {
            background: #f9fafb;
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            height: 200px;
            min-width: 250px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }

        .category-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2;
        }

        .category-card:nth-child(1)::before {
            background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400&h=300&fit=crop');
        }

        .category-card:nth-child(2)::before {
            background-image: url('https://images.unsplash.com/photo-1561070791-2526d30994b5?w=400&h=300&fit=crop');
        }

        .category-card:nth-child(3)::before {
            background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=400&h=300&fit=crop');
        }

        .category-card:nth-child(4)::before {
            background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop');
        }

        .category-card:nth-child(5)::before {
            background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=400&h=300&fit=crop');
        }

        .category-card h3,
        .category-card p {
            position: relative;
            z-index: 3;
            color: white;
        }

        .category-card h3 {
            font-size: 1.25rem;
        }

        /* Instructors */
        .instructors {
            padding: 60px 32px;
            background: white;
        }

        .instructors-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .instructor-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 48px;
        }

        .instructor-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            height: 400px;
            position: relative;
        }

        .instructor-card:hover {
            transform: translateY(-8px);
        }

        .instructor-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .instructor-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(26, 26, 26, 0.9) 0%, rgba(26, 26, 26, 0.7) 70%, transparent 100%);
            padding: 30px 20px;
            text-align: center;
        }

        .instructor-card h3 {
            color: white;
            font-size: 24px;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .instructor-role {
            color: white;
            font-size: 16px;
            margin-bottom: 16px;
            font-weight: 400;
            opacity: 0.9;
        }

        .instructor-expertise {
            color: white;
            font-size: 14px;
            line-height: 1.8;
            opacity: 0.85;
        }

        /* Testimonials */
        .testimonials-section {
            background: #f9fafb;
            padding: 4rem 2rem;
        }

        .testimonials {
            max-width: 1200px;
            margin: 0 auto;
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .testimonial-text {
            color: #6b7280;
            font-style: italic;
            margin-bottom: 1.5rem;
            line-height: 1.8;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .author-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        .author-info h4 {
            color: #1e3a5f;
            font-size: 1rem;
            margin-bottom: 0.25rem;
        }

        .author-info p {
            color: #9ca3af;
            font-size: 0.875rem;
        }

        /* Success Stories */
        .success-stories {
            padding: 60px 32px;
            background: #f9fafb;
        }

        .success-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .story-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 48px;
        }

        .story-card {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .story-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .story-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }

        .story-info h4 {
            color: #1e3a5f;
            font-size: 16px;
            margin-bottom: 4px;
        }

        .story-info p {
            color: #9ca3af;
            font-size: 13px;
        }

        .story-text {
            color: #6b7280;
            line-height: 1.8;
            font-size: 14px;
        }

        /* Partners */
        .partners {
            padding: 60px 32px;
            background: white;
        }

        .partners-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .partner-logos {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 50px;
            flex-wrap: wrap;
            margin-top: 40px;
            filter: grayscale(100%);
            opacity: 0.6;
        }

        .partner-logos:hover {
            filter: grayscale(0%);
            opacity: 1;
        }

        .partner-logo {
            font-size: 32px;
            font-weight: bold;
            color: #6b7280;
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #1a1a1a 0%, #374151 100%);
            color: white;
            padding: 5rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .particle-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .cta-content {
            max-width: 700px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .cta-section h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: white;
        }

        .cta-section p {
            font-size: 1.25rem;
            color: #d1d5db;
            margin-bottom: 2rem;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Forgot Password Panel */
        .forgot-panel {
            display: none;
        }
        .forgot-panel.active {
            display: block;
        }
        .forgot-back {
            margin-bottom: 1rem;
        }
        .forgot-back button {
            background: none;
            border: none;
            color: #6b7280;
            font-size: 0.85rem;
            cursor: pointer;
            padding: 0.4rem 0;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s;
        }
        .forgot-back button:hover { color: #1a1a1a; }
        .forgot-back button svg { transition: transform 0.2s; }
        .forgot-back button:hover svg { transform: translateX(-3px); }
        .forgot-success {
            display: none;
            text-align: center;
            padding: 1.5rem 0 0.5rem;
        }
        .forgot-success .success-icon {
            width: 52px; height: 52px;
            border-radius: 50%;
            background: #f0fdf4;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1rem;
        }
        .forgot-success .success-icon svg { stroke: #166534; }
        .forgot-success h4 { font-size: 1rem; color: #1a1a1a; margin-bottom: 0.35rem; }
        .forgot-success p  { font-size: 0.82rem; color: #6b7280; line-height: 1.5; }

        /* Footer social icons */
        .footer-social {
            display: flex;
            gap: 0.6rem;
            margin-top: 1rem;
            flex-wrap: nowrap;
        }
        .footer-brand-info { flex: 1 1 auto; min-width: 0; }
        .footer-social a {
            width: 34px; height: 34px;
            border-radius: 8px;
            background: #e5e7eb;
            display: flex; align-items: center; justify-content: center;
            color: #6b7280;
            transition: background 0.2s, color 0.2s;
            text-decoration: none;
        }
        .footer-social a:hover { background: #1a1a1a; color: white; }
.footer-social a[aria-label="Instagram"]:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: white; }
.footer-social a[aria-label="X"]:hover { background: #000000; color: white; }
.footer-social a[aria-label="LinkedIn"]:hover { background: #0A66C2; color: white; }
.footer-social a[aria-label="YouTube"]:hover { background: #FF0000; color: white; }
.footer-social a[aria-label="Discord"]:hover { background: #5865F2; color: white; }
        .footer-social a svg { width: 16px; height: 16px; fill: currentColor; }

        /* Hide particle lines on tablet/mobile — keep solid bg gradient */
        @media (max-width: 1024px) {
            .particle-canvas { display: none; }
        }

        /* Footer */
        .footer {
            background: #f9fafb;
            color: #6b7280;
            padding: 3rem 2rem 1rem;
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
            padding: 0 2rem;
        }

        /* TABLET FOOTER (≤1024px): branding full-width row1, 3 link cols row2 */
        @media (max-width: 1024px) {
            .footer-container {
                grid-template-columns: repeat(3, 1fr);
            }
            .footer-container .footer-section:first-child {
                grid-column: 1 / -1;
                display: block;
            }
            .footer-container .footer-section:first-child .footer-social {
                margin-top: 1rem;
                flex-wrap: wrap;
            }
        }
        
        .footer-section {
            text-align: left;
        }
        
        .footer-section .logo {
            justify-content: flex-start;
        }

        .footer-section h4 {
            color: #1e3a5f;
            margin-bottom: 1rem;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 0.5rem;
        }

        .footer-section a {
            color: #6b7280;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-section a:hover {
            color: #1e3a5f;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid #e5e7eb;
            color: #9ca3af;
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 2rem;
            padding-right: 2rem;
        }

        /* Communities Section */
        .communities {
            padding: 60px 32px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-header-with-btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 48px;
        }

        .section-header-with-btn .section-header {
            margin-bottom: 0;
            text-align: left;
        }

        /* DESKTOP: 5-Column Grid */
        .community-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }

        /* Tablet: 3 columns */
        @media (max-width: 1024px) and (min-width: 601px) {
            .community-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Mobile: hide grid, show swipe */
        @media (max-width: 600px) {
            .community-grid {
                display: none;
            }
        }

        /* MOBILE: Swipe Container */
        .community-swipe-container {
            display: none;
            position: relative;
            height: 450px;
            overflow: hidden;
        }

        .community-swipe-track {
            display: flex;
            transition: transform 0.3s ease-out;
            height: 100%;
        }

        .community-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: grab;
            flex: 0 0 100%;
            display: flex;
            flex-direction: column;
        }

        .community-card:active {
            cursor: grabbing;
        }

        .community-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }

        .community-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .community-content {
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .community-title {
            font-size: 20px;
            font-weight: 600;
            color: #1e3a5f;
            margin-bottom: 10px;
        }

        .community-description {
            color: #6b7280;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 16px;
            flex-grow: 1;
        }

        .community-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
        }

        .community-members {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #9ca3af;
            font-size: 13px;
        }

        .community-type {
            background: #f3f4f6;
            color: #1e3a5f;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .btn-more {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #1a1a1a;
            color: white;
            padding: 10px 24px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn-more:hover {
            background: #374151;
        }

        .btn-more svg {
            transition: transform 0.3s;
        }

        .btn-more:hover svg {
            transform: translateX(5px);
        }

        /* Swipe indicator */
        .swipe-indicator {
            display: none;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #6b7280;
            text-align: center;
            z-index: 10;
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 16px;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .swipe-indicator.show {
            display: block;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        /* Challenges Section */
        .challenges {
            padding: 60px 32px;
            max-width: 1200px;
            margin: 0 auto;
            background: #f9fafb;
        }

        .challenges .community-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Tablet: 3 columns */
        @media (max-width: 1024px) and (min-width: 601px) {
            .challenges .community-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Mobile: hide grid, show swipe */
        @media (max-width: 600px) {
            .challenges .community-grid {
                display: none;
            }
        }

        /* Events Section */
        .events {
            padding: 60px 32px;
            max-width: 1200px;
            margin: 0 auto;
            background: white;
        }

        .event-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }

        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }

        .event-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .event-content {
            padding: 24px;
        }

        .event-date {
            display: inline-block;
            background: #1a1a1a;
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .event-title {
            font-size: 20px;
            font-weight: 600;
            color: #1e3a5f;
            margin-bottom: 10px;
        }

        .event-description {
            color: #6b7280;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 16px;
        }

        .event-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
        }

        .event-location {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #9ca3af;
            font-size: 13px;
        }

        .event-type {
            background: #f3f4f6;
            color: #1e3a5f;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        /* Video Modal */
        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10001;
            justify-content: center;
            align-items: center;
        }

        .video-modal.active {
            display: flex;
        }

        .video-container {
            position: relative;
            max-width: 900px;
            width: 90%;
        }

        .video-close {
            position: absolute;
            top: -40px;
            right: 0;
            background: white;
            border: none;
            font-size: 24px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1a1a1a;
        }

        /* Responsive */
        @media (max-width: 1200px) {
            
        }

        @media (max-width: 1024px) {
            
        }

        @media (max-width: 740px) {
            .auth-container {
                padding: 1rem 1.5rem;
                max-width: 350px;
            }

            .hero-slider {
                height: 450px;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 1rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .hero-buttons button {
                width: 100%;
                max-width: 300px;
            }

            .section-header h2 {
                font-size: 2rem;
            }

            /* MOBILE: Hide desktop grid, show swipe only on small phones */
            /* swipe container shown at ≤600px via separate rule below */

            .community-card {
                border-radius: 16px;
                margin: 0 12px;
            }

            .stats-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            
            .section-header-with-btn {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .cta-section h2 {
                font-size: 2rem;
            }
            
            .cta-section p {
                font-size: 1rem;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }

            .cta-buttons button {
                width: 100%;
                max-width: 360px;
            }

            /* challenges swipe moved to ≤600px rule */
        }

        /* Show swipe containers only on small phones */
        @media (max-width: 600px) {
            .community-swipe-container {
                display: block;
            }
            .challenges .community-swipe-container {
                display: block;
            }
        }
        
        @media (max-width: 480px) {
            .hero-slider {
                height: 400px;
            }
            
            .hero h1 {
                font-size: 1.5rem;
            }

            .hero p {
                font-size: 0.9rem;
            }
            
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-container .footer-section:first-child {
                grid-column: 1 / -1;
                flex-direction: column;
                align-items: flex-start;
            }
            .footer-container .footer-section:first-child .footer-social {
                margin-top: 0.75rem;
                flex-wrap: wrap;
            }
        }

        /* ============================================
           LEFT SIDEBAR — icon-only, hover expands, scroll + bottom avatar
           ============================================ */

        .left-sidebar {
            position: fixed;
            top: 56px;
            left: 0;
            width: 56px;
            height: calc(100vh - 56px);
            background: #fff;
            border-right: 1px solid #e5e7eb;
            z-index: 900;
            overflow: hidden;
            padding: 0;
            transition: width 0.26s cubic-bezier(0.4,0,0.2,1);
            box-shadow: 2px 0 6px rgba(0,0,0,0.04);
            display: flex;
            flex-direction: column;
        }

        .left-sidebar:hover { width: 230px; }

        /* Scrollable nav area */
        .sidebar-scroll-area {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 6px;
            scrollbar-width: thin;
            scrollbar-color: #d1d5db transparent;
        }

        .sidebar-scroll-area::-webkit-scrollbar { width: 3px; }
        .sidebar-scroll-area::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

        /* Nav item */
        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 9px 10px;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            color: #374151;
            font-size: 0.9rem;
            font-weight: 500;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
            overflow: hidden;
        }

        .sidebar-item:hover { background: #f3f4f6; color: #1a1a1a; }
        .sidebar-item.active { background: #eff2ff; color: #3b45cc; font-weight: 600; }

        /* Icon — outline SVG, no bg */
        .sidebar-item .sidebar-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #6b7280;
            transition: color 0.15s;
        }
        .sidebar-item .sidebar-icon svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
        }
        .sidebar-item:hover .sidebar-icon { color: #1a1a1a; }
        .sidebar-item.active .sidebar-icon { color: #3b45cc; }

        /* Label fades in on hover */
        .sidebar-item .sidebar-label {
            opacity: 0;
            transition: opacity 0.15s ease 0.05s;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .left-sidebar:hover .sidebar-item .sidebar-label { opacity: 1; }

        /* Expandable sidebar submenu (e.g. Startup > My Startup / My Techfest / My Applications)
           Renders as a flyout panel popped out to the RIGHT of the sidebar item,
           not an inline accordion. */
        .sidebar-item-group { position: relative; }
        .sidebar-item-parent { position: relative; }
        .sidebar-caret {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            padding: 0;
            color: #9ca3af;
            cursor: pointer;
            border-radius: 5px;
            opacity: 0;
            transition: opacity 0.15s ease 0.05s, background 0.15s;
        }
        .left-sidebar:hover .sidebar-caret { opacity: 1; }
        .sidebar-caret:hover { background: #e5e7eb; color: #1a1a1a; }
        .sidebar-caret svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
        /* caret points right by default (like a submenu arrow); rotates down when open */
        .sidebar-item-group.expanded .sidebar-caret svg,
        .sidebar-item-group:hover .sidebar-caret svg { transform: rotate(90deg); }

        .sidebar-item-group { position: relative; } /* anchor for the submenu's CSS-only fallback position below */
        .sidebar-submenu {
            position: absolute;
            left: 100%;
            top: 0;
            margin-left: 10px;
            min-width: 200px;
            background: #fff;
            border: 1px solid #eef0f3;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 1px;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-6px);
            pointer-events: none;
            transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
            z-index: 2000;
        }
        /* small arrow nub pointing back at the sidebar item */
        .sidebar-submenu::before {
            content: '';
            position: absolute;
            left: -5px;
            top: 14px;
            width: 10px;
            height: 10px;
            background: #fff;
            border-left: 1px solid #eef0f3;
            border-bottom: 1px solid #eef0f3;
            transform: rotate(45deg);
        }
        .sidebar-item-group:hover .sidebar-submenu,
        .sidebar-item-group.expanded .sidebar-submenu {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
            pointer-events: auto;
        }
        .sidebar-subitem {
            display: block;
            padding: 8px 12px;
            border-radius: 7px;
            color: #374151;
            font-size: 0.85rem;
            font-weight: 500;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s;
        }
        .sidebar-subitem:hover { background: #f3f4f6; color: #1a1a1a; }
        .sidebar-subitem.active { background: #eff2ff; color: #3b45cc; font-weight: 600; }
        /* When the sidebar itself is collapsed (icon-only, not hovered/pinned), the flyout
           should still work off of hovering the individual item group. On mobile (bottom-sheet
           style sidebar) fall back to a simple inline list instead of a side flyout, since
           there's no room to the right. */
        @media (max-width: 1024px) {
            .sidebar-submenu {
                position: static;
                left: auto; top: auto;
                box-shadow: none;
                border: none;
                background: transparent;
                padding: 2px 0 4px 34px;
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                visibility: visible;
                transform: none;
                pointer-events: auto;
                transition: max-height 0.22s ease, opacity 0.18s ease;
            }
            .sidebar-submenu::before { display: none; }
            .sidebar-item-group.expanded .sidebar-submenu {
                max-height: 220px;
                opacity: 1;
            }
            .sidebar-item-group:hover .sidebar-submenu { max-height: 0; opacity: 0; } /* no hover on touch */
            .sidebar-item-group.expanded:hover .sidebar-submenu { max-height: 220px; opacity: 1; }
        }

        /* Thin divider */
        .sidebar-divider {
            height: 1px;
            background: #f0f0f0;
            margin: 5px 4px;
        }

        /* Profile pinned at bottom of sidebar */
        .sidebar-bottom-profile {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 10px;
            border-top: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background 0.15s;
            overflow: hidden;
            white-space: nowrap;
        }

        .sidebar-bottom-profile:hover { background: #f9fafb; }

        .sidebar-bottom-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e5e7eb;
            flex-shrink: 0;
        }

        .sidebar-bottom-info {
            opacity: 0;
            transition: opacity 0.15s ease 0.05s;
            overflow: hidden;
        }

        .left-sidebar:hover .sidebar-bottom-info { opacity: 1; }

        .sidebar-bottom-name {
            font-size: 0.85rem;
            font-weight: 600;
            color: #1a1a1a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-bottom-sub {
            font-size: 0.72rem;
            color: #9ca3af;
        }

        /* Main content offset */
        .main-content-wrapper {
            margin-left: 56px;
            padding-top: 0;
            transition: margin-left 0.26s cubic-bezier(0.4,0,0.2,1);
        }

        /* When sidebar is pinned open, shift main content */
        .main-content-wrapper.sidebar-pinned {
            margin-left: 230px;
        }

        /* Mobile: overlay drawer */
        @media (max-width: 1024px) {
            .main-content-wrapper { margin-left: 0 !important; }
            .main-content-wrapper.sidebar-pinned { margin-left: 0 !important; }
        }

        /* Pinned sidebar stays expanded */
        .left-sidebar.sidebar-pinned { width: 230px; }
        .left-sidebar.sidebar-pinned .sidebar-item .sidebar-label { opacity: 1; }
        .left-sidebar.sidebar-pinned .sidebar-bottom-info { opacity: 1; }

        /* ============================================
           SPLIT-SECTION LAYOUT (image reference style)
           Left: heading panel | Right: numbered list
           ============================================ */
        .split-section {
            display: flex;
            gap: 0;
            padding: 72px 0 72px 32px;
            max-width: 1200px;
            margin: 0 auto;
            border-bottom: 1px solid #f0f1f3;
        }
        .split-section:last-of-type { border-bottom: none; }

        /* Alternating bg */
        .split-section.alt-bg {
            background: #f9fafb;
            max-width: 100%;
            padding-left: calc(56px + 32px);
        }
        .split-section.alt-bg .split-left,
        .split-section.alt-bg .split-right { max-width: 570px; }

        .split-left {
            width: 38%;
            flex-shrink: 0;
            padding-right: 48px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 4px;
        }

        .split-label {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #3b45cc;
            margin-bottom: 10px;
        }

        .split-title {
            font-size: 2.4rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.1;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }

        .split-desc {
            font-size: 0.95rem;
            color: #6b7280;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .split-link {
            font-size: 0.85rem;
            font-weight: 600;
            color: #3b45cc;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: gap 0.2s;
        }
        .split-link:hover { gap: 8px; }

        .split-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        /* Numbered item row */
        .spl-item {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            padding: 22px 24px 22px 0;
            border-bottom: 1px solid #f0f1f3;
            cursor: pointer;
            transition: background 0.15s;
            border-radius: 0;
        }
        .spl-item:last-child { border-bottom: none; }
        .spl-item:hover { background: #fafbff; }

        .spl-num {
            font-size: 0.82rem;
            font-weight: 700;
            color: #3b45cc;
            min-width: 24px;
            padding-top: 14px;
            font-variant-numeric: tabular-nums;
        }

        .spl-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #374151;
        }
        .spl-icon svg { width: 20px; height: 20px; stroke: currentColor; }

        .spl-body {
            flex: 1;
            min-width: 0;
        }

        .spl-name {
            font-size: 1.05rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 4px;
        }

        .spl-desc {
            font-size: 0.85rem;
            color: #6b7280;
            line-height: 1.55;
            margin-bottom: 10px;
        }

        .spl-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .spl-tag {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            background: #f3f4f6;
            color: #374151;
        }
        .spl-tag.accent-blue   { background: #eff2ff; color: #3b45cc; }
        .spl-tag.accent-orange { background: #fff7ed; color: #c2410c; }
        .spl-tag.accent-green  { background: #f0fdf4; color: #166534; }
        .spl-tag.accent-purple { background: #faf5ff; color: #7e22ce; }
        .spl-tag.accent-red    { background: #fff1f2; color: #be123c; }

        /* Responsive */
        @media (max-width: 900px) {
            .split-section {
                flex-direction: column;
                padding: 40px 20px;
            }
            .split-left { width: 100%; padding-right: 0; margin-bottom: 24px; }
            .split-title { font-size: 1.8rem; }
            .spl-item { padding: 16px 0; }
        }
        @media (max-width: 600px) {
            .split-section { padding: 32px 14px; }
            .split-title { font-size: 1.5rem; }
            .spl-icon { width: 36px; height: 36px; }
            .spl-num { padding-top: 10px; }
        }

        /* Keep old info-section as fallback for any remaining uses */
        .info-section {
            padding: 48px 32px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .info-section-header { margin-bottom: 28px; }
        .info-section-header h2 { font-size: 2rem; font-weight: 700; color: #1e3a5f; margin-bottom: 6px; }
        .info-section-header p { color: #6b7280; font-size: 1rem; margin-bottom: 8px; }
        .info-more-link { font-size: 0.875rem; color: #3b45cc; text-decoration: none; font-weight: 600; }
        .info-list { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: white; }
        .info-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #f0f1f3; transition: background 0.15s; cursor: pointer; }
        .info-row:last-child { border-bottom: none; }
        .info-row:hover { background: #f9fafb; }
        .info-tag { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; min-width: 80px; }
        .info-tag.tech        { background: #dbeafe; color: #1e40af; }
        .info-tag.design      { background: #fce7f3; color: #9d174d; }
        .info-tag.study       { background: #d1fae5; color: #065f46; }
        .info-tag.business    { background: #fef3c7; color: #92400e; }
        .info-tag.science     { background: #ede9fe; color: #5b21b6; }
        .info-tag.arts        { background: #fee2e2; color: #991b1b; }
        .info-tag.hackathon   { background: #dbeafe; color: #1e40af; }
        .info-tag.ctf         { background: #fee2e2; color: #991b1b; }
        .info-tag.aiml        { background: #ede9fe; color: #5b21b6; }
        .info-tag.webdev      { background: #d1fae5; color: #065f46; }
        .info-tag.conference  { background: #dbeafe; color: #1e40af; }
        .info-tag.workshop    { background: #fef3c7; color: #92400e; }
        .info-tag.meetup      { background: #d1fae5; color: #065f46; }
        .info-tag.bootcamp    { background: #fee2e2; color: #991b1b; }
        .info-tag.webinar     { background: #ede9fe; color: #5b21b6; }
        .info-tag.expert      { background: #dbeafe; color: #1e40af; }
        .info-tag.courses     { background: #fce7f3; color: #9d174d; }
        .info-tag.community   { background: #d1fae5; color: #065f46; }
        .info-tag.flexible    { background: #fef3c7; color: #92400e; }
        .info-tag.dev         { background: #dbeafe; color: #1e40af; }
        .info-tag.marketing   { background: #fef3c7; color: #92400e; }
        .info-tag.finance     { background: #d1fae5; color: #065f46; }
        .info-tag.lifestyle   { background: #fee2e2; color: #991b1b; }
        .info-tag.health      { background: #d1fae5; color: #065f46; }
        .info-tag.photo       { background: #ede9fe; color: #5b21b6; }
        .info-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .info-text strong { font-size: 0.95rem; color: #1a1a1a; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .info-text span { font-size: 0.8rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .info-count { font-size: 0.82rem; font-weight: 600; color: #6b7280; white-space: nowrap; flex-shrink: 0; }
        @media (max-width: 600px) {
            .info-section { padding: 32px 16px; }
            .info-row { padding: 12px 14px; gap: 10px; }
            .info-tag { min-width: 64px; font-size: 0.65rem; }
            .info-text span { display: none; }
        }
        /* ============================================
           WHY-SECTION — Coretech 3-column layout
           ============================================ */
        .why-section {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            padding: 56px 48px 72px;
            border-bottom: 1px solid #f0f1f3;
            align-items: start;
        }
        .why-left {
            padding-right: 52px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .why-label {
            font-size: 13px;
            color: #6b7280;
            letter-spacing: .04em;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .why-label::before {
            content: '//';
            font-weight: 600;
            color: #9ca3af;
        }
        .why-title {
            font-size: 38px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.1;
            margin-bottom: 18px;
            letter-spacing: -0.02em;
        }
        .why-desc {
            font-size: 15px;
            color: #6b7280;
            line-height: 1.7;
            margin-bottom: 28px;
        }
        .why-ctas { display: flex; gap: 28px; flex-wrap: wrap; }
        .why-cta {
            font-size: 14px;
            font-weight: 600;
            color: #3b45cc;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: gap 0.2s;
        }
        .why-cta:hover { gap: 9px; }
        .why-col {
            padding-left: 40px;
            border-left: none;
            display: flex;
            flex-direction: column;
        }
        /* Left clubs column pushed down to align icon with right col description */
        .why-section > .why-col:nth-child(2) {
            padding-top: 80px;
        }
        .why-item {
            padding: 24px 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .why-item + .why-item { border-top: none; }
        .why-icon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 4px;
            flex-shrink: 0;
        }
        .why-icon svg { width: 22px; height: 22px; stroke: #374151; }
        .why-item-title {
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
        }
        .why-item-desc {
            font-size: 14px;
            color: #6b7280;
            line-height: 1.65;
            margin: 0;
        }
        .why-item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
        .why-tag {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-weight: 600;
            background: #f3f4f6;
            color: #374151;
        }
        /* Marquee hidden by default, only shows on mobile */
        .m-wrap { display: none; }
        @media (max-width: 1024px) {
            .why-section {
                grid-template-columns: 1fr 1fr;
                padding: 40px 24px 56px;
            }
            .why-left {
                grid-column: 1 / -1;
                flex-direction: row;
                align-items: flex-start;
                gap: 32px;
                padding: 0 0 28px;
                text-align: left;
            }
            .why-left .why-text {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .why-left .why-visual {
                flex-shrink: 0;
                width: 240px;
                height: 190px;
                margin-top: 0;
            }
            .why-left .why-float-img:last-child {
                left: 45px;
            }
            .why-ctas { justify-content: flex-start; }
            .why-col {
                display: flex;
                padding-left: 0;
            }
            .why-section > .why-col:nth-child(2) { padding-top: 0; }
            .why-title { font-size: 28px; }
        }
        @media (max-width: 640px) {
            .why-left {
                flex-direction: column;
                gap: 20px;
            }
            .why-left .why-visual {
                width: 100%;
                height: auto;
                min-height: 220px;
            }
        }

        /* ============================================
           GENERIC MARQUEE (all sections, mobile/tablet)
           ============================================ */
        .m-wrap { display: none; }
        @media (max-width: 1024px) { .m-wrap { display: block; } }
        .m-wrap {
            width: 100%; overflow: hidden;
            padding-bottom: 40px;
            border-top: 1px solid #f0f1f3;
            grid-column: 1 / -1;
        }
        .m-track {
            display: flex; gap: 16px;
            width: max-content; padding: 24px 16px;
            animation: mScroll 22s linear infinite;
        }
        .m-track:hover { animation-play-state: paused; }
        @keyframes mScroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .m-card {
            width: 42vw; min-width: 260px;
            background: white; border: 1px solid #e5e7eb;
            border-radius: 14px; padding: 20px; flex-shrink: 0; text-align: left;
        }
        .alt-bg .m-card { background: #f9fafb; }
        .m-card-icon {
            width: 42px; height: 42px; border-radius: 10px;
            background: #f3f4f6; display: flex; align-items: center;
            justify-content: center; margin-bottom: 12px;
        }
        .m-card-icon svg { width: 20px; height: 20px; stroke: #374151; }
        .m-card-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
        .m-card-desc  { font-size: 13px; color: #6b7280; line-height: 1.6; margin-bottom: 10px; }
        .m-card-tags  { display: flex; flex-wrap: wrap; gap: 5px; }
        .m-card-tag   { font-size: 11px; font-weight: 600; background: #f3f4f6; color: #374151; padding: 2px 9px; border-radius: 20px; }
        @media (max-width: 760px) { .m-card { width: 80vw; } }

        /* ============================================
           SECTION TAB NAV — mobile/tablet only
           ============================================ */
        .section-tab-nav { display: none; }
        @media (max-width: 1024px) {
            .section-tab-nav {
                display: flex; gap: 0; overflow-x: auto;
                border-bottom: 1px solid #e5e7eb;
                background: rgba(255,255,255,0.97);
                backdrop-filter: blur(8px);
                padding: 0 8px; scrollbar-width: none;
                position: sticky; top: 56px; z-index: 800;
                -webkit-overflow-scrolling: touch;
            }
            .section-tab-nav::-webkit-scrollbar { display: none; }
            .section-tab {
                padding: 12px 14px; font-size: 13px; font-weight: 600;
                color: #6b7280; text-decoration: none; white-space: nowrap;
                border-bottom: 2px solid transparent; transition: all 0.2s;
                flex-shrink: 0;
            }
            .section-tab:hover,
            .section-tab.active { color: #3b45cc; border-bottom-color: #3b45cc; }
        }

        /* ============================================
           SIDEBAR SCROLL FIX — tablet/mobile
           ============================================ */
        @media (max-width: 1024px) {
            .left-sidebar.mobile-open {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .left-sidebar.mobile-open .sidebar-scroll-area {
                overflow-y: visible;
            }
        }

        /* why-section alt-bg variant */
        .why-section.alt-bg { background: #f9fafb; max-width: 100%; }

        /* Floating images in why-left */
        .why-visual {
            position: relative;
            margin-top: 2.5rem;
            height: 220px;
            flex-shrink: 0;
        }
        .why-float-img {
            position: absolute;
            width: 190px;
            height: 120px;
            object-fit: cover;
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.18);
            transition: transform 0.3s ease;
        }
        .why-float-img:first-child {
            top: 0; left: 0;
            transform: rotate(-4deg);
            z-index: 1;
        }
        .why-float-img:last-child {
            top: 55px; left: 75px;
            transform: rotate(3deg);
            z-index: 2;
        }
        .why-float-img:hover { transform: rotate(0deg) scale(1.04); z-index: 3; }
    
/* ===== GLOBAL NAV ADDITIONS (quickbar / bottom bar / messaging) ===== */
@media (max-width:1024px){ .left-sidebar.mobile-open { z-index: 1200; } }
.gnav-quickbar { display:flex; align-items:center; gap:4px; margin-left:auto; padding-right:8px; }
@media (max-width:1024px){ .gnav-quickbar{ display:none; } }
.gnav-qitem { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:58px; height:48px; border-radius:8px; cursor:pointer; text-decoration:none; color:#6b7280; background:none; border:none; font-family:inherit; transition:background .15s,color .15s; position:relative; }
.gnav-qitem:hover { background:#f3f4f6; color:#1a1a1a; }
.gnav-qitem.active { color:#3b45cc; }
.gnav-qitem svg { width:19px; height:19px; }
.gnav-qitem span { font-size:0.62rem; font-weight:600; }
.gnav-badge { position:absolute; top:0; left:calc(50% + 7px); background:#ef4444; color:#fff; font-size:0.6rem; font-weight:700; border-radius:50%; width:16px; height:16px; line-height:16px; text-align:center; display:flex; align-items:center; justify-content:center; }

/* ===== GLOBAL SEARCH BAR (navbar, top right, all breakpoints) ===== */
.gnav-search-wrap { display:flex; align-items:center; margin-left:auto; position:relative; }
.gnav-search-icon-btn { display:none; width:40px; height:40px; border-radius:50%; border:none; background:transparent; align-items:center; justify-content:center; cursor:pointer; color:#1a1a1a; flex-shrink:0; }
.gnav-search-icon-btn:hover { background:#f3f4f6; }
.gnav-search-icon-btn svg { width:19px; height:19px; }
.gnav-search-box { display:flex; align-items:center; gap:6px; width:230px; height:38px; background:#fff; border:1.5px solid #4b5563; border-radius:10px; padding:0 10px; box-shadow:0 1px 4px rgba(0,0,0,.1); transition:width .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.gnav-search-box:focus-within { border-color:#1a1a1a; box-shadow:0 3px 10px rgba(0,0,0,.16); }

/* ── Filters button beside the global search bar ── */
.gnav-search-filters-btn { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; margin-left:8px; border-radius:10px; border:1.5px solid #4b5563; background:#fff; color:#1a1a1a; font-size:0.84rem; font-weight:600; font-family:inherit; cursor:pointer; white-space:nowrap; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,.1); transition:background .13s,box-shadow .13s; }
.gnav-search-filters-btn svg { width:15px; height:15px; flex-shrink:0; }
.gnav-search-filters-btn:hover { background:#f3f4f6; }
.gnav-search-filters-btn.gf-on { background:#eef0ff; border-color:#3b45cc; color:#3b45cc; }
@media (max-width:1024px) {
  .gnav-search-filters-btn span { display:none; }
  .gnav-search-filters-btn { padding:0 9px; margin-left:6px; }
}
.gnav-search-box .gnav-search-back { display:none; background:none; border:none; cursor:pointer; color:#1a1a1a; align-items:center; justify-content:center; padding:0; flex-shrink:0; }
.gnav-search-box .gnav-search-back svg { width:19px; height:19px; }
.gnav-search-glass { width:16px; height:16px; color:#9ca3af; flex-shrink:0; }
.gnav-search-box input { flex:1; min-width:0; border:none; background:transparent; outline:none; font-size:0.84rem; color:#1a1a1a; font-family:inherit; }
.gnav-search-box input::placeholder { color:#9ca3af; }
.gnav-search-clear { display:none; background:none; border:none; cursor:pointer; color:#9ca3af; font-size:0.78rem; line-height:1; padding:4px; flex-shrink:0; }
.gnav-search-box.has-text .gnav-search-clear { display:flex; align-items:center; justify-content:center; }
.gnav-search-results { display:none; position:absolute; top:calc(100% + 8px); right:0; width:320px; max-height:380px; overflow-y:auto; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.12); z-index:1300; padding:6px; }
.gnav-search-results.open { display:block; }
.gnav-search-results .gsr-empty { padding:1.5rem 1rem; text-align:center; color:#9ca3af; font-size:0.82rem; }
.gnav-search-results .gsr-section-label { padding:8px 10px 4px; font-size:0.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#9ca3af; }
.gsr-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:#1a1a1a; cursor:pointer; }
.gsr-item:hover, .gsr-item.active { background:#f3f4f6; }
.gsr-item-icon { width:32px; height:32px; border-radius:8px; background:#eef0ff; color:#3b45cc; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gsr-item-icon svg { width:16px; height:16px; }
.gsr-item-text { min-width:0; }
.gsr-item-title { font-size:0.84rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gsr-item-sub { font-size:0.72rem; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gnav-search-overlay { display:none; }

@media (max-width:1024px) {
  .gnav-search-wrap { margin-left:auto; }
  .gnav-search-icon-btn { display:flex; }
  .gnav-search-box { position:fixed; top:0; left:0; right:0; width:auto; height:56px; border-radius:0; padding:0 8px 0 14px; background:#fff; box-shadow:0 1px 0 #e5e7eb; z-index:1301; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .2s ease,opacity .2s ease; }
  .gnav-search-box.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .gnav-search-box .gnav-search-back { display:flex; }
  .gnav-search-glass { display:none; }
  .gnav-search-results { position:fixed; top:56px; left:0; right:0; width:auto; max-height:calc(100vh - 56px); border-radius:0; border:none; box-shadow:none; z-index:1301; }
  .gnav-search-overlay.open { display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1299; }
}

/* ════════════════════════════════════════════════════════
   UNIVERSAL FILTER BAR  (LinkedIn-style, 3-layer system)
   ════════════════════════════════════════════════════════ */

/* --- filter bar sits as a second row inside .navbar ---
   Hidden by default; shown only when the person searches something
   or clicks the "Filters" button beside the search bar. --- */
.gnav-fbar { display:none; border-top:1px solid #e5e7eb; background:#fff; }
.gnav-fbar.gf-show { display:block; }

.gnav-fbar-row { display:flex; align-items:center; gap:8px; padding:0 16px; height:46px; }

/* ── quick pill scroll area ── */
.gnav-fbar-scroll { display:flex; align-items:center; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none; }
.gnav-fbar-scroll::-webkit-scrollbar { display:none; }

/* ── quick pill ── */
.gnav-fpill { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px; border-radius:20px; border:1px solid #d1d5db; background:#fff; font-size:12.5px; font-weight:500; color:#6b7280; white-space:nowrap; cursor:pointer; flex-shrink:0; transition:border-color .13s,color .13s,background .13s; }
.gnav-fpill svg { width:13px; height:13px; flex-shrink:0; }
.gnav-fpill:hover { border-color:#9ca3af; color:#1a1a1a; }
.gnav-fpill.gf-on { background:#eef0ff; border-color:#b5b9ee; color:#3b45cc; font-weight:600; }
.gnav-fpill.gf-dropdown { padding-right:8px; }
.gnav-fpill .gf-chev { width:11px; height:11px; opacity:.6; }
.gnav-fpill-count { font-size:11px; color:#9ca3af; }
.gnav-fpill-count:empty { display:none; }
.gnav-fpill.gf-on .gnav-fpill-count { color:#6b7280; }

/* ── all-filters button ── */
.gnav-fbar-all-btn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:20px; border:1.5px solid #3b45cc; background:#eef0ff; color:#3b45cc; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.gnav-fbar-all-btn svg { width:14px; height:14px; }
.gnav-fbar-badge { display:none; background:#3b45cc; color:#fff; border-radius:10px; font-size:10px; font-weight:700; padding:1px 6px; line-height:1.4; }
.gnav-fbar-badge.gf-visible { display:inline-block; }

/* ── "Clear all" sits right beside the All-filters button, only shown when something is active ── */
.gnav-fbar-clear { display:none; margin-left:8px; font-size:11.5px; color:#3b45cc; font-weight:600; background:none; border:none; cursor:pointer; text-decoration:underline; white-space:nowrap; flex-shrink:0; }
.gnav-fbar-clear.gf-visible { display:inline-block; }

/* ── body offset when filter bar visible ── */
body.gnav-fbar-open .main-content-wrapper { margin-top:46px; }

/* ── side panel (All Filters) — opens as a dropdown below the button,
   not a full-height sheet, and sits well above the floating message dock ── */
.gnav-fp-overlay { display:none; position:fixed; inset:0; background:transparent; z-index:3000; }
.gnav-fp-overlay.gf-open { display:block; }
.gnav-fp { position:fixed; top:0; right:16px; width:400px; max-width:calc(100vw - 32px); max-height:min(70vh,560px); height:auto; background:#fff; z-index:3001; display:flex; flex-direction:column; border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.06); opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
.gnav-fp.gf-open { opacity:1; transform:translateY(0); pointer-events:auto; }
.gnav-fp-handle { display:none; width:36px; height:4px; border-radius:3px; background:#d1d5db; margin:10px auto 0; flex-shrink:0; }
.gnav-fp-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #e5e7eb; flex-shrink:0; }
.gnav-fp-title { font-size:15px; font-weight:700; color:#1a1a1a; }
.gnav-fp-close { width:30px; height:30px; border-radius:50%; border:1px solid #e5e7eb; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#6b7280; }
.gnav-fp-close svg { width:15px; height:15px; }
.gnav-fp-body { flex:1; overflow-y:auto; padding-bottom:12px; }
.gnav-fp-catrow { display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; padding:14px 20px 16px; border-bottom:1px solid #f3f4f6; }
.gnav-fp-catrow::-webkit-scrollbar { display:none; }
.gnav-fp-catrow .gnav-fpill { flex-shrink:0; }
.gnav-fp-group { padding:16px 20px; border-bottom:1px solid #f3f4f6; }
.gnav-fp-group:last-child { border-bottom:none; }
.gnav-fp-group-title { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#9ca3af; margin-bottom:12px; }
/* checklist */
.gnav-fp-checklist { display:flex; flex-direction:column; gap:1px; }
.gnav-fp-chk { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; font-size:13.5px; color:#1a1a1a; }
.gnav-fp-chk:hover { background:#f9fafb; }
.gnav-fp-chk input[type="checkbox"] { width:16px; height:16px; accent-color:#3b45cc; cursor:pointer; flex-shrink:0; }
.gnav-fp-chk .gf-n { margin-left:auto; font-size:11px; color:#9ca3af; background:#f3f4f6; border-radius:6px; padding:1px 7px; }
.gnav-fp-chk .gf-n:empty { display:none; }
/* pill group (level/stage) */
.gnav-fp-pills { display:flex; flex-wrap:wrap; gap:7px; }
.gnav-fp-spill { padding:5px 13px; border-radius:20px; border:1px solid #d1d5db; font-size:12.5px; cursor:pointer; color:#6b7280; background:#fff; transition:all .12s; }
.gnav-fp-spill:hover { border-color:#9ca3af; color:#1a1a1a; }
.gnav-fp-spill.gf-on { background:#eef0ff; border-color:#b5b9ee; color:#3b45cc; font-weight:600; }
.gnav-fp-spill .gf-n { margin-left:4px; font-size:11px; color:#9ca3af; }
.gnav-fp-spill .gf-n:empty { display:none; }
/* toggles */
.gnav-fp-toggles { display:flex; flex-direction:column; gap:2px; }
.gnav-fp-toggle { display:flex; align-items:center; justify-content:space-between; padding:9px 8px; border-radius:8px; cursor:pointer; }
.gnav-fp-toggle:hover { background:#f9fafb; }
.gnav-fp-toggle-label { font-size:13.5px; color:#1a1a1a; }
.gnav-fp-toggle-sub { font-size:11.5px; color:#9ca3af; margin-top:1px; }
/* toggle switch */
.gf-switch { position:relative; width:36px; height:20px; flex-shrink:0; }
.gf-switch input { opacity:0; width:0; height:0; }
.gf-switch-track { position:absolute; inset:0; border-radius:10px; background:#d1d5db; transition:background .18s; }
.gf-switch input:checked ~ .gf-switch-track { background:#3b45cc; }
.gf-switch-thumb { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .18s; }
.gf-switch input:checked ~ .gf-switch-track ~ .gf-switch-thumb,
.gf-switch input:checked + .gf-switch-track + .gf-switch-thumb { transform:translateX(16px); }
/* footer */
.gnav-fp-foot { padding:14px 20px; border-top:1px solid #e5e7eb; display:flex; gap:10px; flex-shrink:0; }
.gnav-fp-reset { flex:1; height:38px; border:1px solid #d1d5db; border-radius:8px; background:transparent; font-size:13px; cursor:pointer; color:#6b7280; font-family:inherit; }
.gnav-fp-reset:hover { background:#f9fafb; }
.gnav-fp-apply { flex:2; height:38px; border-radius:8px; background:#3b45cc; border:none; color:#fff; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:6px; }
.gnav-fp-apply:hover { background:#2d35a0; }
#gnavFpCount { background:rgba(255,255,255,.25); border-radius:10px; font-size:11px; padding:1px 7px; }

/* ── "pick a category" tab row (Section 2 first-view state) ── */
.gnav-cat-tab { }
.gnav-cat-tab.gf-on { background:#eef0ff; border-color:#b5b9ee; color:#3b45cc; font-weight:600; }

/* ── category switcher pill + dropdown menu (Image 4) ── */
.gnav-cat-wrap { position:relative; flex-shrink:0; }
.gnav-cat-pill { font-weight:600; color:#1a1a1a; }
.gnav-cat-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:180px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:1500; padding:6px; flex-direction:column; }
.gnav-cat-menu.open { display:flex; }
.gnav-cat-item { display:block; width:100%; text-align:left; padding:8px 12px; border-radius:8px; border:none; background:none; font-size:13.5px; color:#1a1a1a; cursor:pointer; font-family:inherit; }
.gnav-cat-item:hover { background:#f3f4f6; }
.gnav-cat-item.current { color:#3b45cc; font-weight:600; background:#eef0ff; }

/* ── quick-field mini popover (click a single pill, e.g. "Locations ▾") ── */
.gnav-qf-wrap { position:relative; flex-shrink:0; }
.gnav-qf-pop { display:none; position:absolute; top:calc(100% + 6px); left:0; width:260px; max-height:340px; overflow-y:auto; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:1500; }
.gnav-qf-pop.open { display:block; }
.gnav-qf-body { padding:12px; }
.gnav-qf-foot { display:flex; gap:8px; padding:10px 12px; border-top:1px solid #f3f4f6; }
.gnav-qf-reset { flex:1; height:32px; border:1px solid #d1d5db; border-radius:8px; background:transparent; font-size:12.5px; cursor:pointer; color:#6b7280; font-family:inherit; }
.gnav-qf-reset:hover { background:#f9fafb; }
.gnav-qf-done { flex:1; height:32px; border-radius:8px; background:#3b45cc; border:none; color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.gnav-qf-done:hover { background:#2d35a0; }

/* ── "+ Add a ___" expandable link on checklist groups ── */
.gnav-fp-add { display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:4px 2px; border:none; background:none; color:#3b45cc; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.gnav-fp-add:hover { text-decoration:underline; }
.gnav-fp-add-search { display:none; width:100%; margin-top:6px; height:32px; border:1px solid #d1d5db; border-radius:8px; padding:0 10px; font-size:12.5px; outline:none; font-family:inherit; }
.gnav-fp-add-search.open { display:block; }

/* ── keywords section (always last, 2-column grid — Section 5) ── */
.gnav-fp-keywords { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gnav-fp-kw-col { display:flex; flex-direction:column; gap:4px; }
.gnav-fp-kw-col label { font-size:11px; color:#9ca3af; }
.gnav-fp-kw-col input { height:34px; border:1px solid #d1d5db; border-radius:8px; padding:0 10px; font-size:13px; outline:none; font-family:inherit; }
@media (max-width:480px) { .gnav-fp-keywords { grid-template-columns:1fr; } }

/* ── dropdown panels (location / sort) ── */
.gnav-fdrop { position:absolute; top:calc(100% + 6px); left:0; min-width:220px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:1500; padding:8px; display:none; }
.gnav-fdrop.gf-open { display:block; }
.gnav-fbar-row { position:relative; }

/* ── no-results notice injected by filter JS ── */
.gnav-no-results { display:none; text-align:center; padding:48px 20px; color:#9ca3af; font-size:14px; }
.gnav-no-results.gf-visible { display:block; }

/* ── mobile adjustments ── */
@media (max-width:768px) {
  .gnav-fbar-row { padding:0 10px; gap:6px; }
  .gnav-fp-overlay { background:rgba(0,0,0,.4); }
  .gnav-fp {
    top:auto; bottom:0; left:0; right:0; width:100%; max-width:100%;
    max-height:85vh; border-radius:18px 18px 0 0;
    transform:translateY(100%);
    box-shadow:0 -8px 30px rgba(0,0,0,.25);
  }
  .gnav-fp.gf-open { transform:translateY(0); }
  .gnav-fp-handle { display:block; }
  body.gnav-fbar-open .main-content-wrapper { margin-top:40px; }
  .gnav-fbar-row { height:40px; }
  .gnav-fpill { height:27px; font-size:12px; padding:0 10px; }
  .gnav-fbar-all-btn { height:27px; font-size:12px; padding:0 10px; }
}

.gnav-bottombar { display:none; }
@media (max-width:1024px){
  .gnav-bottombar { display:flex; position:fixed; bottom:0; left:0; right:0; height:58px; background:#fff; border-top:1px solid #e5e7eb; z-index:1100; box-shadow:0 -2px 8px rgba(0,0,0,.05); }
}
.gnav-bitem { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#9ca3af; text-decoration:none; background:none; border:none; font-family:inherit; position:relative; }
.gnav-bitem.active { color:#3b45cc; }
.gnav-bitem svg { width:21px; height:21px; }
.gnav-bitem span { font-size:0.65rem; font-weight:600; }
body.gnav-has-bottombar .main-content-wrapper { padding-bottom:0; }
@media (max-width:1024px){ body.gnav-has-bottombar .main-content-wrapper { padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)); } }




/* ===== GNAV MESSAGING DOCK (LinkedIn-style) ===== */
/* ===== LINKEDIN-STYLE MESSAGING DOCK ===== */
.gnav-dock { position:fixed; bottom:0; right:24px; display:flex; align-items:flex-end; gap:10px; z-index:1500; }
@media (max-width:1024px){ .gnav-dock{ display:none !important; } }

/* Main messaging panel */
.gnav-main-bar { width:300px; background:#fff; border-radius:10px 10px 0 0; box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 20px rgba(0,0,0,.15); border-bottom:none; display:flex; flex-direction:column; transition:height .22s cubic-bezier(.4,0,.2,1); overflow:visible; position:relative; z-index:2; }
.gnav-main-bar.gnav-no-anim { transition: none !important; }
.gnav-main-bar.collapsed { height:48px; overflow:hidden; }
.gnav-main-bar.expanded { height:620px; max-height:calc(100vh - 90px); overflow:visible; }

/* Header — white, profile photo, arrows, dots */
.gnav-main-header { height:48px; min-height:48px; background:#fff !important; color:#1a1a1a; display:flex; align-items:center; padding:0 8px 0 12px; cursor:pointer; flex-shrink:0; border-radius:10px 10px 0 0; position:relative; z-index:10; }
.gnav-main-bar.expanded .gnav-main-header { border-bottom:1px solid #e9e9e9; border-radius:10px 10px 0 0; }
.gnav-main-header-left { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.gnav-main-header-avatar { position:relative; flex-shrink:0; }
.gnav-main-header-avatar img { width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; }
.gnav-online-dot { position:absolute; bottom:1px; right:1px; width:9px; height:9px; border-radius:50%; background:#4ade80; border:2px solid #fff; pointer-events:none; }
.gnav-main-header-title { font-weight:700; font-size:.88rem; color:#1a1a1a; }
.gnav-badge-mini { background:#ef4444; color:#fff; font-size:.6rem; font-weight:700; border-radius:8px; padding:1px 5px; min-width:14px; text-align:center; display:inline-block; margin-left:4px; }
.gnav-main-header-actions { display:flex; align-items:center; gap:1px; flex-shrink:0; }
.gnav-hbtn { background:none; border:none; color:#1a1a1a; cursor:pointer; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; }
.gnav-hbtn:hover { background:#f3f4f6; color:#1a1a1a; }
.gnav-hbtn svg { width:16px; height:16px; display:block; }

/* Dropdown — fixed positioning to avoid clipping */
.gnav-dropdown-wrap { position:relative; }
.gnav-dropdown { position:absolute; right:0; bottom:calc(100% + 6px); background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.18); min-width:180px; z-index:99999; display:none; padding:4px 0; }
.gnav-dropdown.gnav-dropdown-down { bottom:auto; top:calc(100% + 6px); }
.gnav-dropdown.open { display:block; }
.gnav-dropdown a, .gnav-dropdown button { display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; padding:9px 14px; font-size:.8rem; color:#374151; cursor:pointer; text-align:left; font-family:inherit; text-decoration:none; }
.gnav-dropdown a:hover, .gnav-dropdown button:hover { background:#f3f4f6; color:#1a1a1a; }
.gnav-dropdown svg { width:14px; height:14px; opacity:.65; flex-shrink:0; }
.gnav-dropdown-divider { height:1px; background:#f0f0f0; margin:4px 0; }

/* Tabs: Focused / Other */
.gnav-tabs { display:flex; align-items:center; border-bottom:1px solid #e9e9e9; flex-shrink:0; flex-wrap:nowrap; }
.gnav-tab { flex:1; background:none; border:none; border-bottom:2px solid transparent; padding:8px 0; font-size:.78rem; font-weight:600; color:#6b7280; cursor:pointer; font-family:inherit; transition:color .15s; }
.gnav-tab.active { color:#3b45cc; border-bottom-color:#3b45cc; }
.gnav-tab:hover { color:#1a1a1a; }
.gnav-tabs-filter-wrap { flex-shrink:0; position:relative; }
.gnav-tabs-filter-btn { flex:0 0 auto !important; white-space:nowrap; padding:8px 10px !important; display:flex; align-items:center; }
.gnav-temp-list-wrap { display:flex; flex-direction:column; flex:1; min-height:0; }
.gnav-create-btn { margin:8px 14px 2px; padding:8px 12px; background:#eff2ff; color:#3b45cc; border:none; border-radius:8px; font-size:.8rem; font-weight:700; cursor:pointer; text-align:left; }
.gnav-create-btn:hover { background:#e2e6ff; }
.gnav-temp-list { padding:4px 0; overflow-y:auto; }
.gnav-temp-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; }

/* ── Create Group / Create Community modals ── */
.gnav-cmodal-backdrop { display:none; position:fixed; inset:0; background:rgba(10,16,30,.6); z-index:3000; align-items:center; justify-content:center; padding:1.25rem; }
.gnav-cmodal-backdrop.open { display:flex; }
.gnav-cmodal { background:#fff; border-radius:16px; width:100%; max-width:420px; max-height:92vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.22); }
.gnav-cmodal-header { padding:1.3rem 1.5rem 1rem; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #f1f5f9; }
.gnav-cmodal-header h3 { font-size:1.05rem; font-weight:800; color:#0f172a; }
.gnav-cmodal-header p { font-size:.78rem; color:#9ca3af; margin-top:3px; }
.gnav-cmodal-close { background:#f1f5f9; border:none; border-radius:8px; width:30px; height:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#6b7280; flex-shrink:0; }
.gnav-cmodal-close:hover { background:#e2e8f0; }
.gnav-cmodal-body { padding:1.3rem 1.5rem; }
.gnav-cfield { margin-bottom:1rem; }
.gnav-cfield label { display:block; font-size:.8rem; font-weight:700; color:#1a1a1a; margin-bottom:.4rem; }
.gnav-cfield input[type="text"], .gnav-cfield textarea, .gnav-cfield select { width:100%; padding:.6rem .7rem; border:1.5px solid #e5e7eb; border-radius:8px; font-size:.85rem; font-family:inherit; outline:none; }
.gnav-cfield input[type="text"]:focus, .gnav-cfield textarea:focus, .gnav-cfield select:focus { border-color:#3b45cc; }
.gnav-cfield textarea { resize:vertical; min-height:64px; }
.gnav-ctype-row { display:flex; gap:8px; }
.gnav-ctype-opt { flex:1; border:1.5px solid #e5e7eb; border-radius:9px; padding:.6rem; text-align:center; cursor:pointer; font-size:.78rem; font-weight:700; color:#6b7280; }
.gnav-ctype-opt.active { border-color:#3b45cc; background:#eff2ff; color:#3b45cc; }
.gnav-csubmit-btn { width:100%; padding:.75rem; background:#1a1a1a; color:#fff; border:none; border-radius:9px; font-size:.88rem; font-weight:700; cursor:pointer; margin-top:.4rem; }
.gnav-csubmit-btn:hover { background:#374151; }
.gnav-temp-item:hover { background:#f3f4f6; }
.gnav-temp-item img { width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.gnav-temp-name { font-size:.83rem; font-weight:600; color:#1a1a1a; }
.gnav-temp-sub { font-size:.72rem; color:#9ca3af; margin-top:1px; }

/* Page Inboxes dropdown row */
.gnav-page-inboxes { display:flex; align-items:center; justify-content:space-between; padding:8px 12px 4px; flex-shrink:0; }
.gnav-page-inboxes-label { font-size:.76rem; font-weight:600; color:#374151; }
.gnav-page-inboxes-btn { background:none; border:none; cursor:pointer; color:#6b7280; display:flex; align-items:center; gap:4px; font-size:.72rem; font-family:inherit; padding:2px 6px; border-radius:4px; transition:background .15s; }
.gnav-page-inboxes-btn:hover { background:#f3f4f6; color:#1a1a1a; }
.gnav-page-inboxes-btn svg { width:12px; height:12px; }
/* Page inbox panel */
.gnav-page-inbox-panel { display:none; background:#f9fafb; border-bottom:1px solid #e9e9e9; padding:6px 0; }
.gnav-page-inbox-panel.open { display:block; }
.gnav-page-inbox-item { display:flex; align-items:center; gap:10px; padding:7px 12px; cursor:pointer; }
.gnav-page-inbox-item:hover { background:#f0f1f3; }
.gnav-page-inbox-item img { width:32px; height:32px; border-radius:6px; object-fit:cover; }
.gnav-page-inbox-name { font-size:.78rem; font-weight:600; color:#1a1a1a; }
.gnav-page-inbox-sub { font-size:.68rem; color:#9ca3af; }
.gnav-page-inbox-badge { background:#ef4444; color:#fff; font-size:.6rem; font-weight:700; border-radius:8px; padding:1px 5px; margin-left:auto; }

/* Search bar */
.gnav-search-bar { padding:7px 10px; border-bottom:1px solid #f0f0f0; flex-shrink:0; }
.gnav-search-bar input { width:100%; border:none; background:#eef0f3; border-radius:4px; padding:5px 10px 5px 28px; font-size:.78rem; outline:none; font-family:inherit; color:#1a1a1a; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:8px center; }
.gnav-search-bar input::placeholder { color:#9ca3af; }

/* Conversation list */
.gnav-main-body { flex:1; overflow-y:auto; }
.gnav-main-body.hidden { display:none; }
.gnav-conv { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; position:relative; }
.gnav-conv-row-dots { position:absolute; right:8px; top:50%; transform:translateY(-50%); opacity:1; }
.gnav-conv-dots-btn { width:26px; height:26px; border-radius:50%; border:none; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#374151; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.gnav-conv-dots-btn:hover { background:#f3f4f6; color:#1a1a1a; }
@media (max-width:1024px){ .gnav-conv-row-dots { opacity:1; } }
.gnav-conv:hover { background:#f3f4f6; }
.gnav-conv-avatar { position:relative; flex-shrink:0; }
.gnav-conv-avatar img { width:44px; height:44px; border-radius:50%; object-fit:cover; display:block; }
.gnav-conv-avatar .gnav-online-dot { width:11px; height:11px; bottom:1px; right:1px; }
.gnav-conv-info { flex:1; min-width:0; }
.gnav-conv-name { font-size:.83rem; font-weight:600; color:#1a1a1a; }
.gnav-conv-name:hover { color:#3b45cc; text-decoration:underline; cursor:pointer; }
.gnav-conv-avatar { cursor:pointer; }
.gnav-conv-avatar .gnav-avatar-check { position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; border-radius:4px; background:#fff; border:2px solid #9ca3af; display:none; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.gnav-conv-avatar .gnav-avatar-check svg { width:11px; height:11px; stroke:#fff; display:none; }
.gnav-conv-avatar:hover .gnav-avatar-check, .gnav-conv.selected .gnav-conv-avatar .gnav-avatar-check { display:flex; }
.gnav-conv.selected .gnav-conv-avatar .gnav-avatar-check { background:#3b45cc; border-color:#3b45cc; }
.gnav-conv.selected .gnav-conv-avatar .gnav-avatar-check svg { display:block; }
.gnav-bulk-bar { display:none; align-items:center; gap:8px; padding:8px 12px; background:#eef0fb; border-bottom:1px solid #e5e7eb; flex-shrink:0; white-space:nowrap; }
.gnav-bulk-bar.show { display:flex; }
.gnav-bulk-bar span { font-size:.78rem; font-weight:600; color:#1a1a1a; flex:1; white-space:nowrap; }
.gnav-bulk-bar button { background:none; border:1px solid #d1d5db; border-radius:50%; width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#374151; cursor:pointer; font-family:inherit; }
.gnav-bulk-bar button svg { width:14px; height:14px; }
.gnav-bulk-bar button:hover { background:#fff; border-color:#3b45cc; color:#3b45cc; }
.gnav-bulk-bar button.danger:hover { border-color:#dc2626; color:#dc2626; }
.gnav-filter-dropdown button.active { background:#eef0fb; color:#3b45cc; font-weight:600; }
.gnav-conv-preview { font-size:.74rem; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.gnav-conv-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.gnav-conv-time { font-size:.67rem; color:#b0b7c3; white-space:nowrap; }
.gnav-conv.unread .gnav-conv-name { font-weight:700; }
.gnav-conv.unread .gnav-conv-preview { color:#1a1a1a; font-weight:500; }
.gnav-unread-dot { width:9px; height:9px; border-radius:50%; background:#3b45cc; flex-shrink:0; }

/* ── OVERFLOW BUBBLE (hidden / overflowed chats) ── */
.gnav-overflow-wrap { position:relative; flex-shrink:0; }
.gnav-overflow-bubble { width:44px; height:44px; border-radius:50%; background:#3b45cc; color:#fff; display:none; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.22); transition:background .15s; }
.gnav-overflow-bubble:hover { background:#2f37a8; }
.gnav-overflow-popup { position:absolute; bottom:52px; left:0; width:240px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.18); display:none; max-height:280px; overflow-y:auto; z-index:1600; }
.gnav-overflow-popup.open { display:block; }
.gnav-overflow-popup-title { font-size:.78rem; font-weight:700; color:#1a1a1a; padding:10px 12px 6px; }
.gnav-overflow-item { display:flex; align-items:center; gap:9px; padding:8px 12px; cursor:pointer; font-size:.8rem; color:#1a1a1a; }
.gnav-overflow-item:hover { background:#f3f4f6; }
.gnav-overflow-item img { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; display:block; }

/* ── INDIVIDUAL CHAT WINDOWS ── */
.gnav-chat-win { width:300px; background:#fff; border-radius:10px 10px 0 0; box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 20px rgba(0,0,0,.15); border-bottom:none; display:flex; flex-direction:column; transition:height .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1); overflow:visible; position:relative; z-index:1; }
.gnav-chat-win.gnav-win-enter { animation: gnavWinEnter .22s cubic-bezier(.4,0,.2,1); }
@keyframes gnavWinEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.gnav-chat-win.collapsed { height:48px; }
.gnav-chat-win.expanded { height:430px; }
.gnav-chat-win.dots-open { z-index:50; }

/* Chat header — white clean LinkedIn style */
.gnav-chat-header { height:48px; min-height:48px; background:#fff !important; display:flex; align-items:center; gap:5px; padding:0 4px 0 10px; flex-shrink:0; border-bottom:1px solid #e9e9e9; border-radius:10px 10px 0 0; position:relative; z-index:10; }
.gnav-chat-win.collapsed .gnav-chat-header { border-bottom:none; border-radius:10px 10px 0 0; }
.gnav-chat-header-avatar { position:relative; flex-shrink:0; cursor:pointer; }
.gnav-chat-header-avatar img { width:32px; height:32px; border-radius:50%; object-fit:cover; display:block; }
.gnav-chat-header-name { flex:1; min-width:0; font-weight:700; font-size:.82rem; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.gnav-chat-header-actions { display:flex; align-items:center; gap:1px; flex-shrink:0; }
/* ── COLLAPSED HEADER: hide expanded-only buttons ── */
.gnav-chat-win.collapsed .gnav-expanded-only { display:none; }

/* ── ATTACHMENT PREVIEW STRIP ── */
.gnav-attach-preview { display:flex; flex-wrap:wrap; gap:6px; padding:6px 10px 0; border-top:1px solid #f0f0f0; }
.gnav-attach-chip { display:flex; align-items:center; gap:5px; background:#f3f4f6; border-radius:8px; padding:4px 8px; font-size:.72rem; color:#374151; max-width:160px; position:relative; }
.gnav-attach-chip img { width:32px; height:32px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.gnav-attach-chip .chip-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }
.gnav-attach-chip .chip-remove { background:none; border:none; cursor:pointer; color:#9ca3af; font-size:.9rem; line-height:1; padding:0 2px; flex-shrink:0; }
.gnav-attach-chip .chip-remove:hover { color:#dc2626; }

/* ── EDIT/DELETE bubble actions ── */
.gnav-bubble-action-btn.edit-btn,
.gnav-bubble-action-btn.delete-btn { }
.gnav-bubble.editing { outline:2px solid #3b45cc; border-radius:18px; }

/* ── EDIT INLINE TEXTAREA ── */
.gnav-edit-textarea { width:100%; background:#fff; border:1.5px solid #3b45cc; border-radius:12px; padding:6px 10px; font-size:.79rem; font-family:inherit; color:#1a1a1a; resize:none; outline:none; line-height:1.4; }
.gnav-edit-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:4px; }
.gnav-edit-save, .gnav-edit-cancel { font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:6px; border:none; cursor:pointer; }
.gnav-edit-save { background:#3b45cc; color:#fff; }
.gnav-edit-cancel { background:#f3f4f6; color:#374151; }

/* ── PASTE IMAGE PREVIEW ── */
.gnav-paste-preview { max-width:100%; border-radius:10px; margin:4px 0; display:block; }

.gnav-hbtn.gnav-close-x:hover { color:#dc2626; background:#fee2e2; }

/* ── FLOATING COMPOSE BUTTON (beside messaging panel) ── */
.gnav-compose-float-btn {
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:#3b45cc;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 3px 14px rgba(0,0,0,.18);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s,transform .15s,box-shadow .15s;
  flex-shrink:0; margin-bottom:4px;
}
.gnav-compose-float-btn:hover { background:#eef0fb; transform:scale(1.08); box-shadow:0 4px 20px rgba(59,69,204,.25); }
.gnav-compose-float-btn svg { width:18px; height:18px; }
.gnav-compose-float-btn.visible { display:flex !important; }


/* Chat body */
.gnav-chat-body { flex:1; display:none; flex-direction:column; overflow:visible; min-height:0; }
.gnav-chat-win.expanded .gnav-chat-body { display:flex; }

/* Expanded (fullscreen-ish) chat mode */
.gnav-chat-win.fullsize { width:500px !important; height:600px !important; border-radius:10px 10px 0 0; }
.gnav-chat-win.fullsize .gnav-chat-body { display:flex; }

/* Hidden-chats overflow feature removed */
.gnav-overflow-wrap { display:none !important; }

/* Messages area */
.gnav-chat-msgs { flex:1; overflow-y:auto; padding:12px 12px 6px; display:flex; flex-direction:column; gap:4px; overflow-x:visible; }
.gnav-bubble-row { display:flex; flex-direction:column; margin-bottom:2px; position:relative; }
.gnav-bubble-row.me { align-items:flex-end; }
.gnav-bubble-row.them { align-items:flex-start; }
/* horizontal inline wrapper: bubble + 3-dots side by side */
.gnav-bubble-inline { display:flex; align-items:center; gap:4px; max-width:90%; }
.gnav-bubble-row.me .gnav-bubble-inline { flex-direction:row-reverse; }
.gnav-bubble-row.them .gnav-bubble-inline { flex-direction:row; }
.gnav-bubble { max-width:80%; padding:8px 12px; border-radius:18px; font-size:.79rem; line-height:1.45; word-break:break-word; }
.gnav-bubble.them { background:#f0f0f0; color:#1a1a1a; border-bottom-left-radius:4px; }
.gnav-bubble.me { background:#3b45cc; color:#fff; border-bottom-right-radius:4px; }
.gnav-bubble-time { font-size:.62rem; color:#b0b7c3; margin-top:2px; padding:0 4px; }
.gnav-bubble-time.right { text-align:right; }
.gnav-seen { font-size:.62rem; color:#9ca3af; text-align:right; padding:0 4px 6px; }

/* Input area — LinkedIn style large textarea */
.gnav-chat-input-wrap { border-top:1px solid #e9e9e9; flex-shrink:0; }
.gnav-chat-textarea { width:100%; border:none; outline:none; resize:none; padding:10px 12px 4px; font-size:.79rem; font-family:inherit; color:#1a1a1a; background:#fff; min-height:44px; max-height:100px; line-height:1.4; }
.gnav-chat-textarea::placeholder { color:#9ca3af; }
.gnav-chat-toolbar { display:flex; align-items:center; padding:4px 8px 6px; gap:2px; }
.gnav-tool-btn { background:none; border:none; color:#374151; cursor:pointer; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.gnav-tool-btn:hover { background:#f3f4f6; color:#3b45cc; }
.gnav-tool-btn svg { width:16px; height:16px; }
.gnav-tool-btn span { font-size:.85rem; }
.gnav-send-btn { margin-left:auto; background:none; border:none; color:#b0b7c3; cursor:pointer; padding:4px 8px; border-radius:4px; font-size:.78rem; font-weight:700; transition:color .15s; font-family:inherit; }
.gnav-send-btn.active { color:#3b45cc; }
.gnav-send-btn:hover { color:#2d36a8; }


/* ── TYPING INDICATOR ── */
.gnav-typing-bubble { display:flex; align-items:center; gap:4px; padding:10px 14px !important; }
.gnav-typing-bubble span { width:6px; height:6px; border-radius:50%; background:#9ca3af; display:inline-block; animation:gnavTyping 1.2s infinite; }
.gnav-typing-bubble span:nth-child(2){ animation-delay:.2s; }
.gnav-typing-bubble span:nth-child(3){ animation-delay:.4s; }
@keyframes gnavTyping{ 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-5px);opacity:1} }

/* ── SHIFT HINT ── */
.gnav-shift-hint { font-size:.62rem; color:#b0b7c3; padding:0 12px 6px; text-align:right; }

/* ── EMOJI PICKER ── */
/* popup style: escapes the small chat-box container and floats over the whole page */
.gnav-emoji-picker { position:fixed; width:240px; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 4px 24px rgba(0,0,0,.22); padding:8px; z-index:999999; max-height:200px; overflow-y:auto; }
.gnav-emoji-picker button { background:none; border:none; cursor:pointer; font-size:1.1rem; padding:4px; border-radius:6px; line-height:1; transition:background .1s; }
.gnav-emoji-picker button:hover { background:#f3f4f6; }
.gnav-chat-toolbar { position:relative; }


/* ── REACTIONS ── */
.gnav-reactions { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; align-items:center; }
.gnav-react-btn { background:none; border:none; cursor:pointer; font-size:.85rem; opacity:1; padding:2px 4px; border-radius:50%; }
.gnav-react-picker { position:fixed; display:flex; gap:3px; background:#fff; border:1px solid #e5e7eb; border-radius:20px; padding:4px 8px; box-shadow:0 4px 24px rgba(0,0,0,.22); z-index:999999; }
.gnav-react-picker button { background:none; border:none; cursor:pointer; font-size:1.1rem; padding:2px; border-radius:50%; transition:transform .1s; }
.gnav-react-picker button:hover { transform:scale(1.3); }
.gnav-reaction-tag { font-size:.72rem; background:#f0f0f0; border-radius:20px; padding:2px 7px; cursor:pointer; }
.gnav-bubble.me .gnav-reaction-tag { background:rgba(255,255,255,.25); color:#fff; }

/* ── BUBBLE ACTIONS (reply on hover) ── */
.gnav-bubble-actions { display:flex; gap:3px; opacity:1; margin-top:2px; }
.gnav-bubble-actions.me { justify-content:flex-end; }
.gnav-bubble-action-btn { background:none; border:none; cursor:pointer; color:#9ca3af; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .1s,color .1s; }
.gnav-bubble-action-btn:hover { background:#f3f4f6; color:#3b45cc; }
.gnav-bubble-action-btn svg { width:12px; height:12px; }

/* ── REPLY QUOTE IN BUBBLE ── */
.gnav-reply-quote { font-size:.68rem; color:#6b7280; background:#e9e9e9; border-left:2px solid #3b45cc; padding:3px 7px; border-radius:4px; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.gnav-reply-quote.me { background:#e9e9e9; color:#6b7280; border-left-color:#3b45cc; }

/* ── REPLY BAR (above input) ── */
.gnav-reply-bar { display:flex; align-items:center; gap:6px; padding:5px 10px; background:#f9fafb; border-top:1px solid #e9e9e9; font-size:.73rem; color:#374151; }
.gnav-reply-bar span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gnav-reply-cancel { background:none; border:none; cursor:pointer; font-size:1rem; color:#9ca3af; line-height:1; padding:0 2px; }
.gnav-reply-cancel:hover { color:#dc2626; }

/* ── SCROLL TO BOTTOM BTN ── */
.gnav-scroll-btn { position:absolute; bottom:110px; right:10px; background:#3b45cc; color:#fff; border:none; border-radius:20px; padding:5px 10px; font-size:.72rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:4px; box-shadow:0 2px 8px rgba(0,0,0,.18); font-family:inherit; z-index:10; }
.gnav-scroll-btn:hover { background:#2d36a8; }
.gnav-chat-body { position:relative; }

/* ── DELIVERY TICK ── */
.gnav-tick { display:inline-flex; align-items:center; vertical-align:middle; color:#9ca3af; margin-left:2px; }
.gnav-tick svg { stroke:#9ca3af; }

/* ── SENT/RECEIVED MESSAGE 3-DOTS (outside bubble, horizontal row, always visible) ── */
.gnav-bubble-dots-wrap { position:relative; flex-shrink:0; display:flex; align-items:center; }
.gnav-bubble-dots-btn {
  background:none; border:none; border-radius:50%;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#1a1a1a; transition:background .15s;
  padding:0; flex-shrink:0;
}
.gnav-bubble-dots-btn:hover { background:#f0f0f0; }
.gnav-bubble-dots-btn svg { width:16px; height:16px; display:block; }
/* menu uses fixed positioning to escape any overflow/stacking context */
.gnav-bubble-dots-menu {
  display:none; position:fixed;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 4px 24px rgba(0,0,0,.22); min-width:150px; padding:4px 0; z-index:999999;
}
.gnav-bubble-dots-menu.open { display:block; }
.gnav-bubble-dots-item {
  display:flex; align-items:center; gap:9px; width:100%;
  background:none; border:none; padding:9px 14px; font-size:.79rem;
  color:#374151; cursor:pointer; text-align:left; font-family:inherit;
  transition:background .12s; white-space:nowrap;
}
.gnav-bubble-dots-item:hover { background:#f3f4f6; color:#1a1a1a; }
.gnav-bubble-dots-item.danger { color:#dc2626; }
.gnav-bubble-dots-item.danger:hover { background:#fef2f2; }
.gnav-dots-item-icon { width:18px; text-align:center; font-size:.85rem; }

/* ── IN-CHAT MESSAGE SEARCH BAR ── */
.gnav-msg-search-bar { display:flex; align-items:center; gap:6px; padding:6px 10px; background:#f9fafb; border-bottom:1px solid #e9e9e9; flex-shrink:0; }
.gnav-msg-search-bar input { flex:1; border:1px solid #e5e7eb; border-radius:6px; padding:4px 8px; font-size:.76rem; outline:none; font-family:inherit; color:#1a1a1a; }
.gnav-msg-search-bar button { background:none; border:none; cursor:pointer; font-size:1rem; color:#9ca3af; }

/* ── TOAST NOTIFICATION ── */
.gnav-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(10px); background:#1a1a1a; color:#fff; padding:8px 18px; border-radius:20px; font-size:.82rem; font-weight:500; opacity:0; transition:opacity .25s,transform .25s; z-index:99999; pointer-events:none; white-space:nowrap; }
.gnav-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── FILE/IMAGE BUBBLES ── */
.gnav-bubble-img img { max-width:160px; border-radius:8px; display:block; }
.gnav-bubble.me.gnav-bubble-file { word-break:break-all; }

/* ── MOBILE CHAT FULL-SCREEN SHEET ── */
@media (max-width:1024px){
  .gnav-dock { display:flex !important; flex-direction:column; bottom:58px; right:0; left:0; z-index:1400; align-items:stretch; pointer-events:none; }
  .gnav-main-bar { display:none !important; }
  .gnav-chat-win { width:100% !important; height:100vh !important; border-radius:0; pointer-events:all; position:fixed; bottom:0; left:0; right:0; transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1) !important; }
  .gnav-chat-win.expanded { transform:translateY(0) !important; height:calc(100vh - 58px) !important; display:flex !important; }
  .gnav-chat-win.collapsed { transform:translateY(100%) !important; }
  .gnav-overflow-wrap { display:none; }
}

/* ══════════════════════════════════════════════
   LINKEDIN-STYLE LEFT-SIDE NEW MESSAGE DRAWER
   ══════════════════════════════════════════════ */

/* Backdrop — only dims screen, click outside closes */
.gnav-compose-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0);           /* no dark bg — panel is self-contained */
  display:none; z-index:2000;
  pointer-events:none;
}
.gnav-compose-overlay.open { display:block; pointer-events:all; }

/* The drawer itself — left-side panel, above left sidebar */
.gnav-compose-drawer {
  position:fixed;
  top:56px;
  left:64px;                          /* 56px sidebar + 8px gap */
  width:380px;
  height:calc(100vh - 56px);
  background:#fff;
  box-shadow:4px 0 24px rgba(0,0,0,.13), 1px 0 0 #e5e7eb;
  border-radius:0 12px 12px 0;
  display:flex; flex-direction:column;
  transform:translateX(-110%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:2001;
  overflow:hidden;
}
.gnav-compose-overlay.open .gnav-compose-drawer { transform:translateX(0); }

/* Header row */
.gnav-compose-header {
  height:52px; min-height:52px;
  display:flex; align-items:center; gap:8px;
  padding:0 8px 0 16px;
  border-bottom:1px solid #e9e9e9;
  flex-shrink:0;
}
.gnav-compose-title { flex:1; font-weight:700; font-size:.92rem; color:#1a1a1a; }

/* Step indicator dots */
.gnav-compose-steps { display:flex; gap:5px; align-items:center; margin-right:4px; }
.gnav-compose-step-dot {
  width:7px; height:7px; border-radius:50%;
  background:#e5e7eb; transition:background .2s;
}
.gnav-compose-step-dot.active { background:#3b45cc; }

/* Body */
.gnav-compose-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* ── STEP 1: SEARCH + CONTACT LIST ── */
.gnav-compose-search-wrap {
  padding:10px 12px;
  border-bottom:1px solid #f0f0f0;
  flex-shrink:0;
  position:relative;
}
.gnav-compose-search-wrap svg {
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:#9ca3af; pointer-events:none;
}
.gnav-compose-search-input {
  width:100%; border:1.5px solid #e5e7eb; border-radius:20px;
  padding:7px 12px 7px 34px; font-size:.8rem; font-family:inherit;
  color:#1a1a1a; outline:none; background:#f9fafb;
  transition:border-color .15s, background .15s;
}
.gnav-compose-search-input:focus { border-color:#3b45cc; background:#fff; }
.gnav-compose-search-input::placeholder { color:#9ca3af; }

/* Chips row (selected recipients) */
.gnav-compose-chips-row {
  display:none; flex-wrap:wrap; gap:5px;
  padding:8px 12px 0; flex-shrink:0;
}
.gnav-compose-chips-row.has-chips { display:flex; }
.gnav-compose-chip {
  display:flex; align-items:center; gap:5px;
  background:#eef0fb; border-radius:20px;
  padding:3px 10px 3px 5px; font-size:.74rem; font-weight:600; color:#3b45cc;
}
.gnav-compose-chip img { width:20px; height:20px; border-radius:50%; object-fit:cover; }
.gnav-compose-chip button {
  background:none; border:none; cursor:pointer;
  color:#9ca3af; padding:0; display:flex; align-items:center;
  margin-left:2px;
}
.gnav-compose-chip button:hover { color:#dc2626; }
.gnav-compose-chip button svg { width:11px; height:11px; }
.gnav-compose-chip-more { background:#f3f4f6; color:#374151; font-weight:700; font-size:.74rem; border-radius:20px; padding:4px 10px; cursor:default; }

/* Section label */
.gnav-compose-section-label {
  padding:10px 14px 4px;
  font-size:.7rem; font-weight:700; color:#9ca3af;
  letter-spacing:.04em; text-transform:uppercase;
  flex-shrink:0;
}

/* Contact / result list */
.gnav-compose-list { overflow-y:auto; flex:1; min-height:0; }
.gnav-compose-result-item {
  display:flex; align-items:center; gap:11px;
  padding:9px 14px; cursor:pointer; transition:background .12s;
}
.gnav-compose-result-item:hover { background:#f3f4f6; }
.gnav-compose-result-item.picked { background:#eef0fb; }
.gnav-compose-result-avatar { position:relative; flex-shrink:0; }
.gnav-compose-result-avatar img { width:42px; height:42px; border-radius:50%; object-fit:cover; display:block; }
.gnav-compose-result-avatar .gnav-online-dot { width:10px; height:10px; bottom:1px; right:1px; border:2px solid #fff; }
.gnav-compose-result-text { flex:1; min-width:0; }
.gnav-compose-result-name { font-size:.82rem; font-weight:600; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gnav-compose-result-sub { font-size:.7rem; color:#9ca3af; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gnav-compose-result-check {
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid #d1d5db; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.gnav-compose-result-item.picked .gnav-compose-result-check { background:#3b45cc; border-color:#3b45cc; color:#fff; }
.gnav-compose-result-check svg { width:11px; height:11px; display:none; }
.gnav-compose-result-item.picked .gnav-compose-result-check svg { display:block; }
.gnav-compose-no-results { padding:20px 14px; font-size:.78rem; color:#9ca3af; text-align:center; }

/* ── STEP 2: MESSAGE COMPOSE ── */
.gnav-compose-msg-panel {
  display:none; flex-direction:column; flex:1; min-height:0;
}
.gnav-compose-msg-panel.active { display:flex; }
.gnav-compose-to-summary {
  padding:10px 14px 8px;
  font-size:.78rem; color:#6b7280;
  border-bottom:1px solid #f0f0f0; flex-shrink:0;
}
.gnav-compose-to-summary b { color:#1a1a1a; }
.gnav-compose-subject-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-bottom:1px solid #f0f0f0; flex-shrink:0;
}
.gnav-compose-subject-label { font-size:.78rem; color:#9ca3af; flex-shrink:0; }
.gnav-compose-subject-input {
  flex:1; border:none; outline:none; font-size:.8rem;
  font-family:inherit; color:#1a1a1a; background:transparent;
}
.gnav-compose-subject-input::placeholder { color:#b0b7c3; }
.gnav-compose-textarea {
  flex:1; width:100%; border:none; outline:none; resize:none;
  padding:12px 14px; font-size:.82rem; font-family:inherit;
  color:#1a1a1a; line-height:1.55;
}
.gnav-compose-textarea::placeholder { color:#9ca3af; }

/* Footer */
.gnav-compose-footer {
  border-top:1px solid #e9e9e9; padding:8px 12px;
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.gnav-compose-footer-tools { display:flex; gap:2px; }
.gnav-compose-tool-btn {
  background:none; border:none; cursor:pointer;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#6b7280; transition:background .15s;
}
.gnav-compose-tool-btn:hover { background:#f3f4f6; color:#3b45cc; }
.gnav-compose-tool-btn svg { width:16px; height:16px; }
.gnav-compose-btn {
  border:none; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:.78rem; padding:7px 18px;
  border-radius:20px; transition:background .15s, opacity .15s;
  margin-left:auto;
}
.gnav-compose-btn-primary { background:#3b45cc; color:#fff; }
.gnav-compose-btn-primary:disabled { background:#cdd0f2; cursor:not-allowed; }
.gnav-compose-btn-primary:not(:disabled):hover { background:#2f37a8; }
.gnav-compose-btn-ghost { background:none; color:#3b45cc; font-size:.78rem; font-weight:600; border:none; cursor:pointer; padding:6px 10px; border-radius:6px; font-family:inherit; }
.gnav-compose-btn-ghost:hover { background:#eef0fb; }

/* "Next" button in step 1 footer */
.gnav-compose-step1-footer {
  border-top:1px solid #e9e9e9; padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.gnav-compose-recipient-count { font-size:.74rem; color:#6b7280; }

/* Sent success state */
.gnav-compose-sent { display:none; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:10px; padding:32px 20px; text-align:center; }
.gnav-compose-sent.active { display:flex; }
.gnav-compose-sent-icon { width:52px; height:52px; border-radius:50%; background:#f0fdf4; display:flex; align-items:center; justify-content:center; }
.gnav-compose-sent-icon svg { width:26px; height:26px; color:#22c55e; }
.gnav-compose-sent h3 { font-size:.95rem; color:#1a1a1a; font-weight:700; margin:0; }
.gnav-compose-sent p { font-size:.78rem; color:#9ca3af; margin:0; }

@media (max-width:1024px) {
  .gnav-compose-overlay { display:none !important; }
}

@media (max-width: 1024px) {
    .footer-social a[aria-label="Instagram"] { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: white; }
    .footer-social a[aria-label="X (Twitter)"] { background: #000000; color: white; }
    .footer-social a[aria-label="LinkedIn"] { background: #0A66C2; color: white; }
    .footer-social a[aria-label="YouTube"] { background: #FF0000; color: white; }
    .footer-social a[aria-label="Discord"] { background: #5865F2; color: white; }
}