/*
Theme Name: Vandeilson CD's
Author: Vandeilson CD's
Description: Tema Vandeilson CD's com painel seguro de postagem.
Version: 3.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vandeilson-cds
*/

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        html, body {
            width: 100%;
            height: 100%;
            background-color: #f4f4f4;
            color: #121212;
            overflow-x: hidden;
        }

        .app-container {
    width: 100%;
    max-width: 480px;
    min-height: 100dvh;
    margin: 0 auto;
    background: #f4f4f4;
    display: flex;
    flex-direction: column;
    position: relative;
}

        /* Telas */
        .screen {
            display: none;
            flex-direction: column;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #f4f4f4;
            z-index: 1;
        }
        .screen.active {
            display: flex;
        }

        header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 100%);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #121212;
    flex-shrink: 0;
    z-index: 9999;
}

        #homeScreen { padding-top: 64px; }
        header h1 { cursor: pointer; }
        .menu-btn {
            background: #1a1a1a;
            border: 1px solid #333;
            color: #fff;
            width: 38px;
            height: 38px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            cursor: pointer;
        }
        header h1 {
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-align: center;
        }
        header h1 span {
            color: #ffb703;
        }

        .scrollable-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 140px;
        }
        .scrollable-content::-webkit-scrollbar,
        .detail-scroll::-webkit-scrollbar {
            display: none;
        }

        .search-box {
            position: relative;
            padding: 10px 15px 12px;
            background-color: #121212;
        }
        .search-box input {
            width: 100%;
            padding: 10px 15px 10px 40px;
            background-color: #1a1a1a;
            border: 1px solid #2a2a2a;
            border-radius: 20px;
            color: #ffffff;
            font-size: 0.85rem;
            outline: none;
        }
        .search-box i {
            position: absolute;
            left: 27px;
            top: 50%;
            transform: translateY(-50%);
            color: #888;
        }

        .categories {
            display: flex;
            gap: 8px;
            padding: 10px 15px;
            background-color: #121212;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .cat-btn {
            background-color: #1a1a1a;
            color: #ccc;
            border: 1px solid #333;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .cat-btn.active {
            background-color: #ff0000;
            color: #ffffff;
            border-color: #ff0000;
        }

        .loja-banner-link {
            display: block;
            margin: 12px 15px 15px;
            border-radius: 12px;
            overflow: hidden;
            line-height: 0;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            background: #fff;
        }
        .loja-banner-img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 280px;
            object-fit: cover;
        }
        .loja-banner-link:focus-visible {
            outline: 3px solid #ffb703;
            outline-offset: 2px;
        }

        .section-header-lancamentos {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background-color: #000;
            margin: 0 15px 12px;
            padding: 8px;
            border-radius: 6px;
        }
        .section-header-lancamentos i {
            color: #fff;
            font-size: 1rem;
        }
        .section-header-lancamentos h2 {
            color: #fff;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 800;
        }

        .cd-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 0 15px;
            margin-bottom: 15px;
        }
        .cd-card {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 8px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.03);
            display: flex;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
        }
        .cd-card img {
            width: 100%;
            height: 110px;
            object-fit: contain !important;
            border-radius: 6px;
        }
        .cd-card h3 {
            font-size: 0.75rem;
            color: #000;
            text-align: center;
            font-weight: 800;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .btn-ouvir-card {
            width: 100%;
            background-color: #000;
            color: #fff;
            border: none;
            padding: 7px;
            border-radius: 5px;
            font-size: 0.65rem;
            font-weight: 800;
            cursor: pointer;
            text-align: center;
            letter-spacing: 0.5px;
        }

        .btn-mais {
            margin: 0 15px 15px;
            background-color: #000;
            color: #fff;
            border: none;
            padding: 10px;
            border-radius: 6px;
            font-weight: 900;
            text-align: center;
            font-size: 0.9rem;
            letter-spacing: 2px;
            cursor: pointer;
        }

        .videos-title {
            background-color: #ff0000;
            color: #fff;
            text-align: center;
            padding: 8px;
            font-weight: 900;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .video-container-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            margin-bottom: 20px;
        }
        .video-container-box i {
            font-size: 1.2rem;
            color: #000;
            cursor: pointer;
            padding: 5px;
        }
        .video-card-preview {
            width: 78%;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #ddd;
            text-align: center;
        }
        .video-card-preview img {
            width: 100%;
            height: 95px;
            object-fit: contain !important;
            display: block;
        }

        .social-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0 15px 20px;
        }
        .social-btn {
            background-color: #000;
            border: none;
            color: #fff;
            padding: 10px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.8rem;
            font-weight: 800;
            text-decoration: none;
            letter-spacing: 0.5px;
        }

        /* --- PLAYER FIXO INFERIOR --- */
        .bottom-player {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 480px;
            background-color: #121212;
            border-top: 1px solid #222;
            padding: 10px 15px 12px;
            z-index: 10;
        }
        .player-info {
            color: #fff;
            font-size: 0.75rem;
            text-align: center;
            margin-bottom: 6px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .player-timeline {
            width: 100%;
            height: 3px;
            background-color: #444;
            border-radius: 2px;
            margin-bottom: 8px;
            cursor: pointer;
        }
        .player-timeline-fill {
            width: 0%;
            height: 100%;
            background-color: #ff0000;
            transition: width 0.1s linear;
        }
        .player-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 25px;
            color: #fff;
            font-size: 1rem;
            margin-bottom: 4px;
        }
        .player-controls i {
            cursor: pointer;
        }
        .player-time-text {
            text-align: center;
            font-size: 0.6rem;
            color: #888;
        }

        /* --- TELA 2: DETALHES --- */
        .detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: #f4f4f4;
            flex-shrink: 0;
        }
        .close-detail-btn, .share-detail-btn {
            background: #e0e0e0;
            border: 1px solid #ccc;
            color: #000;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.85rem;
        }
        .detail-scroll {
            flex: 1;
            overflow-y: auto;
            padding: 0 15px 140px;
        }
        .album-cover-box {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 12px;
        }
        .album-cover-box img {
            width: 100%;
            max-height: 220px;
            object-fit: contain !important;
            border-radius: 10px;
            border: 1px solid #ccc;
        }
        .album-info-card {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 12px;
            font-size: 0.75rem;
            line-height: 1.5;
            color: #444;
            box-shadow: 0 2px 4px rgba(0,0,0,0.03);
        }
        .album-info-card span {
            color: #000;
            font-weight: bold;
        }
        .btn-baixar-cd-completo {
            width: 100%;
            background: linear-gradient(180deg, #d32f2f 0%, #900 100%);
            color: #ffffff;
            border: none;
            padding: 14px 10px;
            min-height: 52px;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            margin-bottom: 15px;
            text-transform: uppercase;
            text-decoration: none;
        }
        .track-list-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .track-item-card {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.03);
        }
        .track-row-top {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .track-play-circle {
            width: 36px;
            height: 36px;
            background: #000;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.8rem;
            cursor: pointer;
            flex-shrink: 0;
            transition: background-color .15s ease, color .15s ease;
        }
        .track-download-btn {
            flex: 1;
            background-color: #000000;
            color: #ffffff;
            border: 1px solid #ccc;
            padding: 8px;
            border-radius: 5px;
            font-size: 0.75rem;
            font-weight: 900;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            letter-spacing: 0.5px;
        }
        .track-name-label {
            font-size: 0.7rem;
            color: #333;
            padding-left: 2px;
            font-weight: 600;
        }
        .track-line-bar {
            width: 100%;
            height: 3px;
            background-color: #000;
            border-radius: 3px;
            margin-top: 2px;
            transition: background-color .15s ease;
        }

        /* CORREÇÕES E MELHORIAS */
        .btn-mais {
            width: calc(100% - 30px);
            display: block;
        }

        .cd-card.hidden {
            display: none !important;
        }

        .search-box input::placeholder {
            color: #888;
        }

        .cat-btn:focus,
        .btn-mais:focus,
        .btn-ouvir-card:focus,
        .track-play-circle:focus,
        .track-download-btn:focus {
            outline: 2px solid #ff0000;
            outline-offset: 2px;
        }

        .bottom-player {
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }

        @media (max-width: 360px) {
            .cd-grid {
                grid-template-columns: 1fr;
            }

            .player-controls {
                gap: 22px;
            }
        }

        .track-play-circle {
            border: 0;
            padding: 0;
        }
        .track-download-btn {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .track-unavailable {
            cursor: pointer;
        }
        .track-item-card.playing {
            border-color: #ff0000;
            box-shadow: 0 0 0 2px rgba(255,0,0,.14);
        }
        .track-item-card.playing .track-play-circle {
            background: #ff0000;
            color: #fff;
        }
        .track-item-card.playing .track-line-bar {
            background: #ff0000;
        }
        .btn-baixar-cd-completo {
            text-decoration: none;
        }
        @media (max-width: 480px) {
            .app-container { max-width: 480px; min-height: 100dvh; }
            .screen { min-height: 100dvh; }
            .cd-card img { height: 148px; }
            .cd-card { padding: 7px; }
            .cd-card h3 { font-size: .78rem; }
            .btn-ouvir-card { font-size: .68rem; padding: 8px 5px; }
            .detail-scroll { padding-bottom: 155px; }
            .bottom-player { padding-top: 9px; }
        }
.vcd-menu-link{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border:1px solid #444;border-radius:9px;color:#fff;background:#181818;
    text-decoration:none;font:28px/1 Arial,sans-serif;
}
.vcd-menu-link:hover{color:#fff;background:#252525}
@media (min-width:769px){
    .app-container{max-width:1200px}
}

/* Imagem do cantor no cadastro do CD */
.vcd-image-upload-row {
    display:flex;
    gap:8px;
    align-items:center;
}
.vcd-image-upload-row input {
    flex:1;
}
.vcd-artist-image-preview {
    margin-top:10px;
    min-height:20px;
}
.vcd-artist-image-preview img {
    display:block;
    width:120px;
    height:120px;
    object-fit: contain !important;
    border-radius:10px;
    border:1px solid #dcdcde;
}
@media (max-width:782px) {
    .vcd-image-upload-row {
        display:block;
    }
    .vcd-image-upload-row input,
    .vcd-image-upload-row button {
        width:100%;
        margin-bottom:8px;
    }
}

/* Cadastro de CD: campos sempre no topo do editor clássico */
#vcd-cadastro-topo {
    background:#fff !important;
    border:1px solid #ccd0d4 !important;
    border-radius:6px;
    padding:20px !important;
    margin:18px 0 22px !important;
}
#vcd-cadastro-topo .vcd-image-first {
    background:#f0f6fc !important;
    border:2px solid #2271b1 !important;
}

/* ===== PADRÃO FINAL DO SITE ===== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #f4f4f4;
}
.app-container {
    max-width: 480px !important;
    min-height: 100dvh;
}
.screen {
    width: 100% !important;
    max-width: 480px !important;
}
.cd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
}
.cd-card {
    min-width: 0;
    overflow: hidden;
}
.cd-card img {
    aspect-ratio: 1 / 1;
    height: auto !important;
}
.btn-ouvir-card {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}
.search-box, .categories {
    width: 100%;
    box-sizing: border-box;
}
.detail-screen {
    max-width: 480px !important;
    left: 50% !important;
    transform: translateX(-50%);
}
.bottom-player {
    width: min(480px, 100%) !important;
    max-width: 480px !important;
    left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 481px) {
    body {
        display: flex;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    body {
        display: block;
    }
    .app-container {
        max-width: 100% !important;
    }
    header {
        width: 100% !important;
    }
}

/* ===== IMAGEM DO CANTOR: MOSTRAR INTEIRA ===== */
.album-cover-box {
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 16px auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 14px !important;
}

.album-cover-box img,
#detailImgCover {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 14px !important;
}

