/* ===== assets/site.css ===== */
*{box-sizing:border-box}
:root{
    --bg:#060a10;
    --panel:#0d1420;
    --gold:#e4b657;
    --gold2:#f0ca77;
    --text:#fff;
    --muted:#99a4b2;
    --line:rgba(228,182,87,.42)
}

html,body{
    margin:0;
    min-height:100%;
    font-family:Arial;
    color:var(--text)
}

body{
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(228,182,87,.1),
            transparent 27%
        ),
        #060a10;
    padding-bottom:105px
}

.card{
    background:linear-gradient(180deg,#0d1420,#08101a);
    border:1px solid var(--line);
    box-shadow:0 12px 35px #0006
}

.ticker{
    height:34px;
    position:sticky;
    top:0;
    z-index:50;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    padding:0 16px;
    background:#070b12;
    border-bottom:1px solid var(--line);
    font-size:.7rem
}

.ticker b{
    color:var(--gold)
}

.tw{
    overflow:hidden
}

.tt{
    width:max-content;
    display:flex;
    gap:14px;
    align-items:center;
    white-space:nowrap;
    animation:t 30s linear infinite
}

.tt:hover{
    animation-play-state:paused
}

@keyframes t{
    to{
        transform:translateX(-50%)
    }
}

.page{
    max-width:1460px;
    margin:auto;
    padding:14px
}

.header{
    min-height:110px;
    border-radius:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    text-align:center
}

.logo{
    width:58px;
    height:58px;
    border:2px solid var(--gold);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--gold);
    font-weight:900
}

.header h1{
    margin:0;
    color:var(--gold2);
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:.05em
}

.header p{
    margin:5px 0 0;
    font-size:.7rem;
    letter-spacing:.3em
}

.layout{
    display:grid;
    grid-template-columns:.95fr 1.35fr .95fr;
    gap:14px;
    margin-top:14px
}

.panel{
    height:calc(100vh - 280px);
    min-height:570px;
    border-radius:24px;
    padding:16px;
    overflow:hidden
}

.panel>h2{
    margin:0 0 14px;
    color:var(--gold2);
    font-size:1rem
}

.mural{
    display:flex;
    flex-direction:column
}

.mural form{
    display:grid;
    gap:8px
}

.mural input,
.mural textarea{
    width:100%;
    background:#171f2b;
    border:1px solid #ffffff18;
    border-radius:10px;
    color:#fff;
    padding:11px
}

.mural textarea{
    height:80px;
    resize:none
}

.tools{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px
}

.tools button{
    background:#ffffff08;
    color:#fff;
    border:1px solid #ffffff18;
    border-radius:9px;
    padding:8px
}

.tools span{
    font-size:.67rem;
    color:#c4cbd4
}

.emojis{
    display:none;
    grid-template-columns:repeat(6,1fr);
    gap:4px
}

.emojis.open{
    display:grid
}

.emojis button{
    border:0;
    border-radius:6px;
    padding:6px
}

.send{
    background:#3b2d11;
    border:1px solid var(--gold);
    color:var(--gold2);
    font-weight:800;
    padding:11px;
    border-radius:10px
}

.messages{
    display:grid;
    gap:8px;
    overflow:auto;
    margin-top:8px
}

.messages article{
    background:#ffffff08;
    border:1px solid #ffffff10;
    border-radius:12px;
    padding:10px
}

.mh{
    display:flex;
    justify-content:space-between;
    gap:8px
}

.mural-author{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0
}

.mural-avatar-wrap{
    width:36px;
    height:36px;
    flex:0 0 36px;
    overflow:hidden;
    border-radius:50%
}

.mural-avatar{
    width:36px;
    height:36px;
    display:block;
    object-fit:cover;
    border-radius:50%
}

.mural-avatar-fallback{
    display:grid;
    place-items:center;
    background:#171f2b;
    color:#cbd3df;
    font-size:16px
}

.mural-author-copy{
    min-width:0
}

.mh strong,
.mh small{
    display:block
}

.mh small,
time{
    font-size:.68rem;
    color:#bfc7d2
}

.messages p{
    font-size:.8rem;
    margin:7px 0 0
}

.flag{
    width:20px;
    height:14px;
    object-fit:cover;
    vertical-align:-2px;
    margin-left:4px
}

.center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
        radial-gradient(
            circle at 50% 45%,
            #e4b65722,
            transparent 35%
        ),
        #0b1320
}

.label{
    align-self:flex-start;
    color:var(--gold);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.12em
}

.stage{
    position:relative;
    width:min(330px,68%);
    aspect-ratio:1;
    display:grid;
    place-items:center
}

.ring{
    position:absolute;
    inset:-12px;
    border-radius:50%;
    background:
        conic-gradient(
            #e4b65718,
            #f0ca77,
            #e4b65720,
            #d5a23a,
            #e4b65718
        );
    animation:spin 10s linear infinite
}

.ring:after{
    content:'';
    position:absolute;
    inset:7px;
    border-radius:50%;
    background:#0a111b
}

@keyframes spin{
    to{
        transform:rotate(360deg)
    }
}

.art{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
    border:3px solid var(--gold);
    background:#17130b
}

.art img{
    position:absolute;
    inset:0;
    z-index:5;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:none
}

.art span{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:4rem;
    color:var(--gold2);
    font-weight:900
}

.art.has-image span{
    display:none!important
}

.center h2{
    margin:22px 0 5px;
    color:var(--gold2);
    font-size:clamp(1.6rem,2.8vw,2.5rem);
    line-height:1.12;
    max-width:92%;

    /* Mantém o título sempre dentro da área reservada */
    height:2.24em;
    overflow:hidden;
    overflow-wrap:anywhere;

    /* Limita o título a no máximo 2 linhas */
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2
}

.artist{
    font-size:clamp(1rem,2vw,1.5rem)
}

.radios{
    display:flex;
    flex-direction:column
}

.radioList{
    display:grid;
    gap:7px;
    overflow:auto
}

.radioItem{
    width:100%;
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:9px;
    padding:9px;
    border:1px solid #ffffff14;
    border-radius:11px;
    background:#ffffff08;
    color:#fff;
    text-align:left
}

.radioItem.active{
    border-color:var(--gold);
    background:#e4b65718;
    color:var(--gold2)
}

.radioItem span{
    width:31px;
    height:31px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#ffffff0a
}

.radioItem b{
    font-size:.82rem
}


/* ===== CHAT INCORPORADO ===== */

.chat-section{
    width:min(1460px,calc(100% - 28px));
    margin:14px auto 115px;
    position:relative
}

.chat-main-iframe{
    display:block;
    width:100%;
    height:680px;
    border:1px solid rgba(228,182,87,.42);
    border-radius:24px;
    background:#060a10;
    box-shadow:0 12px 35px #0006
}


/* ===== PLAYER ===== */

.player{
    position:fixed;
    left:10px;
    right:10px;
    bottom:8px;
    z-index:55;
    min-height:86px;
    border-radius:22px;
    display:grid;
    grid-template-columns:1.2fr .55fr .8fr .9fr;
    gap:14px;
    align-items:center;
    padding:10px 15px
}

.pt{
    display:flex;
    gap:10px;
    align-items:center;
    min-width:0
}

.mini{
    position:relative;
    width:56px;
    height:56px;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    display:grid;
    place-items:center
}

.mini img{
    position:absolute;
    inset:0;
    z-index:5;
    width:100%;
    height:100%;
    object-fit:cover;
    display:none
}

.mini.has-image span{
    display:none!important
}

