/* Estilo do app G Playbacks.
 *
 * Estava dentro de um <style> no index.html. Saiu porque a CSP do worker manda
 * style-src-elem 'self': bloco inline nao executa, e a pagina chegava sem
 * estilo nenhum. Ver gplay/main.py e CLAUDE.md secao 7.
 *
 * Nao reintroduza <style> no HTML: o teste test_higiene.py falha de proposito.
 */
:root{
  /* area segura do aparelho (notch/ilha em cima, barra de gestos embaixo).
     Como variavel pra poder simular em teste; no navegador comum da 0. */
  --fs: 1;                     /* escala do texto (Configuracoes) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --bg:#0a0c13; --bg2:#05060a;
  --card:#12151f; --card2:#181c2b;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --text:#eef0f8; --muted:#8b90a7; --muted2:#5d6178;
  --g1:#20b6e8; --g2:#4a63d8; --g3:#8b3fe0; --g4:#e83f92; --g5:#ff8a3d;
  --grad:linear-gradient(120deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5));
  --danger:#ff5d73;
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%; overscroll-behavior:none}
body{
  position:fixed; inset:0;     /* trava o body: iOS nao arrasta a pagina inteira, so rola o .screen */
  background:var(--bg2); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow:hidden;
}
body::before,body::after{
  content:''; position:fixed; border-radius:50%; filter:blur(120px); opacity:.16; pointer-events:none;
}
body::before{width:420px;height:420px;background:var(--g3);top:-140px;left:calc(50% - 400px)}
body::after{width:380px;height:380px;background:var(--g1);bottom:-120px;right:calc(50% - 380px)}

#app{
  position:relative; width:100%; max-width:434px;
  height:100vh; height:100dvh;   /* fallback p/ iOS antigo sem dvh */
  margin:0 auto; background:var(--bg); overflow:hidden;
}
/* telas grandes COM MOUSE (desktop): moldura de celular centralizada */
@media (min-width:520px) and (hover:hover) and (pointer:fine){
  #app{height:min(880px,94dvh); margin-top:max(12px,calc((100dvh - min(880px,94dvh))/2));
    border-radius:32px; border:1px solid var(--line2);
    box-shadow:0 40px 120px rgba(0,0,0,.7)}
}
/* aparelho de TOQUE (celular, tablet, notebook com tela sensivel): ocupa a tela inteira.
   Sem isso o iPad mostrava o app numa coluna estreita no meio da tela. */
@media (pointer:coarse){
  #app{max-width:none; width:100%; height:100dvh; margin:0;
       border:0; border-radius:0; box-shadow:none}
}

/* ---------------- telas ---------------- */
.screen{
  position:absolute; inset:0; overflow:hidden;   /* inativa nao rola: 1 scroller vivo por vez */
  /* respeita a area segura: nada encosta no notch em cima nem na barra de gestos embaixo */
  padding:calc(20px + var(--sat)) calc(20px + var(--sar)) calc(44px + var(--sab)) calc(20px + var(--sal));
  scrollbar-width:none;
  opacity:0; transform:translateX(26px); pointer-events:none;
  visibility:hidden;   /* tira a tela inativa do hit-test do iOS (opacity:0 NAO tira; travava o scroll sobre os cards) */
  transition:opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
}
.screen::-webkit-scrollbar{display:none}
.screen.active{
  opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .26s ease, transform .26s ease;
  overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  /* SEM -webkit-overflow-scrolling:touch: no iOS moderno o momentum ja e nativo,
     e o modo legado trava a rolagem ao tocar em elementos compostos */
}

/* ---------------- tipografia / util ---------------- */
.gtext{background:var(--grad); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation: gtextflow 3.2s ease-in-out infinite alternate}
@keyframes gtextflow{from{background-position:0% center} to{background-position:100% center}}
@media (prefers-reduced-motion: reduce){ .gtext{animation:none} }
.h-title{font-size:calc(22px * var(--fs)); font-weight:800; letter-spacing:-.4px}
.sub{color:var(--muted); font-size:calc(13.5px * var(--fs))}
.center{text-align:center}

/* ---------------- header ---------------- */
.header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; min-height:40px}
.brand{display:flex; align-items:center; gap:2px}
.brand img,.brand-logo{width:34px; height:34px; object-fit:contain; flex-shrink:0}
.brand span{font-weight:800; font-size:calc(22px * var(--fs)); letter-spacing:-.3px; position:relative; top:4px}
.avatar{
  width:34px; height:34px; border-radius:50%; background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; padding:0; color:var(--g1);   /* azul (sem neon) */
}
.avatar svg{ width:22px; height:22px; }
.avatar:active{ transform:scale(.9) }
.back{
  display:flex; align-items:center; gap:4px; background:none; border:none; color:var(--muted);
  font-family:inherit; font-size:calc(15px * var(--fs)); font-weight:600; cursor:pointer; padding:8px 10px 8px 0;
}
.back svg{width:20px;height:20px}
.back:active{opacity:.6}

/* ---------------- cards ---------------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:18px; margin-bottom:16px;
}
.card-title{display:flex; align-items:center; gap:9px; font-size:calc(15.5px * var(--fs)); font-weight:800; letter-spacing:-.2px; margin-bottom:13px}
.card-title .ic{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,rgba(32,182,232,.18),rgba(139,63,224,.18));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-title .ic svg{width:16px;height:16px;stroke:url(#gstroke)}

/* ---------------- inputs ---------------- */
.field{
  width:100%; background:var(--card2); border:1px solid var(--line); border-radius:14px;
  color:var(--text); font-family:inherit; font-size:calc(15px * var(--fs)); padding:14px 16px;
  outline:none; transition:border-color .2s;
}
.field::placeholder{color:var(--muted2)}
.field:focus{border-color:var(--g3)}
select.field{appearance:none}
.row{display:flex; gap:10px}
.row>*{flex:1}