/* Também evita cortar a imagem do cantor nos cards da página inicial. */
.cd-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* =========================================================
   CORREÇÃO DEFINITIVA: NUNCA CORTAR A FOTO DO CANTOR
   ========================================================= */
#detailScreen .album-cover-box,
#detailScreen .album-cover-box img,
#detailScreen #detailImgCover {
    box-sizing: border-box !important;
}

#detailScreen .album-cover-box {
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 16px auto !important;
    display: block !important;
    background: transparent !important;
}

#detailScreen .album-cover-box img,
#detailScreen #detailImgCover {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* A imagem do card também não deve ser cortada. */
#homeScreen .cd-card img,
#homeScreen .cd-card > img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

/* Não deixar regras de altura do tema antigo cortarem a foto. */
#detailScreen img,
#homeScreen .cd-card img {
    max-height: none !important;
}

/* =========================================================
   MODELO EXATO: SOMENTE O NOME DO POST ABAIXO DA IMAGEM
   ========================================================= */
.vcd-post-title {
    display: block !important;
    width: calc(100% - 32px) !important;
    margin: 8px auto 14px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #111 !important;
    font-size: 26px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Remove qualquer aparência do antigo cartão de informações. */
.album-info-card,
#detailCantorName,
#detailCategory,
#detailYear {
    display: none !important;
}