.pt small,
.pt strong,
.pt>div>span{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.pt small{
    color:var(--gold);
    font-size:.6rem
}

.pt strong{
    font-size:.82rem
}

.pt>div>span{
    font-size:.7rem;
    color:#ccd3dd
}

.pc{
    display:flex;
    justify-content:center;
    gap:6px
}

.player button{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid #ffffff18;
    background:transparent;
    color:#fff
}

.player button.play{
    width:52px;
    height:52px;
    background:#d6a33f;
    color:#111
}

.eq{
    height:42px;
    display:flex;
    align-items:flex-end;
    gap:3px;
    justify-content:center
}

.eq i{
    width:4px;
    height:12px;
    background:#d5a33b;
    border-radius:4px
}

.eq i:nth-child(3n){
    height:31px
}

.eq i:nth-child(4n){
    height:22px
}

.eq.playing i{
    animation:e .7s infinite alternate
}

@keyframes e{
    to{
        transform:scaleY(.4)
    }
}

.pr{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    font-size:.7rem
}

.pr input{
    width:110px
}


/* ===== RESPONSIVO ===== */

@media(max-width:900px){

    .layout{
        grid-template-columns:1fr
    }

    .panel{
        height:auto;
        min-height:0
    }

    .center{
        order:1;
        min-height:470px
    }

    .radios{
        order:2
    }

    .mural{
        order:3
    }

    .chat-section{
        width:calc(100% - 16px);
        margin:10px auto 145px
    }

    .chat-main-iframe{
        height:680px;
        border-radius:15px
    }

    .player{
        grid-template-columns:1fr auto
    }

    .eq,
    .pr{
        display:none
    }
}

@media(max-width:600px){

    body{
        padding-bottom:135px
    }

    .ticker{
        grid-template-columns:1fr
    }

    .ticker>b,
    .ticker>span{
        display:none
    }

    .page{
        padding:8px
    }

    .header{
        min-height:78px
    }

    .logo{
        width:42px;
        height:42px
    }

    .header h1{
        font-size:1.2rem
    }

    .header p{
        font-size:.55rem
    }

    .panel{
        border-radius:15px;
        padding:12px
    }

    .mural-avatar-wrap,
    .mural-avatar{
        width:34px;
        height:34px
    }

    .mural-avatar-wrap{
        flex-basis:34px
    }

    .center{
        min-height:400px
    }

    .stage{
        width:210px
    }

    .center h2{
        font-size:1.5rem
    }

    .chat-section{
        width:calc(100% - 12px);
        margin:8px auto 145px
    }

    .chat-main-iframe{
        height:660px;
        border-radius:12px
    }

    .player{
        left:6px;
        right:6px;
        bottom:6px;
        border-radius:15px
    }

    .pc button:not(.play){
        display:none
    }

    .mini{
        width:44px;
        height:44px
    }
}
@media(max-width:600px){

    .mural .messages{
        max-height:260px;
        overflow-y:auto;
    }

}
@media(max-width:600px){

    .mural .messages{
        max-height:260px;
        overflow-y:auto;
    }

    .radios .radioList{
        max-height:260px;
        overflow-y:auto;
    }

}
/* =========================================================
   TESTE VISUAL - TOCANDO AGORA / VINIL
   - A capa ocupa todo o disco
   - Ranhuras sobre a imagem
   - Fundo com a mesma capa desfocada
   - Vinil gira SOMENTE quando o player está tocando
   - Pause congela o disco na posição atual
   ========================================================= */

.center{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    justify-content:flex-start;
    padding-top:16px;
    --sf-now-art:none;
}

/* Imagem atual ampliada e desfocada ao fundo */
.center::before{
    content:'';
    position:absolute;
    z-index:0;
    inset:-32px;
    background-image:var(--sf-now-art);
    background-size:cover;
    background-position:center;
    filter:blur(28px) saturate(1.05);
    transform:scale(1.12);
    opacity:.22;
    transition:background-image .5s ease, opacity .5s ease;
    pointer-events:none;
}

/* Escurece o fundo para manter texto e likes legíveis */
.center::after{
    content:'';
    position:absolute;
    z-index:0;
    inset:0;
    background:
        radial-gradient(circle at 50% 38%,rgba(228,182,87,.08),transparent 35%),
        linear-gradient(180deg,rgba(5,10,18,.42),rgba(5,10,18,.80));
    pointer-events:none;
}

.center > *{
    position:relative;
    z-index:1;
}

/* Disco: tamanho pensado para sobrar área para título, artista e votação */
.center .stage{
    width:min(300px,64%);
    margin-top:8px;
    flex:0 0 auto;
    transform-origin:50% 50%;
    animation:sfVinylSpin 16s linear infinite;
    animation-play-state:paused;
    will-change:transform;
}

/* O JS aplica .is-playing somente quando o áudio realmente está tocando */
.center.is-playing .stage{
    animation-play-state:running;
}

@keyframes sfVinylSpin{
    to{transform:rotate(360deg)}
}

/* A borda externa vira um aro dourado discreto */
.center .ring{
    inset:-8px;
    animation:none;
    background:
        conic-gradient(
            rgba(228,182,87,.35),
            #f0ca77,
            rgba(228,182,87,.42),
            #c99534,
            rgba(228,182,87,.35)
        );
    box-shadow:
        0 0 18px rgba(228,182,87,.22),
        0 0 38px rgba(228,182,87,.10);
}

.center .ring:after{
    inset:5px;
    background:#07101a;
}

/* Foto ocupa 100% do "vinil" */
.center .art{
    border:2px solid rgba(240,202,119,.88);
    background:#111;
    box-shadow:
        inset 0 0 18px rgba(0,0,0,.35),
        0 8px 24px rgba(0,0,0,.32);
}

.center .art img{
    object-fit:cover;
}

/* Ranhuras do vinil por cima da capa */
.center .art.has-image::after{
    content:'';
    position:absolute;
    z-index:7;
    inset:0;
    border-radius:50%;
    pointer-events:none;
    background:
        radial-gradient(circle at 32% 24%,rgba(255,255,255,.18),transparent 16%),
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0 8px,
            rgba(0,0,0,.18) 9px,
            rgba(255,255,255,.055) 10px,
            transparent 11px 15px
        );
    mix-blend-mode:overlay;
    opacity:.92;
}

