/* ==========================================================================
   Video Gallery Pro — estilos do frontend
   Cores por galeria vêm de variáveis --vgp-* inline (VGP_Frontend::color_vars_css).
   Os "presets" (.vgp-preset-*) só redefinem tokens de forma/espaçamento, então
   qualquer esquema de cor funciona com qualquer preset.
   ========================================================================== */

.vgp-gallery {
    /* Forma e espaçamento (sobrescritos pelos presets) */
    --vgp-radius: 14px;
    --vgp-radius-sm: 10px;
    --vgp-radius-pill: 999px;
    --vgp-surface: transparent;
    --vgp-surface-pad: 0px;
    --vgp-shadow: none;
    --vgp-shadow-hover: 0 10px 28px rgba(0, 0, 0, .16);
    --vgp-title-size: 15px;
    --vgp-title-weight: 600;
    --vgp-lift: -3px;
    --vgp-blur: none;
    --vgp-sticky-top: 16px;

    /* Tons derivados, para não repetir color-mix em toda regra */
    --vgp-soft: color-mix(in srgb, var(--vgp-text, #0f0f0f) 7%, transparent);
    --vgp-soft-strong: color-mix(in srgb, var(--vgp-text, #0f0f0f) 14%, transparent);

    color: var(--vgp-text, #0f0f0f);
    background: var(--vgp-bg, #fff);
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    margin: 0 auto;
    padding: 4px;
}
.vgp-gallery *, .vgp-gallery *::before, .vgp-gallery *::after { box-sizing: border-box; }
.vgp-gallery button { font-family: inherit; }
.vgp-gallery [hidden] { display: none !important; }
.vgp-ic { flex-shrink: 0; }

.vgp-gallery :focus-visible {
    outline: 2px solid var(--vgp-accent, #f00);
    outline-offset: 2px;
}

/* ------------------------------ Presets --------------------------------- */

/* Suave: cantos generosos, cards com fundo e elevação. */
.vgp-preset-soft {
    --vgp-radius: 18px;
    --vgp-radius-sm: 14px;
    --vgp-surface: var(--vgp-card-bg, transparent);
    --vgp-surface-pad: 10px;
    --vgp-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    --vgp-shadow-hover: 0 14px 34px rgba(0, 0, 0, .18);
    --vgp-title-size: 15px;
}

/* Vidro: superfícies translúcidas com desfoque. */
.vgp-preset-glass {
    --vgp-radius: 18px;
    --vgp-radius-sm: 14px;
    --vgp-surface: color-mix(in srgb, var(--vgp-card-bg, #fff) 55%, transparent);
    --vgp-surface-pad: 10px;
    --vgp-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vgp-text, #000) 10%, transparent);
    --vgp-shadow-hover: 0 16px 40px rgba(0, 0, 0, .22);
    --vgp-blur: saturate(150%) blur(12px);
}

/* Marcante: contraste alto, cantos retos, tipografia forte. */
.vgp-preset-bold {
    --vgp-radius: 6px;
    --vgp-radius-sm: 4px;
    --vgp-radius-pill: 6px;
    --vgp-surface: var(--vgp-card-bg, transparent);
    --vgp-surface-pad: 10px;
    --vgp-shadow: 0 0 0 1px var(--vgp-border, #e5e5e5);
    --vgp-shadow-hover: 0 12px 26px rgba(0, 0, 0, .22);
    --vgp-title-size: 16px;
    --vgp-title-weight: 700;
    --vgp-lift: 0px;
}

/* Contornado: cada card ganha uma moldura fina. É o que resolve o "tudo
   se mistura" no escuro, onde só o espaço entre os itens não basta. */
.vgp-preset-outline {
    --vgp-radius: 14px;
    --vgp-radius-sm: 10px;
    --vgp-surface: var(--vgp-card-bg, transparent);
    --vgp-surface-pad: 10px;
    --vgp-shadow: inset 0 0 0 1px var(--vgp-border, #e5e5e5);
    --vgp-shadow-hover: inset 0 0 0 1px var(--vgp-accent, #f00), 0 10px 26px rgba(0, 0, 0, .25);
    --vgp-lift: -2px;
}

/* Elevado: fundo próprio e sombra forte — separa por profundidade. */
.vgp-preset-elevated {
    --vgp-radius: 16px;
    --vgp-radius-sm: 12px;
    --vgp-surface: var(--vgp-card-bg, transparent);
    --vgp-surface-pad: 12px;
    --vgp-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in srgb, var(--vgp-border, #888) 60%, transparent);
    --vgp-shadow-hover: 0 18px 40px rgba(0, 0, 0, .38);
    --vgp-title-size: 15.5px;
    --vgp-lift: -4px;
}

/* Compacto: mais vídeos na tela. */
.vgp-preset-compact {
    --vgp-radius: 10px;
    --vgp-radius-sm: 8px;
    --vgp-title-size: 13.5px;
    --vgp-lift: -2px;
    --vgp-shadow-hover: 0 6px 18px rgba(0, 0, 0, .14);
}
.vgp-preset-compact .vgp-card-info { padding-top: 8px; }
.vgp-preset-compact .vgp-card-meta,
.vgp-preset-compact .vgp-card-desc { font-size: 12px; }

/* ------------------------------ Avisos ---------------------------------- */

.vgp-error {
    padding: 12px 16px;
    background: #fef3f2;
    border: 1px solid #fda29b;
    color: #b42318;
    border-radius: 8px;
}
.vgp-empty-front {
    color: var(--vgp-text-muted, #606060);
    padding: 40px 24px;
    text-align: center;
    font-size: 15px;
}

/* ----------------------------- Header ----------------------------------- */

.vgp-header {
    background: var(--vgp-header-bg, #fafafa);
    color: var(--vgp-header-text, #0f0f0f);
    border-radius: var(--vgp-radius);
    margin-bottom: 18px;
    overflow: hidden;
}
.vgp-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}
.vgp-header-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--vgp-accent, #f00);
    color: var(--vgp-accent-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
}
.vgp-header-text { flex: 1; min-width: 0; }
.vgp-channel-name { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: inherit; line-height: 1.2; }
.vgp-channel-counters { font-size: 13px; opacity: .8; }
.vgp-channel-desc { margin: 8px 0 0; font-size: 14px; opacity: .9; }
.vgp-subscribe {
    background: var(--vgp-accent, #f00);
    color: var(--vgp-accent-text, #fff);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: var(--vgp-radius-pill);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity .15s, transform .15s;
}
.vgp-subscribe:hover { opacity: .88; transform: translateY(-1px); }

.vgp-header-accent .vgp-header-inner { flex-direction: column; text-align: center; }
.vgp-header-accent .vgp-header-logo { width: 88px; height: 88px; }
.vgp-header-minimal .vgp-header { background: transparent; }
.vgp-header-minimal .vgp-header-inner { padding: 8px 4px; }
.vgp-header-minimal .vgp-header-logo { width: 48px; height: 48px; font-size: 22px; }

@media (max-width: 600px) {
    .vgp-header-inner { flex-direction: column; text-align: center; padding: 16px; gap: 10px; }
    .vgp-header-logo { width: 56px; height: 56px; font-size: 24px; }
    .vgp-channel-name { font-size: 18px; }
}

/* ----------------------------- Toolbar ---------------------------------- */

.vgp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    min-width: 0;
}
.vgp-toolbar-nav { flex: 1; min-width: 0; }

/* Abas ------------------------------------------------------------------- */

.vgp-tabs-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.vgp-tabs-scroller {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.vgp-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: var(--vgp-soft);
    color: var(--vgp-text, #0f0f0f);
    padding: 8px 14px;
    border-radius: var(--vgp-radius-pill);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .15s, color .15s, transform .15s;
}
.vgp-tab-btn:hover { background: var(--vgp-soft-strong); }
.vgp-tab-btn:active { transform: scale(.97); }
.vgp-tab-btn.active {
    background: var(--vgp-tab-active, #0f0f0f);
    color: var(--vgp-bg, #fff);
}
.vgp-tab-fav .vgp-ic { color: var(--vgp-accent, #f00); }
.vgp-tab-fav.active .vgp-ic { color: inherit; }

/* Categorias em árvore ---------------------------------------------------
   A seta à direita avisa que dá para entrar na categoria; o botão de voltar
   (à esquerda da fileira) devolve o nível anterior. */

.vgp-tab-btn .vgp-ic-into { opacity: .55; margin-left: -1px; }
.vgp-tab-btn.active .vgp-ic-into { opacity: .8; }

.vgp-tab-up {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--vgp-border, #e5e5e5);
    font-weight: 600;
}
.vgp-tab-up:hover { background: var(--vgp-soft); }

/* Caminho da categoria atual (cursos › eletrônica › módulo 1) */
.vgp-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--vgp-text-muted, #666);
}
.vgp-crumb {
    border: none;
    background: transparent;
    color: inherit;
    padding: 2px 4px;
    border-radius: var(--vgp-radius-sm);
    cursor: pointer;
    font: inherit;
}
.vgp-crumb:hover { background: var(--vgp-soft); color: var(--vgp-text, #0f0f0f); }
.vgp-crumb-current { color: var(--vgp-text, #0f0f0f); font-weight: 600; cursor: default; }
.vgp-crumb-current:hover { background: transparent; }
.vgp-crumb-sep { opacity: .6; }

/* Botão-atalho de categorias (⋯ / ícone de lista) ------------------------ */

.vgp-cats-more,
.vgp-cats-trigger,
.vgp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    background: var(--vgp-soft);
    color: var(--vgp-text, #0f0f0f);
    border-radius: var(--vgp-radius-pill);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: background .15s, transform .15s;
}
.vgp-cats-more:hover,
.vgp-cats-trigger:hover,
.vgp-icon-btn:hover { background: var(--vgp-soft-strong); }
.vgp-cats-more:active,
.vgp-cats-trigger:active { transform: scale(.96); }

.vgp-cats-more { width: 38px; height: 38px; flex-shrink: 0; position: relative; }
.vgp-cats-more-label { display: none; }
.vgp-cats-more.vgp-has-filter::after {
    content: "";
    position: absolute;
    top: 7px; right: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--vgp-accent, #f00);
}

.vgp-cats-trigger { padding: 9px 14px; max-width: 100%; }
.vgp-cats-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.vgp-ic-caret { opacity: .6; }

.vgp-icon-btn { width: 38px; height: 38px; }

/* Lista suspensa --------------------------------------------------------- */

.vgp-cat-select-wrap { position: relative; display: inline-flex; }
.vgp-cat-select-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    opacity: .55;
}
.vgp-cat-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 38px 9px 16px;
    border: 1px solid var(--vgp-border, #e5e5e5);
    border-radius: var(--vgp-radius-pill);
    background: var(--vgp-card-bg, var(--vgp-bg, #fff));
    color: var(--vgp-text, #0f0f0f);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    max-width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.vgp-cat-select:hover { border-color: color-mix(in srgb, var(--vgp-text, #000) 30%, transparent); }
.vgp-cat-select:focus {
    outline: none;
    border-color: var(--vgp-accent, #f00);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vgp-accent, #f00) 22%, transparent);
}
.vgp-cat-select option { background: var(--vgp-card-bg, #fff); color: var(--vgp-text, #0f0f0f); }

/* Chip do filtro ativo ---------------------------------------------------- */

.vgp-activefilter { margin: -4px 0 14px; }
.vgp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vgp-soft);
    color: var(--vgp-text, #0f0f0f);
    border-radius: var(--vgp-radius-pill);
    padding: 6px 8px 6px 14px;
    font-size: 13px;
    font-weight: 600;
}
.vgp-chip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--vgp-soft-strong);
    color: inherit;
    cursor: pointer;
    padding: 0;
}
.vgp-chip-clear:hover { background: var(--vgp-accent, #f00); color: var(--vgp-accent-text, #fff); }
/* No desktop as abas já mostram o filtro ativo. */
@media (min-width: 769px) {
    .vgp-cats-tabs .vgp-activefilter { display: none; }
}

/* ------------------------------ Busca ----------------------------------- */

.vgp-search { display: flex; align-items: center; flex-shrink: 0; }
.vgp-search-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 14px;
    height: 38px;
    border: 1px solid var(--vgp-border, #e5e5e5);
    border-radius: var(--vgp-radius-pill);
    background: var(--vgp-card-bg, var(--vgp-bg, #fff));
    color: var(--vgp-text-muted, #606060);
    transition: border-color .15s, box-shadow .15s;
}
.vgp-search-inline:focus-within {
    border-color: var(--vgp-accent, #f00);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vgp-accent, #f00) 20%, transparent);
}
.vgp-search-input {
    border: none;
    background: transparent;
    color: var(--vgp-text, #0f0f0f);
    font-size: 14px;
    min-width: 200px;
    padding: 0;
    height: 100%;
}
.vgp-search-input:focus { outline: none; }
.vgp-search-input::-webkit-search-cancel-button { display: none; }
.vgp-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--vgp-text-muted, #666);
    cursor: pointer;
    padding: 0;
}
.vgp-search-clear:hover { background: var(--vgp-soft); }

.vgp-search-toggle { display: none; width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--vgp-soft); color: var(--vgp-text, #0f0f0f); cursor: pointer; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.vgp-search-toggle:hover { background: var(--vgp-soft-strong); }
.vgp-search-toggle:active { transform: scale(.94); }

/* Sempre em overlay (lupa) */
.vgp-search--overlay .vgp-search-inline { display: none; }
.vgp-search--overlay .vgp-search-toggle { display: inline-flex; }

/* ------------------------------ Grade ----------------------------------- */

.vgp-grid {
    display: grid;
    grid-template-columns: repeat(var(--vgp-columns, 3), minmax(0, 1fr));
    gap: var(--vgp-gutter, 20px);
}
@media (max-width: 1024px) {
    .vgp-grid { grid-template-columns: repeat(var(--vgp-columns-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .vgp-grid { grid-template-columns: repeat(var(--vgp-columns-mobile, 1), minmax(0, 1fr)); }
}

/* ------------------------------ Card ------------------------------------ */

.vgp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background: var(--vgp-surface);
    padding: var(--vgp-surface-pad);
    border-radius: var(--vgp-radius);
    box-shadow: var(--vgp-shadow);
    backdrop-filter: var(--vgp-blur);
    -webkit-backdrop-filter: var(--vgp-blur);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.vgp-card:hover { transform: translateY(var(--vgp-lift)); box-shadow: var(--vgp-shadow-hover); }
.vgp-card.vgp-hidden { display: none !important; }
.vgp-card.vgp-current { background: var(--vgp-soft); }

.vgp-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--vgp-radius-sm);
    overflow: hidden;
}
.vgp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

/* Vídeo sem capa (arquivo local num servidor sem ffmpeg): em vez de uma
   imagem quebrada, um fundo próprio com o ícone de filme. */
.vgp-card-thumb-blank { background: linear-gradient( 160deg, #23262b, #12141a ); }
.vgp-card-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .35);
}
.vgp-card:hover .vgp-card-img { transform: scale(1.05); }

.vgp-card-dur {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: .2px;
}

/* Ícone de play: dimensionado em % da miniatura, então nunca fica
   desproporcional em cards pequenos (lista lateral, mobile). */
.vgp-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(30px, 15%, 54px);
    aspect-ratio: 3 / 2;
    transform: translate(-50%, -50%) scale(.85);
    background: var(--vgp-accent, #f00);
    border-radius: 22%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.vgp-card-play::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vgp-accent-text, #fff);
    clip-path: polygon(38% 28%, 38% 72%, 68% 50%);
}
.vgp-card:hover .vgp-card-play { opacity: .96; transform: translate(-50%, -50%) scale(1); }
.vgp-card-thumb.vgp-playing .vgp-card-play,
.vgp-card-thumb.vgp-playing .vgp-card-dur { display: none; }
.vgp-card-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vgp-card-info { padding: 10px 2px 0; min-width: 0; }
.vgp-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--vgp-title-size);
    font-weight: var(--vgp-title-weight);
    line-height: 1.35;
    color: var(--vgp-text, #0f0f0f);
    text-decoration: none;
}
.vgp-card-title:hover { text-decoration: none; color: var(--vgp-text, #0f0f0f); }
.vgp-card-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--vgp-text-muted, #606060); }
.vgp-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--vgp-text-muted, #606060);
}

/* Layout horizontal ------------------------------------------------------ */
.vgp-vlayout-horizontal .vgp-card { flex-direction: row; gap: 14px; align-items: flex-start; }
.vgp-vlayout-horizontal .vgp-card-thumb { width: 246px; flex-shrink: 0; }
.vgp-vlayout-horizontal .vgp-card-info { padding-top: 2px; }
@media (max-width: 600px) {
    .vgp-vlayout-horizontal .vgp-card { flex-direction: column; }
    .vgp-vlayout-horizontal .vgp-card-thumb { width: 100%; }
}

/* Layout cinema: infos aparecem sobre a miniatura no hover ---------------- */
.vgp-vlayout-cinema .vgp-card-info {
    position: absolute;
    left: var(--vgp-surface-pad); right: var(--vgp-surface-pad); bottom: var(--vgp-surface-pad);
    padding: 34px 14px 12px;
    border-radius: 0 0 var(--vgp-radius-sm) var(--vgp-radius-sm);
    background: linear-gradient(transparent, rgba(0, 0, 0, .88));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s, transform .22s;
}
.vgp-vlayout-cinema .vgp-card-info,
.vgp-vlayout-cinema .vgp-card-title,
.vgp-vlayout-cinema .vgp-card-meta,
.vgp-vlayout-cinema .vgp-card-desc { color: #fff; }
.vgp-vlayout-cinema .vgp-card:hover .vgp-card-info,
.vgp-vlayout-cinema .vgp-card:focus-within .vgp-card-info { opacity: 1; transform: translateY(0); }

/* Layout overlay: infos sempre visíveis sobre a miniatura ----------------- */
.vgp-vlayout-overlay .vgp-card-thumb { border-radius: var(--vgp-radius); }
.vgp-vlayout-overlay .vgp-card-info {
    position: absolute;
    left: var(--vgp-surface-pad); right: var(--vgp-surface-pad); bottom: var(--vgp-surface-pad);
    padding: 44px 14px 12px;
    border-radius: 0 0 var(--vgp-radius) var(--vgp-radius);
    background: linear-gradient(transparent, rgba(0, 0, 0, .45) 35%, rgba(0, 0, 0, .9));
}
.vgp-vlayout-overlay .vgp-card-title,
.vgp-vlayout-overlay .vgp-card-meta,
.vgp-vlayout-overlay .vgp-card-desc { color: #fff; }
.vgp-vlayout-overlay .vgp-card-meta { opacity: .85; }
.vgp-vlayout-overlay .vgp-card-desc { display: none; }

/* Layout card: superfície elevada mesmo fora dos presets ----------------- */
.vgp-vlayout-card .vgp-card {
    background: var(--vgp-card-bg, #fff);
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.vgp-vlayout-card .vgp-card:hover { box-shadow: var(--vgp-shadow-hover); }
.vgp-vlayout-card .vgp-card-info { padding: 12px 4px 4px; }

/* --------------------------- Favoritos ---------------------------------- */

.vgp-fav-btn {
    position: absolute;
    top: calc(var(--vgp-surface-pad) + 8px);
    left: calc(var(--vgp-surface-pad) + 8px);
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity .15s, transform .15s, background .15s;
}
.vgp-card:hover .vgp-fav-btn,
.vgp-fav-btn.active,
.vgp-fav-btn:focus-visible { opacity: 1; }
.vgp-fav-btn:hover { background: rgba(0, 0, 0, .8); transform: scale(1.08); }
.vgp-fav-btn svg { fill: none; stroke: #fff; stroke-width: 2; }
.vgp-fav-btn.active svg { fill: var(--vgp-accent, #f00); stroke: var(--vgp-accent, #f00); }

/* --------------------- Rodapé da lista: mais / páginas ------------------ */

.vgp-listnav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}
.vgp-loadmore {
    background: transparent;
    border: 1px solid var(--vgp-border, #e5e5e5);
    color: var(--vgp-text, #0f0f0f);
    padding: 10px 26px;
    border-radius: var(--vgp-radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.vgp-loadmore:hover { background: var(--vgp-soft); border-color: transparent; }
.vgp-loadmore:active { transform: scale(.97); }

.vgp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.vgp-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--vgp-radius-sm);
    background: var(--vgp-soft);
    color: var(--vgp-text, #0f0f0f);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
.vgp-page-btn:hover:not(:disabled) { background: var(--vgp-soft-strong); }
.vgp-page-btn:active:not(:disabled) { transform: scale(.95); }
.vgp-page-btn.active {
    background: var(--vgp-tab-active, #0f0f0f);
    color: var(--vgp-bg, #fff);
}
.vgp-page-btn:disabled { opacity: .35; cursor: default; }
.vgp-page-gap { padding: 0 4px; color: var(--vgp-text-muted, #666); }

/* ----------------------- Template player + lista ------------------------ */

.vgp-playlist { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .vgp-playlist { grid-template-columns: 1fr; } }

.vgp-playlist-player { position: sticky; top: var(--vgp-sticky-top); }
@media (max-width: 900px) { .vgp-playlist-player { position: static; } }

.vgp-playlist-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000 center/cover no-repeat;
    border-radius: var(--vgp-radius);
    overflow: hidden;
    cursor: pointer;
}
.vgp-playlist-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vgp-playlist-play {
    position: absolute;
    top: 50%; left: 50%;
    width: clamp(46px, 9%, 76px);
    aspect-ratio: 3 / 2;
    transform: translate(-50%, -50%);
    background: var(--vgp-accent, #f00);
    border: none;
    border-radius: 18%;
    cursor: pointer;
    padding: 0;
    transition: transform .18s, opacity .18s;
}
.vgp-playlist-play::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vgp-accent-text, #fff);
    clip-path: polygon(38% 28%, 38% 72%, 68% 50%);
}
.vgp-playlist-stage:hover .vgp-playlist-play { transform: translate(-50%, -50%) scale(1.06); }

.vgp-playlist-title { margin: 14px 2px 4px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.vgp-playlist-submeta { margin: 0 2px; font-size: 13px; color: var(--vgp-text-muted, #606060); }
.vgp-playlist-submeta:empty { display: none; }

.vgp-playlist-side { min-width: 0; }
.vgp-playlist-items { display: flex; flex-direction: column; gap: 10px; }
.vgp-playlist-items .vgp-card { flex-direction: row; gap: 10px; align-items: flex-start; padding: 6px; border-radius: var(--vgp-radius-sm); }
.vgp-playlist-items .vgp-card:hover { transform: none; background: var(--vgp-soft); box-shadow: none; }
.vgp-playlist-items .vgp-card-thumb { width: 158px; flex-shrink: 0; }
.vgp-playlist-items .vgp-card-desc { display: none; }
/* A lista lateral é sempre horizontal: neutraliza os layouts de card que
   sobrepõem as informações à capa (cinema/sobreposto). */
.vgp-playlist-items .vgp-card-info {
    position: static;
    padding: 0;
    background: none;
    opacity: 1;
    transform: none;
}
.vgp-playlist-items .vgp-card-title { font-size: 14px; -webkit-line-clamp: 2; line-clamp: 2; color: var(--vgp-text, #0f0f0f); }
.vgp-playlist-items .vgp-card-meta { color: var(--vgp-text-muted, #606060); }
.vgp-playlist-items .vgp-card.vgp-current { background: var(--vgp-soft-strong); }
.vgp-playlist-items .vgp-fav-btn { width: 28px; height: 28px; top: 10px; left: 10px; }
.vgp-playlist-items .vgp-fav-btn svg { width: 15px; height: 15px; }
.vgp-playlist .vgp-listnav { margin-top: 16px; }

@media (max-width: 420px) {
    .vgp-playlist-items .vgp-card-thumb { width: 130px; }
    .vgp-playlist-items .vgp-card-title { font-size: 13px; }
}

/* ------------------------------ Modal ----------------------------------- */

.vgp-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vgp-modal.vgp-open { display: flex; }
.vgp-modal-overlay {
    position: absolute;
    inset: 0;
    background: var(--vgp-popup-overlay, rgba(0, 0, 0, .85));
    animation: vgp-fade .2s ease;
}
.vgp-modal-box {
    position: relative;
    width: min(960px, 96vw);
    max-height: 92vh;
    /* Coluna com o player fixo e apenas a descrição rolando: assim os botões
       de fechar/tela cheia nunca somem ao rolar um texto longo. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--vgp-popup-bg, #fff);
    border-radius: var(--vgp-radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .08);
    animation: vgp-pop .22s cubic-bezier(.2, .9, .3, 1);
}
.vgp-modal-player { position: relative; aspect-ratio: 16 / 9; background: #000; flex-shrink: 0; }
.vgp-modal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vgp-modal-meta { padding: 16px 20px 20px; color: var(--vgp-text, #0f0f0f); overflow-y: auto; }
.vgp-modal-meta:empty { display: none; }
.vgp-modal-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.vgp-modal-submeta { font-size: 13px; color: var(--vgp-text-muted, #606060); }
.vgp-modal-desc { margin: 12px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-line; }
.vgp-modal-desc a { color: var(--vgp-accent, #f00); }

.vgp-modal-close, .vgp-modal-fs {
    position: absolute;
    top: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}
.vgp-modal-close { right: 10px; }
.vgp-modal-fs { right: 56px; font-size: 16px; }
.vgp-modal-fs::before { content: "⛶"; }
.vgp-modal-close:hover, .vgp-modal-fs:hover { background: rgba(0, 0, 0, .82); }

body.vgp-modal-lock { overflow: hidden; }

/* ------------------ Painel de categorias (folha / modal) ---------------- */

.vgp-cats-panel { position: fixed; inset: 0; z-index: 100000; display: none; }
.vgp-cats-panel.vgp-open { display: block; }
.vgp-cats-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    animation: vgp-fade .2s ease;
}
.vgp-cats-panel-box {
    position: absolute;
    background: var(--vgp-card-bg, var(--vgp-bg, #fff));
    color: var(--vgp-text, #0f0f0f);
    box-shadow: 0 -10px 50px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vgp-cats-panel-grabber { display: none; }

/* Variante folha inferior */
.vgp-cats-panel--sheet .vgp-cats-panel-box {
    left: 0; right: 0; bottom: 0;
    border-radius: 20px 20px 0 0;
    max-height: 78vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: vgp-slide-up .26s cubic-bezier(.2, .9, .3, 1);
}
.vgp-cats-panel--sheet .vgp-cats-panel-grabber {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--vgp-border, #ccc);
    margin: 10px auto 0;
    flex-shrink: 0;
}

/* Variante modal centralizado */
.vgp-cats-panel--modal .vgp-cats-panel-box {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 92vw);
    max-height: 80vh;
    border-radius: var(--vgp-radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    animation: vgp-pop .22s cubic-bezier(.2, .9, .3, 1);
}

.vgp-cats-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px 20px;
    flex-shrink: 0;
}
.vgp-cats-panel-title { font-weight: 700; font-size: 16px; }
.vgp-cats-panel-close { background: var(--vgp-soft); }

.vgp-cats-panel-list {
    list-style: none;
    margin: 0;
    padding: 0 12px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.vgp-cats-panel-list li { margin: 0; padding: 0; list-style: none; }
.vgp-panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--vgp-text, #0f0f0f);
    padding: 13px 14px;
    font-size: 15.5px;
    font-weight: 500;
    border-radius: var(--vgp-radius-sm);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.vgp-panel-item-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vgp-panel-item-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--vgp-text-muted, #666);
    background: var(--vgp-soft);
    border-radius: var(--vgp-radius-pill);
    padding: 2px 9px;
    flex-shrink: 0;
}
/* No painel a árvore inteira aparece de uma vez: o recuo mostra o nível, e a
   guia vertical liga a subcategoria ao pai. */
.vgp-panel-item { padding-left: calc( 14px + var( --vgp-item-depth, 0 ) * 18px ); }
.vgp-panel-item[data-depth]:not([data-depth="0"]) .vgp-panel-item-label::before {
    content: "";
    width: 8px;
    height: 1px;
    background: currentColor;
    opacity: .35;
    flex-shrink: 0;
}
.vgp-panel-item[data-depth]:not([data-depth="0"]) { font-size: 14.5px; font-weight: 400; }
.vgp-panel-item:hover { background: var(--vgp-soft); }
.vgp-panel-item.active { background: var(--vgp-tab-active, #0f0f0f); color: var(--vgp-bg, #fff); font-weight: 700; }
.vgp-panel-item.active .vgp-panel-item-count { background: rgba(255, 255, 255, .22); color: inherit; }
.vgp-panel-fav .vgp-ic { color: var(--vgp-accent, #f00); }
.vgp-panel-item.active .vgp-ic { color: inherit; }

/* --------------------- Overlay flutuante de busca ----------------------- */

.vgp-search-overlay { position: fixed; inset: 0; z-index: 100001; display: none; }
.vgp-search-overlay.vgp-open { display: block; }
.vgp-search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    animation: vgp-fade .18s ease;
}
.vgp-search-overlay-box {
    position: absolute;
    top: 0; left: 0; right: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--vgp-card-bg, var(--vgp-bg, #fff));
    color: var(--vgp-text, #0f0f0f);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
    animation: vgp-slide-down .22s cubic-bezier(.2, .9, .3, 1);
}
/* No desktop vira um painel centralizado (não uma barra colada no topo). */
@media (min-width: 769px) {
    .vgp-search-overlay-box {
        top: 8vh;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(620px, 94vw);
        max-height: 78vh;
        border-radius: var(--vgp-radius);
        overflow: hidden;
        animation: vgp-pop .2s cubic-bezier(.2, .9, .3, 1);
    }
}

.vgp-search-overlay-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vgp-border, #e5e5e5);
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
}
@media (min-width: 769px) { .vgp-search-overlay-bar { padding-top: 10px; } }

.vgp-search-overlay-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--vgp-text, #0f0f0f);
    font-size: 16px;   /* 16px evita o zoom automático do iOS */
    padding: 8px 4px;
}
.vgp-search-overlay-input:focus { outline: none; }
.vgp-search-overlay-input::-webkit-search-cancel-button { display: none; }

.vgp-search-overlay-results {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    max-height: calc(100vh - 70px);
}
@media (min-width: 769px) { .vgp-search-overlay-results { max-height: calc(78vh - 60px); } }

.vgp-search-hint { padding: 26px 16px; margin: 0; text-align: center; color: var(--vgp-text-muted, #666); font-size: 14px; }

.vgp-search-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 8px;
    border-radius: var(--vgp-radius-sm);
    cursor: pointer;
    transition: background .15s;
}
.vgp-search-hit:hover { background: var(--vgp-soft); }
.vgp-search-hit-thumb {
    position: relative;
    width: 108px;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.vgp-search-hit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vgp-search-hit-dur {
    position: absolute;
    right: 4px; bottom: 4px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 3px;
}
.vgp-search-hit-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vgp-search-hit-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}
.vgp-search-hit-meta { font-size: 12.5px; color: var(--vgp-text-muted, #666); }

/* ------------------------------ Animações -------------------------------- */

@keyframes vgp-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes vgp-slide-down { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes vgp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vgp-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* O modal centralizado já usa transform para centralizar. */
.vgp-cats-panel--modal .vgp-cats-panel-box { animation-name: vgp-pop-centered; }
@keyframes vgp-pop-centered {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (min-width: 769px) {
    .vgp-search-overlay-box { animation-name: vgp-pop-x; }
    @keyframes vgp-pop-x {
        from { opacity: 0; transform: translateX(-50%) scale(.97); }
        to   { opacity: 1; transform: translateX(-50%) scale(1); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .vgp-gallery *, .vgp-cats-panel *, .vgp-search-overlay * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .vgp-card:hover { transform: none; }
}

/* ------------------------ Responsivo: barra compacta -------------------- */

@media (max-width: 768px) {
    .vgp-toolbar { gap: 8px; }

    /* Busca "auto": vira lupa. */
    .vgp-search--auto .vgp-search-inline { display: none; }
    .vgp-search--auto .vgp-search-toggle { display: inline-flex; }

    /* Busca forçada como campo: ocupa o espaço livre em vez de estourar a barra. */
    .vgp-search--inline { flex: 1 1 auto; min-width: 0; }
    .vgp-search--inline .vgp-search-inline { width: 100%; }
    .vgp-search--inline .vgp-search-input { min-width: 0; width: 100%; font-size: 16px; }

    /* Abas com atalho: some a fileira de chips, fica só o botão de categorias
       (evita empilhar elementos na tela pequena). */
    .vgp-catsm-sheet.vgp-cats-tabs .vgp-tabs-scroller,
    .vgp-catsm-modal.vgp-cats-tabs .vgp-tabs-scroller { display: none; }
    .vgp-catsm-sheet.vgp-cats-tabs .vgp-cats-more,
    .vgp-catsm-modal.vgp-cats-tabs .vgp-cats-more {
        width: auto;
        padding: 9px 16px;
        gap: 8px;
    }
    .vgp-catsm-sheet.vgp-cats-tabs .vgp-cats-more-label,
    .vgp-catsm-modal.vgp-cats-tabs .vgp-cats-more-label { display: inline; font-weight: 600; }
    .vgp-catsm-sheet.vgp-cats-tabs .vgp-cats-more.vgp-has-filter::after,
    .vgp-catsm-modal.vgp-cats-tabs .vgp-cats-more.vgp-has-filter::after { display: none; }

    /* Abas roláveis: uma única linha com rolagem horizontal. */
    .vgp-catsm-scroll .vgp-tabs-scroller {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 2px;
        mask-image: linear-gradient(to right, #000 88%, transparent);
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    }
    .vgp-catsm-scroll .vgp-tabs-scroller::-webkit-scrollbar { display: none; }
    .vgp-catsm-scroll .vgp-tab-btn { scroll-snap-align: start; }

    .vgp-cat-select { max-width: 46vw; }
    .vgp-fav-btn { opacity: 1; }              /* sem hover em telas touch */
    .vgp-card-play { opacity: .9; }           /* o play já indica que é vídeo */
    .vgp-modal { padding: 0; }
    .vgp-modal-box { width: 100%; max-height: 100vh; border-radius: 0; border: none; }
    .vgp-listnav { margin-top: 18px; }
    .vgp-page-btn { min-width: 40px; height: 40px; }   /* alvo de toque */
}

/* ------------- Destaques extras nos esquemas escuros -------------------- */

/* A classe .vgp-is-dark é aplicada pelo PHP conforme a LUMINÂNCIA do fundo,
   então estes reforços valem para qualquer esquema escuro — inclusive um
   "Personalizado" criado pelo administrador. */

.vgp-is-dark .vgp-modal-box { box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); }

.vgp-playlist-stage { box-shadow: 0 0 0 1px var(--vgp-border, transparent); }
.vgp-is-dark .vgp-playlist-stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 34px rgba(0, 0, 0, .55); }

/* Sem uma borda clara, a capa escura do vídeo se funde ao fundo escuro. */
.vgp-is-dark .vgp-card-thumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }

/* Separadores entre os itens da lista lateral: no claro o espaçamento
   basta, no escuro não. */
.vgp-is-dark.vgp-preset-classic .vgp-playlist-items .vgp-card,
.vgp-is-dark.vgp-preset-compact .vgp-playlist-items .vgp-card {
    border-bottom: 1px solid color-mix(in srgb, var(--vgp-border, #333) 70%, transparent);
    border-radius: 0;
    padding-bottom: 12px;
}
.vgp-is-dark .vgp-playlist-items .vgp-card:last-child { border-bottom: none; }

/* Texto secundário tende a sumir no escuro: um pouco mais de presença. */
.vgp-is-dark .vgp-card-meta,
.vgp-is-dark .vgp-card-desc,
.vgp-is-dark .vgp-playlist-submeta { color: color-mix(in srgb, var(--vgp-text-muted, #aaa) 82%, var(--vgp-text, #fff)); }

/* A barra de abas e o campo de busca precisam de contorno próprio. */
.vgp-is-dark .vgp-tab-btn:not(.active) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vgp-border, #333) 80%, transparent); }
.vgp-is-dark .vgp-loadmore { background: color-mix(in srgb, var(--vgp-card-bg, #181818) 80%, transparent); }
.vgp-is-dark .vgp-cats-panel-box,
.vgp-is-dark .vgp-search-overlay-box { box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); }

/* Quando a página inteira é pintada, a galeria não precisa repetir o fundo. */
.vgp-has-pagebg .vgp-gallery { background: transparent; }

/* ------------------------- Mini player flutuante ------------------------ */

/* O contêiner é sempre fixo na janela; "encaixado" ele é reposicionado sobre
   a capa/palco a cada quadro, e "reduzido" vai para o canto configurado. */
.vgp-mini-host {
    position: fixed;
    z-index: 99990;
    background: #000;
    overflow: hidden;
    transition: border-radius .18s ease, box-shadow .18s ease;
}
.vgp-mini-host[hidden] { display: none !important; }

/* Encaixado (ou grudado no topo) o player finge estar DENTRO da página, mas é
   um elemento fixo na janela — e um fixo com z-index altíssimo passa por cima
   de tudo: da gaveta do tema, do trilho da galeria, de qualquer menu.
   Nesses dois modos ele desce para uma altura de conteúdo: acima do encaixe
   preto (25) e dos chips (30), abaixo da barra da galeria (45), do véu (49),
   do trilho (50) — e das gavetas dos temas, que para funcionar já precisam
   ficar acima da barra do site, portanto acima disto também.
   Não é palpite sobre quais elementos cada tema usa: quem se empilha acima do
   site passa a se empilhar acima do vídeo.
   No canto reduzido ele volta ao topo, que é onde deve mesmo flutuar. */
.vgp-mini-host.vgp-docked,
.vgp-mini-host.vgp-pinned { z-index: 40; }

.vgp-mini-frame { position: absolute; inset: 0; }
.vgp-mini-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Player nativo (arquivos do servidor e do Drive privado) -----------------
   Ocupa exatamente o mesmo espaço do iframe, em todos os lugares onde um
   vídeo pode tocar: card, palco da lista, popup e mini player. */
.vgp-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
    display: block;
}

/* Encaixado: acompanha exatamente o elemento da página. */
.vgp-mini-host.vgp-docked { border-radius: var(--vgp-radius-sm, 10px); }
.vgp-mini-host.vgp-docked .vgp-mini-bar { display: none; }

/* Grudado no topo (telas estreitas): o vídeo fica à vista enquanto a lista
   rola por baixo dele. Posição e tamanho vêm do JS, alinhados à galeria. */
.vgp-mini-host.vgp-pinned {
    border-radius: 0 0 var(--vgp-radius-sm, 10px) var(--vgp-radius-sm, 10px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

/* Reduzido: cantinho da tela, com barra de título e controles. */
.vgp-mini-host.vgp-mini {
    width: min(var(--vgp-mini-width, 320px), 86vw);
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14);
    animation: vgp-pop .18s cubic-bezier(.2, .9, .3, 1);
}
.vgp-mini-host.vgp-mini.vgp-mini-pos-bottom-right { bottom: 16px; right: 16px; top: auto; left: auto; }
.vgp-mini-host.vgp-mini.vgp-mini-pos-bottom-left  { bottom: 16px; left: 16px; top: auto; right: auto; }
.vgp-mini-host.vgp-mini.vgp-mini-pos-top-right    { top: 16px; right: 16px; bottom: auto; left: auto; }
.vgp-mini-host.vgp-mini.vgp-mini-pos-top-left     { top: 16px; left: 16px; bottom: auto; right: auto; }

.vgp-mini-bar {
    position: absolute;
    left: 0; right: 0; top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 18px;
    background: linear-gradient(rgba(0, 0, 0, .82), transparent);
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
}
.vgp-mini-host.vgp-mini:hover .vgp-mini-bar,
.vgp-mini-host.vgp-mini:focus-within .vgp-mini-bar,
.vgp-mini-host.vgp-pinned:hover .vgp-mini-bar,
.vgp-mini-host.vgp-pinned:focus-within .vgp-mini-bar { opacity: 1; pointer-events: auto; }

/* Grudado no topo o título é redundante (a lista mostra o item atual): sobram
   os botões de fechar e de voltar ao vídeo, encostados na direita. */
.vgp-mini-host.vgp-pinned .vgp-mini-title { display: none; }
.vgp-mini-host.vgp-pinned .vgp-mini-bar { justify-content: flex-end; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }

.vgp-mini-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding-left: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.vgp-mini-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.vgp-mini-btn:hover { background: rgba(0, 0, 0, .9); }

/* Em telas de toque a barra não tem hover: fica sempre visível. */
@media (hover: none) {
    .vgp-mini-host.vgp-mini .vgp-mini-bar,
    .vgp-mini-host.vgp-pinned .vgp-mini-bar { opacity: 1; pointer-events: auto; }
}
@media (max-width: 480px) {
    .vgp-mini-host.vgp-mini { width: min(var(--vgp-mini-width, 320px), 62vw); }
}

/* O encaixe fica escondido enquanto o player está sobre ele (evita ver a
   miniatura "vazando" nas bordas por arredondamento de subpixel). */
.vgp-card-thumb.vgp-slot-active .vgp-card-play,
.vgp-card-thumb.vgp-slot-active .vgp-card-dur { display: none; }
.vgp-playlist-stage.vgp-slot-active .vgp-playlist-play { display: none; }