/* ===== TÍTULO COMPLETO DO POST/CARD ===== */
.cd-card .cd-title {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 8px 0 10px !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 15px !important;
    line-height: 1.22 !important;
    font-weight: 900 !important;
}

/* =========================================================
   TÍTULO DO CD COMPLETO NA PÁGINA INICIAL — SEM CORTE
   ========================================================= */
#homeScreen .cd-card .cd-title,
.cd-card .cd-title {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 8px 0 10px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;

    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;

    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;

    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

/* O card também cresce para caber o título completo. */
#homeScreen .cd-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* =========================================================
   CARD DO CD — IMAGEM INTEIRA + TÍTULO COMPLETO LEGÍVEL
   ========================================================= */
#homeScreen .cd-grid .cd-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-self: start !important;
}

#homeScreen .cd-grid .cd-card > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Nome do post: sempre completo e grande o suficiente para leitura. */
#homeScreen .cd-grid .cd-card > .cd-title {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 10px 0 12px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;

    color: #111 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: unset !important;
}

#homeScreen .cd-grid .cd-card > .btn-ouvir-card {
    width: 100% !important;
    margin-top: 0 !important;
}

@media (max-width: 600px) {
    #homeScreen .cd-grid .cd-card > .cd-title {
        font-size: 16px !important;
        line-height: 1.25 !important;
    }
}