/* Apenas o pequeno ponto/furo central */
.center .art.has-image::before{
    content:'';
    position:absolute;
    z-index:9;
    left:50%;
    top:50%;
    width:13px;
    height:13px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
    background:
        radial-gradient(circle,#050608 0 34%,#d0a447 38% 61%,#171b20 65% 100%);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.45),
        0 1px 4px rgba(0,0,0,.55);
}

/* Mantém o título sob controle e reserva altura constante */
.center h2{
    margin-top:16px;
    margin-bottom:5px;
}

/* Reserva uma faixa estável para a votação já existente */
.center .sfmv-vote{
    flex:0 0 auto;
    margin-top:10px!important;
    min-height:82px;
}

/* Mobile: disco menor e fundo um pouco mais suave */
@media(max-width:600px){
    .center{
        min-height:430px;
        padding-top:12px;
    }

    .center .stage{
        width:205px;
        margin-top:6px;
    }

    .center::before{
        filter:blur(24px) saturate(1.02);
        opacity:.18;
    }

    .center h2{
        margin-top:13px;
        font-size:1.35rem;
    }

    .center .sfmv-vote{
        min-height:78px;
        margin-top:8px!important;
    }
}

/* Respeita usuários que desativam animações no sistema */
@media(prefers-reduced-motion:reduce){
    .center .stage{
        animation:none!important;
    }
}
/* =========================================================
   V3 - FUNDO DESFOCADO SEGURO
   Camada real atrás do Tocando Agora.
   Não interfere no player, metadata, pedidos ou votação.
   ========================================================= */

.center::before{
    display:none!important;
}

.center > .sf-now-bg{
    position:absolute!important;
    z-index:0!important;
    inset:-30px!important;
    pointer-events:none!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    filter:blur(14px) saturate(1.22) brightness(.92)!important;
    transform:scale(1.08)!important;
    opacity:.52!important;
    transition:background-image .5s ease,opacity .5s ease!important;
}

.center::after{
    z-index:1!important;
    background:
        radial-gradient(circle at 50% 35%,rgba(228,182,87,.08),transparent 40%),
        linear-gradient(180deg,rgba(5,10,18,.16),rgba(5,10,18,.48))!important;
}

.center > *:not(.sf-now-bg){
    position:relative;
    z-index:2!important;
}

@media(max-width:600px){
    .center > .sf-now-bg{
        /* Evita o blur em tempo real no celular: mesma arte, muito menos GPU. */
        filter:saturate(1.06) brightness(.72)!important;
        transform:scale(1.02)!important;
        opacity:.20!important;
    }
}
/* =========================================================
   ÍCONE antes de "TOCANDO AGORA"
   ========================================================= */

.label{
    display:flex;
    align-items:center;
    gap:10px;
}

.label::before{
    content:'';
    width:24px;
    height:24px;
    flex:0 0 24px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    filter:drop-shadow(0 0 8px rgba(228,182,87,.18));
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='none' stroke='%23e4b657' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='32' cy='32' r='4' fill='%23e4b657' stroke='%23e4b657'/>\
<path d='M22 22c-5 5-5 15 0 20'/>\
<path d='M42 22c5 5 5 15 0 20'/>\
<path d='M14 14c-9 9-9 27 0 36'/>\
<path d='M50 14c9 9 9 27 0 36'/>\
</g></svg>");
}

@media(max-width:600px){
    .label{
        gap:8px;
    }

    .label::before{
        width:20px;
        height:20px;
        flex-basis:20px;
    }
}
/* =========================================================
   CORREÇÃO - TÍTULO COMPLETO SEM EMPURRAR OS LIKES
   O JS reduz a fonte automaticamente até o título caber
   inteiro em no máximo 2 linhas.
   ========================================================= */

.center h2{
    display:block!important;
    -webkit-line-clamp:unset!important;
    line-clamp:unset!important;
    -webkit-box-orient:initial!important;

    width:92%;
    max-width:92%;
    height:auto!important;
    min-height:2.24em;
    max-height:none!important;

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

    line-height:1.12!important;
    text-align:center;
}
/* =========================================================
   AJUSTE FINO - título mais compacto para não empurrar likes
   ========================================================= */

.center h2{
    margin-top:14px!important;
    margin-bottom:2px!important;
    line-height:1.06!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
}

.artist{
    margin-top:0!important;
    line-height:1.05!important;
}

.center .sfmv-vote{
    margin-top:6px!important;
    min-height:70px!important;
}
/* =========================================================
   FOOTER PREMIUM - inspirado exatamente no print aprovado
   ========================================================= */

.player{
    left:0!important;
    right:0!important;
    bottom:0!important;
    min-height:92px!important;
    border-radius:28px 28px 0 0!important;
    padding:14px 18px!important;
    gap:18px!important;
    grid-template-columns:1.3fr .72fr 1fr .95fr!important;
    align-items:center!important;
    background:
        radial-gradient(circle at 22% 50%,rgba(0,86,255,.18),transparent 18%),
        radial-gradient(circle at 62% 82%,rgba(244,184,63,.10),transparent 15%),
        radial-gradient(circle at 82% 30%,rgba(0,110,255,.12),transparent 18%),
        linear-gradient(180deg,#040a14 0%,#05101d 50%,#030913 100%)!important;
    border:1px solid rgba(228,182,87,.72)!important;
    box-shadow:
        0 -8px 22px rgba(0,0,0,.34),
        0 12px 28px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.03)!important;
    overflow:hidden;
}

.player::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,
            transparent 0 27%,
            rgba(228,182,87,.22) 27.05% 27.12%,
            transparent 27.2% 69.5%,
            rgba(228,182,87,.22) 69.55% 69.62%,
            transparent 69.7% 100%);
    opacity:.95;
}

.player::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:linear-gradient(90deg,transparent 0,#f0ca77 22%,#ffd86a 50%,#f0ca77 78%,transparent 100%);
    opacity:.9;
}

.pt,.pc,.eq,.pr{
    position:relative;
    z-index:1;
}

.pt{
    gap:14px!important;
}

.mini{
    width:72px!important;
    height:72px!important;
    border-radius:18px!important;
    border:2px solid rgba(240,202,119,.92)!important;
    box-shadow:
        0 0 0 2px rgba(228,182,87,.12),
        0 0 18px rgba(240,202,119,.18),
        inset 0 0 0 1px rgba(255,255,255,.05)!important;
    background:#0c1320!important;
}

.pt small{
    font-size:.9rem!important;
    color:#e4b657!important;
    margin-bottom:3px;
}

.pt strong{
    font-size:1.15rem!important;
    line-height:1.05!important;
    color:#fff!important;
}

.pt>div>span{
    font-size:.88rem!important;
    color:#c3ccd8!important;
    margin-top:2px;
}

.pc{
    gap:16px!important;
}

