/* =========================================
   CANARINHO GOSPEL — DESIGN SYSTEM
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

:root {
    --cg-navy: #0f172a;
    --cg-navy-soft: #1e293b;

    --cg-gold: #f59e0b;
    --cg-gold-dark: #d97706;
    --cg-gold-soft: #fff7ed;

    /* Cores das categorias de artigos */
    --cg-category-all: #f59e0b;
    --cg-category-all-dark: #d97706;
    --cg-category-all-soft: #fff7ed;

    --cg-category-history: #6366f1;
    --cg-category-history-dark: #4f46e5;
    --cg-category-history-soft: #eef2ff;

    --cg-background: #f5f7fb;
    --cg-surface: #ffffff;
    --cg-surface-soft: #f8fafc;

    --cg-text: #0f172a;
    --cg-text-soft: #475569;
    --cg-text-muted: #64748b;

    --cg-border: #e2e8f0;

    --cg-radius-sm: 8px;
    --cg-radius-md: 12px;
    --cg-radius-lg: 18px;
    --cg-radius-xl: 24px;

    --cg-shadow-sm: 0 4px 14px rgba(15, 23, 42, .05);
    --cg-shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
    --cg-shadow-lg: 0 18px 50px rgba(15, 23, 42, .12);

    --cg-container: 1120px;
    --cg-transition: 180ms ease;
}

body {
    margin: 0;
    min-width: 320px;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--cg-background);
    color: var(--cg-text);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background: var(--cg-gold);
    color: var(--cg-navy);
}

.container {
    width: min(var(--cg-container), 92%);
    margin-inline: auto;
}

main {
    min-height: calc(100vh - 150px);
}

/* =========================================
   HEADER
========================================= */

.site-header {
    position: relative;
    z-index: 100;

    background: var(--cg-navy);
    color: white;

    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 18px rgba(15, 23, 42, .12);
}

.header-content {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;
}

.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;

    color: white;

    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;

    white-space: nowrap;

    transition: color var(--cg-transition);
}

.logo:hover {
    color: var(--cg-gold);
}

.logo-main {
    display: flex;
    align-items: center;
    gap: 9px;

    line-height: 1;
}

.logo-heading {
    display: block;

    margin: 0;
    padding: 0;

    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.logo-tagline {
    display: block;

    margin-top: 2px;

    color: rgba(255, 255, 255, .72);

    font-size: 11px;
    font-weight: 500;
    letter-spacing: .10em;
    line-height: 1.1;

    text-align: center;
}

.logo:hover .logo-tagline {
    color: rgba(255, 255, 255, .82);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-nav a {
    position: relative;

    padding: 9px 12px;
    border-radius: var(--cg-radius-sm);

    color: rgba(255, 255, 255, .82);

    font-size: 14px;
    font-weight: 700;

    transition:
        color var(--cg-transition),
        background var(--cg-transition);
}

.site-nav a:hover {
    color: white;
    background: rgba(255, 255, 255, .08);
}

.site-nav a::after {
    content: "";

    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;

    height: 2px;

    background: var(--cg-gold);
    border-radius: 999px;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform var(--cg-transition);
}

.site-nav a:hover::after {
    transform: scaleX(1);
}

/* =========================================
   CABEÇALHO — LOGO E MENU
========================================= */

.logo-canarinho {
    color: #ffffff;
}

.logo-gospel {
    color: var(--cg-gold);
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: #ffffff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        background var(--cg-transition),
        color var(--cg-transition);
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--cg-gold);
}

/* =========================================
   CABEÇALHO — MOBILE
========================================= */


/* =========================================
   HERO / BUSCA
========================================= */

.hero {
    padding: 64px 0;
}

.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.hero-title {
    max-width: 800px;

    margin: 0;

    color: var(--cg-text);

    font-size: clamp(34px, 6vw, 58px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.hero-title span {
    color: var(--cg-gold-dark);
}

.hero-description {
    max-width: 650px;

    margin: 18px 0 28px;

    color: var(--cg-text-soft);

    font-size: 17px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    max-width: 680px;

    padding: 7px;

    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: 14px;

    box-shadow: var(--cg-shadow-md);
}

.search-box input {
    flex: 1;

    min-width: 0;
    height: 46px;

    padding: 0 14px;

    border: 0;
    outline: 0;

    background: transparent;
    color: var(--cg-text);

    font-size: 15px;
}

.search-box input::placeholder {
    color: var(--cg-text-muted);
}

.search-box button {
    flex-shrink: 0;

    min-width: 46px;
    height: 46px;

    padding: 0 16px;

    border: 0;
    border-radius: 10px;

    background: var(--cg-gold);
    color: var(--cg-navy);

    font-weight: 800;

    transition:
        background var(--cg-transition),
        color var(--cg-transition),
        transform var(--cg-transition);
}

.search-box button:hover {
    background: var(--cg-gold-dark);
    color: white;
    transform: translateY(-1px);
}

/* =========================================
   SEÇÕES
========================================= */

.section {
    padding: 42px 0;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 22px;
}

.section-header-text {
    min-width: 0;
}

.section-title {
    margin: 0;

    font-size: clamp(24px, 4vw, 32px);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.section-description {
    margin: 7px 0 0;

    color: var(--cg-text-muted);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: var(--cg-gold-dark);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* =========================================
   PÁGINA DE ARTISTAS
========================================= */

.page-heading {
    padding: 52px 0 24px;
}

.artists-section {
    padding-top: 12px;
    padding-bottom: 64px;
}

.artist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.artist-card {
    display: block;
    overflow: hidden;

    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);

    box-shadow: var(--cg-shadow-sm);

    transition:
        transform var(--cg-transition),
        box-shadow var(--cg-transition),
        border-color var(--cg-transition);
}

.artist-card:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow: var(--cg-shadow-md);
}

.artist-card-image,
.artist-card-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.artist-card-image {
    width: 100%;
    height: 260px;

    object-fit: cover;
    object-position: center;
}

.artist-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        var(--cg-navy),
        var(--cg-navy-soft)
    );

    color: var(--cg-gold);
    font-size: 54px;
}

.artist-card-content {
    padding: 18px;
}

.artist-card-name {
    margin: 0;

    color: var(--cg-text);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.artist-card-meta {
    margin: 5px 0 0;

    color: var(--cg-text-muted);

    font-size: 13px;
    font-weight: 600;
}

.artist-card-bio {
    display: -webkit-box;

    margin: 12px 0 16px;

    color: var(--cg-text-soft);

    font-size: 14px;
    line-height: 1.5;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}

.artist-card-link {
    display: inline-flex;
    align-items: center;

    color: var(--cg-navy);

    font-size: 14px;
    font-weight: 800;

    transition: color var(--cg-transition);
}

.artist-card-link:hover {
    color: var(--cg-gold-dark);
}

/* =========================================
   PERFIL DO ARTISTA
========================================= */

.artist-profile {
    padding: 42px 0 20px;
}

.artist-profile-card {
    padding: 30px;

    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-xl);

    box-shadow: var(--cg-shadow-sm);
}

.artist-avatar {
    width: 120px;
    height: 120px;

    border-radius: 50%;

    object-fit: cover;

    background: var(--cg-surface-soft);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 13px;

    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);

    background: var(--cg-surface-soft);
    color: var(--cg-text);

    font-size: 13px;
    font-weight: 700;

    transition:
        background var(--cg-transition),
        border-color var(--cg-transition),
        transform var(--cg-transition);
}

.social-link:hover {
    background: var(--cg-gold-soft);
    border-color: #fed7aa;
    transform: translateY(-1px);
}

/* =========================================
   ESTATÍSTICAS
========================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.stat-card {
    padding: 18px;

    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);

    background: var(--cg-surface-soft);
}

.stat-number {
    font-size: 24px;
    font-weight: 800;
}

.stat-label {
    color: var(--cg-text-muted);
    font-size: 13px;
}

/* =========================================
   LOUVORES
========================================= */

.song-grid,
.song-list {
    display: grid;
    gap: 12px;
}

.song-card,
.song-item {
    display: flex;
    align-items: center;

    gap: 16px;

    padding: 16px 18px;

    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);

    box-shadow: var(--cg-shadow-sm);

    transition:
        transform var(--cg-transition),
        box-shadow var(--cg-transition),
        border-color var(--cg-transition);
}

.song-card:hover,
.song-item:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: var(--cg-shadow-md);
}

.song-position,
.song-ranking {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--cg-gold-soft);
    color: var(--cg-gold-dark);

    font-size: 14px;
    font-weight: 800;
}

.song-content,
.song-info {
    flex: 1;
    min-width: 0;
}

.song-name,
.song-title {
    margin: 0;

    overflow: hidden;

    color: var(--cg-text);

    font-size: 16px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-artist,
.song-meta {
    margin-top: 3px;

    color: var(--cg-text-muted);

    font-size: 13px;
}

.song-stats,
.song-views {
    flex-shrink: 0;

    color: var(--cg-text-muted);

    font-size: 12px;
    white-space: nowrap;
}

/* =========================================
   BOTÕES
========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;

    padding: 10px 17px;

    border: 0;
    border-radius: var(--cg-radius-sm);

    font-size: 14px;
    font-weight: 700;

    transition:
        transform var(--cg-transition),
        background var(--cg-transition),
        box-shadow var(--cg-transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--cg-navy);
    color: white;

    box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
}

.btn-primary:hover {
    background: var(--cg-navy-soft);
}

.btn-accent {
    background: var(--cg-gold);
    color: var(--cg-navy);

    box-shadow: 0 4px 12px rgba(245, 158, 11, .22);
}

.btn-accent:hover {
    background: var(--cg-gold-dark);
    color: white;
}

/* =========================================
   BADGES
========================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border: 1px solid var(--cg-border);
    border-radius: 999px;

    background: var(--cg-surface-soft);
    color: var(--cg-text-soft);

    font-size: 12px;
    font-weight: 700;
}

.badge-accent {
    background: var(--cg-gold-soft);
    border-color: #fed7aa;
    color: var(--cg-gold-dark);
}

/* =========================================
   ESTADO VAZIO
========================================= */

.empty-state {
    padding: 48px 30px;

    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);

    text-align: center;
    box-shadow: var(--cg-shadow-sm);
}

.empty-state h2,
.empty-state h3 {
    margin-top: 0;
}

.empty-state p {
    color: var(--cg-text-muted);
}

.empty-icon {
    margin-bottom: 10px;
    font-size: 42px;
}

/* =========================================
   PAGINAÇÃO
========================================= */

.pagination {
    width: 100%;

    margin-top: 30px;

    display: flex;

    justify-content: center;

    align-items: center;
}


/* ==========================================================
   CANARINHO — PAGINAÇÃO
   Correção dos SVGs do paginator do Laravel
========================================================== */

.pagination svg {
    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    max-width: 18px !important;
    max-height: 18px !important;

    display: block !important;

    flex: 0 0 18px !important;
}


.pagination nav {
    width: 100%;
}


.pagination nav > div {
    width: 100%;
}


/* =========================================
   FOOTER
========================================= */

.site-footer {
    padding: 28px 0;

    background: var(--cg-navy);
    color: #94a3b8;

    text-align: center;

    font-size: 13px;

    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

    .artist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .header-content {
        min-height: auto;

        padding: 15px 0 13px;

        gap: 10px;
    }

    .logo {
        font-size: 20px;
    }

    .site-nav {
        width: 100%;

        justify-content: center;
        flex-wrap: wrap;

        gap: 3px;
    }

    .site-nav a {
        padding: 8px 10px;
        font-size: 13px;
    }

    .hero {
        padding: 42px 0;
    }

    .hero-title {
        font-size: clamp(32px, 10vw, 44px);
    }

    .hero-description {
        font-size: 15px;
    }

    .search-box {
        padding: 6px;
    }

    .search-box input {
        height: 44px;
        padding: 0 10px;
        font-size: 14px;
    }

    .search-box button {
        min-width: 44px;
        height: 44px;
        padding: 0 13px;
    }

    .section {
        padding: 32px 0;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

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

    .song-card,
    .song-item {
        gap: 11px;
        padding: 14px;
    }

    .song-position,
    .song-ranking {
        flex-basis: 30px;

        width: 30px;
        height: 30px;
    }

    .song-name,
    .song-title {
        font-size: 15px;
    }

    .song-stats,
    .song-views {
        font-size: 11px;
    }

    .artist-profile-card {
        padding: 22px;
    }

    .page-heading {
        padding: 38px 0 18px;
    }

    .artists-section {
        padding-bottom: 42px;
    }

    .artist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .artist-card-content {
        padding: 14px;
    }

    .artist-card-name {
        font-size: 16px;
    }

    .artist-card-meta {
        font-size: 12px;
    }

    .artist-card-bio {
        font-size: 12px;
    }

    .artist-card-link {
        font-size: 13px;
    }

    .artist-card-placeholder {
        font-size: 46px;
    }
}

@media (max-width: 460px) {

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

/* =========================================
   PERFIL DO ARTISTA — NOVO VISUAL
========================================= */

.artist-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 18px;

    color: var(--cg-text-muted);

    font-size: 14px;
    font-weight: 700;

    transition: color var(--cg-transition);
}

.artist-back:hover {
    color: var(--cg-gold-dark);
}

.artist-profile {
    padding: 42px 0 24px;
}

.artist-profile-card {
    padding: 32px;

    background:
        radial-gradient(
            circle at top right,
            rgba(245, 158, 11, .10),
            transparent 35%
        ),
        var(--cg-surface);

    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-xl);

    box-shadow: var(--cg-shadow-md);
}

.artist-profile-main {
    display: flex;
    align-items: center;

    gap: 28px;
}

.artist-profile-photo {
    flex: 0 0 auto;
}

.artist-profile-image,
.artist-profile-placeholder {
    width: 150px;
    height: 150px;

    border-radius: 50%;
}

.artist-profile-image {
    object-fit: cover;
    object-position: center;

    border: 5px solid white;

    box-shadow:
        0 0 0 1px var(--cg-border),
        0 12px 30px rgba(15, 23, 42, .15);
}

.artist-profile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        var(--cg-navy),
        var(--cg-navy-soft)
    );

    color: var(--cg-gold);

    font-size: 54px;

    box-shadow:
        0 0 0 1px var(--cg-border),
        0 12px 30px rgba(15, 23, 42, .15);
}

.artist-profile-info {
    flex: 1;
    min-width: 0;
}

.artist-profile-name {
    margin: 0;

    color: var(--cg-text);

    font-size: clamp(34px, 6vw, 52px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.artist-profile-bio {
    max-width: 720px;

    margin: 14px 0 0;

    color: var(--cg-text-soft);

    font-size: 16px;
    line-height: 1.7;
}

.artist-stats {
    margin-top: 30px;
}

.artist-songs-section {
    padding: 24px 0 50px;
}

.artist-albums-section {
    padding: 0 0 64px;
}

.artist-albums-card {
    padding: 30px;

    background: var(--cg-surface);

    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);

    box-shadow: var(--cg-shadow-sm);
}

.artist-albums-card h2 {
    margin: 0 0 8px;

    font-size: 24px;
}

.artist-albums-card p {
    margin: 0;

    color: var(--cg-text-muted);
}

/* =========================================
   PERFIL — MOBILE
========================================= */

@media (max-width: 700px) {

    .artist-profile {
        padding-top: 28px;
    }

    .artist-profile-card {
        padding: 22px;
    }

    .artist-profile-main {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;
    }

    .artist-profile-image,
    .artist-profile-placeholder {
        width: 110px;
        height: 110px;
    }

    .artist-profile-name {
        font-size: 34px;
    }

    .artist-profile-bio {
        font-size: 15px;
    }

    .artist-stats {
        margin-top: 24px;
    }

    .artist-songs-section {
        padding-bottom: 38px;
    }

    .artist-albums-card {
        padding: 22px;
    }
}

/* =========================================
   HOME — NOVO DESIGN
========================================= */

.home-hero {
    padding: 58px 0 54px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(245, 158, 11, .16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--cg-navy),
            var(--cg-navy-soft)
        );

    color: white;
}

.home-hero-content {
    max-width: 820px;
    margin: 0 auto;

    text-align: center;
}

.home-hero .eyebrow {
    color: var(--cg-gold);
}

.home-hero h1 {
    margin: 8px 0 18px;

    font-size: clamp(38px, 7vw, 68px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.home-hero h1 span {
    color: var(--cg-gold);
}

.home-hero p {
    max-width: 620px;

    margin: 0 auto 28px;

    color: #cbd5e1;

    font-size: 17px;
}











/* =========================================
   ESPAÇO PUBLICITÁRIO
========================================= */

.home-ad-section {
    padding: 18px 0;
    background: var(--cg-background);
}

.ad-slot {
    min-height: 110px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px dashed #cbd5e1;
    border-radius: var(--cg-radius-md);

    background: rgba(255,255,255,.45);

    color: #94a3b8;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

/* =========================================
   DESTAQUE
========================================= */

.home-featured {
    padding: 22px 0 12px;
}

.home-featured-card {
    position: relative;
    overflow: hidden;

    min-height: 280px;

    display: flex;
    align-items: center;

    padding: 42px;

    border-radius: var(--cg-radius-xl);

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(245,158,11,.20),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #172033,
            #0f172a
        );

    color: white;

    box-shadow: var(--cg-shadow-lg);
}

.home-featured-content {
    position: relative;
    z-index: 2;

    max-width: 590px;
}

.home-featured-content .eyebrow {
    color: var(--cg-gold);
}

.home-featured-content h2 {
    margin: 6px 0 12px;

    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.home-featured-content h2 span {
    color: var(--cg-gold);
}

.home-featured-content p {
    max-width: 530px;

    margin: 0 0 24px;

    color: #cbd5e1;
}

.home-featured-decoration {
    position: absolute;
    right: 7%;
    top: 50%;

    transform: translateY(-50%);

    font-size: clamp(100px, 18vw, 190px);

    opacity: .10;
}

.carousel-dots {
    display: flex;
    justify-content: center;

    gap: 7px;

    margin-top: 13px;
}

.carousel-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #cbd5e1;
}

.carousel-dots span.active {
    width: 22px;

    border-radius: 999px;

    background: var(--cg-gold);
}

/* =========================================
   CATEGORIAS
========================================= */

.home-categories {
    padding: 12px 0 30px;
}

.category-scroll {
    display: flex;
    gap: 9px;

    overflow-x: auto;

    padding-bottom: 4px;

    scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

.category-pill {
    flex-shrink: 0;

    padding: 9px 15px;

    border: 1px solid var(--cg-border);
    border-radius: 999px;

    background: var(--cg-surface);

    color: var(--cg-text-soft);

    font-size: 13px;
    font-weight: 700;

    transition:
        background var(--cg-transition),
        border-color var(--cg-transition),
        color var(--cg-transition);
}

.category-pill:hover,
.category-pill.active {
    border-color: var(--cg-navy);

    background: var(--cg-navy);
    color: white;
}

/* =========================================
   ACESSO RÁPIDO
========================================= */

.home-quick-links {
    padding: 20px 0 55px;
}

.home-quick-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.home-quick-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 190px;

    padding: 22px;

    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);

    background: var(--cg-surface);

    box-shadow: var(--cg-shadow-sm);

    transition:
        transform var(--cg-transition),
        box-shadow var(--cg-transition),
        border-color var(--cg-transition);
}

.home-quick-card:hover {
    transform: translateY(-3px);

    border-color: #cbd5e1;

    box-shadow: var(--cg-shadow-md);
}

.home-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 18px;

    border-radius: 13px;

    background: var(--cg-gold-soft);

    font-size: 23px;
}

.home-quick-card h3 {
    margin: 0 0 7px;

    font-size: 18px;
}

.home-quick-card p {
    margin: 0;

    color: var(--cg-text-muted);

    font-size: 14px;
    line-height: 1.5;
}

.home-quick-arrow {
    margin-top: auto;
    padding-top: 16px;

    color: var(--cg-gold-dark);

    font-size: 20px;
    font-weight: 800;
}

/* =========================================
   CHAMADA ARTISTAS
========================================= */

.home-artist-callout {
    padding: 0 0 65px;
}

.home-artist-callout-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 34px;

    border-radius: var(--cg-radius-xl);

    background: var(--cg-gold-soft);

    border: 1px solid #fed7aa;
}

.home-artist-callout-inner h2 {
    max-width: 400px;

    margin: 0 0 8px;

    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.15;
}

.home-artist-callout-inner p {
    margin: 0;

    color: var(--cg-text-soft);
}

/* =========================================
   HOME — MOBILE
========================================= */

@media (max-width: 700px) {

    .home-hero {
        padding: 42px 0 38px;
    }

    .home-hero h1 {
        font-size: 40px;
    }

    .home-hero p {
        font-size: 15px;
    }







    .ad-slot {
        min-height: 80px;
    }

    .home-featured-card {
        min-height: 330px;

        padding: 28px 22px;
    }

    .home-featured-decoration {
        right: -5%;
        top: 65%;

        font-size: 130px;
    }

    .home-quick-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-quick-card {
        min-height: 0;
    }

    .home-artist-callout-inner {
        align-items: flex-start;
        flex-direction: column;

        padding: 25px 22px;
    }

    .home-artist-callout-inner .btn {
        width: 100%;
    }
}

/* =========================================
   HOME — HERO CANARINHO
========================================= */

.home-hero {
    position: relative;
    overflow: hidden;

    min-height: 500px;

    background: #0b1830;

    color: white;
}

.home-hero-bg {
    position: absolute;
    inset: 0;

    background-image: url('/images/home/hero-bg.webp');
    background-size: cover;
    background-position: center;

    z-index: 0;
}

.home-hero-bg::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 18, 38, .72) 0%,
            rgba(7, 18, 38, .28) 48%,
            rgba(7, 18, 38, .05) 100%
        );
}

.home-hero .container {
    position: relative;
    z-index: 2;

    min-height: 500px;
}

.home-hero-stage {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;
}

.home-hero-copy {
    position: relative;
    z-index: 4;

    width: min(570px, 100%);
}

.home-hero-copy .eyebrow {
    margin-bottom: 10px;

    color: var(--cg-gold);
}

.home-hero-copy h1 {
    margin: 0 0 24px;

    max-width: 560px;

    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.04;
    letter-spacing: -.045em;
}











/* =========================================
   HERO — MOBILE
========================================= */

@media (max-width: 700px) {

    .home-hero-bg {
        background-position: 58% center;
    }

    .home-hero-copy {
        text-align: center;
    }






}

/* =========================================
   HERO — CANARINHO
========================================= */


.home-hero {
    position: relative;
    overflow: hidden;

    min-height: 0;
    padding: 0 0 18px;

    background: #0b1830;
    color: white;
}

.home-hero .container,
.home-hero-stage {
    min-height: 0;
}

.home-hero-stage {
    position: relative;

    display: flex;
    align-items: flex-start;
}

.home-hero-copy {
    position: relative;
    z-index: 4;

    width: 100%;
}

/* Fundo termina junto com o conteúdo do Hero */
.home-hero-bg {
    position: absolute;
    inset: 0;

    background-image: url('/images/home/hero-bg.webp');
    background-size: cover;
    background-position: center;

    z-index: 0;
}

.home-hero-bg::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 18, 38, .72) 0%,
            rgba(7, 18, 38, .28) 48%,
            rgba(7, 18, 38, .05) 100%
        );
}

/* =========================================
   CANARINHO SOBRE A BUSCA
========================================= */

.home-canary-top {
    position: relative;
    z-index: 1;

    width: fit-content;
    max-width: 100%;
    height: 255px;

    margin: -12px auto -48px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.home-canary-top-image {
    display: block;

    flex: 0 0 auto;

    width: min(390px, 58%);
    max-height: 255px;
    height: auto;

    object-fit: contain;

    pointer-events: none;

}

/* Busca fica na frente do galho */


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .home-hero {
        min-height: 0;
        padding: 0 0 12px;
    }

    .home-hero-stage {
        padding-top: 0;
    }

        .home-canary-top {
        width: 100%;
        max-width: 100%;

        height: 205px;

        margin-bottom: -35px;

        padding: 0 10px;
    }

    .home-canary-top-image {
        flex: 0 0 auto;

        width: 250px;
        max-width: 52vw;
        max-height: 205px;
    }

        .home-canary-bubble {
        flex: 0 1 auto;

        width: auto;
        max-width: min(240px, 42vw);
    }


}

/* =========================================
   BALÃO DO CANARINHO — PREMIUM
========================================= */

.home-canary-bubble {
    position: relative;

    flex: 0 1 auto;

    z-index: 20;

    width: max-content;
    max-width: 300px;

    padding: 13px 18px;

    background: rgba(15, 23, 42, .72);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    pointer-events: none;
}

/* Cauda apontando para o Canarinho */
.home-canary-bubble::after {
    content: "";

    position: absolute;

    right: -8px;
    top: 50%;

    width: 16px;
    height: 16px;

    background: rgba(15, 23, 42, .72);

    border-top: 1px solid rgba(255, 255, 255, .18);
    border-right: 1px solid rgba(255, 255, 255, .18);

    transform: translateY(-50%) rotate(45deg);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* =========================================
   BALÃO — MOBILE
========================================= */


    @media (min-width: 701px) {

    /*
     * =========================================================
     * YOUTUBE — CONTROLES DESKTOP
     * =========================================================
     */

    .song-youtube-desktop-wrap {
        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        background: #111c31;

        border: 1px solid rgba(148, 163, 184, .12);
        border-radius: 12px;

        overflow: hidden;

        box-shadow:
            0 4px 14px rgba(0, 0, 0, .10);
    }

    .song-youtube-desktop-wrap:not(.is-open) {
        display: none;
    }

    .song-youtube-desktop-wrap .song-youtube-player {
        margin: 0;

        border-radius: 0;

        box-shadow: none;
    }

    .song-youtube-desktop-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        width: 100%;

        margin: 0;
        padding: 8px 9px 9px;

        box-sizing: border-box;

        background: #111c31;
    }

    .song-youtube-desktop-button {
        box-sizing: border-box;

        width: 100%;
        min-height: 38px;

        margin: 0;
        padding: 5px 10px;

        border: 1px solid rgba(203, 213, 225, .58);
        border-radius: 999px;

        background: transparent;
        color: #f8fafc;

        display: flex;
        align-items: center;
        justify-content: center;

        font: inherit;
        font-size: 11px;
        font-weight: 700;

        cursor: pointer;

        transition:
            border-color .18s ease,
            background-color .18s ease,
            transform .18s ease;
    }

    .song-youtube-desktop-button:hover {
        border-color: rgba(248, 250, 252, .82);
        background: rgba(255, 255, 255, .035);
    }

    .song-youtube-desktop-button:active {
        transform: translateY(1px);
    }

    .song-youtube-desktop-button:focus-visible {
        outline: 2px solid #94a3b8;
        outline-offset: 2px;
    }

    .song-youtube-desktop-wrap.is-pinned {
        position: fixed;

        z-index: 100;

        box-shadow:
            0 10px 28px rgba(0, 0, 0, .22);
    }

    .song-youtube-desktop-wrap.is-pinned
    .song-youtube-desktop-actions {
        max-height: 61px;

        padding-top: 8px;
        padding-bottom: 9px;

        opacity: 1;
        overflow: hidden;

        transition:
            max-height .22s ease,
            padding-top .22s ease,
            padding-bottom .22s ease,
            opacity .18s ease;
    }

    .song-youtube-desktop-wrap.is-pinned.controls-hidden
    .song-youtube-desktop-actions {
        max-height: 0;

        padding-top: 0;
        padding-bottom: 0;

        opacity: 0;

        pointer-events: none;
    }

    html:not([data-theme="dark"])
    .song-youtube-desktop-wrap {
        background: #f8fafc;
    }

    html:not([data-theme="dark"])
    .song-youtube-desktop-actions {
        background: #f8fafc;
    }

    html:not([data-theme="dark"])
    .song-youtube-desktop-button {
        border-color: rgba(71, 85, 105, .48);
        color: #0f172a;
    }

    html:not([data-theme="dark"])
    .song-youtube-desktop-button:hover {
        border-color: rgba(15, 23, 42, .68);
        background: rgba(15, 23, 42, .025);
    }

    .menu-toggle {
        display: none;
    }

    .mobile-menu,
    .mobile-menu-overlay {
        display: none;
    }
}

@media (min-width: 701px) {

    .home-canary-bubble {
        margin-right: -22px;
    }
}

@media (max-width: 700px) {

    .home-canary-bubble {
        max-width: 240px;

        padding: 10px 15px;

        font-size: 13px;

        border-radius: 16px;
    }

    .home-canary-bubble::after {
        right: -7px;

        width: 14px;
        height: 14px;
    }
}

/* =========================================
   MENU LATERAL MOBILE
========================================= */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;

    z-index: 999;

    background: rgba(2, 8, 23, .58);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .28s ease,
        visibility .28s ease;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    z-index: 1000;

    width: min(320px, 82vw);

    padding: 24px 20px;

    background:
        linear-gradient(
            160deg,
            rgba(15, 23, 42, .98),
            rgba(7, 18, 38, .98)
        );

    border-right: 1px solid rgba(255, 255, 255, .10);

    box-shadow:
        12px 0 40px rgba(0, 0, 0, .32);

    transform: translateX(-105%);

    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mobile-menu-title {
    color: #ffffff;

    font-size: 20px;
    font-weight: 800;
}

.mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;

    background: rgba(255, 255, 255, .05);
    color: #ffffff;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, .10);
    color: var(--cg-gold);
    border-color: rgba(245, 158, 11, .35);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding-top: 24px;
}

.mobile-menu-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 14px;

    border: 1px solid transparent;
    border-radius: 14px;

    color: rgba(255, 255, 255, .88);

    font-size: 16px;
    font-weight: 700;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.mobile-menu-nav a span:last-child {
    color: var(--cg-gold);
    font-size: 18px;
}

.mobile-menu-nav a:hover {
    background: rgba(255, 255, 255, .06);

    border-color: rgba(255, 255, 255, .08);

    color: #ffffff;

    transform: translateX(3px);
}

/* Menu aberto */

.mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Desktop: menu lateral não participa do layout */

@media (min-width: 701px) {

    .mobile-menu,
    .mobile-menu-overlay {
        display: none;
    }
}

/* =========================================
   PÁGINA DA MÚSICA — LEITURA
========================================= */

.song-reading-page {
    padding: 42px 0 70px;
}

.song-ad-space {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 120px;

    margin: 0 auto 42px;

    border: 1px dashed rgba(15, 23, 42, .12);
    border-radius: 10px;

    background: #f8fafc;

    color: #94a3b8;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.song-reading-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    max-width: 900px;

    margin: 0 auto 28px;
    padding-bottom: 22px;

    border-bottom: 1px solid rgba(15, 23, 42, .10);
}

.song-reading-heading h1 {
    margin: 0 0 7px;

    color: var(--cg-navy);

    font-size: clamp(26px, 3.2vw, 32px);
    line-height: 1.12;
}

.song-reading-artist {
    color: #64748b;

    font-size: 18px;
    font-weight: 600;
}

.song-reading-artist a {
    font-size: inherit;
}

.song-youtube-button {
    position: relative;

    display: block;

    flex-shrink: 0;

    width: 116px;
    height: 66px;

    padding: 0;

    border: 0;
    border-radius: 8px;

    overflow: hidden;

    background: #000;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, .12);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.song-youtube-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(15, 23, 42, .18);
}

.song-youtube-thumb {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.song-youtube-play {
    position: absolute;

    left: 50%;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(239, 68, 68, .95);
    color: #ffffff;

    font-size: 12px;
    line-height: 1;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .25);
}

.song-youtube-player {
    display: none;

    width: 100%;
    max-width: 900px;

    margin: 24px auto 32px;

    aspect-ratio: 16 / 9;

    border-radius: 14px;

    overflow: hidden;

    background: #000;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, .12);
}

.song-youtube-player.is-visible {
    display: block;
}

.song-youtube-player iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

.song-youtube-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #ef4444;
    color: #ffffff;

    font-size: 10px;
}

.song-reading-content {
    max-width: 760px;

    margin: 0 auto;
}

/* SEO — título semântico da letra */
.song-reading-lyrics-title {
    margin: 0 0 18px;
    color: #0b1830;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

html[data-theme="dark"] .song-reading-lyrics-title {
    color: #ffffff;
}

.song-reading-lyrics {
    color: #1f2937;

    font-size: 18px;
    line-height: 1.8;

    white-space: pre-line;
}

.song-reading-composition {
    margin-top: 42px;
    padding-top: 20px;

    border-top: 1px solid rgba(15, 23, 42, .10);
}

.song-reading-composition-label {
    display: block;

    margin-bottom: 7px;

    color: var(--cg-navy);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.song-reading-composition-text {
    color: #64748b;

    font-size: 14px;
    line-height: 1.6;
}

.song-reading-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    max-width: 760px;

    margin: 34px auto 0;
}

.song-action-card {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 58px;

    padding: 10px 14px;

    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 13px;

    background: #ffffff;
    color: var(--cg-navy);

    box-shadow:
        0 2px 8px rgba(15, 23, 42, .035);

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.song-action-card:hover {
    transform: translateY(-2px);

    border-color: rgba(245, 158, 11, .35);

    background: #ffffff;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, .08);
}

.song-action-card:active {
    transform: translateY(0);
}

.song-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    color: #64748b;

    line-height: 1;
}

.song-action-icon svg {
    display: block;

    width: 19px;
    height: 19px;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.song-action-label {
    color: var(--cg-navy);

    white-space: nowrap;
}

#song-favorite-button.is-favorite {
    border-color: rgba(245, 158, 11, .45);

    background: #fffbeb;
}

#song-favorite-button.is-favorite .song-action-icon {
    color: #f59e0b;
}

@media (max-width: 700px) {

    .song-reading-actions {
        grid-template-columns: repeat(3, 1fr);

        gap: 8px;

        margin-top: 18px;
    }

    .song-action-card {
        min-height: 52px;

        padding: 6px 5px;

        flex-direction: column;

        gap: 4px;

        border-radius: 12px;

        font-size: 11px;
    }

    .song-action-icon {
        width: 24px;
        height: 24px;

        font-size: 20px;
    }

    .song-action-label {
        font-size: 11px;
    }

}
/* =========================================
   PÁGINA DA MÚSICA — MOBILE
========================================= */

@media (max-width: 700px) {

    .song-reading-page {
        padding: 28px 0 50px;
    }

    .song-ad-space {
        min-height: 90px;

        margin-bottom: 30px;
    }

    .song-reading-header {
        align-items: center;
        flex-direction: row;

        gap: 14px;

        margin-bottom: 0;
        padding-bottom: 18px;
    }

    .song-reading-heading {
        min-width: 0;
        flex: 1;
    }

    .song-reading-heading h1 {
        font-size: 22px;
        line-height: 1.15;
    }

    .song-youtube-button {
        width: 116px;
        height: 66px;
    }

    .song-reading-artist,
    .song-reading-artist a {
        font-size: 18px !important;
    }

    .song-reading-lyrics {
        font-size: 17px;
        line-height: 1.5;
    }

    .song-reading-composition {
        margin-top: 34px;
    }

    .song-reading-actions {
        margin-top: 4px;
    }

    .song-reading-actions .song-print-btn {
        width: 100%;
    }
}


/* =========================================
   PÁGINA DO LOUVOR — IMPRESSÃO
========================================= */

.song-page-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, .06);
}

.song-print-actions {
    display: flex;
    justify-content: flex-end;

    margin-bottom: 25px;
}

.song-print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 17px;

    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 10px;

    background: var(--cg-navy);
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.song-print-btn:hover {
    background: #1e293b;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(15, 23, 42, .18);
}



/* TESTE FINAL — CARDS DA MÚSICA */
.song-reading-actions .song-action-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-height: 58px !important;

    padding: 10px 14px !important;

    border: 1px solid rgba(15, 23, 42, .10) !important;
    border-radius: 13px !important;

    background: #ffffff !important;
    color: #0f172a !important;

    box-shadow: 0 2px 8px rgba(15, 23, 42, .035) !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.song-reading-actions .song-action-icon {
    display: inline-flex !important;
}

.song-reading-actions .song-action-icon svg {
    width: 19px !important;
    height: 19px !important;
}

@media (max-width: 700px) {
    .song-reading-actions {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .song-reading-actions .song-action-card {
        min-height: 52px !important;
        padding: 8px 5px !important;
        flex-direction: column !important;
        gap: 4px !important;
        font-size: 11px !important;
    }
}


/* =========================================
   TEMA — SWITCH PREMIUM
========================================= */

.theme-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 8px 18px 18px;
    padding: 12px 14px;

    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;

    background: #f8fafc;
}

.theme-switch > span {
    color: var(--cg-navy);

    font-size: 13px;
    font-weight: 700;
}

.theme-toggle {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 48px;
    height: 27px;

    padding: 3px;

    border: 0;
    border-radius: 999px;

    background: #dbe3ee;

    cursor: pointer;

    transition:
        background .25s ease,
        box-shadow .25s ease;
}

.theme-toggle::before {
    content: "";

    display: block;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, .18);

    transition: transform .25s ease;
}

.theme-toggle-icon {
    position: absolute;

    left: 6px;

    color: #64748b;

    font-size: 13px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================
   TEMA ESCURO — BASE PREMIUM
========================================= */

html[data-theme="dark"] {
    --cg-bg: #080f1d;
    --cg-surface: #101a2d;
    --cg-surface-soft: #0d1627;

    --cg-navy: #f1f5f9;
    --cg-text: #e5e7eb;
    --cg-text-soft: #cbd5e1;
    --cg-text-muted: #94a3b8;
    --cg-muted: #94a3b8;

    --cg-border: rgba(255, 255, 255, .09);

    /* Cores das categorias de artigos — modo escuro */
    --cg-category-all: #f59e0b;
    --cg-category-all-dark: #f59e0b;
    --cg-category-all-soft: rgba(245, 158, 11, .14);

    --cg-category-history: #818cf8;
    --cg-category-history-dark: #6366f1;
    --cg-category-history-soft: rgba(99, 102, 241, .16);
}

html[data-theme="dark"] body {
    background: var(--cg-bg);
    color: var(--cg-text);
}

html[data-theme="dark"] .theme-switch {
    border-color: rgba(255, 255, 255, .08);
    background: var(--cg-surface-soft);
}

html[data-theme="dark"] .theme-switch > span {
    color: #e5e7eb;
}

html[data-theme="dark"] .theme-toggle {
    background: #f59e0b;
    justify-content: flex-start;

    box-shadow:
        0 0 0 1px rgba(245, 158, 11, .15),
        0 4px 12px rgba(245, 158, 11, .15);
}

html[data-theme="dark"] .theme-toggle-icon {
    left: auto;
    right: 6px;
    color: #ffffff;
}

html[data-theme="dark"] .theme-toggle::before {
    transform: translateX(0);
}


/* =========================================
   TEMA ESCURO — PÁGINA DO LOUVOR
========================================= */

html[data-theme="dark"] .song-page-card {
    background: var(--cg-surface);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .song-reading-header {
    border-bottom-color: rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .song-reading-heading h1 {
    color: #f8fafc;
}

html[data-theme="dark"] .song-reading-artist {
    color: #94a3b8;
}

html[data-theme="dark"] .song-reading-lyrics {
    color: #e5e7eb;
}

/* Correção de leitura da letra no modo escuro */
body.dark-mode .song-reading-lyrics,
html.dark-mode .song-reading-lyrics,
[data-theme="dark"] .song-reading-lyrics {
    color: #e5e7eb;
}

html[data-theme="dark"] .song-reading-composition {
    border-top-color: rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .song-reading-composition-label {
    color: #f8fafc;
}

html[data-theme="dark"] .song-reading-composition-text {
    color: #94a3b8;
}

html[data-theme="dark"] .song-action-card {
    border-color: rgba(255, 255, 255, .09);

    background: #111c30;
    color: #f1f5f9;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .song-action-card:hover {
    border-color: rgba(245, 158, 11, .38);

    background: #162238;

    box-shadow:
        0 9px 24px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] .song-action-label {
    color: #f1f5f9;
}

html[data-theme="dark"] .song-action-icon {
    color: #94a3b8;
}

html[data-theme="dark"] #song-favorite-button.is-favorite {
    border-color: rgba(245, 158, 11, .45);

    background: rgba(245, 158, 11, .10);
}

html[data-theme="dark"] #song-favorite-button.is-favorite .song-action-icon {
    color: #f59e0b;
}

html[data-theme="dark"] .song-youtube-player {
    box-shadow:
        0 14px 35px rgba(0, 0, 0, .28);
}


/* =========================================
   TEMA ESCURO — MENU LATERAL
========================================= */

html[data-theme="dark"] .mobile-menu {
    background: #0d1627;
    color: #f1f5f9;

    box-shadow:
        12px 0 35px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .mobile-menu-header {
    border-bottom-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .mobile-menu-title {
    color: #f8fafc;
}

html[data-theme="dark"] .mobile-menu-close {
    color: #94a3b8;
}

html[data-theme="dark"] .mobile-menu-nav a {
    border-bottom-color: rgba(255, 255, 255, .07);
    color: #e5e7eb;
}

html[data-theme="dark"] .mobile-menu-nav a:hover {
    background: rgba(255, 255, 255, .04);
    color: #f59e0b;
}

html[data-theme="dark"] .mobile-menu-overlay {
    background: rgba(2, 6, 23, .68);
}

html[data-theme="dark"] .site-footer {
    background: #060b14;
    color: #94a3b8;
}


/* =========================================
   TEMA ESCURO — AJUSTE PREMIUM
========================================= */

/* Cabeçalho principal */
html[data-theme="dark"] .site-header {
    background: #0f172a;
    color: #ffffff;
}

/* Garante que os elementos internos do cabeçalho
   continuem legíveis no modo escuro */
html[data-theme="dark"] .site-header a,
html[data-theme="dark"] .site-header button {
    color: #ffffff;
}


/* =========================================
   CARDS DE AÇÃO — PREMIUM DARK
========================================= */

html[data-theme="dark"] .song-action-card {
    border: 1px solid rgba(148, 163, 184, .16);

    background: #172238;
    color: #f8fafc;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .20);

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

/* Texto dos cards */
html[data-theme="dark"] .song-action-label {
    color: #f8fafc;
}

/* Ícones dos cards */
html[data-theme="dark"] .song-action-icon {
    color: #cbd5e1;
}

/* Hover */
html[data-theme="dark"] .song-action-card:hover {
    border-color: rgba(245, 158, 11, .35);

    background: #1c2a43;

    box-shadow:
        0 9px 25px rgba(0, 0, 0, .28);

    transform: translateY(-1px);
}

/* Favoritado */
html[data-theme="dark"] #song-favorite-button.is-favorite {
    border-color: rgba(245, 158, 11, .45);

    background: rgba(245, 158, 11, .10);
}

html[data-theme="dark"] #song-favorite-button.is-favorite .song-action-icon {
    color: #f59e0b;
}


/* =========================================
   TEMA ESCURO — CARDS PREMIUM
========================================= */

html[data-theme="dark"] .song-action-card {
    background: #172238;
    border: 1px solid rgba(148, 163, 184, .18);

    color: #F8FAFC;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .20);
}

/* Texto */
html[data-theme="dark"] .song-action-card .song-action-label {
    color: #F8FAFC;
}

/* Ícones */
html[data-theme="dark"] .song-action-card .song-action-icon {
    color: #CBD5E1;
}

/* Hover */
html[data-theme="dark"] .song-action-card:hover {
    background: #1D2B44;
    border-color: rgba(245, 158, 11, .35);

    box-shadow:
        0 9px 25px rgba(0, 0, 0, .28);

    transform: translateY(-1px);
}

/* Favoritado */
html[data-theme="dark"] #song-favorite-button.is-favorite {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .45);
}

html[data-theme="dark"] #song-favorite-button.is-favorite .song-action-icon {
    color: #F59E0B;
}


/* =========================================
   TEMA ESCURO — SOBRESCRITA DOS CARDS
========================================= */

html[data-theme="dark"] .song-reading-actions .song-action-card {
    background: #172238 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: #F8FAFC !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .20) !important;
}

html[data-theme="dark"] .song-reading-actions .song-action-card .song-action-label {
    color: #F8FAFC !important;
}

html[data-theme="dark"] .song-reading-actions .song-action-card .song-action-icon {
    color: #CBD5E1 !important;
}

html[data-theme="dark"] .song-reading-actions .song-action-card:hover {
    background: #1D2B44 !important;
    border-color: rgba(245, 158, 11, .35) !important;
}

html[data-theme="dark"] #song-favorite-button.is-favorite {
    background: rgba(245, 158, 11, .10) !important;
    border-color: rgba(245, 158, 11, .45) !important;
}

html[data-theme="dark"] #song-favorite-button.is-favorite .song-action-icon {
    color: #F59E0B !important;
}


/* =========================================
   TEMA ESCURO — BLOCO DE PUBLICIDADE
========================================= */

html[data-theme="dark"] .ad-placeholder {
    background: #172238 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: #94A3B8 !important;
}


/* =========================================
   TEMA ESCURO — PUBLICIDADE DO LOUVOR
========================================= */

html[data-theme="dark"] .song-ad-space {
    background: #172238 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: #94A3B8 !important;
}


/* =========================================
   TEMA ESCURO — PUBLICIDADE GLOBAL
========================================= */

/* Página de louvor */
html[data-theme="dark"] .song-ad-space {
    background: #172238 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: #94A3B8 !important;
}

/* Página principal */
html[data-theme="dark"] .ad-slot {
    background: #172238 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: #94A3B8 !important;
}


/* =========================================
   TEMA ESCURO — SEÇÃO DE PUBLICIDADE
========================================= */

html[data-theme="dark"] .home-ad-section {
    background: #080f1d !important;
}


/* =========================================
   TEMA ESCURO — BUSCA PREMIUM
========================================= */










/* =========================================
   BUSCA — ÍCONE PREMIUM
========================================= */








/* =========================================
   CORREÇÃO — LUPA SVG PREMIUM
========================================= */








/* =========================================
   BUSCA — CENTRALIZAÇÃO PERFEITA DA LUPA
========================================= */






/* =========================================
   SWITCH DE TEMA — CABEÇALHO DESKTOP
========================================= */

.desktop-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-left: 6px;
    white-space: nowrap;
}

.desktop-theme-label {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.desktop-theme-switch .theme-toggle-desktop {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 30px;

    padding: 0;

    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 999px;

    background: #172238;

    cursor: pointer;
}

.desktop-theme-switch .theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #f8fafc;
    color: #64748b;

    font-size: 14px;
    line-height: 1;
}

@media (max-width: 700px) {
    .desktop-theme-switch {
        display: none;
    }
}


/* =========================================
   SWITCH DESKTOP — IGUAL AO MOBILE
========================================= */

.desktop-theme-switch .theme-toggle-desktop {
    width: 48px !important;
    height: 27px !important;

    padding: 3px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #dbe3ee !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    position: relative !important;
}

.desktop-theme-switch .theme-toggle-desktop .theme-toggle-icon {
    position: absolute !important;

    left: 6px !important;
    right: auto !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    color: #64748b !important;

    font-size: 13px !important;
    line-height: 1 !important;

    display: block !important;

    pointer-events: none !important;
}

/* Desktop no modo escuro */
html[data-theme="dark"] .desktop-theme-switch .theme-toggle-desktop {
    background: #f59e0b !important;

    justify-content: flex-start !important;

    box-shadow:
        0 0 0 1px rgba(245, 158, 11, .15),
        0 4px 12px rgba(245, 158, 11, .15) !important;
}

html[data-theme="dark"] .desktop-theme-switch .theme-toggle-desktop .theme-toggle-icon {
    left: auto !important;
    right: 6px !important;

    color: #ffffff !important;

    background: transparent !important;
}


/* =========================================
   CARD MODO NOTURNO — DESKTOP
========================================= */

.desktop-theme-switch {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;

    min-width: 178px;
    height: 58px;

    padding: 10px 12px 10px 16px;

    box-sizing: border-box;

    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;

    background: #101a2d;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .12);
}

.desktop-theme-label {
    margin: 0 !important;

    color: #f8fafc !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap;
}

.desktop-theme-switch .theme-toggle-desktop {
    flex: 0 0 auto !important;

    width: 48px !important;
    height: 27px !important;

    padding: 3px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #dbe3ee !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    position: relative !important;

    box-shadow: none !important;
}

.desktop-theme-switch .theme-toggle-desktop::before {
    width: 21px !important;
    height: 21px !important;

    flex: 0 0 21px;

    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, .18) !important;
}

.desktop-theme-switch .theme-toggle-desktop .theme-toggle-icon {
    position: absolute !important;

    left: 6px !important;
    right: auto !important;

    color: #64748b !important;

    font-size: 13px !important;
    line-height: 1 !important;

    pointer-events: none !important;
}

html[data-theme="dark"] .desktop-theme-switch {
    background: #101a2d;
    border-color: rgba(255, 255, 255, .09);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .desktop-theme-switch .theme-toggle-desktop {
    background: #f59e0b !important;
    justify-content: flex-start !important;

    box-shadow:
        0 0 0 1px rgba(245, 158, 11, .15),
        0 4px 12px rgba(245, 158, 11, .15) !important;
}

html[data-theme="dark"] .desktop-theme-switch .theme-toggle-desktop .theme-toggle-icon {
    left: auto !important;
    right: 6px !important;
    color: #ffffff !important;
}

@media (max-width: 700px) {
    .desktop-theme-switch {
        display: none !important;
    }
}


/* =========================================
   AJUSTE FINAL — CARD MODO NOTURNO DESKTOP
========================================= */

.desktop-theme-switch {
    background: #172238 !important;

    border: 1px solid rgba(148, 163, 184, .22) !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .18) !important;
}

/* Remover o antigo círculo aplicado ao ícone */
.desktop-theme-switch .theme-toggle-icon {
    display: block !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}

/* Card no modo escuro */
html[data-theme="dark"] .desktop-theme-switch {
    background: #172238 !important;

    border-color: rgba(148, 163, 184, .22) !important;
}


/* =========================================
   CORREÇÃO DEFINITIVA — CARD DESKTOP
========================================= */

nav.site-nav .desktop-theme-switch {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 190px !important;
    min-width: 190px !important;
    height: 58px !important;

    gap: 16px !important;

    padding: 10px 12px 10px 16px !important;

    box-sizing: border-box !important;

    background: #172238 !important;

    border: 1px solid rgba(148, 163, 184, .28) !important;
    border-radius: 16px !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .20) !important;
}

nav.site-nav .desktop-theme-label {
    display: block !important;

    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f8fafc !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}

nav.site-nav .desktop-theme-switch .theme-toggle-desktop {
    flex: 0 0 48px !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
}

html[data-theme="dark"] nav.site-nav .desktop-theme-switch {
    background: #172238 !important;

    border-color: rgba(148, 163, 184, .28) !important;
}


/* =========================================
   PESQUISA GLOBAL
========================================= */

/* BOTÃO DA LUPA */

.header-search-toggle {
    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .06);

    color:
        rgba(255, 255, 255, .92);

    cursor: pointer;

    transition:
        background var(--cg-transition),
        border-color var(--cg-transition),
        color var(--cg-transition),
        transform var(--cg-transition);
}


.header-search-toggle:hover {
    background:
        rgba(255, 255, 255, .12);

    border-color:
        rgba(255, 255, 255, .25);

    color:
        var(--cg-gold);
}


.header-search-toggle:active {
    transform:
        scale(.96);
}


.header-search-toggle svg {
    display: block;
}


/* =========================================
   CABEÇALHO — NOVA ESTRUTURA DESKTOP
   PC inspirado em layout horizontal premium
========================================= */

@media (min-width: 701px) {

    /* -------------------------------------
       ESTRUTURA PRINCIPAL
    ------------------------------------- */

    .site-header {
        position: relative;
        z-index: 100;
    }

    .header-content {
        min-height: 126px !important;

        display: grid !important;

        grid-template-columns:
            minmax(180px, 1fr)
            minmax(360px, 620px)
            minmax(180px, 1fr);

        grid-template-rows:
            76px
            50px;

        align-items: center !important;

        gap: 0 !important;
    }


    /* -------------------------------------
       CONTROLES EXCLUSIVOS MOBILE
    ------------------------------------- */

    .header-mobile-controls {
        display: none !important;
    }


    /* -------------------------------------
       LOGO
    ------------------------------------- */

    .header-content > .logo {
        grid-column: 1;
        grid-row: 1;

        justify-self: start;

        margin: 0 !important;
    }


    /* -------------------------------------
       PESQUISA CENTRAL
    ------------------------------------- */

    .header-desktop-search {
        display: block !important;

        grid-column: 2;
        grid-row: 1;

        width: 100%;
    }

    .header-search-form {
        display: flex;
        align-items: center;

        width: 100%;
        height: 48px;

        overflow: hidden;

        border:
            1px solid
            rgba(148, 163, 184, .18);

        border-radius: 14px;

        background:
            rgba(255, 255, 255, .06);

        box-shadow:
            0 6px 18px
            rgba(0, 0, 0, .10);
    }

    .header-search-form input {
        flex: 1;

        min-width: 0;
        height: 100%;

        padding:
            0
            18px;

        border: 0;
        outline: none;

        background: transparent;

        color: #ffffff;

        font:
            inherit;

        font-size: 15px;
    }

    .header-search-form input::placeholder {
        color:
            rgba(255, 255, 255, .52);
    }

    .header-search-submit {
        width: 52px;
        height: 100%;

        flex: 0 0 52px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;
        border-left:
            1px solid
            rgba(255, 255, 255, .10);

        background:
            transparent;

        color:
            rgba(255, 255, 255, .78);

        cursor: pointer;

        transition:
            color var(--cg-transition),
            background var(--cg-transition);
    }

    .header-search-submit:hover {
        background:
            rgba(255, 255, 255, .06);

        color:
            var(--cg-gold);
    }

    .header-search-submit svg {
        display: block;
    }


    /* -------------------------------------
       AÇÕES DESKTOP — LADO DIREITO
    ------------------------------------- */

    .header-desktop-actions {
        display: flex !important;

        grid-column: 3;
        grid-row: 1;

        justify-self: end;
        align-items: center;
    }

    .header-desktop-actions .desktop-theme-switch {
        margin: 0 !important;
    }


    /* -------------------------------------
       MENU — SEGUNDA LINHA
    ------------------------------------- */

    .site-nav {
        grid-column: 1 / -1;
        grid-row: 2;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .site-nav a {
        padding:
            9px
            14px !important;
    }


    /* -------------------------------------
       LUPA ANTIGA
       NO DESKTOP A BARRA CENTRAL
       SUBSTITUI ESTE BOTÃO
    ------------------------------------- */

    .header-search-toggle {
        display: none !important;
    }

}


/* =========================================
   CABEÇALHO — PROTEÇÃO DO MOBILE
========================================= */

@media (max-width: 700px) {

    /* Nova busca é exclusivamente desktop */

    .header-desktop-search {
        display: none !important;
    }


    /* Card desktop é exclusivamente desktop */

    .header-desktop-actions {
        display: none !important;
    }


    /* Menu horizontal é exclusivamente desktop */

    .site-nav {
        display: none !important;
    }


    /* Controles mobile continuam disponíveis */

    .header-mobile-controls {
        display: block !important;
        flex: 0 0 auto;
    }


    /* Mantém a lupa do overlay disponível */

    .header-search-toggle {
        display: inline-flex !important;
        flex: 0 0 auto;
    }

}



/* =========================================
   PESQUISA DESKTOP — DROPDOWN FLUTUANTE
========================================= */

.header-desktop-search {
    position: relative;
}


/* RESULTADOS NÃO PARTICIPAM DO FLUXO
   DO CABEÇALHO */
.header-search-suggestions {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;
    right: 0;

    z-index: 1100;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 14px;

    background:
        rgba(20, 33, 57, .99);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .32);
}


/* ITEM DA SUGESTÃO */
.header-search-suggestion-item {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding:
        13px
        16px;

    color:
        #ffffff;

    text-decoration:
        none;

    transition:
        background
        var(--cg-transition);
}


.header-search-suggestion-item:hover {
    background:
        rgba(255, 255, 255, .06);
}


.header-search-suggestion-item strong {
    color:
        rgba(255, 255, 255, .94);

    font-size:
        15px;
}


.header-search-suggestion-item span {
    color:
        rgba(255, 255, 255, .58);

    font-size:
        13px;
}


/* SEPARAÇÃO ENTRE RESULTADOS */
.header-search-suggestion-item +
.header-search-suggestion-item {
    border-top:
        1px solid
        rgba(255, 255, 255, .07);
}


/* VER TODOS OS RESULTADOS */
.header-search-see-all {
    display: block;

    padding:
        13px
        16px;

    border-top:
        1px solid
        rgba(255, 255, 255, .10);

    color:
        var(--cg-gold);

    text-align:
        center;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        background
        var(--cg-transition);
}


.header-search-see-all:hover {
    background:
        rgba(255, 174, 0, .08);
}


/* ESCONDE COMPLETAMENTE QUANDO NÃO HÁ RESULTADOS */
.header-search-suggestions[hidden] {
    display: none !important;
}


/* =========================================
   CORREÇÃO FINAL — BUSCA DESKTOP
   TRAVAMENTO DO GRID DO CABEÇALHO
========================================= */

@media (min-width: 701px) {

    /*
     * Impede que o conteúdo visual da busca
     * influencie o posicionamento da primeira linha.
     */
    .header-content {
        grid-template-rows:
            76px
            50px !important;

        align-items:
            stretch !important;
    }


    /*
     * Área da busca ocupa exatamente
     * a primeira linha do cabeçalho.
     */
    .header-desktop-search {
        grid-column: 2 !important;
        grid-row: 1 !important;

        height: 60px !important;

        align-self:
            stretch !important;

        display:
            flex !important;

        align-items:
            center !important;

        position:
            relative !important;

        min-height:
            0 !important;
    }


    /*
     * O formulário possui altura fixa e
     * nunca pode ser reposicionado pelo dropdown.
     */
    .header-search-form {
        width:
            100% !important;

        height:
            48px !important;

        flex:
            0 0 48px !important;
    }
}

/* =========================================
   BUSCA DESKTOP — PORTAL INDEPENDENTE
========================================= */

@media (min-width: 701px) {

    /*
     * As sugestões ficam completamente
     * independentes do Grid do cabeçalho.
     *
     * A posição é calculada via JavaScript
     * a partir da posição real do campo.
     */
    #header-desktop-search-suggestions {
        position: fixed !important;

        top: 0;
        left: 0;

        right: auto !important;

        box-sizing: border-box;

        z-index: 99999 !important;
    }


    /*
     * O estado hidden continua removendo
     * completamente o elemento da tela.
     */
    #header-desktop-search-suggestions[hidden] {
        display: none !important;
    }

}

/* =========================================
   BUSCA DESKTOP — PORTAL FINAL
========================================= */

@media (min-width: 701px) {

    #header-desktop-search-suggestions {
        position: fixed !important;

        right: auto !important;

        transform: none !important;

        box-sizing: border-box !important;

        overflow: hidden;

        z-index: 99999 !important;
    }


    #header-desktop-search-suggestions[hidden] {
        display: none !important;
    }

}

/* =========================================
   BUSCA DESKTOP — VISUAL FINAL DO PORTAL
========================================= */

@media (min-width: 701px) {

    /*
     * Container visual do portal.
     *
     * A posição é controlada pelo JavaScript.
     * Aqui controlamos somente a aparência.
     */
    #header-desktop-search-suggestions {
        display: block !important;

        overflow: hidden !important;

        border:
            1px solid
            rgba(255, 255, 255, .10) !important;

        border-radius:
            14px !important;

        background:
            rgba(20, 33, 57, .99) !important;

        box-shadow:
            0 18px 45px
            rgba(0, 0, 0, .32) !important;

        color:
            #ffffff !important;
    }


    /*
     * Cada sugestão ocupa sua própria linha.
     */
    #header-desktop-search-suggestions
    .header-search-suggestion-item {
        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            4px !important;

        width:
            100% !important;

        box-sizing:
            border-box !important;

        padding:
            13px
            16px !important;

        color:
            #ffffff !important;

        text-decoration:
            none !important;
    }


    /*
     * Título da música.
     */
    #header-desktop-search-suggestions
    .header-search-suggestion-item strong {
        display:
            block !important;

        color:
            rgba(255, 255, 255, .94) !important;

        font-size:
            15px !important;

        line-height:
            1.3 !important;
    }


    /*
     * Nome do artista.
     */
    #header-desktop-search-suggestions
    .header-search-suggestion-item span {
        display:
            block !important;

        color:
            rgba(255, 255, 255, .58) !important;

        font-size:
            13px !important;

        line-height:
            1.3 !important;
    }


    /*
     * Separação entre músicas.
     */
    #header-desktop-search-suggestions
    .header-search-suggestion-item +
    .header-search-suggestion-item {
        border-top:
            1px solid
            rgba(255, 255, 255, .07) !important;
    }


    /*
     * Hover.
     */
    #header-desktop-search-suggestions
    .header-search-suggestion-item:hover {
        background:
            rgba(255, 255, 255, .06) !important;
    }


    /*
     * Link para todos os resultados.
     */
    #header-desktop-search-suggestions
    .header-search-see-all {
        display:
            block !important;

        width:
            100% !important;

        box-sizing:
            border-box !important;

        padding:
            13px
            16px !important;

        border-top:
            1px solid
            rgba(255, 255, 255, .10) !important;

        color:
            var(--cg-gold) !important;

        text-align:
            center !important;

        font-size:
            14px !important;

        font-weight:
            700 !important;

        text-decoration:
            none !important;
    }


    #header-desktop-search-suggestions
    .header-search-see-all:hover {
        background:
            rgba(255, 174, 0, .08) !important;
    }


    /*
     * Hidden continua tendo prioridade.
     */
    #header-desktop-search-suggestions[hidden] {
        display:
            none !important;
    }

}


/* =========================================
   BUSCA DESKTOP — VISUAL FINAL DO PORTAL
========================================= */

@media (min-width: 701px) {

    #header-desktop-search-suggestions {

        position: fixed !important;

        display: block !important;

        box-sizing: border-box !important;

        background:
            rgba(20, 33, 57, .99) !important;

        border:
            1px solid
            rgba(255, 255, 255, .10) !important;

        border-radius:
            14px !important;

        overflow:
            hidden !important;

        box-shadow:
            0 18px 45px
            rgba(0, 0, 0, .32) !important;

        z-index:
            99999 !important;

    }


    #header-desktop-search-suggestions
    .header-search-suggestion-item {

        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            4px !important;

        padding:
            13px
            16px !important;

        color:
            #ffffff !important;

        text-decoration:
            none !important;

        box-sizing:
            border-box !important;

    }


    #header-desktop-search-suggestions
    .header-search-suggestion-item
    strong {

        display:
            block !important;

        color:
            rgba(255, 255, 255, .94) !important;

        font-size:
            15px !important;

    }


    #header-desktop-search-suggestions
    .header-search-suggestion-item
    span {

        display:
            block !important;

        color:
            rgba(255, 255, 255, .58) !important;

        font-size:
            13px !important;

    }


    #header-desktop-search-suggestions
    .header-search-suggestion-item +
    .header-search-suggestion-item {

        border-top:
            1px solid
            rgba(255, 255, 255, .07) !important;

    }


    #header-desktop-search-suggestions
    .header-search-see-all {

        display:
            block !important;

        padding:
            13px
            16px !important;

        border-top:
            1px solid
            rgba(255, 255, 255, .10) !important;

        color:
            var(--cg-gold) !important;

        text-align:
            center !important;

        font-size:
            14px !important;

        font-weight:
            700 !important;

        text-decoration:
            none !important;

    }


    #header-desktop-search-suggestions
    .header-search-suggestion-item:hover {

        background:
            rgba(255, 255, 255, .06) !important;

    }


    #header-desktop-search-suggestions
    .header-search-see-all:hover {

        background:
            rgba(255, 174, 0, .08) !important;

    }


    #header-desktop-search-suggestions[hidden] {

        display:
            none !important;

    }

}


/* =========================================
   BUSCA DESKTOP — PORTAL VISUAL ISOLADO
========================================= */

@media (min-width: 701px) {

    /*
     * Container independente do cabeçalho.
     * A posição left/top/width continua sendo
     * controlada pelo JavaScript.
     */
    #header-desktop-search-suggestions {

        position:
            fixed !important;

        display:
            block !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;

        background:
            #18243a !important;

        border:
            1px solid
            rgba(255, 255, 255, .14) !important;

        border-radius:
            14px !important;

        box-shadow:
            0 20px 50px
            rgba(0, 0, 0, .45) !important;

        z-index:
            99999 !important;

    }


    /*
     * Cada resultado.
     */
    #header-desktop-search-suggestions
    .desktop-search-portal-item {

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-height:
            64px !important;

        box-sizing:
            border-box !important;

        padding:
            12px
            16px !important;

        margin:
            0 !important;

        text-decoration:
            none !important;

        line-height:
            normal !important;

        background:
            transparent !important;

    }


    /*
     * Título da música.
     */
    #header-desktop-search-suggestions
    .desktop-search-portal-item
    strong {

        display:
            block !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        color:
            rgba(255, 255, 255, .96) !important;

        font-size:
            15px !important;

        font-weight:
            700 !important;

        line-height:
            1.35 !important;

    }


    /*
     * Nome do artista.
     */
    #header-desktop-search-suggestions
    .desktop-search-portal-item
    span {

        display:
            block !important;

        width:
            100% !important;

        margin:
            3px 0 0 0 !important;

        padding:
            0 !important;

        color:
            rgba(255, 255, 255, .58) !important;

        font-size:
            13px !important;

        font-weight:
            400 !important;

        line-height:
            1.35 !important;

    }


    /*
     * Separação entre resultados.
     */
    #header-desktop-search-suggestions
    .desktop-search-portal-item +
    .desktop-search-portal-item {

        border-top:
            1px solid
            rgba(255, 255, 255, .08) !important;

    }


    /*
     * Hover dos resultados.
     */
    #header-desktop-search-suggestions
    .desktop-search-portal-item:hover {

        background:
            rgba(255, 255, 255, .06) !important;

    }


    /*
     * Botão final.
     */
    #header-desktop-search-suggestions
    .desktop-search-portal-see-all {

        display:
            block !important;

        width:
            100% !important;

        box-sizing:
            border-box !important;

        padding:
            14px
            16px !important;

        margin:
            0 !important;

        border-top:
            1px solid
            rgba(255, 255, 255, .10) !important;

        color:
            var(--cg-gold) !important;

        background:
            rgba(0, 0, 0, .08) !important;

        text-align:
            center !important;

        text-decoration:
            none !important;

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1.4 !important;

    }


    #header-desktop-search-suggestions
    .desktop-search-portal-see-all:hover {

        background:
            rgba(255, 174, 0, .10) !important;

    }


    /*
     * Hidden precisa vencer o display:block
     * definido acima.
     */
    #header-desktop-search-suggestions[hidden] {

        display:
            none !important;

    }

}


/* =========================================
   OVERLAY DA PESQUISA — DESKTOP
========================================= */

@media (min-width: 701px) {

    body::before {

        content: "";

        position: fixed;

        inset: 0;

        z-index: 9000;

        background:
            rgba(4, 12, 28, .78);

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .22s ease,
            visibility .22s ease;

    }


    body.desktop-search-active::before {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    .site-header {

        position: relative;

        z-index: 10000;

    }


    #header-desktop-search-suggestions {

        z-index: 10001 !important;

    }

}


/* =========================================
   BUSCA UNIFICADA
   ISOLAMENTO FINAL CONTRA CSS ANTIGO
========================================= */


/* -----------------------------------------
   ÁREA DESKTOP
----------------------------------------- */

.header-desktop-search {
    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 0 !important;
}


.header-desktop-search
.unified-search-trigger {
    width: 100% !important;

    min-width: 0 !important;

    min-height: 48px !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding:
        0
        18px !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(255, 255, 255, .14) !important;

    border-radius:
        14px !important;

    background:
        rgba(255, 255, 255, .05) !important;

    color:
        inherit !important;

    appearance: none !important;

    -webkit-appearance:
        none !important;

    cursor:
        pointer !important;

    text-align:
        left !important;
}


.header-desktop-search
.unified-search-trigger:hover {
    border-color:
        rgba(255, 181, 46, .55) !important;

    background:
        rgba(255, 255, 255, .08) !important;
}


.header-desktop-search
.unified-search-trigger svg {
    display: block !important;

    flex:
        0 0 auto !important;
}


.header-desktop-search
.unified-search-trigger span {
    display: block !important;

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    opacity: .65 !important;
}


/* -----------------------------------------
   OVERLAY PRINCIPAL
----------------------------------------- */

body
.unified-search-overlay {
    position: fixed !important;

    inset: 0 !important;

    z-index: 999999 !important;

    display: flex !important;

    align-items: flex-start !important;

    justify-content: center !important;

    padding:
        96px
        24px
        24px !important;

    box-sizing: border-box !important;

    background:
        rgba(4, 12, 28, .88) !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity .22s ease,
        visibility .22s ease !important;
}


body
.unified-search-overlay.is-open {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
}


/* -----------------------------------------
   PAINEL
----------------------------------------- */

body
.unified-search-overlay
.unified-search-panel {
    width:
        min(760px, 100%) !important;

    min-width: 0 !important;

    display: block !important;

    box-sizing: border-box !important;

    transform:
        translateY(-8px) !important;

    transition:
        transform .22s ease !important;
}


body
.unified-search-overlay.is-open
.unified-search-panel {
    transform:
        translateY(0) !important;
}


/* -----------------------------------------
   FORMULÁRIO
----------------------------------------- */

body
.unified-search-overlay
.unified-search-form {
    width: 100% !important;

    min-height: 64px !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    margin: 0 !important;

    padding:
        6px
        8px
        6px
        18px !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(255, 255, 255, .14) !important;

    border-radius:
        18px !important;

    background:
        rgba(20, 33, 57, .98) !important;

    box-shadow:
        0
        22px
        70px
        rgba(0, 0, 0, .35) !important;
}


/* -----------------------------------------
   ÍCONE
----------------------------------------- */

body
.unified-search-overlay
.unified-search-icon {
    display: block !important;

    flex:
        0 0 auto !important;

    opacity: .75 !important;
}


/* -----------------------------------------
   INPUT
----------------------------------------- */

body
.unified-search-overlay
.unified-search-form
input#unified-search-input {
    flex: 1 !important;

    min-width: 0 !important;

    width: auto !important;

    height: 52px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    outline: none !important;

    box-shadow: none !important;

    background:
        transparent !important;

    color:
        inherit !important;

    font-family:
        inherit !important;

    font-size:
        17px !important;

    appearance: none !important;

    -webkit-appearance:
        none !important;
}


body
.unified-search-overlay
.unified-search-form
input#unified-search-input::placeholder {
    color:
        rgba(255, 255, 255, .52) !important;

    opacity: 1 !important;
}


/* -----------------------------------------
   BOTÃO FECHAR
----------------------------------------- */

body
.unified-search-overlay
button.unified-search-close {
    width: 48px !important;

    height: 48px !important;

    min-width: 48px !important;

    flex:
        0 0 48px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius:
        13px !important;

    background:
        rgba(255, 255, 255, .07) !important;

    color:
        inherit !important;

    font-size:
        28px !important;

    line-height: 1 !important;

    appearance: none !important;

    -webkit-appearance:
        none !important;

    cursor:
        pointer !important;
}


/* -----------------------------------------
   SUGESTÕES
----------------------------------------- */

body
.unified-search-overlay
.unified-search-suggestions {
    width: 100% !important;

    display: block !important;

    overflow: hidden !important;

    margin-top:
        10px !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(255, 255, 255, .10) !important;

    border-radius:
        16px !important;

    background:
        rgba(20, 33, 57, .99) !important;

    box-shadow:
        0
        20px
        60px
        rgba(0, 0, 0, .30) !important;
}


body
.unified-search-overlay
.unified-search-suggestions[hidden] {
    display: none !important;
}


/* -----------------------------------------
   ITEM DE SUGESTÃO
----------------------------------------- */

body
.unified-search-overlay
a.unified-search-suggestion-item {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 12px !important;

    margin: 0 !important;

    padding:
        12px
        18px !important;

    box-sizing: border-box !important;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07) !important;

    background:
        transparent !important;

    color:
        inherit !important;

    text-decoration:
        none !important;
}


body
.unified-search-overlay
a.unified-search-suggestion-item:hover {
    background:
        rgba(255, 255, 255, .06) !important;
}


body
.unified-search-overlay
a.unified-search-suggestion-item strong {
    display: block !important;

    margin: 0 !important;

    color:
        rgba(255, 255, 255, .96) !important;

    font-size:
        15px !important;

    line-height:
        1.35 !important;
}


body
.unified-search-overlay
a.unified-search-suggestion-item span {
    display: block !important;

    margin: 0 !important;

    color:
        rgba(255, 255, 255, .60) !important;

    font-size:
        13px !important;

    line-height:
        1.35 !important;
}





/* canarinho-search-song-preview-mobile */

body
.unified-search-overlay
a.unified-search-song-item {
    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    gap:
        12px !important;
}


body
.unified-search-overlay
.unified-search-song-artist-image {
    width:
        42px !important;

    height:
        42px !important;

    min-width:
        42px !important;

    max-width:
        42px !important;

    object-fit:
        cover !important;

    border-radius:
        50% !important;

    display:
        block !important;

    flex:
        0 0 42px !important;

    flex-shrink:
        0 !important;
}


body
.unified-search-overlay
.unified-search-song-content {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    gap:
        4px !important;

    flex:
        1 1 auto !important;

    min-width:
        0 !important;
}


/* canarinho-search-artist-preview-mobile */

body
.unified-search-overlay
a.unified-search-artist-item {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 12px !important;

    margin: 0 !important;

    padding:
        12px
        18px !important;

    box-sizing: border-box !important;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07) !important;

    background:
        transparent !important;

    color:
        inherit !important;

    text-decoration:
        none !important;
}


body
.unified-search-overlay
a.unified-search-artist-item:hover {
    background:
        rgba(255, 255, 255, .06) !important;
}


body
.unified-search-overlay
.unified-search-artist-image {
    width: 42px !important;

    height: 42px !important;

    min-width: 42px !important;

    max-width: 42px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    display: block !important;

    flex-shrink: 0 !important;
}


body
.unified-search-overlay
.unified-search-artist-name {
    display: block !important;

    margin: 0 !important;

    color:
        rgba(255, 255, 255, .96) !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1.35 !important;
}


/* -----------------------------------------
   VER TODOS
----------------------------------------- */

body
.unified-search-overlay
a.unified-search-see-all {
    width: 100% !important;

    display: block !important;

    margin: 0 !important;

    padding:
        15px
        18px !important;

    box-sizing: border-box !important;

    color:
        var(--cg-gold) !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

    background:
        transparent !important;
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    body
    .unified-search-overlay {
        padding:
            14px
            12px
            12px !important;
    }


    body
    .unified-search-overlay
    .unified-search-panel {
        width: 100% !important;
    }


    body
    .unified-search-overlay
    .unified-search-form {
        min-height:
            60px !important;

        border-radius:
            16px !important;

        padding-left:
            14px !important;

        gap:
            10px !important;
    }


    body
    .unified-search-overlay
    .unified-search-form
    input#unified-search-input {
        height:
            48px !important;

        font-size:
            16px !important;
    }


    body
    .unified-search-overlay
    button.unified-search-close {
        width:
            46px !important;

        height:
            46px !important;

        min-width:
            46px !important;

        flex:
            0 0 46px !important;

        font-size:
            26px !important;
    }

}



/* =========================================
   CORREÇÃO FINAL — BUSCA UNIFICADA MOBILE
   Mantém apenas UMA lupa no cabeçalho
========================================= */

@media (max-width: 700px) {

    /* O gatilho desktop nunca deve aparecer no mobile */

    body
    .site-header
    .header-desktop-search {
        display: none !important;
    }


    /* Mantém apenas o gatilho mobile */

    body
    .site-header
    .header-search-toggle {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;
    }

}


/* =========================================
   BUSCA UNIFICADA — BOTÃO DE BUSCAR
   Overlay mobile
========================================= */

body
.unified-search-overlay
button.unified-search-submit {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        46px !important;

    height:
        46px !important;

    min-width:
        46px !important;

    flex:
        0 0 46px !important;

    padding:
        0 !important;

    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    color:
        inherit !important;

    cursor:
        pointer !important;

    -webkit-tap-highlight-color:
        transparent;
}


body
.unified-search-overlay
button.unified-search-submit
svg {
    display:
        block !important;

    width:
        22px !important;

    height:
        22px !important;

    pointer-events:
        none;
}


body
.unified-search-overlay
button.unified-search-submit:hover {
    background:
        rgba(
            127,
            127,
            127,
            0.12
        ) !important;
}


body
.unified-search-overlay
button.unified-search-submit:active {
    transform:
        scale(
            0.94
        );
}


/* =========================================
   BUSCA DESKTOP — FORMULÁRIO REAL
   Exclusivo para telas maiores
========================================= */

@media (min-width: 701px) {

    body
    .site-header
    .header-desktop-search {
        position:
            relative !important;

        display:
            block !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 auto !important;

        transform:
            translateY(
                12px
            ) !important;

        z-index:
            1000 !important;
    }


    /* -----------------------------------------
       FORMULÁRIO
    ----------------------------------------- */

    body
    .site-header
    .desktop-search-form {
        display:
            flex !important;

        align-items:
            center !important;

        width:
            100% !important;

        height:
            56px !important;

        padding:
            0 20px !important;

        box-sizing:
            border-box !important;

        border:
            1px solid rgba(
                255,
                255,
                255,
                0.14
            ) !important;

        border-radius:
            18px !important;

        background:
            rgba(
                255,
                255,
                255,
                0.04
            ) !important;

        transition:
            border-color 0.2s ease,
            background 0.2s ease,
            box-shadow 0.2s ease !important;
    }


    body
    .site-header
    .desktop-search-form:focus-within {
        border-color:
            rgba(
                240,
                169,
                45,
                0.55
            ) !important;

        background:
            rgba(
                255,
                255,
                255,
                0.06
            ) !important;

        box-shadow:
            0 0 0 3px rgba(
                240,
                169,
                45,
                0.08
            ) !important;
    }


    /* -----------------------------------------
       ÍCONE
    ----------------------------------------- */

    body
    .site-header
    .desktop-search-icon {
        display:
            block !important;

        flex:
            0 0 auto !important;

        width:
            22px !important;

        height:
            22px !important;

        order:
            2 !important;

        margin-left:
            14px !important;

        margin-right:
            0 !important;

        color:
            rgba(
                255,
                255,
                255,
                0.75
            ) !important;

        pointer-events:
            none !important;
    }


    /* -----------------------------------------
       INPUT
    ----------------------------------------- */

    body
    .site-header
    #desktop-search-input {
        display:
            block !important;

        order:
            1 !important;

        flex:
            1 1 auto !important;

        width:
            100% !important;

        min-width:
            0 !important;

        height:
            100% !important;

        padding:
            0 !important;

        margin:
            0 !important;

        border:
            0 !important;

        outline:
            0 !important;

        background:
            transparent !important;

        color:
            inherit !important;

        font:
            inherit !important;

        font-size:
            16px !important;

        box-shadow:
            none !important;

        appearance:
            none !important;

        -webkit-appearance:
            none !important;
    }


    body
    .site-header
    #desktop-search-input::placeholder {
        color:
            rgba(
                255,
                255,
                255,
                0.58
            ) !important;

        opacity:
            1 !important;
    }


    /* Remove controles extras do input search */

    body
    .site-header
    #desktop-search-input::-webkit-search-decoration,
    body
    .site-header
    #desktop-search-input::-webkit-search-cancel-button,
    body
    .site-header
    #desktop-search-input::-webkit-search-results-button,
    body
    .site-header
    #desktop-search-input::-webkit-search-results-decoration {
        -webkit-appearance:
            none !important;
    }


    /* -----------------------------------------
       PREVIEW / SUGESTÕES
    ----------------------------------------- */

    body
    .site-header
    .desktop-search-suggestions {
        position:
            absolute !important;

        top:
            calc(
                100% + 10px
            ) !important;

        left:
            0 !important;

        right:
            0 !important;

        width:
            100% !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;

        border:
            1px solid rgba(
                255,
                255,
                255,
                0.12
            ) !important;

        border-radius:
            18px !important;

        background:
            #202d42 !important;

        box-shadow:
            0 18px 45px rgba(
                0,
                0,
                0,
                0.35
            ) !important;

        z-index:
            2000 !important;
    }


    body
    .site-header
    .desktop-search-suggestions[hidden] {
        display:
            none !important;
    }


    /* -----------------------------------------
       ITEM DA SUGESTÃO
    ----------------------------------------- */

    body
    .site-header
    .desktop-search-suggestion-item {
        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            6px !important;

        padding:
            18px 20px !important;

        text-decoration:
            none !important;

        color:
            inherit !important;

        border-bottom:
            1px solid rgba(
                255,
                255,
                255,
                0.08
            ) !important;

        transition:
            background 0.18s ease !important;
    }


    body
    .site-header
    .desktop-search-suggestion-item:hover {
        background:
            rgba(
                255,
                255,
                255,
                0.06
            ) !important;
    }


    body
    .site-header
    .desktop-search-suggestion-item strong {
        color:
            rgba(
                255,
                255,
                255,
                0.92
            ) !important;

        font-size:
            16px !important;

        font-weight:
            700 !important;
    }


    body
    .site-header
    .desktop-search-suggestion-item span {
        color:
            rgba(
                255,
                255,
                255,
                0.62
            ) !important;

        font-size:
            14px !important;
    }


    

/* canarinho-search-artist-preview-desktop */

@media (min-width: 769px) {

    body
    .site-header
    a.desktop-search-artist-item {
        display:
            flex !important;

        flex-direction:
            row !important;

        align-items:
            center !important;

        gap:
            12px !important;

        padding:
            12px
            20px !important;
    }


    body
    .site-header
    .desktop-search-artist-image {
        width:
            42px !important;

        height:
            42px !important;

        min-width:
            42px !important;

        max-width:
            42px !important;

        object-fit:
            cover !important;

        border-radius:
            50% !important;

        display:
            block !important;

        flex-shrink:
            0 !important;
    }


    body
    .site-header
    .desktop-search-artist-name {
        display:
            block !important;

        margin:
            0 !important;

        color:
            rgba(
                255,
                255,
                255,
                0.92
            ) !important;

        font-size:
            16px !important;

        font-weight:
            700 !important;

        line-height:
            1.35 !important;
    }

}


/* -----------------------------------------
       VER TODOS
    ----------------------------------------- */

    body
    .site-header
    .desktop-search-see-all {
        display:
            block !important;

        padding:
            18px 20px !important;

        text-align:
            center !important;

        text-decoration:
            none !important;

        color:
            #e8ad4b !important;

        font-weight:
            700 !important;

        transition:
            background 0.18s ease !important;
    }


    body
    .site-header
    .desktop-search-see-all:hover {
        background:
            rgba(
                255,
                255,
                255,
                0.06
            ) !important;
    }

}



/* =========================================
   BUSCA DESKTOP — BOTÃO DA LUPA FUNCIONAL
========================================= */

@media (min-width: 701px) {

    body
    .site-header
    .desktop-search-submit {
        order:
            2 !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        flex:
            0 0 auto !important;

        width:
            44px !important;

        height:
            44px !important;

        padding:
            0 !important;

        margin:
            0 0 0 10px !important;

        border:
            0 !important;

        outline:
            0 !important;

        background:
            transparent !important;

        color:
            rgba(
                255,
                255,
                255,
                0.75
            ) !important;

        cursor:
            pointer !important;

        border-radius:
            12px !important;

        transition:
            background 0.18s ease,
            color 0.18s ease,
            transform 0.12s ease !important;
    }


    body
    .site-header
    .desktop-search-submit:hover {
        background:
            rgba(
                255,
                255,
                255,
                0.07
            ) !important;

        color:
            var(--cg-gold) !important;
    }


    body
    .site-header
    .desktop-search-submit:active {
        transform:
            scale(
                0.94
            ) !important;
    }


    body
    .site-header
    .desktop-search-submit
    .desktop-search-icon {
        order:
            initial !important;

        margin:
            0 !important;

        pointer-events:
            none !important;
    }

}


/* =========================================
   BUSCA DESKTOP — BOTÃO LIMPAR
========================================= */

@media (min-width: 701px) {

    body
    .site-header
    .desktop-search-clear {

        order:
            2 !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            44px;

        height:
            44px;

        flex:
            0 0 44px;

        margin:
            0 6px 0 0;

        padding:
            0;

        border:
            0;

        border-radius:
            14px;

        background:
            rgba(
                255,
                255,
                255,
                0.07
            );

        color:
            rgba(
                255,
                255,
                255,
                0.82
            );

        font-size:
            32px;

        font-weight:
            500;

        line-height:
            1;

        box-sizing:
            border-box;

        padding:
            0 0 4px 0;

        cursor:
            pointer;

        transition:
            color 0.2s ease,
            background 0.2s ease,
            transform 0.12s ease;
    }


    body
    .site-header
    .desktop-search-clear[hidden] {

        display:
            none !important;

    }


    body
    .site-header
    .desktop-search-clear:not([hidden]) {

        display:
            inline-flex !important;

    }


    body
    .site-header
    .desktop-search-clear:hover {

        color:
            #ffffff;

        background:
            rgba(
                255,
                255,
                255,
                0.12
            );

    }


    body
    .site-header
    .desktop-search-clear:active {

        transform:
            scale(
                0.94
            );

    }

}


/* =========================================
   BUSCA MOBILE — REMOVER BOTÃO X NATIVO
========================================= */

@media (max-width: 700px) {

    #unified-search-input::-webkit-search-cancel-button {

        -webkit-appearance:
            none;

        appearance:
            none;

        display:
            none;

    }

}

/* ==========================================================
   CANARINHO — MOBILE SEARCH THEME CONSISTENCY
========================================================== */

@media (max-width: 700px) {

    /* canarinho-mobile-search-light-theme-text-fix */


    /*
     * O preview da busca mobile deve manter
     * contraste claro independentemente
     * do tema geral do site.
     */

    body
    .unified-search-overlay {
        color:
            rgba(255, 255, 255, .96) !important;
    }


    /*
     * Texto digitado
     */

    body
    .unified-search-overlay
    .unified-search-form
    input#unified-search-input {
        color:
            rgba(255, 255, 255, .96) !important;

        -webkit-text-fill-color:
            rgba(255, 255, 255, .96) !important;
    }


    /*
     * Placeholder
     */

    body
    .unified-search-overlay
    .unified-search-form
    input#unified-search-input::placeholder {
        color:
            rgba(255, 255, 255, .60) !important;

        opacity:
            1 !important;
    }


    /*
     * Botão X
     */

    body
    .unified-search-overlay
    button.unified-search-close {
        color:
            rgba(255, 255, 255, .90) !important;
    }


    /*
     * Ícone da lupa
     */

    body
    .unified-search-overlay
    .unified-search-icon {
        color:
            rgba(255, 255, 255, .75) !important;

        fill:
            currentColor !important;

        stroke:
            currentColor !important;
    }


    /*
     * Títulos das sugestões
     */

    body
    .unified-search-overlay
    a.unified-search-suggestion-item strong,

    body
    .unified-search-overlay
    .unified-search-artist-name {
        color:
            rgba(255, 255, 255, .96) !important;
    }


    /*
     * Subtítulos e artista
     */

    body
    .unified-search-overlay
    a.unified-search-suggestion-item span {
        color:
            rgba(255, 255, 255, .60) !important;
    }

}

/* ==========================================================
   CANARINHO — MOBILE SEARCH REAL ELEMENTS COLOR FIX
========================================================== */

@media (max-width: 700px) {

    /* canarinho-mobile-search-real-elements-color-fix */


    /*
     * INPUT
     */

    body
    .unified-search-overlay
    #unified-search-input {
        color:
            rgba(255, 255, 255, .96) !important;

        -webkit-text-fill-color:
            rgba(255, 255, 255, .96) !important;

        caret-color:
            rgba(255, 255, 255, .96) !important;
    }


    /*
     * BOTÃO DA LUPA
     *
     * O SVG usa stroke="currentColor".
     * Por isso forçamos a cor no botão
     * e diretamente no SVG.
     */

    body
    .unified-search-overlay
    button.unified-search-submit {
        color:
            rgba(255, 255, 255, .88) !important;
    }


    body
    .unified-search-overlay
    button.unified-search-submit
    svg {
        color:
            rgba(255, 255, 255, .88) !important;

        stroke:
            rgba(255, 255, 255, .88) !important;
    }


    /*
     * BOTÃO X
     */

    body
    .unified-search-overlay
    button.unified-search-close {
        color:
            rgba(255, 255, 255, .92) !important;

        -webkit-text-fill-color:
            rgba(255, 255, 255, .92) !important;
    }


    /*
     * ARTISTAS
     */

    body
    .unified-search-overlay
    .unified-search-artist-name {
        color:
            rgba(255, 255, 255, .96) !important;

        -webkit-text-fill-color:
            rgba(255, 255, 255, .96) !important;
    }


    /*
     * TÍTULOS DAS MÚSICAS
     */

    body
    .unified-search-overlay
    a.unified-search-suggestion-item
    strong {
        color:
            rgba(255, 255, 255, .96) !important;

        -webkit-text-fill-color:
            rgba(255, 255, 255, .96) !important;
    }


    /*
     * SUBTÍTULOS
     */

    body
    .unified-search-overlay
    a.unified-search-suggestion-item
    span {
        color:
            rgba(255, 255, 255, .64) !important;

        -webkit-text-fill-color:
            rgba(255, 255, 255, .64) !important;
    }


    /*
     * VER TODAS AS LETRAS
     *
     * Forçamos explicitamente porque
     * este link não usa os seletores
     * dos itens normais de sugestão.
     */

    body
    .unified-search-overlay
    a.unified-search-see-all {
        color:
            var(--cg-gold) !important;

        -webkit-text-fill-color:
            var(--cg-gold) !important;
    }

}


/* ==========================================================
   CANARINHO — SEARCH RESULTS
   Layout da página /buscar
   Baseado visualmente no preview da busca ao vivo
========================================================== */


/* ----------------------------------------------------------
   LISTA
---------------------------------------------------------- */

.search-results-list {
    width: 100%;
    max-width: 820px;

    margin: 0 auto;

    overflow: hidden;

    border: 1px solid var(--cg-border);
    border-radius: 16px;

    background: var(--cg-surface);
}


/* ----------------------------------------------------------
   ITEM
---------------------------------------------------------- */

.search-result-item {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 14px;

    padding: 14px 18px;

    margin: 0;

    border-bottom:
        1px solid
        rgba(15, 23, 42, .08);

    box-sizing: border-box;

    background: transparent;

    color: inherit;
    text-decoration: none;

    transition:
        background var(--cg-transition);
}


.search-result-item:last-child {
    border-bottom: 0;
}


.search-result-item:hover {
    background:
        rgba(15, 23, 42, .035);
}


/* ----------------------------------------------------------
   IMAGEM DO ARTISTA
---------------------------------------------------------- */

.search-result-image {
    width: 42px;
    height: 42px;

    min-width: 42px;
    max-width: 42px;

    flex: 0 0 42px;
    flex-shrink: 0;

    overflow: hidden;

    border-radius: 50%;

    background:
        rgba(15, 23, 42, .06);
}


.search-result-image img {
    width: 42px;
    height: 42px;

    min-width: 42px;
    max-width: 42px;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


.search-result-image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
}


/* ----------------------------------------------------------
   CONTEÚDO
---------------------------------------------------------- */

.search-result-content {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-start;

    gap: 2px;

    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;
}


/* ----------------------------------------------------------
   TÍTULO
---------------------------------------------------------- */

.search-result-title {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: var(--cg-text);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* ----------------------------------------------------------
   ARTISTA
---------------------------------------------------------- */

.search-result-artist {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: var(--cg-text-muted);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* ----------------------------------------------------------
   TRECHO DA LETRA
   Mantido como informação complementar
---------------------------------------------------------- */

.search-result-preview {
    display: none;
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .search-results-list {
        max-width: none;
        border-radius: 14px;
    }


    .search-result-item {
        gap: 14px;

        padding: 14px 16px;
    }


    .search-result-image {
        width: 42px;
        height: 42px;

        min-width: 42px;
        max-width: 42px;

        flex: 0 0 42px;
    }


    .search-result-image img {
        width: 42px;
        height: 42px;

        min-width: 42px;
        max-width: 42px;
    }

}

/* ==========================================================
   CANARINHO — SEARCH QUERY HEADING
   Cabeçalho da pesquisa realizada
========================================================== */

.search-query-heading {
    width: 100%;
    max-width: 820px;

    margin: 0 auto 38px;

    display: flex;
    align-items: baseline;

    gap: 12px;

    flex-wrap: wrap;
}


.search-query-label {
    margin: 0;

    color: var(--cg-text-muted);

    font-size: 18px;
    font-weight: 500;

    line-height: 1.3;
}


.search-query-value {
    margin: 0;

    color: var(--cg-accent);

    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.01em;

    word-break: break-word;
}


/* MOBILE */

@media (max-width: 700px) {

    .search-query-heading {
        gap: 10px;

        margin-bottom: 32px;
    }


    .search-query-label {
        font-size: 17px;
    }

}


/* ==========================================================
   CANARINHO — SEARCH PAGE FINAL STRUCTURE
   Controle exclusivo da página /buscar
========================================================== */

.search-page-results
.search-results-list {
    width: 100% !important;
    max-width: 820px !important;

    margin: 0 auto !important;

    display: block !important;

    overflow: hidden !important;

    border:
        1px solid var(--cg-border) !important;

    border-radius:
        16px !important;

    background:
        var(--cg-surface) !important;
}


/* ITEM */

.search-page-results
a.search-result-item {
    width: 100% !important;

    min-height: 70px !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;

    gap: 14px !important;

    padding:
        14px 18px !important;

    margin: 0 !important;

    box-sizing:
        border-box !important;

    border:
        0 !important;

    border-bottom:
        1px solid
        rgba(15, 23, 42, .08) !important;

    background:
        transparent !important;

    color:
        inherit !important;

    text-decoration:
        none !important;
}


.search-page-results
a.search-result-item:last-child {
    border-bottom:
        0 !important;
}


/* IMAGEM */

.search-page-results
.search-result-image {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    max-width: 42px !important;

    flex:
        0 0 42px !important;

    flex-shrink:
        0 !important;

    overflow:
        hidden !important;

    border-radius:
        50% !important;
}


.search-page-results
.search-result-image img {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    max-width: 42px !important;

    display:
        block !important;

    object-fit:
        cover !important;

    border-radius:
        50% !important;
}


/* CONTEÚDO */

.search-page-results
.search-result-content {
    display: flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    gap:
        2px !important;

    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    overflow:
        hidden !important;
}


/* TÍTULO */

.search-page-results
.search-result-title {
    width: 100% !important;

    display:
        block !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        var(--cg-text) !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1.35 !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}


/* ARTISTA */

.search-page-results
.search-result-artist {
    width: 100% !important;

    display:
        block !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        var(--cg-text-muted) !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}


/* TRECHO DA LETRA */

.search-page-results
.search-result-preview {
    display:
        none !important;
}


/* HOVER */

.search-page-results
a.search-result-item:hover {
    background:
        rgba(15, 23, 42, .035) !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .search-page-results
    .search-results-list {
        max-width:
            none !important;

        border-radius:
            14px !important;
    }


    .search-page-results
    a.search-result-item {
        min-height:
            70px !important;

        gap:
            14px !important;

        padding:
            14px 16px !important;
    }

}

/* ==========================================================
   CANARINHO — SEARCH RESULT LYRICS PREVIEW
   Trecho da letra abaixo do título e artista
========================================================== */

.search-page-results
.search-result-preview {
    width: 100% !important;

    display: -webkit-box !important;

    margin:
        3px 0 0 !important;

    padding: 0 !important;

    color:
        var(--cg-text-muted) !important;

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.45 !important;

    white-space:
        normal !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        2 !important;
}


/* PALAVRA ENCONTRADA NA LETRA */

.search-page-results
.search-result-preview mark {
    background:
        transparent !important;

    color:
        var(--cg-accent) !important;

    font-weight:
        700 !important;

    padding:
        0 !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .search-page-results
    .search-result-preview {
        margin-top:
            3px !important;

        font-size:
            13px !important;

        line-height:
            1.45 !important;

        -webkit-line-clamp:
            2 !important;
    }

}

/* ==========================================================
   CANARINHO — SEARCH RESULT DIVIDERS
   Linhas entre os resultados em ambos os temas
========================================================== */

.search-page-results
a.search-result-item {
    border-bottom:
        1px solid var(--cg-border) !important;
}


.search-page-results
a.search-result-item:last-child {
    border-bottom:
        0 !important;
}


/* ==========================================================
   CANARINHO — PUBLICIDADE DA PÁGINA DE BUSCA
========================================================== */

.search-ad-section {
    padding: 42px 0 0;
}

.search-ad-section .song-ad-space {
    margin-bottom: 0;
}


/* MOBILE */

@media (max-width: 700px) {

    .search-ad-section {
        padding: 28px 0 0;
    }

}

/* ==========================================================
   CANARINHO — SEARCH CUSTOM PAGINATION
   Paginação premium simplificada
========================================================== */

.search-pagination {
    width: 100%;

    margin-top: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    white-space: nowrap;
}


.search-pagination-link,
.search-pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 16px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


/* ANTERIOR / PRÓXIMA */

.search-pagination-link {
    color: var(--cg-text);

    border: 1px solid var(--cg-border);

    background: var(--cg-surface);
}


.search-pagination-link:hover {
    color: var(--cg-accent);

    border-color: var(--cg-accent);

    transform: translateY(-1px);
}


/* PÁGINA ATUAL */

.search-pagination-current {
    color: var(--cg-accent);

    background: var(--cg-gold-soft);

    border: 1px solid rgba(212, 160, 23, .18);

    font-weight: 700;
}


/* ESTADO DESABILITADO */

.search-pagination-link.is-disabled {
    opacity: .38;

    cursor: default;

    pointer-events: none;
}


/* MOBILE */

@media (max-width: 700px) {

    .search-pagination {
        gap: 8px;

        margin-top: 28px;
    }


    .search-pagination-link,
    .search-pagination-current {
        min-height: 38px;

        padding: 0 10px;

        font-size: 14px;
    }

}



/* ==========================================================
   CANARINHO — MOBILE PAGINATION FINAL FIX
========================================================== */

@media (max-width: 700px) {

    .search-pagination {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        margin-top: 28px !important;

        white-space: nowrap !important;
    }


    .search-pagination .search-pagination-link,
    .search-pagination .search-pagination-current {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-height: 38px !important;

        padding: 0 10px !important;

        border-radius: 10px !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 1 !important;

        text-decoration: none !important;
    }


    .search-pagination .search-pagination-link {
        color: var(--cg-text) !important;

        background: var(--cg-surface) !important;

        border: 1px solid var(--cg-border) !important;
    }


    .search-pagination .search-pagination-current {
        color: var(--cg-accent) !important;

        background: var(--cg-gold-soft) !important;

        border: 1px solid rgba(212, 160, 23, .18) !important;

        font-weight: 700 !important;
    }


    .search-pagination .search-pagination-link.is-disabled {
        opacity: .38 !important;

        pointer-events: none !important;
    }

}


/* ==========================================================
   CANARINHO — DARK MODE PAGINATION RETOUCH
   Ajuste da página atual no tema escuro
========================================================== */

html[data-theme="dark"] .search-pagination-current {
    color: #ffffff !important;

    background: #16263d !important;

    border-color: #2b4059 !important;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .18);
}



/* ==========================================================
   CANARINHO — HOME BANNER
   Banner promocional responsivo
========================================================== */

.home-banner-section {
    width: 100%;

    margin: 24px 0 0;
}


.home-banner-link {
    width: 100%;

    display: block;

    text-decoration: none;

    overflow: hidden;

    border-radius: 16px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.home-banner-image {
    width: 100%;

    height: auto;

    display: block;
}


/* ==========================================================
   DESKTOP
========================================================== */

.home-banner-desktop {
    display: block;
}


.home-banner-mobile {
    display: none;
}


/* ==========================================================
   HOVER
========================================================== */

.home-banner-link:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .10);
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .home-banner-section {
        margin-top: 16px;
    }


    .home-banner-desktop {
        display: none;
    }


    .home-banner-mobile {
        display: block;
    }


    .home-banner-link {
        border-radius: 14px;
    }

}


/* ==========================================================
   DARK MODE
========================================================== */

html[data-theme="dark"] .home-banner-link {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .22);
}


html[data-theme="dark"] .home-banner-link:hover {
    box-shadow:
        0 16px 36px rgba(0, 0, 0, .32);
}



/* ==========================================================
   CANARINHO — HOME BANNER
   POLIMENTO DE LARGURA DESKTOP
========================================================== */

@media (min-width: 701px) {

    .home-banner-section {
        width: min(
            var(--cg-container),
            92%
        );

        margin:
            12px auto 0;
    }

}


/* ==========================================================
   MOBILE — BANNER COM LARGURA LEVEMENTE REDUZIDA
========================================================== */

@media (max-width: 700px) {

    .home-banner-section {
        width: 95%;

        margin-left: auto;
        margin-right: auto;
    }

}

/* ==========================================================
   CANARINHO — SEPARADOR DA PÁGINA DO ARTISTA
========================================================== */

.artist-section-divider {
    width: calc(100% - 32px);
    height: 0;

    margin: 32px auto 0;

    border-top: 3px solid #000000 !important;
    opacity: 1 !important;
}

/* Modo escuro */
[data-theme="dark"] .artist-section-divider {
    border-top-color: #ffffff !important;
    opacity: 1 !important;
}


/* ==========================================================
   CANARINHO — HOME TOP MÚSICAS
   Layout baseado nos resultados da busca
========================================================== */

.home-top-songs {
    width: 100%;
    margin: 32px 0 0;
}


.home-top-songs-header {
    margin-bottom: 16px;
}


.home-top-songs-title {
    margin: 0;
    margin-left: 42px;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -.02em;

    color: var(--cg-text);
}


/*
|--------------------------------------------------------------------------
| LISTA
|--------------------------------------------------------------------------
|
| A aparência principal dos itens utiliza as mesmas classes
| dos resultados da busca:
|
| .search-result-item
| .search-result-image
| .search-result-content
| .search-result-title
| .search-result-artist
|
*/


.home-top-songs-list {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| ITEM DO RANKING
|--------------------------------------------------------------------------
|
| Mantemos apenas a numeração como comportamento exclusivo
| da Home. O restante segue o componente visual da busca.
|
*/


.home-top-song.search-result-item {
    display: flex;
    align-items: center;

    width: 100%;

    text-decoration: none;
}


.home-top-song-position {
    flex: 0 0 42px;

    text-align: center;

    font-size: 14px;
    font-weight: 800;

    color: var(--cg-accent);

    font-variant-numeric: tabular-nums;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/


@media (max-width: 700px) {

    .home-top-songs {
        margin-top: 24px;
    }


    .home-top-songs-header {
        margin-bottom: 12px;
    }


    .home-top-songs-title {
        margin-left: 38px;

        font-size: 17px;
    }


    .home-top-song-position {
        flex-basis: 38px;

        font-size: 13px;
    }

}


/* ==========================================================
   CANARINHO — HOME LETRAS EM ALTA
   Alinhamento estrutural do ranking no mobile
========================================================== */

@media (max-width: 700px) {

    /*
    |----------------------------------------------------------
    | BLOCO
    |----------------------------------------------------------
    |
    | Uma única referência horizontal para título e ranking.
    |
    */

    .home-top-songs {
        padding-inline: 8px;
    }


    /*
    |----------------------------------------------------------
    | TÍTULO
    |----------------------------------------------------------
    */

    .home-top-songs-header {
        padding: 0;
        margin-bottom: 12px;
    }


    .home-top-songs-title {
        margin: 0;

        font-size: 17px;
    }


    /*
    |----------------------------------------------------------
    | ITENS
    |----------------------------------------------------------
    |
    | Remove o padding herdado do componente de busca.
    |
    */

    .home-top-song.search-result-item {
        padding-left: 0;
        padding-right: 0;
    }


    /*
    |----------------------------------------------------------
    | POSIÇÃO
    |----------------------------------------------------------
    |
    | A numeração passa a começar na mesma referência
    | horizontal utilizada pelo título.
    |
    */

    .home-top-song-position {
        flex: 0 0 22px;

        text-align: left;

        font-size: 13px;
    }

}

/* ==========================================================
   CANARINHO — HOME LETRAS EM ALTA
   Ajuste independente do título e da numeração
========================================================== */

@media (max-width: 700px) {

    /*
    |----------------------------------------------------------
    | TÍTULO
    |----------------------------------------------------------
    |
    | Move apenas visualmente para a direita.
    | Não altera a posição da lista.
    |
    */

    .home-top-songs-title {
        transform: translateX(8px);
    }


    /*
    |----------------------------------------------------------
    | NUMERAÇÃO
    |----------------------------------------------------------
    |
    | Move apenas os números para a direita.
    | A largura do campo continua igual, portanto imagem,
    | título e artista não sofrem nenhum deslocamento.
    |
    */

    .home-top-song-position {
        transform: translateX(8px);
    }

}

/* ==========================================================
   CANARINHO — HOME ARTISTAS EM ALTA
   Layout estrutural baseado em Letras em Alta
========================================================== */

/* ==========================================================
   CANARINHO — HOME ARTISTAS EM ALTA
   Layout sincronizado com Letras em Alta
========================================================== */

.home-top-artists {
    width: 100%;
    margin: 32px 0 0;
}


.home-top-artists-header {
    margin-bottom: 16px;
}


.home-top-artists-title {
    margin: 0;
    margin-left: 42px;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -.02em;

    color: var(--cg-text);
}


.home-top-artists-list {
    width: 100%;
}


.home-top-artist.search-result-item {
    display: flex;
    align-items: center;

    width: 100%;

    text-decoration: none;
}


.home-top-artist-position {
    flex: 0 0 42px;

    text-align: center;

    font-size: 14px;
    font-weight: 800;

    color: var(--cg-accent);

    font-variant-numeric: tabular-nums;
}


/* ==========================================================
   CANARINHO — HOME ARTISTAS EM ALTA
   Alinhamento estrutural do ranking no mobile
========================================================== */

@media (max-width: 700px) {

    .home-top-artists {
        padding-inline: 8px;
    }


    .home-top-artists-header {
        padding: 0;
        margin-bottom: 12px;
    }


    .home-top-artists-title {
        margin: 0;

        font-size: 17px;
    }


    .home-top-artist.search-result-item {
        padding-left: 0;
        padding-right: 0;
    }


    .home-top-artist-position {
        flex: 0 0 22px;

        text-align: left;

        font-size: 13px;
    }

}


/* ==========================================================
   CANARINHO — HOME ARTISTAS EM ALTA
   Ajuste independente do título e da numeração
========================================================== */

@media (max-width: 700px) {

    .home-top-artists-title {
        transform: translateX(8px);
    }


    .home-top-artist-position {
        transform: translateX(8px);
    }

}





/* ==========================================================
   CANARINHO — HOME VIEW MORE BUTTONS
   Botões para acessar rankings completos
========================================================== */

.home-view-more-button {
    width: 100%;
    min-height: 54px;

    margin-top: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 24px;

    border:
        1px solid var(--cg-border);

    border-radius: 14px;

    background:
        transparent;

    color:
        var(--cg-text);

    font-size:
        17px;

    font-weight:
        600;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.home-view-more-button:hover {
    color:
        var(--cg-accent);

    border-color:
        var(--cg-accent);

    background:
        var(--cg-surface);

    transform:
        translateY(-1px);
}


@media (max-width: 700px) {

    .home-view-more-button {
        min-height:
            52px;

        margin-top:
            22px;

        padding:
            0 18px;

        border-radius:
            13px;

        font-size:
            16px;
    }

}


/* ==========================================================
   CANARINHO — CATÁLOGO COMPLETO DO ARTISTA
========================================================== */

.artist-all-songs-header {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 8px;
    margin-bottom: 36px;

    text-align: center;
}


.artist-all-songs-title {
    margin: 0;

    color:
        var(--cg-text);

    font-size:
        28px;

    font-weight:
        600;

    line-height:
        1.2;
}


@media (max-width: 700px) {

    .artist-all-songs-header {
        margin-top:
            4px;

        margin-bottom:
            30px;
    }


    .artist-all-songs-title {
        font-size:
            24px;
    }

}


/* ==========================================================
   CANARINHO — CORREÇÃO DO TÍTULO DO CATÁLOGO
========================================================== */

.artist-all-songs .artist-all-songs-header {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 4px !important;
    margin-bottom: 30px !important;

    text-align: center !important;
}


.artist-all-songs .artist-all-songs-title {
    width: 100% !important;

    margin: 0 !important;

    text-align: center !important;

    color: var(--cg-text) !important;

    font-size: 24px !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;
}


@media (min-width: 701px) {

    .artist-all-songs .artist-all-songs-title {
        font-size: 26px !important;
    }

}


/* ==========================================================
   CANARINHO — AJUSTE FINAL DO TÍTULO "TODAS AS MÚSICAS"
========================================================== */

.artist-all-songs .artist-all-songs-header {
    margin-top: 42px !important;
    margin-bottom: 30px !important;
}


.artist-all-songs .artist-all-songs-title {
    font-size: 20px !important;
    font-weight: 600 !important;
}


@media (min-width: 701px) {

    .artist-all-songs .artist-all-songs-header {
        margin-top: 48px !important;
    }

    .artist-all-songs .artist-all-songs-title {
        font-size: 22px !important;
    }

}


/* ==========================================================
   CANARINHO — LISTAGEM DE MÚSICAS ESTILO CATÁLOGO
========================================================== */

.artist-all-songs .artist-letter-songs {
    display: flex;
    flex-direction: column;

    width: 100%;
}


.artist-all-songs .artist-song-link {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0 10px 0 0;

    color: var(--cg-text);

    font-size: 24px;
    font-weight: 400;
    line-height: 1.35;

    text-decoration: none;
}


.artist-all-songs .artist-song-link + .artist-song-link {
    margin-top: 22px;
}


.artist-all-songs .artist-song-link:hover {
    color: var(--cg-accent);
}


@media (max-width: 700px) {

    .artist-all-songs .artist-song-link {
        font-size: 20px;
        line-height: 1.4;
    }


    .artist-all-songs .artist-song-link + .artist-song-link {
        margin-top: 24px;
    }

}

/* ==========================================================
   CANARINHO — CABEÇALHO DO ARTISTA EM ESTILO LETRAS.COM
   ========================================================== */

.artist-profile-main {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}


.artist-profile-photo {
    flex: 0 0 auto !important;
}


.artist-profile-image,
.artist-profile-placeholder {
    width: 84px !important;
    height: 84px !important;
}


.artist-profile-image {
    display: block !important;
    object-fit: cover !important;
}


.artist-profile-info {
    min-width: 0 !important;
    flex: 1 !important;
}


.artist-profile-name {
    margin: 0 !important;
}


@media (max-width: 700px) {

    .artist-profile-main {
        gap: 16px !important;
        align-items: center !important;
    }


    .artist-profile-image,
    .artist-profile-placeholder {
        width: 72px !important;
        height: 72px !important;
    }

}

/* ==========================================================
   PERFIL DO ARTISTA — FOTO À ESQUERDA / NOME AO LADO
   ========================================================== */

.artist-profile-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    text-align: left !important;
}

.artist-profile-photo {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.artist-profile-image,
.artist-profile-placeholder {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
}

.artist-profile-image {
    display: block !important;
    object-fit: cover !important;
}

.artist-profile-info {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
}

.artist-profile-name {
    margin: 0 !important;
    text-align: left !important;
}

/* MOBILE */

@media (max-width: 700px) {

    .artist-profile-main {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        text-align: left !important;
    }

    .artist-profile-image,
    .artist-profile-placeholder {
        width: 60px !important;
        height: 60px !important;
    }

    .artist-profile-name {
        text-align: left !important;
    }

}




/* Aproxima a seção Top 10 do perfil */
    .artist-songs-section.home-top-songs {
        margin-top: 24px !important;
    }





/* =========================================
   CATÁLOGO A-Z DO ARTISTA
   CENTRALIZAÇÃO DEFINITIVA DO TÍTULO
========================================= */

/*
 * Centraliza o container do título,
 * independentemente da estrutura usada.
 */
.artist-all-songs .artist-all-songs-header,
.artist-all-songs .home-top-songs-header {
    display: block !important;
    position: static !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    text-align: center !important;
}


/*
 * Centraliza o próprio título.
 * Força largura total para impedir que regras
 * antigas posicionem o elemento à esquerda.
 */
.artist-all-songs .artist-all-songs-title,
.artist-all-songs .home-top-songs-title {
    display: block !important;

    position: static !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    text-align: center !important;
}



/* =========================================
   TODAS AS MÚSICAS — CENTRALIZAÇÃO DEFINITIVA
========================================= */

.artist-all-songs-header {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.artist-all-songs-title {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}



/* ==========================================================
   PERFIL DO ARTISTA — MOLDURA DA FOTO
   Reduz a borda branca sem alterar tamanho ou layout
   ========================================================== */

.artist-profile-image {
    border: 2px solid #ffffff !important;
    box-sizing: border-box !important;
}



/* CANARINHO ARTIST STORIES RING — FINAL START */

/* ==========================================================
   PERFIL DO ARTISTA — MOLDURA STORIES
   Anel amarelo / dourado / laranja
   Espaçamento interno acompanha o tema da página
   ========================================================== */


/* MODO CLARO */
:root {
    --cg-artist-ring-gap: var(--cg-background);
}


/* MODO ESCURO */
html[data-theme="dark"] {
    --cg-artist-ring-gap: var(--cg-bg);
}


/* ==========================================================
   CÍRCULO EXTERNO — ESTILO STORIES
   ========================================================== */

.artist-profile-photo {
    width: 88px !important;
    height: 88px !important;

    flex: 0 0 88px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 4px !important;

    border-radius: 50% !important;

    background: conic-gradient(
        from 210deg,
        #facc15,
        #f59e0b,
        #fb923c,
        #f97316,
        #fbbf24,
        #facc15
    ) !important;

    box-sizing: border-box !important;

    box-shadow:
        0 0 0 1px rgba(245, 158, 11, .18),
        0 8px 24px rgba(245, 158, 11, .16) !important;
}


/* ==========================================================
   FOTO INTERNA
   ========================================================== */

.artist-profile-image,
.artist-profile-placeholder {
    width: 100% !important;
    height: 100% !important;

    border-radius: 50% !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* FOTO */

.artist-profile-image {
    display: block !important;

    object-fit: cover !important;
    object-position: center !important;

    /*
     Espaço entre a foto e o anel.
     A cor acompanha automaticamente o tema.
    */
    border: 3px solid var(--cg-artist-ring-gap) !important;

    box-shadow: none !important;
}


/* PLACEHOLDER */

.artist-profile-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 3px solid var(--cg-artist-ring-gap) !important;

    box-shadow: none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .artist-profile-photo {
        width: 72px !important;
        height: 72px !important;

        flex: 0 0 72px !important;

        padding: 4px !important;
    }

}

/* CANARINHO ARTIST STORIES RING — FINAL END */







/* CANARINHO ARTIST TITLE DEFINITIVE START */

/* ==========================================================
   PERFIL DO ARTISTA — TAMANHO DEFINITIVO DO TÍTULO
   ========================================================== */

.artist-profile .artist-profile-main .artist-profile-info h1.artist-profile-name {
    font-size: 32px !important;
    line-height: 1.08 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .artist-profile .artist-profile-main .artist-profile-info h1.artist-profile-name {
        font-size: 27px !important;
        line-height: 1.10 !important;
    }

}

/* CANARINHO ARTIST TITLE DEFINITIVE END */

/* ==========================================================
   CANARINHO — SEPARADOR DA PÁGINA DO ARTISTA
========================================================== */

.artist-section-divider {
    display: block !important;

    width: 100% !important;
    height: 0 !important;

    margin: 32px 0 0 !important;

    background: transparent !important;

    border-top: 1px solid #000000 !important;
    opacity: 1 !important;
}


/* MODO ESCURO */

[data-theme="dark"] .artist-section-divider {
    border-top-color: #ffffff !important;
}


/* =========================================
   CANARINHO SONG ERROR REPORT PAGE
   FINAL PREMIUM DESIGN
   ========================================= */

.song-report-page {
    padding: 64px 0 96px;
}


/* =========================================
   PREMIUM CARD
   ========================================= */

.song-report-card {
    position: relative;

    width: 100%;
    max-width: 820px;

    box-sizing: border-box;

    margin: 0 auto;
    padding: 46px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(245, 246, 248, 0.88)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    border-radius: 28px;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.10);
}


/* detalhe dourado superior */

.song-report-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #f0ad35,
            #ffd06f,
            #f0ad35,
            transparent
        );

    border-radius: 0 0 999px 999px;
}


/* =========================================
   HEADER
   ========================================= */

.song-report-header {
    margin-bottom: 30px;
    padding-bottom: 28px;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.07);
}


.song-report-header h1 {
    margin: 0 0 14px;

    font-size:
        clamp(2.4rem, 5vw, 3.6rem);

    line-height: 1.05;

    letter-spacing: -0.04em;
}


.song-report-header p {
    max-width: 620px;

    margin: 0;

    font-size: 1.08rem;

    line-height: 1.75;

    opacity: 0.72;
}


/* =========================================
   SONG INFORMATION
   ========================================= */

.song-report-song-info {
    margin-bottom: 32px;
    padding: 20px 22px;

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(240, 173, 53, 0.10),
            rgba(240, 173, 53, 0.025)
        );
}


.song-report-song-label {
    display: block;

    margin-bottom: 9px;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    opacity: 0.52;
}


.song-report-song-info strong {
    display: inline-block;

    margin-right: 8px;

    font-size: 1.18rem;

    font-weight: 700;
}


.song-report-song-info a {
    color: inherit;

    text-decoration: none;

    opacity: 0.64;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


.song-report-song-info a:hover {
    color: #d89116;

    opacity: 1;
}


/* =========================================
   FORM
   ========================================= */

.song-report-form {
    display: flex;

    flex-direction: column;

    gap: 24px;
}


.song-report-field {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.song-report-field label {
    font-size: 1rem;

    font-weight: 650;
}


.song-report-field label span {
    margin-left: 3px;

    font-size: 0.9rem;

    font-weight: 400;

    opacity: 0.55;
}


/* =========================================
   FIELDS
   ========================================= */

.song-report-field textarea,
.song-report-field input {
    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    color: inherit !important;

    background:
        rgba(255, 255, 255, 0.72) !important;

    border:
        1px solid
        rgba(0, 0, 0, 0.13) !important;

    border-radius: 16px !important;

    outline: none !important;

    font: inherit !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.song-report-field textarea {
    min-height: 190px !important;

    padding: 18px !important;

    resize: vertical;

    line-height: 1.65;
}


.song-report-field input {
    min-height: 56px;

    padding:
        15px 18px !important;
}


.song-report-field textarea::placeholder,
.song-report-field input::placeholder {
    color: inherit;

    opacity: 0.42;
}


.song-report-field textarea:hover,
.song-report-field input:hover {
    border-color:
        rgba(240, 173, 53, 0.32) !important;
}


.song-report-field textarea:focus,
.song-report-field input:focus {
    background:
        rgba(255, 255, 255, 0.95) !important;

    border-color:
        rgba(240, 173, 53, 0.85) !important;

    box-shadow:
        0 0 0 4px
        rgba(240, 173, 53, 0.10) !important;
}


/* =========================================
   ACTIONS
   ========================================= */

.song-report-actions {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 8px;

    padding-top: 28px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.07);
}


.song-report-cancel {
    color: inherit;

    text-decoration: none;

    font-size: 0.95rem;

    opacity: 0.60;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.song-report-cancel:hover {
    opacity: 1;

    transform: translateX(-2px);
}


/* botão enviar */

.song-report-actions .home-view-more-button {
    width: auto !important;

    min-width: 220px;

    padding: 16px 28px !important;

    background:
        linear-gradient(
            135deg,
            #e9a72d,
            #ffd16f
        ) !important;

    color:
        #20180a !important;

    border:
        1px solid
        rgba(255, 209, 111, 0.95) !important;

    border-radius: 15px !important;

    box-shadow:
        0 12px 30px
        rgba(224, 157, 36, 0.18) !important;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease !important;
}


.song-report-actions .home-view-more-button:hover {
    transform:
        translateY(-2px) !important;

    filter:
        brightness(1.04) !important;

    box-shadow:
        0 18px 38px
        rgba(224, 157, 36, 0.28) !important;
}


.song-report-actions .home-view-more-button:active {
    transform:
        translateY(0) !important;
}


/* =========================================
   DARK MODE
   ========================================= */

[data-theme="dark"] .song-report-card {
    background:
        linear-gradient(
            145deg,
            rgba(20, 31, 48, 0.96),
            rgba(10, 18, 31, 0.98)
        );

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.32);
}


[data-theme="dark"] .song-report-header {
    border-bottom-color:
        rgba(255, 255, 255, 0.07);
}


[data-theme="dark"] .song-report-song-info {
    background:
        linear-gradient(
            135deg,
            rgba(240, 173, 53, 0.11),
            rgba(255, 255, 255, 0.018)
        );

    border-color:
        rgba(255, 255, 255, 0.08);
}


[data-theme="dark"] .song-report-field textarea,
[data-theme="dark"] .song-report-field input {
    background:
        rgba(255, 255, 255, 0.045) !important;

    border-color:
        rgba(255, 255, 255, 0.12) !important;
}


[data-theme="dark"] .song-report-field textarea:hover,
[data-theme="dark"] .song-report-field input:hover {
    border-color:
        rgba(240, 173, 53, 0.38) !important;
}


[data-theme="dark"] .song-report-field textarea:focus,
[data-theme="dark"] .song-report-field input:focus {
    background:
        rgba(255, 255, 255, 0.065) !important;

    border-color:
        rgba(240, 173, 53, 0.82) !important;
}


[data-theme="dark"] .song-report-actions {
    border-top-color:
        rgba(255, 255, 255, 0.07);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 640px) {

    .song-report-page {
        padding: 34px 0 64px;
    }


    .song-report-card {
        padding: 30px 22px;

        border-radius: 22px;
    }


    .song-report-card::before {
        left: 18%;
        right: 18%;
    }


    .song-report-header {
        margin-bottom: 26px;

        padding-bottom: 24px;
    }


    .song-report-header h1 {
        font-size: 2.65rem;
    }


    .song-report-header p {
        font-size: 1rem;

        line-height: 1.68;
    }


    .song-report-song-info {
        margin-bottom: 28px;

        padding: 18px;
    }


    .song-report-song-info strong {
        display: block;

        margin: 0 0 6px;

        font-size: 1.1rem;
    }


    .song-report-field textarea {
        min-height: 180px !important;
    }


    .song-report-actions {
        flex-direction: column-reverse;

        align-items: stretch;

        gap: 14px;

        padding-top: 24px;
    }


    .song-report-cancel {
        padding: 10px;

        text-align: center;
    }


    .song-report-actions .home-view-more-button {
        width: 100% !important;

        min-width: 0;
    }

}



/* =========================================
   SONG SUCCESS NOTICE
   ========================================= */

.song-success-notice {
    display: flex;
    align-items: center;
    gap: 16px;

    margin: 24px 0 28px;
    padding: 18px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(45, 170, 95, 0.12),
            rgba(45, 170, 95, 0.045)
        );

    border:
        1px solid
        rgba(70, 190, 115, 0.28);

    border-radius: 16px;

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, 0.08);
}


.song-success-notice-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2fa866,
            #56c77d
        );

    color: #ffffff;

    font-size: 1.15rem;
    font-weight: 800;

    box-shadow:
        0 8px 20px
        rgba(47, 168, 102, 0.22);
}


.song-success-notice-content {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.song-success-notice-content strong {
    font-size: 1rem;

    font-weight: 700;
}


.song-success-notice-content span {
    font-size: 0.94rem;

    line-height: 1.55;

    opacity: 0.72;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 640px) {

    .song-success-notice {
        align-items: flex-start;

        gap: 13px;

        margin: 20px 0 24px;

        padding: 16px;
    }


    .song-success-notice-icon {
        flex: 0 0 34px;

        width: 34px;
        height: 34px;

        font-size: 1rem;
    }


    .song-success-notice-content strong {
        font-size: 0.96rem;
    }


    .song-success-notice-content span {
        font-size: 0.9rem;
    }

}


/* =========================================
   CARD RELACIONADO AO ARTISTA — LETRA
========================================= */

.song-artist-related-card {
    display: flex;
    align-items: center;

    gap: 18px;

    width: 100%;

    margin-top: 24px;
    padding: 18px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #ffffff;

    color: inherit;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.song-artist-related-card:hover {
    transform: translateY(-2px);

    border-color: #cbd5e1;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, .08);
}

.song-artist-related-photo {
    flex: 0 0 auto;

    width: 64px;
    height: 64px;

    border-radius: 50%;

    overflow: hidden;

    background: #e2e8f0;
}

.song-artist-related-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.song-artist-related-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #64748b;

    color: #ffffff;

    font-size: 24px;
    font-weight: 700;
}

.song-artist-related-content {
    display: flex;
    flex-direction: column;

    gap: 6px;

    min-width: 0;
}

.song-artist-related-content strong {
    color: #1e293b;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.25;
}

.song-artist-related-content > span {
    color: #64748b;

    font-size: 16px;

    line-height: 1.4;
}

.song-artist-related-arrow {
    margin-left: 4px;

    font-size: 20px;
}


/* =========================================
   CARD RELACIONADO AO ARTISTA — MOBILE
========================================= */

@media (max-width: 700px) {

    .song-artist-related-card {
        gap: 16px;

        margin-top: 20px;
        padding: 16px;
    }

    .song-artist-related-photo {
        width: 58px;
        height: 58px;
    }

    .song-artist-related-content strong {
        font-size: 18px;
    }

    .song-artist-related-content > span {
        font-size: 15px;
    }

}


/* =========================================
   TEMA ESCURO — CARD RELACIONADO AO ARTISTA
========================================= */

html[data-theme="dark"] .song-artist-related-card {
    border-color: #273449;

    background: #18243a;
}

html[data-theme="dark"] .song-artist-related-card:hover {
    border-color: #3a4b65;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .song-artist-related-content strong {
    color: #e5e7eb;
}

html[data-theme="dark"] .song-artist-related-content > span {
    color: #aab7ca;
}

/* ==========================================================
   CANARINHO — ADMINISTRATIVO
========================================================== */

/* ==========================================================
   LOGIN
========================================================== */

.admin-login-page,
.admin-dashboard-page {
    min-height: 100vh;
    background: var(--cg-background);
    color: var(--cg-text);
}


.admin-login-main {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 32px 20px;
}


.admin-login-card {
    width: min(440px, 100%);

    padding: 40px;

    background: var(--cg-surface);

    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-xl);

    box-shadow: var(--cg-shadow-lg);
}


.admin-login-brand {
    text-align: center;
    margin-bottom: 34px;
}


.admin-login-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--cg-text);

    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
}


.admin-login-logo strong {
    color: var(--cg-gold);
}


.admin-login-brand p {
    margin: 8px 0 0;

    color: var(--cg-text-muted);

    font-size: 13px;
    font-weight: 600;
}


.admin-login-header {
    margin-bottom: 26px;
}


.admin-login-header h1 {
    margin: 0 0 8px;

    color: var(--cg-text);

    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -.03em;
}


.admin-login-header p {
    margin: 0;

    color: var(--cg-text-soft);

    font-size: 14px;
    line-height: 1.6;
}


.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.admin-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.admin-form-field label {
    color: var(--cg-text);

    font-size: 13px;
    font-weight: 700;
}


.admin-form-field input {
    width: 100%;

    min-height: 48px;

    padding: 0 14px;

    color: var(--cg-text);
    background: var(--cg-surface);

    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);

    outline: none;

    transition:
        border-color var(--cg-transition),
        box-shadow var(--cg-transition);
}


.admin-form-field input:focus {
    border-color: var(--cg-gold);

    box-shadow:
        0 0 0 3px rgba(245, 158, 11, .14);
}


.admin-form-error {
    margin: 0;

    color: #dc2626;

    font-size: 12px;
    line-height: 1.45;
}


.admin-remember {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--cg-text-soft);

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}


.admin-remember input {
    width: 16px;
    height: 16px;

    accent-color: var(--cg-gold);
}


.admin-login-submit {
    width: 100%;

    min-height: 50px;

    border: 0;
    border-radius: var(--cg-radius-md);

    background: var(--cg-navy);
    color: white;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform var(--cg-transition),
        background var(--cg-transition),
        box-shadow var(--cg-transition);
}


.admin-login-submit:hover {
    background: var(--cg-navy-soft);

    transform: translateY(-1px);

    box-shadow: var(--cg-shadow-md);
}


.admin-login-footer {
    margin-top: 24px;

    text-align: center;
}


.admin-login-footer a {
    color: var(--cg-text-muted);

    font-size: 13px;
    font-weight: 600;

    transition: color var(--cg-transition);
}


.admin-login-footer a:hover {
    color: var(--cg-gold-dark);
}


/* ==========================================================
   DASHBOARD
========================================================== */

.admin-dashboard-page {
    background:
        linear-gradient(
            180deg,
            var(--cg-navy) 0,
            var(--cg-navy) 260px,
            var(--cg-background) 260px,
            var(--cg-background) 100%
        );
}


.admin-dashboard-header {
    color: white;
}


.admin-dashboard-header-content {
    width: min(var(--cg-container), 92%);
    min-height: 82px;

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.admin-dashboard-logo {
    display: block;

    color: white;

    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
}


.admin-dashboard-logo strong {
    color: var(--cg-gold);
}


.admin-dashboard-header-content > div > span {
    display: block;

    margin-top: 3px;

    color: rgba(255, 255, 255, .62);

    font-size: 12px;
    font-weight: 600;
}


.admin-logout-button {
    min-height: 38px;

    padding: 0 16px;

    color: white;
    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--cg-radius-md);

    font-size: 13px;
    font-weight: 700;

    transition:
        background var(--cg-transition),
        border-color var(--cg-transition);
}


.admin-logout-button:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
}


.admin-dashboard-main {
    width: min(var(--cg-container), 92%);

    margin: 42px auto 0;
}


.admin-dashboard-welcome {
    color: white;

    margin-bottom: 32px;
}


.admin-dashboard-eyebrow {
    margin: 0 0 8px;

    color: var(--cg-gold);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
}


.admin-dashboard-welcome h1 {
    margin: 0 0 8px;

    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -.035em;
}


.admin-dashboard-welcome > p:last-child {
    max-width: 400px;

    margin: 0;

    color: rgba(255, 255, 255, .68);

    font-size: 14px;
}


.admin-dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    padding-bottom: 50px;
}


.admin-dashboard-card {
    min-height: 220px;

    padding: 26px;

    background: var(--cg-surface);

    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);

    box-shadow: var(--cg-shadow-sm);

    transition:
        transform var(--cg-transition),
        box-shadow var(--cg-transition),
        border-color var(--cg-transition);
}


.admin-dashboard-card:hover {
    transform: translateY(-3px);

    border-color: rgba(245, 158, 11, .35);

    box-shadow: var(--cg-shadow-md);
}


.admin-dashboard-card-icon {
    display: inline-flex;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    background: var(--cg-gold-soft);

    border-radius: 12px;

    font-size: 20px;
}


.admin-dashboard-card h2 {
    margin: 0 0 7px;

    color: var(--cg-text);

    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.02em;
}


.admin-dashboard-card p {
    margin: 0;

    color: var(--cg-text-muted);

    font-size: 13px;
    line-height: 1.6;
}


.admin-dashboard-coming {
    display: inline-block;

    margin-top: 18px;

    padding: 5px 9px;

    color: var(--cg-gold-dark);
    background: var(--cg-gold-soft);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}


/* ==========================================================
   DARK MODE
========================================================== */

html[data-theme="dark"] .admin-dashboard-page {
    background:
        linear-gradient(
            180deg,
            #020617 0,
            var(--cg-navy) 260px,
            #020617 260px,
            #020617 100%
        );
}


html[data-theme="dark"] .admin-login-card,
html[data-theme="dark"] .admin-dashboard-card {
    background: var(--cg-surface);
}


/* ==========================================================
   ADMIN — MOBILE
========================================================== */

@media (max-width: 700px) {

    .admin-login-main {
        padding: 20px 16px;
    }


    .admin-login-card {
        padding: 28px 22px;

        border-radius: var(--cg-radius-lg);
    }


    .admin-login-header h1 {
        font-size: 27px;
    }


    .admin-dashboard-page {
        background:
            linear-gradient(
                180deg,
                var(--cg-navy) 0,
                var(--cg-navy) 300px,
                var(--cg-background) 300px,
                var(--cg-background) 100%
            );
    }


    .admin-dashboard-header-content {
        width: calc(100% - 32px);

        min-height: 74px;
    }


    .admin-dashboard-main {
        width: calc(100% - 32px);

        margin-top: 30px;
    }


    .admin-dashboard-welcome {
        margin-bottom: 24px;
    }


    .admin-dashboard-welcome h1 {
        font-size: 30px;
    }


    .admin-dashboard-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .admin-dashboard-card {
        min-height: auto;

        padding: 22px;
    }

}

/* ==========================================================
   CANARINHO — GERENCIAMENTO DE BANNERS
========================================================== */

.admin-banner-back {
    margin-bottom: 20px;
}

.admin-banner-back a {
    display: inline-flex;
    align-items: center;
    color: var(--cg-text-soft);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--cg-transition);
}

.admin-banner-back a:hover {
    color: var(--cg-gold-dark);
}

.admin-banner-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    box-shadow: var(--cg-shadow-sm);
}

.admin-banner-summary > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.admin-banner-summary-label {
    color: var(--cg-text-soft);
    font-size: 14px;
    font-weight: 600;
}

.admin-banner-summary strong {
    color: var(--cg-text);
    font-size: 24px;
}

.admin-banner-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.admin-banner-card {
    display: grid;
    grid-template-columns: minmax(320px, 43%) minmax(0, 1fr);
    overflow: hidden;
    width: 100%;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-md);
}

.admin-banner-preview {
    min-width: 0;
    background: var(--cg-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-banner-preview picture {
    display: block;
    width: 100%;
    line-height: 0;
}

.admin-banner-preview img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.admin-banner-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    padding: 24px;
    color: var(--cg-text-muted);
    font-size: 14px;
}

.admin-banner-content {
    min-width: 0;
    padding: 30px;
}

.admin-banner-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.admin-banner-title {
    min-width: 0;
}

.admin-banner-title .admin-dashboard-eyebrow {
    margin-bottom: 6px;
}

.admin-banner-heading h2 {
    margin: 0;
    color: var(--cg-text);
    font-size: 24px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.admin-banner-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.admin-banner-status-active {
    background: #ecfdf5;
    color: #047857;
}

.admin-banner-status-inactive {
    background: #f1f5f9;
    color: #64748b;
}

.admin-banner-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.admin-banner-detail {
    min-width: 0;
    padding: 15px 16px;
    background: var(--cg-surface-soft);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
}

.admin-banner-detail-wide {
    grid-column: 1 / -1;
}

.admin-banner-detail-label {
    display: block;
    margin-bottom: 6px;
    color: var(--cg-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.admin-banner-detail strong {
    display: block;
    color: var(--cg-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-banner-actions {
    display: flex;
    align-items: center;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--cg-border);
}

.admin-banner-actions-placeholder {
    color: var(--cg-text-muted);
    font-size: 13px;
}


/* ==========================================================
   RESPONSIVO — BANNERS
========================================================== */

@media (max-width: 800px) {

    .admin-banner-card {
        grid-template-columns: 1fr;
        border-radius: var(--cg-radius-lg);
    }

    .admin-banner-preview {
        width: 100%;
        min-height: 0;
    }

    .admin-banner-preview picture {
        width: 100%;
    }

    .admin-banner-preview img {
        width: 100%;
        height: auto;
    }

    .admin-banner-content {
        padding: 24px;
    }

    .admin-banner-heading {
        gap: 14px;
    }

}

@media (max-width: 500px) {

    .admin-banner-back {
        margin-bottom: 16px;
    }

    .admin-banner-summary {
        padding: 17px 18px;
    }

    .admin-banner-summary > div {
        width: 100%;
        justify-content: space-between;
    }

    .admin-banner-summary-label {
        font-size: 13px;
    }

    .admin-banner-summary strong {
        font-size: 22px;
    }

    .admin-banner-list {
        gap: 18px;
        margin-top: 18px;
    }

    .admin-banner-content {
        padding: 22px 18px;
    }

    .admin-banner-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-banner-heading h2 {
        font-size: 21px;
    }

    .admin-banner-details {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 22px;
    }

    .admin-banner-detail-wide {
        grid-column: auto;
    }

    .admin-banner-actions {
        margin-top: 18px;
        padding-top: 17px;
    }

}


/* ==========================================================
   CANARINHO — FORMULÁRIO DE BANNERS
========================================================== */

.admin-banner-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.admin-banner-form-card {
    padding: 30px;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-md);
}

.admin-banner-form-header {
    margin-bottom: 26px;
}

.admin-banner-form-header h2 {
    margin: 0;
    color: var(--cg-text);
    font-size: 21px;
    line-height: 1.3;
}

.admin-banner-form-header p {
    margin: 7px 0 0;
    color: var(--cg-text-soft);
    font-size: 14px;
    line-height: 1.5;
}

.admin-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-form-field {
    min-width: 0;
    margin-bottom: 20px;
}

.admin-form-field:last-child {
    margin-bottom: 0;
}

.admin-form-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--cg-text);
    font-size: 14px;
    font-weight: 700;
}

.admin-form-field input[type="text"],
.admin-form-field input[type="number"],
.admin-form-field input[type="file"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.admin-form-field input[type="text"],
.admin-form-field input[type="number"] {
    min-height: 48px;
    padding: 11px 14px;
    color: var(--cg-text);
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    outline: none;
    font: inherit;
    transition:
        border-color var(--cg-transition),
        box-shadow var(--cg-transition);
}

.admin-form-field input[type="text"]:focus,
.admin-form-field input[type="number"]:focus {
    border-color: var(--cg-gold);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .14);
}

.admin-form-field input[type="file"] {
    min-height: 48px;
    padding: 10px;
    color: var(--cg-text-soft);
    background: var(--cg-surface-soft);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    font: inherit;
}

.admin-form-field small {
    display: block;
    margin-top: 7px;
    color: var(--cg-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.admin-form-field small strong {
    color: var(--cg-text-soft);
}

.admin-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--cg-gold-soft);
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: var(--cg-radius-sm);
    cursor: pointer;
}

.admin-form-checkbox input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--cg-gold-dark);
}

.admin-form-checkbox span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-form-checkbox strong {
    color: var(--cg-text);
    font-size: 14px;
}

.admin-form-checkbox small {
    color: var(--cg-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.admin-banner-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    margin-top: 12px;
    overflow: hidden;
    background: var(--cg-surface-soft);
    border: 1px dashed var(--cg-border);
    border-radius: var(--cg-radius-md);
    color: var(--cg-text-muted);
    font-size: 12px;
    text-align: center;
}

.admin-banner-upload-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}

.admin-banner-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 2px;
}

.admin-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 20px;
    border-radius: var(--cg-radius-sm);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--cg-transition),
        background var(--cg-transition),
        border-color var(--cg-transition),
        box-shadow var(--cg-transition);
}

.admin-form-button:hover {
    transform: translateY(-1px);
}

.admin-form-button-primary {
    color: #ffffff;
    background: var(--cg-navy);
    border: 1px solid var(--cg-navy);
    box-shadow: var(--cg-shadow-sm);
}

.admin-form-button-primary:hover {
    background: var(--cg-navy-soft);
}

.admin-form-button-secondary {
    color: var(--cg-text-soft);
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
}

.admin-form-button-secondary:hover {
    color: var(--cg-text);
    border-color: #cbd5e1;
    background: var(--cg-surface-soft);
}

.admin-form-alert {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: var(--cg-radius-md);
    font-size: 14px;
    line-height: 1.5;
}

.admin-form-alert strong {
    display: block;
    margin-bottom: 8px;
}

.admin-form-alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.admin-form-alert-error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.admin-form-alert-success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}


/* ==========================================================
   RESPONSIVO — FORMULÁRIO DE BANNERS
========================================================== */

@media (max-width: 800px) {

    .admin-banner-form-card {
        padding: 24px;
    }

    .admin-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .admin-banner-image-fields {
        gap: 4px;
    }

}

@media (max-width: 500px) {

    .admin-banner-form {
        margin-top: 18px;
        gap: 16px;
    }

    .admin-banner-form-card {
        padding: 20px 18px;
        border-radius: var(--cg-radius-lg);
    }

    .admin-banner-form-header {
        margin-bottom: 22px;
    }

    .admin-banner-form-header h2 {
        font-size: 19px;
    }

    .admin-form-field {
        margin-bottom: 18px;
    }

    .admin-banner-upload-preview {
        min-height: 150px;
    }

    .admin-banner-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }

    .admin-form-button {
        width: 100%;
    }

}

/* =========================================================
   CANARINHO — GERENCIAMENTO DE BANNERS PREMIUM
   ========================================================= */

.admin-banner-manager-page {
    padding-bottom: 72px;
}

.admin-banner-hero {
    margin-bottom: 28px;
}

.admin-banner-hero-copy {
    max-width: 720px;
}

.admin-banner-hero-copy h1 {
    margin: 6px 0 10px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.admin-banner-hero-copy p:last-child {
    margin: 0;
    color: var(--cg-text-soft);
    font-size: 1rem;
    line-height: 1.7;
}


/* =========================================================
   ESTATÍSTICAS
   ========================================================= */

.admin-banner-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.admin-banner-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 96px;
    padding: 20px 22px;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-sm);
}

.admin-banner-stat-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--cg-gold-soft);
    color: var(--cg-gold-dark);
    font-size: 1.35rem;
}

.admin-banner-stat-icon-active {
    background: #ecfdf5;
    color: #059669;
}

.admin-banner-stat-card div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-banner-stat-card span {
    color: var(--cg-text-muted);
    font-size: .82rem;
    font-weight: 600;
}

.admin-banner-stat-card strong {
    color: var(--cg-text);
    font-size: 1.7rem;
    line-height: 1;
}


/* =========================================================
   LISTA
   ========================================================= */

.admin-banner-list {
    display: grid;
    gap: 24px;
}


/* =========================================================
   CARD PREMIUM
   ========================================================= */

.admin-banner-card-premium {
    overflow: hidden;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-xl);
    box-shadow: var(--cg-shadow-md);
    transition:
        transform var(--cg-transition),
        box-shadow var(--cg-transition),
        border-color var(--cg-transition);
}

@media (min-width: 801px) {

    .admin-banner-card .admin-banner-preview-column {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-self: stretch;
    }

    .admin-banner-card .admin-banner-preview-premium {
        height: 430px !important;
        min-height: 430px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box;
    }

    .admin-banner-card .admin-banner-preview-premium picture {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .admin-banner-card .admin-banner-preview-premium img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        margin: 0;
    }

    .admin-banner-card .admin-banner-content-premium {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

}

.admin-banner-card-premium:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: var(--cg-shadow-lg);
}


/* =========================================================
   PREVIEW
   ========================================================= */

.admin-banner-preview-premium {
    position: relative;
    overflow: hidden;
    background: var(--cg-surface-soft);
}

.admin-banner-preview-premium picture {
    display: block;
}

.admin-banner-preview-premium img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 430px;
    object-fit: cover;
}

.admin-banner-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(15, 23, 42, .52),
        rgba(15, 23, 42, 0) 34%
    );
}

.admin-banner-number {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    backdrop-filter: blur(10px);
}

.admin-banner-preview-overlay .admin-banner-status {
    margin: 0;
}


/* =========================================================
   ESTATÍSTICAS DO BANNER
   ========================================================= */

.admin-banner-stats-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 22px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 10px auto 14px;
    padding: 9px 18px;
    box-sizing: border-box;
    border: 1px solid var(--cg-border);
    border-radius: 999px;
    background: var(--cg-surface);
    box-shadow: var(--cg-shadow-sm);
}

.admin-banner-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: var(--cg-text-soft);
    font-size: .82rem;
    font-weight: 600;
}

.admin-banner-stat-icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-gold-dark);
    font-size: .95rem;
    line-height: 1;
}

.admin-banner-stat-label {
    color: var(--cg-text-muted);
}

.admin-banner-stat-item strong {
    color: var(--cg-text);
    font-size: .84rem;
    font-weight: 800;
}

.admin-banner-stat-divider {
    width: 1px;
    height: 20px;
    background: var(--cg-border);
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.admin-banner-content-premium {
    padding: 26px 28px 28px;
}

.admin-banner-heading-premium {
    margin-bottom: 22px;
}

.admin-banner-title h2 {
    margin: 0;
    color: var(--cg-text);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.25;
    letter-spacing: -.02em;
}

.admin-banner-title p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 7px 0 0;
    color: var(--cg-text-muted);
    font-size: .86rem;
    font-weight: 500;
}


/* =========================================================
   DETALHES
   ========================================================= */

.admin-banner-premium-details {
    display: grid;
    grid-template-columns: minmax(100px, .4fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.admin-banner-premium-detail {
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    background: var(--cg-surface-soft);
}

.admin-banner-premium-detail span {
    display: block;
    margin-bottom: 6px;
    color: var(--cg-text-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.admin-banner-premium-detail strong {
    display: block;
    overflow: hidden;
    color: var(--cg-text);
    font-size: .92rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   ASSETS
   ========================================================= */

.admin-banner-assets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.admin-banner-asset {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    background: var(--cg-surface);
}

.admin-banner-asset-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cg-surface-soft);
    font-size: 1rem;
}

.admin-banner-asset div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.admin-banner-asset div span {
    color: var(--cg-text-muted);
    font-size: .72rem;
    font-weight: 600;
}

.admin-banner-asset div strong {
    color: var(--cg-text);
    font-size: .88rem;
}


/* =========================================================
   AÇÕES
   ========================================================= */

.admin-banner-actions-premium {
    display: flex;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--cg-border);
}

.admin-banner-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--cg-border);
    border-radius: 11px;
    background: var(--cg-background);
    color: var(--cg-text-soft);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: not-allowed;
    opacity: .72;
}

.admin-banner-action-button-primary {
    border-color: var(--cg-gold);
    background: var(--cg-gold);
    color: #fff;
    cursor: pointer;
    opacity: 1;
    text-decoration: none;
    transition:
        transform var(--cg-transition),
        box-shadow var(--cg-transition),
        background var(--cg-transition);
}

.admin-banner-action-button-primary:hover {
    background: var(--cg-gold-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--cg-shadow-sm);
}

.admin-banner-action-button-primary:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .25);
    outline-offset: 2px;
}

.admin-banner-action-button span {
    font-size: 1rem;
}


/* =========================================================
   VAZIO
   ========================================================= */

.admin-banner-empty {
    padding: 56px 28px;
    text-align: center;
}

.admin-banner-empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: var(--cg-gold-soft);
    color: var(--cg-gold-dark);
    font-size: 1.5rem;
}

.admin-banner-empty h2 {
    margin: 0 0 8px;
}

.admin-banner-empty p {
    margin: 0;
    color: var(--cg-text-soft);
}


/* =========================================================
   ALERTAS
   ========================================================= */

.admin-banner-manager-page .admin-form-alert {
    margin-bottom: 24px;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 700px) {

    .admin-banner-manager-page {
        padding-bottom: 48px;
    }

    .admin-banner-stats {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }

    .admin-banner-stat-card {
        min-height: 82px;
        padding: 16px 18px;
    }

    .admin-banner-stat-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .admin-banner-card-premium {
        border-radius: 20px;
    }

    .admin-banner-preview-premium img {
        max-height: none;
    }

    .admin-banner-preview-overlay {
        padding: 12px;
    }

    .admin-banner-content-premium {
        padding: 21px 18px 20px;
    }

    .admin-banner-premium-details {
        grid-template-columns: 1fr 1fr;
    }

    .admin-banner-premium-detail-wide {
        grid-column: 1 / -1;
    }

    .admin-banner-assets {
        grid-template-columns: 1fr;
    }

    .admin-banner-actions-premium {
        flex-direction: column;
    }

    .admin-banner-action-button {
        width: 100%;
    }
}

@media (max-width: 430px) {

    .admin-banner-hero-copy h1 {
        font-size: 2rem;
    }

    .admin-banner-premium-details {
        grid-template-columns: 1fr;
    }

    .admin-banner-premium-detail-wide {
        grid-column: auto;
    }

    .admin-banner-title h2 {
        font-size: 1.28rem;
    }
}


/* =========================================================
   MENU DE AÇÕES DOS BANNERS
   ========================================================= */

.admin-banner-actions-dropdown {
    position: relative;
}

.admin-banner-more-button {
    cursor: pointer;
    opacity: 1;
    transition:
        transform var(--cg-transition),
        border-color var(--cg-transition),
        background var(--cg-transition),
        box-shadow var(--cg-transition);
}

.admin-banner-more-button:hover {
    color: var(--cg-text);
    border-color: #cbd5e1;
    background: var(--cg-surface-soft);
    transform: translateY(-1px);
    box-shadow: var(--cg-shadow-sm);
}

.admin-banner-actions-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 50;
    min-width: 220px;
    padding: 7px;
    border: 1px solid var(--cg-border);
    border-radius: 14px;
    background: var(--cg-surface);
    box-shadow: var(--cg-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(.98);
    transform-origin: bottom right;
    transition:
        opacity var(--cg-transition),
        transform var(--cg-transition),
        visibility var(--cg-transition);
}

.admin-banner-actions-dropdown.is-open .admin-banner-actions-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.admin-banner-actions-menu form {
    margin: 0;
}

.admin-banner-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--cg-text-soft);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition:
        background var(--cg-transition),
        color var(--cg-transition);
}

.admin-banner-menu-item:hover {
    background: var(--cg-gold-soft);
    color: var(--cg-gold-dark);
}

.admin-banner-menu-item span {
    width: 22px;
    text-align: center;
    font-size: .9rem;
}

@media (max-width: 700px) {

    .admin-banner-actions-menu {
        right: auto;
        left: 0;
        transform-origin: bottom left;
    }

}


.admin-banner-menu-item-danger {
    color: #b91c1c;
}

.admin-banner-menu-item-danger:hover {
    background: #fef2f2;
    color: #991b1b;
}


/* =========================================================
   CTA IMPORTAR BANNERS
   ========================================================= */

.admin-banner-import-wrapper {
    display: flex;
    justify-content: center;
    margin: 26px 0 30px;
}

.admin-banner-import-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid var(--cg-gold);
    border-radius: 12px;
    background: var(--cg-gold);
    color: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--cg-shadow-sm);
    transition:
        transform var(--cg-transition),
        background var(--cg-transition),
        box-shadow var(--cg-transition);
}

.admin-banner-import-button:hover {
    background: var(--cg-gold-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--cg-shadow-md);
}

.admin-banner-import-button:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .25);
    outline-offset: 3px;
}

.admin-banner-import-button span {
    font-size: 1.15rem;
    line-height: 1;
}

@media (max-width: 700px) {

    .admin-banner-import-wrapper {
        margin: 24px 0 28px;
    }

    .admin-banner-import-button {
        width: 100%;
    }

}


/* =========================================================
   ESTATÍSTICAS DO BANNER — VERSÃO DEFINITIVA
   ========================================================= */

.admin-banner-stats-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    max-width: calc(100% - 24px) !important;

    margin: 10px auto 14px !important;
    padding: 8px 16px !important;

    box-sizing: border-box !important;

    border: 1px solid var(--cg-border) !important;
    border-radius: 999px !important;

    background: var(--cg-surface) !important;
    box-shadow: var(--cg-shadow-sm) !important;

    gap: 22px !important;
    white-space: nowrap !important;
}

.admin-banner-stats-inline .admin-banner-stat-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: max-content !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 6px !important;

    white-space: nowrap !important;
}

.admin-banner-stats-inline .admin-banner-stat-icon-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--cg-gold-dark) !important;

    font-size: .95rem !important;
    line-height: 1 !important;
}

.admin-banner-stats-inline .admin-banner-stat-label {
    display: inline !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--cg-text-soft) !important;

    font-size: .82rem !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
}

.admin-banner-stats-inline .admin-banner-stat-item strong {
    display: inline !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--cg-text) !important;

    font-size: .84rem !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}

.admin-banner-stats-inline .admin-banner-stat-divider {
    display: block !important;
    flex: 0 0 1px !important;

    width: 1px !important;
    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--cg-border) !important;
}

@media (max-width: 500px) {

    .admin-banner-stats-inline {
        gap: 18px !important;
        margin: 9px auto 12px !important;
        padding: 8px 15px !important;
    }

    .admin-banner-stats-inline .admin-banner-stat-item {
        gap: 5px !important;
    }

    .admin-banner-stats-inline .admin-banner-stat-label,
    .admin-banner-stats-inline .admin-banner-stat-item strong {
        font-size: .82rem !important;
    }

}



/* ==========================================================================
   AVISOS DE LETRAS — GERENCIAMENTO ADMINISTRATIVO
   ========================================================================== */

.admin-reports-page {
    padding-bottom: 80px;
}


/* --------------------------------------------------------------------------
   ESTATÍSTICAS
   -------------------------------------------------------------------------- */

.admin-report-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 30px;
}

.admin-report-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 112px;
    padding: 20px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 20px;
    background: #ffffff;
    color: #101828;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.admin-report-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.admin-report-stat-card span {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-report-stat-card strong {
    margin-top: 10px;
    color: #101828;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.admin-report-stat-card-active {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.10);
}


/* --------------------------------------------------------------------------
   LISTA
   -------------------------------------------------------------------------- */

.admin-report-list {
    display: grid;
    gap: 16px;
}

.admin-report-card {
    padding: 24px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.admin-report-card:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, 0.28);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.075);
}

.admin-report-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.admin-report-song {
    min-width: 0;
}

.admin-report-id {
    display: inline-block;
    margin-bottom: 8px;
    color: #a36a00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.admin-report-card h2 {
    margin: 0;
    color: #101828;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.admin-report-card-header p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 15px;
}

.admin-report-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-report-status-pending {
    color: #9a6700;
    background: #fff4d6;
}

.admin-report-status-reviewing {
    color: #175cd3;
    background: #eff8ff;
}

.admin-report-status-resolved {
    color: #027a48;
    background: #ecfdf3;
}

.admin-report-status-ignored {
    color: #667085;
    background: #f2f4f7;
}

.admin-report-message {
    margin-top: 22px;
    padding: 17px 18px;
    border-radius: 15px;
    background: #f8f9fb;
    color: #344054;
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.admin-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 17px;
    color: #667085;
    font-size: 13px;
}

.admin-report-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.admin-report-actions .admin-banner-action-button {
    min-width: 130px;
    justify-content: center;
}


/* --------------------------------------------------------------------------
   ESTADO VAZIO
   -------------------------------------------------------------------------- */

.admin-report-empty {
    padding: 70px 24px;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.admin-report-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 20px;
    background: #fff8ed;
    font-size: 28px;
}

.admin-report-empty h2 {
    margin: 0;
    color: #101828;
    font-size: 21px;
}

.admin-report-empty p {
    margin: 8px 0 0;
    color: #667085;
}


/* --------------------------------------------------------------------------
   DETALHES DO AVISO
   -------------------------------------------------------------------------- */

.admin-report-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
    gap: 22px;
    align-items: start;
}

.admin-report-detail-card,
.admin-report-actions-card {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
}

.admin-report-detail-card {
    padding: 30px;
}

.admin-report-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eaecf0;
}

.admin-report-detail-heading > div > span,
.admin-report-detail-section > span {
    display: block;
    margin-bottom: 9px;
    color: #a36a00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.admin-report-detail-heading h2 {
    margin: 0;
    color: #101828;
    font-size: 29px;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.admin-report-detail-heading p {
    margin: 8px 0 0;
    color: #667085;
    font-size: 16px;
}

.admin-report-detail-section {
    padding: 26px 0;
}

.admin-report-full-message {
    padding: 20px;
    border: 1px solid #eaecf0;
    border-radius: 16px;
    background: #f8f9fb;
    color: #344054;
    font-size: 16px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.admin-report-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 23px;
    border-top: 1px solid #eaecf0;
}

.admin-report-detail-meta div {
    min-width: 0;
}

.admin-report-detail-meta span {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.admin-report-detail-meta strong {
    display: block;
    color: #101828;
    font-size: 14px;
    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   AÇÕES
   -------------------------------------------------------------------------- */

.admin-report-actions-card {
    padding: 25px;
}

.admin-report-actions-card h2 {
    margin: 0;
    color: #101828;
    font-size: 21px;
    letter-spacing: -0.025em;
}

.admin-report-actions-card > p {
    margin: 8px 0 22px;
    color: #667085;
    font-size: 14px;
    line-height: 1.55;
}

.admin-report-actions-card form:first-of-type {
    display: grid;
    gap: 9px;
}

.admin-report-actions-card label {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.admin-report-actions-card select {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #ffffff;
    color: #101828;
    font: inherit;
}

.admin-report-actions-card select:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.admin-report-actions-card form:first-of-type button {
    width: 100%;
    margin-top: 4px;
}

.admin-report-song-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 13px;
    padding: 10px 14px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    color: #344054;
    background: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.admin-report-song-link:hover {
    background: #f8f9fb;
    border-color: #d0d5dd;
}

.admin-report-delete-button {
    width: 100%;
    min-height: 44px;
    margin-top: 24px;
    border: 0;
    background: transparent;
    color: #b42318;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.admin-report-delete-button:hover {
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   DARK MODE
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .admin-report-stat-card,
html[data-theme="dark"] .admin-report-card,
html[data-theme="dark"] .admin-report-detail-card,
html[data-theme="dark"] .admin-report-actions-card {
    border-color: rgba(255, 255, 255, 0.10);
    background: #151b2b;
    color: #f8fafc;
}

html[data-theme="dark"] .admin-report-stat-card span,
html[data-theme="dark"] .admin-report-card-header p,
html[data-theme="dark"] .admin-report-meta,
html[data-theme="dark"] .admin-report-detail-heading p,
html[data-theme="dark"] .admin-report-actions-card > p,
html[data-theme="dark"] .admin-report-detail-meta span {
    color: #98a2b3;
}

html[data-theme="dark"] .admin-report-stat-card strong,
html[data-theme="dark"] .admin-report-card h2,
html[data-theme="dark"] .admin-report-detail-heading h2,
html[data-theme="dark"] .admin-report-detail-meta strong,
html[data-theme="dark"] .admin-report-actions-card h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .admin-report-message,
html[data-theme="dark"] .admin-report-full-message {
    border-color: rgba(255, 255, 255, 0.08);
    background: #101624;
    color: #d0d5dd;
}

html[data-theme="dark"] .admin-report-detail-heading,
html[data-theme="dark"] .admin-report-detail-meta {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-report-actions-card select {
    border-color: rgba(255, 255, 255, 0.14);
    background: #101624;
    color: #f8fafc;
}

html[data-theme="dark"] .admin-report-song-link {
    border-color: rgba(255, 255, 255, 0.10);
    background: transparent;
    color: #e4e7ec;
}

html[data-theme="dark"] .admin-report-song-link:hover {
    background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .admin-report-empty {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(21, 27, 43, 0.7);
}

html[data-theme="dark"] .admin-report-empty h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .admin-report-empty p {
    color: #98a2b3;
}


/* --------------------------------------------------------------------------
   RESPONSIVO
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

    .admin-report-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-report-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-report-actions-card {
        order: -1;
    }

}


@media (max-width: 700px) {

    .admin-reports-page {
        padding-bottom: 55px;
    }

    .admin-report-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 22px;
    }

    .admin-report-stat-card {
        min-height: 92px;
        padding: 16px;
        border-radius: 17px;
    }

    .admin-report-stat-card strong {
        font-size: 27px;
    }

    .admin-report-card {
        padding: 20px;
        border-radius: 20px;
    }

    .admin-report-card-header {
        display: block;
    }

    .admin-report-status {
        margin-top: 14px;
    }

    .admin-report-card h2 {
        font-size: 21px;
    }

    .admin-report-message {
        margin-top: 18px;
        padding: 15px;
        font-size: 14px;
    }

    .admin-report-meta {
        display: grid;
        gap: 7px;
    }

    .admin-report-actions {
        display: block;
    }

    .admin-report-actions .admin-banner-action-button {
        width: 100%;
    }

    .admin-report-detail-card,
    .admin-report-actions-card {
        padding: 21px;
        border-radius: 20px;
    }

    .admin-report-detail-heading {
        display: block;
    }

    .admin-report-detail-heading h2 {
        font-size: 25px;
    }

    .admin-report-detail-section {
        padding: 22px 0;
    }

    .admin-report-detail-meta {
        grid-template-columns: 1fr;
        gap: 15px;
    }

}


@media (max-width: 420px) {

    .admin-report-stats {
        grid-template-columns: 1fr 1fr;
    }

    .admin-report-stat-card span {
        font-size: 11px;
    }

    .admin-report-stat-card strong {
        font-size: 24px;
    }

}




/* ==========================================================================
   AVISOS DE LETRAS — ESTRUTURA EXCLUSIVA DA PÁGINA
   ========================================================================== */

.admin-reports-body {
    background:
        linear-gradient(
            180deg,
            var(--cg-navy) 0,
            var(--cg-navy) 310px,
            var(--cg-background) 310px,
            var(--cg-background) 100%
        );
}

.admin-reports-body .admin-dashboard-main {
    margin-top: 34px;
}

.admin-reports-body .admin-dashboard-welcome {
    margin-bottom: 26px;
}

.admin-reports-body .admin-report-stats {
    margin-top: 0;
}


/* ==========================================================================
   CANARINHO GOSPEL
   AVISOS DE LETRAS — REFINAMENTO PREMIUM
   ========================================================================== */


/* --------------------------------------------------------------------------
   HERO / ESPAÇAMENTO
   -------------------------------------------------------------------------- */

.admin-reports-page {
    position: relative;
    overflow: visible;
    padding-bottom: 80px;
}

.admin-reports-page .admin-dashboard-welcome {
    position: relative;
    z-index: 2;
}


/* --------------------------------------------------------------------------
   ESTATÍSTICAS — CORRIGE SOBREPOSIÇÃO DO HERO
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-stats {
    position: relative;
    z-index: 4;
    margin-top: 34px;
    margin-bottom: 30px;
}


/* --------------------------------------------------------------------------
   CARDS DE ESTATÍSTICAS
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-stat-card {
    position: relative;
    min-height: 118px;
    padding: 21px 22px;
    border: 1px solid rgba(15, 23, 42, 0.075);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.045),
        0 1px 2px rgba(15, 23, 42, 0.025);
    overflow: hidden;
}

.admin-reports-page .admin-report-stat-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #f59e0b;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.admin-reports-page .admin-report-stat-card:hover::after,
.admin-reports-page .admin-report-stat-card-active::after {
    opacity: 1;
}

.admin-reports-page .admin-report-stat-card span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.admin-reports-page .admin-report-stat-card strong {
    margin-top: 13px;
    font-size: 34px;
    font-weight: 750;
    letter-spacing: -0.045em;
}


/* --------------------------------------------------------------------------
   LISTA DE AVISOS
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-list {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 15px;
}


/* --------------------------------------------------------------------------
   CARD DO AVISO
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-card {
    position: relative;
    padding: 23px 24px;
    border: 1px solid rgba(15, 23, 42, 0.075);
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 7px 24px rgba(15, 23, 42, 0.04),
        0 1px 2px rgba(15, 23, 42, 0.025);
    overflow: hidden;
}

.admin-reports-page .admin-report-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: #f59e0b;
    opacity: 0.9;
}


/* --------------------------------------------------------------------------
   CABEÇALHO DO AVISO
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-card-header {
    align-items: flex-start;
    gap: 18px;
}

.admin-reports-page .admin-report-id {
    margin-bottom: 7px;
    color: #b77900;
    font-size: 10px;
    letter-spacing: 0.11em;
}

.admin-reports-page .admin-report-card h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.admin-reports-page .admin-report-card-header p {
    margin-top: 5px;
    font-size: 14px;
}


/* --------------------------------------------------------------------------
   STATUS
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-status {
    min-height: 31px;
    padding: 6px 11px;
    border: 1px solid transparent;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.admin-reports-page .admin-report-status-pending {
    color: #9a6700;
    background: #fff7df;
    border-color: #f8e2a5;
}

.admin-reports-page .admin-report-status-reviewing {
    color: #175cd3;
    background: #eff8ff;
    border-color: #b2ddff;
}

.admin-reports-page .admin-report-status-resolved {
    color: #027a48;
    background: #ecfdf3;
    border-color: #abefc6;
}

.admin-reports-page .admin-report-status-ignored {
    color: #667085;
    background: #f2f4f7;
    border-color: #e4e7ec;
}


/* --------------------------------------------------------------------------
   RELATO
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-message {
    position: relative;
    margin-top: 18px;
    padding: 15px 17px 15px 18px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #f8fafc;
    color: #475467;
    font-size: 14px;
    line-height: 1.55;
}

.admin-reports-page .admin-report-message::before {
    content: "RELATO";
    display: block;
    margin-bottom: 5px;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
}


/* --------------------------------------------------------------------------
   METADADOS
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-meta {
    align-items: center;
    gap: 8px 20px;
    margin-top: 14px;
    font-size: 12px;
}

.admin-reports-page .admin-report-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}


/* --------------------------------------------------------------------------
   BOTÃO
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-actions {
    margin-top: 17px;
}

.admin-reports-page .admin-report-actions .admin-banner-action-button {
    min-height: 43px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
}


/* --------------------------------------------------------------------------
   DETALHE
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-detail-grid {
    position: relative;
    z-index: 3;
    margin-top: 34px;
}

.admin-reports-page .admin-report-detail-card,
.admin-reports-page .admin-report-actions-card {
    border-radius: 22px;
    border-color: rgba(15, 23, 42, 0.075);
    box-shadow:
        0 8px 26px rgba(15, 23, 42, 0.045),
        0 1px 2px rgba(15, 23, 42, 0.025);
}

.admin-reports-page .admin-report-detail-card {
    padding: 28px;
}

.admin-reports-page .admin-report-detail-heading {
    padding-bottom: 23px;
}

.admin-reports-page .admin-report-detail-heading h2 {
    font-size: 28px;
}

.admin-reports-page .admin-report-detail-section {
    padding: 23px 0;
}

.admin-reports-page .admin-report-full-message {
    border: 1px solid #eaecf0;
    border-radius: 15px;
    background: #f8fafc;
}


/* --------------------------------------------------------------------------
   GERENCIAMENTO
   -------------------------------------------------------------------------- */

.admin-reports-page .admin-report-actions-card {
    padding: 24px;
}

.admin-reports-page .admin-report-actions-card h2 {
    font-size: 20px;
}

.admin-reports-page .admin-report-actions-card select {
    min-height: 47px;
    border-radius: 11px;
}

.admin-reports-page .admin-report-song-link {
    min-height: 44px;
    border-radius: 11px;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

    .admin-reports-page .admin-report-stats {
        margin-top: 28px;
        margin-bottom: 22px;
    }

    .admin-reports-page .admin-report-stat-card {
        min-height: 88px;
        padding: 15px 16px;
        border-radius: 17px;
    }

    .admin-reports-page .admin-report-stat-card strong {
        margin-top: 9px;
        font-size: 27px;
    }

    .admin-reports-page .admin-report-card {
        padding: 19px 19px 18px 20px;
        border-radius: 19px;
    }

    .admin-reports-page .admin-report-card h2 {
        font-size: 20px;
    }

    .admin-reports-page .admin-report-status {
        margin-top: 12px;
    }

    .admin-reports-page .admin-report-message {
        margin-top: 16px;
        padding: 14px 15px;
        font-size: 13px;
    }

    .admin-reports-page .admin-report-actions {
        margin-top: 15px;
    }

    .admin-reports-page .admin-report-actions .admin-banner-action-button {
        min-height: 45px;
    }

    .admin-reports-page .admin-report-detail-grid {
        margin-top: 28px;
    }

    .admin-reports-page .admin-report-detail-card,
    .admin-reports-page .admin-report-actions-card {
        border-radius: 19px;
    }

}


/* --------------------------------------------------------------------------
   DARK MODE
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .admin-reports-page .admin-report-stat-card,
html[data-theme="dark"] .admin-reports-page .admin-report-card,
html[data-theme="dark"] .admin-reports-page .admin-report-detail-card,
html[data-theme="dark"] .admin-reports-page .admin-report-actions-card {
    border-color: rgba(255, 255, 255, 0.09);
    background: #151b2b;
}

html[data-theme="dark"] .admin-reports-page .admin-report-message,
html[data-theme="dark"] .admin-reports-page .admin-report-full-message {
    border-color: rgba(255, 255, 255, 0.08);
    background: #101624;
}


/* =========================================================
   CANARINHO GOSPEL — PÁGINA DE IMPRESSÃO
   Sistema novo de prévia A4
   ========================================================= */

.song-print-page {
    padding: 42px 0 60px;
}

.song-back-link {
    display: inline-block;
    margin-bottom: 24px;

    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: color .2s ease;
}

.song-back-link:hover {
    color: var(--cg-navy);
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.print-workspace {
    display: grid;
    grid-template-columns: minmax(794px, 1fr) 360px;
    align-items: start;
    gap: 32px;
    width: 100%;
}

.print-preview-area {
    min-width: 0;
}

.print-preview-label {
    margin-bottom: 12px;

    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}


/* =========================================================
   STAGE DA PRÉVIA
   ========================================================= */

.print-preview-stage {
    position: relative;

    width: 100%;
    min-height: 1123px;

    overflow: visible;
}


/* =========================================================
   FOLHA A4
   ========================================================= */

.print-sheet {
    --print-font-size: 18px;

    position: relative;

    width: 794px;
    height: 1123px;

    margin: 0 auto;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid rgba(15, 23, 42, .10);

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .12);

    overflow: hidden;

    transform-origin: top left;
}


/* =========================================================
   CONTEÚDO INTERNO
   ========================================================= */

.print-sheet-content {
    position: relative;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding: 42px;
}


/* =========================================================
   ORIENTAÇÃO
   ========================================================= */

/*
 * A folha-base continua sendo A4.
 *
 * Na paisagem, apenas o conteúdo interno assume
 * as dimensões horizontais e é rotacionado.
 */

.print-sheet[data-orientation="portrait"]
.print-sheet-content {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 42px;

    box-sizing: border-box;

    transform: none;
}

.print-sheet[data-orientation="landscape"]
.print-sheet-content {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 141.428571%;
    height: 70.707071%;

    padding: 42px;

    box-sizing: border-box;

    transform:
        translate(-50%, -50%)
        rotate(90deg);

    transform-origin: center center;
}


/* =========================================================
   CABEÇALHO DA FOLHA
   ========================================================= */

.print-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d1d5db;
}

.print-sheet-title {
    min-width: 0;
}

.print-sheet-title h1 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 22px;
    line-height: 1.2;
}

.print-sheet-artist {
    color: #4b5563;
    font-size: 13px;
    font-weight: 400;
}

.print-sheet-brand {
    flex-shrink: 0;
    padding-top: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.print-sheet-brand span {
    color: var(--cg-gold);
}


/* =========================================================
   LETRA
   ========================================================= */

.print-sheet-lyrics {
    margin-top: 25px;

    color: #1f2937;

    font-size: var(--print-font-size);
    line-height: 1.65;

    white-space: pre-line;

    column-fill: balance;
}

.print-sheet[data-columns="1"]
.print-sheet-lyrics {
    column-count: 1;
}

.print-sheet[data-columns="2"]
.print-sheet-lyrics {
    column-count: 2;
    column-gap: 36px;
}

.print-sheet[data-columns="3"]
.print-sheet-lyrics {
    column-count: 3;
    column-gap: 28px;
}

.print-sheet[data-columns="4"]
.print-sheet-lyrics {
    column-count: 4;
    column-gap: 20px;
}


/* =========================================================
   CIFRA
   ========================================================= */

.print-sheet-chords-info {
    display: flex;
    align-items: center;
    gap: 28px;

    margin-top: 20px;
    margin-bottom: 24px;
}

.print-sheet-chords-key,
.print-sheet-chords-capo {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.print-sheet-chords-key span,
.print-sheet-chords-capo span {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.print-sheet-chords-key strong,
.print-sheet-chords-capo strong {
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
}

.print-sheet-chords {
    margin: 8px 0 0;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #1f2937;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: var(--print-font-size);
    line-height: 1.8;

    white-space: pre;

    overflow: visible;

    tab-size: 4;
}

/* =========================================================
   RODAPÉ
   ========================================================= */




/* =========================================================
   PAINEL DE CONFIGURAÇÕES
   ========================================================= */

.print-settings {
    position: sticky;
    top: 24px;

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

    padding: 24px;

    background: #ffffff;

    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .07);
}

.print-settings-header {
    margin-bottom: 24px;
}

.print-toolbar-kicker {
    display: block;

    margin-bottom: 5px;

    color: var(--cg-gold);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
}

.print-settings-header h2 {
    margin: 0 0 6px;

    color: var(--cg-navy);

    font-size: 22px;
}

.print-settings-header p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.5;
}

.print-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.print-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.print-option-label {
    color: #475569;

    font-size: 12px;
    font-weight: 800;
}

.print-paper-value {
    display: flex;
    align-items: center;

    min-height: 42px;
    padding: 0 13px;

    box-sizing: border-box;

    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 9px;

    background: #f8fafc;
    color: #334155;

    font-size: 14px;
    font-weight: 700;
}

.print-option-buttons {
    display: flex;
    gap: 6px;
}

.print-choice {
    flex: 1;

    min-height: 42px;
    padding: 8px 10px;

    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 9px;

    background: #ffffff;
    color: #475569;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.print-choice:hover {
    border-color: rgba(245, 158, 11, .40);

    transform: translateY(-1px);
}

.print-choice.is-active {
    border-color: var(--cg-gold);

    background: var(--cg-gold);
    color: #111827;
}


/* =========================================================
   CONTROLE DA FONTE
   ========================================================= */

.print-font-control {
    display: flex;
    align-items: center;

    height: 42px;

    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 9px;

    background: #ffffff;

    overflow: hidden;
}

.print-font-button {
    width: 44px;
    height: 100%;

    border: 0;

    background: transparent;
    color: #334155;

    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    transition: background .2s ease;
}

.print-font-button:hover {
    background: #f1f5f9;
}

.print-font-size {
    flex: 1;

    text-align: center;

    color: #334155;

    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   BOTÕES
   ========================================================= */

.print-main-button {
    width: 100%;

    min-height: 46px;

    margin-top: 24px;
    padding: 11px 16px;

    border: 0;
    border-radius: 10px;

    background: var(--cg-navy);
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(15, 23, 42, .15);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.print-main-button:hover {
    background: #1e293b;

    transform: translateY(-1px);

    box-shadow:
        0 10px 22px rgba(15, 23, 42, .20);
}

.print-reset-button {
    width: 100%;

    margin-top: 9px;
    padding: 9px;

    border: 0;

    background: transparent;
    color: #64748b;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.print-reset-button:hover {
    color: var(--cg-navy);
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .print-sheet {
    background: #ffffff !important;
    color: #1f2937 !important;

    border-color: rgba(15, 23, 42, .10) !important;

    box-shadow: none !important;
}

html[data-theme="dark"] .print-sheet-title h1 {
    color: #0f172a !important;
}

html[data-theme="dark"] .print-sheet-artist {
    color: #64748b !important;
}

html[data-theme="dark"] .print-sheet-brand {
    color: #0f172a !important;
}

html[data-theme="dark"] .print-sheet-brand span {
    color: #f59e0b !important;
}

html[data-theme="dark"] .print-sheet-lyrics {
    color: #1f2937 !important;
}

html[data-theme="dark"] .print-sheet-footer {
    color: #64748b !important;

    border-top-color: rgba(15, 23, 42, .10) !important;
}

html[data-theme="dark"] .print-settings {
    background: #172238 !important;
    color: #e5e7eb !important;

    border-color: rgba(148, 163, 184, .22) !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .print-settings-header h2 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .print-settings-header p {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .print-toolbar-kicker {
    color: #f59e0b !important;
}

html[data-theme="dark"] .print-option-label {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .print-paper-value {
    background: #0f1a2e !important;
    color: #e2e8f0 !important;

    border-color: rgba(148, 163, 184, .20) !important;
}

html[data-theme="dark"] .print-choice {
    background: #0f1a2e !important;
    color: #cbd5e1 !important;

    border-color: rgba(148, 163, 184, .20) !important;
}

html[data-theme="dark"] .print-choice:hover {
    background: #16233b !important;

    border-color: rgba(245, 158, 11, .45) !important;

    color: #ffffff !important;
}

html[data-theme="dark"] .print-choice.is-active {
    background: #f59e0b !important;
    color: #111827 !important;

    border-color: #f59e0b !important;
}

html[data-theme="dark"] .print-font-control {
    background: #0f1a2e !important;

    border-color: rgba(148, 163, 184, .20) !important;
}

html[data-theme="dark"] .print-font-button {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .print-font-button:hover {
    background: #16233b !important;
}

html[data-theme="dark"] .print-font-size {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .print-main-button {
    background: #f59e0b !important;
    color: #111827 !important;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .25) !important;
}

html[data-theme="dark"] .print-main-button:hover {
    background: #fbbf24 !important;
}

html[data-theme="dark"] .print-reset-button {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .print-reset-button:hover {
    color: #f59e0b !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .song-print-page {
        padding: 28px 0 45px;
    }

    .print-workspace {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        width: 100%;
        min-width: 0;
    }

    .print-preview-area {
        order: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .print-settings {
        position: static;
        order: 2;

        padding: 20px;
    }

    /*
     * O stage fornece o espaço visual ocupado pela folha
     * depois que o JavaScript aplicar a escala.
     */
    .print-preview-stage {
        width: 100%;
        min-height: 0;
        height: auto;

        padding: 0;
        margin: 0;

        overflow: visible;
        box-sizing: border-box;
    }

    /*
     * A folha NÃO recebe width: 100%.
     *
     * Ela continua com 794 × 1123 e o JavaScript
     * faz a redução proporcional.
     */
    .print-sheet {
        width: 794px;
        height: 1123px;

        margin-left: 0;
    }

    .print-sheet-content {
        padding: 42px;
    }

    .print-sheet-title h1 {
        font-size: 26px;
    }

    .print-sheet-artist {
        font-size: 14px;
    }

    .print-sheet-brand {
        font-size: 16px;
    }

    .print-sheet-lyrics {
        margin-top: 25px;
    }

}


/* =========================================================
   IMPRESSÃO FÍSICA
   ========================================================= */

@media print {

    /*
     * A página física é A4 sem margem.
     */
    @page {
        size: A4 portrait;
        margin: 0;
    }

    /*
     * Zeramos somente a estrutura externa da página.
     *
     * Isso impede que o layout normal do site,
     * main, padding e wrappers criem deslocamento
     * ou uma segunda página.
     */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        background: #ffffff !important;
    }

    main {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .song-print-page {
        margin: 0 !important;
        padding: 0 !important;
        width: 794px !important;
        min-width: 0 !important;
    }

    .print-workspace {
        display: block !important;
        width: 794px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-preview-area {
        width: 794px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-preview-stage {
        width: 794px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 1123px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * A folha mantém sua geometria normal.
     *
     * Apenas a retiramos do fluxo e a colocamos
     * no ponto (0,0) da página física.
     */
    .print-sheet {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;

        margin: 0 !important;

        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #ffffff !important;

        /*
         * AJUSTE FINAL — área de impressão.
         *
         * Mantemos topo e lado direito fixos e expandimos
         * ligeiramente para esquerda e para baixo.
         */
        transform: scale(1.025) !important;
        transform-origin: top right !important;
        zoom: 1 !important;
    }

    /*
     * O conteúdo interno permanece com a mesma
     * geometria usada no Preview A4.
     */
    .print-sheet-content {
        box-sizing: border-box !important;
    }

    /*
     * Interface não participa da impressão.
     */
    body * {
        visibility: hidden !important;
    }

    .print-sheet,
    .print-sheet-content,
    .print-sheet-content * {
        visibility: visible !important;
    }

    .print-settings,
    .print-preview-label,
    .song-back-link,
    .song-print-actions,
    .site-header,
    .site-footer {
        display: none !important;
    }

    /* Colunas explícitas: não reaplicar multicolunas CSS no modo paisagem. */
    .print-sheet[data-orientation="landscape"] .print-sheet-lyrics.print-lyrics-explicit-columns,
    .print-sheet[data-orientation="landscape"] .print-sheet-lyrics.print-lyrics-explicit-columns > .print-lyrics-column {
        column-count: initial !important;
        columns: initial !important;
    }

    .print-sheet-lyrics {
        color: #1f2937 !important;
    }

    .print-sheet-header {
        border-bottom: 1px solid #d1d5db !important;
    }

    .print-sheet-footer {
        color: #666666 !important;
    }

}





.print-settings-header > p {
    text-align: center;
}


/* =========================================================
   CANARINHO — DESTAQUE DA DESCRIÇÃO DE IMPRESSÃO
   ========================================================= */

.print-settings-header > p {
    margin: 0;
    text-align: center;

    color: #475569;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;

    letter-spacing: 0;
}

/* MODO ESCURO */
.dark-mode .print-settings-header > p,
body.dark-mode .print-settings-header > p,
[data-theme="dark"] .print-settings-header > p {
    color: #cbd5e1;
    font-weight: 500;
}


/* =========================================================
   PÁGINA DA MÚSICA — NOVO LAYOUT DESKTOP
   SOMENTE DESKTOP — MOBILE PRESERVADO
   ========================================================= */

@media (min-width: 701px) {

    .song-reading-page .container {
        max-width: 1240px;
    }

    /* Cabeçalho ocupa toda a largura da área */
    .song-reading-header {
        max-width: none;
        width: 100%;

        margin-left: 0;
        margin-right: 0;
    }

    /* Área da letra mais larga e alinhada à esquerda */
    .song-reading-content {
        max-width: 760px;
        margin-left: 0;
        margin-right: auto;
    }

    /* Cards mais compactos no desktop */
    .song-reading-actions {
        max-width: 760px;

        margin-left: 0;
        margin-right: auto;

        gap: 10px;
    }

    .song-reading-actions .song-action-card {
        min-height: 52px !important;

        padding: 8px 12px !important;
    }

    .song-reading-actions .song-action-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .song-reading-actions .song-action-label {
        font-size: 12px !important;
    }

}

/* =========================================================
   PÁGINA DA MÚSICA — DESKTOP EM DUAS COLUNAS
   SOMENTE DESKTOP — MOBILE INTACTO
   ========================================================= */

@media (min-width: 701px) {

    .song-reading-page .container {
        max-width: 1280px;

        display: grid;
        grid-template-columns: minmax(0, 780px) minmax(320px, 380px);
        column-gap: 40px;
        align-items: start;
    }

    /*
     * Cabeçalho ocupa as duas colunas.
     * O título permanece à esquerda e a miniatura
     * permanece à direita.
     */
    .song-reading-header {
        grid-column: 1 / -1;

        max-width: none;
        width: 100%;

        margin: 0 0 28px;
    }

    /*
     * Ações ficam somente na coluna esquerda.
     */
    .song-reading-actions {
        grid-column: 1;

        width: 100%;
        max-width: none;

        margin: 0;

        justify-content: start;
    }

    /*
     * Player fica na coluna direita.
     * Quando estiver oculto, não ocupa espaço.
     * Quando abrir, aparece lateralmente à letra.
     */
    .song-youtube-player {
        grid-column: 2;

        width: 100%;
        max-width: none;

        margin: 0;

        border-radius: 12px;
    }

    /*
     * Letra permanece exclusivamente na coluna esquerda.
     */
    .song-reading-content {
        grid-column: 1;

        width: 100%;
        max-width: 780px;

        margin: 0;
    }

    /*
     * Cards compactos no desktop.
     */
    .song-reading-actions {
        grid-template-columns: repeat(3, 170px);
        gap: 10px;
    }

}


/* =========================================================
   CANARINHO GOSPEL — PÁGINA DA MÚSICA
   LAYOUT DESKTOP EM DUAS COLUNAS
   MOBILE PRESERVADO
   ========================================================= */

@media (min-width: 701px) {

    /* Área geral da página */
    .song-reading-page .container {
        display: block;
        max-width: 1280px;
    }

    /* -----------------------------------------------------
       DUAS COLUNAS INDEPENDENTES
       ----------------------------------------------------- */

    .song-reading-layout {
        display: grid;
        grid-template-columns: minmax(0, 780px) minmax(320px, 380px);
        column-gap: 40px;
        align-items: start;
    }

    .song-reading-left {
        grid-column: 1;
        min-width: 0;
    }

    .song-reading-right {
        grid-column: 2;
        min-width: 0;
    }

    /* -----------------------------------------------------
       AÇÕES
       ----------------------------------------------------- */

    .song-reading-actions {
        display: grid;

        grid-template-columns: repeat(3, 170px);

        gap: 10px;

        width: 100%;
        max-width: none;

        margin: 0 0 28px;

        justify-content: start;
    }

    .song-reading-actions .song-action-card {
        width: 170px !important;
        min-height: 52px !important;

        padding: 8px 12px !important;

        box-sizing: border-box;
    }

    /* -----------------------------------------------------
       LETRA
       ----------------------------------------------------- */

    .song-reading-content {
        width: 100%;
        max-width: 780px;

        margin: 0;
    }

    /* -----------------------------------------------------
       YOUTUBE
       ----------------------------------------------------- */

    .song-youtube-player {
        display: none;

        width: 100%;
        max-width: none;

        margin: 0;

        aspect-ratio: 16 / 9;

        border-radius: 12px;

        overflow: hidden;
    }

    .song-youtube-player.is-visible {
        display: block;
    }

    .song-youtube-player iframe {
        display: block;

        width: 100%;
        height: 100%;

        border: 0;
    }

}


/* =========================================================
   MOBILE
   Mantém a apresentação atual.
   ========================================================= */

@media (max-width: 700px) {

    .song-reading-layout {
        display: contents;
    }

    .song-reading-left,
    .song-reading-right {
        display: contents;
    }

}


/* =========================================================
   CANARINHO GOSPEL — ESCALA DESKTOP
   AUMENTO VISUAL DO CONTEÚDO
   MOBILE INTACTO
   ========================================================= */

@media (min-width: 701px) {

    /* -----------------------------------------------------
       ÁREA GERAL
       ----------------------------------------------------- */

    .song-reading-page .container {
        max-width: 1400px;
    }

    .song-reading-layout {
        grid-template-columns: minmax(0, 820px) minmax(360px, 440px);
        column-gap: 50px;
    }

    /* -----------------------------------------------------
       TÍTULO
       ----------------------------------------------------- */

    .song-reading-heading h1 {
        font-size: 34px;
        line-height: 1.12;
    }

    .song-reading-artist,
    .song-reading-artist a {
        font-size: 19px;
    }

    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    .song-reading-actions {
        grid-template-columns: repeat(3, 185px);
        gap: 12px;

        margin-bottom: 30px;
    }

    .song-reading-actions .song-action-card {
        width: 185px !important;
        min-height: 54px !important;

        padding: 9px 14px !important;
    }

    .song-reading-actions .song-action-icon svg {
        width: 19px !important;
        height: 19px !important;
    }

    .song-reading-actions .song-action-label {
        font-size: 13px !important;
    }

    /* -----------------------------------------------------
       LETRA
       ----------------------------------------------------- */

    .song-reading-content {
        max-width: 820px;
    }

    .song-reading-lyrics {
        font-size: 20px;
        line-height: 1.8;
    }

    /* -----------------------------------------------------
       YOUTUBE
       ----------------------------------------------------- */

    .song-reading-right {
        width: 100%;
    }

    .song-youtube-player {
        width: 100%;
        max-width: none;
    }

}


/* =========================================================
   CANARINHO GOSPEL — HOME DESKTOP
   TOP MÚSICAS + TOP ARTISTAS LADO A LADO
   MOBILE PRESERVADO
   ========================================================= */

@media (min-width: 701px) {

    /* -----------------------------------------------------
       GRID PRINCIPAL DA HOME
       ----------------------------------------------------- */

    .home-page {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        column-gap: 42px;

        align-items: start;
    }

    /* Banner continua ocupando toda a largura */

    .home-page .home-banner-section {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* Artigos ocupam toda a largura da Home */
    .home-page .home-articles {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* -----------------------------------------------------
       LETRAS EM ALTA
       ----------------------------------------------------- */

    .home-page .home-top-songs {
        grid-column: 1;

        width: 100%;

        margin-top: 32px;
    }

    /* -----------------------------------------------------
       ARTISTAS EM ALTA
       ----------------------------------------------------- */

    .home-page .home-top-artists {
        grid-column: 2;

        width: 100%;

        margin-top: 32px;
    }

    /* -----------------------------------------------------
       TÍTULOS
       ----------------------------------------------------- */

    .home-page .home-top-songs-title,
    .home-page .home-top-artists-title {
        margin-left: 42px;
    }

    /* -----------------------------------------------------
       BOTÕES "VER MAIS"
       ----------------------------------------------------- */

    .home-page .home-view-more-button {
        width: fit-content;

        min-height: 42px;

        margin-top: 18px;
        margin-left: auto;
        margin-right: auto;

        padding: 0 22px;

        border-radius: 11px;

        font-size: 14px;
    }

}


/* =========================================================
   HOME — BANNER DESKTOP
   Retorna à largura anterior
   ========================================================= */

@media (min-width: 701px) {

    .home-page .home-banner-section {
        width: 100%;
        max-width: 1310px;

        margin-left: auto;
        margin-right: auto;
    }

}


/* HOME — ajuste final da largura do banner desktop */
@media (min-width: 701px) {

    .home-page .home-banner-section {
        max-width: 1180px;
    }

}


/* HOME — redução adicional do banner desktop */
@media (min-width: 701px) {

    .home-page .home-banner-section {
        max-width: 1100px;
    }

}


/* =========================================================
   HOME — CENTRALIZAÇÃO DAS SEÇÕES EM ALTA
   SOMENTE DESKTOP
   ========================================================= */

@media (min-width: 701px) {

    .home-page {
        grid-template-columns:
            minmax(0, 560px)
            minmax(0, 560px);

        column-gap: 48px;

        justify-content: center;
    }

    .home-page .home-top-songs,
    .home-page .home-top-artists {
        width: 100%;
    }

    .home-page .home-top-songs-title,
    .home-page .home-top-artists-title {
        margin-left: 0;
    }

}


/* HOME — alinhamento das colunas com o banner */
@media (min-width: 701px) {

    .home-page {
        grid-template-columns:
            minmax(0, 525px)
            minmax(0, 525px);

        column-gap: 48px;

        justify-content: center;
    }

}



/* =========================================================
   HOME — APROXIMAÇÃO DAS COLUNAS DESKTOP
   Somente desktop — mobile preservado
   ========================================================= */

@media (min-width: 701px) {

    .home-page {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        column-gap: 28px;

        justify-content: center;
    }

    .home-page .home-top-songs,
    .home-page .home-top-artists {
        width: 100%;
    }

}



/* ==========================================================
   ARTISTA — TOP 10 EM DUAS COLUNAS
   SOMENTE DESKTOP — MOBILE PRESERVADO
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs {
        width: 100%;
    }

    .artist-top-songs .home-top-songs-header {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .artist-top-songs .home-top-songs-list {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, auto);
        grid-auto-flow: column;

        column-gap: 48px;
        row-gap: 0;
    }

}


/* ==========================================================
   ARTISTA — REFINAMENTO DO TOP 10
   DESKTOP — COLUNAS MAIS À ESQUERDA E MAIS PRÓXIMAS
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-top-songs-list {
        max-width: 1000px;

        margin-left: 0;
        margin-right: auto;

        column-gap: 28px;
    }

}


/* ==========================================================
   ARTISTA — AJUSTE FINAL DO TOP 10
   DESKTOP — CONJUNTO CENTRALIZADO
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-top-songs-list {
        max-width: 1000px;

        margin-left: auto;
        margin-right: auto;

        column-gap: 28px;
    }

}


/* ==========================================================
   ARTISTA — ALINHAMENTO DO TOP 10 COM O PERFIL
   DESKTOP — SOMENTE ESTA SEÇÃO
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-top-songs-header,
    .artist-top-songs .home-top-songs-list {
        max-width: 1000px;

        margin-left: 0;
        margin-right: auto;
    }

}


/* ==========================================================
   ARTISTA — POSIÇÃO FINAL DO TOP 10
   DESKTOP — AJUSTE HORIZONTAL
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-top-songs-header,
    .artist-top-songs .home-top-songs-list {
        max-width: 1000px;

        margin-left: 150px;
        margin-right: auto;
    }

}


/* ==========================================================
   ARTISTA — APROXIMAR SEGUNDA COLUNA
   DESKTOP — PRIMEIRA COLUNA INALTERADA
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-top-songs-list > :nth-child(n+6) {
        transform: translateX(-90px);
    }

}


/* ==========================================================
   ARTISTA — LIMITE SEGURO DOS TÍTULOS DAS MÚSICAS
   DESKTOP — NÃO ALTERA POSICIONAMENTO DAS COLUNAS
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .search-result-title {
        display: block;
        max-width: 430px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

}


/* ==========================================================
   ARTISTA — LIMITE MAIS COMPACTO DOS TÍTULOS
   DESKTOP — POSIÇÃO DAS COLUNAS PRESERVADA
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .search-result-title {
        max-width: 330px;
    }

}


/* ==========================================================
   ARTISTA — ZONA DE SEGURANÇA ENTRE AS COLUNAS
   DESKTOP — POSIÇÕES DAS COLUNAS PRESERVADAS
   ========================================================== */

@media (min-width: 701px) {

    /* A primeira coluna mantém exatamente sua posição.
       Apenas reservamos espaço à direita para impedir
       que títulos longos avancem em direção à segunda coluna. */
    .artist-top-songs .home-top-songs-list > :nth-child(-n+5) {
        padding-right: 100px;
        box-sizing: border-box;
    }

    /* Permite que o conteúdo realmente respeite o espaço disponível */
    .artist-top-songs .home-top-songs-list > :nth-child(-n+5) .search-result-content {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    /* O título ocupa somente a área segura da primeira coluna */
    .artist-top-songs .home-top-songs-list > :nth-child(-n+5) .search-result-title {
        display: block;
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

}


/* ==========================================================
   ARTISTA — BOTÃO "VER TODAS AS MÚSICAS"
   DESKTOP — TAMANHO COMPACTO
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-view-more-button {
        display: flex;
        width: fit-content;
        min-width: 190px;
        max-width: 220px;

        margin-left: 150px;
        margin-right: auto;
        margin-top: 28px;

        padding: 10px 22px;
    }

}


/* ==========================================================
   ARTISTA — BOTÃO "VER TODAS AS MÚSICAS"
   DESKTOP — COMPACTAÇÃO FINAL
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-view-more-button {
        width: auto;
        min-width: 0;
        max-width: none;

        display: inline-flex;

        margin-left: 150px;
        margin-right: 0;
        margin-top: 24px;

        padding: 8px 16px;
    }

}


/* ==========================================================
   ARTISTA — BOTÃO "VER TODAS AS MÚSICAS"
   DESKTOP — FORÇAR TAMANHO REAL DO CONTEÚDO
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-view-more-button {
        display: inline-flex !important;

        width: max-content !important;
        min-width: 0 !important;
        max-width: max-content !important;

        margin-left: 150px !important;
        margin-right: 0 !important;

        padding: 8px 16px !important;

        flex: 0 0 auto !important;
    }

}


/* ==========================================================
   ARTISTA — BOTÃO COMPACTO REAL
   DESKTOP — IMPEDIR ESTICAMENTO PELO PAI
   ========================================================== */

@media (min-width: 701px) {

    .artist-top-songs .home-view-more-button {
        width: fit-content !important;
        min-width: 0 !important;
        max-width: none !important;

        display: inline-flex !important;

        align-self: flex-start !important;
        justify-self: start !important;

        flex: 0 0 auto !important;

        margin-left: 150px !important;
        margin-right: 0 !important;

        padding: 8px 16px !important;
    }

}


/* ==========================================================
   ARTISTA — BOTÃO "VER TODAS AS MÚSICAS"
   CORREÇÃO DEFINITIVA
   ========================================================== */

@media (min-width: 701px) {

    .artist-all-songs-trigger {
        width: auto !important;

        display: flex !important;
        justify-content: flex-start !important;

        margin-left: 150px !important;
        margin-right: 0 !important;
    }

    .artist-all-songs-trigger .artist-load-all-songs {
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;

        display: inline-flex !important;

        flex: 0 0 auto !important;

        padding: 8px 16px !important;
    }

}



/* Centraliza o botão "Ver todas as músicas" entre as duas colunas — desktop */
@media (min-width:701px) {
    .artist-all-songs-trigger {
        width:1000px !important;
        margin-left:150px !important;
        margin-right:0 !important;

        display:flex !important;
        justify-content:center !important;
    }

    .artist-all-songs-trigger .artist-load-all-songs {
        width:auto !important;
        min-width:0 !important;
        max-width:max-content !important;
        display:inline-flex !important;
        flex:0 0 auto !important;
    }
}


/* Ajuste final de posicionamento — artista: segunda coluna + botão */
@media (min-width:701px) {
    /* Move somente a segunda coluna para a esquerda */
    .artist-top-songs .home-top-songs-list > :nth-child(n+6) {
        transform: translateX(-170px);
    }

    /* Move somente o botão para a esquerda */
    .artist-all-songs-trigger {
        transform: translateX(-80px);
    }
}


/* Refinamento de posicionamento — artista */
@media (min-width:701px) {
    /* Segunda coluna: 70px para a direita */
    .artist-top-songs .home-top-songs-list > :nth-child(n+6) {
        transform: translateX(-100px);
    }

    /* Botão: 70px para a esquerda */
    .artist-all-songs-trigger {
        transform: translateX(-150px);
    }
}


/* ==========================================================
   CANARINHO — ARTISTA
   Ajuste final do botão "Ver todas as músicas"
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs-trigger {
        margin-left: 190px !important;
        margin-right: 0 !important;
        margin-bottom: 70px !important;
    }

    .artist-all-songs-trigger .artist-load-all-songs {
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
    }

}


/* ==========================================================
   CANARINHO — ARTISTA
   Botão "Ver todas as músicas" — contraste premium
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    /* MODO ESCURO */
    html[data-theme="dark"] .artist-all-songs-trigger .artist-load-all-songs {
        color: #f4f7fb !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border-color: #3b4658 !important;
        font-weight: 700 !important;

        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.025);
    }

    /* MODO CLARO */
    html[data-theme="light"] .artist-all-songs-trigger .artist-load-all-songs {
        color: #0b1730 !important;
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        font-weight: 700 !important;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.06);
    }

    /* HOVER — dourado da identidade */
    html[data-theme="dark"] .artist-all-songs-trigger .artist-load-all-songs:hover,
    html[data-theme="light"] .artist-all-songs-trigger .artist-load-all-songs:hover {
        color: var(--cg-accent) !important;
        border-color: var(--cg-accent) !important;
        background: rgba(212, 160, 23, 0.06) !important;
    }

}


/* ==========================================================
   CANARINHO — ARTISTA
   Botão "Ver todas as músicas"
   Cores compartilhadas entre desktop e mobile
========================================================== */

/* MODO ESCURO */
html[data-theme="dark"] .artist-all-songs-trigger .artist-load-all-songs {
    color: #f4f7fb !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: #3b4658 !important;
    font-weight: 700 !important;
}

/* MODO CLARO */
html[data-theme="light"] .artist-all-songs-trigger .artist-load-all-songs {
    color: #0b1730 !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    font-weight: 700 !important;
}

/* HOVER */
html[data-theme="dark"] .artist-all-songs-trigger .artist-load-all-songs:hover,
html[data-theme="light"] .artist-all-songs-trigger .artist-load-all-songs:hover {
    color: var(--cg-accent) !important;
    border-color: var(--cg-accent) !important;
    background: rgba(212, 160, 23, 0.06) !important;
}


/* ==========================================================
   DISTÂNCIA DO BOTÃO PARA O RODAPÉ
   Mesmo respiro visual nos dispositivos
========================================================== */

.artist-all-songs-trigger {
    margin-bottom: 24px !important;
}


/* Desktop mantém apenas seu posicionamento horizontal */
@media (min-width: 701px) {
    .artist-all-songs-trigger {
        margin-left: 190px !important;
        margin-right: 0 !important;
    }
}



/* ==========================================================
   CANARINHO — CATÁLOGO COMPLETO DO ARTISTA
   Desktop: título alinhado à posição do botão
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .home-top-songs-header {
        width: 1000px !important;
        max-width: 1000px !important;

        margin-left: 190px !important;
        margin-right: 0 !important;

        display: block !important;
        text-align: center !important;
    }

    .artist-all-songs .home-top-songs-title {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: center !important;
    }

}


/* ==========================================================
   AJUSTE FINAL — TÍTULO DO CATÁLOGO ALINHADO AO BOTÃO
   DESKTOP ONLY
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .home-top-songs-header {
        width: fit-content !important;
        max-width: none !important;

        margin-left: 150px !important;
        margin-right: 0 !important;

        display: block !important;
        text-align: center !important;

        transform: translateX(170px) !important;
    }

    .artist-all-songs .home-top-songs-title {
        width: fit-content !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: center !important;
        white-space: nowrap;
    }

}








/* ==========================================================
   CATÁLOGO DO ARTISTA — UMA LETRA POR VEZ
   Cada grupo ocupa toda a largura disponível
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-alphabet-list {
        width: 1000px !important;
        max-width: 1000px !important;

        margin-left: 80px !important;
        margin-right: 0 !important;

        display: block !important;
    }

    .artist-all-songs .artist-letter-group {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        display: block !important;
    }

    .artist-all-songs .artist-letter-songs {
        width: 100% !important;
        max-width: none !important;
    }

    .artist-all-songs .artist-song-link {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

}


/* ==========================================================
   CATÁLOGO DO ARTISTA
   Cada letra utiliza duas colunas próprias
   A → A | A
   B → B | B
   C → C | C
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-letter-songs {
        width: 100% !important;
        max-width: none !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        column-gap: 48px !important;
        align-items: start !important;
    }

    .artist-all-songs .artist-song-link {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

}


/* ==========================================================
   CATÁLOGO DO ARTISTA — PADRÃO FINAL DO TOP 10
   Duas colunas / 5 itens por coluna / títulos limitados
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-letter-songs {
        width: 100% !important;
        max-width: none !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-rows: repeat(5, auto) !important;

        grid-auto-flow: column !important;

        column-gap: 48px !important;
        row-gap: 0 !important;

        align-items: start !important;
    }


    .artist-all-songs .artist-song-link {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* Mesmo limite visual utilizado no Top 10 */
    .artist-all-songs .artist-song-link {
        display: block !important;

        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }


    .artist-all-songs .artist-song-link > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* Mantém o texto do título dentro da própria coluna */
    .artist-all-songs .artist-song-link {
        overflow: hidden !important;
    }

}


/* ==========================================================
   CATÁLOGO DO ARTISTA — LIMITE DE DUAS COLUNAS
   Nunca criar uma terceira coluna
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-letter-songs {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-rows: none !important;

        grid-auto-flow: row !important;

        column-gap: 48px !important;
        row-gap: 0 !important;
    }

}


/* ==========================================================
   CATÁLOGO DO ARTISTA — ALINHAMENTO DA 2ª COLUNA
   Igual à posição da 2ª coluna do Top 10
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-letter-songs > .artist-song-link:nth-child(even) {
        transform: translateX(-75px) !important;
    }

}






/* ==========================================================
   CATÁLOGO DO ARTISTA — DUAS COLUNAS NATURAIS
   Cada letra ocupa duas colunas.
   Eventual espaço vazio fica no final da 2ª coluna.
   Desktop somente.
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-letter-songs {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        column-count: 2 !important;
        column-gap: 48px !important;
        column-fill: balance !important;
    }

    .artist-all-songs .artist-song-link {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 10px 0 0 !important;

        box-sizing: border-box !important;

        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;

        overflow: hidden !important;

        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    /* Espaçamento padronizado entre as músicas */
    .artist-all-songs .artist-song-link + .artist-song-link {
        margin-top: 22px !important;
    }

}


/* ==========================================================
   CATÁLOGO A-Z — CORREÇÃO FINAL DO GRID
   Duas colunas por letra.
   Desktop somente.
========================================================== */

@media (min-width: 701px) {

    /* Cada letra ocupa toda a largura disponível */
    .artist-all-songs .artist-letter-group {
        display: block !important;
        width: 100% !important;

        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
    }

    /* A lista daquela letra vira uma grade 5 + 5 / 6 + 6 etc. */
    .artist-all-songs .artist-letter-songs {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        column-gap: 48px !important;

        width: 100% !important;
        max-width: none !important;

        column-count: initial !important;
        columns: initial !important;
    }

    /* Cada música ocupa exatamente uma célula */
    .artist-all-songs .artist-song-link {
        display: flex !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 10px 0 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        break-inside: avoid !important;
    }

    /* Espaçamento vertical uniforme */
    .artist-all-songs .artist-song-link + .artist-song-link {
        margin-top: 22px !important;
    }

    /* Impede qualquer deslocamento individual herdado */
    .artist-all-songs .artist-song-link {
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

}


/* ==========================================================
   CATÁLOGO A-Z — ALINHAMENTO VERTICAL DAS DUAS COLUNAS
   ========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-letter-songs {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-rows: repeat(6, auto) !important;

        grid-auto-flow: column !important;

        column-gap: 48px !important;
        row-gap: 22px !important;

        width: 100% !important;
    }

    .artist-all-songs .artist-song-link,
    .artist-all-songs .artist-song-link + .artist-song-link {
        margin-top: 0 !important;
    }

}


/* ==========================================================
   CATÁLOGO A-Z — LISTAGEM SIMPLES EM 2 COLUNAS
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-letter-songs {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !important;

        column-gap: 48px !important;
        row-gap: 22px !important;

        width: 100% !important;
        max-width: none !important;

        column-count: initial !important;
        columns: initial !important;
    }

    .artist-all-songs .artist-song-link {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 10px 0 0 !important;

        transform: none !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

}


/* ==========================================================
   CATÁLOGO A-Z — ZONA DE SEGURANÇA DA 1ª COLUNA
   Impede títulos longos de invadirem a 2ª coluna.
   Desktop somente.
========================================================== */

@media (min-width: 701px) {

    .artist-all-songs .artist-letter-songs > .artist-song-link:nth-child(odd) {
        padding-right: 100px !important;
        box-sizing: border-box !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

}


/* Espaçamento entre os botões da Home e o rodapé */
.home-page {
    padding-bottom: 32px !important;
}


/* Catálogo A-Z — alinhamento com o conteúdo do Top 10
   Mobile somente */
@media (max-width: 700px) {

    .artist-all-songs {
        margin-left: 65px !important;
    }

}

/* Ajuste fino do catálogo A-Z no mobile */
@media (max-width: 700px) {
    .artist-all-songs {
        margin-left: 10px !important;
    }
}

/* =========================================
   FOOTER INSTITUCIONAL — PÁGINAS LEGAIS
========================================= */

.site-footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.site-footer-brand strong {
    color: #e5b83f;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}

.site-footer-brand span {
    color: #94a3b8;
    font-size: 13px;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 22px;
}

.site-footer-links a {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition: color .2s ease;
}

.site-footer-links a:hover {
    color: #e5b83f;
}

.site-footer-copy {
    padding-top: 2px;
    color: #64748b;
    font-size: 12px;
}

/* =========================================
   ADMIN — MASTER THEME
   Padrão visual oficial de toda a área /admin
   ========================================= */

.admin-dashboard-page {
    min-height: 100vh;
    margin: 0;
    background: #0b1224;
    color: #f8fafc;
}

.admin-dashboard-page,
.admin-dashboard-page * {
    box-sizing: border-box;
}

.admin-dashboard-page .admin-dashboard-header {
    background: #0b1224;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-dashboard-page .admin-dashboard-header-content {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.admin-dashboard-page .admin-dashboard-logo {
    display: inline-flex;
    align-items: center;
    color: #f8fafc;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.admin-dashboard-page .admin-dashboard-logo strong {
    color: #f5a400;
    font-weight: 800;
}

.admin-dashboard-page .admin-dashboard-header-content > div > span {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 0.92rem;
    font-weight: 500;
}

.admin-dashboard-page .admin-logout-button {
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.045);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.admin-dashboard-page .admin-logout-button:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 164, 0, 0.42);
    background: rgba(245, 164, 0, 0.08);
}

.admin-dashboard-page .admin-dashboard-main {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
    padding: 54px 0 80px;
}

.admin-dashboard-page .admin-dashboard-welcome {
    margin: 0;
}

.admin-dashboard-page .admin-dashboard-eyebrow {
    margin: 0 0 18px;
    color: #f5a400;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.admin-dashboard-page .admin-dashboard-welcome h1 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.admin-dashboard-page .admin-dashboard-welcome > p:last-child {
    max-width: 720px;
    margin: 20px 0 0;
    color: #a8b2c3;
    font-size: 1.08rem;
    line-height: 1.65;
}

.admin-dashboard-page .admin-dashboard-card,
.admin-dashboard-page .admin-wallpaper-create-card,
.admin-dashboard-page .admin-wallpaper-edit-card,
.admin-dashboard-page .admin-banner-form-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.78),
            rgba(15, 23, 42, 0.94)
        );
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.admin-dashboard-page input,
.admin-dashboard-page textarea,
.admin-dashboard-page select {
    color: #f8fafc;
    background: #080f20;
    border-color: rgba(148, 163, 184, 0.20);
}

.admin-dashboard-page input::placeholder,
.admin-dashboard-page textarea::placeholder {
    color: #718096;
}

.admin-dashboard-page input:focus,
.admin-dashboard-page textarea:focus,
.admin-dashboard-page select:focus {
    border-color: rgba(245, 164, 0, 0.58);
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 164, 0, 0.10);
}

.admin-dashboard-page label {
    color: #f8fafc;
}

.admin-dashboard-page .admin-dashboard-grid {
    margin-top: 34px;
}

.admin-dashboard-page .admin-dashboard-card {
    color: #f8fafc;
}

.admin-dashboard-page .admin-dashboard-card h2 {
    color: #f8fafc;
}

.admin-dashboard-page .admin-dashboard-card p {
    color: #94a3b8;
}

.admin-dashboard-page .admin-dashboard-coming {
    color: #f5a400;
}

.admin-dashboard-page .admin-dashboard-card-icon {
    background: rgba(245, 164, 0, 0.08);
    color: #f5a400;
}

.admin-dashboard-page .admin-form-alert,
.admin-dashboard-page .admin-wallpaper-alert,
.admin-dashboard-page .admin-wallpaper-edit-alert {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(30, 41, 59, 0.72);
}

.admin-dashboard-page button[type="submit"],
.admin-dashboard-page .admin-wallpaper-save-button,
.admin-dashboard-page .admin-wallpaper-edit-save,
.admin-dashboard-page .admin-banner-save-button {
    border-color: transparent;
    color: #111827;
    background: #f5a400;
}

.admin-dashboard-page button[type="submit"]:hover,
.admin-dashboard-page .admin-wallpaper-save-button:hover,
.admin-dashboard-page .admin-wallpaper-edit-save:hover,
.admin-dashboard-page .admin-banner-save-button:hover {
    background: #ffb21a;
}

/* O tema administrativo não herda o fundo claro do site público. */
html[data-theme="light"] .admin-dashboard-page {
    background: #0b1224;
    color: #f8fafc;
}

html[data-theme="light"] .admin-dashboard-page .admin-dashboard-header {
    background: #0b1224;
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

html[data-theme="light"] .admin-dashboard-page .admin-dashboard-welcome h1,
html[data-theme="light"] .admin-dashboard-page label {
    color: #f8fafc;
}

html[data-theme="light"] .admin-dashboard-page .admin-dashboard-welcome > p:last-child {
    color: #a8b2c3;
}

@media (max-width: 700px) {
    .admin-dashboard-page .admin-dashboard-header-content {
        width: min(100% - 30px, 1180px);
        min-height: 88px;
    }

    .admin-dashboard-page .admin-dashboard-logo {
        font-size: 1.55rem;
    }

    .admin-dashboard-page .admin-dashboard-header-content > div > span {
        font-size: 0.84rem;
    }

    .admin-dashboard-page .admin-logout-button {
        min-height: 44px;
        padding: 0 18px;
        border-radius: 14px;
    }

    .admin-dashboard-page .admin-dashboard-main {
        width: min(100% - 30px, 1180px);
        padding: 42px 0 60px;
    }

    .admin-dashboard-page .admin-dashboard-eyebrow {
        margin-bottom: 14px;
    }

    .admin-dashboard-page .admin-dashboard-welcome h1 {
        font-size: clamp(2.15rem, 10vw, 3rem);
    }

    .admin-dashboard-page .admin-dashboard-welcome > p:last-child {
        margin-top: 16px;
        font-size: 1rem;
    }

    .admin-dashboard-page .admin-dashboard-card,
    .admin-dashboard-page .admin-wallpaper-create-card,
    .admin-dashboard-page .admin-wallpaper-edit-card,
    .admin-dashboard-page .admin-banner-form-card {
        border-radius: 19px;
    }
}


/* ADMIN — WALLPAPER FORM COMPONENTS
   Componentes compartilhados do Novo/Editar wallpaper
   ========================================= */

.admin-dashboard-page .admin-wallpaper-create-card,
.admin-dashboard-page .admin-wallpaper-edit-card {
    margin-top: 34px;
    padding: 30px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.78),
            rgba(15, 23, 42, 0.94)
        );
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.admin-dashboard-page .admin-wallpaper-create-form,
.admin-dashboard-page .admin-wallpaper-edit-form {
    display: grid;
    gap: 24px;
}

.admin-dashboard-page .admin-wallpaper-field,
.admin-dashboard-page .admin-wallpaper-edit-field {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.admin-dashboard-page .admin-wallpaper-field label,
.admin-dashboard-page .admin-wallpaper-edit-field label {
    color: #f8fafc;
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 700;
}

.admin-dashboard-page .admin-wallpaper-field input,
.admin-dashboard-page .admin-wallpaper-field textarea,
.admin-dashboard-page .admin-wallpaper-field select,
.admin-dashboard-page .admin-wallpaper-edit-field input,
.admin-dashboard-page .admin-wallpaper-edit-field textarea,
.admin-dashboard-page .admin-wallpaper-edit-field select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    color: #f8fafc;
    background: #080f20;
    font: inherit;
    font-size: 0.98rem;
    line-height: 1.45;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.admin-dashboard-page .admin-wallpaper-field textarea,
.admin-dashboard-page .admin-wallpaper-edit-field textarea {
    min-height: 120px;
    resize: vertical;
}

.admin-dashboard-page .admin-wallpaper-field input::placeholder,
.admin-dashboard-page .admin-wallpaper-field textarea::placeholder,
.admin-dashboard-page .admin-wallpaper-edit-field input::placeholder,
.admin-dashboard-page .admin-wallpaper-edit-field textarea::placeholder {
    color: #718096;
}

.admin-dashboard-page .admin-wallpaper-field input:focus,
.admin-dashboard-page .admin-wallpaper-field textarea:focus,
.admin-dashboard-page .admin-wallpaper-field select:focus,
.admin-dashboard-page .admin-wallpaper-edit-field input:focus,
.admin-dashboard-page .admin-wallpaper-edit-field textarea:focus,
.admin-dashboard-page .admin-wallpaper-edit-field select:focus {
    border-color: rgba(245, 164, 0, 0.58);
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 164, 0, 0.10);
    background: #0a1225;
}

.admin-dashboard-page .admin-wallpaper-field-hint,
.admin-dashboard-page .admin-wallpaper-edit-field-hint {
    margin: 0;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-dashboard-page .admin-wallpaper-options,
.admin-dashboard-page .admin-wallpaper-edit-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-dashboard-page .admin-wallpaper-option,
.admin-dashboard-page .admin-wallpaper-edit-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.58);
    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.admin-dashboard-page .admin-wallpaper-option:hover,
.admin-dashboard-page .admin-wallpaper-edit-option:hover {
    border-color: rgba(245, 164, 0, 0.30);
    background: rgba(245, 164, 0, 0.045);
}

.admin-dashboard-page .admin-wallpaper-option input,
.admin-dashboard-page .admin-wallpaper-edit-option input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #f5a400;
}

.admin-dashboard-page .admin-wallpaper-option label,
.admin-dashboard-page .admin-wallpaper-edit-option label {
    display: block;
    color: #f8fafc;
    font-weight: 700;
    cursor: pointer;
}

.admin-dashboard-page .admin-wallpaper-option p,
.admin-dashboard-page .admin-wallpaper-edit-option p {
    margin: 5px 0 0;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-dashboard-page .admin-wallpaper-current-preview {
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: #080f20;
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.admin-dashboard-page .admin-wallpaper-current-preview img {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 0 auto;
}

.admin-dashboard-page .admin-wallpaper-current-preview-empty {
    padding: 40px 24px;
    color: #94a3b8;
    text-align: center;
}

.admin-dashboard-page .admin-wallpaper-actions,
.admin-dashboard-page .admin-wallpaper-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

.admin-dashboard-page .admin-wallpaper-cancel-button,
.admin-dashboard-page .admin-wallpaper-edit-cancel,
.admin-dashboard-page .admin-wallpaper-save-button,
.admin-dashboard-page .admin-wallpaper-edit-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.admin-dashboard-page .admin-wallpaper-cancel-button,
.admin-dashboard-page .admin-wallpaper-edit-cancel {
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.admin-dashboard-page .admin-wallpaper-cancel-button:hover,
.admin-dashboard-page .admin-wallpaper-edit-cancel:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 164, 0, 0.36);
    background: rgba(245, 164, 0, 0.07);
}

.admin-dashboard-page .admin-wallpaper-save-button,
.admin-dashboard-page .admin-wallpaper-edit-save {
    color: #111827;
    border: 1px solid transparent;
    background: #f5a400;
    box-shadow: 0 10px 24px rgba(245, 164, 0, 0.16);
}

.admin-dashboard-page .admin-wallpaper-save-button:hover,
.admin-dashboard-page .admin-wallpaper-edit-save:hover {
    transform: translateY(-1px);
    background: #ffb21a;
    box-shadow: 0 12px 28px rgba(245, 164, 0, 0.22);
}

.admin-dashboard-page .admin-wallpaper-alert,
.admin-dashboard-page .admin-wallpaper-edit-alert {
    margin-top: 24px;
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(30, 41, 59, 0.72);
}

.admin-dashboard-page .admin-wallpaper-alert-error,
.admin-dashboard-page .admin-wallpaper-edit-alert-error {
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.18);
    color: #fecaca;
}

@media (max-width: 700px) {

    .admin-dashboard-page .admin-wallpaper-create-card,
    .admin-dashboard-page .admin-wallpaper-edit-card {
        margin-top: 24px;
        padding: 20px;
        border-radius: 19px;
    }

    .admin-dashboard-page .admin-wallpaper-create-form,
    .admin-dashboard-page .admin-wallpaper-edit-form {
        gap: 20px;
    }

    .admin-dashboard-page .admin-wallpaper-options,
    .admin-dashboard-page .admin-wallpaper-edit-options {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-page .admin-wallpaper-option,
    .admin-dashboard-page .admin-wallpaper-edit-option {
        padding: 14px;
    }

    .admin-dashboard-page .admin-wallpaper-actions,
    .admin-dashboard-page .admin-wallpaper-edit-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .admin-dashboard-page .admin-wallpaper-cancel-button,
    .admin-dashboard-page .admin-wallpaper-edit-cancel,
    .admin-dashboard-page .admin-wallpaper-save-button,
    .admin-dashboard-page .admin-wallpaper-edit-save {
        width: 100%;
    }

    .admin-dashboard-page .admin-wallpaper-current-preview {
        border-radius: 15px;
    }
}


/* ----------------------------------------------------------
   LETRAS EM ALTA — LIMITE VISUAL DE TÍTULO NO DESKTOP
---------------------------------------------------------- */

@media (min-width: 701px) {

    .trending-page .search-result-content {
        width: 400px;
        max-width: 400px;
        flex: 0 0 400px;
        min-width: 0;
    }

    .trending-page .search-result-title {
        width: 100%;
        max-width: 100%;
    }

}

@media (min-width: 701px) {
    .trending-page .search-result-content {
        width: 400px;
        max-width: 400px;
        flex: 0 0 400px;
        min-width: 0;
    }

    .trending-page .search-result-title {
        width: 100%;
        max-width: 100%;
    }
}








/* =========================================
   PÁGINA DE CIFRA — CANARINHO
========================================= */

.song-chord-page .song-chord-badge {
    display: inline-flex;
    align-items: center;

    margin-top: 10px;
    padding: 6px 11px;

    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 999px;

    background: rgba(245, 158, 11, .08);

    color: #b45309;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.song-chord-info {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-bottom: 24px;

    color: #64748b;
}

.song-chord-info > div {
    display: flex;
    align-items: baseline;

    gap: 7px;

    min-width: 0;
}

.song-chord-info > div + div {
    position: relative;
    padding-left: 24px;
}

.song-chord-info > div + div::before {
    content: "";
    position: absolute;

    left: 0;
    top: 50%;

    width: 1px;
    height: 18px;

    background: rgba(100, 116, 139, .28);

    transform: translateY(-50%);
}

.song-chord-info span {
    color: #64748b;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.song-chord-info strong {
    color: #0f172a;

    font-size: 16px;
    line-height: 1.2;
}

.song-chord-content {
    width: 100%;
}

.song-chord-content pre {
    margin: 0;

    padding: 28px 26px;

    overflow-x: auto;

    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 16px;

    background: #f8fafc;

    color: #1f2937;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 12px;
    line-height: 1.8;

    white-space: pre;

    tab-size: 4;

    -webkit-overflow-scrolling: touch;
}

.song-chord-marker {
    color: #b45309;

    font-weight: 800;
}



/* =========================================================
   CIFRA — RENDERIZAÇÃO RESPONSIVA V1
========================================================= */

.song-chord-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.song-chord-render {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: #1f2937;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 15px;
    line-height: 1.8;

    overflow: hidden;
}

.song-chord-pair {
    width: 100%;
    max-width: 100%;

    margin: 0 0 1.15em;

    line-height: 1.75;
}

.song-chord-segment {
    display: inline-block;

    max-width: 100%;

    margin-right: .35em;

    vertical-align: top;
}

.song-chord-segment .song-chord-marker {
    display: block;

    width: max-content;
    max-width: 100%;

    white-space: nowrap;
}

.song-chord-lyric {
    display: block;

    max-width: 100%;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}

.song-chord-plain {
    width: 100%;
    max-width: 100%;

    margin: 0 0 .15em;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}

.song-chord-chords-only {
    width: 100%;
    max-width: 100%;

    margin: 0 0 .8em;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}

.song-chord-chords-only .song-chord-marker {
    display: inline-block;

    margin-right: .35em;
}

.song-chord-spacer {
    height: .9em;
}

.song-chord-tab-wrap {
    width: 100%;
    max-width: 100%;

    margin: 0 0 1.15em;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}

.song-chord-tab-wrap .song-chord-tab {
    display: block;

    width: max-content;
    min-width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: inherit;

    font: inherit;
    line-height: 1.8;

    white-space: pre;

    tab-size: 4;
}

html[data-theme="dark"] .song-chord-render {
    border: 0;
    background: transparent;
    color: #e5e7eb;
}

@media (max-width: 700px) {

    .song-chord-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .song-chord-render {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding: 0;

        border: 0;
        border-radius: 0;

        font-size: 15px !important;
        line-height: 1.75;
    }

    .song-chord-pair {
        margin-bottom: 1.1em;
    }

    .song-chord-segment {
        margin-right: .25em;
    }

    .song-chord-tab-wrap {
        margin-bottom: 1.1em;
    }
}

/* =========================================
   CIFRA — TEMA ESCURO
========================================= */

html[data-theme="dark"] .song-chord-page .song-chord-badge {
    border-color: rgba(245, 158, 11, .25);

    background: rgba(245, 158, 11, .10);

    color: #fbbf24;
}

html[data-theme="dark"] .song-chord-info > div {
    border-color: rgba(148, 163, 184, .16);

    background: #172238;
}

html[data-theme="dark"] .song-chord-info span {
    color: #94a3b8;
}

html[data-theme="dark"] .song-chord-info strong {
    color: #f8fafc;
}

html[data-theme="dark"] .song-chord-content pre {
    border-color: rgba(148, 163, 184, .16);

    background: #111c30;

    color: #e5e7eb;
}

html[data-theme="dark"] .song-chord-render {
    border: 0;
    background: transparent;
    color: #e5e7eb;
}

html[data-theme="dark"] .song-chord-marker {
    color: #fbbf24;
}


/* =========================================
   CIFRA — MOBILE
========================================= */

@media (max-width: 700px) {

    .song-chord-page .song-chord-badge {
        margin-top: 8px;

        padding: 5px 9px;

        font-size: 12px;
    }

    .song-chord-info {
        gap: 16px;

        margin-bottom: 20px;
    }

    .song-chord-info > div {
        flex: 0 0 auto;
    }

    .song-chord-info > div + div {
        padding-left: 16px;
    }

    .song-chord-info > div + div::before {
        height: 16px;
    }

    .song-chord-info span {
        font-size: 10px;
    }

    .song-chord-info strong {
        font-size: 15px;
    }

    .song-chord-content pre {
        padding: 20px 16px;

        border-radius: 13px;

        font-size: 12px;
        line-height: 1.75;
    }
}

/* =========================================================
   CIFRAS — ALINHAMENTO DOS CARDS DE AÇÃO NO DESKTOP
   ========================================================= */

@media (min-width: 701px) {

    .song-reading-layout:has(.song-chord-controls) .song-reading-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 760px;
        margin-left: 0;
        margin-right: auto;
    }

    .song-reading-layout:has(.song-chord-controls) .song-reading-actions .song-action-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .song-reading-layout:has(.song-chord-controls) .song-reading-actions {
        margin-bottom: 8px;
    }

}

/* =========================================================
   LETRAS — MESMO PADRÃO DOS CONTROLES DE CIFRAS
   SOMENTE DESKTOP
   ========================================================= */

@media (min-width: 701px) {

    .song-reading-layout:has(.song-lyrics-scroll-actions) .song-reading-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 760px;
        margin-left: 0;
        margin-right: auto;
        margin-bottom: 8px;
    }

    .song-reading-layout:has(.song-lyrics-scroll-actions) .song-reading-actions .song-action-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .song-reading-layout:has(.song-lyrics-scroll-actions) .song-lyrics-scroll-actions {
        width: 100%;
        max-width: 760px;
        margin-top: 4px;
    }

}

/* =========================================================
   CONTROLES DA CIFRA
   ========================================================= */

.song-chord-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 760px;
    margin: 4px auto 24px;
}

.song-chord-control-card {
    box-sizing: border-box;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    text-align: center;
    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

button.song-chord-control-card {
    cursor: pointer;
}

button.song-chord-control-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

button.song-chord-control-card:active {
    transform: translateY(1px);
}

button.song-chord-control-card:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
}

.song-chord-control-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 17px;
    line-height: 1;
}

.song-chord-control-body {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    text-align: center;
}

.song-chord-control-label {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.song-chord-control-value {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.song-chord-key-card:hover .song-chord-control-icon,
.song-chord-scroll-card:hover .song-chord-control-icon {
    color: #334155;
}

/* Tema escuro */

html[data-theme="dark"] .song-chord-control-card {
    border-color: rgba(148, 163, 184, .16);
    background: #111c30;
    color: #f8fafc;
}

html[data-theme="dark"] button.song-chord-control-card:hover {
    border-color: rgba(148, 163, 184, .28);
    background: #172238;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .song-chord-control-icon {
    color: #94a3b8;
}

html[data-theme="dark"] .song-chord-control-label {
    color: #94a3b8;
}

html[data-theme="dark"] .song-chord-control-value {
    color: #f8fafc;
}

html[data-theme="dark"] .song-chord-key-card:hover .song-chord-control-icon,
html[data-theme="dark"] .song-chord-scroll-card:hover .song-chord-control-icon {
    color: #e2e8f0;
}

@media (max-width: 700px) {
    .song-chord-controls {
        gap: 8px;
        margin-bottom: 20px;
    }

    .song-chord-control-card {
        min-height: 40px;
        padding: 6px 8px;
        gap: 5px;
        border-radius: 9px;
    }

    .song-chord-control-icon {
        width: 18px;
        height: 18px;
        font-size: 15px;
    }

    .song-chord-control-body {
        gap: 5px;
    }

    .song-chord-control-label {
        font-size: 10px;
        letter-spacing: .06em;
    }

    .song-chord-control-value {
        font-size: 14px;
    }
}

/* =========================================================
   CONTROLES DA ROLAGEM
   ========================================================= */

.song-scroll-controls {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 9998;
    width: min(560px, calc(100% - 32px));
    padding: 8px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}

.song-scroll-controls.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.song-scroll-controls-inner {
    min-height: 52px;
    padding: 6px 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: rgba(17, 28, 48, .96);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.song-scroll-pause,
.song-scroll-close {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
}

.song-scroll-pause:hover,
.song-scroll-close:hover {
    background: rgba(148, 163, 184, .12);
}

.song-scroll-pause-icon {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.song-scroll-close {
    font-size: 31px;
    font-weight: 300;
    line-height: 1;
}

.song-scroll-speed {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}

.song-scroll-speed-icon {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    filter: grayscale(1);
    opacity: .85;
}

.song-scroll-range {
    flex: 1;
    width: 100%;
    height: 4px;
    margin: 0;
    accent-color: #fbbf24;
    cursor: pointer;
}

html[data-theme="light"] .song-scroll-controls-inner {
    border-color: rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 35px rgba(15, 23, 42, .18);
}

html[data-theme="light"] .song-scroll-pause,
html[data-theme="light"] .song-scroll-close {
    color: #0f172a;
}

html[data-theme="light"] .song-scroll-pause:hover,
html[data-theme="light"] .song-scroll-close:hover {
    background: rgba(15, 23, 42, .06);
}

@media (max-width: 700px) {

    .song-scroll-controls {
        bottom: 12px;
        width: calc(100% - 24px);
        padding: 4px;
    }

    .song-scroll-controls-inner {
        min-height: 50px;
        padding: 5px 6px;
        gap: 8px;
        border-radius: 16px;
    }

    .song-scroll-pause,
    .song-scroll-close {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .song-scroll-speed {
        gap: 7px;
    }

    .song-scroll-speed-icon {
        font-size: 14px;
    }
}

/* =========================================================
   PAINEL DE TOM DO CANARINHO
   ========================================================= */

.song-chord-controls {
    position: relative;
}

.song-chord-key-panel {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 10px);
    left: 0;
    right: 0;

    display: none;

    box-sizing: border-box;
}

.song-chord-key-panel.is-visible {
    display: block;
}

.song-chord-key-panel-inner {
    width: 100%;
    box-sizing: border-box;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;

    background: #151d2d;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.25);
}

.song-chord-key-panel-actions {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        minmax(0, 1fr)
        48px;

    gap: 10px;

    margin-bottom: 12px;
}

.song-chord-key-action {
    min-height: 48px;

    border: 0;
    border-radius: 14px;

    background: #20293a;

    color: #f3f4f6;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.song-chord-key-action:active {
    transform: scale(0.98);
}

.song-chord-key-reset,
.song-chord-key-close {
    font-size: 24px;
}

.song-chord-key-options {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 8px;
}

.song-chord-key-option {
    min-width: 0;
    min-height: 50px;

    padding: 8px 4px;

    border: 0;
    border-radius: 14px;

    background: #20293a;

    color: #aeb7c7;

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.song-chord-key-option.is-selected {
    background: #f4f4f4;

    color: #111827;

    box-shadow:
        inset 0 0 0 2px #ffffff;
}

.song-chord-key-option:active {
    transform: scale(0.97);
}

@media (max-width: 600px) {

    .song-chord-key-panel {
        top: calc(100% + 8px);
    }

    .song-chord-key-panel-inner {
        padding: 12px;

        border-radius: 20px;
    }

    .song-chord-key-panel-actions {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            minmax(0, 1fr)
            44px;

        gap: 8px;
    }

    .song-chord-key-action {
        min-height: 46px;

        font-size: 14px;
    }

    .song-chord-key-reset,
    .song-chord-key-close {
        font-size: 22px;
    }

    .song-chord-key-options {
        gap: 7px;
    }

    .song-chord-key-option {
        min-height: 48px;

        font-size: 15px;
    }
}

\n
.song-report-song-type {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.20);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* ==========================================================
   BUSCA UNIFICADA — SWITCH LETRAS / CIFRAS
========================================================== */

.search-type-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;

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

    margin: 0;
    padding: 4px;

    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 13px;

    background: rgba(15, 23, 42, .72);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 8px 24px rgba(0, 0, 0, .08);
}


/* ==========================================================
   DESKTOP — SWITCH FLUTUANTE DA BUSCA
========================================================== */

@media (min-width: 701px) {

    .header-desktop-search
    .search-type-switch {
        position: absolute;

        top: calc(100% + 12px);
        left: 0;
        right: 0;

        z-index: 100001;

        display: none;
    }


    /*
     * Quando há texto digitado, mantém o switch visível
     * mesmo que o campo perca o foco ao interagir com ele.
     */
    .header-desktop-search
    .search-type-switch.is-visible {
        display: grid;
    }

}


.search-type-option {
    min-height: 38px;
    padding: 7px 12px;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #94a3b8;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    letter-spacing: .01em;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.search-type-option:hover {
    color: #e5e7eb;
}

.search-type-option.is-active {
    background: #f8fafc;
    color: #111827;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .16);
}

.search-type-option:active {
    transform: scale(.98);
}


/* ==========================================================
   TEMA CLARO
========================================================== */

html[data-theme="light"] .search-type-switch {
    border-color: rgba(15, 23, 42, .08);
    background: #f1f5f9;
}

html[data-theme="light"] .search-type-option {
    color: #64748b;
}

html[data-theme="light"] .search-type-option:hover {
    color: #1e293b;
}

html[data-theme="light"] .search-type-option.is-active {
    background: #ffffff;
    color: #111827;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .search-type-switch {
        margin: 10px 14px 8px;
        width: calc(100% - 28px);
    }

    .search-type-option {
        min-height: 40px;
        font-size: 13px;
    }

}



/* ==========================================================
   BUSCA UNIFICADA — AJUSTE FINAL DESKTOP
   Switch acima das sugestões
========================================================== */

@media (min-width: 701px) {

    /*
     * O switch fica logo abaixo do campo.
     */
    .header-desktop-search
    #desktop-search-type-switch {

        position: absolute !important;

        top: calc(100% + 12px) !important;

        left: 0 !important;
        right: 0 !important;

        z-index: 2001 !important;
    }


    /*
     * As sugestões começam abaixo do switch.
     *
     * Campo
     *   ↓ 12px
     * Switch (~48px)
     *   ↓ 10px
     * Sugestões
     */
    .header-desktop-search
    #desktop-search-suggestions {

        position: absolute !important;

        top: calc(100% + 76px) !important;

        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        box-sizing: border-box !important;

        z-index: 2000 !important;
    }


    /*
     * Quando oculto, não ocupa nem recebe interação.
     */
    .header-desktop-search
    #desktop-search-suggestions[hidden] {

        display: none !important;
    }

}


/* ==========================================================
   BUSCA UNIFICADA — CORES DESKTOP IGUAIS AO MOBILE
========================================================== */

@media (min-width: 701px) {

    /* Container — modo escuro */
    html[data-theme="dark"]
    .header-desktop-search
    #desktop-search-type-switch {
        border-color: rgba(148, 163, 184, .14);
        background: #0f172a;
    }

    /* Opções — modo escuro */
    html[data-theme="dark"]
    .header-desktop-search
    #desktop-search-type-switch
    .search-type-option {
        background: transparent;
        color: #94a3b8;
    }

    html[data-theme="dark"]
    .header-desktop-search
    #desktop-search-type-switch
    .search-type-option:hover {
        color: #e5e7eb;
    }

    html[data-theme="dark"]
    .header-desktop-search
    #desktop-search-type-switch
    .search-type-option.is-active {
        background: #f8fafc;
        color: #111827;
    }


    /* Container — modo claro */
    html[data-theme="light"]
    .header-desktop-search
    #desktop-search-type-switch {
        border-color: rgba(15, 23, 42, .08);
        background: #f1f5f9;
    }

    /* Opções — modo claro */
    html[data-theme="light"]
    .header-desktop-search
    #desktop-search-type-switch
    .search-type-option {
        background: transparent;
        color: #64748b;
    }

    html[data-theme="light"]
    .header-desktop-search
    #desktop-search-type-switch
    .search-type-option:hover {
        color: #1e293b;
    }

    html[data-theme="light"]
    .header-desktop-search
    #desktop-search-type-switch
    .search-type-option.is-active {
        background: #ffffff;
        color: #111827;
    }

}


/* ==========================================================
   LOGO — SUBTÍTULO LETRAS E CIFRAS
========================================================== */

@media (max-width: 700px) {

    .logo {
        align-items: center;
    }

    .logo-tagline {
        margin-top: 2px;
        font-size: 11px;
        letter-spacing: .09em;
    }

}

/* ==========================================================
   PERFIL DO ARTISTA — SWITCH TOP 10
========================================================== */

.artist-top-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;

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

    margin: 0 0 18px;
    padding: 4px;

    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 13px;

    background: rgba(15, 23, 42, .72);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 8px 24px rgba(0, 0, 0, .08);
}

.artist-top-switch-option {
    min-height: 40px;

    padding: 8px 12px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #8f9aae;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.artist-top-switch-option.is-active {
    background: #f4f4f4;
    color: #111827;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .12);
}

.artist-top-panel {
    display: none;
}

.artist-top-panel.is-active {
    display: block;
}

html[data-theme="dark"] .artist-top-switch {
    border-color: rgba(148, 163, 184, .14);
    background: rgba(15, 23, 42, .72);
}

@media (max-width: 700px) {

    .artist-top-switch {
        margin-bottom: 18px;
    }

    .artist-top-switch-option {
        min-height: 40px;
        font-size: 13px;
    }

}

/* ==========================================================
   ARTISTA — SWITCH TOP 10
   Aproxima o switch do separador do perfil
========================================================== */

.artist-top-songs {
    margin-top: 12px !important;
}

/* ==========================================================
   ARTISTA — AJUSTE FINAL DO SWITCH NO MOBILE
========================================================== */

@media (max-width: 700px) {

    .artist-top-songs {
        margin-top: 2px !important;
    }

}

/* ARTISTA — APROXIMAÇÃO FINAL DO SWITCH */
@media (max-width: 700px) {

    .artist-top-songs {
        margin-top: -8px !important;
    }

}

/* ==========================================================
   CANARINHO GOSPEL — PERFIL DO ARTISTA
   PREMIUM V2 — EXPERIMENTO VISUAL
========================================================== */


/* ----------------------------------------------------------
   FUNDO E ÁREA PRINCIPAL
---------------------------------------------------------- */

.artist-profile {
    position: relative;
}


/* ----------------------------------------------------------
   CABEÇALHO DO ARTISTA
---------------------------------------------------------- */

.artist-profile .artist-profile-main {
    position: relative;
}


/* Halo sutil ao redor da foto */

.artist-profile .artist-profile-main::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 50px;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245, 158, 11, .10) 0%,
            rgba(245, 158, 11, .035) 38%,
            transparent 72%
        );

    pointer-events: none;

    z-index: 0;
}


/* Conteúdo acima do halo */

.artist-profile .artist-profile-main > * {
    position: relative;
    z-index: 1;
}


/* ----------------------------------------------------------
   FOTO DO ARTISTA
---------------------------------------------------------- */

.artist-profile .artist-profile-main img {
    filter:
        saturate(1.04)
        contrast(1.02);
}


/* ----------------------------------------------------------
   DIVISOR
---------------------------------------------------------- */

.artist-profile .artist-section-divider {
    height: 0 !important;

    margin-top: 26px !important;

    border-top-width: 1px !important;

    border-top-style: solid !important;

    border-top-color: rgba(15, 23, 42, .16) !important;
}


/* ----------------------------------------------------------
   SWITCH LETRAS / CIFRAS
---------------------------------------------------------- */

.artist-profile .artist-top-switch {
    margin-top: -8px !important;
    margin-bottom: 20px !important;

    padding: 4px !important;

    border: 1px solid rgba(15, 23, 42, .08) !important;

    border-radius: 15px !important;

    background: rgba(226, 232, 240, .62) !important;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .055),
        inset 0 1px 0 rgba(255, 255, 255, .85) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.artist-profile .artist-top-switch-option {
    min-height: 42px !important;

    border-radius: 11px !important;

    color: #64748b !important;

    font-weight: 600 !important;

    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


.artist-profile .artist-top-switch-option.is-active {
    background: #ffffff !important;

    color: #111827 !important;

    box-shadow:
        0 2px 7px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}


/* ----------------------------------------------------------
   TÍTULO DO TOP 10
---------------------------------------------------------- */

.artist-profile .artist-top-songs .home-top-songs-title {
    font-size: 19px !important;

    font-weight: 700 !important;

    letter-spacing: -.025em !important;

    color: #172033 !important;
}


/* ----------------------------------------------------------
   ITENS DO RANKING
---------------------------------------------------------- */

.artist-profile .artist-top-songs .home-top-song {
    position: relative;

    border-bottom: 1px solid rgba(15, 23, 42, .065);

    transition:
        background .18s ease,
        transform .18s ease;
}


.artist-profile .artist-top-songs .home-top-song:last-child {
    border-bottom-color: transparent;
}


/* Números */

.artist-profile .artist-top-songs .home-top-song-position {
    color: #c58a16;

    font-weight: 700;
}


/* Título da música */

.artist-profile .artist-top-songs .search-result-title {
    color: #172033;

    font-weight: 600;
}


/* Visualizações */

.artist-profile .artist-top-songs .search-result-artist {
    color: #718096;
}


/* ----------------------------------------------------------
   HOVER — DESKTOP
---------------------------------------------------------- */

@media (min-width: 701px) {

    .artist-profile .artist-top-songs .home-top-song:hover {
        background: rgba(245, 158, 11, .035);

        transform: translateX(2px);
    }

}


/* ----------------------------------------------------------
   DARK MODE
---------------------------------------------------------- */

html[data-theme="dark"] .artist-profile .artist-section-divider {
    border-top-color: rgba(226, 232, 240, .18) !important;
}


html[data-theme="dark"] .artist-profile .artist-top-switch {
    border-color: rgba(148, 163, 184, .14) !important;

    background: rgba(15, 23, 42, .76) !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}


html[data-theme="dark"] .artist-profile .artist-top-switch-option {
    color: #8f9aae !important;
}


html[data-theme="dark"] .artist-profile .artist-top-switch-option.is-active {
    background: #f4f4f4 !important;

    color: #111827 !important;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .20) !important;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-songs-title {
    color: #eef2f7 !important;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-song {
    border-bottom-color: rgba(148, 163, 184, .095);
}


html[data-theme="dark"] .artist-profile .artist-top-songs .search-result-title {
    color: #e7ebf1;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .search-result-artist {
    color: #8491a6;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-song-position {
    color: #e5a92b;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-song:hover {
    background: rgba(245, 158, 11, .035);
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .artist-profile .artist-profile-main::before {
        width: 165px;
        height: 165px;

        left: 50px;
    }


    .artist-profile .artist-section-divider {
        margin-top: 26px !important;
    }


    .artist-profile .artist-top-switch {
        margin-top: -8px !important;
        margin-bottom: 18px !important;
    }


    .artist-profile .artist-top-songs .home-top-songs-title {
        font-size: 18px !important;
    }


    .artist-profile .artist-top-songs .home-top-song {
        padding-top: 2px;
        padding-bottom: 2px;
    }

}

/* ==========================================================
   CANARINHO GOSPEL — PERFIL DO ARTISTA
   PREMIUM V3 — REFINAMENTO VISUAL
========================================================== */


/* ----------------------------------------------------------
   PERFIL — COMPOSIÇÃO
---------------------------------------------------------- */

.artist-profile {
    position: relative;
}


/* ----------------------------------------------------------
   FOTO — MAIS PRESENÇA
---------------------------------------------------------- */

.artist-profile .artist-profile-main::before {
    width: 215px !important;
    height: 215px !important;

    left: 52px !important;

    background:
        radial-gradient(
            circle,
            rgba(245, 158, 11, .13) 0%,
            rgba(245, 158, 11, .055) 34%,
            rgba(245, 158, 11, .018) 52%,
            transparent 73%
        ) !important;

    filter: blur(2px);
}


/* ----------------------------------------------------------
   DIVISOR — MAIS ELEGANTE
---------------------------------------------------------- */

.artist-profile .artist-section-divider {
    margin-top: 24px !important;

    border-top-width: 1px !important;
}


/* ----------------------------------------------------------
   SWITCH — LIGHT
---------------------------------------------------------- */

.artist-profile .artist-top-switch {
    margin-top: -9px !important;
    margin-bottom: 22px !important;

    padding: 3px !important;

    border: 1px solid rgba(100, 116, 139, .16) !important;

    border-radius: 14px !important;

    background: rgba(241, 245, 249, .72) !important;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, .045),
        inset 0 1px 0 rgba(255, 255, 255, .95) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.artist-profile .artist-top-switch-option {
    min-height: 41px !important;

    border-radius: 11px !important;

    color: #64748b !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


.artist-profile .artist-top-switch-option.is-active {
    background: #ffffff !important;

    color: #111827 !important;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, .09),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}


/* ----------------------------------------------------------
   TÍTULO DO RANKING
---------------------------------------------------------- */

.artist-profile .artist-top-songs .home-top-songs-header {
    margin-bottom: 10px !important;
}


.artist-profile .artist-top-songs .home-top-songs-title {
    font-size: 19px !important;

    font-weight: 700 !important;

    letter-spacing: -.028em !important;
}


/* ----------------------------------------------------------
   RANKING — ESTRUTURA
---------------------------------------------------------- */

.artist-profile .artist-top-songs .home-top-song {
    min-height: 68px;

    box-sizing: border-box;

    padding-top: 7px;
    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(100, 116, 139, .095);

    transition:
        background .18s ease,
        transform .18s ease;
}


/* ----------------------------------------------------------
   NÚMERO
---------------------------------------------------------- */

.artist-profile .artist-top-songs .home-top-song-position {
    color: #b98218 !important;

    font-weight: 700 !important;
}


/* ----------------------------------------------------------
   MÚSICA
---------------------------------------------------------- */

.artist-profile .artist-top-songs .search-result-title {
    color: #172033 !important;

    font-weight: 600 !important;

    letter-spacing: -.01em;
}


/* ----------------------------------------------------------
   VISUALIZAÇÕES
---------------------------------------------------------- */

.artist-profile .artist-top-songs .search-result-artist {
    color: #7a8799 !important;

    font-size: 14px;
}


/* ----------------------------------------------------------
   HOVER DESKTOP
---------------------------------------------------------- */

@media (min-width: 701px) {

    .artist-profile .artist-top-songs .home-top-song {
        border-radius: 8px;
    }

    .artist-profile .artist-top-songs .home-top-song:hover {
        background: rgba(245, 158, 11, .035);

        transform: translateX(3px);
    }

}


/* ----------------------------------------------------------
   DARK MODE
---------------------------------------------------------- */

html[data-theme="dark"] .artist-profile .artist-section-divider {
    border-top-color:
        rgba(226, 232, 240, .16) !important;
}


html[data-theme="dark"] .artist-profile .artist-top-switch {
    border-color:
        rgba(148, 163, 184, .15) !important;

    background:
        rgba(12, 20, 36, .80) !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}


html[data-theme="dark"] .artist-profile .artist-top-switch-option {
    color: #8d99ad !important;
}


html[data-theme="dark"] .artist-profile .artist-top-switch-option.is-active {
    background: #f4f4f4 !important;

    color: #111827 !important;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .24) !important;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-songs-title {
    color: #edf1f7 !important;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-song {
    border-bottom-color:
        rgba(148, 163, 184, .075);
}


html[data-theme="dark"] .artist-profile .artist-top-songs .search-result-title {
    color: #e7ebf1 !important;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .search-result-artist {
    color: #8490a3 !important;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-song-position {
    color: #dca126 !important;
}


html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-song:hover {
    background: rgba(245, 158, 11, .035);
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .artist-profile .artist-profile-main::before {
        width: 185px !important;
        height: 185px !important;

        left: 50px !important;
    }


    .artist-profile .artist-section-divider {
        margin-top: 24px !important;
    }


    .artist-profile .artist-top-switch {
        margin-top: -9px !important;

        margin-bottom: 17px !important;

        padding: 3px !important;
    }


    .artist-profile .artist-top-switch-option {
        min-height: 41px !important;
    }


    .artist-profile .artist-top-songs .home-top-songs-header {
        margin-bottom: 7px !important;
    }


    .artist-profile .artist-top-songs .home-top-songs-title {
        font-size: 18px !important;
    }


    .artist-profile .artist-top-songs .home-top-song {
        min-height: 66px;

        padding-top: 5px;
        padding-bottom: 5px;

        border-bottom-color:
            rgba(100, 116, 139, .09);
    }


    html[data-theme="dark"] .artist-profile .artist-top-songs .home-top-song {
        border-bottom-color:
            rgba(148, 163, 184, .07);
    }

}

/* ==========================================================
   CANARINHO — PERFIL DO ARTISTA
   PREMIUM V3.1 — REFINAMENTO DO DARK MODE
========================================================== */

@media (max-width: 700px) {

    /* ------------------------------------------------------
       DIVISOR DO PERFIL
    ------------------------------------------------------ */

    html[data-theme="dark"] .artist-profile .artist-section-divider {
        border-top-color: rgba(255, 255, 255, .32) !important;
    }


    /* ------------------------------------------------------
       SWITCH
    ------------------------------------------------------ */

    html[data-theme="dark"] .artist-profile .artist-top-switch {
        border-color: rgba(255, 255, 255, .14) !important;

        background: rgba(14, 23, 41, .88) !important;

        box-shadow:
            0 7px 20px rgba(0, 0, 0, .20),
            inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    }


    /* ------------------------------------------------------
       LETRAS / CIFRAS
    ------------------------------------------------------ */

    html[data-theme="dark"] .artist-profile .artist-top-switch-option {
        min-height: 43px !important;

        color: #aeb8c9 !important;

        font-size: 14px !important;

        font-weight: 650 !important;

        letter-spacing: -.005em;
    }


    /* ------------------------------------------------------
       OPÇÃO ATIVA
    ------------------------------------------------------ */

    html[data-theme="dark"] .artist-profile .artist-top-switch-option.is-active {
        background: #202c43 !important;

        color: #f1f4f8 !important;

        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .13),
            0 2px 7px rgba(0, 0, 0, .22) !important;
    }

}

/* ==========================================================
   ARTISTA — SWITCH TOP 10
   DESKTOP — LARGURA COMPACTA
========================================================== */

@media (min-width: 701px) {

    .artist-profile .artist-top-switch {
        width: 440px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}


/* ==========================================================
   ARTISTA — SWITCH TOP 10
   DESKTOP — CONTROLE COMPACTO
========================================================== */

@media (min-width: 701px) {

    .artist-profile .artist-top-songs .artist-top-switch {
        display: grid !important;

        width: 440px !important;
        max-width: 440px !important;
        min-width: 440px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
        flex: 0 0 440px !important;
    }

}


/* ==========================================================
   ARTISTA — SWITCH TOP 10
   DESKTOP — LARGURA COMPACTA
========================================================== */

@media (min-width: 701px) {

    .artist-top-switch {
        width: 440px !important;
        max-width: 440px !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }

}


/* ==========================================================
   ARTISTA — SWITCH TOP 10
   DESKTOP — ALINHAMENTO À ESQUERDA
========================================================== */

@media (min-width: 701px) {

    .artist-top-switch {
        width: 440px !important;
        max-width: 440px !important;
        min-width: 0 !important;

        margin-left: calc((100% - 1260px) / 2) !important;
        margin-right: 0 !important;
    }

}


/* ARTISTA — SWITCH TOP 10 — PEQUENO AJUSTE À DIREITA */

@media (min-width: 701px) {

    .artist-top-switch {
        margin-left: calc((100% - 1260px) / 2 + 100px) !important;
        margin-right: 0 !important;
    }

}


/* ==========================================================
   ARTISTA — SWITCH TOP 10
   DARK MODE — REFINAMENTO DE CORES
========================================================== */

@media (min-width: 701px) {

    html[data-theme="dark"] .artist-top-switch {

        background: #111c30 !important;

        border: 1px solid rgba(148, 163, 184, .18) !important;

        box-shadow:
            0 8px 24px rgba(0, 0, 0, .18),
            inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    }

    html[data-theme="dark"] .artist-top-switch-option {

        color: #9eabc0 !important;

        background: transparent !important;

        font-size: 14px !important;
        font-weight: 600 !important;
    }

    html[data-theme="dark"] .artist-top-switch-option.is-active {

        background: #202c43 !important;

        color: #f3f6fa !important;

        box-shadow:
            inset 0 0 0 1px rgba(148, 163, 184, .16),
            0 2px 8px rgba(0, 0, 0, .24) !important;
    }

}


/* ==========================================================
   ARTISTA — SWITCH TOP 10
   DESKTOP + MOBILE — LARGURA COMPACTA
========================================================== */

.artist-profile .artist-top-switch {
    width: 440px !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   ARTISTA — SWITCH TOP 10
   MOBILE — LARGURA COMPACTA FORÇADA
========================================================== */

@media (max-width: 700px) {

    .artist-profile .artist-top-switch {
        width: calc(100% - 32px) !important;
        max-width: 440px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

}


/* ==========================================================
   ARTISTA — TAG DE TIPO DA MÚSICA
   LETRA / CIFRA
========================================================== */

.artist-all-songs .artist-song-link .search-result-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.artist-all-songs .artist-song-link .search-result-title {
    min-width: 0;
}

.artist-song-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 24px;
    padding: 3px 9px;

    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 999px;

    background: rgba(148, 163, 184, .07);

    color: #718096;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .01em;
    white-space: nowrap;
}

html[data-theme="dark"] .artist-song-type-badge {
    border-color: rgba(148, 163, 184, .18);
    background: rgba(148, 163, 184, .08);
    color: #9aa7ba;
}

@media (max-width: 700px) {

    .artist-all-songs .artist-song-link .search-result-content {
        gap: 9px;
    }

    .artist-song-type-badge {
        min-height: 23px;
        padding: 3px 8px;
        font-size: 10px;
    }

}


/* ==========================================================
   ARTISTA — TAG LETRA / CIFRA
   INLINE COM O TÍTULO
========================================================== */

.artist-all-songs .artist-song-link .search-result-content {
    display: block !important;
    min-width: 0;
}

.artist-all-songs .artist-song-link .search-result-title {
    display: inline !important;
}

.artist-all-songs .artist-song-type-badge {
    display: inline-flex !important;
    vertical-align: middle;

    margin-left: 8px;

    min-height: 23px;
    padding: 3px 8px;

    box-sizing: border-box;

    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 999px;

    background: rgba(148, 163, 184, .07);

    color: #718096;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
}

html[data-theme="dark"] .artist-all-songs .artist-song-type-badge {
    border-color: rgba(148, 163, 184, .18);
    background: rgba(148, 163, 184, .08);
    color: #9aa7ba;
}


/* ==========================================================
   ARTISTA — TÍTULO + TAG
   UMA LINHA COM ELLIPSIS
========================================================== */

.artist-all-songs .artist-song-link .search-result-content {
    display: flex !important;
    align-items: center;
    gap: 9px;

    min-width: 0;
    width: 100%;
}

.artist-all-songs .artist-song-link .search-result-title {
    display: block !important;

    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.artist-all-songs .artist-song-type-badge {
    flex: 0 0 auto;
    margin-left: 0;
}


/* ==========================================================
   ARTISTA — TÍTULO + TAG
   CORREÇÃO DEFINITIVA: MESMA LINHA
========================================================== */

.artist-all-songs .artist-song-link .search-result-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    flex-wrap: nowrap !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    gap: 9px !important;
}

.artist-all-songs .artist-song-link .search-result-title {
    display: block !important;

    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.artist-all-songs .artist-song-type-badge {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
}


/* ==========================================================
   ARTISTA — TAG INTELIGENTE
   TAG APÓS O TÍTULO, ELLIPSIS SOMENTE QUANDO NECESSÁRIO
========================================================== */

.artist-all-songs .artist-song-link .search-result-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
}

.artist-all-songs .artist-song-link .search-result-title {
    display: block !important;

    flex: 0 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.artist-all-songs .artist-song-type-badge {
    flex: 0 0 auto !important;

    margin-left: 9px !important;

    white-space: nowrap !important;
}


/* ==========================================================
   ARTISTA — CORREÇÃO FINAL DA LISTA
   TÍTULO + TAG ALINHADOS À ESQUERDA
========================================================== */

.artist-all-songs .artist-letter-songs .artist-song-link {
    text-align: left !important;
}

.artist-all-songs .artist-letter-songs .artist-song-link .search-result-content {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content: flex-start !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}

.artist-all-songs .artist-letter-songs .artist-song-link .search-result-title {
    display: block !important;

    flex: 0 1 auto !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    text-align: left !important;
}

.artist-all-songs .artist-letter-songs .artist-song-type-badge {
    flex: 0 0 auto !important;

    margin-left: 9px !important;
    margin-right: 0 !important;
}


/* ==========================================================
   CANARINHO — HOME CIFRAS EM ALTA
   Visual sincronizado com Letras em Alta
========================================================== */

.home-top-chords {
    width: 100%;
    margin: 32px 0 0;
}

.home-top-chords-header {
    margin-bottom: 16px;
}

.home-top-chords-title {
    margin: 0;
    margin-left: 42px;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -.02em;

    color: var(--cg-text);
}

.home-top-chords-list {
    width: 100%;
}

.home-top-chord.search-result-item {
    display: flex;
    align-items: center;

    width: 100%;

    text-decoration: none;
}

.home-top-chord-position {
    flex: 0 0 42px;

    text-align: center;

    font-size: 14px;
    font-weight: 800;

    color: var(--cg-accent);

    font-variant-numeric: tabular-nums;
}


/* ==========================================================
   HOME — CIFRAS EM ALTA
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .home-top-chords {
        padding-inline: 8px;
    }

    .home-top-chords-header {
        padding: 0;
        margin-bottom: 12px;
    }

    .home-top-chords-title {
        margin: 0;
        transform: translateX(8px);

        font-size: 17px;
    }

    .home-top-chord.search-result-item {
        padding-left: 0;
        padding-right: 0;
    }

    .home-top-chord-position {
        flex: 0 0 22px;

        text-align: left;

        font-size: 13px;

        transform: translateX(8px);
    }

}


/* ==========================================================
   FAVORITOS — FILTRO LETRAS / CIFRAS
========================================================== */

.favorites-type-switch {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 22px;
}

.favorites-header h1 {
    display: flex;
    align-items: center;
    gap: 9px;
}

.favorites-title-heart {
    color: #f59e0b;
    font-size: .72em;
    line-height: 1;
    transform: translateY(-1px);
}

@media (min-width: 701px) {

    .favorites-type-switch {
        max-width: 100%;
    }

}

@media (max-width: 700px) {

    .favorites-type-switch {
        width: 100%;
        margin: 0 0 18px;
    }

}

/* ==========================================================
   CANARINHO — FAVORITOS
========================================================== */

.favorites-page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 52px 20px 80px;
    box-sizing: border-box;
}

.favorites-header {
    margin-bottom: 30px;
}

.favorites-header h1 {
    margin: 0 0 8px;
    color: var(--cg-text);
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.favorites-header p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
}

.favorites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favorite-item {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 72px;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 14px;
    background: rgba(15, 23, 42, .42);
    overflow: hidden;
}

.favorite-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    color: inherit;
    text-decoration: none;
}

.favorite-item-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.favorite-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cg-text);
    font-size: 16px;
    font-weight: 650;
}

.favorite-item-artist {
    color: #8490a3;
    font-size: 14px;
}

.favorite-item-type {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 10px;
    color: #aeb8c9;
    font-size: 12px;
    font-weight: 600;
}

.favorite-item-remove {
    flex: 0 0 52px;
    border: 0;
    border-left: 1px solid rgba(148, 163, 184, .10);
    background: transparent;
    color: #8490a3;
    font-size: 24px;
    cursor: pointer;
    transition:
        color .18s ease,
        background .18s ease;
}

.favorite-item-remove:hover {
    color: #f87171;
    background: rgba(248, 113, 113, .05);
}

.favorites-empty {
    padding: 64px 24px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 18px;
    text-align: center;
    background: rgba(15, 23, 42, .30);
}

.favorites-empty-icon {
    margin-bottom: 12px;
    color: #94a3b8;
    font-size: 44px;
    line-height: 1;
}

.favorites-empty h2 {
    margin: 0 0 8px;
    color: var(--cg-text);
    font-size: 20px;
}

.favorites-empty p {
    max-width: 440px;
    margin: 0 auto 22px;
    color: #8490a3;
    font-size: 14px;
    line-height: 1.6;
}

.favorites-empty-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 11px;
    color: var(--cg-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
}

@media (max-width: 700px) {

    .favorites-page {
        padding: 36px 16px 60px;
    }

    .favorites-header {
        margin-bottom: 22px;
    }

    .favorites-header h1 {
        font-size: 26px;
    }

    .favorites-header p {
        font-size: 14px;
    }

    .favorite-item {
        min-height: 68px;
        border-radius: 13px;
    }

    .favorite-item-main {
        gap: 10px;
        padding: 12px 13px;
    }

    .favorite-item-title {
        font-size: 15px;
    }

    .favorite-item-artist {
        font-size: 13px;
    }

    .favorite-item-type {
        padding: 5px 8px;
        font-size: 11px;
    }

    .favorite-item-remove {
        flex-basis: 46px;
    }

    .favorites-empty {
        padding: 52px 18px;
    }

}

html[data-theme="light"] .favorite-item {
    background: #ffffff;
    border-color: rgba(15, 23, 42, .09);
}

html[data-theme="light"] .favorite-item-title {
    color: #172033;
}

html[data-theme="light"] .favorite-item-artist {
    color: #7a8799;
}

html[data-theme="light"] .favorite-item-type {
    color: #64748b;
    border-color: rgba(15, 23, 42, .10);
}

html[data-theme="light"] .favorites-empty {
    background: #ffffff;
    border-color: rgba(15, 23, 42, .09);
}


/* Controle da seção de artistas já cadastrados */
.admin-import-existing-artists > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 0 22px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    color: #f5a400;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.admin-import-existing-artists > summary::-webkit-details-marker {
    display: none;
}

.admin-import-existing-artists > summary::after {
    content: "›";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(245, 164, 0, 0.28);
    border-radius: 8px;
    color: #f5a400;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.admin-import-existing-artists > summary:hover {
    background: rgba(245, 164, 0, 0.05);
}

.admin-import-existing-artists > summary:hover::after {
    background: rgba(245, 164, 0, 0.10);
}

.admin-import-existing-artists[open] > summary::after {
    transform: rotate(90deg);
}

@media (max-width: 620px) {

    .admin-import-type-card {
        min-height: 0;
        padding: 20px;
    }

    .admin-import-inline-form {
        margin-top: 22px;
        padding-top: 20px;
    }

    .admin-import-artist-dry-run-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .admin-import-existing-artists > summary {
        min-height: 56px;
        padding: 0 18px;
        font-size: 14px;
    }
}

/* =========================================================
   BASE — PÁGINA INDIVIDUAL DE IMPORTAÇÃO
   ========================================================= */

body.admin-import-page {
    margin: 0;
    min-height: 100vh;

    background: #0b1224;
    color: #f8fafc;
}

.admin-import-page {
    min-height: 100vh;
}

.admin-import-main {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 60px;
}

.admin-import-back {
    display: inline-flex;
    align-items: center;

    margin-bottom: 20px;

    color: #94a3b8;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.admin-import-back:hover {
    color: #f5a400;
    transform: translateX(-2px);
}

.admin-import-card {
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #111c33,
            #0d172b
        );

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    overflow: hidden;
}

.admin-import-card-header {
    padding: 30px 24px 24px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

.admin-import-eyebrow {
    margin: 0 0 10px;

    color: #f5a400;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
}

.admin-import-title {
    margin: 0;

    color: #f8fafc;

    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.admin-import-description {
    max-width: 680px;

    margin: 12px 0 0;

    color: #94a3b8;

    font-size: 14px;
    line-height: 1.6;
}


/* Mobile */

@media (max-width: 620px) {

    .admin-import-main {
        width: 100%;
        padding: 18px 0 40px;
    }

    .admin-import-back {
        margin: 0 18px 18px;
        font-size: 13px;
    }

    .admin-import-card {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .admin-import-card-header {
        padding: 24px 18px 22px;
    }

    .admin-import-eyebrow {
        margin-bottom: 9px;
        font-size: 10px;
    }

    .admin-import-title {
        font-size: 31px;
    }

    .admin-import-description {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.55;
    }

}


/* =========================================================
   IMPORTAÇÃO INDIVIDUAL DE ARTISTA
   ========================================================= */

.admin-import-artist-page {
    overflow: hidden;
}

.admin-import-artist-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 24px 24px;
}

.admin-import-artist-stat {
    min-height: 82px;
    padding: 16px 18px;

    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 12px;

    background: rgba(15, 23, 42, 0.52);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.admin-import-artist-stat {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.admin-import-artist-stat:hover {
    text-decoration: none;
}

.admin-import-artist-stat strong {
    color: #f5a400;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

.admin-import-artist-stat span {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}


/* Conteúdo */

.admin-import-artist-content {
    padding: 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
}

.admin-import-section-label {
    margin: 0 0 14px;

    color: #cbd5e1;
    font-size: 13px;
    font-weight: 800;
}


/* Letras / Cifras */

.admin-import-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-import-type-card {
    appearance: none;

    width: 100%;
    min-height: 190px;
    padding: 24px;

    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 39, 68, 0.98),
            rgba(13, 23, 43, 0.98)
        );

    color: #f8fafc;
    text-align: left;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.admin-import-type-card:hover {
    transform: translateY(-2px);

    border-color: rgba(245, 164, 0, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(30, 47, 81, 0.99),
            rgba(15, 27, 50, 0.99)
        );

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.admin-import-type-card:active {
    transform: translateY(0);
}

.admin-import-type-icon {
    margin-bottom: 16px;

    font-size: 30px;
    line-height: 1;
}

.admin-import-type-title {
    color: #f5a400;

    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.admin-import-type-count {
    margin-top: 5px;

    color: #64748b;

    font-size: 12px;
    font-weight: 700;
}

.admin-import-type-description {
    margin-top: 12px;

    color: #94a3b8;

    font-size: 13px;
    line-height: 1.5;
}

.admin-import-type-action {
    margin-top: auto;
    padding-top: 18px;

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 800;
}


/* Formulário interno de importação */

.admin-import-type-card {
    position: relative;
    overflow: hidden;
}

.admin-import-type-card.is-open {
    cursor: default;
}

.admin-import-type-card.is-open:hover {
    transform: none;
}

.admin-import-inline-form {
    width: 100%;
    margin-top: 24px;
    padding-top: 22px;

    border-top: 1px solid rgba(148, 163, 184, 0.12);

    cursor: default;
}

.admin-import-artist-upload-form {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-import-artist-file-field {
    width: 100%;
}

.admin-import-artist-file-label {
    display: block;

    margin-bottom: 9px;

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.admin-import-artist-file-field input[type="file"] {
    display: block;

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

    padding: 12px;

    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 11px;

    background: rgba(7, 15, 29, 0.55);
    color: #cbd5e1;

    font-size: 12px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-import-artist-file-field input[type="file"]:hover {
    border-color: rgba(245, 164, 0, 0.42);
    background: rgba(7, 15, 29, 0.72);
}

.admin-import-artist-file-field input[type="file"]:focus {
    outline: none;

    border-color: rgba(245, 164, 0, 0.62);

    box-shadow:
        0 0 0 3px rgba(245, 164, 0, 0.08);
}

.admin-import-artist-file-field input[type="file"]::file-selector-button {
    margin-right: 10px;

    padding: 8px 12px;

    border: 1px solid rgba(245, 164, 0, 0.30);
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(245, 164, 0, 0.13),
            rgba(245, 164, 0, 0.06)
        );

    color: #f5a400;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.admin-import-artist-file-help {
    display: block;

    margin-top: 8px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.45;
}

.admin-import-artist-file-list {
    width: 100%;

    margin-top: 12px;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-import-artist-file-count {
    margin-bottom: 3px;

    color: #f5a400;

    font-size: 11px;
    font-weight: 800;
}

.admin-import-artist-file-item {
    width: 100%;
    box-sizing: border-box;

    padding: 8px 10px;

    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 8px;

    background: rgba(7, 15, 29, 0.42);

    color: #94a3b8;

    font-size: 11px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-import-artist-simulate {
    appearance: none;

    width: 100%;

    min-height: 44px;
    padding: 11px 16px;

    border: 1px solid rgba(245, 164, 0, 0.48);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #f5a400,
            #d98d00
        );

    color: #101827;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.admin-import-artist-simulate:hover {
    transform: translateY(-1px);

    filter: brightness(1.04);

    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.admin-import-artist-simulate:active {
    transform: translateY(0);

    box-shadow:
        0 5px 13px rgba(0, 0, 0, 0.20);
}

.admin-import-artist-dry-run-result {
    width: 100%;
    box-sizing: border-box;

    margin-top: 18px;
    padding: 15px;

    border: 1px solid rgba(245, 164, 0, 0.18);
    border-radius: 11px;

    background: rgba(245, 164, 0, 0.035);
}

.admin-import-artist-dry-run-result > strong {
    display: block;

    margin-bottom: 12px;

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 800;
}

.admin-import-artist-dry-run-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-import-artist-dry-run-stats span {
    padding: 9px;

    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 8px;

    background: rgba(7, 15, 29, 0.38);

    color: #64748b;

    font-size: 10px;
}

.admin-import-artist-dry-run-stats b {
    color: #f5a400;
    font-size: 12px;
}

/* Confirmação da importação */

.admin-import-artist-confirm-form {
    width: 100%;
    margin-top: 12px;
}

.admin-import-artist-confirm {
    appearance: none;

    width: 100%;
    min-height: 46px;
    padding: 12px 16px;

    border: 1px solid rgba(245, 164, 0, 0.55);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #f5a400,
            #d98d00
        );

    color: #101827;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.admin-import-artist-confirm:hover {
    transform: translateY(-1px);

    filter: brightness(1.04);

    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.admin-import-artist-confirm:active {
    transform: translateY(0);

    box-shadow:
        0 5px 13px rgba(0, 0, 0, 0.20);
}

/* Link da importação individual */

.admin-import-artist-info {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.admin-import-artist-info:hover .admin-import-artist-name {
    color: #f5a400;
}


/* Mobile */

@media (max-width: 620px) {

    .admin-import-artist-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 0 18px 18px;
    }

    .admin-import-artist-stat {
        min-height: 70px;
        padding: 12px 10px;
    }

    .admin-import-artist-stat strong {
        font-size: 17px;
    }

    .admin-import-artist-stat span {
        font-size: 10px;
        line-height: 1.3;
    }

    .admin-import-artist-content {
        padding: 18px;
    }

    .admin-import-type-grid {
        grid-template-columns: 1fr;
    }

    .admin-import-type-card {
        min-height: 165px;
        padding: 20px;
    }

}


/* =========================================================
   GERENCIAMENTO DE CONTEÚDO DO ARTISTA
   ========================================================= */

.admin-song-manager {
    overflow: hidden;
}

.admin-song-manager-content {
    padding: 24px;
}

.admin-song-manager-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.admin-song-manager-label {
    margin: 0 0 5px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 800;
}

.admin-song-manager-count {
    margin: 0;
    color: #f5a400;
    font-size: 12px;
    font-weight: 800;
}

.admin-song-toolbar-actions {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.admin-song-update-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 10px 16px;

    border: 1px solid rgba(245, 164, 0, 0.48);
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #f5a400,
        #d98d00
    );

    color: #101827;

    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;

    white-space: nowrap;
    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.admin-song-update-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);

    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.admin-song-update-button:active {
    transform: translateY(0);
}

.admin-song-search {
    width: min(420px, 100%);
}

.admin-song-search > label {
    display: block;
    margin-bottom: 8px;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 800;
}

.admin-song-search-row {
    display: flex;
    gap: 8px;
}

.admin-song-search input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 11px 13px;

    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;

    background: rgba(7, 15, 29, 0.55);
    color: #f8fafc;

    font-family: inherit;
    font-size: 12px;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-song-search input::placeholder {
    color: #64748b;
}

.admin-song-search input:hover {
    border-color: rgba(245, 164, 0, 0.38);
    background: rgba(7, 15, 29, 0.70);
}

.admin-song-search input:focus {
    outline: none;
    border-color: rgba(245, 164, 0, 0.62);
    box-shadow: 0 0 0 3px rgba(245, 164, 0, 0.08);
}

.admin-song-search button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 16px;

    border: 1px solid rgba(245, 164, 0, 0.48);
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #f5a400,
        #d98d00
    );

    color: #101827;

    font-family: inherit;
    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.admin-song-search button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);

    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.admin-song-search button:active {
    transform: translateY(0);
}

.admin-song-list {
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    overflow: hidden;

    background: rgba(7, 15, 29, 0.30);
}

.admin-song-item {
    display: flex;
    align-items: center;

    min-height: 62px;
    padding: 13px 16px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.08);

    background: rgba(15, 23, 42, 0.34);

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.admin-song-item:last-child {
    border-bottom: 0;
}

.admin-song-item:hover {
    background: rgba(25, 39, 68, 0.58);
}

.admin-song-item-main {
    min-width: 0;
    width: 100%;
}

.admin-song-item-main h2 {
    margin: 0;

    color: #f1f5f9;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.admin-song-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 180px;
    padding: 30px;

    border: 1px dashed rgba(148, 163, 184, 0.16);
    border-radius: 14px;

    background: rgba(7, 15, 29, 0.24);

    text-align: center;
}

.admin-song-empty strong {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 800;
}

.admin-song-empty span {
    max-width: 500px;
    margin-top: 7px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.5;
}

.admin-song-pagination {
    display: flex;
    justify-content: center;

    margin-top: 22px;
}

.admin-song-pagination nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.admin-song-pagination svg {
    width: 16px;
    height: 16px;
}

.admin-song-pagination a,
.admin-song-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 9px;

    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 9px;

    background: rgba(15, 23, 42, 0.55);
    color: #94a3b8;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.admin-song-pagination a:hover {
    border-color: rgba(245, 164, 0, 0.45);
    color: #f5a400;
    background: rgba(245, 164, 0, 0.06);
}

.admin-song-pagination span[aria-current="page"] {
    border-color: rgba(245, 164, 0, 0.48);
    background: rgba(245, 164, 0, 0.12);
    color: #f5a400;
}

/* Mobile */

@media (max-width: 620px) {

    .admin-song-manager-content {
        padding: 18px;
    }

    .admin-song-manager-toolbar {
        display: block;
        margin-bottom: 18px;
    }

    .admin-song-manager-label {
        font-size: 12px;
    }

    .admin-song-manager-count {
        margin-bottom: 18px;
    }

    .admin-song-toolbar-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .admin-song-update-button {
        width: 100%;
        box-sizing: border-box;
    }

    .admin-song-search {
        width: 100%;
    }

    .admin-song-search-row {
        gap: 7px;
    }

    .admin-song-search input {
        font-size: 12px;
    }

    .admin-song-search button {
        padding-left: 14px;
        padding-right: 14px;
    }

    .admin-song-item {
        min-height: 58px;
        padding: 12px 14px;
    }

    .admin-song-item-main h2 {
        font-size: 13px;
        line-height: 1.5;
    }

    .admin-song-pagination {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 3px;
    }

    .admin-song-pagination nav {
        margin: 0 auto;
    }
}


/* =========================================================
   SELEÇÃO DE MÚSICAS — GERENCIAMENTO
   ========================================================= */

.admin-song-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 10px;
    padding: 11px 14px;

    border: 1px solid rgba(148, 163, 184, 0.11);
    border-radius: 11px;

    background: rgba(7, 15, 29, 0.32);
}

.admin-song-select-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
    user-select: none;
}

.admin-song-select-all input,
.admin-song-checkbox {
    appearance: none;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    margin: 0;

    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 5px;

    background: rgba(7, 15, 29, 0.65);

    cursor: pointer;

    position: relative;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.admin-song-select-all input:hover,
.admin-song-checkbox:hover {
    border-color: rgba(245, 164, 0, 0.55);
}

.admin-song-select-all input:checked,
.admin-song-checkbox:checked {
    border-color: #f5a400;
    background: #f5a400;
}

.admin-song-select-all input:checked::after,
.admin-song-checkbox:checked::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 2px;

    width: 5px;
    height: 9px;

    border: solid #101827;
    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}

.admin-song-select-all input:indeterminate {
    border-color: #f5a400;
    background: rgba(245, 164, 0, 0.16);
}

.admin-song-select-all input:indeterminate::after {
    content: "";

    position: absolute;

    left: 4px;
    top: 7px;

    width: 8px;
    height: 2px;

    border-radius: 2px;

    background: #f5a400;
}

.admin-song-selected-count {
    color: #64748b;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}

.admin-song-item {
    cursor: pointer;
    text-decoration: none;
}

.admin-song-item > .admin-song-checkbox {
    margin-right: 13px;
}

.admin-song-item-main {
    display: block;
}

.admin-song-item-title {
    display: block;

    color: #e2e8f0;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

.admin-song-item:hover .admin-song-item-title {
    color: #f8fafc;
}

/* =========================================================
   EXCLUSÃO INDIVIDUAL — GERENCIAMENTO DE MÚSICAS
   ========================================================= */

.admin-song-item-main {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    cursor: pointer;
}

.admin-song-item-main .admin-song-checkbox {
    flex: 0 0 18px;
}

.admin-song-delete-form {
    flex: 0 0 auto;
    margin-left: 16px;
}

.admin-song-delete-button {
    appearance: none;

    min-height: 36px;
    padding: 7px 12px;

    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 8px;

    background: rgba(127, 29, 29, 0.16);
    color: #fca5a5;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.admin-song-delete-button:hover {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(127, 29, 29, 0.30);
    color: #fecaca;
    transform: translateY(-1px);
}

.admin-song-delete-button:active {
    transform: translateY(0);
}

.admin-song-delete-button:focus-visible {
    outline: none;
    border-color: rgba(239, 68, 68, 0.65);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}


/* =========================================================
   MOBILE — EXCLUSÃO INDIVIDUAL
   ========================================================= */

@media (max-width: 620px) {

    .admin-song-item-main {
        gap: 11px;
    }

    .admin-song-item-main .admin-song-checkbox {
        flex-basis: 19px;
    }

    .admin-song-delete-form {
        margin-left: 10px;
    }

    .admin-song-delete-button {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 10px;
    }

}

/* =========================================================
   MOBILE — SELEÇÃO DE MÚSICAS
   ========================================================= */

@media (max-width: 620px) {

    .admin-song-selection-bar {
        margin-bottom: 8px;
        padding: 10px 12px;
    }

    .admin-song-select-all {
        gap: 8px;
        font-size: 11px;
    }

    .admin-song-select-all input,
    .admin-song-checkbox {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }

    .admin-song-select-all input:checked::after,
    .admin-song-checkbox:checked::after {
        left: 5px;
        top: 2px;
    }

    .admin-song-item > .admin-song-checkbox {
        margin-right: 11px;
    }

    .admin-song-item-title {
        font-size: 13px;
        line-height: 1.5;
    }

    .admin-song-selected-count {
        font-size: 10px;
    }
}


/* =========================================================
   LISTAGEM VERTICAL — GERENCIAMENTO DE MÚSICAS
   ========================================================= */

.admin-song-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.admin-song-item {
    display: flex !important;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.admin-song-item-main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.admin-song-item-title {
    display: block;
    width: 100%;
}

/* Evita que estilos globais de label/span alterem a estrutura */
.admin-song-item > .admin-song-checkbox {
    display: block;
    flex: 0 0 19px;
}

/* Barra de seleção */
.admin-song-selection-bar {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   CORREÇÃO — CADA MÚSICA EM UMA LINHA
   ========================================================= */

.admin-song-list {
    display: block !important;
    width: 100%;
}

.admin-song-list > .admin-song-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;

    width: 100% !important;
    min-width: 100%;

    box-sizing: border-box;
}

.admin-song-list > .admin-song-item + .admin-song-item {
    border-top: 0;
}

.admin-song-list > .admin-song-item .admin-song-item-main {
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}


/* =========================================================
   CORREÇÃO FINAL — CHECKBOX + TÍTULO + EXCLUSÃO
   ========================================================= */

.admin-song-list > .admin-song-item .admin-song-item-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 13px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.admin-song-list > .admin-song-item .admin-song-item-main .admin-song-checkbox {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.admin-song-list > .admin-song-item .admin-song-item-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

@media (max-width: 620px) {

    .admin-song-list > .admin-song-item .admin-song-item-main {
        gap: 11px;
    }

    .admin-song-list > .admin-song-item .admin-song-item-main .admin-song-checkbox {
        flex-basis: 19px;
        width: 19px;
        height: 19px;
    }

}


/* =========================================================
   EXCLUSÃO EM MASSA — GERENCIAMENTO DE MÚSICAS
   ========================================================= */

.admin-song-bulk-delete-button {
    appearance: none;

    min-height: 36px;
    padding: 7px 13px;

    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 8px;

    background: rgba(127, 29, 29, 0.16);
    color: #fca5a5;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.admin-song-bulk-delete-button:hover:not(:disabled) {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(127, 29, 29, 0.30);
    color: #fecaca;
    transform: translateY(-1px);
}

.admin-song-bulk-delete-button:active:not(:disabled) {
    transform: translateY(0);
}

.admin-song-bulk-delete-button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
}

.admin-song-bulk-delete-button:focus-visible {
    outline: none;
    border-color: rgba(239, 68, 68, 0.65);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}

@media (max-width: 620px) {

    .admin-song-bulk-delete-button {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 10px;
    }

}


/* ==========================================================
   GERENCIAMENTO DE IMAGEM DO ARTISTA
   ========================================================== */

.admin-artist-photo-upload-button {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 15px;

    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 8px;

    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.admin-artist-photo-upload-button:hover {
    border-color: rgba(245, 158, 11, 0.70);
    background: rgba(245, 158, 11, 0.20);
    color: #fcd34d;

    transform: translateY(-1px);
}

.admin-artist-photo-upload-button:active {
    transform: translateY(0);
}

.admin-artist-photo-upload-button:focus-visible {
    outline: none;
    border-color: rgba(245, 158, 11, 0.80);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}


/* ==========================================================
   ZONA DE PERIGO — EXCLUSÃO DO ARTISTA
   ========================================================== */

.admin-import-artist-danger-zone {
    margin-top: 34px;
    padding: 22px;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 12px;
    background: rgba(127, 29, 29, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.admin-import-artist-danger-content {
    min-width: 0;
}

.admin-import-artist-danger-content .admin-import-section-label {
    margin-bottom: 8px;
    color: #f87171;
}

.admin-import-artist-danger-content h2 {
    margin: 0 0 7px;
    color: #fca5a5;
    font-size: 17px;
    font-weight: 800;
}

.admin-import-artist-danger-content p {
    margin: 0;
    max-width: 680px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    line-height: 1.65;
}

.admin-import-artist-danger-button {
    appearance: none;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.10);
    color: #fca5a5;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.admin-import-artist-danger-button:hover {
    border-color: rgba(239, 68, 68, 0.70);
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
    transform: translateY(-1px);
}

.admin-import-artist-danger-button:active {
    transform: translateY(0);
}

.admin-import-artist-danger-button:focus-visible {
    outline: none;
    border-color: rgba(239, 68, 68, 0.80);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

@media (max-width: 700px) {
    .admin-import-artist-danger-zone {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-import-artist-danger-button {
        width: 100%;
    }
}

/* =========================================================
   CANARINHO GOSPEL — ROLAGEM AUTOMÁTICA DAS LETRAS
   COMPONENTE INDEPENDENTE DOS CONTROLES DE CIFRAS
   ========================================================= */

.song-lyrics-scroll-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;

    margin: 4px 0 24px;
    padding: 0;

    box-sizing: border-box;
}

.song-lyrics-scroll-button {
    box-sizing: border-box;

    width: 185px;
    min-width: 185px;
    max-width: 185px;

    min-height: 54px;
    height: 54px;

    margin: 0;

    padding: 9px 14px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #ffffff;
    color: #0f172a;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    font: inherit;
    text-align: center;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.song-lyrics-scroll-button:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

.song-lyrics-scroll-button:active {
    transform: translateY(1px);
}

.song-lyrics-scroll-button:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
}

.song-lyrics-scroll-body {
    min-width: 0;

    display: flex;
    align-items: baseline;
    justify-content: center;

    gap: 7px;

    text-align: center;
}

.song-lyrics-scroll-label {
    color: #64748b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .08em;
    line-height: 1.2;

    text-transform: uppercase;
    white-space: nowrap;
}

.song-lyrics-scroll-arrow {
    color: #0f172a;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;
}

.song-lyrics-scroll-button:hover .song-lyrics-scroll-arrow {
    color: #334155;
}

/* Tema escuro */

html[data-theme="dark"] .song-lyrics-scroll-button {
    border-color: rgba(148, 163, 184, .16);
    background: #111c30;
    color: #f8fafc;
}

html[data-theme="dark"] .song-lyrics-scroll-button:hover {
    border-color: rgba(148, 163, 184, .28);
    background: #172238;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .song-lyrics-scroll-label {
    color: #94a3b8;
}

html[data-theme="dark"] .song-lyrics-scroll-arrow {
    color: #f8fafc;
}

html[data-theme="dark"] .song-lyrics-scroll-button:hover .song-lyrics-scroll-arrow {
    color: #e2e8f0;
}

/* Mobile */

@media (min-width: 701px) {

    .song-lyrics-scroll-button {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

}

/* Mobile */

@media (max-width: 700px) {

    .song-lyrics-scroll-actions {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        margin: 4px 0 20px;
        padding: 0;
    }

    .song-lyrics-scroll-button {
        width: 100%;
        min-width: 0;
        max-width: none;

        height: 40px;
        min-height: 40px;

        padding: 6px 8px;
        border-radius: 9px;
    }

    .song-lyrics-scroll-body {
        gap: 5px;
    }

    .song-lyrics-scroll-label {
        font-size: 10px;
        letter-spacing: .06em;
    }

    .song-lyrics-scroll-arrow {
        font-size: 14px;
    }

}

/* =========================================================
   CANARINHO GOSPEL — CARD DO YOUTUBE NO MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .song-youtube-mobile-wrap {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0 0 20px;
        padding: 0;

        box-sizing: border-box;

        background: #111c31;

        border: 1px solid rgba(148, 163, 184, .12);
        border-radius: 12px;

        overflow: hidden;

        box-shadow:
            0 4px 14px rgba(0, 0, 0, .10);
    }

    .song-youtube-mobile-wrap .song-youtube-player {
        width: 100%;
        max-width: none;

        margin: 0;

        border-radius: 0;

        box-shadow: none;
    }

    /*
     * Área de controles compacta.
     * O objetivo é parecer uma continuação natural
     * do próprio player.
     */
    .song-youtube-mobile-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;

        width: 100%;

        margin: 0;
        padding: 8px 9px 9px;

        box-sizing: border-box;

        background: #111c31;
    }

    .song-youtube-mobile-button {
        box-sizing: border-box;

        width: 100%;
        min-height: 38px;

        margin: 0;
        padding: 5px 10px;

        border: 1px solid rgba(203, 213, 225, .58);
        border-radius: 999px;

        background: transparent;
        color: #f8fafc;

        display: flex;
        align-items: center;
        justify-content: center;

        font: inherit;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .01em;

        cursor: pointer;

        transition:
            border-color .18s ease,
            background-color .18s ease,
            transform .18s ease;
    }

    .song-youtube-mobile-button:hover {
        border-color: rgba(248, 250, 252, .82);
        background: rgba(255, 255, 255, .035);
    }

    .song-youtube-mobile-button:active {
        transform: translateY(1px);
    }

    .song-youtube-mobile-button:focus-visible {
        outline: 2px solid #94a3b8;
        outline-offset: 2px;
    }

    .song-youtube-mobile-wrap:not(.is-open) {
        display: none;
    }

    /*
     * Mantém o card acompanhando a leitura quando fixado.
     */
    .song-youtube-mobile-wrap.is-pinned {
        position: sticky;
        top: 10px;
        z-index: 50;

        box-shadow:
            0 6px 18px rgba(0, 0, 0, .16);
    }

    .song-youtube-mobile-wrap.is-pinned
    .song-youtube-mobile-actions {
        max-height: 61px;

        padding-top: 8px;
        padding-bottom: 9px;

        opacity: 1;
        overflow: hidden;

        transition:
            max-height .22s ease,
            padding-top .22s ease,
            padding-bottom .22s ease,
            opacity .18s ease;
    }

    .song-youtube-mobile-wrap.is-pinned.controls-hidden
    .song-youtube-mobile-actions {
        max-height: 0;

        padding-top: 0;
        padding-bottom: 0;

        opacity: 0;

        pointer-events: none;
    }


    .song-youtube-mobile-wrap.is-pinned
    .song-youtube-player {
        box-shadow: none;
    }

    /*
     * Camada de toque usada quando os controles do vídeo
     * fixado estiverem ocultos.
     */
    .song-youtube-mobile-controls-overlay {
        position: absolute;

        inset: 0;

        z-index: 60;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        background: transparent;

        cursor: pointer;

        touch-action: manipulation;
    }

    /*
     * Tema claro.
     */
    html:not([data-theme="dark"]) .song-youtube-mobile-wrap {
        background: #f8fafc;

        border-color: rgba(15, 23, 42, .08);

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .08);
    }

    html:not([data-theme="dark"])
    .song-youtube-mobile-actions {
        background: #f8fafc;
    }

    html:not([data-theme="dark"])
    .song-youtube-mobile-button {
        border-color: rgba(71, 85, 105, .48);
        color: #0f172a;
    }

    html:not([data-theme="dark"])
    .song-youtube-mobile-button:hover {
        border-color: rgba(15, 23, 42, .68);
        background: rgba(15, 23, 42, .025);
    }

}


/* =========================================================
   CATEGORIAS — CONTEÚDO EDITORIAL
   ========================================================= */

.admin-category-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.admin-category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 18px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.admin-category-item:last-child {
    border-bottom: 0;
}

.admin-category-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-category-item-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.admin-category-item-meta {
    margin: 5px 0 0;
    font-size: 13px;
    opacity: .65;
    line-height: 1.4;
}

.admin-category-item-actions {
    flex: 0 0 auto;
}

.admin-category-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(245, 164, 0, .38);
    border-radius: 9px;
    background: rgba(245, 164, 0, .08);
    color: #f5a400;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.admin-category-action-button:hover {
    background: rgba(245, 164, 0, .14);
    border-color: rgba(245, 164, 0, .58);
    transform: translateY(-1px);
}

.admin-category-action-button:active {
    transform: translateY(0);
}

@media (max-width: 620px) {

    .admin-category-item {
        gap: 12px;
    }

    .admin-category-item-title {
        font-size: 15px;
    }

    .admin-category-action-button {
        min-height: 36px;
        padding: 8px 12px;
    }

}

/* =========================================
   CANARINHO GOSPEL — ARTIGOS
========================================= */

.article-page {
    padding: 42px 0 64px;
}

.article-page .artist-back {
    margin-bottom: 28px;
}

.article-card {
    width: 780px;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;

}

.article-header {
    margin-bottom: 34px;
}

.article-header .eyebrow {
    margin-bottom: 14px;
}

.article-title {
    max-width: 820px;
    margin: 0;

    color: var(--cg-text);

    font-size: clamp(36px, 6vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.article-excerpt {
    max-width: 820px;

    margin: 20px 0 0;

    color: var(--cg-text-soft);

    font-size: clamp(18px, 2.5vw, 22px);
    line-height: 1.6;
}

.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 18px;

    color: var(--cg-text-muted);

    font-size: 14px;
    font-weight: 600;
}

.article-featured-image {
    margin: 0 0 38px;
    overflow: hidden;

    border-radius: var(--cg-radius-xl);
    border: 1px solid var(--cg-border);

    background: var(--cg-surface);

    box-shadow: var(--cg-shadow-md);
}

.article-featured-image img {
    width: 100%;
    height: auto;
}

.article-content {
    color: var(--cg-text-soft);

    font-size: 18px;
    line-height: 1.85;
}

.article-content p {
    margin: 0 0 24px;
}

.article-content h2 {
    margin: 44px 0 18px;

    color: var(--cg-text);

    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.2;
    letter-spacing: -.025em;
}

.article-content h3 {
    margin: 34px 0 14px;

    color: var(--cg-text);

    font-size: clamp(21px, 3vw, 27px);
    line-height: 1.3;
}

.article-content strong,
.article-content b {
    color: var(--cg-text);
    font-weight: 800;
}

.article-content a {
    color: var(--cg-gold-dark);
    font-weight: 700;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition: color var(--cg-transition);
}

.article-content a:hover {
    color: var(--cg-gold);
}

.article-content ul,
.article-content ol {
    margin: 0 0 24px;
    padding-left: 28px;
}

.article-content li {
    margin-bottom: 8px;
}

.article-content blockquote {
    margin: 32px 0;
    padding: 18px 22px;

    color: var(--cg-text-soft);

    background: var(--cg-surface-soft);

    border-left: 4px solid var(--cg-gold);

    border-radius: 0 var(--cg-radius-md) var(--cg-radius-md) 0;
}

@

    .article-page .artist-back {
        margin-bottom: 26px;
    }

    .article-title {
        font-size: clamp(34px, 10vw, 46px);
    }

    .article-excerpt {
        margin-top: 16px;

        font-size: 18px;
        line-height: 1.55;
    }

    .article-meta {
        margin-top: 16px;

        font-size: 13px;
    }

    .article-featured-image {
        margin-bottom: 30px;

        border-radius: var(--cg-radius-lg);
    }

    .article-content {
        font-size: 17px;
        line-height: 1.8;
    }

    .article-content p {
        margin-bottom: 22px;
    }

    .article-content h2 {
        margin-top: 38px;
    }

    .article-content blockquote {
        margin: 28px 0;
        padding: 16px 18px;
    }
}

/* =========================================
   CANARINHO GOSPEL — ÍNDICE DE ARTIGOS
========================================= */

.articles-index-page {
    padding: 42px 0 64px;
}

.articles-index-header {
    max-width: 820px;
    margin-bottom: 34px;
}

.articles-index-header .eyebrow {
    margin-bottom: 14px;
}

.articles-index-title {
    margin: 0;
    color: var(--cg-text);
    font-size: clamp(38px, 6vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.articles-index-description {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--cg-text-soft);
    font-size: clamp(17px, 2.4vw, 20px);
    line-height: 1.65;
}

.articles-category-scroll {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.articles-category-scroll::before,
.articles-category-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 8px;

    width: 42px;

    z-index: 3;
    pointer-events: none;

    opacity: 0;
    transition: opacity .2s ease;
}

.articles-category-scroll::before {
    left: 0;

    background: linear-gradient(
        to right,
        var(--cg-background),
        transparent
    );
}

.articles-category-scroll::after {
    right: 0;

    background: linear-gradient(
        to left,
        var(--cg-background),
        transparent
    );
}

.articles-category-scroll.has-scroll-left::before {
    opacity: 1;
}

.articles-category-scroll.has-scroll-right::after {
    opacity: 1;
}


.articles-category-nav {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 34px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 2px 2px 8px;

    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;

    -ms-overflow-style: none;

    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
}

.articles-category-nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;

    background: transparent !important;
}

.articles-category-nav::-webkit-scrollbar-track,
.articles-category-nav::-webkit-scrollbar-thumb {
    width: 0 !important;
    height: 0 !important;

    background: transparent !important;
    border: none !important;
}

.articles-category-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 15px;
    border: 1px solid var(--cg-border);
    border-radius: 999px;
    background: var(--cg-background);
    color: var(--cg-text-soft);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        color var(--cg-transition),
        background var(--cg-transition),
        border-color var(--cg-transition),
        transform var(--cg-transition);
}

.articles-category-link:hover {
    color: var(--cg-text);
    border-color: rgba(245, 158, 11, .45);
    transform: translateY(-1px);
}

.articles-category-link.is-active {
    border-color: var(--cg-category-all);
    background: var(--cg-category-all);
    color: #111827;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.article-list-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-xl);
    background: var(--cg-surface);
    box-shadow: var(--cg-shadow-sm);
    transition:
        transform var(--cg-transition),
        box-shadow var(--cg-transition),
        border-color var(--cg-transition);
}

.article-list-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 158, 11, .32);
    box-shadow: var(--cg-shadow-md);
}

.article-list-card-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--cg-surface-soft);
}

.article-list-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}

.article-list-card:hover .article-list-card-image img {
    transform: scale(1.025);
}

.article-list-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 22px 24px;
}

.article-list-card-category {
    margin: 0 0 9px;
    color: var(--cg-gold-dark);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.article-list-card-title {
    margin: 0;
    color: var(--cg-text);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.article-list-card-title a {
    color: inherit;
    text-decoration: none;
}

.article-list-card-title a:hover {
    color: var(--cg-gold-dark);
}

.article-list-card-excerpt {
    margin: 13px 0 0;
    color: var(--cg-text-soft);
    font-size: 15px;
    line-height: 1.65;
}

.article-list-card-meta {
    margin-top: auto;
    padding-top: 20px;
    color: var(--cg-text-muted);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 980px) {
    .articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .articles-index-page {
        padding: 30px 0 48px;
    }

    .articles-index-header {
        margin-bottom: 28px;
    }

    .articles-index-title {
        font-size: clamp(36px, 11vw, 48px);
    }

    .articles-index-description {
        margin-top: 15px;
        font-size: 17px;
        line-height: 1.6;
    }

    .articles-category-nav {
        margin-bottom: 26px;
    }

    .articles-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .article-list-card-body {
        padding: 20px 20px 22px;
    }

    .article-list-card-title {
        font-size: 22px;
    }
}


/* =========================================
   CANARINHO GOSPEL — ARTIGOS PREMIUM
========================================= */

.articles-index-page {
    padding: 38px 0 72px;
}

.articles-index-header {
    max-width: 780px;
    margin-bottom: 28px;
}

.articles-index-title {
    font-size: clamp(38px, 5vw, 48px);
    line-height: 1.06;
    letter-spacing: -.045em;
}

.articles-index-description {
    max-width: 680px;
    margin-top: 14px;
    font-size: clamp(17px, 2.2vw, 19px);
    line-height: 1.6;
}

.articles-category-nav {
    gap: 9px;
    margin-bottom: 48px;
    padding: 2px 1px 6px;
}

.articles-category-link {
    min-height: 42px;
    padding: 8px 17px;
    border-color: rgba(148, 163, 184, .18);
    background: var(--cg-background);
    font-size: 13px;
    transition:
        color var(--cg-transition),
        background var(--cg-transition),
        border-color var(--cg-transition),
        transform var(--cg-transition),
        box-shadow var(--cg-transition);
}

.articles-category-link:hover {
    border-color: rgba(245, 158, 11, .38);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.articles-category-link.is-active {
    border-color: var(--cg-category-all);
    background: var(--cg-category-all);
    color: #111827;
    box-shadow: 0 8px 22px rgba(245, 158, 11, .14);
}


/* -----------------------------------------
   CABEÇALHOS DAS SEÇÕES
----------------------------------------- */

.articles-section-heading {
    margin-bottom: 20px;
}

.articles-section-heading .eyebrow {
    margin-bottom: 8px;
}

.articles-section-heading h2 {
    margin: 0;
    color: var(--cg-text);
    font-size: clamp(30px, 3.5vw, 34px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.articles-most-read-section,
.articles-latest-section,
.articles-featured-section {
    margin-top: 0;
}

.articles-most-read-section + .articles-latest-section {
    margin-top: 52px;
}


/* -----------------------------------------
   DESTAQUE
----------------------------------------- */

.articles-featured-section {
    margin-bottom: 52px;
}

.articles-featured-card {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    overflow: hidden;
    border: 1px solid var(--cg-border);
    border-radius: 22px;
    background: var(--cg-surface);
    box-shadow: var(--cg-shadow-md);
    color: inherit;
    text-decoration: none;
    transition:
        transform var(--cg-transition),
        border-color var(--cg-transition),
        box-shadow var(--cg-transition);
}

.articles-featured-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, .28);
    box-shadow: var(--cg-shadow-lg);
}

.articles-featured-image {
    min-height: 300px;
    overflow: hidden;
    background: var(--cg-surface-soft);
}

.articles-featured-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 320ms ease;
}

.articles-featured-card:hover .articles-featured-image img {
    transform: scale(1.025);
}

.articles-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px;
}

.articles-featured-content h3 {
    margin: 0;
    color: var(--cg-text);
    font-size: clamp(27px, 3.5vw, 38px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.articles-featured-excerpt {
    margin: 16px 0 0;
    color: var(--cg-text-soft);
    font-size: 16px;
    line-height: 1.65;
}

.article-list-card-date {
    display: block;
    margin-top: 16px;
    color: var(--cg-text-muted);
    font-size: 12px;
    font-weight: 700;
}


/* -----------------------------------------
   MAIS LIDOS
----------------------------------------- */

.articles-most-read-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.articles-most-read-grid .article-list-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: 14px;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.articles-most-read-grid .article-list-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, .45);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, .12);
}

.articles-most-read-grid .article-list-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.articles-most-read-grid .article-list-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
}

.articles-most-read-grid .article-list-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.articles-most-read-grid .article-list-card:hover .article-list-card-image img {
    transform: scale(1.025);
}

.articles-most-read-grid .article-list-card-body {
    display: flex;
    flex-direction: column;
    padding: 14px 15px 16px;
}

.articles-most-read-grid .article-list-card-category {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 8px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cg-accent);
    background: rgba(245, 158, 11, .10);
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 999px;
}

.articles-most-read-grid .article-list-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--cg-text);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    min-height: calc(1.3em * 3);

    overflow: hidden;
}

.articles-most-read-grid .article-list-card-excerpt {
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cg-muted);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* -----------------------------------------
   ÚLTIMOS ARTIGOS
----------------------------------------- */

.articles-latest-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--cg-border);
}

.articles-latest-item {
    border-bottom: 1px solid var(--cg-border);
}

.articles-latest-link {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 22px 0;
    color: inherit;
    text-decoration: none;
}

.articles-latest-image {
    width: 190px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cg-surface-soft);
}

.articles-latest-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 280ms ease;
}

.articles-latest-link:hover .articles-latest-image img {
    transform: scale(1.025);
}

.articles-latest-content {
    min-width: 0;
}

.articles-latest-content h3 {
    margin: 0;
    color: var(--cg-text);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -.025em;
}

.articles-latest-link:hover .articles-latest-content h3 {
    color: var(--cg-gold-dark);
}

.articles-latest-excerpt {
    max-width: 760px;
    margin: 9px 0 0;
    color: var(--cg-text-soft);
    font-size: 15px;
    line-height: 1.6;
}

.articles-latest-content .article-list-card-category {
    margin-bottom: 8px;
}


/* -----------------------------------------
   DARK MODE — SUPERFÍCIES EDITORIAIS
----------------------------------------- */

html[data-theme="dark"] .articles-category-link:not(.is-active) {
    background: rgba(15, 23, 42, .58);
}

html[data-theme="dark"] .articles-most-read-grid .article-list-card,
html[data-theme="dark"] .articles-featured-card {
    background: #101a2d;
}

html[data-theme="dark"] .articles-latest-list {
    border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .articles-latest-item {
    border-color: rgba(255, 255, 255, .08);
}


/* -----------------------------------------
   RESPONSIVO
----------------------------------------- */

@media (max-width: 1080px) {

    .articles-most-read-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .articles-featured-card {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    }
}

@media (max-width: 700px) {

    .articles-index-page {
        padding: 28px 0 52px;
    }

    .articles-index-header {
        margin-bottom: 24px;
    }

    .articles-index-title {
        font-size: clamp(36px, 10vw, 40px);
    }

    .articles-index-description {
        margin-top: 12px;
        font-size: 17px;
        line-height: 1.58;
    }

    .articles-category-nav {
        margin-bottom: 38px;
    }

    .articles-section-heading {
        margin-bottom: 16px;
    }

    .articles-section-heading h2 {
        font-size: 27px;
    }

    .articles-most-read-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .articles-most-read-grid .article-list-card {
        border-radius: 16px;
    }

    .articles-most-read-grid .article-list-card-body {
        padding: 14px 14px 16px;
    }

    .articles-most-read-grid .article-list-card-category {
        font-size: 10px;
        margin-bottom: 7px;
    }

    .articles-most-read-grid .article-list-card-title {
        font-size: 17px;
        line-height: 1.2;
    }

    .articles-most-read-grid .article-list-card-excerpt {
        font-size: 13px;
        line-height: 1.5;
    }

    .articles-featured-card {
        display: block;
        border-radius: 18px;
    }

    .articles-featured-image {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .articles-featured-content {
        padding: 22px 20px 24px;
    }

    .articles-featured-content h3 {
        font-size: 27px;
    }

    .articles-featured-excerpt {
        font-size: 15px;
        line-height: 1.58;
    }

    .articles-most-read-section + .articles-latest-section {
        margin-top: 42px;
    }

    .articles-latest-link {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 15px;
        padding: 18px 0;
    }

    .articles-latest-image {
        width: 112px;
        border-radius: 11px;
    }

    .articles-latest-content h3 {
        font-size: 18px;
        line-height: 1.22;
    }

    .articles-latest-content .article-list-card-category {
        margin-bottom: 5px;
        font-size: 10px;
    }

    .articles-latest-excerpt {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.45;
    }

    .article-list-card-date {
        margin-top: 10px;
        font-size: 11px;
    }
}


/* =========================================================
   CANARINHO GOSPEL — EDITOR VISUAL DE ARTIGOS
========================================================= */

.article-editor {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.article-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.article-editor-button {
    appearance: none;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #ffffff;
    color: #374151;
    min-height: 34px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.article-editor-button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.article-editor-button:active {
    background: #e5e7eb;
}

.article-editor-button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.article-editor-button-bold {
    font-weight: 800;
}

.article-editor-button-italic {
    font-style: italic;
}

.article-editor-separator {
    width: 1px;
    height: 24px;
    margin: 0 3px;
    background: #d1d5db;
}

.article-editor-content {
    min-height: 420px;
    max-height: 720px;
    overflow-y: auto;
    padding: 22px 24px;
    background: #ffffff;
    color: #111827;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.75;
    outline: none;
}

.article-editor-content:focus {
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .12);
}

.article-editor-content:empty::before {
    content: "Escreva o conteúdo do artigo...";
    color: #9ca3af;
    pointer-events: none;
}

.article-editor-content p {
    margin: 0 0 1.1em;
}

.article-editor-content h2 {
    margin: 1.5em 0 .65em;
    font-size: 1.55em;
    line-height: 1.25;
    font-weight: 700;
}

.article-editor-content h3 {
    margin: 1.35em 0 .55em;
    font-size: 1.25em;
    line-height: 1.3;
    font-weight: 700;
}

.article-editor-content ul,
.article-editor-content ol {
    margin: 0 0 1.1em;
    padding-left: 1.8em;
}

.article-editor-content li {
    margin-bottom: .35em;
}

.article-editor-content blockquote {
    margin: 1.2em 0;
    padding: 12px 18px;
    border-left: 4px solid #d1d5db;
    background: #f9fafb;
    color: #4b5563;
    font-style: italic;
}

.article-editor-content a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-editor-content strong,
.article-editor-content b {
    font-weight: 700;
}

.article-editor-content em,
.article-editor-content i {
    font-style: italic;
}

@media (max-width: 700px) {

    .article-editor-toolbar {
        gap: 5px;
        padding: 8px;
    }

    .article-editor-button {
        min-height: 32px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .article-editor-separator {
        height: 22px;
        margin: 0 1px;
    }

    .article-editor-content {
        min-height: 360px;
        max-height: 600px;
        padding: 18px 16px;
        font-size: 15px;
        line-height: 1.7;
    }

    .article-editor-content h2 {
        font-size: 1.4em;
    }

    .article-editor-content h3 {
        font-size: 1.2em;
    }
}



/* =========================================================
   CANARINHO GOSPEL — MELHORIAS DO EDITOR DE ARTIGOS
   ========================================================= */

/* Área de edição com aparência semelhante aos campos de formulário */
.article-editor-content {
    margin: 0;
    min-height: 520px;
    max-height: 760px;
    overflow-y: auto;

    padding: 18px 20px;

    background: #ffffff;
    color: #111827;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    font-family: inherit;
    font-size: 16px;
    line-height: 1.75;

    outline: none;

    box-sizing: border-box;
}


/* Foco semelhante aos demais campos */
.article-editor-content:focus {
    border-color: #9ca3af;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .10);
}


/* Links visíveis imediatamente dentro do editor */
.article-editor-content a {
    color: #2563eb !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}


/* Link quando o mouse passa por cima */
.article-editor-content a:hover {
    color: #1d4ed8 !important;
}


/* Negrito */
.article-editor-content strong,
.article-editor-content b {
    color: #111827;
    font-weight: 700;
}


/* Itálico */
.article-editor-content em,
.article-editor-content i {
    color: #111827;
    font-style: italic;
}


/* Títulos */
.article-editor-content h2 {
    color: #111827;
    font-weight: 700;
}


.article-editor-content h3 {
    color: #111827;
    font-weight: 700;
}


/* Citação */
.article-editor-content blockquote {
    margin: 1.2em 0;
    padding: 12px 18px;

    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;

    background: #f9fafb;
    color: #4b5563;
}


/* Listas */
.article-editor-content ul,
.article-editor-content ol {
    color: #111827;
}


/* Placeholder */
.article-editor-content:empty::before {
    color: #9ca3af;
}


/* Mobile */
@media (max-width: 700px) {

    .article-editor-content {
        min-height: 440px;
        max-height: 650px;

        padding: 16px;

        border-radius: 8px;

        font-size: 16px;
        line-height: 1.7;
    }

}

/* =========================================================
   CANARINHO GOSPEL — LINKS NO EDITOR DE ARTIGOS
   ========================================================= */

.article-editor-content a,
.article-editor-content a:visited {
    color: #f59e0b !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.article-editor-content a:hover {
    color: #fbbf24 !important;
}


/* =========================================================
   CANARINHO GOSPEL — DESIGN FINAL DO EDITOR DE ARTIGOS
   ========================================================= */

/* Container geral */
.article-editor {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .04),
        0 4px 14px rgba(0, 0, 0, .06);
}

/* Barra de ferramentas */
.article-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 12px;
    border-bottom: 1px solid #dbe1e8;
    background: #f8fafc;
}

/* Botões */
.article-editor-button {
    appearance: none;
    min-width: 38px;
    height: 36px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #cbd5e1;
    border-radius: 7px;

    background: #ffffff;
    color: #1f2937;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .08s ease;
}

.article-editor-button:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #111827;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}

.article-editor-button:active {
    transform: translateY(1px);
    background: #e2e8f0;
}

.article-editor-button:focus-visible {
    outline: 2px solid rgba(245, 158, 11, .45);
    outline-offset: 2px;
}

/* Negrito / itálico */
.article-editor-button-bold {
    font-weight: 800;
    font-size: 14px;
}

.article-editor-button-italic {
    font-style: italic;
    font-weight: 600;
}

/* Separadores */
.article-editor-separator {
    width: 1px;
    height: 24px;
    margin: 0 2px;
    background: #d1d5db;
}

/* Área de edição */
.article-editor-content {
    box-sizing: border-box;

    width: 100%;
    min-height: 520px;
    max-height: 760px;

    overflow-y: auto;

    padding: 18px 26px;

    background: #ffffff;
    color: #111827;

    border: 0;
    outline: none;

    font-family: inherit;
    font-size: 16px;
    line-height: 1.75;

    caret-color: #111827;
}

/* Foco */
.article-editor:focus-within {
    border-color: #94a3b8;
    box-shadow:
        0 0 0 2px rgba(245, 158, 11, .10),
        0 4px 14px rgba(0, 0, 0, .06);
}

/* Links dentro do editor */
.article-editor-content a,
.article-editor-content a:visited {
    color: #f59e0b !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.article-editor-content a:hover {
    color: #d97706 !important;
}

/* Parágrafos */
.article-editor-content p {
    margin: 0 0 1.1em;
}

/* Títulos */
.article-editor-content h2 {
    margin: 1.5em 0 .65em;
    font-size: 1.55em;
    line-height: 1.25;
    font-weight: 700;
}

.article-editor-content h3 {
    margin: 1.35em 0 .55em;
    font-size: 1.25em;
    line-height: 1.3;
    font-weight: 700;
}

/* Listas */
.article-editor-content ul,
.article-editor-content ol {
    margin: 0 0 1.1em;
    padding-left: 1.8em;
}

.article-editor-content li {
    margin-bottom: .35em;
}

/* Citação */
.article-editor-content blockquote {
    margin: 1.2em 0;
    padding: 12px 18px;

    border-left: 4px solid #f59e0b;
    border-radius: 0 10px 10px 0;

    background: #f8fafc;
    color: #475569;

    font-style: italic;
}

/* Negrito / itálico */
.article-editor-content strong,
.article-editor-content b {
    font-weight: 700;
}

.article-editor-content em,
.article-editor-content i {
    font-style: italic;
}

/* Placeholder */
.article-editor-content:empty::before {
    content: "Escreva o conteúdo do artigo...";
    color: #94a3b8;
    pointer-events: none;
}

/* Mobile */
@media (max-width: 700px) {

    .article-editor-toolbar {
        gap: 5px;
        padding: 9px;
    }

    .article-editor-button {
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
    }

    .article-editor-separator {
        height: 22px;
    }

    .article-editor-content {
        min-height: 420px;
        max-height: 620px;
        padding: 18px 16px;
        font-size: 15px;
        line-height: 1.7;
    }
}



/* ==========================================================
   CANARINHO — HOME ARTIGOS EM DESTAQUE
   Grid 2x2
========================================================== */

.home-articles {
    width: 100%;
    margin: 32px 0 0;
}


.home-articles-header {
    margin-bottom: 16px;
}


.home-articles-title {
    margin: 0;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: -.02em;

    color: var(--cg-text);
}


.home-articles-subtitle {
    margin: 5px 0 0;

    font-size: 13px;
    line-height: 1.5;

    color: var(--cg-muted);
}


.home-articles-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 16px;

    width: 100%;
}


.home-article-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    text-decoration: none;

    background: var(--cg-surface);

    border: 1px solid var(--cg-border);

    border-radius: 14px;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.home-article-card:hover {
    transform: translateY(-2px);

    border-color: rgba(245, 158, 11, .45);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .12);
}


.home-article-image {
    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: rgba(255, 255, 255, .04);
}


.home-article-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .25s ease;
}


.home-article-card:hover .home-article-image img {
    transform: scale(1.025);
}


.home-article-content {
    display: flex;
    flex-direction: column;

    padding: 14px 15px 16px;
}


.home-article-category {
    display: inline-flex;
    align-self: flex-start;

    margin-bottom: 8px;
    padding: 4px 8px;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .07em;
    text-transform: uppercase;

    color: var(--cg-accent);

    background: rgba(245, 158, 11, .10);
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 999px;
}


.home-article-title {
    margin: 0;

    font-size: 16px;
    font-weight: 750;

    line-height: 1.3;

    letter-spacing: -.015em;

    color: var(--cg-text);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    min-height: calc(1.3em * 3);

    overflow: hidden;
}


.home-article-excerpt {
    margin: 7px 0 0;

    font-size: 13px;

    line-height: 1.5;

    color: var(--cg-muted);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


.home-articles-more {
    margin-top: 16px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .home-articles {
        margin-top: 24px;

        padding-inline: 8px;
    }


    .home-articles-header {
        margin-bottom: 12px;
    }


    .home-articles-title {
        font-size: 17px;
    }


    .home-articles-subtitle {
        font-size: 12px;
    }


    .home-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .home-article-card {
        border-radius: 11px;
    }


    .home-article-content {
        padding: 10px 10px 12px;
    }


    .home-article-category {
        margin-bottom: 5px;

        font-size: 9px;
    }


    .home-article-title {
        font-size: 13px;

        line-height: 1.3;
    }


    .home-article-excerpt {
        margin-top: 5px;

        font-size: 11px;

        line-height: 1.4;
    }


    .home-articles-more {
        margin-top: 12px;
    }

}


/* =========================================================
   CANARINHO GOSPEL — CARROSSEL MOBILE DA HOME
   ========================================================= */

@media (max-width: 700px) {

    .home-mobile-carousel {
        margin-top: 16px;
        width: 100%;
        overflow: hidden;
    }

    .home-mobile-carousel-track {
        gap: 12px;
        display: flex;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .home-mobile-carousel-track::-webkit-scrollbar {
        display: none;
    }

    .home-mobile-carousel-track > section {
        flex: 0 0 86%;
        width: 86%;
        min-width: 86%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        box-sizing: border-box;
    }

    .home-mobile-carousel-indicators {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
        margin-top: 10px;
    }

    .home-mobile-carousel-indicator {
        width: 7px;
        height: 7px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 50%;
        background: #f5a400;
        opacity: 0.35;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transition:
            width 0.2s ease,
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    .home-mobile-carousel-indicator.is-active {
        width: 9px;
        height: 9px;
        opacity: 1;
        transform: scale(1.05);
    }

    .home-mobile-carousel-indicator:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }

}

/* =========================================================
   CANARINHO GOSPEL — CARDS PREMIUM DOS CARROSSÉIS MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .home-mobile-carousel-track > section {
        background: rgba(17, 24, 39, 0.72);
        border: 1px solid rgba(245, 164, 0, 0.38);
        border-radius: 22px;
        box-shadow:
            0 0 0 1px rgba(245, 164, 0, 0.06),
            0 8px 24px rgba(0, 0, 0, 0.16);
        overflow: hidden;
    }

    .home-mobile-carousel-track > section .home-top-chords,
    .home-mobile-carousel-track > section .home-top-songs,
    .home-mobile-carousel-track > section .home-top-artists {
        margin-top: 0;
    }

}

/* Alinhamento vertical dos cards do carrossel mobile */
@media (max-width: 700px) {

    .home-mobile-carousel-track > section.home-top-chords,
    .home-mobile-carousel-track > section.home-top-songs,
    .home-mobile-carousel-track > section.home-top-artists {
        margin-top: 0 !important;
    }

}

/* Respiro interno superior dos cards premium */
@media (max-width: 700px) {

    .home-mobile-carousel-track > section.home-top-chords,
    .home-mobile-carousel-track > section.home-top-songs,
    .home-mobile-carousel-track > section.home-top-artists {
        padding-top: 16px;
    }

}


/* Espaçamento inferior dos botões dos cards premium */
@media (max-width: 700px) {

    .home-mobile-carousel-track > section .home-view-more-button {
        margin-bottom: 16px;
    }

}


/* =========================================================
   CANARINHO — CARDS PREMIUM DO CARROSSEL
   AJUSTE PARA TEMA CLARO
   ========================================================= */

@media (max-width: 700px) {

    html:not([data-theme="dark"]) .home-mobile-carousel-track > section {
        background: #fffdf7;
        border-color: rgba(245, 164, 0, 0.42);
        box-shadow:
            0 0 0 1px rgba(245, 164, 0, 0.05),
            0 8px 24px rgba(15, 23, 42, 0.08);
    }

}


/* =========================================================
   CANARINHO — DIVISÓRIAS DOS RANKINGS NO TEMA ESCURO
   ========================================================= */

@media (max-width: 700px) {

    html[data-theme="dark"] .home-mobile-carousel-track .search-result-item {
        border-bottom-color: rgba(255, 255, 255, .08);
    }

}


/* Botão de categorias — gerenciamento de artigos */

.admin-article-categories-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 18px;

    border: 1px solid rgba(245, 164, 0, 0.55);
    border-radius: 10px;

    background: rgba(245, 164, 0, 0.04);
    color: #f5a400;

    text-decoration: none;
    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-article-categories-button:hover {
    background: rgba(245, 164, 0, 0.10);
    border-color: #f5a400;
    transform: translateY(-1px);
}


/* =========================================================
   BOTÃO — MAIS ARTIGOS
   ========================================================= */

.song-related-articles-more {
    display: flex;
    justify-content: center;

    margin-top: 24px;
}

.song-related-articles-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 400px;
    padding: 11px 22px;

    border: 1px solid var(--cg-border);
    border-radius: 10px;

    background: var(--cg-surface);
    color: var(--cg-text);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;

    transition:
        background var(--cg-transition),
        border-color var(--cg-transition),
        color var(--cg-transition),
        transform var(--cg-transition);
}

.song-related-articles-more-link:hover {
    background: var(--cg-navy);
    border-color: var(--cg-navy);
    color: #ffffff;

    transform: translateY(-1px);
}


@media (max-width: 700px) {
    .articles-latest-section.song-related-articles-section {
        margin-top: 32px;
    }
}


.song-related-articles-more {
    display: flex;
    justify-content: center;

    margin-top: 30px;
}

.song-related-articles-more-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 400px;
    min-height: 50px;

    padding: 12px 24px;

    border: 1px solid var(--cg-border);
    border-radius: 12px;

    background: var(--cg-surface);
    color: var(--cg-text);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;

    text-decoration: none;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;

    -webkit-tap-highlight-color: transparent;
}

.song-related-articles-more-link:hover {
    background: var(--cg-surface-hover, var(--cg-surface));
    border-color: var(--cg-border-strong, var(--cg-border));
    color: var(--cg-text);
}

.song-related-articles-more-link:focus,
.song-related-articles-more-link:focus-visible {
    background: var(--cg-surface);
    border-color: var(--cg-border);
    color: var(--cg-text);

    outline: 2px solid var(--cg-gold);
    outline-offset: 3px;
}

.song-related-articles-more-link:active {
    background: var(--cg-surface);
    border-color: var(--cg-border);
    color: var(--cg-text);

    transform: translateY(1px);
}

@media (max-width: 700px) {
    .song-related-articles-more {
        margin-top: 28px;
    }

    .song-related-articles-more-link {
        width: 100%;
        min-height: 52px;
    }
}


.articles-section-heading #song-related-articles-title {
    font-size: 22px;
}

@media (max-width: 700px) {
    .articles-section-heading #song-related-articles-title {
        font-size: 20px;
    }
}

/* =========================================================
   ARTIGOS RELACIONADOS — PÁGINAS DE LETRAS E CIFRAS
   ========================================================= */

@media (min-width: 701px) {
    .articles-latest-section.song-related-articles-section {
        width: 625px;
        max-width: 100%;
        margin-top: 76px;
    }
}




/* =========================================================
   CANARINHO GOSPEL — CARROSSEL DOS RANKINGS NO DESKTOP
   Mesma estrutura do carrossel mobile.
   2 cards visíveis + 3º acessível por arraste.
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 16px;
        overflow: hidden;
    }

    .home-mobile-carousel-track {
        display: flex;
        gap: 24px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .home-mobile-carousel-track::-webkit-scrollbar {
        display: none;
    }

    .home-mobile-carousel-track > section {
        flex: 0 0 calc((100% - 24px) / 2);
        width: calc((100% - 24px) / 2);
        min-width: calc((100% - 24px) / 2);

        box-sizing: border-box;
        scroll-snap-align: start;
        scroll-snap-stop: always;

        background: rgba(17, 24, 39, 0.72);

        border: 1px solid rgba(245, 164, 0, 0.38);
        border-radius: 22px;

        box-shadow:
            0 0 0 1px rgba(245, 164, 0, 0.06),
            0 8px 24px rgba(0, 0, 0, 0.16);

        overflow: hidden;

        padding-top: 16px;

        transform: none !important;
        margin-top: 0 !important;
    }

    .home-mobile-carousel-track > section .home-top-chords,
    .home-mobile-carousel-track > section .home-top-songs,
    .home-mobile-carousel-track > section .home-top-artists {
        width: 100%;
        margin-top: 0 !important;
        transform: none !important;
    }

    .home-mobile-carousel-track > section .home-view-more-button {
        margin-bottom: 16px;
    }

    .home-mobile-carousel-indicators {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        width: 100%;
        margin-top: 10px;
    }

    .home-mobile-carousel-indicator {
        width: 7px;
        height: 7px;

        padding: 0;
        margin: 0;

        border: 0;
        border-radius: 50%;

        background: #f5a400;
        opacity: 0.35;

        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;

        transition:
            width 0.2s ease,
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    .home-mobile-carousel-indicator.is-active {
        width: 9px;
        height: 9px;

        opacity: 1;
        transform: scale(1.05);
    }

    .home-mobile-carousel-indicator:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }

    /* Tema claro */
    html:not([data-theme="dark"]) .home-mobile-carousel-track > section {
        background: #fffdf7;
        border-color: rgba(245, 164, 0, 0.42);

        box-shadow:
            0 0 0 1px rgba(245, 164, 0, 0.05),
            0 8px 24px rgba(15, 23, 42, 0.08);
    }

}

/* =========================================================
   HOME — ALINHAMENTO DOS TÍTULOS DOS RANKINGS NO CARROSSEL
   O título começa exatamente na mesma coluna do 1º lugar.
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel-track > section .home-top-chords > h2,
    .home-mobile-carousel-track > section .home-top-songs > h2,
    .home-mobile-carousel-track > section .home-top-artists > h2 {
        margin-left: 38px;
        margin-right: 38px;
        text-align: left;
    }

}

/* =========================================================
   HOME — ALINHAMENTO REAL DOS TÍTULOS DOS RANKINGS
   Alinha o início do título com o início do 1º lugar.
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel-track > section .home-top-chords-header,
    .home-mobile-carousel-track > section .home-top-songs-header,
    .home-mobile-carousel-track > section .home-top-artists-header {
        margin-left: 38px !important;
        margin-right: 38px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .home-mobile-carousel-track > section .home-top-chords-title,
    .home-mobile-carousel-track > section .home-top-songs-title,
    .home-mobile-carousel-track > section .home-top-artists-title {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

}

/* =========================================================
   HOME — AJUSTE FINO DO ALINHAMENTO DOS TÍTULOS
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel-track > section .home-top-chords-header,
    .home-mobile-carousel-track > section .home-top-songs-header,
    .home-mobile-carousel-track > section .home-top-artists-header {
        margin-left: 30px !important;
        margin-right: 30px !important;
    }

}

/* =========================================================
   HOME — MOSTRAR PARCIALMENTE O PRÓXIMO CARD NO DESKTOP
   Mantém 2 cards principais + uma prévia do 3º.
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel-track > section {
        flex: 0 0 44%;
        width: 44%;
        min-width: 44%;
    }

}

/* =========================================================
   HOME — FADE PREMIUM NA PRÉVIA DO PRÓXIMO CARD
   Desktop: suaviza a borda direita do carrossel.
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel {
        position: relative;
    }

    .home-mobile-carousel::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 34px;
        width: 110px;

        background: linear-gradient(
            to right,
            transparent 0%,
            var(--cg-background) 100%
        );

        pointer-events: none;
        z-index: 5;
    }

}

/* =========================================================
   HOME — FADE PREMIUM REFINADO DO PRÓXIMO CARD
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel::after {
        top: 0;
        right: 0;
        bottom: 34px;
        width: 78px;

        background: linear-gradient(
            to right,
            rgba(7, 15, 30, 0) 0%,
            rgba(7, 15, 30, 0.35) 35%,
            rgba(7, 15, 30, 0.78) 72%,
            rgba(7, 15, 30, 0.96) 100%
        );

        pointer-events: none;
        z-index: 5;
    }

}

/* =========================================================
   HOME — FADE ATÉ A BORDA INFERIOR DO CARD
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel::after {
        bottom: 0;
    }

    .home-mobile-carousel-indicators {
        position: relative;
        z-index: 6;
    }

}

/* =========================================================
   HOME — AJUSTE FINAL DO FADE DOS CARDS
   ========================================================= */

@media (min-width: 701px) {

    /* O fade termina exatamente na altura dos cards */
    .home-mobile-carousel::after {
        bottom: 18px;
    }

    /* Tema claro — fade na cor do fundo da página */
    html:not([data-theme="dark"]) .home-mobile-carousel::after {
        background: linear-gradient(
            to right,
            rgba(244, 247, 251, 0) 0%,
            rgba(244, 247, 251, 0.35) 35%,
            rgba(244, 247, 251, 0.78) 72%,
            rgba(244, 247, 251, 0.96) 100%
        );
    }

}

/* =========================================================
   HOME — FADE INTELIGENTE DO CARROSSEL
   Início: fade à direita
   Final: fade à esquerda
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel::after {
        left: auto;
        right: 0;
    }

    .home-mobile-carousel.is-at-end::after {
        left: 0;
        right: auto;

        background: linear-gradient(
            to left,
            rgba(7, 15, 30, 0) 0%,
            rgba(7, 15, 30, 0.35) 35%,
            rgba(7, 15, 30, 0.78) 72%,
            rgba(7, 15, 30, 0.96) 100%
        );
    }

    /* Tema claro */
    html:not([data-theme="dark"]) .home-mobile-carousel.is-at-end::after {
        background: linear-gradient(
            to left,
            rgba(244, 247, 251, 0) 0%,
            rgba(244, 247, 251, 0.35) 35%,
            rgba(244, 247, 251, 0.78) 72%,
            rgba(244, 247, 251, 0.96) 100%
        );
    }

}

/* =========================================================
   HOME — AJUSTE FINO DO TAMANHO E ESPAÇAMENTO DOS CARDS
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel-track {
        gap: 16px;
    }

    .home-mobile-carousel-track > section {
        flex: 0 0 42%;
        width: 42%;
        min-width: 42%;
    }

}

/* =========================================================
   HOME — ARRASTE DO CARROSSEL COM MOUSE
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel-track {
        cursor: grab;
    }

    .home-mobile-carousel-track.is-mouse-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    .home-mobile-carousel-track.is-mouse-dragging > section {
        user-select: none;
    }

}

/* =========================================================
   HOME — BOTÃO DE NAVEGAÇÃO DO CARROSSEL
   Botão circular centralizado no fade.
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel {
        position: relative;
    }

    .home-mobile-carousel-arrow {
        position: absolute;
        top: 50%;
        right: 10px;
        z-index: 20;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;

        padding: 0;

        border: 1px solid rgba(245, 164, 0, 0.45);
        border-radius: 50%;

        background: rgba(17, 24, 39, 0.78);
        color: #ffffff;

        font-size: 20px;
        font-weight: 700;
        line-height: 1;

        transform: translateY(-50%);

        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;

        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(245, 164, 0, 0.06);

        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);

        transition:
            transform 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .home-mobile-carousel-arrow:hover {
        background: rgba(17, 24, 39, 0.92);
        border-color: rgba(245, 164, 0, 0.75);

        transform: translateY(-50%) scale(1.06);

        box-shadow:
            0 5px 18px rgba(0, 0, 0, 0.30),
            0 0 12px rgba(245, 164, 0, 0.12);
    }

    .home-mobile-carousel-arrow:active {
        transform: translateY(-50%) scale(0.96);
    }

    .home-mobile-carousel-arrow:focus-visible {
        outline: 2px solid #f5a400;
        outline-offset: 3px;
    }

    .home-mobile-carousel-arrow span {
        display: block;
        transform: translateX(1px);
    }

    /* Tema claro */
    html:not([data-theme="dark"]) .home-mobile-carousel-arrow {
        background: rgba(255, 255, 255, 0.82);
        border-color: rgba(245, 164, 0, 0.48);
        color: #172033;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, 0.14),
            0 0 0 1px rgba(245, 164, 0, 0.05);
    }

    html:not([data-theme="dark"]) .home-mobile-carousel-arrow:hover {
        background: rgba(255, 255, 255, 0.96);
        border-color: rgba(245, 164, 0, 0.72);

        box-shadow:
            0 5px 18px rgba(15, 23, 42, 0.18),
            0 0 12px rgba(245, 164, 0, 0.10);
    }

}


/* =========================================================
   HOME — SETA DO CARROSSEL NO ÚLTIMO SLIDE
   ========================================================= */

@media (min-width: 701px) {

    .home-mobile-carousel-arrow.is-reverse {
        right: auto;
        left: 10px;
    }

    .home-mobile-carousel-arrow.is-reverse span {
        transform: translateX(-1px);
    }

}


/* =========================================================
   HOME — SETA DO CARROSSEL OCULTA NO MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .home-mobile-carousel-arrow {
        display: none !important;
    }

}


/* =========================================================
   ARTIGOS — REFINO DO FADE DAS CATEGORIAS
   Alinhado exatamente à altura das tags.
   ========================================================= */

.articles-category-scroll::before,
.articles-category-scroll::after {
    top: 0;
    bottom: 42px;
    width: 42px;
}

/* Modo escuro */
html[data-theme="dark"] .articles-category-scroll::before {
    background: linear-gradient(
        to right,
        var(--cg-background),
        transparent
    );
}

html[data-theme="dark"] .articles-category-scroll::after {
    background: linear-gradient(
        to left,
        var(--cg-background),
        transparent
    );
}

/* Modo claro */
html:not([data-theme="dark"]) .articles-category-scroll::before {
    background: linear-gradient(
        to right,
        var(--cg-background),
        transparent
    );
}

html:not([data-theme="dark"]) .articles-category-scroll::after {
    background: linear-gradient(
        to left,
        var(--cg-background),
        transparent
    );
}


/* =========================================================
   ARTIGOS — REFINO VISUAL DAS CATEGORIAS
   Fade escuro + bordas douradas mais vivas
   ========================================================= */

/* DARK MODE — fade integrado ao fundo do site */
html[data-theme="dark"] .articles-category-scroll::before {
    background: linear-gradient(
        to right,
        #080f1f 0%,
        rgba(8, 15, 31, 0.88) 35%,
        rgba(8, 15, 31, 0.45) 72%,
        transparent 100%
    );
}

html[data-theme="dark"] .articles-category-scroll::after {
    background: linear-gradient(
        to left,
        #080f1f 0%,
        rgba(8, 15, 31, 0.88) 35%,
        rgba(8, 15, 31, 0.45) 72%,
        transparent 100%
    );
}

/* BORDAS — cor dourada mais viva */
.articles-category-link {
    border-color: rgba(245, 164, 0, 0.38);
}

.articles-category-link:hover {
    border-color: rgba(245, 164, 0, 0.72);
}

.articles-category-link.is-active {
    border-color: #f5a400;
}

/* DARK MODE — reforço da presença das bordas */
html[data-theme="dark"] .articles-category-link {
    border-color: rgba(245, 164, 0, 0.42);
}

html[data-theme="dark"] .articles-category-link:hover {
    border-color: rgba(245, 164, 0, 0.82);
}

html[data-theme="dark"] .articles-category-link.is-active {
    border-color: #f5a400;
}


/* ARTIGOS — IMAGEM DESTACADA MENOR NO DESKTOP */
@media (min-width: 701px) {
    .article-featured-image {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   HOME — 4 ARTIGOS FIXOS EM 4 COLUNAS NO DESKTOP
   ========================================================= */

@media (min-width: 701px) {
    .home-articles-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 701px) {
    .home-articles-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* HOME — LISTAGEM AUTOMÁTICA DE ARTIGOS */
@media (min-width: 701px) {

    .home-page .home-related-articles-container {
        grid-column: 1 / -1;
        width: min(var(--cg-container), 92%);
        max-width: 1280px;
        margin-inline: auto;
    }
    .home-page .song-related-articles-section {
        grid-column: 1 / -1;
    }
}

/* HOME — ARTIGOS EM TODA A LARGURA NO DESKTOP */
@media (min-width: 701px) {
    .home-page .home-articles {
        grid-column: 1 / -1;
    }
}

/* HOME — ARTIGOS DESKTOP EM LARGURA TOTAL */
@media (min-width: 701px) {
    main.home-page > .home-articles {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;
    }

    main.home-page > .home-articles .home-articles-grid {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ARTICLE BREADCRUMB */

.article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--cg-text-muted);
}

.article-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.article-breadcrumb a:hover {
    text-decoration: underline;
}

.article-breadcrumb-separator {
    opacity: .55;
}

.article-breadcrumb-current {
    color: var(--cg-text);
}

@media (max-width: 700px) {
    .article-breadcrumb {
        margin-bottom: 14px;
        font-size: 13px;
        gap: 5px;
    }
}



/* ==========================================================
   ARTISTAS EM ALTA — BOTÃO VER TODOS OS ARTISTAS
========================================================== */

.trending-artists-view-all {
    width: 100%;
    box-sizing: border-box;

    margin-top: 22px;

    display: flex;
    justify-content: center;
}

.trending-artists-view-all .home-view-more-button {
    width: auto;
    max-width: max-content;
    flex: 0 0 auto;
}



/* ==========================================================
   ARTISTAS EM ALTA — DUAS COLUNAS
   Desktop somente — 5 artistas por coluna
========================================================== */

@media (min-width: 701px) {

    .trending-page .home-top-artists-list {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-rows: repeat(10, auto);

        grid-auto-flow: column;

        column-gap: 48px;
        row-gap: 0;
    }

}




/* ==========================================================
   ARTISTAS EM ALTA — LIMITE DOS NOMES
   Desktop somente — exclusivo da página de ranking
========================================================== */

@media (min-width: 701px) {

    .trending-page .home-top-artists-list
    .home-top-artist
    .search-result-content {

        min-width: 0;
    }


    .trending-page .home-top-artists-list
    .home-top-artist
    .search-result-title {

        display: block;

        max-width: 280px;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }

}



/* ==========================================================
   TRENDING — LETRAS E CIFRAS EM ALTA
   Layout desktop igual ao Artistas em Alta
   ========================================================== */

@media (min-width: 701px) {
    .trending-page .trending-songs .home-top-songs-list,
    .trending-page .trending-chords .home-top-songs-list {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
        grid-template-rows: repeat(10, auto);
        grid-auto-flow: column;
        column-gap: 48px;
        row-gap: 0;
    }

}


/* ==========================================================
   TRENDING — LIMITE DOS TÍTULOS DE LETRAS E CIFRAS
   Mesmo padrão de Artistas em Alta
   ========================================================== */

@media (min-width: 701px) {
    .trending-page .trending-songs .home-top-songs-list
    .home-top-song
    .search-result-content,
    .trending-page .trending-chords .home-top-songs-list
    .home-top-song
    .search-result-content {
        min-width: 0;
    }

    .trending-page .trending-songs .home-top-songs-list
    .home-top-song
    .search-result-title,
    .trending-page .trending-chords .home-top-songs-list
    .home-top-song
    .search-result-title {
        display: block;
        max-width: 280px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}


/* ==========================================================
   ARTISTAS EM ALTA — BOTÃO VER TODOS NO MOBILE
   Aproximação da paginação
========================================================== */

@media (max-width: 700px) {
    .trending-page .trending-artists-view-all {
        margin-top: 4px;
    }

    .trending-page .trending-artists-view-all .home-view-more-button {
        width: calc(100% - 90px);
        max-width: none;
    }
}


/* ==========================================================
   CATÁLOGO DE ARTISTAS — POSIÇÃO VERTICAL DO TÍTULO NO MOBILE
   Título ocupa visualmente a posição anterior do botão
========================================================== */

@media (max-width: 700px) {
    .artist-all-songs .home-top-songs-header {
        margin-top: 30px !important;
    }
}


/* ==========================================================
   MAIS LIDOS — MESMO DESIGN DOS CARDS DA HOME
   Mantém o sistema de Mais Lidos independente
========================================================== */

.articles-most-read-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.articles-most-read-grid .article-list-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cg-border);
    border-radius: 14px;
    background: var(--cg-surface);
    box-shadow: none;
}

.articles-most-read-grid .article-list-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.articles-most-read-grid .article-list-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.articles-most-read-grid .article-list-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.articles-most-read-grid .article-list-card-body {
    display: flex;
    flex-direction: column;
    padding: 14px 15px 16px;
}

.articles-most-read-grid .article-list-card-category {
    display: inline-flex;
    align-self: flex-start;
    width: fit-content;
    margin: 0 0 8px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cg-accent);
    background: rgba(245, 158, 11, .10);
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 999px;
}

.articles-most-read-grid .article-list-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--cg-text);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    min-height: calc(1.3em * 3);
    overflow: hidden;
}

.articles-most-read-grid .article-list-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, .45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}


/* MOBILE — igual ao comportamento dos cards da Home */

@media (max-width: 700px) {

    .articles-most-read-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .articles-most-read-grid .article-list-card {
        border-radius: 11px;
    }

    .articles-most-read-grid .article-list-card-body {
        padding: 10px 10px 12px;
    }

    .articles-most-read-grid .article-list-card-category {
        margin-bottom: 5px;
        padding: 4px 8px;
        font-size: 9px;
    }

    .articles-most-read-grid .article-list-card-title {
        font-size: 13px;
        line-height: 1.3;
        min-height: calc(1.3em * 3);
        -webkit-line-clamp: 3;
    }
}


/* ==========================================================
   RANKINGS INDIVIDUAIS — CENTRALIZAÇÃO E CONTORNO DESKTOP
   Não altera os carrosséis da Home nem os artigos
========================================================== */

@media (min-width: 701px) {

    main > .trending-page {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    main > .trending-page > section {
        width: calc(100% - 48px);
        max-width: 1044px;
        box-sizing: border-box;

        margin-left: auto;
        margin-right: auto;

        padding: 26px 28px 22px;

        border: 1px solid rgba(245, 158, 11, .45);
        border-radius: 24px;

        background: rgba(17, 24, 39, .35);
    }

    main > .trending-page > section > .home-top-songs-header,
    main > .trending-page > section > .home-top-artists-header {
        width: 100%;
        text-align: center;
    }

    main > .trending-page > section > .home-top-songs-header .home-top-songs-title,
    main > .trending-page > section > .home-top-artists-header .home-top-artists-title {
        margin-left: 0;
        text-align: center;
    }
}

/* HOME — LIMITAR CONTEÚDO À LARGURA DO BANNER NO DESKTOP */
@media (min-width: 701px) {
    main.home-page {
        width: 100%;
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}

/* HOME — MESMO LIMITE HORIZONTAL DO BANNER NO DESKTOP */
@media (min-width: 701px) {
    main.home-page {
        width: min(100%, 1180px) !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    main.home-page > .home-mobile-carousel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    main.home-page > .home-articles {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    main.home-page > .home-articles .home-articles-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* HOME — ALINHAR RANKINGS E ARTIGOS À LARGURA DO BANNER */
@media (min-width: 701px) {
    main.home-page {
        max-width: 1100px !important;
    }
}

/* ==========================================================
   ARTISTAS EM ALTA — CATÁLOGO A-Z ALINHADO AO RANKING
   Exclusivo do catálogo carregado nesta página
========================================================== */

@media (min-width: 701px) {
    main > .trending-page > #trending-artists-all-container {
        width: calc(100% - 48px);
        max-width: 1044px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    main > .trending-page > #trending-artists-all-container > .artist-all-songs {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container .artist-alphabet-list {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 28px !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container .artist-letter-group {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 24px !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container .artist-letter-songs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !important;
        column-gap: 48px !important;
        row-gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        column-count: initial !important;
        columns: initial !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container .artist-letter-songs > .artist-song-link {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container .artist-song-link .search-result-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container .artist-song-link .search-result-title {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 280px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
}

/* AJUSTE FINO — ALINHAMENTO DO CATÁLOGO A-Z */
@media (min-width: 701px) {
    main > .trending-page > #trending-artists-all-container
    .artist-alphabet-list {
        position: relative !important;
        left: 12.5% !important;
    }

    main > .trending-page > #trending-artists-all-container
    .artist-letter-songs {
        row-gap: 8px !important;
    }
}

/* ARTISTAS EM ALTA — BOTÃO VER TODOS OS ARTISTAS */
@media (min-width: 701px) {
    main.trending-page #trending-artists-view-all-trigger {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    main.trending-page #trending-artists-view-all-trigger
    .trending-artists-load-all {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        height: 53px !important;
        min-height: 53px !important;
        box-sizing: border-box !important;
    }
}

/* ARTISTAS EM ALTA — CENTRALIZAR TÍTULO DO CATÁLOGO */
@media (min-width: 701px) {
    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header .home-top-songs-title {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
}

/* CORREÇÃO — CENTRALIZAR TÍTULO TODOS OS ARTISTAS */
@media (min-width: 701px) {
    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header .home-top-songs-title {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        transform: none !important;
    }
}

/* ARTISTAS EM ALTA — ESPAÇAMENTO DO TÍTULO A-Z */
@media (min-width: 701px) {
    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header {
        margin-top: 18px !important;
    }
}

/* RANKINGS — ESPAÇAMENTO ENTRE CONTEÚDO E RODAPÉ */
@media (min-width: 701px) {
    main.trending-page {
        padding-bottom: 32px !important;
    }
}

/* RANKINGS INDIVIDUAIS — SEM CONTORNO DOURADO NO MOBILE */
@media (max-width: 700px) {
    main > .trending-page > section {
        border: none !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }
}

/* RANKINGS — AJUSTES DE ESPAÇAMENTO NO MOBILE */
@media (max-width: 700px) {

    /* Aproxima o início das três páginas do cabeçalho */
    main.trending-page {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
    }

}

/* RANKINGS MOBILE — CORRIGIR ESPAÇO EXCESSIVO NO TOPO */
@media (max-width: 700px) {
    main.trending-page {
        padding-top: 0 !important;
        padding-bottom: 24px !important;
    }
}

/* RANKINGS MOBILE — AJUSTE FINO DO TOPO */
@media (max-width: 700px) {
    main.trending-page {
        margin-top: -12px !important;
        padding-top: 0 !important;
        padding-bottom: 24px !important;
    }
}

/* RANKINGS MOBILE — SEGUNDO AJUSTE DO TOPO */
@media (max-width: 700px) {
    main.trending-page {
        margin-top: -24px !important;
        padding-top: 0 !important;
        padding-bottom: 24px !important;
    }
}

/* RANKINGS MOBILE — APROXIMAR PAGINAÇÃO DO ÚLTIMO ITEM */
@media (max-width: 700px) {
    main.trending-page > section .home-top-songs-list,
    main.trending-page > section .home-top-artists-list {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    main.trending-page > section nav,
    main.trending-page > section .pagination {
        margin-top: 8px !important;
    }
}

/* RANKINGS MOBILE — REDUZIR ESPAÇO ANTES DA PAGINAÇÃO */
@media (max-width: 700px) {
    main.trending-page > .search-pagination,
    main.trending-page > nav.searchpagination {
        margin-top: 8px !important;
    }
}

/* RANKINGS — DIVISÓRIAS VISÍVEIS NOS MODOS CLARO E ESCURO */
main.trending-page .home-top-songs-list > a,
main.trending-page .home-top-artists-list > a {
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
}

main.trending-page .home-top-songs-list > a:last-child,
main.trending-page .home-top-artists-list > a:last-child {
    border-bottom: none !important;
}


/* CATÁLOGO A-Z — CENTRALIZAR TÍTULO NO MOBILE */
@media (max-width: 700px) {
    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header .home-top-songs-title {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        transform: none !important;
    }
}


/* CATÁLOGO A-Z — CENTRALIZAÇÃO DO TÍTULO NO MOBILE */
@media (max-width: 700px) {
    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header .home-top-songs-title {
        position: static !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        transform: none !important;
    }
}

/* CATÁLOGO A-Z — CORRIGIR LARGURA E CENTRALIZAÇÃO NO MOBILE */
@media (max-width: 700px) {
    main > .trending-page > #trending-artists-all-container > .artist-all-songs {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    main > .trending-page > #trending-artists-all-container
    .artist-all-songs > .home-top-songs-header {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* CATÁLOGO A-Z — ALINHAR INÍCIO COM O TEXTO DO RANKING NO MOBILE */
@media (max-width: 700px) {
    main > .trending-page > #trending-artists-all-container
    .artist-alphabet-list {
        padding-left: 15px !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* RANKINGS — FUNDO BRANCO NO MODO CLARO DESKTOP */
@media (min-width: 701px) {
    html[data-theme="light"] main.trending-page > section {
        background: #ffffff !important;
    }

    html:not([data-theme="dark"]):not([data-theme="light"])
    main.trending-page > section {
        background: #ffffff !important;
    }
}


/* ==========================================================
   PERFIL DO ARTISTA — CENTRALIZAÇÃO DESKTOP
   Escopo exclusivo da página individual do artista
========================================================== */

@media (min-width: 701px) {
    .artist-profile > .container {
        width: calc(100% - 48px) !important;
        max-width: 1044px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   PERFIL DO ARTISTA — CENTRALIZAÇÃO DAS SEÇÕES DESKTOP
   Não altera a Home nem o layout mobile
========================================================== */

@media (min-width: 701px) {

    main:has(.artist-profile) > .artist-top-songs,
    main:has(.artist-profile) > .artist-all-songs-trigger,
    main:has(.artist-profile) > #artist-all-songs-container {
        width: calc(100% - 48px) !important;
        max-width: 1044px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-all-songs-trigger {
        display: flex !important;
        justify-content: center !important;
    }
}


/* ==========================================================
   PERFIL DO ARTISTA — CENTRALIZAÇÃO FINAL DESKTOP
   Não altera a Home nem o layout mobile
========================================================== */

@media (min-width: 701px) {

    /* Cabeçalho: foto, nome, biografia e redes sociais */
    .artist-profile > .container {
        width: calc(100% - 48px) !important;
        max-width: 1044px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Seletor Letras/Cifras */
    .artist-top-songs > .artist-top-switch {
        display: grid !important;
        width: 440px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* Título do Top 10 */
    .artist-top-songs .home-top-songs-header {
        width: 100% !important;
        text-align: center !important;
    }

    .artist-top-songs .home-top-songs-title {
        margin-left: 0 !important;
        text-align: center !important;
    }

    /* Botão: neutralizar os deslocamentos antigos */
    .artist-all-songs-trigger {
        width: calc(100% - 48px) !important;
        max-width: 1044px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Catálogo completo */
    #artist-all-songs-container {
        width: calc(100% - 48px) !important;
        max-width: 1044px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #artist-all-songs-container .artist-all-songs {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #artist-all-songs-container .artist-all-songs > .home-top-songs-header {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    #artist-all-songs-container .artist-all-songs > .home-top-songs-header .home-top-songs-title {
        margin-left: 0 !important;
        text-align: center !important;
    }
}


/* PERFIL DO ARTISTA — CENTRALIZAR TÍTULO DO TOP 10 DESKTOP */
@media (min-width: 701px) {
    .artist-top-songs .artist-top-panel .home-top-songs-header {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .artist-top-songs .artist-top-panel .home-top-songs-title {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
}

/* ==========================================================
   PERFIL DO ARTISTA — BORDA DOURADA DO RANKING
   Mesmo padrão visual das páginas Em Alta
   Desktop somente
========================================================== */

@media (min-width: 701px) {

    main:has(.artist-profile) > .artist-top-songs {
        width: calc(100% - 48px) !important;
        max-width: 1044px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 26px 28px 22px !important;
        box-sizing: border-box !important;

        border: 1px solid rgba(245, 158, 11, .45) !important;
        border-radius: 24px !important;
        background: rgba(17, 24, 39, .35) !important;
    }

    main:has(.artist-profile) > .artist-top-songs > .artist-top-switch {
        margin-top: 0 !important;
    }
}

/* Mobile — preservar o visual sem contorno */
@media (max-width: 700px) {
    main:has(.artist-profile) > .artist-top-songs {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}


/* ==========================================================
   RANKING DO ARTISTA — GRADE E LIMITES DA BORDA
   Desktop: somente perfil individual
========================================================== */

@media (min-width: 701px) {

    main:has(.artist-profile) > .artist-top-songs {
        overflow: hidden !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    main:has(.artist-profile) > .artist-top-songs .artist-top-panel {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-top-songs .home-top-songs-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: repeat(5, auto) !important;
        grid-auto-flow: column !important;
        column-gap: 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-top-songs .home-top-songs-list > .home-top-song {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-top-songs .home-top-songs-list > .home-top-song:nth-child(n+6) {
        transform: none !important;
    }

    main:has(.artist-profile) > .artist-top-songs .home-top-song:hover {
        transform: none !important;
    }

    main:has(.artist-profile) > .artist-top-songs .search-result-content {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    main:has(.artist-profile) > .artist-top-songs .search-result-title {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}


/* RANKING DO ARTISTA — REDUZIR ESPAÇO INICIAL DAS DUAS COLUNAS */
@media (min-width: 701px) {

    main:has(.artist-profile) > .artist-top-songs
    .home-top-songs-list > .home-top-song {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-indent: 0 !important;
    }

    main:has(.artist-profile) > .artist-top-songs
    .home-top-song-position {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    main:has(.artist-profile) > .artist-top-songs
    .home-top-song .search-result-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}


/* RANKING DO ARTISTA — MELHOR DISTRIBUIÇÃO DAS DUAS COLUNAS */
@media (min-width: 701px) {

    main:has(.artist-profile) > .artist-top-songs
    .home-top-songs-list {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-top-songs
    .home-top-songs-list > .home-top-song {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
}


/* RANKING DO ARTISTA — LIMITAR ÁREA CLICÁVEL AO CONTEÚDO */
@media (min-width: 701px) {

    main:has(.artist-profile) > .artist-top-songs
    .home-top-songs-list > .home-top-song {
        justify-self: start !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main:has(.artist-profile) > .artist-top-songs
    .home-top-song > a {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-top-songs
    .home-top-song .search-result-content {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* RANKING DO ARTISTA — ÁREA CLICÁVEL COM LARGURA UNIFORME */
@media (min-width: 701px) {

    main:has(.artist-profile) > .artist-top-songs
    .home-top-songs-list > .home-top-song {
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-top-songs
    .home-top-songs-list > .home-top-song > a {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-top-songs
    .home-top-songs-list > .home-top-song .search-result-content {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    main:has(.artist-profile) > .artist-top-songs
    .home-top-songs-list > .home-top-song .search-result-title {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
}


/* RANKING DO ARTISTA — RESPIRO VERTICAL NO DESKTOP */
@media (min-width: 701px) {

    main:has(.artist-profile) > .artist-top-songs > .artist-top-switch {
        margin-bottom: 30px !important;
    }

    main:has(.artist-profile) > .artist-top-songs .home-top-songs-header {
        margin-bottom: 32px !important;
    }
}


/* PERFIL DO ARTISTA — FUNDO BRANCO NO TEMA CLARO */
@media (min-width: 701px) {

    html[data-theme="light"]
    main:has(.artist-profile) > .artist-top-songs {
        background: #ffffff !important;
    }

    html:not([data-theme="dark"]):not([data-theme="light"])
    main:has(.artist-profile) > .artist-top-songs {
        background: #ffffff !important;
    }
}


/* CATÁLOGO A-Z DO ARTISTA — ALINHAR AS DUAS COLUNAS AO TOP 10 */
@media (min-width: 701px) {

    #artist-all-songs-container .artist-all-songs .artist-letter-songs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        grid-template-rows: none !important;
        column-gap: 48px !important;
        row-gap: 22px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #artist-all-songs-container .artist-all-songs .artist-song-link {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    #artist-all-songs-container .artist-all-songs .artist-letter-songs > .artist-song-link:nth-child(odd) {
        padding-right: 0 !important;
    }
}


/* CATÁLOGO A-Z DO ARTISTA — REDUZIR ÁREA CLICÁVEL */
@media (min-width: 701px) {
    #artist-all-songs-container .artist-all-songs .artist-song-link {
        width: 94% !important;
        max-width: 94% !important;
        justify-self: start !important;
    }
}


/* CATÁLOGO A-Z DO ARTISTA — AJUSTAR ÁREA CLICÁVEL */
@media (min-width: 701px) {
    #artist-all-songs-container .artist-all-songs .artist-song-link {
        width: 90% !important;
        max-width: 90% !important;
        justify-self: start !important;
    }
}



/* CANARINHO PRINT PAGINATION OVERRIDES v3 */
.print-preview-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: auto;
    min-height: 0;
}
.print-sheet { flex: 0 0 auto; }
.print-sheet-content { position: relative; }
.print-sheet[data-orientation="portrait"] .print-sheet-content,
.print-sheet[data-orientation="landscape"] .print-sheet-content {
    box-sizing: border-box;
}
.print-sheet[data-orientation="portrait"] .print-sheet-lyrics {
    position: absolute;
    top: 150px;
    left: 42px;
    right: 42px;
    bottom: 42px;
    height: auto;
    margin-top: 0;
    overflow: hidden;
    column-fill: auto !important;
}
.print-sheet[data-orientation="landscape"] .print-sheet-lyrics {
    position: absolute;
    top: 150px;
    left: 24px;
    right: 42px;
    bottom: 42px;
    height: auto;
    margin-top: 0;
    overflow: hidden;
    column-fill: auto !important;
}
.print-sheet-continuation[data-orientation="portrait"] .print-sheet-lyrics,
.print-sheet-continuation[data-orientation="landscape"] .print-sheet-lyrics {
    top: 42px;
}
.print-sheet-continuation .print-sheet-header { display: none !important; }
@media print {
    .print-preview-stage {
        display: block !important;
        width: 794px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .print-sheet {
        position: relative !important;
        inset: auto !important;
        margin: 0 !important;
        transform: none !important;
        zoom: 1 !important;
        box-shadow: none !important;
        border: 0 !important;
        break-after: page !important;
        page-break-after: always !important;
    }
    .print-sheet:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
    }
}




/* CANARINHO — colunas explícitas na impressão paisagem */
.print-sheet[data-orientation="landscape"] .print-sheet-lyrics.print-lyrics-explicit-columns {
 display:flex!important; flex-direction:row!important; align-items:stretch!important; column-count:initial!important; columns:initial!important; column-gap:0!important; gap:0 var(--print-column-gap,20px)!important; overflow:hidden!important;
}
.print-sheet[data-orientation="landscape"] .print-sheet-lyrics.print-lyrics-explicit-columns>.print-lyrics-column {
 display:block!important; flex:1 1 0!important; width:0!important; min-width:0!important; margin:0!important; padding:0!important; white-space:pre-line!important; overflow-wrap:anywhere!important; line-height:inherit!important;
}
@media print {
 .print-sheet[data-orientation="landscape"] .print-sheet-lyrics.print-lyrics-explicit-columns {display:flex!important; flex-direction:row!important; align-items:stretch!important; column-count:initial!important; columns:initial!important; column-gap:0!important; gap:0 var(--print-column-gap,20px)!important;}
 .print-sheet[data-orientation="landscape"] .print-sheet-lyrics.print-lyrics-explicit-columns>.print-lyrics-column {display:block!important; flex:1 1 0!important; width:0!important; min-width:0!important; white-space:pre-line!important; overflow-wrap:anywhere!important; line-height:inherit!important;}
}







/* CANARINHO — letras alinhadas ao cabeçalho na folha A4 */
.print-sheet[data-orientation="portrait"] .print-sheet-lyrics {
    left: 42px !important;
    right: 42px !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* CANARINHO — cabeçalho das letras no padrão visual das cifras */
.print-sheet .print-sheet-header {
    gap: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #d1d5db !important;
}

.print-sheet .print-sheet-title h1 {
    margin: 0 0 4px !important;
    color: #111827 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
}

.print-sheet .print-sheet-artist {
    color: #4b5563 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.print-sheet .print-sheet-brand {
    padding-top: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.print-sheet .print-sheet-brand span {
    color: #f59e0b !important;
}

@media print {
    .print-sheet .print-sheet-header {
        border-bottom: 1px solid #d1d5db !important;
    }
}

/* CANARINHO — marca do cabeçalho das letras igual à das cifras */
.print-sheet .print-sheet-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    padding-top: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.print-sheet .print-sheet-brand strong {
    color: #111827 !important;
    font-weight: 800 !important;
}

.print-sheet .print-sheet-brand span {
    color: #f59e0b !important;
    font-weight: 800 !important;
}


/* ==========================================================
   CANARINHO — CABEÇALHOS DOS CATÁLOGOS COMPLETOS
   Centraliza título e contagem em linhas separadas.
   ========================================================== */

.artist-all-songs .home-top-songs-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.artist-all-songs .home-top-songs-header .home-top-songs-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
}

.artist-all-songs .artist-catalog-count,
.artist-all-songs .artist-song-count,
.artist-all-songs .catalog-count {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    text-align: center !important;
    transform: none !important;
}


/* CANARINHO — FIX DEFINITIVO DO CABEÇALHO DOS CATÁLOGOS */
.artist-all-songs.home-top-songs .home-top-songs-header {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: center !important;
}

.artist-all-songs.home-top-songs .home-top-songs-header > .home-top-songs-title {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
}

.artist-all-songs.home-top-songs .home-top-songs-header > .artist-catalog-count {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
}


/* CANARINHO — CABEÇALHOS DOS CATÁLOGOS COM CONTAGEM */
.artist-all-songs.home-top-songs
.home-top-songs-header:has(> .artist-catalog-count),
.home-top-songs-header:has(> .artist-catalog-count) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.home-top-songs-header:has(> .artist-catalog-count)
> .home-top-songs-title,
.home-top-songs-header:has(> .artist-catalog-count)
> .artist-catalog-count {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.home-top-songs-header:has(> .artist-catalog-count)
> .artist-catalog-count {
    margin-top: 8px !important;
}

/* =========================================================
   BANNERS — PADRÃO UNIFICADO ENTRE HOME, LETRAS E CIFRAS
   ========================================================= */

@media (min-width: 701px) {
    .song-reading-page .home-banner-section {
        width: 100%;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {
    .song-reading-page .home-banner-section {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* Banner de letras e cifras: mesma largura máxima da Home */
@media (min-width: 701px) {
    .song-reading-page > .home-banner-section {
        width: calc(100% - 15px);
        max-width: 1100px;
        margin: 12px auto 0;
    }
}

@media (max-width: 700px) {
    .song-reading-page > .home-banner-section {
        width: 95%;
        margin: 16px auto 0;
    }
}

/* Banners em letras e cifras: espaçamento condicional */
.song-reading-page.has-banner {
    padding-top: 0;
}

.song-reading-page.has-banner > .container {
    padding-top: 16px !important;
}


/* Destino de banners por dispositivo */
@media (min-width: 701px) {
    .home-banner-device-mobile {
        display: none !important;
    }
}

@media (max-width: 700px) {
    .home-banner-device-desktop {
        display: none !important;
    }
}


/* Busca desktop: lupa fixa e X no mesmo espaço */
@media (min-width: 701px) {
    body .site-header .desktop-search-submit {
        pointer-events: none !important;
        cursor: default !important;
        background: transparent !important;
    }

    body .site-header .desktop-search-submit:hover,
    body .site-header .desktop-search-submit:active {
        background: transparent !important;
        color: inherit !important;
        transform: none !important;
    }

    body .site-header .desktop-search-clear {
        position: relative !important;
        z-index: 1 !important;
    }

    body .site-header .desktop-search-form:has(#desktop-search-input:focus)
    .desktop-search-submit {
        visibility: hidden !important;
    }

    body .site-header .desktop-search-form:has(#desktop-search-input:focus)
    .desktop-search-clear[hidden] {
        display: inline-flex !important;
    }
}

/* Correção: esconder a lupa desktop quando o campo estiver focado */
@media (min-width: 701px) {
    body .site-header .desktop-search-form:focus-within .desktop-search-submit {
        display: none !important;
    }
}

/* Estado ativo da busca desktop: apenas o X */
@media (min-width: 701px) {
    body .site-header .desktop-search-form.is-search-active .desktop-search-submit {
        display: none !important;
    }

    body .site-header .desktop-search-form.is-search-active .desktop-search-clear[hidden] {
        display: inline-flex !important;
    }
}

        
/* Busca mobile: ocultar a lupa interna enquanto a pesquisa está aberta */
@media (max-width: 700px) {
    body .unified-search-overlay.is-open button.unified-search-submit {
        display: none !important;
    }
}

/* Busca mobile aberta: esconder somente a lupa interna */
@media (max-width: 700px) {
    html body div#unified-search-overlay.is-open
    form#unified-search-form button#unified-search-submit {
        display: none !important;
        visibility: hidden !important;
    }
}

/* =========================================
   SUGESTÕES DE BUSCA — ROLAGEM INDEPENDENTE
   Desktop e mobile
========================================= */

/* Portal de sugestões da busca desktop */
@media (min-width: 701px) {
    body #header-desktop-search-suggestions:not([hidden]) {
        max-height: min(72vh, 620px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        touch-action: pan-y;
    }
}

/* Sugestões da busca mobile */
@media (max-width: 700px) {
    body .unified-search-overlay .unified-search-suggestions:not([hidden]) {
        max-height: calc(100dvh - 150px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        touch-action: pan-y;
    }
}


/* Rolagem independente dos painéis reais de sugestões */
@media (min-width: 701px) {
    html body #header-desktop-search-suggestions:not([hidden]),
    html body #desktop-search-suggestions:not([hidden]) {
        max-height: min(65vh, 560px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 700px) {
    html body #unified-search-overlay.is-open
    #unified-search-suggestions:not([hidden]) {
        max-height: calc(100dvh - 220px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}

/* BUSCA DESKTOP: ROLAGEM INDEPENDENTE CONFIRMADA */
@media (min-width: 701px) {
    html body .header-desktop-search #desktop-search-suggestions:not([hidden]) {
        height: auto !important;
        max-height: min(65vh, 560px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch;
    }
}


/* Canarinho: padroniza altura dos cards de músicas no desktop */
@media (min-width: 769px) {
    body .site-header a.desktop-search-song-item {
        padding: 12px 20px !important;
        box-sizing: border-box !important;
    }

    body .site-header a.desktop-search-song-item .desktop-search-song-content {
        gap: 4px !important;
    }
}

/* Canarinho: altura compacta e consistente na busca desktop */
@media (min-width: 769px) {
    body .site-header a.desktop-search-suggestion-item.desktop-search-song-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 20px !important;
        box-sizing: border-box !important;
    }

    body .site-header a.desktop-search-suggestion-item.desktop-search-song-item .desktop-search-song-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    body .site-header a.desktop-search-suggestion-item.desktop-search-song-item strong,
    body .site-header a.desktop-search-suggestion-item.desktop-search-song-item span {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Canarinho: aproxima o título da música do nome do artista */
@media (min-width: 769px) {
    body .site-header a.desktop-search-song-item .desktop-search-song-content {
        gap: 0 !important;
        row-gap: 0 !important;
    }
}


/* Canarinho Ads: anúncios intermediários nas letras e cifras */
.song-inline-ad {
    display: block;
    clear: both;
    width: 100%;
    max-width: 720px;
    margin: 30px auto;
    padding: 0;
    text-align: left;
    white-space: normal;
    line-height: normal;
    box-sizing: border-box;
}

.song-inline-ad-label {
    display: block;
    margin: 0 0 8px;
    color: #9299a8;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.song-lyrics-stanza {
    white-space: pre-line;
    margin: 0;
    padding: 0;
}

.song-reading-lyrics .song-lyrics-stanza + .song-lyrics-stanza {
    margin-top: 0;
}

.song-inline-ad-product-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #ffffff;
    color: #202124;
    text-align: left;
    white-space: normal;
    line-height: normal;
    box-sizing: border-box;
}

.song-inline-ad-product-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 190px;
    max-height: 300px;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 12px;
    background: #f5f5f5;
    color: #666666;
    box-sizing: border-box;
}

.song-inline-ad-product-image-icon {
    font-size: clamp(64px, 20vw, 100px);
    line-height: 1;
}

.song-inline-ad-image-caption {
    font-size: 12px;
}

.song-inline-ad-product-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 16px;
    background: #ffffff;
    color: #202124;
    box-sizing: border-box;
}

.song-inline-ad-product-tag {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 4px;
    background: #fff0e9;
    color: #c94316;
    font-size: 11px;
    font-weight: 700;
}

.song-inline-ad-product-title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #202124;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.song-inline-ad-product-description {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #626262;
    font-size: 13px;
    line-height: 1.5;
}

.song-inline-ad-product-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 0;
}

.song-inline-ad-current-price {
    color: #d93625;
    font-size: 21px;
    font-weight: 700;
}

.song-inline-ad-discount {
    padding: 3px 5px;
    border-radius: 4px;
    background: #fff0ed;
    color: #d93625;
    font-size: 12px;
}

.song-inline-ad-product-rating {
    margin: 0;
    color: #333333;
    font-size: 12px;
    line-height: 1.5;
}

.song-inline-ad-product-rating > span:first-child {
    color: #e5a000;
}

.song-inline-ad-rating-separator {
    padding: 0 3px;
    color: #888888;
}

.song-inline-ad-product-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 3px 0 0;
    padding: 11px 13px;
    border: 1px solid #dedede;
    border-radius: 7px;
    background: #ffffff;
    color: #333333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-sizing: border-box;
}

.song-inline-ad-disclaimer {
    color: #777777;
    font-size: 10px;
    line-height: 1.4;
}

@media (min-width: 769px) {
    .song-inline-ad-product-card {
        flex-direction: row;
        align-items: stretch;
    }

    .song-inline-ad-product-image {
        flex: 0 0 40%;
        width: 40%;
        min-height: 250px;
        max-height: none;
        aspect-ratio: auto;
    }

    .song-inline-ad-product-info {
        flex: 1;
        width: 60%;
        justify-content: center;
        padding: 18px;
    }
}

@media print {
    .song-inline-ad {
        display: none !important;
    }
}

/* Canarinho Ads: layout compacto e uniforme em letras e cifras */
.song-inline-ad {
    width: 100%;
    max-width: 720px;
    margin: 20px auto;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-sizing: border-box;
}

.song-inline-ad *,
.song-inline-ad *::before,
.song-inline-ad *::after {
    font-family: Arial, Helvetica, sans-serif !important;
    box-sizing: border-box;
}

.song-inline-ad-label {
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.7px;
}

.song-inline-ad-product-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.song-inline-ad-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: 210px;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 6px;
    overflow: hidden;
}

.song-inline-ad-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 196px;
    margin: 0;
    padding: 0;
    object-fit: contain;
}

.song-inline-ad-product-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 12px;
}

.song-inline-ad-product-tag {
    margin: 0;
    padding: 2px 5px;
    font-size: 10px;
    line-height: 1.4;
}

.song-inline-ad-product-title {
    margin: 0 !important;
    padding: 0;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 700;
}

.song-inline-ad-product-description {
    margin: 0 !important;
    padding: 0;
    font-size: 13px;
    line-height: 1.45;
}

.song-inline-ad-product-price {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 2px 0 0;
}

.song-inline-ad-current-price {
    font-size: 20px;
    line-height: 1.3;
}

.song-inline-ad-product-cta {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.4;
}

.song-inline-ad-product-cta a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    font: inherit;
    text-decoration: underline;
}

.song-inline-ad-disclaimer {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    font-size: 10px;
    line-height: 1.45;
}

@media (min-width: 769px) {
    .song-inline-ad-product-card {
        flex-direction: row;
        align-items: stretch;
    }

    .song-inline-ad-product-image {
        flex: 0 0 36%;
        width: 36%;
        height: auto;
        max-height: none;
        min-height: 180px;
        aspect-ratio: auto;
    }

    .song-inline-ad-product-image img {
        max-height: 240px;
    }

    .song-inline-ad-product-info {
        flex: 1;
        width: 64%;
        padding: 14px;
    }
}

@media print {
    .song-inline-ad {
        display: none !important;
    }
}

/* Canarinho Ads: ajuste definitivo mobile */
@media screen and (max-width: 700px) {
    .song-inline-ad {
        width: 100% !important;
        max-width: 720px !important;
        margin: 16px auto !important;
        padding: 0 !important;
        background: transparent !important;
        outline: none !important;
        box-sizing: border-box !important;
    }

    .song-inline-ad-product-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: #ffffff !important;
        border: 1px solid #dedede !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .song-inline-ad-product-image {
        width: 100% !important;
        height: 180px !important;
        min-height: 0 !important;
        max-height: 180px !important;
        aspect-ratio: auto !important;
        padding: 4px !important;
        background: #f5f5f5 !important;
        overflow: hidden !important;
    }

    .song-inline-ad-product-image img {
        display: block !important;
        width: 100% !important;
        height: 172px !important;
        max-height: 172px !important;
        object-fit: contain !important;
    }

    .song-inline-ad-product-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        background: #ffffff !important;
        color: #202124 !important;
    }

    .song-inline-ad-product-title {
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .song-inline-ad-product-price {
        margin: 2px 0 0 !important;
    }

    .song-inline-ad-product-cta {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .song-inline-ad-disclaimer {
        display: block !important;
        margin: 2px 0 0 !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
    }
}

/* Canarinho Ads: métricas de avaliação e vendas */
.song-inline-ad-product-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 2px 0 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #5f6368;
}
.song-inline-ad-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8a6100;
    font-weight: 600;
}
.song-inline-ad-rating span {
    color: #e6a817;
    font-size: 15px;
}
.song-inline-ad-sales {
    color: #5f6368;
    font-weight: 500;
}
@media screen and (max-width: 700px) {
    .song-inline-ad-product-metrics {
        gap: 6px 12px;
        margin: 2px 0 4px;
        font-size: 12px;
    }
}

/* Canarinho Ads: cartão compacto com preço e CTA alinhados */
.song-inline-ad-product-info {
    gap: 6px;
}

.song-inline-ad-product-metrics {
    margin: 0 0 1px;
}

.song-inline-ad-price-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}

.song-inline-ad-price-action-row .song-inline-ad-product-price {
    width: auto;
    min-width: 0;
    margin: 0;
}

.song-inline-ad-price-action-row .song-inline-ad-product-cta {
    flex: 0 0 auto;
    margin: 0;
}

.song-inline-ad-price-action-row .song-inline-ad-product-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 13px;
    border: 0;
    border-radius: 7px;
    background: #c43d32;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

@media screen and (max-width: 700px) {
    .song-inline-ad-price-action-row {
        gap: 8px;
    }

    .song-inline-ad-price-action-row .song-inline-ad-product-cta a {
        padding: 10px 11px;
        font-size: 13px;
    }
}

/* Canarinho Ads: títulos limitados a duas linhas */
.song-inline-ad-product-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Cabeçalho do anúncio: publicidade + plataforma */
.song-inline-ad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 6px;
}

.song-inline-ad-header .song-inline-ad-label {
    margin: 0;
    flex: 0 1 auto;
}

.song-inline-ad-platform-logo {
    display: block;
    flex: 0 0 auto;
    width: 80px;
    max-width: 30%;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 700px) {
    .song-inline-ad-header {
        gap: 8px;
        margin-bottom: 6px;
    }

    .song-inline-ad-platform-logo {
        width: 72px;
        max-width: 32%;
    }
}

/* Canarinho Ads: logo da plataforma à esquerda e métricas à direita */
.song-inline-ad-product-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0 0 2px;
}

.song-inline-ad-product-topline .song-inline-ad-platform-logo {
    display: block;
    flex: 0 1 auto;
    width: 72px;
    max-width: 30%;
    height: auto;
    object-fit: contain;
}

.song-inline-ad-product-topline .song-inline-ad-product-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    text-align: right;
}

@media screen and (min-width: 701px) {
    .song-inline-ad-product-topline .song-inline-ad-platform-logo {
        width: 80px;
    }
}

@media screen and (max-width: 380px) {
    .song-inline-ad-product-topline {
        gap: 5px;
    }

    .song-inline-ad-product-topline .song-inline-ad-platform-logo {
        width: 64px;
    }

    .song-inline-ad-product-topline .song-inline-ad-product-metrics {
        gap: 3px 6px;
        font-size: 11px;
    }
}


/* Canarinho Ads: ofertas antes da impressão */
.print-ads-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .72);
    overflow-y: auto;
}

.print-ads-dialog {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.print-ads-dialog h2 {
    margin: 0 35px 8px 0;
    font-size: 23px;
    line-height: 1.3;
}

.print-ads-dialog > p {
    margin: 0 0 20px;
    color: #64748b;
}

.print-ads-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    font-size: 28px;
    cursor: pointer;
}

.print-ads-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.print-ad-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.print-ad-card img {
    display: block;
    width: 100%;
    height: 145px;
    object-fit: contain;
    margin-bottom: 10px;
}

.print-ad-info strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.print-ad-price {
    margin: 8px 0;
    font-weight: 700;
}

.print-ad-offer,
.print-ads-continue {
    display: inline-block;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: #15803d;
    color: #fff !important;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.print-ads-continue {
    display: block;
    width: 100%;
    margin-top: 20px;
    background: #1f2937;
}

@media (max-width: 520px) {
    .print-ads-dialog {
        padding: 22px 16px;
    }

    .print-ads-dialog h2 {
        font-size: 20px;
    }

    .print-ads-products {
        grid-template-columns: 1fr;
    }

    .print-ad-card {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .print-ad-card img {
        flex: 0 0 100px;
        width: 100px;
        height: 100px;
        margin: 0;
    }

    .print-ad-info {
        min-width: 0;
    }
}


/* Canarinho Ads: refinamento visual dos cards v2 */
.print-ads-dialog {
    max-width: 760px;
    padding: 26px;
    border-radius: 20px;
}

.print-ads-dialog h2 {
    font-size: 24px;
    letter-spacing: -.4px;
}

.print-ads-products {
    gap: 12px;
}

.print-ad-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
    border-color: #e1e7ef;
    border-radius: 14px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.print-ad-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

.print-ad-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 142px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 8px;
    background: #f8fafc;
}

.print-ad-card img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}

.print-ad-no-image {
    color: #64748b;
    font-size: 13px;
}

.print-ad-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.print-ad-platform {
    display: inline-block;
    margin-bottom: 7px;
    color: #d83b2d;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

.print-ad-info strong {
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.print-ad-price {
    margin: 9px 0 12px;
    color: #d83b2d;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.25;
}

.print-ad-offer {
    margin-top: auto;
    padding: 10px 14px;
    border-radius: 8px;
    background: #c83b30;
    font-size: 14px;
    font-weight: 700;
}

.print-ad-offer:hover {
    background: #ad3027;
}

.print-ads-continue {
    padding: 14px 16px;
    border-radius: 9px;
    font-size: 15px;
}

@media (max-width: 520px) {
    .print-ads-overlay {
        align-items: center;
        padding: 12px;
    }

    .print-ads-dialog {
        width: 100%;
        max-height: 88vh;
        padding: 22px 16px 16px;
        border-radius: 16px;
    }

    .print-ads-dialog h2 {
        font-size: 21px;
    }

    .print-ads-dialog > p {
        font-size: 13px;
        line-height: 1.45;
    }

    .print-ads-products {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .print-ad-card {
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
        padding: 10px;
    }

    .print-ad-image-wrap {
        flex: 0 0 104px;
        width: 104px;
        height: 112px;
        margin: 0;
    }

    .print-ad-info {
        flex: 1;
        justify-content: center;
    }

    .print-ad-info strong {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }

    .print-ad-platform {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .print-ad-price {
        margin: 6px 0 8px;
        font-size: 17px;
    }

    .print-ad-offer {
        padding: 8px 11px;
        font-size: 13px;
    }

    .print-ads-continue {
        margin-top: 14px;
        padding: 12px;
    }
}


/* Canarinho Ads: overlay mais compacto v3 */
.print-ads-dialog {
    max-width: 650px;
    padding: 22px;
    border-radius: 18px;
}

.print-ads-dialog h2 {
    font-size: 22px;
    margin-bottom: 6px;
}

.print-ads-dialog > p {
    margin-bottom: 15px;
    font-size: 14px;
}

.print-ads-products {
    gap: 10px;
}

.print-ad-card {
    padding: 9px;
    border-radius: 12px;
}

.print-ad-image-wrap {
    height: 115px;
    margin-bottom: 8px;
}

.print-ad-info strong {
    font-size: 13px;
    line-height: 1.4;
}

.print-ad-price {
    margin: 7px 0 9px;
    font-size: 17px;
}

.print-ad-offer {
    padding: 9px 12px;
    font-size: 13px;
}

.print-ads-continue {
    margin-top: 15px;
    padding: 12px;
    font-size: 14px;
}

@media (max-width: 520px) {
    .print-ads-overlay {
        padding: 10px;
    }

    .print-ads-dialog {
        max-height: 84vh;
        padding: 19px 13px 13px;
        border-radius: 15px;
    }

    .print-ads-dialog h2 {
        font-size: 19px;
    }

    .print-ads-dialog > p {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .print-ad-card {
        gap: 10px;
        padding: 8px;
    }

    .print-ad-image-wrap {
        flex-basis: 88px;
        width: 88px;
        height: 92px;
        margin: 0;
    }

    .print-ad-info strong {
        font-size: 12px;
    }

    .print-ad-price {
        margin: 5px 0 7px;
        font-size: 16px;
    }

    .print-ad-offer {
        padding: 7px 10px;
        font-size: 12px;
    }

    .print-ads-continue {
        margin-top: 11px;
        padding: 11px;
    }
}


/* Canarinho Ads: ajuste final de compactação v4 */
.print-ads-dialog {
    max-width: 610px;
    padding: 19px;
}
.print-ads-dialog h2 {
    font-size: 21px;
}
.print-ads-dialog > p {
    margin-bottom: 12px;
}
.print-ads-products {
    gap: 8px;
}
.print-ad-card {
    padding: 8px;
}
.print-ad-image-wrap {
    height: 105px;
}
.print-ad-price {
    font-size: 16px;
}
.print-ad-offer {
    padding: 8px 10px;
}
.print-ads-continue {
    margin-top: 12px;
    padding: 11px;
}

@media (max-width: 520px) {
    .print-ads-overlay {
        padding: 8px;
    }
    .print-ads-dialog {
        max-height: 82vh;
        padding: 16px 11px 11px;
    }
    .print-ads-dialog h2 {
        font-size: 18px;
    }
    .print-ads-dialog > p {
        margin-bottom: 10px;
        font-size: 12px;
    }
    .print-ad-card {
        gap: 8px;
        padding: 7px;
    }
    .print-ad-image-wrap {
        flex-basis: 80px;
        width: 80px;
        height: 84px;
    }
    .print-ad-price {
        font-size: 15px;
    }
    .print-ad-offer {
        padding: 7px 9px;
    }
    .print-ads-continue {
        margin-top: 9px;
        padding: 10px;
    }
}



/* Canarinho Ads: métricas e títulos compactos v5 */
.print-ad-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 7px;
}

.print-ad-topline .print-ad-platform {
    flex-shrink: 0;
}

.print-ad-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

.print-ad-rating {
    color: #b77900;
    font-weight: 700;
    white-space: nowrap;
}

.print-ad-sales {
    white-space: nowrap;
}

.print-ad-info .print-ad-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 2.8em;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    .print-ad-topline {
        align-items: flex-start;
    }

    .print-ad-metrics {
        font-size: 11px;
        gap: 5px;
    }

    .print-ad-info .print-ad-title {
        min-height: 2.8em;
    }
}



/* Canarinho Ads: preço e botão na mesma linha v6 */

/* Métricas alinhadas à direita na linha da plataforma */
.print-ad-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.print-ad-topline .print-ad-platform {
    margin-right: auto;
}

.print-ad-topline .print-ad-metrics {
    margin-left: auto;
    justify-content: flex-end;
    text-align: right;
}

/* Preço à esquerda e CTA à direita */
.print-ad-info {
    min-width: 0;
}

.print-ad-info .print-ad-price {
    display: inline-block;
    margin: 10px 0 0;
    font-size: 18px;
    line-height: 1.3;
}

.print-ad-info .print-ad-offer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 0 auto;
    white-space: nowrap;
}

.print-ad-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.print-ad-info .print-ad-price {
    align-self: flex-start;
}

.print-ad-info .print-ad-offer {
    align-self: flex-end;
    margin-top: -34px;
    margin-bottom: 0;
}

@media (max-width: 520px) {
    .print-ad-topline {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .print-ad-topline .print-ad-metrics {
        font-size: 11px;
    }

    .print-ad-info .print-ad-price {
        font-size: 16px;
    }

    .print-ad-info .print-ad-offer {
        margin-top: -31px;
    }
}



/* Canarinho Ads: cards maiores e mais respiro v7 */

/* Aumenta um pouco o modal */
.print-ads-dialog {
    max-width: 820px;
    padding: 24px;
}

/* Mais espaço entre os cards */
.print-ads-products {
    gap: 12px;
}

/* Cards ligeiramente mais espaçosos */
.print-ad-card {
    padding: 11px;
}

/* Imagens um pouco maiores */
.print-ad-image-wrap {
    height: 145px;
}

/* Mantém o título em até duas linhas e separa da área de preço */
.print-ad-info .print-ad-title {
    margin-bottom: 12px;
    min-height: 2.8em;
    line-height: 1.4;
}

/* Preço e botão com mais espaço em relação ao título */
.print-ad-info .print-ad-price {
    margin-top: 12px;
    font-size: 19px;
}

.print-ad-info .print-ad-offer {
    margin-top: -36px;
}

/* Ajustes para telas menores */
@media (max-width: 520px) {
    .print-ads-dialog {
        padding: 18px 13px 13px;
    }

    .print-ad-card {
        padding: 8px;
    }

    .print-ad-image-wrap {
        height: 105px;
    }

    .print-ad-info .print-ad-title {
        margin-bottom: 10px;
    }

    .print-ad-info .print-ad-price {
        margin-top: 10px;
        font-size: 16px;
    }

    .print-ad-info .print-ad-offer {
        margin-top: -31px;
    }
}



/* Canarinho Ads: três ofertas e espaçamento desktop v8 */
@media (min-width: 769px) {
    .print-ads-dialog {
        max-width: 1050px;
    }

    .print-ads-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .print-ad-card {
        min-width: 0;
        padding: 9px;
    }

    .print-ad-image-wrap {
        height: 125px;
    }

    .print-ad-info .print-ad-title {
        font-size: 12px;
    }

    .print-ad-info .print-ad-price {
        font-size: 16px;
    }

    .print-ad-info .print-ad-offer {
        padding: 8px 9px;
        font-size: 12px;
    }
}


/* Canarinho Ads: cards mais estreitos no desktop v9 */
@media (min-width: 769px) {
    .print-ads-products {
        grid-template-columns: repeat(3, minmax(0, 340px));
        justify-content: center;
        column-gap: 10px;
    }

    .print-ad-card {
        padding: 9px;
    }

    .print-ad-image-wrap {
        height: 115px;
    }

    .print-ad-info .print-ad-title {
        font-size: 12px;
        line-height: 1.4;
    }

    .print-ad-info .print-ad-price {
        font-size: 16px;
    }

    .print-ad-info .print-ad-offer {
        padding: 8px;
        font-size: 12px;
    }
}


/* Canarinho Ads: cards ultracompactos desktop v10 */
@media (min-width: 769px) {
    .print-ads-products {
        grid-template-columns: repeat(3, minmax(0, 113px));
        justify-content: center;
        gap: 8px;
    }

    .print-ad-card {
        padding: 6px;
        min-width: 0;
    }

    .print-ad-image-wrap {
        height: 65px;
    }

    .print-ad-topline {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .print-ad-topline .print-ad-metrics {
        margin-left: 0;
        justify-content: flex-start;
        font-size: 9px;
    }

    .print-ad-info .print-ad-title {
        font-size: 10px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .print-ad-info .print-ad-price {
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .print-ad-info .print-ad-offer {
        align-self: stretch;
        justify-content: center;
        margin: 8px 0 0;
        padding: 6px 3px;
        font-size: 9px;
        white-space: normal;
    }
}


/* Canarinho Ads: modal e cards dinamicos v11 */
@media (min-width: 769px) {
    .print-ads-overlay {
        padding: 16px;
    }

    .print-ads-dialog {
        box-sizing: border-box;
        width: fit-content;
        max-width: min(1050px, calc(100vw - 32px));
        padding: 24px;
    }

    .print-ads-products {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
        justify-content: center;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .print-ad-card {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding: 10px;
    }

    .print-ad-image-wrap {
        height: 125px;
    }

    .print-ad-topline {
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
    }

    .print-ad-topline .print-ad-metrics {
        margin-left: auto;
        font-size: 11px;
    }

    .print-ad-info .print-ad-title {
        font-size: 13px;
        line-height: 1.4;
        min-height: 2.8em;
        margin-bottom: 12px;
        overflow-wrap: anywhere;
    }

    .print-ad-info .print-ad-price {
        font-size: 17px;
    }

    .print-ad-info .print-ad-offer {
        font-size: 12px;
        padding: 8px 10px;
    }

    .print-ads-continue {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .print-ads-dialog {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .print-ads-products {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}



/* Canarinho Ads: corrigir layout horizontal desktop v12 */
@media (min-width: 769px) {
    .print-ads-overlay {
        padding: 16px;
        overflow-y: auto;
    }

    .print-ads-dialog {
        width: max-content;
        max-width: calc(100vw - 32px);
        min-width: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    .print-ads-products {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 300px));
        justify-content: center;
        gap: 10px;
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
    }

    .print-ad-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}



/* Canarinho Ads: alinhamento das linhas do card v13 */
@media (min-width: 769px) {
    .print-ad-topline {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        width: 100%;
    }

    .print-ad-topline .print-ad-platform {
        flex: 0 0 auto;
        margin-right: 0;
    }

    .print-ad-topline .print-ad-metrics {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        margin-left: auto;
        white-space: nowrap;
        font-size: 11px;
    }

    .print-ad-info {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
    }

    .print-ad-info .print-ad-title {
        margin-bottom: 12px;
    }

    .print-ad-info .print-ad-price {
        align-self: flex-start;
        margin-top: 0;
        max-width: 60%;
    }

    .print-ad-info .print-ad-offer {
        align-self: flex-end;
        margin-top: -34px;
        margin-bottom: 0;
        white-space: nowrap;
    }
}



/* Canarinho Ads: respiro entre título e preço v14 */
@media (min-width: 769px) {
    .print-ad-info .print-ad-title {
        margin-bottom: 18px;
    }
}


/* Canarinho Ads: espaçamento entre título e produtos v15 */
.print-ads-dialog #print-ads-title {
    margin-bottom: 16px;
}


/* Canarinho Ads: ícone de impressão no botão do overlay v16 */
.print-ads-dialog .print-ads-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.print-ads-dialog .print-ads-print-icon {
    flex: 0 0 auto;
}


/* Canarinho Ads: botão de impressão compacto no desktop v17 */
@media (min-width: 768px) {
    .print-ads-dialog .print-ads-continue {
        width: fit-content;
        min-width: 220px;
        margin-inline: auto;
        padding: 14px 28px;
    }
}

/* Canarinho Ads: imagens ocupam melhor a area desktop v1 */
@media (min-width: 769px) {
    .print-ad-image-wrap {
        height: 145px;
        align-items: flex-start;
    }

    .print-ad-image-wrap img {
        max-height: 145px;
        object-fit: contain;
        object-position: center top;
    }
}