/* =========================================================
   CORREÇÃO FINAL DO CARD — SEM RETICÊNCIAS / SEM CORTE
   ========================================================= */
#homeScreen .cd-grid .cd-card {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#homeScreen .cd-grid .cd-card > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

#homeScreen .cd-grid .cd-card > .cd-title {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 10px 0 12px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;

    color: #111 !important;
    background: transparent !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    /* Explicitly disable every common line-clamp mechanism. */
    -webkit-line-clamp: initial !important;
    line-clamp: initial !important;
    -webkit-box-orient: initial !important;
    -webkit-box: initial !important;
}

#homeScreen .cd-grid .cd-card > .btn-ouvir-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
}

@media (max-width: 600px) {
    #homeScreen .cd-grid .cd-card > .cd-title {
        font-size: 16px !important;
        line-height: 1.25 !important;
    }
}

/* VCD FINAL 8.1 — HOME CARD: IMAGEM INTEIRA + TITULO COMPLETO */
#homeScreen .cd-grid .cd-card {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
#homeScreen .cd-grid .cd-card > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}
#homeScreen .cd-grid .cd-card > .cd-title {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 10px 0 12px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    text-align: center !important;
    color: #111 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}
#homeScreen .cd-grid .cd-card > .btn-ouvir-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
}

/* =========================================================
   BOTÃO BAIXAR CD COMPLETO FIXO DURANTE A ROLAGEM
   As músicas passam por baixo dele quando a capa sai da tela.
   ========================================================= */
