/* ============================================================================
   songnize — visual das páginas próprias fora do app (D2: termos/ e privacidade/;
   D8: s/, a página pública da música). Os mesmos tokens do index.html
   (laranja #FF650D, preto #0B0F16, grafite #222631, Outfit + Inter).
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
:root{
  --orange:#FF650D; --orange-hi:#FF8038; --ink:#0B0F16; --graphite:#222631;
  --txt:#F4F6FA; --muted:rgba(244,246,250,.62); --faint:rgba(244,246,250,.42);
  --line:rgba(255,255,255,.09); --line-hi:rgba(255,255,255,.17);
  --surf-1:rgba(255,255,255,.035); --surf-2:rgba(255,255,255,.065);
  --r-md:14px; --r-lg:18px; --r-xl:24px; --ease:cubic-bezier(.22,.9,.3,1);
  --f-display:"Outfit","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100svh; color:var(--txt); background:var(--ink);
  background-image:linear-gradient(180deg,#10151E 0%,#0B0F16 46%,#070A0F 100%); background-attachment:fixed;
  font-family:var(--f-ui); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow-x:hidden}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
svg{display:block}

.pg-top{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(18px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line)}
.pg-marca{display:inline-flex; align-items:center; text-decoration:none}
.pg-marca svg{height:30px; width:auto}
.pg-marca .lg-mark{fill:var(--orange)} .pg-marca .lg-word{fill:#fff}
.pg-idiomas{display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--surf-1)}
.pg-idiomas button{min-width:40px; padding:6px 10px; border-radius:999px; font-size:.78rem; font-weight:600;
  color:var(--muted); letter-spacing:.02em}
.pg-idiomas button[aria-pressed="true"]{background:var(--orange); color:#fff}

.pg-main{flex:1 0 auto; width:100%; max-width:760px; margin:0 auto;
  padding:36px max(20px,env(safe-area-inset-right,0px)) 56px max(20px,env(safe-area-inset-left,0px))}
.pg-aviso{display:flex; gap:10px; align-items:flex-start; padding:13px 16px; margin:0 0 26px;
  border-radius:var(--r-md); border:1px solid rgba(255,142,64,.38); background:rgba(255,101,13,.09);
  font-size:.86rem; line-height:1.5; color:#FFD9C2}
.pg-aviso b{color:#fff}
.pg-main h1{font-family:var(--f-display); font-size:clamp(1.7rem,4.6vw,2.3rem); font-weight:600;
  letter-spacing:-.025em; line-height:1.15; margin:0 0 6px}
.pg-data{font-size:.82rem; color:var(--faint); margin:0 0 28px}
.pg-main h2{font-family:var(--f-display); font-size:1.12rem; font-weight:600; letter-spacing:-.01em; margin:28px 0 8px}
.pg-main p, .pg-main li{color:var(--muted); font-size:.95rem}
.pg-main ul{padding-left:20px; margin:8px 0}
.pg-rodape{padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line);
  text-align:center; font-size:.8rem; color:var(--faint)}
.pg-rodape a{color:var(--muted); margin:0 8px}

.pg-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; border-radius:999px;
  background:var(--orange); color:#fff; font-weight:700; font-size:1rem; letter-spacing:-.01em; text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(255,101,13,.9); transition:background .16s var(--ease), transform .16s var(--ease)}
.pg-btn:hover{background:var(--orange-hi); transform:translateY(-1px)}
.pg-btn:active{transform:scale(.97)}

/* ---------- página pública da música (s/) ---------- */
.pub{max-width:520px; text-align:center}
.pub-capa{width:min(260px,64vw); aspect-ratio:1; margin:6px auto 22px; border-radius:var(--r-xl); display:grid; place-items:center;
  background:radial-gradient(120% 90% at 20% 10%,#FF9A57 0%,#FF650D 38%,#B93A04 100%);
  box-shadow:0 30px 70px -26px rgba(255,101,13,.75), inset 0 1px 0 rgba(255,255,255,.3)}
.pub-capa svg{width:44%; height:auto; fill:#fff; opacity:.95}
.pub h1{margin:0 0 10px; overflow-wrap:anywhere}
.pub-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:0 0 24px}
.pub-tags span{padding:5px 12px; border-radius:999px; border:1px solid var(--line-hi); background:var(--surf-1);
  font-size:.8rem; color:var(--muted)}
.pub-player{padding:18px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surf-1); margin:0 0 26px}
.pub-vers{display:flex; justify-content:center; gap:6px; margin:0 0 14px}
.pub-vers[hidden]{display:none}
.pub-vers button{padding:7px 14px; border-radius:999px; border:1px solid var(--line); font-size:.8rem; font-weight:600; color:var(--muted)}
.pub-vers button[aria-pressed="true"]{border-color:rgba(255,101,13,.7); color:var(--txt); background:rgba(255,101,13,.12)}
.pub-linha{display:flex; align-items:center; gap:14px}
.pub-play{flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--orange);
  color:#fff; box-shadow:0 10px 24px -10px rgba(255,101,13,.95)}
.pub-play svg{width:22px; height:22px}
.pub-play[disabled]{opacity:.45; cursor:not-allowed}
.pub-barra{flex:1 1 auto; min-width:0}
.pub-barra input{width:100%; accent-color:var(--orange)}
.pub-tempos{display:flex; justify-content:space-between; font-size:.74rem; color:var(--faint); font-variant-numeric:tabular-nums}
.pub-nota{font-size:.78rem; color:var(--faint); margin:12px 0 0}
.pub-cta p{margin:0 0 14px; color:var(--muted)}
.pub-vazio{padding:30px 0}
.pub-vazio h1{font-size:1.5rem}
[hidden]{display:none !important}
@media (max-width:420px){
  .pg-marca svg{height:26px}
  .pg-main{padding-top:26px}
  .pg-btn{width:100%}
}