/* ---------------- botoes ---------------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:calc(14.5px * var(--fs)); font-weight:700; padding:14px 18px; color:var(--text);
  background:var(--card2); border:1px solid var(--line2);
  transition:transform .12s ease, opacity .2s; white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn:active{transform:scale(.965)}
.btn.primary{
  background:var(--grad); border:none; color:#fff;
  box-shadow:0 6px 20px rgba(139,63,224,.35);
}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger); border-color:rgba(255,93,115,.25)}
.btn.b-save{background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border:none;
  box-shadow:0 4px 14px rgba(34,197,94,.3)}
.btn:disabled{opacity:.45; pointer-events:none}
.btn.small{padding:10px 14px; font-size:calc(13.5px * var(--fs))}
.home-cta-row{margin-bottom:16px; position:relative}
/* mini-barra de progresso (só ao criar) - fica na folga, largura do botao Criar playback */
.mini-bar{position:absolute; left:0; bottom:-10px; width:calc(50% - 5px); height:5px;
  border-radius:999px; background:var(--line2); overflow:hidden; display:none}
.mini-bar.on{display:block}
.mini-fill{height:100%; width:0%; background:var(--g5); border-radius:999px; transition:width .35s ease}
.create-cta,.all-cta{flex:1 1 0; min-width:0; padding:13px 12px; font-size:calc(13.5px * var(--fs)); font-weight:800; border-radius:15px; gap:7px}
.create-cta svg,.all-cta svg{width:18px; height:18px}
.btn.icon-only{flex:0 0 auto; width:48px; padding:0}

/* ---------------- listas ---------------- */
.list-item{
  display:flex; align-items:center; gap:13px; width:100%;
  background:var(--card2); border:1px solid var(--line); border-radius:16px;
  padding:14px; margin-bottom:10px; cursor:pointer; color:var(--text);
  font-family:inherit; text-align:left; transition:transform .12s;
}
.list-item:active{transform:scale(.98)}
.list-item.current{border:1px solid transparent;
  background:linear-gradient(var(--card2),var(--card2)) padding-box, var(--grad) border-box;}