.detail-scroll {
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.detail-scroll .btn-baixar-cd-completo {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;

    width: 100% !important;
    box-sizing: border-box !important;

    margin-top: 0 !important;
    margin-bottom: 15px !important;

    /* Fundo sólido para as músicas ficarem visualmente por baixo. */
    background: linear-gradient(180deg, #d32f2f 0%, #900 100%) !important;
    box-shadow: 0 5px 10px rgba(0,0,0,.18) !important;
}

/* A lista e os cards ficam atrás do botão sticky. */
.detail-scroll .track-list-container,
.detail-scroll .track-item-card {
    position: relative !important;
    z-index: 1 !important;
}

/* O título e a capa continuam rolando normalmente. */
.detail-scroll .album-cover-box,
.detail-scroll .vcd-post-title {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================
   VCD — PLAYS MAIORES E MAIS VISÍVEIS NO CELULAR
   ========================================================= */

/* Cada item de música fica mais alto e fácil de tocar. */
.track-item,
.track-card,
.music-item,
.track-row {
    min-height: 78px !important;
}

/* Botões de play das músicas: alvo de toque grande. */
.track-item .play-btn,
.track-card .play-btn,
.music-item .play-btn,
.track-row .play-btn,
.play-track,
.btn-play {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    border-radius: 50% !important;
    font-size: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Nome da música com melhor leitura. */
.track-item .track-name,
.track-card .track-name,
.music-item .track-name,
.track-row .track-name {
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

/* Player fixo inferior maior e mais fácil de enxergar/tocar. */
#fixedPlayer,
.fixed-player,
.bottom-player,
.music-player {
    min-height: 112px !important;
    padding: 14px 18px !important;
}

#fixedPlayer button,
.fixed-player button,
.bottom-player button,
.music-player button {
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 22px !important;
}

#fixedPlayer .play,
.fixed-player .play,
.bottom-player .play,
.music-player .play {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    font-size: 28px !important;
    border-radius: 50% !important;
}

/* Principal: celular. */
@media (max-width: 700px) {
    .track-item,
    .track-card,
    .music-item,
    .track-row {
        min-height: 88px !important;
        padding: 10px !important;
    }

    .track-item .play-btn,
    .track-card .play-btn,
    .music-item .play-btn,
    .track-row .play-btn,
    .play-track,
    .btn-play {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        font-size: 28px !important;
    }

    .track-item .track-name,
    .track-card .track-name,
    .music-item .track-name,
    .track-row .track-name {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    #fixedPlayer,
    .fixed-player,
    .bottom-player,
    .music-player {
        min-height: 132px !important;
        padding: 15px 14px !important;
    }

    #fixedPlayer button,
    .fixed-player button,
    .bottom-player button,
    .music-player button {
        min-width: 54px !important;
        min-height: 54px !important;
        font-size: 25px !important;
    }

    #fixedPlayer .play,
    .fixed-player .play,
    .bottom-player .play,
    .music-player .play {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        font-size: 32px !important;
    }
}

/* =========================================================
   VCD 17 — PLAY GRANDE PARA CELULAR
   ========================================================= */
.track-item-card {
    min-height: 104px !important;
    padding: 12px 14px !important;
    gap: 9px !important;
}

.track-row-top {
    gap: 12px !important;
    min-height: 72px !important;
}

.track-play-circle {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    font-size: 1.55rem !important;
}

.track-download-btn {
    min-height: 56px !important;
    padding: 12px 10px !important;
    font-size: 0.95rem !important;
}

.track-name-label {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    padding-left: 4px !important;
}

.track-line-bar {
    height: 3px !important;
    margin-top: 4px !important;
}

/* Player fixo realmente maior */
.bottom-player {
    min-height: 158px !important;
    padding: 16px 18px max(18px, env(safe-area-inset-bottom)) !important;
}

.player-info {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
}

.player-timeline {
    height: 6px !important;
    margin-bottom: 14px !important;
}

.player-controls {
    gap: 34px !important;
    font-size: 1.7rem !important;
    margin-bottom: 8px !important;
}

#mainPlayBtn {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.1rem !important;
}

#prevTrack,
#nextTrack {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.65rem !important;
}

.player-time-text {
    font-size: 0.8rem !important;
}

/* Ajuste especial para telas de celular */
@media (max-width: 480px) {
    .track-item-card {
        min-height: 118px !important;
        padding: 14px !important;
    }

    .track-row-top {
        min-height: 78px !important;
    }

    .track-play-circle {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        font-size: 1.8rem !important;
    }

    .track-download-btn {
        min-height: 60px !important;
        font-size: 1rem !important;
    }

    .track-name-label {
        font-size: 1rem !important;
    }

    .bottom-player {
        min-height: 174px !important;
        padding: 18px 16px max(20px, env(safe-area-inset-bottom)) !important;
    }

    .player-info {
        font-size: 1.05rem !important;
    }

    .player-timeline {
        height: 7px !important;
        margin-bottom: 15px !important;
    }

    .player-controls {
        gap: 38px !important;
        font-size: 1.8rem !important;
    }

    #mainPlayBtn {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        font-size: 2.3rem !important;
    }

    #prevTrack,
    #nextTrack {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        font-size: 1.8rem !important;
    }

    .detail-scroll {
        padding-bottom: 195px !important;
    }
}

/* VCD 18 — redução leve dos plays, mantendo boa visibilidade no celular */
@media (max-width: 480px) {
    .track-item-card {
        min-height: 106px !important;
        padding: 12px !important;
    }
    .track-row-top {
        min-height: 70px !important;
    }
    .track-play-circle {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        font-size: 1.55rem !important;
    }
    .track-download-btn {
        min-height: 54px !important;
        font-size: .95rem !important;
    }
    .track-name-label {
        font-size: .95rem !important;
    }

    .bottom-player {
        min-height: 150px !important;
        padding: 15px 15px max(17px, env(safe-area-inset-bottom)) !important;
    }
    .player-info {
        font-size: 1rem !important;
    }
    .player-timeline {
        height: 6px !important;
        margin-bottom: 13px !important;
    }
    .player-controls {
        gap: 32px !important;
        font-size: 1.6rem !important;
    }
    #mainPlayBtn {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        font-size: 2rem !important;
    }
    #prevTrack,
    #nextTrack {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        font-size: 1.6rem !important;
    }
    .detail-scroll {
        padding-bottom: 170px !important;
    }
}

/* VCD 19 — rodapé/player mais baixo */
@media (max-width: 480px) {
    .bottom-player {
        min-height: 120px !important;
        padding: 10px 14px max(12px, env(safe-area-inset-bottom)) !important;
    }

    .player-info {
        font-size: .9rem !important;
        margin-bottom: 7px !important;
    }

    .player-timeline {
        height: 4px !important;
        margin-bottom: 9px !important;
    }

    .player-controls {
        gap: 27px !important;
        margin-bottom: 4px !important;
    }

    #mainPlayBtn {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        font-size: 1.7rem !important;
    }

    #prevTrack,
    #nextTrack {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.35rem !important;
    }

    .player-time-text {
        font-size: .7rem !important;
    }

    .detail-scroll {
        padding-bottom: 140px !important;
    }
}