.player button{
    width:60px!important;
    height:60px!important;
    border-radius:50%!important;
    border:1px solid rgba(228,182,87,.72)!important;
    background:
        radial-gradient(circle at 50% 35%,rgba(255,255,255,.08),transparent 42%),
        linear-gradient(180deg,#09111e,#07101a)!important;
    color:#fff!important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 8px 18px rgba(0,0,0,.26)!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.player button:hover{
    transform:translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 18px rgba(240,202,119,.16),
        0 8px 18px rgba(0,0,0,.30)!important;
}

.player button.play{
    width:78px!important;
    height:78px!important;
    background:
        radial-gradient(circle at 50% 28%,rgba(255,247,211,.52),transparent 36%),
        linear-gradient(180deg,#f6d36f 0%,#d7a53c 100%)!important;
    color:#111!important;
    border:2px solid #f3c961!important;
    box-shadow:
        0 0 0 3px rgba(240,202,119,.10),
        0 0 26px rgba(240,202,119,.28),
        inset 0 1px 0 rgba(255,255,255,.40)!important;
    font-weight:900;
}

.eq{
    height:58px!important;
    gap:5px!important;
    justify-content:center!important;
    align-items:flex-end!important;
    position:relative;
}

.eq::before{
    content:'';
    position:absolute;
    left:50%;
    bottom:-6px;
    width:72%;
    height:18px;
    transform:translateX(-50%);
    background:radial-gradient(circle,rgba(255,214,106,.22) 0,rgba(255,214,106,.08) 35%,transparent 70%);
    filter:blur(6px);
    pointer-events:none;
}

.eq i{
    width:6px!important;
    border-radius:999px!important;
    box-shadow:0 0 8px currentColor!important;
    background:currentColor!important;
}

/* alturas variadas */
.eq i:nth-child(1){height:10px;color:#8b4dff}
.eq i:nth-child(2){height:18px;color:#b15cff}
.eq i:nth-child(3){height:25px;color:#4db3ff}
.eq i:nth-child(4){height:20px;color:#56d6ff}
.eq i:nth-child(5){height:32px;color:#f0ca77}
.eq i:nth-child(6){height:16px;color:#ffd84d}
.eq i:nth-child(7){height:14px;color:#ffb545}
.eq i:nth-child(8){height:22px;color:#ff8f2f}
.eq i:nth-child(9){height:42px;color:#ff5f35}
.eq i:nth-child(10){height:28px;color:#ff7245}
.eq i:nth-child(11){height:52px;color:#ff3a2f}
.eq i:nth-child(12){height:34px;color:#ff6a37}
.eq i:nth-child(13){height:17px;color:#ffb545}
.eq i:nth-child(14){height:14px;color:#ffd84d}
.eq i:nth-child(15){height:31px;color:#f0ca77}
.eq i:nth-child(16){height:22px;color:#61d4ff}
.eq i:nth-child(17){height:15px;color:#4db3ff}
.eq i:nth-child(18){height:11px;color:#8d6dff}

.eq.playing i{
    animation:footerEq 900ms ease-in-out infinite alternate!important;
}
.eq.playing i:nth-child(2n){animation-duration:750ms}
.eq.playing i:nth-child(3n){animation-duration:1100ms}
.eq.playing i:nth-child(4n){animation-duration:650ms}

@keyframes footerEq{
    from{transform:scaleY(.42);opacity:.78}
    to{transform:scaleY(1);opacity:1}
}

.pr{
    justify-content:flex-end!important;
    gap:12px!important;
}

#playerOnline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:132px;
    height:44px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid rgba(228,182,87,.72);
    background:linear-gradient(180deg,#0a1321,#09111b);
    color:#fff;
    font-size:.95rem!important;
    font-weight:800;
    position:relative;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 6px 16px rgba(0,0,0,.16);
}

#playerOnline::before{
    content:'👥';
    font-size:1.2rem;
    margin-right:10px;
    line-height:1;
}

#muteBtn{
    width:60px!important;
    height:60px!important;
    flex:0 0 60px;
    font-size:1.35rem!important;
}

.pr input{
    width:180px!important;
    height:18px;
    accent-color:#e4b657;
    filter:drop-shadow(0 0 5px rgba(228,182,87,.18));
}

.pr input::-webkit-slider-runnable-track{
    height:12px;
    border-radius:999px;
}

.pr input::-webkit-slider-thumb{
    margin-top:-4px;
}

/* Responsivo */
@media(max-width:900px){
    .player{
        grid-template-columns:1fr auto!important;
        gap:10px!important;
        padding:12px 14px!important;
        min-height:94px!important;
    }

    .pt{
        grid-column:1 / 2;
    }

    .pc{
        grid-column:2 / 3;
        justify-self:end;
        gap:10px!important;
    }

    .eq,.pr{
        grid-column:1 / 3;
    }

    .eq{
        order:3;
        height:42px!important;
    }

    .pr{
        order:4;
        justify-content:space-between!important;
    }

    .player::before{
        background:none;
    }
}

@media(max-width:600px){
    body{
        padding-bottom:150px!important;
    }

    .player{
        left:6px!important;
        right:6px!important;
        bottom:6px!important;
        border-radius:20px!important;
        min-height:126px!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
        padding:12px!important;
    }

    .pt,.pc,.eq,.pr{
        width:100%;
        justify-content:center!important;
    }

    .pt{
        justify-content:flex-start!important;
    }

    .mini{
        width:52px!important;
        height:52px!important;
        border-radius:14px!important;
    }

    .pt small{
        font-size:.66rem!important;
    }

    .pt strong{
        font-size:.88rem!important;
    }

    .pt>div>span{
        font-size:.74rem!important;
    }

    .player button{
        width:46px!important;
        height:46px!important;
    }

    .player button.play{
        width:60px!important;
        height:60px!important;
    }

    .eq{
        display:flex!important;
        height:34px!important;
        gap:4px!important;
    }

    #playerOnline{
        min-width:122px;
        height:38px;
        font-size:.82rem!important;
    }

    #muteBtn{
        width:46px!important;
        height:46px!important;
        font-size:1.1rem!important;
    }

    .pr input{
        width:120px!important;
    }
}
/* =========================================================
   AJUSTE FINO - badge de ouvintes em uma linha
   ========================================================= */

#playerOnline{
    min-width:150px!important;
    padding:0 14px!important;
    gap:8px!important;
    white-space:nowrap!important;
    font-size:.82rem!important;
    letter-spacing:0!important;
    line-height:1!important;
}

#playerOnline::before{
    font-size:1rem!important;
    margin-right:0!important;
    flex:0 0 auto;
}

@media(max-width:600px){
    #playerOnline{
        min-width:110px!important;
        padding:0 10px!important;
        font-size:.76rem!important;
        gap:6px!important;
    }

    #playerOnline::before{
        font-size:.92rem!important;
    }
}
/* =========================================================
   AJUSTE FINO - botões do footer com o mesmo efeito do print
   ========================================================= */

/* Dá mais presença ao bloco dos controles */
.pc{
    gap:20px!important;
}

/* Botões anterior/próximo mais brilhantes e refinados */
#prevBtn,
#nextBtn{
    position:relative!important;
    width:60px!important;
    height:60px!important;
    border-radius:50%!important;
    border:1.6px solid rgba(240,202,119,.92)!important;
    background:
        radial-gradient(circle at 50% 28%,rgba(255,255,255,.12),transparent 36%),
        linear-gradient(180deg,#0b1422 0%,#07101a 55%,#050c15 100%)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -10px 20px rgba(0,0,0,.18),
        0 0 0 1px rgba(240,202,119,.10),
        0 0 16px rgba(240,202,119,.14),
        0 10px 18px rgba(0,0,0,.24)!important;
    color:transparent!important;
    font-size:0!important;
    overflow:visible!important;
}

#prevBtn::before,
#nextBtn::before{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#f4f7fb;
    line-height:1;
    font-size:22px;
    text-shadow:
        0 0 10px rgba(255,255,255,.16),
        0 1px 0 rgba(0,0,0,.30);
}

#prevBtn::before{content:'⏮';}
#nextBtn::before{content:'⏭';}

#prevBtn:hover,
#nextBtn:hover{
    transform:translateY(-1px)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -10px 20px rgba(0,0,0,.16),
        0 0 0 1px rgba(240,202,119,.14),
        0 0 22px rgba(240,202,119,.22),
        0 10px 20px rgba(0,0,0,.28)!important;
}

/* Play central com halo forte, igual à proposta do print */
#playBtn.play{
    position:relative!important;
    z-index:1;
    width:82px!important;
    height:82px!important;
    border-radius:50%!important;
    border:2px solid #f5d170!important;
    background:
        radial-gradient(circle at 50% 24%,rgba(255,248,216,.62),transparent 36%),
        linear-gradient(180deg,#f8d872 0%,#e1b34b 62%,#c7922d 100%)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.44),
        inset 0 -12px 20px rgba(0,0,0,.10),
        0 0 0 1px rgba(255,246,204,.28),
        0 0 28px rgba(240,202,119,.28),
        0 14px 24px rgba(0,0,0,.28)!important;
    color:#0d1116!important;
    font-size:31px!important;
    font-weight:900!important;
    line-height:1!important;
}

#playBtn.play::before{
    content:'';
    position:absolute;
    inset:-8px;
    border-radius:50%;
    pointer-events:none;
    background:
        radial-gradient(circle,rgba(255,224,117,.22) 0,rgba(255,224,117,.08) 45%,transparent 72%);
    box-shadow:
        0 0 0 2px rgba(242,205,103,.42),
        0 0 24px rgba(242,205,103,.32),
        0 0 42px rgba(242,205,103,.18);
    z-index:-1;
}

#playBtn.play::after{
    content:'';
    position:absolute;
    inset:4px;
    border-radius:50%;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.22);
    opacity:.9;
}

/* Dá um pequeno brilho extra enquanto estiver tocando */
#playBtn.play[aria-pressed="true"],
body.is-playing-footer #playBtn.play{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.46),
        inset 0 -12px 20px rgba(0,0,0,.08),
        0 0 0 1px rgba(255,246,204,.34),
        0 0 34px rgba(240,202,119,.34),
        0 16px 28px rgba(0,0,0,.30)!important;
}

/* Mobile: mantém o mesmo efeito, só reduz escala */
@media(max-width:600px){
    .pc{
        gap:12px!important;
    }

    #prevBtn,
    #nextBtn{
        width:48px!important;
        height:48px!important;
    }

    #prevBtn::before,
    #nextBtn::before{
        font-size:18px;
    }

    #playBtn.play{
        width:64px!important;
        height:64px!important;
        font-size:24px!important;
    }

    #playBtn.play::before{
        inset:-6px;
    }
}
/* =========================================================
   AJUSTE DE ALTURA - COLUNAS MAIS COMPACTAS
   Corrige o painel que ficou comprido demais no rollback.
   ========================================================= */

@media(min-width:901px){
    .panel{
        height:clamp(420px,55vh,470px)!important;
        min-height:420px!important;
    }

    .center{
        padding-top:12px!important;
    }

    .center .stage{
        width:min(245px,60%)!important;
        margin-top:4px!important;
    }

    .center h2{
        margin-top:11px!important;
        margin-bottom:3px!important;
        font-size:clamp(1.45rem,2vw,2rem)!important;
        line-height:1.05!important;
    }

    .center .artist{
        line-height:1.05!important;
    }

    .center .sfmv-vote{
        margin-top:5px!important;
        min-height:64px!important;
    }
}
/* =========================================================
   CORREÇÃO - TÍTULO NÃO SOBREPOR O ARTISTA
   Desktop apenas
   ========================================================= */
@media(min-width:901px){
    .center h2{
        width:92%!important;
        max-width:92%!important;
        margin:10px auto 7px!important;
        font-size:clamp(1.35rem,1.75vw,1.85rem)!important;
        line-height:1.08!important;
        min-height:0!important;
        height:auto!important;
        max-height:2.16em!important;
        overflow:hidden!important;
        display:-webkit-box!important;
        -webkit-box-orient:vertical!important;
        -webkit-line-clamp:2!important;
        line-clamp:2!important;
        position:relative!important;
        z-index:2!important;
    }

    .center .artist{
        position:relative!important;
        z-index:3!important;
        margin-top:0!important;
        margin-bottom:2px!important;
        line-height:1.15!important;
        min-height:1.15em!important;
    }

    .center .sfmv-vote{
        margin-top:6px!important;
    }
}
/* =========================================================
   TÍTULO TOCANDO AGORA - VERSÃO ESTÁVEL
   Sem JavaScript ajustando altura/fonte.
   Desktop apenas.
   ========================================================= */
@media(min-width:901px){
    .center h2{
        position:relative!important;
        z-index:3!important;

        width:92%!important;
        max-width:92%!important;

        margin:10px auto 6px!important;
        padding:0!important;

        font-size:clamp(1.25rem,1.6vw,1.75rem)!important;
        line-height:1.08!important;

        height:auto!important;
        min-height:0!important;
        max-height:2.16em!important;

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

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

        text-align:center!important;
    }

    .center .artist{
        position:relative!important;
        z-index:4!important;
        display:block!important;

        margin:0 auto 3px!important;
        padding:0!important;

        line-height:1.15!important;
        min-height:1.15em!important;

        font-size:1rem!important;
        text-align:center!important;
    }

    .center .sfmv-vote{
        position:relative!important;
        z-index:4!important;
        margin-top:5px!important;
    }
}
/* =========================================================
   TOCANDO AGORA - SEM SOBREPOSIÇÃO
   Volta ao espaçamento anterior e cria espaço SOMENTE
   quando o título realmente ocupa 2 linhas.
   Desktop apenas.
   ========================================================= */
@media(min-width:901px){

    .center h2{
        width:92%!important;
        max-width:92%!important;

        margin:10px auto 5px!important;
        padding:0!important;

        font-size:clamp(1.3rem,1.6vw,1.72rem)!important;
        line-height:1.08!important;

        height:auto!important;
        min-height:0!important;
        max-height:2.16em!important;

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

        overflow:hidden!important;
        overflow-wrap:anywhere!important;

        position:relative!important;
        z-index:3!important;
        text-align:center!important;
    }

    .center .artist{
        position:relative!important;
        z-index:4!important;

        margin:0 auto 3px!important;
        padding:0!important;

        line-height:1.15!important;
        min-height:1.15em!important;

        font-size:1rem!important;
        text-align:center!important;
    }

    .center .sfmv-vote{
        position:relative!important;
        z-index:4!important;
        margin-top:5px!important;
    }

    /* tamanho normal para títulos de 1 linha */
    .center .stage{
        width:min(245px,60%)!important;
        transition:width .18s ease!important;
    }

    /* se o título quebrar em 2 linhas, o disco encolhe um pouco.
       Assim o artista e os likes NÃO descem. */
    .center.title-two-lines .stage{
        width:min(220px,55%)!important;
    }

    .center.title-two-lines h2{
        font-size:clamp(1.18rem,1.45vw,1.55rem)!important;
        margin-top:8px!important;
        margin-bottom:4px!important;
    }
}
/* =========================================================
   FONTE PADRÃO DOS WIDGETS
   Visual condensado semelhante aos cards de Pedidos
   ========================================================= */

:root{
    --sf-font-condensed:'Roboto Condensed','Arial Narrow','Helvetica Condensed',Arial,sans-serif;
}

/* Textos gerais do site */
body,
button,
input,
textarea,
select,
option{
    font-family:var(--sf-font-condensed)!important;
}

/* Widgets principais */
.ticker,
.header,
.panel,
.mural,
.center,
.radioList,
.player,
#pedidosSite,
#pedidosSite *,
.sfmv-vote,
.sfmv-rank,
.sfmv-rank *,
.messages,
.messages *{
    font-family:var(--sf-font-condensed)!important;
}

/* Tocando Agora */
.center .label,
.center h2,
.center .artist,
.center .sfmv-question,
.center .sfmv-btn,
.center .sfmv-count{
    font-family:var(--sf-font-condensed)!important;
}

/* Deixa títulos com a mesma pegada visual dos Pedidos */
.center h2,
.panel > h2,
.header h1,
.sfmv-title,
#pedidosSite h1,
#pedidosSite h2,
#pedidosSite h3,
#pedidosSite strong{
    font-weight:800!important;
}

/* Artista e textos secundários */
.center .artist,
.pt strong,
.pt span,
.radioItem,
.messages article,
.sfmv-song,
.sfmv-artist{
    font-family:var(--sf-font-condensed)!important;
}

/* Campos mantêm leitura confortável */
input,
textarea{
    font-weight:400;
    letter-spacing:.01em;
}
/* =========================================================
   TOCANDO AGORA - VINIL UM POUCO MENOR
   Ganha espaço vertical sem empurrar artista e likes.
   Desktop apenas.
   ========================================================= */
@media(min-width:901px){
    .center .stage{
        width:min(218px,54%)!important;
        margin-top:2px!important;
    }

    .center.title-two-lines .stage{
        width:min(202px,50%)!important;
    }

    .center h2{
        margin-top:8px!important;
        margin-bottom:4px!important;
    }

    .center .artist{
        margin-top:0!important;
    }

    .center .sfmv-vote{
        margin-top:4px!important;
    }
}


/* =========================================================
   RECADOS V13.1 - INTEGRAÇÃO
   O painel esquerdo usa exatamente a mesma altura dos outros
   painéis no desktop. O conteúdo antigo fica invisível apenas
   para compatibilidade com scripts legados.
   ========================================================= */

.sf-recados-legacy{
    display:none!important;
}

.sf-recados-host{
    position:relative;
}

@media(min-width:901px){
    .sf-recados-host{
        height:clamp(420px,55vh,470px)!important;
        min-height:420px!important;
        padding:14px!important;
    }
}

@media(max-width:900px){
    /* CHAT NO MOBILE: fica entre Tocando Agora e Mais Rádios */
    .center{
        order:1!important;
    }

    .mural.sf-recados-host{
        order:2!important;
        display:block!important;
        height:640px!important;
        min-height:640px!important;
        max-height:none!important;
        padding:0!important;
        overflow:hidden!important;
        flex:none!important;
    }

    .radios{
        order:3!important;
    }

    .sf-recados-host #sfChatFrame{
        position:absolute!important;
        inset:0!important;
        width:100%!important;
        height:100%!important;
        min-height:640px!important;
        border:0!important;
        display:block!important;
        border-radius:inherit!important;
    }
}

@media(max-width:480px){
    .mural.sf-recados-host{
        height:600px!important;
        min-height:600px!important;
    }
    .sf-recados-host #sfChatFrame{
        min-height:600px!important;
    }
}

/* ===== recados/widget.css ===== */
.sf-recados-host,
.sf-recados-host *{
    box-sizing:border-box;
    font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
}

.sf-recados-host{
    --rw-gold:#e4b657;
    --rw-gold2:#f0ca77;
    background:
        radial-gradient(circle at 10% 0%,rgba(228,182,87,.10),transparent 26%),
        radial-gradient(circle at 100% 100%,rgba(37,115,255,.08),transparent 28%),
        linear-gradient(180deg,#09111d,#06101a)!important;
    border-color:rgba(228,182,87,.72)!important;
}

.sf-recados-host .recados-widget{
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sf-recados-host .rw-head{
    flex:0 0 auto;
}

.sf-recados-host .rw-head h2{
    margin:0!important;
    color:var(--rw-gold2)!important;
    font-size:1.18rem!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
}

.sf-recados-host .rw-stage{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    padding:0 18px;
    display:flex;
    align-items:center;
}

.sf-recados-host .rw-list{
    width:100%;
    min-height:0;
    display:flex;
    align-items:center;
}

.sf-recados-host .rw-loading,
.sf-recados-host .rw-empty{
    width:100%;
    min-height:230px;
    display:grid;
    place-items:center;
    text-align:center;
    color:#9eb0c7;
    font-size:.82rem;
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    background:rgba(12,24,40,.58);
}

.sf-recados-host .rw-card{
    --accent:#28c5ff;
    position:relative;
    width:100%;
    height:268px;
    max-height:100%;
    min-height:238px;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    border-radius:20px;
    overflow:hidden;
    background:
        radial-gradient(circle at 90% 12%,rgba(40,130,255,.10),transparent 26%),
        linear-gradient(180deg,#0d1a2a,#091220);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 0 18px rgba(40,130,255,.06);
}

.sf-recados-host .rw-card::before{
    content:'';
    position:absolute;
    left:0;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:999px;
    background:var(--accent);
    box-shadow:0 0 14px var(--accent);
}

.sf-recados-host .rw-userline{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    gap:11px;
    align-items:center;
    flex:0 0 56px;
}

.sf-recados-host .rw-avatar{
    width:54px;
    height:54px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    border:2px solid var(--accent);
    box-shadow:
        0 0 0 3px rgba(255,255,255,.03),
        0 0 18px color-mix(in srgb,var(--accent) 28%,transparent);
}

.sf-recados-host .rw-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.sf-recados-host .rw-avatar svg{
    width:36px;
    height:36px;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.14));
}

.sf-recados-host .rw-user{
    min-width:0;
}

.sf-recados-host .rw-name{
    color:#fff;
    font-weight:900;
    font-size:1rem;
    line-height:1.03;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sf-recados-host .rw-meta{
    margin-top:4px;
    display:flex;
    gap:6px;
    align-items:center;
    color:#f0ca77;
    font-size:.72rem;
    line-height:1.15;
    font-weight:800;
    min-width:0;
}

.sf-recados-host .rw-location{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sf-recados-host .rw-country-flag{
    width:18px;
    height:12px;
    object-fit:cover;
    border-radius:1px;
    flex:0 0 auto;
}

.sf-recados-host .rw-time{
    margin-top:3px;
    color:#86a6d0;
    font-size:.67rem;
}

.sf-recados-host .rw-bubble{
    position:relative;
    flex:0 0 80px;
    min-height:80px;
    max-height:80px;
    width:100%;
    padding:12px 14px 10px;
    border-radius:20px;
    overflow:hidden;
    background:
        radial-gradient(circle at 84% 12%,rgba(36,199,255,.18),transparent 22%),
        linear-gradient(180deg,#143a67,#102a4e);
    border:2px solid var(--accent);
    color:#f5f9ff;
    box-shadow:
        0 0 22px color-mix(in srgb,var(--accent) 22%,transparent),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.sf-recados-host .rw-bubble::after{
    content:'•••';
    position:absolute;
    top:8px;
    right:9px;
    display:grid;
    place-items:center;
    width:27px;
    height:21px;
    border-radius:8px;
    background:#d7f1ff;
    color:#24465c;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:1px;
}

.sf-recados-host .rw-message{
    padding-right:34px;
    color:#fff;
    font-size:.91rem;
    line-height:1.24;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
}

.sf-recados-host .rw-reply{
    position:relative;
    flex:0 0 82px;
    min-height:82px;
    padding:10px 11px 9px 42px;
    border-radius:16px;
    overflow:hidden;
    background:
        radial-gradient(circle at 12% 10%,rgba(255,218,103,.15),transparent 28%),
        linear-gradient(180deg,#2e2614,#15140f);
    border:1.5px solid #f0c85e;
    box-shadow:
        0 0 16px rgba(240,200,94,.10),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.sf-recados-host .rw-reply-icon{
    position:absolute;
    left:10px;
    top:11px;
    width:23px;
    height:23px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#16120c;
    background:linear-gradient(180deg,#f6d36f,#d7a53c);
    border:1px solid rgba(243,201,97,.96);
    font-size:.78rem;
}

.sf-recados-host .rw-reply-title{
    color:#f0ca77;
    font-size:.63rem;
    font-weight:900;
    line-height:1;
    letter-spacing:.025em;
    text-transform:uppercase;
}

.sf-recados-host .rw-reply-text{
    margin-top:4px;
    color:#f5f6f8;
    font-size:.79rem;
    line-height:1.18;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
}

.sf-recados-host .rw-nav{
    position:absolute;
    z-index:5;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(61,187,255,.58);
    background:linear-gradient(180deg,#0e1a2a,#091321);
    color:#def8ff;
    font-size:1.18rem;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 0 18px rgba(39,137,255,.14);
}

.sf-recados-host .rw-prev{left:-2px}
.sf-recados-host .rw-next{right:-2px}

.sf-recados-host .rw-pages{
    flex:0 0 12px;
    min-height:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
}

.sf-recados-host .rw-dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#4a76ad;
    cursor:pointer;
}

.sf-recados-host .rw-dot.active{
    width:10px;
    height:10px;
    background:#f3cf60;
    box-shadow:0 0 13px rgba(243,207,96,.24);
}

.sf-recados-host .rw-cta{
    flex:0 0 49px;
    min-height:49px;
    border-radius:15px;
    border:1px solid rgba(243,201,97,.95);
    background:
        radial-gradient(circle at 50% 16%,rgba(255,244,200,.28),transparent 40%),
        linear-gradient(180deg,#f7d66f,#d8a63b);
    color:#16120c;
    font-weight:900;
    font-size:.92rem;
    cursor:pointer;
    box-shadow:
        0 0 22px rgba(240,202,119,.14),
        inset 0 1px 0 rgba(255,255,255,.36);
}

/* LER MAIS */
.sf-recados-host .rw-more-btn{
    display:none;
    position:absolute;
    right:10px;
    bottom:7px;
    z-index:6;
    min-height:21px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(5,10,18,.76);
    color:#fff;
    font:800 .61rem/1 'Roboto Condensed','Arial Narrow',Arial,sans-serif;
    cursor:pointer;
}

.sf-recados-host .rw-more-btn.show{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.sf-recados-host .rw-reply .rw-more-btn{
    background:rgba(25,19,8,.86);
    color:#f3d47a;
    border-color:rgba(240,202,119,.28);
}

.sf-recados-host .rw-has-more{
    padding-bottom:22px!important;
}

/* MODAIS GLOBAIS DO WIDGET */
.rw-modal-overlay,
.rw-more-overlay{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(3,7,13,.82);
    backdrop-filter:blur(8px);
}

.rw-modal-overlay.open,
.rw-more-overlay.open{
    display:flex;
}

.rw-modal,
.rw-more-modal{
    width:min(520px,100%);
    max-height:90vh;
    overflow:auto;
    position:relative;
    padding:18px;
    border-radius:24px;
    background:
        radial-gradient(circle at 86% 8%,rgba(37,115,255,.11),transparent 23%),
        linear-gradient(180deg,#0d1623,#0a1320);
    border:1px solid rgba(228,182,87,.58);
    color:#fff;
    font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
    box-shadow:0 24px 54px rgba(0,0,0,.45);
}

.rw-modal h2,
.rw-more-modal h3{
    margin:0 48px 10px 0;
    color:#f0ca77;
    font-weight:900;
}

.rw-modal-close,
.rw-more-close{
    position:absolute;
    top:12px;
    right:12px;
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.10);
    background:#101a28;
    color:#fff;
    font-size:1.35rem;
    cursor:pointer;
}

.rw-account-note{
    min-height:18px;
    margin:-3px 45px 12px 0;
    color:#aebed2;
    font-size:.78rem;
}

#rwFormRecado{
    display:grid;
    gap:10px;
}

#rwFormRecado input,
#rwFormRecado textarea{
    width:100%;
    border-radius:14px;
    border:1px solid rgba(119,150,196,.20);
    background:linear-gradient(180deg,#162132,#121d2c);
    color:#fff;
    padding:13px 14px;
    font:inherit;
}

#rwFormRecado input[readonly]{
    color:#f0ca77;
    font-weight:800;
}

#rwFormRecado textarea{
    height:130px;
    resize:none;
}

.rw-form-row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
}

.rw-form-row button{
    min-height:38px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.10);
    background:#111a28;
    color:#fff;
    font:inherit;
    padding:0 12px;
    cursor:pointer;
}

.rw-form-row span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#d0d8e3;
    font-size:.72rem;
}

.rw-emojis{
    display:none;
    grid-template-columns:repeat(6,1fr);
    gap:6px;
    max-height:180px;
    overflow-y:auto;
    padding:8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:#0c1522;
}

.rw-emojis.open{
    display:grid;
}

.rw-emojis button{
    min-height:39px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    background:#131e2d;
    color:#fff;
    font-size:1.15rem;
    cursor:pointer;
}

.rw-send{
    min-height:45px;
    border-radius:13px;
    border:1px solid #f0ca77;
    background:linear-gradient(180deg,#f7d66f,#d8a63b);
    color:#16120c;
    font-weight:900;
    cursor:pointer;
}

.rw-status{
    min-height:18px;
    color:#b7c7da;
    font-size:.78rem;
    text-align:center;
}

.rw-more-kicker{
    color:#f0ca77;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:6px;
}

.rw-more-content{
    color:#eef4ff;
    font-size:1rem;
    line-height:1.45;
    white-space:pre-wrap;
    word-break:break-word;
}

@media(max-width:600px){
    /* No mobile, a navegação é feita por swipe + pontinhos. */
    .sf-recados-host .rw-nav{
        display:none!important;
    }

    /* Swipe lateral no card, sem prender a rolagem vertical do site. */
    .sf-recados-host .rw-stage{
        touch-action:pan-y;
        overscroll-behavior-x:contain;
    }

    .sf-recados-host .rw-card.rw-touch-dragging{
        transition:none!important;
        will-change:transform,opacity;
    }

    .sf-recados-host .rw-card.rw-touch-settling{
        transition:transform .18s cubic-bezier(.2,.78,.18,1),opacity .18s ease!important;
        will-change:transform,opacity;
    }

    .sf-recados-host .rw-card{
        height:258px;
        min-height:240px;
    }

    .sf-recados-host .rw-bubble{
        flex-basis:76px;
        min-height:76px;
        max-height:76px;
    }

    .sf-recados-host .rw-reply{
        flex-basis:78px;
        min-height:78px;
        padding-left:40px;
    }

    .sf-recados-host .rw-message{
        font-size:.87rem;
    }

    .sf-recados-host .rw-reply-text{
        font-size:.75rem;
    }

    .sf-recados-host .rw-nav{
        width:38px;
        height:38px;
    }

    .rw-form-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .rw-emojis{
        grid-template-columns:repeat(6,1fr);
    }
}

/* ===== mais-radios/widget.css ===== */
.sf-more-radios{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    min-width:0!important;
    font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif!important;
}

.sf-more-radios *{
    box-sizing:border-box;
    font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
}

.sf-more-radios > h2{
    flex:0 0 auto!important;
    margin:0 0 8px!important;
    padding:0!important;
    font-size:1rem!important;
    line-height:1.1!important;
}

/* motor antigo do player: existe, funciona, mas não participa do layout */
.sf-more-radios .sf-radio-engine{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    padding:0!important;
    margin:0!important;
}

.sf-radio-slider{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
    padding:0 34px;
}

.sf-radio-viewport{
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    border-radius:20px;
}

.sf-radio-track{
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    align-items:stretch;
    gap:0;
    transition:transform .48s cubic-bezier(.2,.78,.18,1);
    will-change:transform;
}

.sf-radio-card{
    --sf-radio-accent:#53caff;
    --sf-radio-bg:none;

    flex:0 0 100%;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;

    position:relative;
    overflow:hidden;

    border-radius:21px;
    border:1px solid color-mix(in srgb,var(--sf-radio-accent) 62%,rgba(255,255,255,.16));

    background:#081321;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 18px color-mix(in srgb,var(--sf-radio-accent) 8%,transparent);

    color:#fff;
}

.sf-radio-card.is-selected{
    border-color:var(--sf-radio-accent);
}

.sf-radio-bg{
    position:absolute;
    inset:-14px;
    z-index:0;

    background-image:
        linear-gradient(180deg,rgba(4,11,20,.72),rgba(4,10,18,.90)),
        var(--sf-radio-bg);

    background-size:cover;
    background-position:center;

    filter:blur(9px) saturate(1.12);
    transform:scale(1.10);
    opacity:.95;

    pointer-events:none;
}

.sf-radio-card:not(.sf-has-logo) .sf-radio-bg{
    background:
        radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--sf-radio-accent) 22%,transparent),transparent 36%),
        linear-gradient(180deg,#0b1727,#07101b);
    filter:none;
    transform:none;
}

.sf-radio-content{
    position:relative;
    z-index:1;

    width:100%;
    height:100%;
    min-height:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:12px 20px 13px;
}

.sf-radio-logo{
    flex:0 0 132px;
    width:132px;
    height:132px;

    margin:0 auto 8px;
    padding:4px;

    border-radius:18px;

    display:grid;
    place-items:center;

    background:rgba(4,11,20,.58);
    border:2px solid var(--sf-radio-accent);

    box-shadow:
        0 0 17px color-mix(in srgb,var(--sf-radio-accent) 22%,transparent),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.sf-radio-logo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    border-radius:13px;
}

.sf-radio-logo-fallback{
    width:100%;
    height:100%;

    display:grid;
    place-items:center;

    border-radius:13px;

    font-size:2.9rem;

    background:
        radial-gradient(circle at center,color-mix(in srgb,var(--sf-radio-accent) 18%,transparent),transparent 58%),
        rgba(7,15,26,.90);
}

.sf-radio-card h3{
    width:100%;
    margin:0 0 5px!important;
    padding:0!important;

    color:#fff!important;

    font-size:1.12rem!important;
    line-height:1.05!important;
    font-weight:900!important;

    text-align:center!important;
    text-shadow:0 2px 5px rgba(0,0,0,.50);
}

.sf-radio-card p{
    width:100%;
    min-height:43px;

    margin:0!important;
    padding:0 3px!important;

    color:#edf4fc!important;

    font-size:.76rem!important;
    line-height:1.24!important;
    font-weight:600!important;

    text-align:center!important;
    text-shadow:0 2px 5px rgba(0,0,0,.56);

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
}

.sf-radio-favorite,
.sf-radio-access{
    appearance:none;
    -webkit-appearance:none;

    outline:0;
    cursor:pointer;

    font:inherit!important;
}

.sf-radio-favorite{
    flex:0 0 32px;

    min-width:154px;
    height:32px;

    margin:auto auto 0!important;
    padding:0 11px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;

    border-radius:999px!important;
    border:1px solid color-mix(in srgb,var(--sf-radio-accent) 62%,rgba(255,255,255,.18))!important;

    background:rgba(4,11,20,.68)!important;
    color:#dce9f7!important;

    font-size:.68rem!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.02em!important;

    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}

.sf-radio-favorite span,
.sf-radio-favorite b{
    display:inline!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    background:none!important;
    border:0!important;
    border-radius:0!important;
    line-height:1!important;
}

.sf-radio-favorite.voted{
    color:var(--sf-radio-accent)!important;
    border-color:var(--sf-radio-accent)!important;
}

.sf-radio-heart{
    color:#ff557d!important;
    font-size:1rem!important;
}

.sf-radio-access{
    flex:0 0 40px;

    width:min(226px,90%)!important;
    height:40px!important;

    margin:7px auto 0!important;
    padding:0 14px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;

    border-radius:14px!important;
    border:1px solid color-mix(in srgb,var(--sf-radio-accent) 76%,white 24%)!important;

    background:var(--sf-radio-accent)!important;
    color:#07111d!important;

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

.sf-radio-access i{
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;

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

    display:grid!important;
    place-items:center!important;

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

    background:#08111d!important;
    color:var(--sf-radio-accent)!important;

    font-style:normal!important;
    font-size:.62rem!important;
    line-height:1!important;
}

.sf-radio-access strong{
    margin:0!important;
    padding:0!important;

    color:#07111d!important;

    font-size:.83rem!important;
    line-height:1!important;
    font-weight:900!important;
}

.sf-radio-nav{
    position:absolute!important;
    z-index:20!important;
    top:50%!important;
    transform:translateY(-50%)!important;

    width:40px!important;
    height:40px!important;

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

    display:grid!important;
    place-items:center!important;

    border-radius:50%!important;
    border:1px solid rgba(51,183,255,.58)!important;

    background:linear-gradient(180deg,#0d1a2a,#081321)!important;
    color:#e5f8ff!important;

    font-size:1.18rem!important;
    line-height:1!important;

    box-shadow:0 0 16px rgba(39,137,255,.13)!important;
}

.sf-radio-prev{left:4px!important}
.sf-radio-next{right:4px!important}

.sf-radio-dots{
    flex:0 0 12px;
    min-height:12px;

    max-width:100%;
    overflow:hidden;

    margin-top:6px;

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

.sf-radio-dot{
    appearance:none;
    -webkit-appearance:none;

    flex:0 0 7px;

    width:7px;
    height:7px;

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

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

    background:#4b76a8!important;

    cursor:pointer;
}

.sf-radio-dot.active{
    width:9px;
    height:9px;
    flex-basis:9px;

    background:#f0ca77!important;
    box-shadow:0 0 10px rgba(240,202,119,.24)!important;
}

@media(min-width:901px){
    .sf-more-radios{
        height:clamp(420px,55vh,470px)!important;
        min-height:420px!important;
        padding:14px!important;
    }
}

@media(max-width:900px){
    /* No mobile, a navegação é feita por swipe + pontinhos. */
    .sf-radio-nav{
        display:none!important;
    }

    .sf-more-radios{
        min-height:0!important;
        height:auto!important;
    }

    /* O bloco antigo de lista não deve reservar espaço no mobile. */
    .sf-more-radios > .radioList,
    .sf-more-radios > .radio-list,
    .sf-more-radios > .radios-list,
    .sf-more-radios > .mobile-radios,
    .sf-more-radios > .mobile-radio-list{
        display:none!important;
        height:0!important;
        min-height:0!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
    }

    .sf-radio-slider{
        height:340px;
        flex:none;
    }

    .sf-radio-logo{
        flex-basis:124px;
        width:124px;
        height:124px;
    }

    .sf-radio-content{
        padding:11px 18px 12px;
    }

    /* Swipe lateral no mobile, preservando a rolagem vertical da página. */
    .sf-radio-viewport{
        touch-action:pan-y;
        overscroll-behavior-x:contain;
        -webkit-user-select:none;
        user-select:none;
    }

    .sf-radio-card.sf-touch-dragging{
        transition:none!important;
        animation:none!important;
        will-change:transform,opacity;
    }

    .sf-radio-card.sf-touch-settling{
        transition:transform .18s cubic-bezier(.2,.78,.18,1),opacity .18s ease!important;
        animation:none!important;
        will-change:transform,opacity;
    }
}

/* ===== MODO MANUAL / ECONOMIA DE RECURSOS ===== */
.sf-more-radios .sf-radio-track{
    transform:none!important;
    will-change:auto!important;
    transition:none!important;
}

.sf-more-radios .sf-radio-card[hidden]{
    display:none!important;
}

.sf-more-radios .sf-radio-card:not(.is-viewing) .sf-radio-bg{
    display:none!important;
}

.sf-more-radios .sf-radio-card.is-viewing{
    animation:sfRadioManualFade .22s ease-out;
}

@keyframes sfRadioManualFade{
    from{opacity:.45;transform:scale(.992)}
    to{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
    .sf-more-radios .sf-radio-card.is-viewing{animation:none!important}
}


/* =========================================================
   CHAT SÓ FLASHBACK - INTEGRAÇÃO ESTÁVEL V4
   Não usa .mural nem .sf-recados-host para escapar de scripts
   legados do antigo Mural de Recados.
   ========================================================= */
.sf-chat-legacy-hooks{display:none!important}
.sf-chat-home{
    position:relative!important;
    min-width:0!important;
    height:clamp(420px,55vh,470px)!important;
    min-height:420px!important;
    padding:0!important;
    overflow:hidden!important;
    display:block!important;
    background:#071117!important;
}
.sf-chat-home-frame{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    border:0!important;
    margin:0!important;
    padding:0!important;
    background:#071117!important;
    border-radius:inherit!important;
}

@media(max-width:900px){
    .layout{
        display:flex!important;
        flex-direction:column!important;
        gap:16px!important;
    }
    .panel.center{order:1!important}
    .sf-chat-home{
        order:2!important;
        width:100%!important;
        height:640px!important;
        min-height:640px!important;
        max-height:640px!important;
        flex:0 0 640px!important;
        visibility:visible!important;
        opacity:1!important;
    }
    .panel.radios{order:3!important}
    .sf-chat-home-frame{
        width:100%!important;
        height:640px!important;
        min-height:640px!important;
        visibility:visible!important;
        opacity:1!important;
    }
}

@media(max-width:480px){
    .sf-chat-home{
        height:610px!important;
        min-height:610px!important;
        max-height:610px!important;
        flex-basis:610px!important;
    }
    .sf-chat-home-frame{
        height:610px!important;
        min-height:610px!important;
    }
}