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

        :root {
            --accent: #7c3aed;
            --accent-glow: rgba(124, 58, 237, 0.5);
            --bg-dark: #0f172a;
            --card-bg: #1e293b;
            --text-main: #f8fafc;
            --text-dim: #94a3b8;
            --poly-gradient: linear-gradient(135deg, #00f2fe 0%, #7c3aed 100%);
            --danger: #ff4757;
            --success: #00d2d3;
        }

        body { 
            font-family: 'Outfit', sans-serif; 
            margin: 0; 
            background: var(--bg-dark); 
            color: var(--text-main);
            padding-bottom: 120px;
            overflow-x: hidden;
        }

        /* --- NEW MARQUEE FEATURE --- */
        .brand-marquee {
            background: #000;
            color: #fff;
            padding: 10px 0;
            border-bottom: 1px solid var(--accent);
            overflow: hidden;
            white-space: nowrap;
        }
        .marquee-inner {
            display: inline-block;
            animation: marquee 20s linear infinite;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: 1px;
        }
        .marquee-inner span { color: var(--success); margin: 0 20px; }
        @keyframes marquee {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        /* --- HEADER --- */
        .brand-header {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(10px);
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .logo-container { display: flex; align-items: center; gap: 12px; }
        .logo-s-hex {
            width: 42px; height: 42px; background: var(--poly-gradient);
            display: flex; align-items: center; justify-content: center;
            border-radius: 12px; font-weight: 800; font-size: 24px; color: white;
            box-shadow: 0 0 15px var(--accent-glow); transform: rotate(-5deg);
        }
        .logo-text { font-weight: 800; font-size: 20px; background: var(--poly-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        /* --- CHART SECTION --- */
        .chart-box { background: var(--card-bg); margin: 20px; padding: 20px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); }

        /* --- SEARCH --- */
        .vast-card { margin: 20px; background: var(--card-bg); padding: 20px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); }
        .input-vast { width: 100%; padding: 16px; border-radius: 16px; border: 2px solid #334155; background: #0f172a; color: white; font-family: inherit; font-size: 16px; box-sizing: border-box; }
        .btn-vast { background: var(--poly-gradient); color: white; border: none; padding: 16px; border-radius: 16px; width: 100%; font-weight: 800; cursor: pointer; margin-top: 10px; }

        /* --- CHANNEL PROFILE BOX --- */
        .channel-nexus-box { margin: 20px; padding: 25px; background: var(--card-bg); border-radius: 28px; border: 1px solid rgba(255,255,255,0.1); }
        .nexus-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
        .c-avatar { width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--accent); }
        .nexus-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 15px; }
        .n-stat { display: flex; flex-direction: column; }
        .n-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; }
        .n-val { font-size: 18px; font-weight: 800; color: white; }

        /* --- MONETIZATION BADGE --- */
        .m-status { margin-top: 15px; padding: 8px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
        .is-mon { background: rgba(0, 210, 211, 0.15); color: var(--success); border: 1px solid var(--success); }
        .not-mon { background: rgba(255, 71, 87, 0.15); color: var(--danger); border: 1px solid var(--danger); }

        /* --- VIDEO LISTS --- */
        .section-title { padding: 25px 20px 10px; font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; }
        .v-row { display: flex; gap: 15px; padding: 12px; background: var(--card-bg); margin: 0 20px 12px; border-radius: 18px; align-items: center; }
        .v-row img { width: 110px; height: 70px; border-radius: 10px; object-fit: cover; }
        .v-info { flex: 1; }
        .v-title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; }
        .v-meta { font-size: 10px; color: var(--text-dim); line-height: 1.4; }
        .v-pill { font-size: 9px; font-weight: 700; background: #334155; padding: 4px 8px; border-radius: 6px; color: #cbd5e1; margin-top: 5px; display: inline-block; }

        /* --- CONGRATULATIONS FRAME --- */
        #frame-capture-zone { background: #000; padding: 40px 20px; border-radius: 30px; text-align: center; border: 5px solid #ffd700; position: relative; margin: 20px; }
        .frame-congrats { font-size: 14px; letter-spacing: 4px; color: #ffd700; font-weight: 800; text-transform: uppercase; }
        .frame-main-val { font-size: 50px; font-weight: 800; margin: 15px 0; background: var(--poly-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        /* --- BOTTOM MENU --- */
        .nav-dock-container { position: fixed; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; z-index: 2000; }
        .nav-dock { background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(20px); padding: 8px 30px; border-radius: 40px; display: flex; gap: 40px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
        .nav-btn { display: flex; flex-direction: column; align-items: center; color: var(--text-dim); text-decoration: none; cursor: pointer; transition: 0.3s; }
        .nav-btn span { font-size: 10px; font-weight: 800; text-transform: uppercase; margin-top: 4px; }
        .nav-btn.active { color: #fff; transform: translateY(-5px); }
        .nav-btn.active span { color: var(--accent); }

        .page-content { display: none; }
        .active-page { display: block; }
        #loader { display: none; text-align: center; padding: 60px 0; }
        .spinner { width: 40px; height: 40px; border: 4px solid #334155; border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s infinite; }
        @keyframes spin { 100% { transform: rotate(360deg); } }