/* VCD 21 — player compacto: tempo ao lado do play */
.main-play-with-time {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.main-play-with-time .player-time-text {
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: .78rem !important;
    line-height: 1 !important;
}

@media (max-width: 480px) {
    .bottom-player {
        min-height: 104px !important;
        padding: 8px 12px max(10px, env(safe-area-inset-bottom)) !important;
    }

    .player-info {
        font-size: .82rem !important;
        margin-bottom: 5px !important;
    }

    .player-timeline {
        height: 4px !important;
        margin-bottom: 7px !important;
    }

    .player-controls {
        gap: 20px !important;
        margin-bottom: 0 !important;
        align-items: center !important;
    }

    #mainPlayBtn {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        font-size: 1.55rem !important;
    }

    #prevTrack,
    #nextTrack {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 1.2rem !important;
    }

    .main-play-with-time {
        gap: 8px !important;
    }

    .main-play-with-time .player-time-text {
        font-size: .72rem !important;
    }

    .detail-scroll {
        padding-bottom: 120px !important;
    }
}

/* VCD 22 — tempo imediatamente depois do play/pause */
.main-play-with-time {
    display: contents !important;
}

.player-controls .player-time-text {
    margin: 0 2px !important;
    white-space: nowrap !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    align-self: center !important;
}

@media (max-width: 480px) {
    .player-controls {
        gap: 16px !important;
    }

    .player-controls .player-time-text {
        font-size: .72rem !important;
    }
}

/* VCD 23 — ordem exata: anterior, play, próxima, tempo */
.player-controls .player-time-text {
    margin: 0 0 0 4px !important;
    white-space: nowrap !important;
    align-self: center !important;
}

/* VCD 24 — destaque da música que está tocando */
.track-item-card.playing {
    transform: scale(1.01) !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, .55) !important;
    scroll-margin-top: 90px !important;
    scroll-margin-bottom: 150px !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

/* VCD 25 — botão vassoura para limpar/parar o player */
.clear-player-btn {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1.05rem !important;
    opacity: .9 !important;
}

.clear-player-btn:hover,
.clear-player-btn:active {
    opacity: 1 !important;
    transform: scale(1.08);
}

@media (max-width: 480px) {
    .clear-player-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: .95rem !important;
    }

    .player-controls {
        gap: 14px !important;
    }
}

/* VCD 27 — vassoura personalizada enviada pelo usuário */
.clear-player-btn img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 480px) {
    .clear-player-btn img {
        width: 28px !important;
        height: 28px !important;
    }
}

/* V29 - PALETA PLAY CONFORME AO EXEMPLO */

.track-item-card { border-color: #000000 !important; }
.track-item-card .track-play-circle { background: #000000 !important; color: #ffffff !important; }
.track-item-card .track-download-btn { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; }
.track-item-card .track-line-bar { background: #000000 !important; }
.track-item-card.playing { border-color: #ff0000 !important; box-shadow: 0 0 0 2px rgba(255,0,0,.18) !important; }
.track-item-card.playing .track-play-circle { background: #ff0000 !important; color: #ffffff !important; }
.track-item-card.playing .track-line-bar { background: #ff0000 !important; }
.player-timeline-fill { background: #ff0000 !important; }

/* VCD — BOTÕES VOLTAR/COMPARTILHAR SEMPRE VISÍVEIS AO ABRIR UM CD */
#detailScreen {
    z-index: 100000 !important;
    position: absolute !important;
    inset: 0 !important;
    background: #f4f4f4 !important;
}
#detailScreen.active {
    display: flex !important;
}
#detailScreen .detail-header.vcd-detail-actions {
    position: sticky !important;
    top: 0 !important;
    z-index: 100001 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 70px !important;
    padding: 8px 15px !important;
    margin: 0 !important;
    background: #f4f4f4 !important;
    box-sizing: border-box !important;
}
#detailScreen .vcd-detail-actions .detail-action-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    outline: 0 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
#detailScreen .vcd-detail-actions .detail-back-btn {
    background: linear-gradient(180deg, #1c1c1c 0%, #050505 100%) !important;
    border-radius: 14px 0 0 14px !important;
}
#detailScreen .vcd-detail-actions .detail-share-btn {
    background: linear-gradient(180deg, #4fb52a 0%, #248b00 100%) !important;
    border-radius: 0 14px 14px 0 !important;
}
#detailScreen .vcd-detail-actions .detail-action-btn i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 24px !important;
    flex: 0 0 auto !important;
}
#detailScreen .vcd-detail-actions .detail-action-btn span {
    display: inline-block !important;
    color: #fff !important;
    white-space: nowrap !important;
}
#detailScreen .detail-scroll {
    position: relative !important;
    z-index: 1 !important;
}
@media (max-width: 480px) {
    #detailScreen .detail-header.vcd-detail-actions {
        min-height: 64px !important;
        padding: 7px 10px !important;
    }
    #detailScreen .vcd-detail-actions .detail-action-btn {
        min-height: 50px !important;
        height: 54px !important;
        font-size: 14px !important;
        gap: 8px !important;
        padding: 0 8px !important;
    }
    #detailScreen .vcd-detail-actions .detail-action-btn i {
        font-size: 20px !important;
    }
}

