:root { --bg:#0f0f0f; --text:#f1f1f1; --text-secondary:#aaa; --accent:#ff0000; --card:#1a1a1a; --hover:#272727; }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:"Roboto",Arial,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

    header {
      position:fixed; top:0; left:0; right:0; height:56px;
      background:var(--bg); border-bottom:1px solid #303030;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 16px; z-index:1000;
    }
    .logo { font-size:22px; font-weight:bold; color:var(--accent); display:flex; align-items:center; gap:8px; text-decoration:none; }
    .logo i { font-size:26px; }

    .nav-links {
      display:flex; gap:26px; align-items:center; flex:1; justify-content:center;
    }
    .nav-links a {
      color:var(--text-secondary); text-decoration:none; font-size:14.5px; font-weight:500;
      padding:8px 0; position:relative; transition:color .2s;
    }
    .nav-links a:hover, .nav-links a.active { color:#fff; }
    .nav-links a.active::after {
      content:''; position:absolute; bottom:-8px; left:0; right:0; height:3px;
      background:var(--accent); border-radius:3px;
    }
    .menu-btn { display:none; color:#fff; font-size:26px; cursor:pointer; }

    .container { display:flex; margin-top:66px; padding:20px 15px; gap:24px; max-width:1800px; margin:auto; }
    .video-grid { flex:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px 16px; }
    .video-card { cursor:pointer; background:var(--card); border-radius:12px; overflow:hidden; transition:transform .2s; }
    .video-card:hover { transform:translateY(-5px); }
    .thumbnail { position:relative; width:100%; padding-top:56.25%; background:#000; overflow:hidden; }
    .thumbnail img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
    .duration { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.85); color:white; padding:4px 7px; border-radius:4px; font-size:13px; font-weight:600; }
    .video-info { padding:12px; display:flex; gap:12px; }
    .channel-avatar { width:36px; height:36px; border-radius:50%; background:#333; flex-shrink:0; }
    .video-details h3 { font-size:15px; line-height:1.4; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .views { font-size:13px; color:var(--text-secondary); }

    .sidebar { width:360px; flex-shrink:0; display:flex; flex-direction:column; gap:20px; }
    .sidebar-section { background:var(--card); border-radius:12px; padding:16px; }
    .section-title { font-size:16px; font-weight:600; margin-bottom:14px; color:#fff; display:flex; align-items:center; gap:8px; }

    .popular-video { display:flex; gap:10px; margin-bottom:12px; cursor:pointer; padding:6px; border-radius:8px; }
    .popular-video:hover { background:var(--hover); }
    .popular-thumb { width:120px; height:68px; border-radius:8px; overflow:hidden; flex-shrink:0; }
    .popular-thumb img { width:100%; height:100%; object-fit:cover; }

    .popular-info h4 { font-size:13.5px; line-height:1.3; margin-bottom:4px; }
    .popular-info p { font-size:12px; color:var(--text-secondary); }

    .playlist-item { display:flex; gap:10px; margin-bottom:12px; cursor:pointer; }
    .playlist-thumb { width:80px; height:60px; border-radius:8px; overflow:hidden; }
    .playlist-thumb img { width:100%; height:100%; object-fit:cover; }

    .ad-container { margin-top:16px; text-align:center; border:2px dashed #444; border-radius:8px; padding:12px; background:#111; transition:all .3s; }
    .ad-container.collapsed { height:50px; overflow:hidden; cursor:pointer; }
    .ad-container.expanded { height:auto; border-style:solid; }
    .ad-label { color:#888; font-size:13px; margin-bottom:8px; }

    .empty-state { grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--text-secondary); }
    .empty-state i { font-size:60px; margin-bottom:20px; opacity:0.6; }

    @media(max-width:1024px) { .nav-links { gap:18px; } }
    @media(max-width:900px) {
      .nav-links { display:none; position:absolute; top:56px; left:0; right:0; background:var(--bg); flex-direction:column; padding:20px; border-top:1px solid #303030; }
      .nav-links.active { display:flex; }
      .menu-btn { display:block; }
    }
    @media(max-width:1200px) { .sidebar { display:none; } }
    @media(max-width:768px) { .video-grid { grid-template-columns:1fr; } }

     /* Full-width footer container */
        .voidFooterRealm {
            width: 100%;
            background-color: #000;
            color: #fff;
            padding: clamp(20px, 3vw, 30px) clamp(10px, 1.5vw, 20px);
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            box-sizing: border-box;
        }

        /* Main footer content wrapper */
        .nebulaFooterCore {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: clamp(10px, 2vw, 20px);
            align-items: flex-start;
        }

        /* Logo section */
        .lunarLogoHub {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .lunarLogoHub a {
            display: inline-block;
        }

        .lunarLogoHub img {
            width: clamp(80px, 15vw, 120px);
            height: auto;
            filter: brightness(0) invert(1);
        }

        .lunarLogoHub p {
            font-size: clamp(10px, 2vw, 12px);
            opacity: 0.7;
            margin: 0;
            line-height: 1.3;
        }

        /* Navigation links */
        .astroNavCluster {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: clamp(6px, 1vw, 8px);
        }

        .astroNavCluster ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .astroNavCluster li {
            margin-bottom: 6px;
        }

        .astroNavCluster a {
            color: #fff;
            text-decoration: none;
            font-size: clamp(11px, 2vw, 13px);
            font-weight: 500;
            transition: color 0.3s ease, transform 0.2s ease;
        }

        .astroNavCluster a:hover {
            color: #007bff;
            transform: translateX(4px);
        }

        /* Social media section */
        .cosmicSocialSphere {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .cosmicSocialSphere h3 {
            font-size: clamp(14px, 2.5vw, 16px);
            font-weight: 600;
            margin: 0;
        }

        .stellarSocialIcons {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(6px, 1vw, 8px);
        }

        .stellarSocialIcons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transition: background 0.3s ease, transform 0.2s ease;
        }

        .stellarSocialIcons a:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }

        .stellarSocialIcons svg {
            width: 20px;
            height: 20px;
            fill: #fff;
        }

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .nebulaFooterCore {
                grid-template-columns: 1fr 1fr;
                gap: clamp(8px, 1.5vw, 15px);
            }

            .cosmicSocialSphere {
                grid-column: 1 / -1;
                align-items: center;
                text-align: center;
            }

            .stellarSocialIcons {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .voidFooterRealm {
                padding: clamp(10px, 2vw, 20px) clamp(8px, 1vw, 15px);
            }

            .nebulaFooterCore {
                grid-template-columns: 1fr;
                gap: clamp(10px, 2vw, 15px);
            }

            .lunarLogoHub {
                align-items: center;
                text-align: center;
            }

            .astroNavCluster {
                grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
                justify-items: center;
            }

            .astroNavCluster ul {
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            .voidFooterRealm {
                padding: clamp(8px, 1.5vw, 15px) clamp(5px, 0.75vw, 10px);
            }

            .lunarLogoHub img {
                width: clamp(60px, 20vw, 100px);
            }

            .lunarLogoHub p {
                font-size: clamp(9px, 2vw, 11px);
            }

            .astroNavCluster {
                grid-template-columns: 1fr;
            }

            .astroNavCluster ul {
                margin-bottom: 8px;
            }

            .astroNavCluster a {
                font-size: clamp(10px, 2vw, 12px);
            }

            .cosmicSocialSphere h3 {
                font-size: clamp(12px, 2.5vw, 14px);
            }

            .stellarSocialIcons a {
                width: 28px;
                height: 28px;
            }

            .stellarSocialIcons svg {
                width: 16px;
                height: 16px;
            }
        }

        @media (max-width: 360px) {
            .voidFooterRealm {
                padding: clamp(5px, 1.5vw, 10px) clamp(3px, 0.75vw, 5px);
            }

            .lunarLogoHub img {
                width: clamp(50px, 20vw, 80px);
            }

            .lunarLogoHub p {
                font-size: clamp(8px, 2vw, 10px);
            }

            .astroNavCluster a {
                font-size: clamp(9px, 2vw, 11px);
            }

            .cosmicSocialSphere h3 {
                font-size: clamp(11px, 2.5vw, 13px);
            }

            .stellarSocialIcons a {
                width: 24px;
                height: 24px;
            }

            .stellarSocialIcons svg {
                width: 14px;
                height: 14px;
            }
        }