.li-eq{gap:2.5px}
.li-eq i{width:3.5px}
.li-ic{
  width:42px; height:42px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(32,182,232,.16),rgba(232,63,146,.16));
  display:flex; align-items:center; justify-content:center;
}
.li-ic svg{width:19px; height:19px; stroke:url(#gstroke)}
.li-body{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.li-title{display:block; width:100%; font-size:0; line-height:0;
  white-space:nowrap; overflow:hidden}          /* parede invisivel + sem folga da base */
.li-title-txt{display:inline-block; font-size:calc(15.5px * var(--fs)); font-weight:700; line-height:1.25;
  white-space:nowrap; pointer-events:none}   /* toque atravessa pro card (nao trava scroll no iOS) */
.li-title-txt.marquee{animation: mq 5s linear infinite}   /* sem will-change: evita camada composta que trava scroll no iOS */
@keyframes mq{
  0%, 14%{transform:translateX(0)}                             /* pausa no inicio */
  86%, 100%{transform:translateX(calc(-1 * var(--mq)))}        /* desliza ate o fim e pausa; ao repetir, salta pro inicio */
}
.li-sub{font-size:calc(12px * var(--fs)); color:var(--muted2); margin-top:2px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.li-sub:empty{display:none}
.li-meta{
  font-size:calc(12px * var(--fs)); color:var(--muted); flex-shrink:0; margin-left:10px; text-align:right;
  max-width:38%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.li-meta:empty{display:none}
.select-like{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; text-align:left; width:100%;
}
.select-like svg{width:17px; height:17px; color:var(--muted); flex-shrink:0}
.li-chev{color:var(--muted2); flex-shrink:0}
.li-chev svg{width:18px;height:18px}
.empty{color:var(--muted2); font-size:calc(13.5px * var(--fs)); text-align:center; padding:20px 8px}

/* ---------------- musica (repertorio) ---------------- */
.song{background:var(--card2); border:1px solid var(--line); border-radius:15px; margin-bottom:8px; overflow:hidden;
  transition:box-shadow .25s, filter .25s, opacity .25s}
#songList.editing .song:not(.expanded),
#allList.editing .song:not(.expanded){filter:blur(3px); opacity:.35; pointer-events:none}
/* sem position/z-index aqui: senao o card prende o modal abaixo do fundo escurecido */
.song-main{display:flex; align-items:center; gap:10px; padding:11px 12px; cursor:pointer}
.drag-handle{display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; color:var(--muted2); cursor:grab; touch-action:none; margin:-6px -2px -6px -6px; padding:6px 2px}
.drag-handle:active{cursor:grabbing}
.drag-handle svg{width:18px; height:18px}
.song.dragging{opacity:.92; box-shadow:0 14px 34px rgba(0,0,0,.55);
  border-color:var(--g3) !important; position:relative; z-index:5}
.song-play{
  width:42px; height:42px; border-radius:50%; background:var(--grad); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  box-shadow:0 4px 12px rgba(139,63,224,.35);
}
.song-play svg{width:16px; height:16px; fill:#fff; margin-left:2px}
.song-edit{
  background:none; border:none; color:var(--muted); cursor:pointer; padding:9px; flex-shrink:0; border-radius:10px;
}
.song-edit svg{width:17px;height:17px}
.song-edit:active{opacity:.6}
.song-form{display:none}
/* editar musica = modal centralizado na tela (nao mais colado no card) */
.song.expanded .song-form{
  display:block; position:fixed; left:50%; top:50%; z-index:76;
  width:min(342px, 88vw); max-height:82vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line2); border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  animation: songModalIn .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes songModalIn{
  from{ transform:translate(-50%,-50%) scale(.94); opacity:0 }
  to{ transform:translate(-50%,-50%) scale(1); opacity:1 }
}
/* carregando (ex: ao abrir o editor de tom) */
#loadOv{position:absolute; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
#loadOv.on{display:flex}
.spin{width:52px; height:52px; border-radius:50%;
  border:4px solid rgba(255,255,255,.14); border-top-color:var(--g1); border-right-color:var(--g4);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.load-txt{font-size:calc(13.5px * var(--fs)); color:var(--muted); font-weight:600}
#songBack{position:absolute; inset:0; z-index:75; display:none;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
#songBack.on{display:block}
.song-form-inner{opacity:0; transition:opacity .22s ease; position:relative;
  padding:16px 16px 18px}
.song-x{top:8px; right:8px}
.song-form-inner label:first-of-type{padding-right:36px}
.song.expanded .song-form-inner{opacity:1}
.song-edit .ic-close{display:none}
.song.expanded .ic-edit{display:none}
.song.expanded .ic-close{display:inline; stroke:var(--danger); animation: xpulse 1.1s ease-in-out infinite}
.song.expanded .song-edit{color:var(--danger)}
@keyframes xpulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.22); opacity:.7}}
.song-form label{display:block; font-size:calc(11.5px * var(--fs)); font-weight:600; color:var(--muted); margin:11px 0 5px; text-transform:uppercase; letter-spacing:.4px}

/* ---------------- barra de progresso ---------------- */
.bar{margin-top:14px; display:none}
.bar.on{display:block}
.bar-track{height:26px; border-radius:999px; background:var(--card2); border:1px solid var(--line); overflow:hidden}
.bar-fill{
  height:100%; border-radius:999px; background:var(--grad); min-width:48px;
  display:flex; align-items:center; justify-content:flex-end; padding-right:10px;
  transition:width .35s ease; position:relative; overflow:hidden;
}
.bar-fill::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shine 1.1s infinite;
}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.bar-pct{font-size:calc(11.5px * var(--fs)); font-weight:800; color:#fff; position:relative; z-index:1}
.bar-label{text-align:center; font-size:calc(12.5px * var(--fs)); color:var(--muted); margin-top:8px}

/* ---------------- login ---------------- */
#scr-login{display:flex; flex-direction:column; justify-content:center; gap:0}
.login-logo{width:118px; height:118px; object-fit:contain; margin:0 auto 14px; display:block;
  filter:drop-shadow(0 10px 34px rgba(139,63,224,.5))}
.login-title{font-size:calc(40px * var(--fs)); font-weight:900; letter-spacing:-1px; text-align:center}
.login-sub{text-align:center; color:var(--muted); font-size:calc(14px * var(--fs)); margin:6px 0 30px}
#scr-login .field{margin-bottom:11px}
.pwd-wrap{position:relative; margin-bottom:11px}
#scr-login .pwd-wrap .field{margin-bottom:0; padding-right:46px}
.pwd-eye{position:absolute; right:6px; top:0; bottom:0; width:42px;
  background:none; border:none; cursor:pointer; color:var(--muted2); display:flex; align-items:center; justify-content:center; padding:0}
.pwd-eye:active{opacity:.6}
.pwd-eye svg{width:20px; height:20px}
.pwd-eye .eye-hide{display:none}
.pwd-wrap.show .pwd-eye .eye-show{display:none}
.pwd-wrap.show .pwd-eye .eye-hide{display:inline}
.pwd-wrap.show .pwd-eye{color:var(--g3)}
.cloud_file-wrap{position:relative}
.cloud_file-wrap .field{padding-right:44px}
.cloud_file-clear{position:absolute; right:6px; top:0; bottom:0; width:40px; padding:0;
  background:none; border:none; cursor:pointer; color:var(--danger); display:none; align-items:center; justify-content:center}
.cloud_file-clear.on{display:flex}
.cloud_file-clear:active{opacity:.6}
.cloud_file-clear svg{width:18px; height:18px; animation: xpulse 1.1s ease-in-out infinite}
/* ---------------- idioma / bandeiras ---------------- */
.lang-flags{position:absolute; top:14px; right:16px; display:flex; gap:7px; z-index:5}
.flag-btn{width:24px; height:17px; padding:0; border-radius:4px; overflow:hidden; cursor:pointer;
  border:1px solid var(--line2); background:none; transition:transform .18s}
.flag-btn:active{transform:scale(.9)}
.flag-btn svg{width:100%; height:100%; display:block}
.lang-opt{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:var(--card2); border:1px solid var(--line); border-radius:14px;
  padding:13px; margin-bottom:9px; cursor:pointer; color:var(--text); font-family:inherit; font-size:calc(14.5px * var(--fs)); font-weight:700}
.lang-opt .flag-sm{width:32px; height:23px; border-radius:5px; overflow:hidden; flex-shrink:0; border:1px solid var(--line2)}
.lang-opt .flag-sm svg{width:100%; height:100%; display:block}
.lang-opt.on{border-color:var(--g1)}
.lang-opt .ck{margin-left:auto; color:var(--g1); font-weight:900; display:none}
.lang-opt.on .ck{display:block}

/* ---------------- teste encerrado ---------------- */
#scr-trial{display:flex; flex-direction:column; justify-content:center}
.trial-end{text-align:center}
.trial-t1{font-size:calc(26px * var(--fs)); font-weight:900; letter-spacing:-.5px; margin-top:6px}
.trial-t2{font-size:calc(14px * var(--fs)); color:var(--muted); line-height:1.55; margin-top:12px}
.trial-t3{font-size:calc(14.5px * var(--fs)); font-weight:700; margin-top:14px; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1.5}

/* ---------------- guia com spotlight ---------------- */
.coach{position:absolute; inset:0; z-index:70; display:none; pointer-events:none}  /* buraco clicavel */
.coach.on{display:block}
/* passos com botao "Proximo": trava a tela toda, so o card do guia responde */
.coach.block{pointer-events:auto}
.coach-mask{position:absolute; background:rgba(0,0,0,.5); pointer-events:auto;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px)}
/* parte guiada (acompanhando o usuario): sem desfoque, so um escurecido leve */
.coach.noblur .coach-mask{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(0,0,0,.4)}
.coach-ring{position:absolute; border:2px solid var(--g1); border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 4px rgba(32,182,232,.22), 0 0 22px rgba(32,182,232,.55);
  transition:all .25s cubic-bezier(.2,.8,.2,1)}
.coach-card{position:absolute; left:16px; right:16px; background:var(--card); pointer-events:auto;
  border:1px solid var(--line2); border-radius:18px; padding:15px 16px;
  box-shadow:0 18px 46px rgba(0,0,0,.65); transition:top .25s cubic-bezier(.2,.8,.2,1)}
.coach-step{font-size:calc(11px * var(--fs)); color:var(--g1); font-weight:800; letter-spacing:.5px; margin-bottom:5px}
.coach-title{font-size:calc(16px * var(--fs)); font-weight:800; letter-spacing:-.2px}
.coach-txt{font-size:calc(13px * var(--fs)); color:var(--muted); line-height:1.45; margin-top:5px}
.coach-btns{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px}
.coach-btns .btn{flex:0 0 auto; padding:9px 20px}

/* ---------------- tour / boas-vindas ---------------- */
.trial-wrap{display:flex; align-items:center; justify-content:center; gap:9px; margin:2px 0 18px}
.trial-badge{background:var(--grad); color:#fff; font-weight:900; font-size:calc(17px * var(--fs)); letter-spacing:.3px;
  padding:6px 14px; border-radius:999px; box-shadow:0 6px 18px rgba(139,63,224,.4)}
.trial-txt{font-size:calc(12px * var(--fs)); color:var(--muted)}
.tour-hero{text-align:center; margin-bottom:20px}
.tour-logo{width:78px; height:78px; object-fit:contain; display:block; margin:0 auto 10px;
  filter:drop-shadow(0 8px 26px rgba(139,63,224,.45))}
.tour-ola{font-size:calc(28px * var(--fs)); font-weight:900; letter-spacing:-.6px}
.tour-sub{font-size:calc(13.5px * var(--fs)); color:var(--muted); line-height:1.5; margin-top:7px}
.feat{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:calc(13.5px * var(--fs))}
.feat:last-child{border-bottom:none; padding-bottom:2px}
.feat-ic{width:30px; height:30px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(32,182,232,.16),rgba(232,63,146,.16)); color:var(--g1)}
.feat-ic svg{width:16px; height:16px}
.feat-sub{color:var(--muted); font-size:calc(12.5px * var(--fs)); line-height:1.45}
.step{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:calc(13.5px * var(--fs))}
.step:last-child{border-bottom:none; padding-bottom:2px}
.step-n{width:26px; height:26px; border-radius:50%; flex-shrink:0; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:calc(12.5px * var(--fs))}
.tour-foot{text-align:center; font-size:calc(11.5px * var(--fs)); color:var(--muted2); margin-top:12px; line-height:1.45}
.inline-ic{width:16px; height:16px; vertical-align:-3.5px; margin:0 3px;
  fill:none; stroke:var(--text); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.login-hint{position:absolute; left:20px; right:20px; bottom:calc(18px + var(--sab));
  text-align:center; color:var(--muted2); font-size:calc(12.5px * var(--fs)); letter-spacing:.2px}
.login-row{display:flex; align-items:center; justify-content:space-between; margin-top:4px; gap:10px}
.remember{display:flex; align-items:center; gap:9px; cursor:pointer; font-size:calc(13px * var(--fs)); color:var(--muted); user-select:none}
.remember input{position:absolute; opacity:0; width:0; height:0}
.rem-box{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line2); background:var(--card2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.15s}
.rem-box svg{width:13px; height:13px; opacity:0; transform:scale(.5); transition:.15s}
.remember input:checked + .rem-box{background:var(--grad); border-color:transparent}
.remember input:checked + .rem-box svg{opacity:1; transform:scale(1)}
.remember input:focus-visible + .rem-box{outline:2px solid var(--g3); outline-offset:2px}
.link-btn{background:none; border:none; color:var(--g1); font-family:inherit; font-size:calc(13px * var(--fs)); font-weight:700;
  cursor:pointer; padding:4px 0}
.link-btn:active{opacity:.6}
/* ---- playlist ---- */
.pl-warn{margin-top:10px; font-size:calc(12.5px * var(--fs)); color:var(--g5); line-height:1.4;
  background:rgba(255,138,61,.08); border:1px solid rgba(255,138,61,.25); border-radius:12px; padding:10px 12px}
/* configuracoes: cartao ancorado no ALTO (nao e gaveta de baixo) */
.cfg-card{margin:calc(52px + var(--sat)) 14px 0; border-radius:20px;
  padding:20px 18px calc(20px); align-self:flex-start;
  transform:translateY(-10px) scale(.97); transition:transform .22s cubic-bezier(.2,.8,.2,1)}
#configSheet{align-items:flex-start}
#configSheet.on .cfg-card{transform:none}

/* barra de progresso da musica, colada em cima da bandeja do player */
.rp-seek{position:absolute; z-index:39; display:none;
  left:calc(12px + var(--sal)); right:calc(12px + var(--sar));
  bottom:calc(var(--rp-h, 74px) + 12px + var(--sab));
  height:26px; align-items:center; cursor:pointer; touch-action:none}
.rp-seek.on{display:flex}
.rp-seek-track{position:relative; width:100%; height:9px; border-radius:999px;
  background:rgba(255,255,255,.14); overflow:hidden}
.rp-seek-fill{height:100%; width:0%; border-radius:999px; background:var(--g5)}
.rp-seek-knob{position:absolute; top:50%; width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.55); transform:translate(-50%,-50%); left:0;
  pointer-events:none}

/* tempo da faixa no cabecalho (entre voltar e o lapis) */
.hd-time{font-size:calc(14px * var(--fs)); font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:.2px; display:none;
  color:var(--g1)}   /* mesmo azul da chave de configuracoes */
/* na home o "Music" fica 4px mais baixo: acompanha ele */
#hdTimeHome{position:relative; top:4px}
.hd-time.on{display:block}

/* controle de tamanho do texto */
.fs-ctl{flex:none; display:flex; align-items:center; gap:8px}
.fs-btn{width:34px; height:34px; border-radius:50%; border:1px solid var(--line2);
  background:var(--card); color:var(--text); cursor:pointer; font-family:inherit;
  font-size:calc(13px * var(--fs)); font-weight:800; display:flex; align-items:center; justify-content:center}
.fs-btn:active{transform:scale(.9)}
.fs-btn:disabled{opacity:.35}
.fs-val{min-width:44px; text-align:center; font-size:calc(12.5px * var(--fs));
  font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}

/* linha de configuracao com chave liga/desliga */
.cfg-row{display:flex; align-items:center; gap:14px; margin-top:16px;
  background:var(--card2); border:1px solid var(--line2); border-radius:14px; padding:14px}
.cfg-txt{flex:1; min-width:0}
.cfg-txt b{display:block; font-size:calc(14px * var(--fs)); font-weight:700; line-height:1.3}
.cfg-txt i{display:block; font-style:normal; font-size:calc(12px * var(--fs)); color:var(--muted); margin-top:4px; line-height:1.35}
.cfg-aviso{color:var(--g5) !important}
.cfg-row.off .cfg-txt b, .cfg-row.off .cfg-txt i:not(.cfg-aviso){opacity:.5}
.sw:disabled{opacity:.35; cursor:not-allowed}
.sw{flex:none; width:50px; height:30px; border-radius:999px; border:none; cursor:pointer; padding:3px;
  background:var(--line2); transition:background .2s; display:flex; align-items:center}
.sw i{width:24px; height:24px; border-radius:50%; background:#fff; display:block;
  transition:transform .2s; box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sw.on{background:linear-gradient(135deg,var(--g2),var(--g4))}
.sw.on i{transform:translateX(20px)}
.sw:active{transform:scale(.96)}
.bk-box{margin-top:14px; background:var(--card2,rgba(255,255,255,.04)); border:1px solid var(--line2);
  border-radius:14px; padding:12px 14px}
.bk-row{display:flex; align-items:center; justify-content:space-between; padding:5px 0; font-size:calc(13.5px * var(--fs))}
.bk-row b{color:var(--text); font-weight:700}
.bk-row span{color:var(--muted)}
.pl-selrow{display:flex; align-items:center; justify-content:space-between; margin:12px 0 2px}
.pl-count{font-size:calc(12px * var(--fs)); color:var(--muted)}
.pl-item{display:flex; align-items:center; gap:11px; padding:10px 2px; cursor:pointer; user-select:none;
  border-bottom:1px solid var(--line)}
.pl-item input{position:absolute; opacity:0; width:0; height:0}
.pl-item input:checked + .rem-box{background:var(--grad); border-color:transparent}
.pl-item input:checked + .rem-box svg{opacity:1; transform:scale(1)}
.pl-item-txt{flex:1; min-width:0; font-size:calc(13.5px * var(--fs)); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-item-dur{font-size:calc(11.5px * var(--fs)); color:var(--muted2); flex-shrink:0}
.pl-item.off .pl-item-txt{opacity:.4; text-decoration:line-through}
.pl-st{display:flex; align-items:center; gap:10px; padding:8px 2px; font-size:calc(13px * var(--fs)); border-bottom:1px solid var(--line)}
.pl-st-ic{width:20px; text-align:center; flex-shrink:0; font-size:calc(13px * var(--fs))}
.pl-st-txt{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted2)}
.pl-st.processing .pl-st-txt{color:var(--g1); font-weight:700}
.pl-st.done .pl-st-txt{color:var(--text)}
.pl-st.error .pl-st-txt{color:var(--danger)}

/* ---------------- player ---------------- */
.artwork{
  position:relative; width:100%; height:118px; border-radius:24px; overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%, rgba(74,99,216,.35), transparent 55%),
             radial-gradient(ellipse at 75% 80%, rgba(232,63,146,.28), transparent 55%),
             var(--card);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.artwork img{height:64%; width:auto; object-fit:contain; filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
.pl-title{font-size:calc(17px * var(--fs)); font-weight:800; text-align:center; letter-spacing:-.3px;
  margin-bottom:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 6px}
.pl-title-wrap{position:relative; margin-bottom:16px}
.pl-title-input{
  width:100%; background:transparent; border:none; border-bottom:1px dashed var(--line2);
  color:var(--text); font-family:inherit; font-size:calc(17px * var(--fs)); font-weight:800; text-align:center;
  letter-spacing:-.3px; padding:8px 30px; outline:none; transition:border-color .2s;
}
.pl-title-input:focus{border-bottom-color:var(--g3)}
.pl-title-pencil{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke:var(--g3); pointer-events:none; opacity:.85}
.pl-edit-hint{text-align:center; font-size:calc(11px * var(--fs)); color:var(--muted2); margin-top:-12px; margin-bottom:14px}
textarea.field{resize:vertical; min-height:180px; line-height:1.5; font-size:calc(14px * var(--fs))}
.lyr-actions{display:flex; gap:10px; margin-bottom:12px}
.lyr-actions>*{flex:1}

/* ---------------- modo palco (letra grande enquanto toca) ---------------- */
#scr-stage{display:flex; flex-direction:column; overflow:hidden;
  padding:calc(12px + var(--sat)) calc(16px + var(--sar)) 0 calc(16px + var(--sal))}
.stage-top{display:flex; align-items:center; position:relative; margin-bottom:6px; min-height:38px}
.stage-tools{display:flex; gap:7px}   /* fica na esquerda */
/* tempo no centro exato do topo, sem ser empurrado pelos botoes dos lados */
.stage-time{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:inherit; font-size:calc(14px * var(--fs)); font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.3px; color:var(--g1); white-space:nowrap}
.stage-close{position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:var(--card2); border:1px solid var(--line2); color:var(--text); cursor:pointer;
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center}
.stage-close svg{width:18px; height:18px}
.stage-close:active{opacity:.6}
.b-letra.has-letra::after{content:'✓'; color:#22c55e; font-weight:900; margin-left:6px}
.new-badge{background:#22c55e; color:#052e16; font-size:calc(9.5px * var(--fs)); font-weight:900; letter-spacing:.6px;
  padding:3px 7px; border-radius:8px; flex-shrink:0; margin-left:6px; align-self:center; line-height:1}
.li-metacol{position:relative; display:flex; align-items:center; flex-shrink:0}
.li-metacol .li-meta{margin-left:0; max-width:none; overflow:visible}
.li-metacol .new-badge{position:absolute; right:0; bottom:calc(100% + 3px); margin:0}   /* selo ACIMA do count (pode passar do card) */
/* modal centralizado (notificacao de conclusao) */
.cmodal{position:absolute; inset:0; background:rgba(0,0,0,.62); z-index:80;   /* acima do guia */
  display:flex; align-items:center; justify-content:center; padding:26px;
  opacity:0; pointer-events:none; visibility:hidden; transition:opacity .2s, visibility 0s linear .2s}
.cmodal.on{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .2s}
.cmodal-card{width:100%; max-width:330px; background:var(--card); border:1px solid var(--line2);
  border-radius:24px; padding:26px 22px; text-align:center; transform:scale(.9); transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.cmodal.on .cmodal-card{transform:scale(1)}
.notif-ic{width:66px; height:66px; margin:0 auto 16px; border-radius:20px;
  background:linear-gradient(135deg,var(--g1),var(--g3),var(--g4)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(139,63,224,.4)}
.notif-ic svg{width:34px; height:34px}
.notif-title{font-size:calc(19px * var(--fs)); font-weight:800; letter-spacing:-.3px}
.notif-body{font-size:calc(13.5px * var(--fs)); color:var(--muted); margin-top:7px; line-height:1.45}
.stage-tools button{background:var(--card2); border:1px solid var(--line2); color:var(--text);
  border-radius:10px; padding:6px 11px; font-family:inherit; font-size:calc(13px * var(--fs)); cursor:pointer; font-weight:800}
.stage-tools button.on{background:var(--grad); border:none; color:#fff}
.stage-title{font-size:calc(15px * var(--fs)); font-weight:800; text-align:center; margin-bottom:6px; color:var(--muted);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.stage-lyrics{flex:1; overflow-y:auto; scrollbar-width:none; text-align:center; white-space:pre-wrap;
  font-size:calc(26px * var(--fs)); line-height:1.75; font-weight:600; padding:24px 6px 40px; -webkit-overflow-scrolling:touch;}
.stage-lyrics::-webkit-scrollbar{display:none}
.stage-lyrics.empty{display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted2); font-size:calc(16px * var(--fs)); font-weight:500; line-height:1.6}
.stage-foot{border-top:1px solid var(--line); padding:12px 0 calc(14px + var(--sab));
  background:var(--bg)}
.stage-next{font-size:calc(13px * var(--fs)); margin-bottom:12px; display:flex; flex-direction:column; gap:4px}
.stage-next .now{color:var(--text); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stage-next .now{color:var(--g4)}
.stage-next .nxt{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stage-next .nxt::before{content:'A seguir:  '; color:var(--muted2)}
.stage-ctrl{display:flex; align-items:center; justify-content:center; gap:16px}
.stage-ctrl button{width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(139,63,224,.4)}
.stage-ctrl button:active{transform:scale(.93)}
.stage-ctrl button.sec{width:48px; height:48px; background:var(--card2); border:1px solid var(--line2); box-shadow:none}
.stage-ctrl button svg{width:24px; height:24px; fill:#fff}
.stage-ctrl button.sec svg{fill:var(--text); width:20px; height:20px}

.seek-wrap{padding:0 2px}
input[type=range].seek{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:99px;
  background:linear-gradient(90deg,var(--g2) 0%, var(--g4) 0%, var(--card2) 0%);
  outline:none; cursor:pointer;
}
input[type=range].seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.5); border:none;
}
input[type=range].seek::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:#fff; border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.times{display:flex; justify-content:space-between; color:var(--muted); font-size:calc(11.5px * var(--fs));
  font-variant-numeric:tabular-nums; margin-top:7px}

.controls{display:flex; align-items:center; justify-content:center; margin:10px 0 4px}
.play-big{
  width:70px; height:70px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(139,63,224,.45);
  transition:transform .12s ease;
}
.play-big:active{transform:scale(.94)}
.play-big svg{width:26px; height:26px; fill:#fff}
.pl-status{text-align:center; color:var(--muted); font-size:calc(12.5px * var(--fs)); min-height:18px; margin-top:6px}

.tom-row{display:flex; align-items:center; justify-content:space-between; gap:14px}
.tom-info{flex:1}
.tom-label{font-size:calc(15px * var(--fs)); font-weight:800}
.tom-sub{font-size:calc(12px * var(--fs)); color:var(--muted); margin-top:3px}
.tom-ctrl{display:flex; align-items:center; gap:14px}
.tom-btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line2);
  background:var(--card2); color:var(--text); font-size:calc(22px * var(--fs)); font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
  transition:transform .12s;
}
.tom-btn:active{transform:scale(.92)}
.tom-val{font-size:calc(23px * var(--fs)); font-weight:900; min-width:44px; text-align:center; font-variant-numeric:tabular-nums}

#downloadReady{display:none; margin-top:12px}
#downloadReady.on{display:flex}

/* ---------------- mini-player global (continua tocando entre telas) ---------------- */
.rep-player{
  display:none; align-items:center; gap:6px;
  position:absolute; z-index:40;
  left:calc(12px + var(--sal)); right:calc(12px + var(--sar)); bottom:calc(14px + var(--sab));
  background:linear-gradient(135deg, rgba(32,182,232,.10), rgba(139,63,224,.14), rgba(255,138,61,.08)), var(--card2);
  border:1px solid var(--line2); border-radius:22px; padding:12px 14px;
  box-shadow:0 -10px 34px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);
}
.rep-player.on{display:flex}
#app.has-bar .screen{padding-bottom:calc(116px + var(--sab))}
#app.has-bar.has-seek .screen{padding-bottom:calc(146px + var(--sab))}
.rp-body{flex:1; min-width:0}
/* letreiro: o titulo desliza quando nao cabe (mesma animacao da lista) */
.rp-title{display:block; width:100%; font-size:0; line-height:0; white-space:nowrap; overflow:hidden}
.rp-title-txt{display:inline-block; font-size:calc(13.5px * var(--fs)); font-weight:700; line-height:1.3;
  white-space:nowrap; pointer-events:none}
.rp-title-txt.marquee{animation: mq 5s linear infinite}
.rp-sub{font-size:calc(11.5px * var(--fs)); color:var(--muted); margin-top:2px}
.rp-btn{
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
  background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 16px rgba(139,63,224,.4); transition:transform .12s;
}
.rp-btn:active{transform:scale(.9)}
.rp-btn{width:44px; height:44px}
.rp-btn.sec{width:34px; height:34px; background:var(--card); border:1px solid var(--line2); color:var(--text); box-shadow:none}
.rp-btn svg{width:18px; height:18px; fill:currentColor}
.rp-btn.sec svg{width:15px; height:15px}
.eq{display:flex; align-items:flex-end; gap:2.5px; height:16px}
.eq i{width:3.5px; border-radius:2px; background:var(--g4); animation:eqb 1s ease-in-out infinite}
.eq i:nth-child(1){height:60%; animation-delay:0s; background:var(--g1)}
.eq i:nth-child(2){height:100%; animation-delay:.25s; background:var(--g3)}
.eq i:nth-child(3){height:45%; animation-delay:.5s; background:var(--g5)}
@keyframes eqb{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.eq.paused i{animation-play-state:paused}
.song-num{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(32,182,232,.14),rgba(232,63,146,.14));
  font-weight:800; font-size:calc(12.5px * var(--fs)); color:var(--muted);
}
.song.current{
  border:1px solid transparent;
  background:linear-gradient(var(--card2),var(--card2)) padding-box, var(--grad) border-box;
}
#newRepRow{display:none; margin-top:10px}
#newRepRow.on{display:flex}
#btnAddRep .ic-x{display:none}
#btnAddRep.on .ic-plus{display:none}
#btnAddRep.on .ic-x{display:inline; animation: xpulse 1.1s ease-in-out infinite}
#btnAddRep.on{background:var(--danger)}

/* ---------------- busca de videos ---------------- */
.cloud_file-item{
  display:flex; gap:11px; align-items:center; width:100%;
  background:var(--card2); border:1px solid var(--line); border-radius:14px;
  padding:9px; margin-bottom:9px; cursor:pointer; color:var(--text);
  font-family:inherit; text-align:left; transition:transform .12s;
}
.cloud_file-item:active{transform:scale(.98)}
.cloud_file-thumb{width:80px; height:45px; border-radius:9px; object-fit:cover; flex-shrink:0; background:#000}
.cloud_file-ic{width:44px; height:44px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--line2); color:var(--muted)}
.cloud_file-ic svg{width:20px; height:20px}
.cloud_file-t{font-size:calc(13px * var(--fs)); font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cloud_file-c{font-size:calc(11.5px * var(--fs)); color:var(--muted2); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.video-wrap{width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; margin-bottom:14px}
.video-wrap iframe{width:100%; height:100%; border:0}
/* previa em audio: player compacto (o video fica fora da tela) */
.pv-player{display:flex; align-items:center; gap:12px; margin-bottom:14px;
  background:var(--card2); border:1px solid var(--line2); border-radius:16px; padding:12px 14px}
.pv-art{width:52px; height:52px; border-radius:11px; flex:none; background:var(--line2);
  display:flex; align-items:center; justify-content:center; color:var(--muted)}
.pv-art svg{width:24px; height:24px}
.pv-play{width:44px; height:44px; flex:none; border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--g2),var(--g4))}
.pv-play:active{transform:scale(.94)}
.pv-play svg{width:22px; height:22px}
.pv-mid{flex:1; min-width:0}
.pv-bar{height:5px; border-radius:99px; background:var(--line2); cursor:pointer; overflow:hidden}
.pv-bar i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--g1),var(--g4))}
.pv-time{display:flex; justify-content:space-between; font-size:calc(11px * var(--fs)); color:var(--muted2); margin-top:5px}
.pv-host{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:-9999px}

/* ---------------- bottom sheet ---------------- */
.sheet{
  position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:50;
  display:flex; align-items:flex-end; opacity:0; pointer-events:none;
  visibility:hidden; transition:opacity .22s, visibility 0s linear .22s;
}
.sheet.on{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .22s}
.sheet-card{
  position:relative;
  width:100%; background:var(--card); border-top:1px solid var(--line2);
  border-radius:26px 26px 0 0; padding:22px 20px calc(22px + var(--sab));
  transform:translateY(30px); transition:transform .25s ease;
}
.sheet.on .sheet-card{transform:none}
.sheet-x{position:absolute; top:14px; right:14px; width:34px; height:34px; padding:0;
  background:none; border:none; cursor:pointer; color:var(--danger);
  display:flex; align-items:center; justify-content:center}
.sheet-x svg{width:20px; height:20px; animation: xpulse 1.1s ease-in-out infinite}
.sheet-x:active{opacity:.6}
.sheet-title{font-size:calc(16px * var(--fs)); font-weight:800; margin-bottom:4px}
.sheet-sub{font-size:calc(12.5px * var(--fs)); color:var(--muted); margin-bottom:16px}
.sheet-opt{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:var(--card2); border:1px solid var(--line); border-radius:16px;
  padding:15px; margin-bottom:10px; cursor:pointer; color:var(--text); font-family:inherit;
  transition:transform .12s;
}
.sheet-opt:active{transform:scale(.98)}
.so-title{font-size:calc(14.5px * var(--fs)); font-weight:700}
.so-sub{font-size:calc(12px * var(--fs)); color:var(--muted); margin-top:3px}
/* menu Conta: popover pequeno colado no canto superior direito, com fundo embacado */
#userSheet{align-items:flex-start; justify-content:flex-end;
  background:rgba(0,0,0,.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.acct-card{width:230px; max-width:76%; margin:56px 14px 0 0; padding:7px;
  background:var(--card); border:1px solid var(--line2); border-radius:16px;
  box-shadow:0 18px 46px rgba(0,0,0,.6); transform-origin:top right;
  transform:translateY(-8px) scale(.96); transition:transform .2s cubic-bezier(.2,.8,.2,1)}
#userSheet.on .acct-card{transform:none}
.acct-head{font-size:calc(12px * var(--fs)); color:var(--muted); font-weight:600; padding:6px 10px 8px}
.acct-opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:none; border-radius:11px; padding:10px; cursor:pointer;
  color:var(--text); font-family:inherit}
.acct-opt:active{background:var(--card2)}
.acct-opt .so-title{font-size:calc(14px * var(--fs)); font-weight:600}
.acct-ic{width:19px; height:19px; flex-shrink:0; color:var(--muted)}
.acct-opt.sair{color:var(--danger); border-top:1px solid var(--line); border-radius:0; margin-top:4px; padding-top:12px}
.acct-opt.sair .acct-ic{color:var(--danger)}
.acct-opt.sair .so-title{color:var(--danger)}

/* ---------------- toast ---------------- */
#toast{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%) translateY(18px);
  background:#22263a; color:var(--text); font-size:calc(13.5px * var(--fs)); font-weight:600;
  padding:12px 20px; border-radius:999px; border:1px solid var(--line2);
  box-shadow:0 10px 32px rgba(0,0,0,.5); opacity:0; pointer-events:none;
  visibility:hidden; transition:opacity .25s, transform .25s, visibility 0s linear .25s;
  z-index:99; max-width:86%; text-align:center;
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0); visibility:visible;
  transition:opacity .25s, transform .25s}

/* ---------- TABLET (iPad e afins) ----------
   O app ja ocupa a tela toda; aqui o CONTEUDO fica numa coluna centralizada,
   senao os botoes esticam de ponta a ponta e fica ruim de ler.
   Precisa vir no fim da folha para vencer as regras base de .screen. */
@media (pointer:coarse) and (min-width:700px){
  .screen{padding-left:calc(max(20px, (100% - 620px)/2) + var(--sal));
          padding-right:calc(max(20px, (100% - 620px)/2) + var(--sar))}
  .rp-seek, .rep-player{left:calc(max(12px, (100% - 640px)/2) + var(--sal));
                        right:calc(max(12px, (100% - 640px)/2) + var(--sar))}
}

/* ---------- iOS: sem zoom por toque duplo ----------
   O toque duplo dava zoom e atrapalhava no palco (dois toques rapidos no play,
   por exemplo). "manipulation" mantem rolagem e pinca, e tira so o toque duplo.
   Vem no fim da folha e reafirma as excecoes logo abaixo. */
#app, .rep-player, .sheet, .sheet-card, .acct-card, .cfg-card, .song-form,
.coach, .coach-card, .coach-mask, #songBack, #loadOv, .toast,
button, a, label, input, select, textarea, .song, .li-item, .cloud_file-item{
  touch-action:manipulation;
}
/* excecoes que precisam de gesto proprio */
.screen.active{touch-action:pan-y}     /* rolagem vertical da tela */
.rp-seek{touch-action:none}            /* arrastar a barra de progresso */
.drag-handle{touch-action:none}        /* reordenar musicas */
/* iOS nao aumenta a fonte sozinho ao girar a tela */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}