/* VCD 30 — PLAY FIXO TAMBÉM NAS PÁGINAS DOS CDs */
.bottom-player {
    position: fixed !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: min(480px, 100%) !important;
    max-width: 480px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100010 !important;
}
#detailScreen.active ~ .bottom-player {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100010 !important;
}
#detailScreen.active .detail-scroll {
    padding-bottom: 140px !important;
}
@media (max-width: 480px) {
    #detailScreen.active .detail-scroll {
        padding-bottom: 125px !important;
    }
}

/* VCD 31 — LAYOUT DA PÁGINA DO CD: AÇÕES VERTICAIS + CAPA AO LADO */
#detailScreen .detail-scroll {
    padding: 18px 10px 145px !important;
    overflow-y: auto !important;
}
#detailScreen .detail-hero-layout {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
}
#detailScreen .detail-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}
#detailScreen .detail-hero-actions .detail-action-btn,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    width: 100% !important;
    min-height: 86px !important;
    height: 86px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.18) !important;
    box-sizing: border-box !important;
}
#detailScreen .detail-hero-actions .detail-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 10px !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
#detailScreen .detail-hero-actions .detail-back-btn {
    background: #0b0b0b !important;
}
#detailScreen .detail-hero-actions .detail-share-btn {
    background: linear-gradient(180deg, #51b72d 0%, #2b970c 100%) !important;
}
#detailScreen .detail-hero-actions .detail-action-btn i {
    color: #fff !important;
    font-size: 24px !important;
    flex: 0 0 auto !important;
}
#detailScreen .detail-hero-actions .detail-action-btn span {
    color: #fff !important;
    white-space: nowrap !important;
}
#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    background: linear-gradient(180deg, #ed2b2b 0%, #b30000 100%) !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
}
#detailScreen .detail-hero-actions .btn-baixar-cd-completo i {
    display: none !important;
}
#detailScreen .album-cover-box {
    width: 100% !important;
    height: 258px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}
#detailScreen .album-cover-box img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px !important;
    border: 1px solid #c8c8c8 !important;
    background: #fff !important;
}
#detailScreen .vcd-post-title {
    margin: 10px 2px 10px !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
}
#detailScreen .track-list-container {
    margin-top: 4px !important;
}

@media (max-width: 420px) {
    #detailScreen .detail-scroll {
        padding: 10px 9px 132px !important;
    }
    #detailScreen .detail-hero-layout {
        grid-template-columns: 188px minmax(0, 1fr) !important;
        gap: 6px !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo {
        min-height: 82px !important;
        height: 82px !important;
        font-size: 15px !important;
    }
    #detailScreen .album-cover-box {
        height: 246px !important;
    }
}

@media (max-width: 360px) {
    #detailScreen .detail-hero-layout {
        grid-template-columns: 150px minmax(0, 1fr) !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo {
        min-height: 72px !important;
        height: 72px !important;
        font-size: 13px !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn i {
        font-size: 20px !important;
    }
    #detailScreen .album-cover-box {
        height: 218px !important;
    }
}

/* VCD 32 — BOTÕES DO CD COM A MESMA ALTURA DA FOTO + VISUAL PREMIUM */
#detailScreen .detail-hero-layout {
    align-items: stretch !important;
}

#detailScreen .detail-hero-actions {
    height: 258px !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

#detailScreen .detail-hero-actions .detail-action-btn,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10) !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}

#detailScreen .detail-hero-actions .detail-action-btn:hover,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08) !important;
    box-shadow: 0 7px 14px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

#detailScreen .detail-hero-actions .detail-action-btn:active,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo:active {
    transform: translateY(0) scale(.99) !important;
}

#detailScreen .detail-hero-actions .detail-back-btn {
    background: linear-gradient(135deg, #181818 0%, #050505 100%) !important;
}

#detailScreen .detail-hero-actions .detail-share-btn {
    background: linear-gradient(135deg, #57bb2d 0%, #278900 100%) !important;
}

#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    background: linear-gradient(135deg, #f02626 0%, #b50000 100%) !important;
}

#detailScreen .detail-hero-actions .detail-action-btn i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.12) !important;
    font-size: 20px !important;
}

