/* Soneliora 5.3.1 · Portal — mesma identidade do Estúdio (cores e fontes do app.css) */
:root {
  color-scheme: dark;
  --base: #0a171e; --base-2: #11232c; --accent: #9fd3df; --gold: #ffd38a; --text: #edece9;
  --text-2: rgba(237, 236, 233, .74); --text-3: rgba(237, 236, 233, .52); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17);
  --font-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bar: 60px; --ease: cubic-bezier(.2, .7, .2, 1); --cor: var(--accent);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--base); color: var(--text); font: 400 15px/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* ── barra ── */
.pt-bar {
  position: fixed; inset: 0 0 auto 0; height: calc(var(--bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 14px; z-index: 10;
  background: linear-gradient(180deg, rgba(10, 23, 30, .96), rgba(10, 23, 30, .86)); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pt-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 400 16px/1 var(--font-display); letter-spacing: .22em; flex: none; }
.pt-brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 18px rgba(84, 170, 196, .35); }

.pt-tabs { position: relative; display: flex; gap: 4px; padding: 4px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.pt-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--cor) 32%, transparent), color-mix(in srgb, var(--cor) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--cor) 30%, transparent); transition: transform .45s var(--ease), width .45s var(--ease), background .45s, border-color .45s; pointer-events: none; }
.pt-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 7px 16px 7px 11px; border: 0; border-radius: 999px; background: none; color: var(--text-2); transition: color .25s; white-space: nowrap; }
.pt-tab:hover { color: var(--text); }
.pt-tab[aria-selected="true"] { color: var(--text); }
.pt-tab svg { width: 22px; height: 22px; flex: none; color: var(--c, var(--accent)); }
.pt-tab b { display: block; font-weight: 600; font-size: 14px; }
.pt-tab small { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.pt-dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: transparent; transition: background .3s, box-shadow .3s; }
.pt-tab[data-estado="espera"] .pt-dot { background: rgba(255, 255, 255, .35); }
.pt-tab[data-estado="tocando"] .pt-dot { background: #8ef0c6; box-shadow: 0 0 10px #8ef0c6; animation: ptPulse 1.6s infinite; }
@keyframes ptPulse { 50% { opacity: .35; } }

.pt-right { display: flex; align-items: center; gap: 8px; flex: none; }
.pt-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); text-decoration: none; font-size: 17px; transition: color .2s, border-color .2s, transform .2s; }
.pt-icon:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }

/* mini player: a trilha do Estúdio continua enquanto outro programa está aberto */
.pt-mini { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 12px; border-radius: 999px; border: 1px solid rgba(142, 240, 198, .45); background: linear-gradient(135deg, rgba(142, 240, 198, .14), rgba(84, 170, 196, .08)); color: var(--text); max-width: 260px; animation: ptIn .45s var(--ease) both; }
.pt-mini-txt { min-width: 0; text-align: left; }
.pt-mini-txt b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pt-mini-txt small { display: block; font-size: 10.5px; color: #a8f2d2; letter-spacing: .04em; }
.pt-mini-act { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #8ef0c6; color: #062a20; font-size: 11px; font-weight: 800; }
.pt-eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.pt-eq i { width: 3px; border-radius: 2px; background: #8ef0c6; animation: ptEq 1s ease-in-out infinite; }
.pt-eq i:nth-child(2) { animation-delay: -.3s; } .pt-eq i:nth-child(3) { animation-delay: -.6s; } .pt-eq i:nth-child(4) { animation-delay: -.15s; }
.pt-mini.pausado .pt-eq i { animation-play-state: paused; height: 4px; }
@keyframes ptEq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes ptIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── palco: um quadro por programa, só o ativo aparece ── */
.pt-stage { position: fixed; inset: calc(var(--bar) + env(safe-area-inset-top)) 0 0 0; background: #050b12; }
.pt-stage:fullscreen { inset: 0; }
.pt-frame { position: absolute; inset: 0; opacity: 0; transition: opacity .38s var(--ease); display: none; }
.pt-frame.visivel { display: block; }
.pt-frame.ativo { opacity: 1; }
.pt-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--base); }
.pt-load { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--base); transition: opacity .5s var(--ease); z-index: 2; }
.pt-load.fora { opacity: 0; pointer-events: none; }
.pt-orbit { position: relative; width: 74px; height: 74px; }
.pt-orbit::before, .pt-orbit::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--c); border-right-color: color-mix(in srgb, var(--c) 40%, transparent); animation: ptSpin 1.1s linear infinite; }
.pt-orbit::after { inset: 14px; border-top-color: var(--gold); animation-duration: 1.7s; animation-direction: reverse; }
@keyframes ptSpin { to { transform: rotate(360deg); } }
.pt-load b { font: 400 22px/1.2 var(--font-display); letter-spacing: .04em; text-align: center; }
.pt-load small { color: var(--text-3); font-size: 13px; text-align: center; display: block; margin-top: 4px; }

.pt-toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 20; max-width: min(560px, 92vw); padding: 11px 18px; border-radius: 14px; background: rgba(17, 35, 44, .96); border: 1px solid var(--line-2); color: var(--text); font-size: 13.5px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s var(--ease); }
.pt-toast.on { opacity: 1; transform: translate(-50%, 0); }
.pt-noscript { position: fixed; inset: var(--bar) 0 0 0; display: grid; place-content: center; gap: 12px; text-align: center; }
.pt-noscript a { color: var(--accent); }

@media (max-width: 860px) {
  .pt-tab small { display: none; }
  .pt-tab { padding: 7px 12px 7px 9px; }
  .pt-brand span { display: none; }
}
@media (max-width: 600px) {
  :root { --bar: 56px; }
  .pt-bar { gap: 8px; }
  .pt-tab b { font-size: 12.5px; }
  .pt-tab { gap: 6px; padding: 6px 10px 6px 8px; }
  .pt-tab svg { width: 19px; height: 19px; }
  .pt-mini { padding: 4px; } .pt-mini-txt, .pt-eq { display: none; }
  #ptFull { display: none; }
}
@media (max-width: 420px) { .pt-tab b { display: none; } .pt-tab { padding: 7px 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }