:root{
  --radio-primary:#061A12;--radio-secondary:#8EEA58;
  --radio-surface:rgba(12,55,38,.52);--radio-border:rgba(142,234,88,.18);
  --radio-muted:rgba(255,255,255,.62);--radio-glow:rgba(142,234,88,.16);
  --bg:#03110c;--text:#fff;--soft:rgba(255,255,255,.72);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#020d09;color:var(--text);font-family:Inter,Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{overflow-x:hidden}.radio-app{position:relative;min-height:100svh;min-height:100dvh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 15% 14%,color-mix(in srgb,var(--radio-secondary) 10%,transparent),transparent 25%),linear-gradient(180deg,#03130d 0%,var(--bg) 56%,#020a07 100%)}.app-shell{position:relative;width:min(100% - 36px,1180px);min-height:100dvh;margin-inline:auto;display:flex;flex-direction:column;padding:calc(22px + var(--safe-t)) 0 calc(14px + var(--safe-b))}.ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.rings{position:absolute;left:50%;top:31%;width:min(115vw,1000px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 35px,rgba(92,236,97,.07) 36px 37px);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 70%,transparent 100%)}.wave{position:absolute;top:35%;width:30%;height:120px;opacity:.14;background:repeating-linear-gradient(90deg,transparent 0 7px,var(--radio-secondary) 8px 10px,transparent 11px 15px);mask-image:radial-gradient(ellipse at center,#000 0 50%,transparent 75%)}.wave-left{left:-3%}.wave-right{right:-3%;transform:scaleX(-1)}
.brand-header{width:100%;display:flex;justify-content:center;align-items:center;flex:0 0 auto}.brand-logo{width:clamp(225px,56vw,360px);max-height:118px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(0,0,0,.24))}.brand-copy{display:none}
.player-card{display:contents}.artwork-wrap{position:relative;width:clamp(235px,63vw,430px);aspect-ratio:1;margin:clamp(24px,4.8vh,52px) auto 0;flex:0 0 auto}.artwork-glow{position:absolute;inset:-8%;border-radius:26%;background:color-mix(in srgb,var(--radio-secondary) 23%,transparent);filter:blur(32px);opacity:.42}.album-art{position:relative;width:100%;height:100%;display:block;border-radius:clamp(26px,6vw,40px);border:1.5px solid color-mix(in srgb,var(--radio-secondary) 76%,transparent);box-shadow:0 0 0 2px rgba(151,255,103,.08),0 0 26px color-mix(in srgb,var(--radio-secondary) 34%,transparent),0 24px 60px rgba(0,0,0,.36);transition:opacity .25s ease,transform .25s ease;background:var(--radio-primary)}.album-art.has-artwork{object-fit:cover}.album-art.is-fallback{object-fit:contain;padding:18%;background:color-mix(in srgb,var(--radio-primary) 92%,#000)}.album-art.is-changing{opacity:.55;transform:scale(.992)}.live-badge{position:relative;z-index:2;display:flex;width:max-content;align-items:center;gap:10px;background:#fff;color:#102218;border-radius:999px;padding:9px 17px;margin:-15px auto 0;font-weight:800;font-size:clamp(13px,3.5vw,18px);letter-spacing:.12em;box-shadow:0 8px 20px rgba(0,0,0,.22)}.live-badge i{width:12px;height:12px;border-radius:50%;background:#ff3434;box-shadow:0 0 0 6px rgba(255,52,52,.12);animation:pulse 1.9s ease-out infinite}.live-badge.offline{opacity:.66}.live-badge.offline i{background:#8c8c8c;box-shadow:none;animation:none}
.now-playing{width:min(94vw,620px);text-align:center;margin:clamp(28px,3.9vh,48px) auto 0}.eyebrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;color:var(--radio-secondary);font-size:clamp(11px,2.8vw,15px);letter-spacing:.28em}.eyebrow span{height:1px;background:linear-gradient(90deg,transparent,var(--radio-secondary));position:relative}.eyebrow span:last-child{background:linear-gradient(90deg,var(--radio-secondary),transparent)}.eyebrow span:first-child:after,.eyebrow span:last-child:before{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--radio-secondary);transform:translateY(-50%)}.eyebrow span:first-child:after{right:0}.eyebrow span:last-child:before{left:0}.now-playing h1{font-size:clamp(34px,9vw,64px);line-height:1.05;margin:18px 0 4px;font-weight:760;letter-spacing:-.03em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.now-playing p{font-size:clamp(22px,5.9vw,38px);line-height:1.12;color:var(--radio-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.live-copy{display:none}
.controls{width:min(92vw,690px);margin:clamp(24px,3.2vh,38px) auto 0;display:flex;flex-direction:column;align-items:center}.volume-row{width:100%;display:grid;grid-template-columns:44px 1fr 70px;align-items:center;gap:14px}.icon-btn{appearance:none;border:0;background:none;color:var(--radio-secondary);padding:7px;cursor:pointer}.icon-btn svg{display:block;width:34px;height:34px;fill:currentColor}.volume{appearance:none;width:100%;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--radio-secondary) var(--vol,50%),rgba(78,158,86,.21) var(--vol,50%));outline:none}.volume::-webkit-slider-thumb{appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 3px 9px rgba(0,0,0,.3);cursor:pointer}.volume::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff}.volume-row output{text-align:right;color:var(--radio-secondary);font-size:clamp(21px,5vw,28px);font-variant-numeric:tabular-nums}.transport-row{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:28px}.play-btn{width:clamp(92px,24vw,124px);height:clamp(92px,24vw,124px);border-radius:50%;border:1px solid rgba(142,234,88,.52);background:#fff;color:color-mix(in srgb,var(--radio-secondary) 72%,#168c24);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 11px rgba(31,213,62,.07),0 0 0 1px rgba(23,255,62,.24),0 16px 30px rgba(0,0,0,.35);transition:transform .15s ease}.play-btn:active{transform:scale(.96)}.play-btn svg{width:46%;height:46%;fill:currentColor}.pause-icon,.spinner{display:none}.play-btn.is-playing .play-icon{display:none}.play-btn.is-playing .pause-icon{display:block}.play-btn.is-loading svg{display:none}.play-btn.is-loading .spinner{display:block;width:36px;height:36px;border:4px solid rgba(52,153,63,.24);border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}.install-btn{margin-top:18px;padding:10px 18px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;color:#fff;font:inherit;font-weight:700;cursor:pointer}.cast-row{margin-top:28px;appearance:none;border:0;background:none;color:#fff;display:flex;align-items:center;gap:13px;font-size:clamp(15px,4vw,20px);cursor:pointer}.cast-row svg{width:30px;height:30px;fill:var(--radio-secondary)}.cast-row i{width:9px;height:9px;border-radius:50%;background:#5ce347;box-shadow:0 0 12px #5ce347}
.station-footer{width:min(94vw,760px);margin:auto auto 0;padding-top:24px}.footer-mobile{border-top:1px solid rgba(116,239,100,.22);display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:20px;font-size:clamp(13px,3.7vw,18px);padding-top:24px}.equalizer{display:flex;align-items:center;gap:4px;height:32px}.equalizer span{display:block;width:4px;border-radius:5px;background:var(--radio-secondary)}.equalizer span:nth-child(1){height:16px}.equalizer span:nth-child(2){height:32px}.equalizer span:nth-child(3){height:20px}.footer-mobile strong{white-space:nowrap}.footer-mobile em{height:34px;width:1px;background:rgba(139,238,100,.30)}.footer-mobile>span{color:var(--radio-secondary);text-align:right}.footer-desktop{display:none}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,52,52,.28)}70%{box-shadow:0 0 0 8px rgba(255,52,52,0)}100%{box-shadow:0 0 0 0 rgba(255,52,52,0)}}
@media(max-width:520px){.app-shell{width:min(100% - 36px,1180px)}.footer-mobile{grid-template-columns:auto 1fr auto 1fr;gap:12px}.footer-mobile>span{text-align:left}.wave{width:38%}.artwork-wrap{margin-top:22px}.now-playing{margin-top:28px}.controls{margin-top:22px}}
@media(max-height:760px) and (max-width:899px){.app-shell{padding-top:calc(14px + var(--safe-t));padding-bottom:calc(10px + var(--safe-b))}.brand-logo{width:clamp(185px,43vw,285px);max-height:82px}.artwork-wrap{width:clamp(175px,43vh,295px);margin-top:12px}.now-playing{margin-top:16px}.now-playing h1{font-size:clamp(27px,6vh,44px);margin-top:12px}.now-playing p{font-size:clamp(17px,3.8vh,27px)}.live-badge{padding:7px 14px}.controls{margin-top:15px}.transport-row{margin-top:16px}.play-btn{width:76px;height:76px}.cast-row{margin-top:13px}.footer-mobile{padding-top:12px;font-size:12px}}

/* DESKTOP — mesma arquitetura visual do player-base Atlântica */
@media(min-width:900px){
  .radio-app{background:radial-gradient(circle at 8% 17%,color-mix(in srgb,var(--radio-secondary) 9%,transparent) 0 8%,transparent 24%),linear-gradient(180deg,#052016 0%,#03170f 45%,#02110b 100%)}
  .app-shell{width:min(calc(100% - 80px),1180px);padding:clamp(54px,7vh,82px) 0 28px;min-height:100dvh}
  .ambient .rings{left:16%;top:45%;width:520px;opacity:.35;mask-image:radial-gradient(circle,#000 0 58%,transparent 72%)}
  .ambient .wave{display:none}
  .brand-header{justify-content:flex-start;align-items:center;gap:30px;width:640px;margin-left:38px;margin-bottom:52px}
  .brand-logo{width:210px;max-height:92px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
  .brand-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
  .brand-frequency{font-size:12px;letter-spacing:.22em;font-weight:700;color:color-mix(in srgb,var(--radio-secondary) 75%,#fff);margin-bottom:7px}
  .brand-name{font-size:42px;letter-spacing:-.035em;color:#fff}
  .brand-slogan{font-size:17px;color:rgba(255,255,255,.82);margin-top:7px}
  .player-card{display:grid;grid-template-columns:250px minmax(0,1fr) 305px;align-items:center;gap:34px;min-height:302px;width:100%;padding:30px 36px;border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--radio-primary) 72%,#183d2b) 0%,rgba(7,47,31,.56) 55%,rgba(4,32,22,.48) 100%);border:1px solid color-mix(in srgb,var(--radio-secondary) 17%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 24px 65px rgba(0,0,0,.16)}
  .artwork-wrap{width:238px;margin:0;align-self:center}
  .artwork-glow{inset:-18%;filter:blur(28px);opacity:.18}
  .album-art{border-radius:22px;border:1px solid color-mix(in srgb,var(--radio-secondary) 38%,transparent);box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.025)}
  .album-art.is-fallback{padding:18%}
  .live-badge{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);margin:0;padding:6px 12px;gap:7px;font-size:11px;letter-spacing:.12em;white-space:nowrap}
  .live-badge i{width:8px;height:8px;box-shadow:0 0 0 4px rgba(255,52,52,.11)}
  .now-playing{width:auto;margin:0;text-align:left;align-self:center;min-width:0}
  .eyebrow{display:block;font-size:11px;letter-spacing:.26em;margin-bottom:14px}.eyebrow span{display:none}
  .now-playing h1{font-size:clamp(28px,2.15vw,38px);line-height:1.08;margin:0 0 10px;font-weight:760;-webkit-line-clamp:1;white-space:normal}
  .now-playing p{font-size:18px;line-height:1.25;margin:0;color:rgba(255,255,255,.78);-webkit-line-clamp:2}
  .live-copy{display:block;margin-top:18px;color:rgba(255,255,255,.48);font-size:13px}
  .controls{width:100%;margin:0;align-self:center}
  .volume-row{grid-template-columns:46px 1fr 48px;gap:12px}
  .icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);display:grid;place-items:center;padding:0;color:#fff}
  .icon-btn svg{width:20px;height:20px}
  .volume{height:5px;background:linear-gradient(90deg,#fff var(--vol,50%),rgba(255,255,255,.20) var(--vol,50%))}
  .volume::-webkit-slider-thumb{width:15px;height:15px}.volume::-moz-range-thumb{width:15px;height:15px}
  .volume-row output{font-size:13px;color:#fff;text-align:right}
  .transport-row{margin-top:34px}
  .play-btn{width:84px;height:84px;box-shadow:0 12px 28px rgba(0,0,0,.22);border:0;color:var(--radio-primary)}
  .play-btn svg{width:34px;height:34px}
  .install-btn{margin-top:14px;padding:9px 16px;font-size:13px;border-color:rgba(255,255,255,.17);font-weight:700}
  .cast-row{margin-top:14px;font-size:12px;opacity:.75}.cast-row svg{width:20px;height:20px}.cast-row i{width:6px;height:6px}
  .station-footer{width:100%;margin-top:auto;padding-top:48px}
  .footer-mobile{display:none}
  .footer-desktop{display:block;text-align:center;color:rgba(255,255,255,.46);font-size:11px;line-height:1.55}
  .footer-desktop p{margin:2px 0}.footer-desktop strong{color:rgba(255,255,255,.70)}
}
@media(min-width:900px) and (max-width:1100px){.app-shell{width:min(calc(100% - 48px),1040px)}.player-card{grid-template-columns:220px minmax(0,1fr) 255px;gap:24px;padding:26px}.artwork-wrap{width:210px}.brand-header{margin-left:24px}.brand-name{font-size:36px}.brand-logo{width:185px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* =====================================================================
   v1.2.0 — DESKTOP PIXEL-ALIGN com a referência Atlântica
   Copia a mesma malha, escala tipográfica, card e posições do player-base.
   A identidade visual permanece Trevo FM via variáveis dinâmicas.
   ===================================================================== */
@media (min-width:760px){
  /* mesma distribuição vertical da página Atlântica */
  .radio-app{
    min-height:100dvh;
    background:
      radial-gradient(circle at 15% 18%,color-mix(in srgb,var(--radio-secondary) 9%,transparent),transparent 28%),
      radial-gradient(circle at 88% 70%,color-mix(in srgb,var(--radio-secondary) 6%,transparent),transparent 22%),
      var(--radio-primary) !important;
  }

  .app-shell{
    width:100% !important;
    max-width:none !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:
      max(16px,env(safe-area-inset-top))
      max(16px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom))
      max(16px,env(safe-area-inset-left)) !important;
    display:grid !important;
    grid-template-rows:minmax(0,1fr) auto !important;
  }

  /* área funcional: 1120px e centralizada exatamente como a referência */
  .brand-header,
  .player-card{
    width:min(1120px,100%) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* bloco superior com a mesma linha e escala tipográfica */
  .brand-header{
    align-self:end !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    justify-content:start !important;
    justify-items:start !important;
    align-items:center !important;
    gap:26px !important;
    margin-bottom:30px !important;
    padding:0 !important;
  }

  .brand-logo{
    width:210px !important;
    max-width:210px !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.18)) !important;
  }

  .brand-copy{
    display:grid !important;
    gap:3px !important;
    align-items:start !important;
    justify-items:start !important;
    line-height:normal !important;
  }

  .brand-frequency{
    display:block !important;
    margin:0 !important;
    font-size:.76rem !important;
    line-height:1.15 !important;
    letter-spacing:.22em !important;
    text-transform:uppercase !important;
    color:color-mix(in srgb,var(--radio-secondary) 72%,#dfe8f4) !important;
    font-weight:700 !important;
  }

  .brand-name{
    display:block !important;
    margin:0 !important;
    color:#fff !important;
    font-size:clamp(2rem,9vw,4.3rem) !important;
    line-height:.95 !important;
    letter-spacing:-.045em !important;
    font-weight:650 !important;
  }

  .brand-slogan{
    display:block !important;
    margin:5px 0 0 !important;
    color:#e1e9e4 !important;
    font-size:clamp(1rem,4vw,1.28rem) !important;
    line-height:1.2 !important;
    font-weight:400 !important;
  }

  /* card: mesmas medidas e raio da Atlântica */
  .player-card{
    align-self:start !important;
    display:grid !important;
    grid-template-columns:220px minmax(0,1fr) auto !important;
    gap:32px !important;
    align-items:center !important;
    min-height:0 !important;
    padding:34px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:28px !important;
    background:linear-gradient(
      145deg,
      color-mix(in srgb,var(--radio-primary) 72%,#184c32),
      color-mix(in srgb,var(--radio-primary) 91%,#000)
    ) !important;
    box-shadow:0 28px 80px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(14px) !important;
  }

  .artwork-wrap{
    position:relative !important;
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    aspect-ratio:1 !important;
    margin:0 !important;
    justify-self:start !important;
    align-self:center !important;
    isolation:isolate !important;
  }

  .artwork-glow{
    position:absolute !important;
    inset:-10% !important;
    border:1px solid color-mix(in srgb,var(--radio-secondary) 20%,transparent) !important;
    border-radius:50% !important;
    z-index:-1 !important;
    background:transparent !important;
    filter:none !important;
    opacity:1 !important;
    box-shadow:
      0 0 0 22px color-mix(in srgb,var(--radio-secondary) 3%,transparent),
      0 0 0 44px color-mix(in srgb,var(--radio-secondary) 2%,transparent) !important;
  }

  .album-art{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:24px !important;
    background:color-mix(in srgb,var(--radio-primary) 88%,#000) !important;
    box-shadow:0 20px 45px rgba(0,0,0,.34) !important;
    border:1px solid rgba(255,255,255,.09) !important;
  }

  .album-art.is-fallback{
    object-fit:contain !important;
    padding:18px !important;
    background:var(--radio-primary) !important;
  }

  .live-badge{
    position:absolute !important;
    left:50% !important;
    bottom:-11px !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#102218 !important;
    font-size:.68rem !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
    white-space:nowrap !important;
    box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
  }

  .live-badge i{
    width:7px !important;
    height:7px !important;
    box-shadow:0 0 0 4px rgba(226,53,53,.12) !important;
  }

  /* metadata na mesma linha e tamanhos da Atlântica */
  .now-playing{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    justify-self:stretch !important;
    align-self:center !important;
  }

  .eyebrow{
    display:block !important;
    margin:0 0 8px !important;
    color:color-mix(in srgb,var(--radio-secondary) 70%,#a9c9e7) !important;
    font-size:.69rem !important;
    line-height:1.2 !important;
    letter-spacing:.22em !important;
    font-weight:800 !important;
  }
  .eyebrow span{display:none !important}

  .now-playing h1{
    display:block !important;
    margin:0 !important;
    max-width:100% !important;
    color:#fff !important;
    font-size:clamp(1.45rem,7vw,2.55rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.028em !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #artist-name{
    display:block !important;
    margin:8px 0 0 !important;
    color:#dce7e0 !important;
    font-size:clamp(1rem,4.3vw,1.3rem) !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .live-copy{
    display:block !important;
    margin:10px 0 0 !important;
    color:rgba(218,232,223,.62) !important;
    font-size:.84rem !important;
    line-height:1.3 !important;
  }

  /* controles: mesma coluna, mesmos tamanhos e sequência */
  .controls{
    width:auto !important;
    max-width:310px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    justify-self:end !important;
  }

  .volume-row{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:min(280px,70vw) !important;
    width:auto !important;
  }

  .icon-btn{
    flex:0 0 auto !important;
    width:44px !important;
    height:44px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.05) !important;
    color:#dce9e1 !important;
  }
  .icon-btn svg{width:22px !important;height:22px !important}

  .volume{
    width:min(180px,52vw) !important;
    height:4px !important;
    margin:0 !important;
    cursor:pointer !important;
    accent-color:#fff !important;
    background:linear-gradient(90deg,#fff var(--vol,50%),rgba(255,255,255,.27) var(--vol,50%)) !important;
  }
  .volume::-webkit-slider-thumb{width:15px !important;height:15px !important}
  .volume::-moz-range-thumb{width:15px !important;height:15px !important}

  .volume-row output{
    min-width:40px !important;
    margin:0 !important;
    color:#fff !important;
    font-size:.8rem !important;
    line-height:1 !important;
    text-align:right !important;
  }

  .transport-row{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 !important;
  }
  .side-placeholder{display:none !important}

  .play-btn{
    width:82px !important;
    height:82px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:var(--radio-primary) !important;
    box-shadow:0 14px 30px rgba(0,0,0,.28) !important;
  }
  .play-btn svg{width:30px !important;height:30px !important}

  .install-btn{
    margin:0 !important;
    padding:12px 15px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px !important;
    background:transparent !important;
    color:#fff !important;
    font-size:inherit !important;
    line-height:1 !important;
    font-weight:700 !important;
  }

  .cast-row{display:none !important}

  /* decoração do desktop igual à referência: apenas halos laterais suaves */
  .ambient{display:block !important}
  .rings{
    width:420px !important;
    height:420px !important;
    left:-210px !important;
    top:6% !important;
    transform:none !important;
    border:1px solid color-mix(in srgb,var(--radio-secondary) 11%,transparent) !important;
    border-radius:999px !important;
    background:transparent !important;
    box-shadow:
      0 0 0 48px color-mix(in srgb,var(--radio-secondary) 2.8%,transparent),
      0 0 0 96px color-mix(in srgb,var(--radio-secondary) 1.8%,transparent) !important;
    mask-image:none !important;
    filter:blur(4px) !important;
    opacity:1 !important;
  }
  .wave{display:none !important}

  /* footer na mesma posição baixa da referência */
  .station-footer{
    width:100% !important;
    margin:0 !important;
    padding:16px 8px 6px !important;
    align-self:end !important;
  }
  .footer-mobile{display:none !important}
  .footer-desktop{
    display:block !important;
    text-align:center !important;
    color:color-mix(in srgb,#9fb7ad 70%,transparent) !important;
    font-size:.75rem !important;
    line-height:1.55 !important;
  }
  .footer-desktop p{margin:2px 0 !important}
  .footer-desktop strong{color:#a9c4b5 !important}
}

@media (min-width:1050px){
  .player-card{
    grid-template-columns:250px minmax(0,1fr) 330px !important;
  }
  .artwork-wrap{
    width:250px !important;
    min-width:250px !important;
    max-width:250px !important;
  }
  .play-btn{width:82px !important;height:82px !important}
}

/* =====================================================================
   v1.3.0 — DESKTOP CENTRALIZATION MATCH / ATLÂNTICA GEOMETRY
   Reproduz o comportamento vertical do shell original da Atlântica:
   conteúdo principal centralizado em uma área útil e footer fora do fluxo.
   ===================================================================== */
@media (min-width:760px){
  .radio-app{
    position:relative !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  .app-shell{
    position:relative !important;
    z-index:1 !important;
    width:min(1120px,calc(100% - 32px)) !important;
    max-width:1120px !important;
    min-height:calc(100dvh - 148px) !important;
    height:auto !important;
    margin:0 auto !important;
    padding:22px 0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
  }

  .brand-header{
    width:100% !important;
    max-width:none !important;
    flex:0 0 auto !important;
    align-self:auto !important;
    margin:0 0 30px 0 !important;
    padding:0 !important;
  }

  .player-card{
    width:100% !important;
    max-width:none !important;
    flex:0 0 auto !important;
    align-self:auto !important;
    margin:0 !important;
  }

  /* O footer da Atlântica não participa do cálculo que centraliza brand+player. */
  .station-footer{
    position:absolute !important;
    z-index:2 !important;
    left:50% !important;
    bottom:24px !important;
    transform:translateX(-50%) !important;
    width:min(1120px,calc(100% - 32px)) !important;
    margin:0 !important;
    padding:0 8px !important;
  }
}

/* Em telas desktop mais baixas, mantém o conjunto visual no centro sem colidir com o footer. */
@media (min-width:760px) and (max-height:760px){
  .app-shell{
    min-height:calc(100dvh - 112px) !important;
    padding:14px 0 !important;
  }
  .brand-header{margin-bottom:22px !important}
  .station-footer{bottom:12px !important}
}


/* =====================================================================
   v1.4.1 — fallback usa logotipo completo Trevo; ícone reservado a PWA/favicon
   ===================================================================== */
.brand-city{display:none}
@media (min-width:760px){
  .brand-city{
    display:block !important;
    margin:4px 0 0 !important;
    color:color-mix(in srgb,#9fb7ad 82%,transparent) !important;
    font-size:.91rem !important;
    line-height:1.2 !important;
    font-weight:400 !important;
  }
  .album-art.is-fallback{
    object-fit:contain !important;
    padding:0 !important;
    background:color-mix(in srgb,var(--radio-primary) 88%,#000) !important;
  }
  .album-art.has-artwork{
    object-fit:cover !important;
    padding:0 !important;
  }
  .station-footer{
    position:fixed !important;
    left:50% !important;
    bottom:max(22px,env(safe-area-inset-bottom)) !important;
    transform:translateX(-50%) !important;
    width:min(1120px,calc(100% - 32px)) !important;
    margin:0 !important;
    padding:0 8px !important;
  }
  .footer-desktop{
    opacity:.72 !important;
  }
}
@media (min-width:760px) and (max-height:760px){
  .station-footer{bottom:max(10px,env(safe-area-inset-bottom)) !important}
}
@media (max-width:759px){
  .album-art.is-fallback{
    object-fit:contain !important;
    padding:0 !important;
    background:color-mix(in srgb,var(--radio-primary) 90%,#000) !important;
  }
  .album-art.has-artwork{padding:0 !important;object-fit:cover !important}
}

/* =====================================================================
   v1.6.0 — TREVO MOBILE / SINGLE SOURCE OF TRUTH
   Arquitetura de viewport baseada no mobile aprovado da Atlântica FM.
   ===================================================================== */
@media (max-width:759px){
  :root{
    --mobile-bg:color-mix(in srgb,var(--radio-primary) 94%,#000);
    --mobile-bg-2:color-mix(in srgb,var(--radio-primary) 84%,#000);
  }
  html,body{width:100%;height:100%;min-height:100%;margin:0;overflow:hidden!important;background:var(--mobile-bg)!important}
  body{padding:max(4px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important}
  .radio-app{width:100%!important;height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--radio-secondary) 11%,transparent),transparent 28%),radial-gradient(circle at 50% 66%,color-mix(in srgb,var(--radio-secondary) 4%,transparent),transparent 38%),linear-gradient(180deg,var(--mobile-bg) 0%,var(--mobile-bg-2) 55%,color-mix(in srgb,var(--radio-primary) 92%,#000) 100%)!important}
  .ambient{display:none!important}
  .app-shell{position:relative!important;z-index:1!important;width:100%!important;max-width:480px!important;height:calc(100dvh - max(9px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom)))!important;min-height:0!important;margin:0 auto!important;padding:0!important;display:grid!important;grid-template-rows:minmax(132px,20.5dvh) minmax(0,1fr) minmax(42px,5.8dvh)!important;gap:0!important;align-items:stretch!important}
  .brand-header{min-height:0!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
  .brand-logo{display:block!important;width:min(82vw,350px)!important;max-width:350px!important;height:auto!important;max-height:19.5dvh!important;object-fit:contain!important;margin:0 auto!important;filter:drop-shadow(0 14px 30px rgba(0,0,0,.19))!important}
  .brand-copy,.brand-frequency,.brand-name,.brand-slogan,.brand-city{display:none!important}
  .player-card{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0 clamp(8px,3vw,14px)!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(174px,34.5dvh) auto minmax(180px,24.5dvh)!important;grid-template-areas:"art" "meta" "controls"!important;align-items:center!important;justify-items:center!important;gap:0!important;overflow:visible!important;isolation:isolate!important}
  .artwork-wrap{grid-area:art!important;position:relative!important;width:min(57vw,238px)!important;min-width:176px!important;max-width:238px!important;aspect-ratio:1!important;margin:0 auto!important;align-self:center!important}
  .artwork-glow{display:block!important;position:absolute!important;inset:-12%!important;z-index:-1!important;border:1px solid color-mix(in srgb,var(--radio-secondary) 12%,transparent)!important;border-radius:50%!important;background:transparent!important;filter:none!important;opacity:.9!important;box-shadow:0 0 0 34px color-mix(in srgb,var(--radio-secondary) 2.4%,transparent),0 0 0 68px color-mix(in srgb,var(--radio-secondary) 1.5%,transparent)!important}
  .album-art{width:100%!important;height:100%!important;margin:0!important;padding:0!important;border-radius:25px!important;object-fit:cover!important;background:color-mix(in srgb,var(--radio-primary) 88%,#000)!important;border:1px solid color-mix(in srgb,var(--radio-secondary) 32%,rgba(255,255,255,.12))!important;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 17px color-mix(in srgb,var(--radio-secondary) 22%,transparent),0 0 43px color-mix(in srgb,var(--radio-secondary) 10%,transparent),0 22px 48px rgba(0,0,0,.31)!important}
  .album-art.is-fallback{object-fit:contain!important;padding:0!important;background:color-mix(in srgb,var(--radio-primary) 90%,#000)!important}
  .album-art.has-artwork{object-fit:cover!important;padding:0!important}
  .live-badge{position:absolute!important;left:50%!important;bottom:-11px!important;transform:translateX(-50%)!important;margin:0!important;display:flex!important;align-items:center!important;gap:7px!important;padding:7px 11px!important;border-radius:999px!important;background:#fff!important;color:#102218!important;font-size:.68rem!important;line-height:1!important;font-weight:800!important;letter-spacing:.12em!important;white-space:nowrap!important;box-shadow:0 8px 24px rgba(0,0,0,.22)!important}
  .live-badge i{width:7px!important;height:7px!important;box-shadow:0 0 0 4px rgba(226,53,53,.12)!important}
  .now-playing{grid-area:meta!important;width:min(96%,430px)!important;min-width:0!important;margin:0!important;padding:3px 0 4px!important;text-align:center!important;align-self:center!important}
  .eyebrow{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;margin:0 0 7px!important;color:var(--radio-secondary)!important;font-size:clamp(.59rem,2.45vw,.68rem)!important;line-height:1!important;letter-spacing:.235em!important;font-weight:800!important}
  .eyebrow span{display:block!important;width:31px!important;height:1px!important;background:linear-gradient(90deg,transparent,var(--radio-secondary))!important}
  .eyebrow span:last-child{background:linear-gradient(90deg,var(--radio-secondary),transparent)!important}
  .eyebrow span:before,.eyebrow span:after{display:none!important}
  .now-playing h1{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;width:100%!important;margin:0!important;overflow:hidden!important;white-space:normal!important;color:#fff!important;font-size:clamp(1.68rem,7.7vw,2.18rem)!important;line-height:1.05!important;letter-spacing:-.04em!important;font-weight:690!important;text-wrap:balance!important}
  #artist-name{margin:7px 0 0!important;color:rgba(225,238,230,.83)!important;font-size:clamp(1rem,4.6vw,1.22rem)!important;line-height:1.15!important;font-weight:420!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .live-copy{display:none!important}
  .controls{grid-area:controls!important;width:100%!important;max-width:450px!important;height:100%!important;min-height:0!important;margin:0!important;padding:2px 0 0!important;display:grid!important;grid-template-rows:auto 1fr auto!important;align-items:center!important;justify-items:stretch!important;gap:5px!important}
  .volume-row{display:grid!important;grid-template-columns:32px minmax(0,1fr) 42px!important;align-items:center!important;gap:10px!important;width:min(92%,420px)!important;margin:0 auto!important}
  .icon-btn{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;padding:0!important;border:0!important;background:transparent!important;color:#fff!important}
  .icon-btn svg{width:24px!important;height:24px!important;fill:#fff!important}
  .volume{--vol:50%;-webkit-appearance:none!important;appearance:none!important;width:100%!important;height:4px!important;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:linear-gradient(90deg,var(--radio-secondary) 0%,var(--radio-secondary) var(--vol),rgba(255,255,255,.27) var(--vol),rgba(255,255,255,.27) 100%)!important}
  .volume::-webkit-slider-thumb{-webkit-appearance:none!important;width:17px!important;height:17px!important;margin-top:-6.5px!important;border:0!important;border-radius:50%!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.2)!important}
  .volume::-moz-range-thumb{width:17px!important;height:17px!important;border:0!important;border-radius:50%!important;background:#fff!important}
  .volume-row output{display:block!important;color:#fff!important;font-size:.92rem!important;font-weight:530!important;text-align:right!important;min-width:42px!important}
  .transport-row{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;margin:0!important;align-self:center!important}
  .side-placeholder{display:none!important}
  .play-btn{display:grid!important;place-items:center!important;width:88px!important;height:88px!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:50%!important;background:#fff!important;color:var(--radio-primary)!important;box-shadow:0 0 0 8px color-mix(in srgb,var(--radio-secondary) 7%,transparent),0 13px 33px rgba(0,0,0,.30)!important}
  .play-btn svg{width:33px!important;height:33px!important}
  .cast-row{display:flex!important;justify-self:center!important;align-items:center!important;justify-content:center!important;gap:9px!important;width:auto!important;max-width:100%!important;min-height:32px!important;margin:0!important;padding:3px 8px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:rgba(225,239,230,.88)!important;box-shadow:none!important;font-size:.77rem!important;font-weight:440!important;white-space:nowrap!important}
  .cast-row[hidden]{display:none!important}
  .cast-row svg{width:21px!important;height:21px!important;fill:var(--radio-secondary)!important}
  .cast-row i{width:7px!important;height:7px!important;border-radius:50%!important;background:var(--radio-secondary)!important;box-shadow:0 0 9px color-mix(in srgb,var(--radio-secondary) 90%,transparent)!important}
  .install-btn{display:none!important}
  .station-footer{position:static!important;transform:none!important;width:100%!important;margin:0!important;padding:0!important;align-self:auto!important}
  .footer-desktop{display:none!important}
  .footer-mobile{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;width:100%!important;min-height:0!important;padding:7px 6px 1px!important;border-top:1px solid color-mix(in srgb,var(--radio-secondary) 11%,transparent)!important;color:rgba(227,239,230,.9)!important;font-size:initial!important}
  .footer-mobile strong{font-size:clamp(.64rem,2.75vw,.76rem)!important;font-weight:650!important;letter-spacing:.015em!important;white-space:nowrap!important}
  .footer-mobile em{display:block!important;width:1px!important;height:23px!important;background:rgba(255,255,255,.12)!important}
  .footer-mobile>span{color:color-mix(in srgb,var(--radio-secondary) 72%,#fff)!important;font-size:clamp(.61rem,2.65vw,.73rem)!important;text-align:center!important;white-space:nowrap!important}
  .equalizer{height:22px!important;gap:3px!important}.equalizer span{width:3px!important;background:var(--radio-secondary)!important}.equalizer span:nth-child(1){height:10px!important}.equalizer span:nth-child(2){height:22px!important}.equalizer span:nth-child(3){height:13px!important}
  .pwa-install-notice{position:fixed;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:99999;display:grid;grid-template-columns:56px minmax(0,1fr) auto 34px;align-items:center;gap:11px;padding:12px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:color-mix(in srgb,var(--radio-primary) 97%,#000);box-shadow:0 18px 55px rgba(0,0,0,.38);backdrop-filter:blur(18px);transform:translateY(120%);opacity:0;transition:transform .22s ease,opacity .22s ease}
  .pwa-install-notice[hidden]{display:none!important}.pwa-install-notice.is-visible{transform:translateY(0);opacity:1}
  .pwa-install-notice__icon{width:56px;height:56px;border-radius:15px;overflow:hidden;background:var(--radio-primary);box-shadow:0 8px 22px rgba(0,0,0,.25)}.pwa-install-notice__icon img{width:100%;height:100%;object-fit:cover}
  .pwa-install-notice__content{display:grid;gap:3px;min-width:0}.pwa-install-notice__content strong{font-size:.88rem;line-height:1.15;color:#fff}.pwa-install-notice__content span{font-size:.72rem;line-height:1.32;color:rgba(255,255,255,.7)}
  .pwa-install-notice__install{min-height:36px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:var(--radio-primary);font-size:.74rem;font-weight:800;cursor:pointer}.pwa-install-notice__close{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:1.15rem;line-height:1;cursor:pointer}
}

@media (max-width:759px) and (max-height:700px){
  .app-shell{grid-template-rows:minmax(96px,16dvh) minmax(0,1fr) 38px!important}
  .brand-logo{width:min(70vw,280px)!important;max-height:15dvh!important}
  .player-card{grid-template-rows:minmax(142px,30dvh) auto minmax(152px,24dvh)!important}
  .artwork-wrap{width:min(46vw,182px)!important;min-width:142px!important}
  .now-playing h1{font-size:clamp(1.4rem,6.9vw,1.82rem)!important}
  #artist-name{font-size:clamp(.92rem,4.2vw,1.06rem)!important}
  .live-badge{padding:6px 10px!important}
  .play-btn{width:72px!important;height:72px!important}
}

@media (max-width:759px) and (min-height:820px){
  .app-shell{grid-template-rows:minmax(150px,21.5dvh) minmax(0,1fr) minmax(44px,5.5dvh)!important}
  .brand-logo{width:min(85vw,365px)!important}
  .artwork-wrap{width:min(59vw,250px)!important;max-width:250px!important}
}

@media (display-mode:standalone) and (max-width:759px){
  .app-shell{grid-template-rows:minmax(155px,22dvh) minmax(0,1fr) minmax(46px,5.7dvh)!important}
}

@media (min-width:760px){.pwa-install-notice{display:none!important}}

/* =====================================================================
   v1.7.0 — DESKTOP SINGLE SOURCE OF TRUTH / ATLÂNTICA 1:1 GEOMETRY
   Mantém a identidade Trevo, mas replica a malha desktop da Atlântica:
   1120px, header 210px + copy, card 3 colunas, mesmas escalas e footer.
   ===================================================================== */
@media (min-width:760px){
  .radio-app{
    min-height:100dvh!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 15% 18%,color-mix(in srgb,var(--radio-secondary) 9%,transparent),transparent 28%),
      radial-gradient(circle at 88% 70%,color-mix(in srgb,var(--radio-secondary) 6%,transparent),transparent 22%),
      var(--radio-primary)!important;
  }

  .app-shell{
    position:relative!important;
    z-index:1!important;
    width:min(1120px,calc(100% - 32px))!important;
    max-width:1120px!important;
    min-height:calc(100dvh - 148px)!important;
    height:auto!important;
    margin:0 auto!important;
    padding:22px 0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
  }

  .brand-header{
    width:100%!important;
    display:grid!important;
    grid-template-columns:210px minmax(0,1fr)!important;
    justify-items:start!important;
    align-items:center!important;
    gap:26px!important;
    margin:0 0 30px!important;
    padding:0!important;
  }

  .brand-logo{
    display:block!important;
    width:210px!important;
    max-width:210px!important;
    height:auto!important;
    max-height:150px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.18))!important;
  }

  .brand-copy{
    display:grid!important;
    gap:3px!important;
    justify-items:start!important;
    align-items:start!important;
    text-align:left!important;
  }

  .brand-frequency{
    display:block!important;
    margin:0!important;
    font-size:.76rem!important;
    line-height:1.15!important;
    letter-spacing:.22em!important;
    text-transform:uppercase!important;
    color:color-mix(in srgb,var(--radio-secondary) 72%,#dfe8f4)!important;
    font-weight:700!important;
  }

  .brand-name{
    display:block!important;
    margin:0!important;
    color:#fff!important;
    font-size:clamp(2rem,4.3vw,4.3rem)!important;
    line-height:.95!important;
    letter-spacing:-.045em!important;
    font-weight:650!important;
    white-space:nowrap!important;
  }

  .brand-slogan{
    display:block!important;
    margin:5px 0 0!important;
    color:#e1e9e5!important;
    font-size:clamp(1rem,1.28vw,1.28rem)!important;
    line-height:1.2!important;
    font-weight:400!important;
  }

  .brand-city{
    display:block!important;
    margin:4px 0 0!important;
    color:color-mix(in srgb,#9fb7ad 82%,transparent)!important;
    font-size:.91rem!important;
    line-height:1.2!important;
    font-weight:400!important;
  }

  .player-card{
    width:100%!important;
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr) auto!important;
    gap:32px!important;
    align-items:center!important;
    padding:34px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:28px!important;
    background:linear-gradient(
      145deg,
      color-mix(in srgb,var(--radio-primary) 72%,#184c32),
      color-mix(in srgb,var(--radio-primary) 91%,#000)
    )!important;
    box-shadow:0 28px 80px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(14px)!important;
  }

  .artwork-wrap{
    position:relative!important;
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
    aspect-ratio:1!important;
    margin:0!important;
    justify-self:start!important;
    align-self:center!important;
    isolation:isolate!important;
  }

  .artwork-glow{
    position:absolute!important;
    inset:-10%!important;
    z-index:-1!important;
    border:1px solid color-mix(in srgb,var(--radio-secondary) 20%,transparent)!important;
    border-radius:50%!important;
    background:transparent!important;
    filter:none!important;
    opacity:1!important;
    box-shadow:
      0 0 0 22px color-mix(in srgb,var(--radio-secondary) 3%,transparent),
      0 0 0 44px color-mix(in srgb,var(--radio-secondary) 2%,transparent)!important;
  }

  .album-art{
    width:100%!important;
    height:100%!important;
    display:block!important;
    border-radius:24px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    background:color-mix(in srgb,var(--radio-primary) 88%,#000)!important;
    box-shadow:0 20px 45px rgba(0,0,0,.34)!important;
  }
  .album-art.is-fallback{object-fit:contain!important;padding:0!important}
  .album-art.has-artwork{object-fit:cover!important;padding:0!important}

  .live-badge{
    position:absolute!important;
    left:50%!important;
    bottom:-11px!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:7px 11px!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#102218!important;
    font-size:.68rem!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.12em!important;
    white-space:nowrap!important;
    box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  }
  .live-badge i{width:7px!important;height:7px!important;box-shadow:0 0 0 4px rgba(226,53,53,.12)!important}

  .now-playing{
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    text-align:left!important;
    align-self:center!important;
  }

  .eyebrow{
    display:block!important;
    margin:0 0 8px!important;
    color:color-mix(in srgb,var(--radio-secondary) 70%,#a9c9e7)!important;
    font-size:.69rem!important;
    line-height:1.2!important;
    letter-spacing:.22em!important;
    font-weight:800!important;
  }
  .eyebrow span{display:none!important}

  .now-playing h1{
    display:block!important;
    margin:0!important;
    color:#fff!important;
    font-size:clamp(1.45rem,2.55vw,2.55rem)!important;
    line-height:1.08!important;
    letter-spacing:-.028em!important;
    font-weight:700!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    -webkit-line-clamp:1!important;
  }

  #artist-name{
    display:block!important;
    margin:8px 0 0!important;
    color:#dce7e0!important;
    font-size:clamp(1rem,1.3vw,1.3rem)!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .live-copy{
    display:block!important;
    margin:10px 0 0!important;
    color:rgba(218,232,223,.62)!important;
    font-size:.84rem!important;
    line-height:1.3!important;
  }

  .controls{
    width:auto!important;
    max-width:310px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:14px!important;
    justify-self:end!important;
  }

  .volume-row{
    width:100%!important;
    min-width:280px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }

  .icon-btn{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.05)!important;
    color:#dce9e1!important;
  }
  .icon-btn svg{width:22px!important;height:22px!important}

  .volume{
    flex:1 1 auto!important;
    width:180px!important;
    height:4px!important;
    margin:0!important;
    background:linear-gradient(90deg,#fff var(--vol,50%),rgba(255,255,255,.27) var(--vol,50%))!important;
  }
  .volume::-webkit-slider-thumb{width:15px!important;height:15px!important}
  .volume::-moz-range-thumb{width:15px!important;height:15px!important}
  .volume-row output{min-width:40px!important;color:#fff!important;font-size:.8rem!important;text-align:right!important}

  .transport-row{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    margin:0!important;
  }
  .side-placeholder{display:none!important}

  .play-btn{
    width:82px!important;
    height:82px!important;
    margin:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#fff!important;
    color:var(--radio-primary)!important;
    box-shadow:0 14px 30px rgba(0,0,0,.28)!important;
  }
  .play-btn svg{width:30px!important;height:30px!important}

  .install-btn{
    margin:0!important;
    padding:12px 15px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:999px!important;
    background:transparent!important;
    color:#fff!important;
    font-size:inherit!important;
    line-height:1!important;
    font-weight:700!important;
  }

  .cast-row{display:none!important}

  .ambient{display:block!important;position:absolute!important;inset:0!important;pointer-events:none!important;overflow:hidden!important}
  .rings{
    position:absolute!important;
    width:420px!important;
    height:420px!important;
    left:-210px!important;
    top:6%!important;
    transform:none!important;
    border:1px solid color-mix(in srgb,var(--radio-secondary) 11%,transparent)!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:
      0 0 0 48px color-mix(in srgb,var(--radio-secondary) 2.8%,transparent),
      0 0 0 96px color-mix(in srgb,var(--radio-secondary) 1.8%,transparent)!important;
    mask-image:none!important;
    filter:blur(4px)!important;
    opacity:1!important;
  }
  .ambient::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    right:-210px;
    bottom:5%;
    border:1px solid color-mix(in srgb,var(--radio-secondary) 9%,transparent);
    border-radius:999px;
    box-shadow:0 0 0 44px color-mix(in srgb,var(--radio-secondary) 2%,transparent);
    filter:blur(4px);
  }
  .wave{display:none!important}

  .station-footer{
    position:fixed!important;
    z-index:2!important;
    left:50%!important;
    bottom:max(22px,env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(1120px,calc(100% - 32px))!important;
    margin:0!important;
    padding:0 8px!important;
  }
  .footer-mobile{display:none!important}
  .footer-desktop{
    display:block!important;
    text-align:center!important;
    color:color-mix(in srgb,#9fb7ad 70%,transparent)!important;
    font-size:.75rem!important;
    line-height:1.55!important;
    opacity:.72!important;
  }
  .footer-desktop p{margin:2px 0!important}
  .footer-desktop strong{color:#a9c4b5!important}
}

@media (min-width:1050px){
  .player-card{grid-template-columns:250px minmax(0,1fr) 330px!important}
  .artwork-wrap{width:250px!important;min-width:250px!important;max-width:250px!important}
}

@media (min-width:760px) and (max-height:760px){
  .app-shell{min-height:calc(100dvh - 112px)!important;padding:14px 0!important}
  .brand-header{margin-bottom:22px!important}
  .station-footer{bottom:max(10px,env(safe-area-inset-bottom))!important}
}

/* =====================================================================
   v1.8.0 — DESKTOP 1:1 ATLÂNTICA / TREVO BRANDING ONLY
   Esta seção é a fonte final de verdade do desktop. A geometria, posições,
   tipografia, card, controles e footer espelham a home Atlântica.
   ===================================================================== */
@media (min-width:760px){
  html{min-height:100%;background:var(--radio-primary)!important}
  body{
    margin:0!important;
    min-height:100%!important;
    color:#fff!important;
    overflow-x:hidden!important;
    padding:
      max(16px,env(safe-area-inset-top))
      max(16px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom))
      max(16px,env(safe-area-inset-left))!important;
    background:
      radial-gradient(circle at 15% 18%,color-mix(in srgb,var(--radio-secondary) 9%,transparent),transparent 28%),
      radial-gradient(circle at 88% 70%,color-mix(in srgb,var(--radio-secondary) 7%,transparent),transparent 22%),
      var(--radio-primary)!important;
  }

  /* main = .shell da Atlântica */
  .radio-app{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    min-height:calc(100dvh - 148px)!important;
    height:auto!important;
    display:grid!important;
    place-items:center!important;
    padding:22px 0!important;
    overflow:visible!important;
    isolation:auto!important;
    background:transparent!important;
  }

  /* app-shell = .station da Atlântica */
  .app-shell{
    position:relative!important;
    width:min(1120px,100%)!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
  }

  /* ambient desktop nas mesmas regiões da Atlântica */
  .radio-app>.ambient{display:block!important;position:fixed!important;inset:0!important;z-index:-1!important;pointer-events:none!important;overflow:visible!important}
  .radio-app>.ambient .rings{
    position:absolute!important;
    width:420px!important;height:420px!important;
    left:-210px!important;top:6%!important;
    transform:none!important;
    border-radius:50%!important;
    background:transparent!important;
    border:1px solid color-mix(in srgb,var(--radio-secondary) 11%,transparent)!important;
    box-shadow:0 0 0 48px color-mix(in srgb,var(--radio-secondary) 2.8%,transparent),0 0 0 96px color-mix(in srgb,var(--radio-secondary) 1.8%,transparent)!important;
    mask-image:none!important;opacity:1!important;
  }
  .radio-app>.ambient .wave{display:none!important}

  /* brand-block exact geometry */
  .brand-header{
    width:auto!important;
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    justify-content:normal!important;
    justify-items:start!important;
    text-align:left!important;
    align-items:center!important;
    gap:26px!important;
    margin:0 0 30px 0!important;
    padding:0!important;
  }
  .brand-logo{
    display:block!important;
    width:210px!important;
    max-width:210px!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    margin:0!important;
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.18))!important;
  }
  .brand-copy{display:grid!important;gap:3px!important;align-items:start!important;justify-items:start!important;line-height:normal!important}
  .brand-frequency{font-size:.76rem!important;line-height:normal!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:color-mix(in srgb,var(--radio-secondary) 70%,#b8c4d9)!important;font-weight:700!important;margin:0!important}
  .brand-name{font-size:clamp(2rem,9vw,4.3rem)!important;line-height:.95!important;margin:0!important;letter-spacing:-.045em!important;font-weight:650!important;color:#fff!important}
  .brand-slogan{font-size:clamp(1rem,4vw,1.28rem)!important;line-height:normal!important;margin:5px 0 0!important;color:#e1e9e5!important;font-weight:400!important}
  .brand-city{display:block!important;margin:4px 0 0!important;color:color-mix(in srgb,var(--radio-secondary) 42%,#91a9c9)!important;font-size:.91rem!important;line-height:normal!important}

  /* player card = exact Atlântica card geometry */
  .player-card{
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr) auto!important;
    gap:32px!important;
    align-items:center!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:34px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--radio-primary) 72%,#0a5535),color-mix(in srgb,var(--radio-primary) 94%,#000))!important;
    box-shadow:0 28px 80px rgba(0,0,0,.28)!important;
    border-radius:28px!important;
    backdrop-filter:blur(14px)!important;
  }

  .artwork-wrap{position:relative!important;width:220px!important;min-width:220px!important;max-width:220px!important;aspect-ratio:1!important;margin:0!important;isolation:isolate!important;align-self:center!important}
  .artwork-glow{position:absolute!important;inset:-10%!important;border:1px solid color-mix(in srgb,var(--radio-secondary) 20%,transparent)!important;border-radius:50%!important;z-index:-1!important;background:transparent!important;filter:none!important;opacity:1!important;box-shadow:0 0 0 22px color-mix(in srgb,var(--radio-secondary) 3%,transparent),0 0 0 44px color-mix(in srgb,var(--radio-secondary) 2%,transparent)!important}
  .album-art{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:24px!important;background:color-mix(in srgb,var(--radio-primary) 86%,#000)!important;box-shadow:0 20px 45px rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.09)!important;transition:opacity .22s ease!important}
  .album-art.is-fallback{object-fit:contain!important;padding:0!important;background:color-mix(in srgb,var(--radio-primary) 86%,#000)!important}
  .album-art.has-artwork{object-fit:cover!important;padding:0!important}

  .live-badge{position:absolute!important;left:50%!important;bottom:-11px!important;transform:translateX(-50%)!important;display:flex!important;align-items:center!important;gap:7px!important;padding:7px 11px!important;margin:0!important;border-radius:999px!important;background:#fff!important;color:#102218!important;font-size:.68rem!important;font-weight:800!important;letter-spacing:.12em!important;white-space:nowrap!important;box-shadow:0 8px 24px rgba(0,0,0,.22)!important}
  .live-badge i{width:7px!important;height:7px!important;border-radius:50%!important;box-shadow:0 0 0 4px rgba(226,53,53,.12)!important}

  .now-playing{text-align:left!important;min-width:0!important;width:auto!important;margin:0!important;padding:0!important;align-self:center!important}
  .eyebrow{display:block!important;font-size:.69rem!important;line-height:normal!important;letter-spacing:.22em!important;color:color-mix(in srgb,var(--radio-secondary) 72%,#9ab7cf)!important;font-weight:800!important;margin:0 0 8px!important}
  .eyebrow span{display:none!important}
  .now-playing h1{margin:0!important;font-size:clamp(1.45rem,7vw,2.55rem)!important;line-height:1.08!important;letter-spacing:-.028em!important;font-weight:700!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;max-width:100%!important}
  #artist-name{margin:8px 0 0!important;font-size:clamp(1rem,4.3vw,1.3rem)!important;line-height:normal!important;color:#dce7e1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important}
  .live-copy{display:block!important;margin:10px 0 0!important;color:color-mix(in srgb,var(--radio-secondary) 28%,#90a8a0)!important;font-size:.84rem!important;line-height:normal!important}

  .controls{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:14px!important;flex-wrap:nowrap!important;width:auto!important;max-width:310px!important;margin:0!important;justify-self:end!important;align-self:center!important}
  .volume-row{display:flex!important;align-items:center!important;gap:10px!important;min-width:min(280px,70vw)!important;width:auto!important;margin:0!important}
  .icon-btn{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.05)!important;border-radius:50%!important;cursor:pointer!important;padding:0!important;color:#dce9e1!important;flex:0 0 auto!important}
  .icon-btn svg{width:22px!important;height:22px!important;fill:currentColor!important}
  .volume{--vol:50%;width:min(180px,52vw)!important;height:5px!important;-webkit-appearance:none!important;appearance:none!important;accent-color:#fff!important;cursor:pointer!important;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:linear-gradient(90deg,#fff 0%,#fff var(--vol),rgba(255,255,255,.28) var(--vol),rgba(255,255,255,.28) 100%)!important;outline:none!important}
  .volume::-webkit-slider-runnable-track{height:5px!important;border:0!important;border-radius:999px!important;background:transparent!important}
  .volume::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;width:15px!important;height:15px!important;margin-top:-5px!important;border:0!important;border-radius:50%!important;background:#fff!important;box-shadow:0 2px 7px rgba(0,0,0,.25)!important}
  .volume::-moz-range-track{height:5px!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.28)!important}
  .volume::-moz-range-progress{height:5px!important;border:0!important;border-radius:999px!important;background:#fff!important}
  .volume::-moz-range-thumb{width:15px!important;height:15px!important;border:0!important;border-radius:50%!important;background:#fff!important;box-shadow:0 2px 7px rgba(0,0,0,.25)!important}
  .volume-row output{min-width:40px!important;font-size:.8rem!important;line-height:normal!important;color:#fff!important;text-align:right!important;margin:0!important}
  .transport-row{width:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}
  .side-placeholder{display:none!important}
  .play-btn{width:74px!important;height:74px!important;border:0!important;border-radius:50%!important;background:#fff!important;color:var(--radio-primary)!important;display:grid!important;place-items:center!important;cursor:pointer!important;box-shadow:0 14px 30px rgba(0,0,0,.28)!important;margin:0!important;padding:0!important;transition:transform .18s ease,box-shadow .18s ease!important}
  .play-btn:hover{transform:translateY(-2px)!important;box-shadow:0 18px 34px rgba(0,0,0,.3)!important}
  .play-btn svg{width:30px!important;height:30px!important;fill:currentColor!important}
  .install-btn{border:1px solid rgba(255,255,255,.18)!important;background:transparent!important;padding:12px 15px!important;border-radius:999px!important;cursor:pointer!important;font-weight:700!important;margin:0!important;font-size:inherit!important}
  .cast-row{display:none!important}

  /* mobile footer remains inside main but is not part of desktop geometry */
  .station-footer{display:none!important}
  .footer-mobile{display:none!important}

  /* Desktop footer = exact sibling/footer geometry da Atlântica */
  .site-footer{position:relative!important;z-index:1!important;display:block!important;text-align:center!important;color:color-mix(in srgb,var(--radio-secondary) 38%,#7891b4)!important;font-size:.75rem!important;line-height:1.55!important;padding:16px 8px 6px!important;margin:0!important}
  .site-footer p{margin:2px 0!important}
  .site-footer strong{color:color-mix(in srgb,var(--radio-secondary) 42%,#a9bdd8)!important}
}

@media (min-width:1050px){
  .player-card{grid-template-columns:250px minmax(0,1fr) 330px!important}
  .artwork-wrap{width:250px!important;min-width:250px!important;max-width:250px!important}
  .play-btn{width:82px!important;height:82px!important}
}

@media (max-width:759px){
  .site-footer{display:none!important}
}