#detailScreen .detail-hero-actions .detail-action-btn span,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}

#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    padding: 8px 10px !important;
    font-size: 15px !important;
    line-height: 1.08 !important;
}

#detailScreen .detail-hero-actions .btn-baixar-cd-completo i {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.12) !important;
    font-size: 17px !important;
    margin-right: 7px !important;
}

@media (max-width: 420px) {
    #detailScreen .detail-hero-actions {
        height: 246px !important;
    }
    #detailScreen .album-cover-box {
        height: 246px !important;
    }
}

@media (max-width: 360px) {
    #detailScreen .detail-hero-actions {
        height: 218px !important;
        gap: 5px !important;
    }
    #detailScreen .album-cover-box {
        height: 218px !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn span,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo {
        font-size: 12px !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn i,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo i {
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
    }
}

/* VCD 33 — ESTRUTURA PREMIUM: BOTÕES SEPARADOS DA CAPA */
#detailScreen .detail-hero-layout {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    width: min(100%, 470px) !important;
    margin: 0 auto !important;
}

#detailScreen .detail-hero-actions {
    height: 258px !important;
    min-width: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.10) !important;
}

#detailScreen .detail-hero-actions .detail-action-btn,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 0 !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.14) !important;
    transform: none !important;
}

#detailScreen .detail-hero-actions .detail-action-btn:hover,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.06) !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

#detailScreen .detail-hero-actions .detail-action-btn:active,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo:active {
    transform: scale(.985) !important;
}

#detailScreen .detail-hero-actions .detail-action-btn i,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo i {
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.14) !important;
}

#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    padding: 8px 10px !important;
    text-align: center !important;
    line-height: 1.05 !important;
}

#detailScreen .album-cover-box {
    width: 100% !important;
    height: 258px !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.12) !important;
}

#detailScreen .album-cover-box img,
#detailScreen #detailImgCover {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    background: #fff !important;
}

@media (max-width: 420px) {
    #detailScreen .detail-hero-layout {
        grid-template-columns: 158px minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    #detailScreen .detail-hero-actions,
    #detailScreen .album-cover-box {
        height: 246px !important;
    }
    #detailScreen .detail-hero-actions {
        padding: 7px !important;
        gap: 7px !important;
        border-radius: 12px !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo {
        font-size: 14px !important;
    }
}

@media (max-width: 360px) {
    #detailScreen .detail-hero-layout {
        grid-template-columns: 138px minmax(0, 1fr) !important;
        gap: 9px !important;
    }
    #detailScreen .detail-hero-actions,
    #detailScreen .album-cover-box {
        height: 218px !important;
    }
    #detailScreen .detail-hero-actions {
        padding: 6px !important;
        gap: 6px !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo {
        font-size: 12px !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn i,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo i {
        width: 27px !important;
        height: 27px !important;
        font-size: 14px !important;
    }
}

/* VCD 34 — TEXTO DOS BOTÕES CENTRALIZADO + TÍTULO FIXO SOBRE A LISTA */
#detailScreen .detail-hero-actions .detail-action-btn,
#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#detailScreen .detail-hero-actions .detail-action-btn span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.08 !important;
}

#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#detailScreen .detail-hero-actions .btn-baixar-cd-completo i {
    flex: 0 0 30px !important;
    margin-right: 0 !important;
}

#detailScreen .detail-hero-actions .btn-baixar-cd-completo {
    font-size: clamp(13px, 3.3vw, 16px) !important;
    letter-spacing: .1px !important;
}

#detailScreen .vcd-post-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 100002 !important;
    margin: 12px auto 10px !important;
    padding: 10px 12px !important;
    width: min(100%, 470px) !important;
    box-sizing: border-box !important;
    background: rgba(244,244,244,.98) !important;
    border-bottom: 1px solid #d7d7d7 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.10) !important;
    text-align: center !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
}

#detailScreen .track-list-container {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 420px) {
    #detailScreen .detail-hero-actions .detail-action-btn span,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo {
        font-size: 13px !important;
        line-height: 1.05 !important;
    }
    #detailScreen .detail-hero-actions .detail-action-btn i,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo i {
        flex-basis: 27px !important;
        width: 27px !important;
        height: 27px !important;
        font-size: 14px !important;
    }
    #detailScreen .vcd-post-title {
        padding: 9px 10px !important;
        margin-top: 10px !important;
    }
}

@media (max-width: 360px) {
    #detailScreen .detail-hero-actions .detail-action-btn span,
    #detailScreen .detail-hero-actions .btn-baixar-cd-completo {
        font-size: 11px !important;
    }
    #detailScreen .vcd-post-title {
        font-size: .95rem !important;
    }
}