:root{
      --bg: #0f0f0f;
      --surface: #121212;
      --surface-2: #1f1f1f;
      --text: #f1f1f1;
      --muted: #aaaaaa;
      --brand: #ff0033;
      --chip: #272727;
      --chip-active: #f1f1f1;
      --chip-active-text: #0f0f0f;
      --border: #2b2b2b;
    }

    /* Reset básico */
    *, *::before, *::after{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background:var(--bg); color:var(--text); }
    img{ display:block; max-width:100%; height:auto; }
    a{ color:inherit; text-decoration:none; }
    button{ font:inherit; color:inherit; }

    /* Layout raiz */
    .app{
      display:flex;
      flex-direction:column;
      min-height:100dvh;
    }

    /* HEADER */
    .header{
      position:sticky; top:0; z-index:50;
      display:flex; align-items:center; gap:16px;
      padding:10px 16px; background:var(--surface);
      border-bottom:1px solid var(--border);
    }
    .header__left{ display:flex; align-items:center; gap:12px; }
    .burger{ width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:transparent; display:grid; place-items:center; cursor:pointer; }
    .burger:focus-visible{ outline:2px solid white; outline-offset:2px; }
    .logo{ display:flex; align-items:center; gap:8px; font-weight:700; }
    .logo__dot{ width:12px; height:12px; background:var(--brand); border-radius:2px; display:inline-block; }

    .header__center{ flex:1; display:flex; justify-content:center; }
    .search{ display:flex; max-width:720px; width:100%; }
    .search__input{
      flex:1; padding:10px 12px; border:1px solid var(--border); border-right:none; border-radius:999px 0 0 999px; background:var(--surface-2); color:var(--text);
    }
    .search__btn{ width:64px; border:1px solid var(--border); border-left:none; background:var(--chip); border-radius:0 999px 999px 0; cursor:pointer; }
    .mic{ margin-left:8px; width:40px; height:40px; border-radius:999px; border:1px solid var(--border); background:var(--chip); display:grid; place-items:center; }

    .header__right{ display:flex; align-items:center; gap:10px; }
    .icon-btn{ width:40px; height:40px; display:grid; place-items:center; border-radius:999px; background:transparent; border:1px solid var(--border); cursor:pointer; }
    .avatar{ width:32px; height:32px; border-radius:999px; background:linear-gradient(45deg,#8b5cf6,#ec4899,#f59e0b); }

    /* WRAPPER: sidebar + conteúdo */
    .shell{ display:flex; flex:1; min-height:0; }

    /* SIDEBAR */
    .sidebar{
      width:240px; flex:0 0 240px; background:var(--surface); border-right:1px solid var(--border);
      display:flex; flex-direction:column; padding:12px 8px; gap:8px; overflow:auto;
    }
    .nav__group{ border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:8px; }
    .nav__item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; }
    .nav__item:hover{ background:var(--chip); }
    .nav__item--active{ background:var(--chip); font-weight:600; }

    /* MAIN */
    .main{ flex:1; min-width:0; display:flex; flex-direction:column; }

    /* Chips (categorias) */
    .chips{
      position:sticky; top:56px; z-index:40;
      display:flex; gap:8px; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border); overflow:auto;
    }
    .chip{ flex:0 0 auto; padding:8px 12px; border-radius:999px; background:var(--chip); color:var(--text); border:1px solid var(--border); cursor:pointer; white-space:nowrap; }
    .chip--active{ background:var(--chip-active); color:var(--chip-active-text); border-color:transparent; font-weight:600; }

    /* Grade de vídeos (usando FLEXBOX) */
    .videos{
      display:flex; flex-wrap:wrap; gap:16px; padding:16px; align-content:flex-start;
    }
    .video-card{
      flex:1 1 320px; /* base mínima */
      max-width: 1fr; /* deixa o flex decidir */
      min-width:260px; /* evita ficar estreito demais */
      display:flex; flex-direction:column; gap:10px;
      background:transparent; border-radius:12px; transition:transform .12s ease;
    }
    .video-card:hover{ transform: translateY(-2px); }
    .thumb{ width:100%; aspect-ratio:16/9; background:#222; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
    .thumb img{ width:100%; height:100%; object-fit:cover; }

    .video-meta{ display:flex; gap:12px; }
    .channel-avatar{ width:36px; height:36px; border-radius:999px; background:#333; flex:0 0 36px; overflow:hidden; }
    .meta-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
    .title{ font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .subline{ color:var(--muted); font-size:.9rem; }

    .video-card iframe {
      width: 100%;
      aspect-ratio: 16/9; 
      border-radius: 8px;
    }


    /* Responsividade */
    @media (max-width: 1200px){
      .sidebar{ width:80px; flex-basis:80px; }
      .nav__item span{ display:none; }
    }
    @media (max-width: 900px){
      .header__center{ order:3; width:100%; }
      .header{ flex-wrap:wrap; row-gap:8px; }
      .sidebar{ display:none; }
    }
    @media (max-width: 600px){
      .search__input{ min-width:0; }
      .chips{ top:108px; }
    }
    .clone-notice {
  position: fixed;       
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.5rem 1rem;
  z-index: 1000;          
  box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
}

.clone-notice strong {
  color: var(--brand);      
}



    /* Estado de tema claro opcional */
        .light {
        --bg: #f7f7f7;
        --surface: #ffffff;
        --surface-2: #f3f3f3;
        --text: #111111;           
        --muted: #333333;         
        --chip: #f0f0f0;
        --chip-active: #0077ff;
        --chip-active-text: #ffffff; 
        --border: #dcdcdc;
        }

        .light .menu a,
        .light .sidebar a, .burger, .logo, .mic, .icon-btn, .search {
        color: var(--text);         
        font-weight: 500;          
        }

        .light .menu a:hover,
        .light .sidebar a:hover {
        color: #000000;             
        }

        /* Tema escuro */
        .dark {
        --bg: #121212;
        --surface: #1e1e1e;
        --surface-2: #2a2a2a;

        --text: #f2f2f2;             
        --muted: #aaaaaa;            
        --chip: #2a2a2a;            
        --chip-active: #0077ff;      
        --chip-active-text: #ffffff; 

        --border: #333333;
        }