/* SONARO: tema escuro em roxo.
   Layout inspirado no app web do Deezer: painéis arredondados lado a lado,
   capas grandes em primeiro plano e o player flutuando na base.
   As fontes vêm do Google Fonts (Inter para a interface, Bricolage Grotesque nos títulos). */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  color-scheme: dark;

  --bg: #0f0d13;
  --panel: #16141b;
  --surface: #1b191f;
  --surface-2: #26232c;
  --surface-3: #35323d;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  --text: #fdfbff;
  --text-2: #c2c0c4;
  --text-3: #9a979e;

  --violet: #6f27f6;
  --violet-hi: #8447ff;
  --violet-soft: #c17aff;
  --pink: #fe627e;
  --ok: #7fe3ae;
  --bad: #ff8272;

  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ff-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;

  --side: 248px;
  --gap: 8px;
  --player-h: 84px;
}

/* base */
*, *::before, *::after { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100svh; background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--ff-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--violet); color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 3px; }
a { color: var(--violet-soft); }
code { padding: .1em .45em; font: .88em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); border-radius: 6px; }
p { margin-block: 0; }
.hidden { display: none !important; }
.muted { max-width: 62ch; color: var(--text-2); }
.small { font-size: .8rem; line-height: 1.55; }

h1, h2 { margin-block: 0; font-family: var(--ff-display); font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; letter-spacing: -.025em; }

/* o HTML escreve os eyebrows em caixa-alta; aqui viram frase normal */
.eyebrow { color: var(--violet-soft); font-size: .82rem; font-weight: 600; text-transform: lowercase; }
.eyebrow::first-letter { text-transform: uppercase; }

/* marca */
.logo { display: flex; align-items: center; gap: 12px; font: 800 1.3rem/1 var(--ff-display); letter-spacing: .02em; }
.logo-mark { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: #fff; background: linear-gradient(140deg, var(--violet-hi), var(--violet) 55%, #4a17c4); border-radius: 12px; box-shadow: 0 8px 22px -8px rgba(111, 39, 246, .8); }
.logo-mark svg { width: 22px; height: 22px; }
.subbrand { margin-top: 12px; color: var(--text-3); font-size: .78rem; }
.icon { flex: 0 0 18px; width: 18px; height: 18px; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon.icon-sm { flex-basis: 16px; width: 16px; height: 16px; }

/* botões */
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 20px; font-size: .88rem; font-weight: 650; line-height: 1.2; text-align: center; text-decoration: none; border-radius: var(--r-pill); transition: background-color .16s, transform .16s; }
.primary { color: #fff; background: var(--violet); box-shadow: 0 10px 26px -12px rgba(111, 39, 246, .9); }
.primary:hover:not(:disabled) { background: var(--violet-hi); }
.secondary { color: var(--text); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--line); }
.secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .13); }
.primary:active:not(:disabled), .secondary:active:not(:disabled) { transform: scale(.98); }
.fill { width: 100%; margin-top: 22px; }
.danger { color: var(--bad); }

/* telas de acesso */
.center-screen { display: grid; place-items: center; min-height: 100svh; padding: 24px 16px; background: radial-gradient(70rem 36rem at 50% -8%, rgba(111, 39, 246, .38), transparent 62%), var(--bg); }
.auth-box { width: min(100%, 460px); padding: clamp(26px, 5vw, 44px); background: var(--panel); border-radius: 28px; box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px rgba(0, 0, 0, .75); }
.auth-box .logo { margin-bottom: 44px; }
.auth-box h1 { margin: 12px 0 14px; font-size: clamp(2.1rem, 6vw, 2.9rem); }
.auth-box > .muted { margin-bottom: 26px; }
.auth-box .small { margin-top: 20px; color: var(--text-3); }

/* formulários */
.auth-box label, .stack label { display: block; margin-bottom: 16px; color: var(--text-2); font-size: .82rem; font-weight: 600; }
label input:not([type="checkbox"]), label select, label textarea { display: block; margin-top: 7px; }
input:not([type="range"]):not([type="checkbox"]), select, textarea { width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-md); outline: none; transition: border-color .16s, box-shadow .16s; }
::placeholder { color: #8d8a92; opacity: 1; }
input:not([type="range"]):focus, select:focus, textarea:focus { border-color: var(--violet-soft); box-shadow: 0 0 0 3px rgba(193, 122, 255, .22); }
textarea { min-height: 96px; resize: vertical; }
input[type="file"] { padding: 10px; cursor: pointer; }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; color: var(--text); font-weight: 600; background: var(--surface-3); border: 0; border-radius: var(--r-pill); cursor: pointer; }
select { appearance: none; cursor: pointer; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c2c0c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
option { color: var(--text); background: var(--surface); }
input[type="range"] { width: 100%; min-width: 0; accent-color: var(--violet-soft); cursor: pointer; }

/* avisos */
.hint, .notice, .message { padding: 13px 16px; font-size: .84rem; line-height: 1.6; border-radius: var(--r-md); }
.hint { margin: 18px 0; color: var(--text-2); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.hint strong { color: var(--text); }
.message { margin-top: 12px; color: var(--bad); background: rgba(255, 130, 114, .09); box-shadow: inset 0 0 0 1px rgba(255, 130, 114, .28); }
.message.good { color: var(--ok); background: rgba(127, 227, 174, .08); box-shadow: inset 0 0 0 1px rgba(127, 227, 174, .28); }
.notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 30px; color: var(--text-2); background: rgba(111, 39, 246, .13); box-shadow: inset 0 0 0 1px rgba(193, 122, 255, .22); }
.notice .icon { margin-top: 3px; color: var(--violet-soft); }
.notice b { color: var(--text); }

/* estrutura: menu lateral e painel principal, dois blocos separados por um respiro, como no Deezer */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: var(--gap); min-height: 100svh; padding: var(--gap); }
.sidebar { position: sticky; top: var(--gap); display: flex; flex-direction: column; gap: 28px; height: calc(100svh - 2 * var(--gap)); padding: 26px 14px 18px; overflow-y: auto; background: var(--panel); border-radius: var(--r-lg); }
.sidebar > div:first-child { padding-left: 10px; }
body:has(.playerbar:not(.hidden)) .sidebar { height: calc(100svh - 3 * var(--gap) - var(--player-h)); }
.nav { display: grid; gap: 4px; }
.nav button { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 46px; padding: 11px 14px; color: var(--text-2); font-size: .9rem; font-weight: 600; text-align: left; white-space: nowrap; border-radius: var(--r-md); transition: background-color .16s, color .16s; }
.nav button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav button.active { color: var(--text); background: var(--surface-2); }
.nav button.active::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; background: var(--violet-soft); border-radius: 0 3px 3px 0; }
.nav button.active .icon { color: var(--violet-soft); }
.side-bottom { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); }
.side-bottom b { display: flex; align-items: center; gap: 9px; font-size: .84rem; }
.side-bottom b .icon { color: var(--violet-soft); }
.side-bottom p { margin: 8px 0 16px; color: var(--text-3); font-size: .78rem; line-height: 1.55; }
.side-bottom .secondary { width: 100%; }

.main { min-width: 0; min-height: calc(100svh - 2 * var(--gap)); padding: clamp(26px, 4vw, 52px) clamp(18px, 4vw, 52px) 130px; background: linear-gradient(180deg, rgba(111, 39, 246, .27), rgba(111, 39, 246, 0) 380px), var(--panel); border-radius: var(--r-lg); }
.heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; padding-bottom: 30px; }
.heading h1 { margin: 10px 0 12px; }
.heading .muted { margin: 0; }
.heading .primary { white-space: nowrap; }

/* números do acervo: uma faixa só, repartida por filetes, sem caixinhas soltas */
.stats { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 40px; overflow: hidden; background: var(--line); border-radius: var(--r-lg); }
.stat { flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 20px 22px; background: var(--surface); }
.stat:first-child { flex: 1.7 1 220px; background: linear-gradient(135deg, rgba(111, 39, 246, .42), rgba(111, 39, 246, .1) 70%), var(--surface); }
.stat b { font: 800 clamp(1.9rem, 3vw, 2.7rem)/1 var(--ff-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--text-2); font-size: .8rem; }

/* busca e filtros */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.toolbar .field { flex: 1 1 150px; min-height: 46px; background-color: var(--surface); border-color: transparent; border-radius: var(--r-pill); }
.toolbar .field:hover { background-color: var(--surface-2); }
.toolbar select.field { padding-left: 18px; }
.toolbar .search { flex: 2 1 260px; padding-left: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239a979e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 17px center; }

/* cards: capa embutida com cantos próprios, sem borda */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); gap: 18px 14px; align-items: start; }
.card { min-width: 0; padding: 10px; background: var(--surface); border-radius: 22px; transition: background-color .18s; }
.card:hover, .card:focus-within { background: var(--surface-2); }
.card-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg, #4b1fc9, #8a4dff 55%, var(--pink)); border-radius: 12px; }
.card:nth-child(4n+2) .card-art { background: linear-gradient(135deg, #1b3fd1, var(--violet) 60%, var(--violet-soft)); }
.card:nth-child(4n+3) .card-art { background: linear-gradient(135deg, #7a1fa8, #d23a8a 55%, #ff8a5c); }
.card:nth-child(4n) .card-art { background: linear-gradient(135deg, #0f6f8a, #4f46e5 55%, #b560ff); }
.card-art img, .card-art video { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-art .symbol { font: 800 3.4rem/1 var(--ff-display); color: rgba(255, 255, 255, .92); }
.card-art .art-action { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 16px; color: #fff; font-size: .78rem; font-weight: 700; background: var(--violet); border-radius: var(--r-pill); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); transition: opacity .18s, transform .18s, background-color .16s; }
.card-art .art-action:hover { background: var(--violet-hi); }
@media (hover: hover) {
  .card-art .art-action { opacity: 0; transform: translateY(8px); }
  .card:hover .art-action, .card:focus-within .art-action { opacity: 1; transform: none; }
}
.card-info { padding: 14px 4px 4px; }
.card-title { font-size: .95rem; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; overflow-wrap: anywhere; }
.meta { margin: 4px 0 0; color: var(--text-3); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.pill { display: inline-flex; align-items: center; padding: 3px 10px; color: var(--text-2); font-size: .74rem; font-weight: 650; line-height: 1.5; background: rgba(255, 255, 255, .07); border-radius: var(--r-pill); }
.pill.ready { color: var(--violet-soft); background: rgba(111, 39, 246, .22); }
.pill.premium { color: var(--pink); background: rgba(254, 98, 126, .14); }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-actions button { min-height: 36px; padding: 6px 13px; color: var(--text); font-size: .78rem; font-weight: 600; background: rgba(255, 255, 255, .07); border-radius: var(--r-pill); transition: background-color .16s; }
.card-actions button:hover { background: rgba(255, 255, 255, .14); }
.card-actions button:first-child { color: #fff; background: rgba(111, 39, 246, .45); }
.card-actions button:first-child:hover { background: rgba(111, 39, 246, .75); }
.card-actions button.danger { color: var(--bad); }
.empty { grid-column: 1 / -1; padding: 56px 24px; color: var(--text-2); text-align: center; line-height: 1.7; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.load-more { display: flex; justify-content: center; margin-top: 34px; }

/* página "sobre" */
.about { max-width: 68ch; }
.about h2 { margin: 38px 0 12px; }
.about h2:first-child { margin-top: 0; }
.about p { margin-bottom: 16px; color: var(--text-2); line-height: 1.75; }
.about b { color: var(--text); }

/* janelas */
.modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 18px; background: rgba(8, 6, 12, .72); backdrop-filter: blur(8px); }
.modal.open { display: grid; }
.dialog { width: min(100%, 640px); max-height: min(92dvh, 860px); padding: clamp(20px, 3vw, 30px); overflow: auto; background: var(--surface); border-radius: 26px; box-shadow: 0 0 0 1px var(--line), 0 40px 100px -20px rgba(0, 0, 0, .8); animation: abrir .2s ease-out; }
.dialog.wide { width: min(100%, 940px); }
@keyframes abrir { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dialog-head h2 { margin: 0; }
.dialog-head button { flex-shrink: 0; }
.stack { display: grid; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.viewer { display: grid; place-items: center; min-height: 130px; }
.viewer img, .viewer video { max-width: 100%; max-height: 64dvh; object-fit: contain; border-radius: var(--r-md); }
.viewer audio { width: 100%; }

/* player */
.playerbar { position: fixed; z-index: 60; left: var(--gap); right: var(--gap); bottom: var(--gap); display: grid; grid-template-columns: auto auto auto minmax(150px, 1fr) minmax(180px, 1.5fr) 110px auto; align-items: center; gap: 12px; min-height: var(--player-h); padding: 12px 22px; background: rgba(27, 25, 31, .86); backdrop-filter: blur(20px) saturate(1.5); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line-strong), 0 24px 60px -16px rgba(0, 0, 0, .8); }
.round { display: grid; place-items: center; width: 40px; height: 40px; color: var(--text); font-size: 1rem; line-height: 1; font-variant-emoji: text; background: transparent; border-radius: 50%; transition: background-color .16s; }
.round:hover { background: rgba(255, 255, 255, .1); }
#playPause { width: 48px; height: 48px; color: #fff; background: var(--violet); box-shadow: 0 10px 24px -8px rgba(111, 39, 246, .9); }
#playPause:hover { background: var(--violet-hi); }
.track { display: grid; gap: 2px; min-width: 0; }
.track b, .track span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track b { font-size: .9rem; font-weight: 650; }
.track span { color: var(--text-3); font-size: .78rem; }
.progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.progress span { color: var(--text-3); font-size: .74rem; font-variant-numeric: tabular-nums; }
#closePlayer { min-height: 38px; padding: 6px 12px; }

/* telas médias */
@media (max-width: 1180px) {
  :root { --side: 216px; }
  .sidebar { padding-inline: 10px; }
  .playerbar { grid-template-columns: auto auto auto minmax(110px, 1fr) minmax(130px, 1.4fr) auto; }
  #volume { display: none; }
}

/* tablet: o menu vira uma faixa no topo */
@media (max-width: 800px) {
  .shell { display: block; padding: 0; }
  .sidebar, body:has(.playerbar:not(.hidden)) .sidebar { position: relative; top: auto; height: auto; padding: 16px 16px 10px; border-radius: 0; }
  .nav { display: flex; gap: 6px; margin-top: 4px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
  .nav button { flex-shrink: 0; width: auto; min-height: 42px; padding: 9px 16px; border-radius: var(--r-pill); }
  .nav button.active::before { display: none; }
  .side-bottom { display: none; }
  .main { min-height: 0; border-radius: 0; }
  .playerbar { grid-template-columns: auto auto auto minmax(80px, 1fr) auto; grid-template-rows: auto auto; gap: 8px 10px; padding: 12px 14px; }
  .playerbar .progress { grid-column: 1 / -1; grid-row: 2; }
  #closePlayer { grid-column: 5; grid-row: 1; }
  .two { grid-template-columns: 1fr; gap: 0; }
}

/* celular */
@media (max-width: 480px) {
  .logo { font-size: 1.15rem; }
  .heading h1 { font-size: 2.5rem; }
  .stat { padding: 16px; }
  .stat:first-child { flex-basis: 100%; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 8px; border-radius: 18px; }
  .card-info { padding: 10px 2px 2px; }
  .card-title { font-size: .86rem; }
  .card-actions button { padding: 6px 10px; font-size: .74rem; }
  .dialog { padding: 18px; border-radius: 22px; }
  .dialog-head { align-items: flex-start; }
  .playerbar { gap: 6px 8px; padding: 10px 12px; }
  .round { width: 36px; height: 36px; }
  #playPause { width: 42px; height: 42px; }
  .track span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* =====================================================
   SONARO — CAMADA PÚBLICA (5 páginas virtuais)
   O painel privado existente permanece com suas cores.
   ===================================================== */
body.view-public > #setup,
body.view-public > #loginScreen,
body.view-public > #unauthorized,
body.view-public > #app,
body.view-public > .modal,
body.view-public > #playerbar { display: none !important; }
body.view-admin > #publicSite { display: none !important; }
.pub-page[hidden] { display: none !important; }
.pub-layout {
  --ink: #0a0a0a;
  --paper: #1a1a1a;
  --line-green: #274234;
  --terminal: #00ff88;
  --terminal-dim: #a2f5c8;
  --forest: #003322;
  --chalk: #f0f1e9;
  --soft: #afb8ad;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100svh;
  background: var(--ink);
  color: var(--chalk);
  font: 400 15px/1.65 "Inter", Arial, sans-serif;
}
.pub-layout h1,.pub-layout h2,.pub-layout h3 { font-family: "Playfair Display",Georgia,serif; text-wrap: balance; letter-spacing: -.03em; }
.pub-layout h1 { font-size: clamp(3rem,5.4vw,6rem); line-height: 1.06; font-weight: 600; }
.pub-layout h2 { font-size: clamp(1.5rem,2.7vw,2.5rem); font-weight: 600; line-height: 1.15; }
.pub-layout h3 { font-size: 1.25rem; margin: 0 0 9px; }
.pub-layout em { color: var(--terminal); font-weight: 400; }
.pub-layout a { color: inherit; text-decoration: none; }
.pub-layout a:hover { color: var(--terminal); }
.pub-layout button,.pub-layout input { font: inherit; }
.pub-layout button { cursor: pointer; }
.pub-layout :focus-visible { outline: 2px solid var(--terminal); outline-offset: 4px; }
.pub-sidebar { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 34px 19px 22px; background: #101310; border-right: 1px solid #273a2f; z-index: 20; }
.pub-brand { display: flex; gap: 12px; align-items: center; font-size: 1.2rem; font-weight: 800; letter-spacing: .13em; }
.pub-brand-icon { display: grid; place-items: center; width: 43px; height: 43px; background: var(--forest); border: 1px solid var(--terminal); border-radius: 6px; color: var(--terminal); font-size: 1.8rem; }
.pub-brand small { display: block; margin-top: 1px; font: 400 .6rem/1.4 "Inter",sans-serif; letter-spacing: .04em; color: var(--soft); }
.pub-nav { display: grid; gap: 5px; margin-top: 56px; }
.pub-nav a { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-left: 2px solid transparent; border-radius: 3px; color: #b8c8b8; font-size: .91rem; transition: color .2s,background .2s; }
.pub-nav a > span { display: inline-grid; place-items: center; width: 19px; color: #82b698; font-size: 1.2rem; }
.pub-nav a:hover { background: #18231b; }
.pub-nav a[aria-current="page"] { border-left-color: var(--terminal); background: #17291e; color: var(--terminal); font-weight: 600; }
.pub-side-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid #294233; color: #b1c7b3; font-size: .72rem; }
.pub-status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--terminal); border-radius: 50%; }
.pub-admin-link { display: block; margin-top: 18px; font-size: .74rem; color: #a5baa9 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.pub-content { min-width: 0; }
.pub-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 0 clamp(22px,4vw,66px); border-bottom: 1px solid #25382b; }
.pub-overline,.pub-topnote { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #9dbaa5; }
.pub-topnote { letter-spacing: .02em; text-transform: none; }
.pub-main { min-height: 66vh; padding: 0 clamp(22px,4vw,66px) 75px; }
.pub-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr); gap: 25px; align-items: center; min-height: 520px; margin: 25px 0 58px; padding: clamp(35px,5vw,75px); overflow: hidden; border: 1px solid #1e4831; border-radius: 8px; background: linear-gradient(120deg,#101e15,#0a0a0a 65%,#12321e); }
.pub-hero::after { content:""; pointer-events:none; position:absolute; inset:0; opacity:.18; background:repeating-linear-gradient(105deg,transparent 0 13px,rgba(198,242,204,.09) 14px,transparent 15px 33px); }
.pub-hero-copy { position: relative; z-index: 2; max-width: 660px; }
.pub-kicker { margin: 0 0 20px; color: var(--terminal); font: 600 .73rem/1.2 "Inter",sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.pub-hero h1 { margin: 0 0 22px; }
.pub-hero-copy > p:not(.pub-kicker),.pub-section-intro > p:not(.pub-kicker) { max-width: 55ch; color: #c0d1c2; font-size: 1rem; }
.pub-cta { display: inline-flex; gap: 24px; align-items: center; margin-top: 23px; padding: 13px 20px; color: #0a0a0a !important; background: var(--terminal); border-radius: 4px; font-weight: 700; transition: background .2s; }
.pub-cta:hover { background: #9bffd0; }
.pub-hero-art { position: relative; height: 345px; min-width: 0; transform: translateY(calc(var(--pub-scroll,0px) * .055)); }
.pub-record { position: absolute; left: 50%; top: 50%; display: grid; place-items:center; width: min(29vw,300px); height: min(29vw,300px); max-width: 100%; max-height: 100%; min-width: 205px; min-height:205px; transform:translate(-50%,-50%); border: 3px solid #308256; border-radius: 50%; background: repeating-radial-gradient(circle at center,#0c1910 0 4px,#1c3425 5px,#0c1910 7px); box-shadow: 0 0 0 11px #06100a; }
.pub-record-center { display:grid;place-items:center;width:87px;height:87px;background:var(--terminal);color:var(--ink);border-radius:50%;font:bold 3rem Georgia,serif; }
.pub-art-ring { position:absolute; top:50%;left:50%;border:1px dashed rgba(0,255,136,.55);border-radius:50%;transform:translate(-50%,-50%); }
.pub-art-ring-one { width:320px;height:320px; }
.pub-art-ring-two { width:370px;height:370px;opacity:.4; }
.pub-sketch { position:absolute;color:var(--terminal);font-size:2.5rem;transform:rotate(-12deg); }
.pub-sketch-one { right:-5px;top:3px; }
.pub-sketch-two { left:0;bottom:8px; }
.pub-section-head { display:flex;justify-content:space-between;align-items:end;gap:20px;padding-bottom:20px;border-bottom:1px solid #2c4031; }
.pub-section-head .pub-kicker { margin-bottom:9px; }
.pub-section-head h2 { margin:0; }
.pub-understated,.pub-caption { color:#9db6a2;font-size:.8rem; }
.pub-empty { display:flex;align-items:center;gap:26px;margin-top:24px;padding:35px;border:1px solid #2b4434;background:var(--paper);border-radius:5px; }
.pub-empty-symbol {display:grid;place-items:center;flex:0 0 82px;width:82px;height:82px;border:1px dashed #55aa75;color:var(--terminal);font-size:2.7rem;border-radius:50%;}
.pub-empty p { margin: 0; max-width: 55ch; color: var(--soft); }
.pub-section-intro { max-width: 800px; padding: 85px 0 35px; }
.pub-section-intro h1 { margin: 0 0 22px; }
.pub-photo-grid { display:grid;grid-template-columns:1.1fr 1fr;gap:15px; }
.pub-photo { position:relative;display:block;min-height:210px;overflow:hidden;padding:0;border:1px solid #2b4535;background:var(--paper);border-radius:5px;text-align:left; }
.pub-photo-tall {grid-row:span 2;min-height:450px;}
.pub-photo img {display:block;width:100%;height:100%;min-height:210px;object-fit:cover;filter:saturate(.55);transition:filter .22s;}
.pub-photo:hover img {filter:saturate(1);}
.pub-photo span {position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:#0a0a0ad9;color:var(--terminal);font-size:.85rem;}
.pub-caption { margin-top:17px; }
.pub-collection-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
.pub-collection { padding:16px 16px 24px;background:var(--paper);border:1px solid #2b4434;border-radius:6px; }
.pub-cover {position:relative;display:grid;place-items:center;aspect-ratio:1.5/1;margin-bottom:20px;border:1px solid #327348;background:#0d2a1b;color:var(--terminal);font:7rem Georgia,serif;}
.pub-cover span {position:absolute;right:14px;top:10px;font:600 1rem "Inter",sans-serif;}
.pub-cover-alt {background:#15251c;color:#adddc0;}
.pub-collection .pub-kicker {margin:0 0 10px;}
.pub-collection h2 {margin:0 0 10px;}
.pub-collection p:last-child {color:var(--soft);}
.pub-release {display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:34px;align-items:stretch;padding:20px;background:var(--paper);border:1px solid #294733;border-radius:7px;}
.pub-release-art {display:flex;flex-direction:column;justify-content:space-between;min-height:330px;padding:20px;background:var(--forest);border:1px solid #34714f;color:var(--terminal);letter-spacing:.2em;}
.pub-release-art strong {align-self:center;font:12rem Georgia,serif;line-height:1;}
.pub-release-copy {padding:22px 15px 22px 0;}
.pub-release-copy h2 {margin:0 0 18px;}
.pub-release-copy dl {margin:0 0 22px;}
.pub-release-copy dl > div {display:grid;grid-template-columns:120px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid #384339;}
.pub-release-copy dt {color:#92ab98;}
.pub-release-copy dd {margin:0;color:var(--chalk);}
.pub-release-copy > p:last-child {font-size:.85rem;color:var(--soft);}
.pub-artist-placeholder {display:flex;align-items:center;gap:27px;padding:22px;background:var(--paper);border:1px solid #325241;border-radius:5px;}
.pub-artist-initial {display:grid;place-items:center;flex:0 0 195px;min-height:195px;background:var(--forest);border:1px solid #437357;color:var(--terminal);font:8rem Georgia,serif;}
.pub-artist-placeholder h2 {margin:0 0 14px;}
.pub-artist-placeholder p:last-child {color:var(--soft);max-width:48ch;}
.pub-footer {padding:52px clamp(22px,4vw,66px) 24px;border-top:1px solid #2b4b36;background:#101610;}
.pub-footer-top {display:grid;grid-template-columns:1fr .6fr 1.2fr;gap:36px;}
.pub-footer-brand {font-weight:800;letter-spacing:.15em;font-size:1.35rem;}
.pub-footer-top p,.pub-footer-bottom p {max-width:40ch;color:var(--soft);font-size:.82rem;}
.pub-footer-nav {display:grid;align-content:start;gap:8px;}
.pub-footer-nav strong,.pub-newsletter strong,.pub-footer-bottom strong {color:var(--terminal);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;}
.pub-footer-nav a {color:#c8d8c9;font-size:.82rem;}
.pub-newsletter-fields {display:flex;gap:7px;}
.pub-newsletter-fields input {min-width:0;flex:1;padding:10px 12px;background:#0a0a0a;border:1px solid #3c6b4d;border-radius:4px;color:var(--chalk);}
.pub-newsletter-fields button {padding:10px 17px;background:var(--terminal);color:var(--ink);border-radius:4px;font-weight:700;}
.pub-news-status {min-height:23px;color:#9db4a0!important;font-size:.74rem!important;}
.pub-footer-bottom {display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:46px;padding-top:29px;border-top:1px solid #2a4934;}
.pub-map {display:grid;place-items:center;margin-top:12px;min-height:110px;border:1px dashed #43845d;background:repeating-linear-gradient(30deg,#121c14 0 25px,#1a281e 26px 27px);color:var(--soft);font-size:.8rem;}
.pub-copyright {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:35px;padding-top:18px;border-top:1px solid #293e2f;color:#91ac95;font-size:.76rem;}
.pub-back-top {position:fixed;right:22px;bottom:22px;z-index:35;width:44px;height:44px;background:var(--terminal);color:var(--ink);border:0;border-radius:50%;font-size:1.3rem;opacity:0;pointer-events:none;transition:opacity .2s;}
.pub-back-top.pub-back-visible {opacity:1;pointer-events:auto;}
.pub-lightbox {position:fixed;inset:0;max-width:min(94vw,1000px);max-height:92vh;padding:20px;background:#141914;color:#fff;border:1px solid #387d54;border-radius:8px;}
.pub-lightbox::backdrop {background:#000e;}
.pub-lightbox figure {margin:0;}
.pub-lightbox img {display:block;max-width:100%;max-height:76vh;margin:auto;object-fit:contain;}
.pub-lightbox figcaption {padding-top:13px;color:var(--soft);font-size:.84rem;text-align:center;}
.pub-lightbox > button {position:absolute;z-index:2;top:5px;right:9px;padding:0 10px;font-size:2rem;background:#17271c;color:#fff;border-radius:4px;}
.pub-menu-toggle {display:none;}
.pub-visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.pub-animate .pub-page [data-reveal] {opacity:0;transform:translateY(13px);transition:opacity .45s ease,transform .45s ease;}
.pub-animate .pub-page [data-reveal].pub-visible {opacity:1;transform:none;}
@media(max-width:1100px){.pub-layout{grid-template-columns:210px minmax(0,1fr)}.pub-sidebar{padding-inline:13px}.pub-hero{padding:35px;grid-template-columns:1fr .7fr}.pub-hero-art{height:275px}.pub-art-ring-two{width:290px;height:290px}.pub-art-ring-one{width:260px;height:260px}.pub-footer-top{grid-template-columns:1fr 1fr}.pub-newsletter{grid-column:1/-1}}
@media(max-width:780px){.pub-layout{display:block}.pub-sidebar{position:sticky;top:0;height:auto;min-height:70px;padding:12px 20px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pub-menu-toggle{display:grid;gap:5px;padding:12px;border:1px solid #2d5139;border-radius:5px;background:#172319}.pub-menu-toggle span{width:22px;height:2px;background:var(--terminal)}.pub-nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:12px 20px 20px;background:#101610;border-bottom:1px solid #2d5139}.pub-sidebar.pub-menu-open .pub-nav{display:grid}.pub-side-foot{display:none}.pub-topbar{min-height:55px}.pub-hero{grid-template-columns:1fr;min-height:0}.pub-hero-art{height:180px;overflow:hidden}.pub-record{min-height:180px;min-width:180px;width:180px;height:180px}.pub-art-ring-one{width:230px;height:230px}.pub-art-ring-two{width:270px;height:270px}.pub-section-intro{padding-top:60px}.pub-footer-top{grid-template-columns:1fr 1fr}.pub-release{grid-template-columns:1fr}.pub-release-art{min-height:200px}.pub-release-art strong{font-size:8rem}.pub-release-copy{padding:5px 10px 15px}}
@media(max-width:560px){.pub-topnote{display:none}.pub-main{padding-bottom:50px}.pub-hero{margin:15px 0 35px;padding:27px 22px}.pub-layout h1{font-size:clamp(2.8rem,11vw,4.2rem)}.pub-layout h2{font-size:1.65rem}.pub-hero-art{display:none}.pub-empty{padding:22px;gap:14px}.pub-empty-symbol{flex-basis:55px;width:55px;height:55px;font-size:1.9rem}.pub-section-head{display:block}.pub-understated{display:block;margin-top:8px}.pub-photo-grid,.pub-collection-grid,.pub-footer-top,.pub-footer-bottom{grid-template-columns:1fr}.pub-photo-tall{grid-row:auto;min-height:220px}.pub-artist-placeholder{align-items:flex-start;flex-direction:column}.pub-artist-initial{min-height:155px;flex-basis:auto;width:100%;font-size:6rem}.pub-footer-top{gap:23px}.pub-newsletter{grid-column:auto}.pub-footer-bottom{gap:22px}.pub-copyright{flex-direction:column;align-items:flex-start}.pub-release-copy dl>div{grid-template-columns:100px 1fr}}
@media(prefers-reduced-motion:reduce){.pub-animate .pub-page [data-reveal]{opacity:1;transform:none;transition:none}.pub-hero-art{transform:none}}
/* ===========================================================
  SONARO PÚBLICO — BLUE / TEAL / GOLD + PLAYLISTS PARA VISITANTES
  Escopo público. Sem mudar autorização nem arquivos do Supabase.
=========================================================== */
.pub-layout {
  --ink:#0A1828; --paper:#122638; --terminal:#BFA181;
  --terminal-dim:#d1bfa8; --forest:#123847;
  --chalk:#f6f4ef; --soft:#a5b8c4;
  --line-green:rgba(191,161,129,.15);
  background:#0A1828; color:#f6f4ef;
  grid-template-columns:250px minmax(0,1fr);
}
.pub-layout h1,.pub-layout h2,.pub-layout h3 { font-family:'Playfair Display',Georgia,serif; }
.pub-layout h1 {font-size:clamp(2.8rem,5.2vw,5rem)}
.pub-layout h2 {font-size:clamp(1.5rem,2.7vw,2.5rem)}
.pub-layout em{color:#BFA181;font-style:normal}
.pub-sidebar{background:linear-gradient(180deg,#102338,#0b1a2a);border-color:rgba(191,161,129,.17);padding:28px 18px 21px;gap:0}
.pub-brand-wrap{display:grid;gap:20px}
.pub-brand{letter-spacing:.08em;gap:11px}
.pub-brand-mark{flex:0 0 52px;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;overflow:hidden}
.pub-brand-mark img{width:100%;height:100%;object-fit:contain}
.pub-brand-text strong{display:block;font-size:1.06rem;letter-spacing:.14em}
.pub-brand-text small{display:block;color:#abc0cd;font-size:.62rem;letter-spacing:0;font-weight:400}
.pub-private-button{display:flex;align-items:center;justify-content:center;min-height:41px;padding:9px 10px;background:#BFA181;color:#0A1828!important;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:0;text-align:center}
.pub-private-button:hover{background:#dec4a5;color:#0A1828!important}
.pub-nav{margin-top:35px;gap:5px}
.pub-nav a{border:0;border-radius:11px;padding:11px 12px;color:#adbfcc;white-space:nowrap;font-size:.89rem;transition:background .18s,color .18s}
.pub-nav a > span{color:#88b5bb}
.pub-nav a:hover{background:#1b3345}
.pub-nav a[aria-current=page]{background:linear-gradient(100deg,rgba(23,133,130,.25),rgba(191,161,129,.1));color:#f9f4eb;border:1px solid rgba(191,161,129,.18)}
.pub-nav a[aria-current=page] > span{color:#BFA181}
.pub-nav-count{margin-left:auto;border-radius:12px;background:#244358;padding:0 7px;min-width:24px;text-align:center;font-size:.72rem!important;color:#e9d2b7!important}
.pub-side-foot{color:#a2b9ca;border-color:rgba(191,161,129,.18);font-size:.78rem}
.pub-side-foot-badge{color:#BFA181;font-weight:600}
.pub-side-foot p{font-size:.72rem;margin-top:10px;color:#91aabe}
.pub-status-dot{background:#178582}
.pub-topbar{border-color:rgba(191,161,129,.12);background:#0e2031;min-height:72px}
.pub-topbar-left,.pub-topbar-right{color:#b6b3aa;font-size:.7rem;letter-spacing:.1em}
.pub-main{padding-inline:clamp(20px,4vw,58px)}
.pub-hero{border-radius:28px;border-color:rgba(191,161,129,.21);background:radial-gradient(ellipse 70% 80% at 80% 50%,rgba(23,133,130,.2),transparent 75%),linear-gradient(125deg,#18354a,#0b1a2a);min-height:470px;box-shadow:0 20px 65px rgba(0,0,0,.18);padding:clamp(24px,4vw,55px)}
.pub-hero::after{opacity:.065}
.pub-hero-copy p:not(.pub-kicker){color:#c4ccd2}
.pub-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.pub-cta{border-radius:999px;cursor:pointer;margin:0;border:0;background:#BFA181!important;color:#0A1828!important;text-decoration:none!important;font-weight:700;gap:16px;padding:11px 22px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.pub-cta:hover{background:#dec5a9!important;color:#0A1828!important}
.pub-ghost-link{display:inline-flex;align-items:center;padding:10px 17px;border:1px solid rgba(191,161,129,.3);border-radius:999px;text-decoration:none!important;color:#f4e7d9!important}
.pub-ghost-link:hover{background:rgba(191,161,129,.09)}
.pub-kicker{color:#BFA181;font-size:.73rem}
.pub-section-head{border-color:rgba(191,161,129,.18)}
.pub-understated{color:#9cb5c3}
.pub-section-head h2{font-size:clamp(1.4rem,2.7vw,2.4rem)}
.pub-overview,.pub-tracks{margin-bottom:38px}
.pub-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:20px}
.pub-info-card{background:#12283a;border:1px solid rgba(191,161,129,.13);padding:19px;border-radius:18px}
.pub-info-index{color:#BFA181;display:block;margin-bottom:12px;font-weight:700;font-size:.83rem}
.pub-info-card h3{font-size:1.14rem;margin-bottom:8px}
.pub-info-card p{color:#aebdca;font-size:.85rem}
.pub-tracks .pub-section-head{margin-bottom:0}
.pub-vinyl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(28vw,280px);height:min(28vw,280px);min-width:210px;min-height:210px;border-radius:50%;background:repeating-radial-gradient(circle at center,#081624 0 4px,#162c3c 5px 10px,#102334 11px 17px);border:3px solid #345264;box-shadow:0 0 0 12px rgba(191,161,129,.06),0 0 0 23px rgba(23,133,130,.07)}
.pub-vinyl-inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;background:linear-gradient(140deg,#BFA181,#178582);border-radius:50%;border:12px solid #1e3543}
.pub-wave{position:absolute;border:1px dashed rgba(191,161,129,.26);border-radius:50%}
.pub-wave.one{inset:20px 10px auto auto;width:170px;height:170px}
.pub-wave.two{left:0;bottom:10px;width:110px;height:110px}
.pub-wave.three{right:30px;bottom:0;width:85px;height:85px}
.pub-photo{border-radius:17px;border-color:rgba(191,161,129,.14);background:#11293c}
.pub-photo span{color:#efd6bc}
.pub-section-intro{max-width:790px;padding-block:70px 34px}
.pub-section-intro>p:not(.pub-kicker){color:#a9bbc7}
.pub-playlist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pub-playlist-card{border:1px solid rgba(191,161,129,.17);border-radius:19px;padding:16px;background:#122638}
.pub-playlist-cover{display:grid;place-items:center;min-height:240px;margin-bottom:18px;background:linear-gradient(125deg,#163a49,#12304a 70%,#ad9476);border-radius:14px;color:#f2e3d2;font:700 5rem 'Playfair Display',serif}
.pub-playlist-cover.alt{background:linear-gradient(120deg,#0d2238,#24605c);color:#BFA181}
.pub-playlist-card p:last-child{color:#b4c3cb}
.pub-release-panel{display:grid;grid-template-columns:minmax(200px,.82fr) 1.18fr;gap:28px;padding:18px;border:1px solid rgba(191,161,129,.15);background:#122638;border-radius:22px}
.pub-release-cover{min-height:320px;padding:22px;border-radius:16px;background:linear-gradient(135deg,#123a48,#28475a,#BFA181);display:flex;flex-direction:column;justify-content:space-between;color:#f4f1ea}
.pub-release-cover strong{font:700 11rem/1 'Playfair Display',serif;text-align:center}
.pub-release-text{padding:25px 12px 12px 0}
.pub-release-text dl>div{display:grid;grid-template-columns:100px 1fr;border-bottom:1px solid rgba(191,161,129,.15);padding:10px 0}
.pub-release-text dd{margin:0}.pub-release-text dt,.pub-release-text>p:last-child{color:#adc1cf}
.pub-artist-card{display:flex;align-items:center;gap:24px;padding:22px;background:#122638;border:1px solid rgba(191,161,129,.13);border-radius:20px}
.pub-artist-mark{flex:0 0 200px;min-height:200px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(130deg,#123847,#BFA181);font-size:7rem;color:#fff}
.pub-artist-copy p:last-child{color:#bbccd1}
.pub-footer{background:#0b1b2a;border-color:rgba(191,161,129,.16)}
.pub-footer-top{grid-template-columns:1fr .6fr 1.2fr}
.pub-footer-brand{font-weight:800;letter-spacing:.1em}
.pub-footer-links{display:grid;align-content:start;gap:8px}
.pub-footer-links a{color:#d2d6da;font-size:.84rem}
.pub-footer-links strong,.pub-newsletter strong,.pub-footer-bottom strong{color:#BFA181}
.pub-footer-bottom{border-color:rgba(191,161,129,.15)}
.pub-map{border-color:rgba(191,161,129,.26);border-radius:13px;background:repeating-linear-gradient(32deg,#0e2938 0 26px,#173248 27px 29px)}
.pub-footer-last{display:flex;justify-content:space-between;gap:12px;padding-top:18px;margin-top:35px;border-top:1px solid rgba(191,161,129,.17);font-size:.8rem;color:#a9bac6}
.pub-footer-last a{color:#BFA181}
.pub-newsletter-fields{margin-top:12px}.pub-newsletter-fields input{border-radius:12px;background:#0A1828}.pub-newsletter-fields button{background:#BFA181;color:#0A1828;border-radius:99px}
.pub-back-top{background:#BFA181;color:#0A1828}
.pub-lightbox{background:#11283b;border-radius:19px;border-color:rgba(191,161,129,.32)}
.pub-lightbox>button{background:#244056;border-radius:8px}
.pub-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* === Catálogo: listas horizontais mais próximas de Deezer === */
.pub-catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0}
.pub-catalog-search{flex:1;min-height:44px;max-width:440px;background:#132b3f!important;border:1px solid rgba(191,161,129,.22)!important;border-radius:999px!important;color:#fff!important;padding:10px 20px!important}
.pub-catalog-counter{font-size:.8rem;color:#adc0ca;white-space:nowrap}
.pub-song-list{display:grid;gap:8px;margin-top:19px}
.pub-song{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:15px;min-height:81px;padding:10px 15px;background:#132638;border:1px solid rgba(191,161,129,.11);border-radius:15px;transition:background .17s,border-color .17s}
.pub-song:hover{background:#1a3546;border-color:rgba(191,161,129,.25)}
.pub-song-cover{display:grid;place-items:center;width:60px;height:60px;border-radius:11px;overflow:hidden;background:linear-gradient(135deg,#1a7773,#264d66,#BFA181);font-size:2.1rem;color:#e6f7f3}
.pub-song-cover img{width:100%;height:100%;object-fit:cover}
.pub-song-data{min-width:0}
.pub-song-data h3{margin:0 0 3px;font:700 .99rem/1.3 'Inter',sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.pub-song-data p{color:#a5bdc9;font-size:.8rem;overflow-wrap:anywhere}
.pub-song-demo{font-size:.66rem;letter-spacing:.03em;color:#cfaf8c}
.pub-song-actions{display:flex;align-items:center;gap:7px}
.pub-song-actions button{border:1px solid rgba(191,161,129,.16);color:#ebf0f1;background:#21394b;border-radius:12px;min-width:39px;min-height:38px;padding:6px 9px;font-size:1.12rem;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:background .15s,transform .15s}
.pub-song-actions button:hover:not(:disabled){background:#315468;transform:translateY(-1px)}
.pub-song-actions .pub-song-play{background:#BFA181;color:#0A1828;font-size:.8rem;min-width:82px;font-weight:700;border-color:transparent;border-radius:999px}
.pub-song-actions .pub-song-play:disabled{opacity:.56;cursor:not-allowed}
.pub-song-actions .pub-song-icon.is-favorite{color:#e6a9a6;background:#483744}
.pub-song-actions .pub-remove-icon{color:#ebb3a8}
.pub-catalog-note{font-size:.76rem;color:#93aab9;margin:17px 0 9px;line-height:1.6}
.pub-text-link{font-size:.84rem;font-weight:650;color:#dec4a8!important;text-decoration:none}
.pub-library-empty{border:1px dashed rgba(191,161,129,.25);border-radius:18px;padding:45px 24px;display:grid;justify-items:center;text-align:center;gap:10px;background:#102337}
.pub-library-empty h3{font-size:1.5rem;margin:0}
.pub-library-empty p{color:#abc0cd;max-width:47ch;font-size:.9rem}
.pub-empty-glyph{font-size:2.8rem;color:#BFA181}
.pub-small-cta{display:inline-flex;align-items:center;justify-content:center;padding:11px 19px;background:#BFA181;border-radius:999px;color:#0A1828!important;font-size:.83rem;font-weight:700;border:0;text-decoration:none!important;margin-top:10px}
.pub-small-cta:disabled{opacity:.5;cursor:not-allowed}
/* === Playlists pessoais do visitante === */
.pub-collection-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;max-width:none;padding-block:65px 30px}
.pub-collection-heading>div{max-width:700px}
.pub-action-cta{white-space:nowrap;align-self:center}
.pub-collection-stats{display:flex;gap:1px;overflow:hidden;border-radius:14px;background:rgba(191,161,129,.15);margin-bottom:20px;max-width:580px}
.pub-collection-stats>div{display:grid;gap:5px;min-width:0;flex:1;background:#142e40;padding:18px 24px}
.pub-collection-stats strong{font:600 2.2rem/1 'Playfair Display',serif}
.pub-collection-stats span{font-size:.79rem;color:#a6bdc9}
.pub-own-playlists{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.pub-own-playlist{display:flex;gap:14px;align-items:center;text-align:left;padding:14px;background:#142b3c;border:1px solid rgba(191,161,129,.17);border-radius:15px;min-width:0;color:#fff;transition:background .17s}
.pub-own-playlist:hover{background:#1a3b4d}
.pub-own-art{flex:0 0 78px;width:78px;height:78px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(140deg,#178582,#BFA181);color:#fff;font-size:2.5rem}
.pub-own-art.variant{background:linear-gradient(140deg,#244f77,#178582)}
.pub-own-playlist>div:nth-child(2){flex:1;min-width:0}
.pub-own-playlist strong{display:block;line-height:1.3;font-weight:700;overflow-wrap:anywhere}
.pub-own-playlist span:not(.pub-own-arrow){display:block;font-size:.75rem;color:#BFA181;margin-top:3px}
.pub-own-playlist p{font-size:.75rem;color:#adc0cd;margin-top:4px;overflow-wrap:anywhere}
.pub-own-arrow{color:#BFA181;margin-left:auto}
.pub-playlist-detail{margin-top:22px}
.pub-playlist-detail[hidden],.pub-own-playlists[hidden]{display:none!important}
.pub-back-link{padding:8px 0;color:#BFA181;text-align:left;font-weight:650;font-size:.86rem}
.pub-playlist-identity{display:flex;align-items:center;gap:25px;margin:15px 0 20px}
.pub-playlist-cover-art{flex:0 0 160px;width:160px;height:160px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#0f5c6c,#BFA181);font-size:5rem;color:#fff}
.pub-playlist-identity h2{font-size:clamp(1.9rem,3.5vw,3.2rem);overflow-wrap:anywhere}
.pub-playlist-identity p:not(.pub-kicker){color:#c0cfd5;margin:5px 0}
.pub-playlist-identity small{color:#a7b9c7}
.pub-playlist-tools{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.pub-playlist-tools>button:not(.pub-small-cta){border:1px solid rgba(191,161,129,.25);padding:10px 18px;border-radius:999px;color:#d6dfe2;background:#1e3a4b;font-size:.83rem}
.pub-playlist-tools .pub-destructive{color:#e9b0a9!important}
/* === Janelas para criação e adição === */
.pub-system-dialog{position:fixed;inset:0;width:min(94vw,490px);max-height:min(90dvh,700px);padding:26px;border:1px solid rgba(191,161,129,.38);border-radius:22px;background:#10263a;color:#f9f6f0;box-shadow:0 28px 95px rgba(0,0,0,.65);overflow:auto}
.pub-system-dialog::backdrop{background:rgba(0,10,21,.77);backdrop-filter:blur(5px)}
.pub-dialog-top{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:19px}
.pub-dialog-top .pub-kicker{margin:0 0 6px}.pub-dialog-top h2{margin:0;font-size:2rem}
.pub-dialog-close{background:#244055;color:#fff;border-radius:10px;width:37px;height:37px;font-size:1.4rem}
.pub-system-dialog label{display:block;font-size:.86rem;font-weight:650;margin:15px 0 7px}
.pub-system-dialog input,.pub-system-dialog textarea{display:block;width:100%;padding:12px 14px;border:1px solid rgba(191,161,129,.3);border-radius:12px;background:#081b2c;color:#fff}
.pub-system-dialog textarea{resize:vertical;min-height:90px}
.pub-dialog-primary{display:block;margin-top:21px;padding:13px 20px;background:#BFA181;color:#0A1828;border-radius:999px;font-weight:700;width:100%}
.pub-dialog-secondary{display:block;width:100%;margin-top:13px;padding:12px 16px;border:1px solid rgba(191,161,129,.34);color:#edddc9;border-radius:999px;font-weight:650}
.pub-dialog-track{color:#a9c1ca;margin:0 0 16px}
.pub-add-choices{display:grid;gap:7px;max-height:310px;overflow:auto}
.pub-add-choices button{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid rgba(191,161,129,.14);background:#1a3447;border-radius:12px;text-align:left;color:#fff}
.pub-add-choices button:hover{background:#244658}
.pub-add-choices button span:nth-child(2){flex:1;overflow-wrap:anywhere}
.pub-add-choices button small{color:#b8c5c8}
/* === Player público === */
.pub-audio-dock{position:fixed;z-index:55;bottom:10px;left:calc(250px + 16px);right:16px;display:grid;grid-template-columns:54px minmax(120px,1fr) auto minmax(100px,1.4fr) auto;align-items:center;gap:14px;padding:12px 18px;border:1px solid rgba(191,161,129,.32);border-radius:18px;background:rgba(13,33,49,.97);backdrop-filter:blur(20px);box-shadow:0 15px 60px rgba(0,0,0,.55)}
.pub-audio-dock[hidden],.pub-toast[hidden]{display:none!important}
.pub-player-cover{width:54px;height:54px;border-radius:10px;background:linear-gradient(135deg,#178582,#BFA181);display:grid;place-items:center;font-size:2rem}
.pub-player-info{display:grid;min-width:0}.pub-player-info strong,.pub-player-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-player-info strong{font-size:.9rem}.pub-player-info span{font-size:.75rem;color:#adbfc9}
.pub-player-buttons{display:flex;align-items:center;gap:6px}
.pub-player-buttons button{background:#1d394a;border-radius:50%;width:36px;height:36px;color:#fff}
.pub-player-buttons #pubTogglePlay{background:#BFA181;color:#0A1828;width:42px;height:42px;font-weight:700}
.pub-player-progress{display:flex;align-items:center;gap:9px;min-width:0}.pub-player-progress span{font-size:.72rem;color:#abbeca;white-space:nowrap}
.pub-player-progress input{flex:1;accent-color:#BFA181;min-width:30px}
.pub-dock-close{font-size:1.4rem;color:#ced9df;padding:4px 9px}
.pub-toast{position:fixed;z-index:150;right:22px;bottom:102px;max-width:min(90vw,360px);padding:13px 18px;border-radius:12px;background:#25465a;color:#f9f4ed;border:1px solid rgba(191,161,129,.44);box-shadow:0 12px 32px #0006;font-size:.86rem}
/* Administração conserva os IDs e o código original; as regras seguintes somente ajustam a responsividade pública */
@media(max-width:1200px){.pub-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pub-footer-top{grid-template-columns:1fr 1fr}.pub-newsletter{grid-column:1/-1}}
@media(max-width:830px){
  .pub-layout{display:block}.pub-sidebar{position:sticky;top:0;z-index:40;height:auto;min-height:74px;padding:10px 18px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}
  .pub-brand-wrap{display:flex;align-items:center;gap:12px}.pub-private-button{min-height:36px;font-size:.7rem;padding:7px 11px}
  .pub-menu-toggle{display:grid;gap:5px;padding:11px;background:#1d3749;border:1px solid rgba(191,161,129,.17);border-radius:10px}
  .pub-menu-toggle span{width:22px;height:2px;background:#BFA181}
  .pub-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:12px 16px 18px;margin:0;background:#0d2233;box-shadow:0 16px 28px #0005;border-bottom:1px solid rgba(191,161,129,.2)}
  .pub-sidebar.pub-menu-open .pub-nav{display:grid}.pub-side-foot{display:none}
  .pub-main{padding-inline:22px}.pub-topbar{padding-inline:22px}.pub-hero{grid-template-columns:1fr;min-height:0}.pub-hero-art{height:165px}.pub-vinyl{width:170px;height:170px;min-width:170px;min-height:170px}
  .pub-release-panel{grid-template-columns:1fr}.pub-release-cover{min-height:200px}.pub-release-cover strong{font-size:7rem}.pub-release-text{padding:8px}
  .pub-audio-dock{left:10px;right:10px;grid-template-columns:42px minmax(80px,1fr) auto auto;gap:8px;padding:10px}.pub-player-cover{width:42px;height:42px}.pub-player-progress{grid-column:1/-1;grid-row:2}.pub-dock-close{grid-column:4;grid-row:1}
}
@media(max-width:600px){
  .pub-layout h1{font-size:clamp(2.35rem,10vw,3.6rem)}.pub-layout h2{font-size:1.6rem}
  .pub-hero{margin:15px 0 34px;border-radius:22px;padding:29px 22px}.pub-hero-art{display:none}
  .pub-overview-grid,.pub-photo-grid,.pub-footer-top,.pub-footer-bottom{grid-template-columns:1fr}.pub-newsletter{grid-column:auto}
  .pub-song{grid-template-columns:47px minmax(0,1fr);gap:10px;padding:11px}.pub-song-cover{width:47px;height:47px}
  .pub-song-actions{grid-column:2;grid-row:2;justify-content:flex-start}.pub-song-actions .pub-song-play{min-width:72px}
  .pub-song-data h3{font-size:.86rem}.pub-song-data p{font-size:.74rem}.pub-song-demo{font-size:.61rem}
  .pub-catalog-toolbar{flex-wrap:wrap}.pub-catalog-search{max-width:none;flex-basis:100%}
  .pub-collection-heading{flex-direction:column;align-items:flex-start}.pub-action-cta{align-self:flex-start}
  .pub-playlist-identity{gap:12px;align-items:flex-start}.pub-playlist-cover-art{flex-basis:85px;width:85px;height:85px;font-size:3rem}
  .pub-footer-last{display:flex;gap:12px;flex-direction:column}.pub-artist-card{flex-direction:column;align-items:flex-start}.pub-artist-mark{width:100%;flex-basis:auto;min-height:140px}
  .pub-photo-tall{grid-row:auto;min-height:230px}
  .pub-private-button{font-size:.65rem;padding:7px 9px}.pub-brand-mark{flex-basis:42px;width:42px;height:42px}.pub-brand-text small{display:none}
  .pub-topbar-right{display:none}.pub-player-buttons button{width:32px;height:32px}.pub-player-buttons #pubTogglePlay{width:37px;height:37px}
}
@media(prefers-reduced-motion:reduce){.pub-hero-art{transform:none}.pub-song,.pub-own-playlist{transition:none}}

/* SONARO V5 — Páginas públicas independentes e controle de publicação */
.pub-live-grid, .pub-video-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));
  gap:17px;
  margin-top:22px;
  align-items:stretch;
}
.pub-live-grid .pub-photo {
  min-height:235px;
  aspect-ratio:1/1;
  border-radius:17px;
  background:#153044;
}
.pub-live-grid .pub-photo img {
  width:100%;height:100%;min-height:235px;object-fit:cover;
}
.pub-live-grid .pub-photo span {
  font-weight:600;
  text-shadow:0 1px 7px #000a;
}
.pub-live-grid .pub-library-empty, .pub-video-grid .pub-library-empty {
  grid-column:1/-1;
}
.pub-video-card {
  display:flex;
  flex-direction:column;
  text-align:left;
  border:1px solid rgba(191,161,129,.17);
  background:#132b3d;
  border-radius:17px;
  padding:11px;
  transition:background-color .17s, transform .17s;
}
.pub-video-card:hover,.pub-video-card:focus-visible{background:#1b3b50;transform:translateY(-2px)}
.pub-video-art {
  display:grid;place-items:center;
  min-height:170px;aspect-ratio:16/10;
  background:linear-gradient(135deg,#18364b,#11595c 80%);
  border-radius:11px;margin-bottom:12px;
}
.pub-video-play-icon {
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  color:#0A1828;background:#BFA181;font-size:1.2rem;
}
.pub-video-card strong{padding-inline:3px;color:#fff;font-size:.94rem;overflow-wrap:anywhere}
.pub-video-card small{padding:4px 3px;color:#b4c3ce;font-size:.78rem}
.pub-video-dialog {
  position:fixed;inset:0;
  width:min(95vw,960px);max-height:92dvh;
  padding:14px;border-radius:16px;
  background:#0d1c2b;color:#fff;
  border:1px solid rgba(191,161,129,.38);
}
.pub-video-dialog::backdrop{background:rgba(0,0,0,.84)}
.pub-video-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.pub-video-dialog-head strong{font-size:.94rem}
.pub-video-dialog-head button{width:38px;height:38px;color:#fff;background:#224156;border-radius:9px;font-size:1.5rem}
.pub-video-dialog video{display:block;width:100%;max-height:73vh;background:#000;border-radius:8px}
.card-actions .sonaro-public-button {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:7px 12px;
  color:#0A1828;
  background:#BFA181;
  border:1px solid rgba(191,161,129,.45);
  border-radius:100px;font-weight:700;font-size:.75rem;
}
.card-actions .sonaro-public-button:hover{background:#dbc09f}
.card-actions .sonaro-public-button.is-published{color:#e8f9f4;background:#166e70;border-color:#299997}
.card-actions .sonaro-public-button.is-published:hover{background:#1b8582}
.card-actions .sonaro-public-button:disabled{opacity:.6;cursor:wait}
@media(max-width:600px){
  .pub-live-grid,.pub-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pub-live-grid .pub-photo,.pub-live-grid .pub-photo img{min-height:145px}
  .pub-video-art{min-height:115px}
  .pub-video-card strong{font-size:.8rem}
  .pub-video-card small{font-size:.7rem}
}
.sonaro-back-public{display:flex;width:100%;margin-top:10px;text-decoration:none}
.pub-release-live,.pub-artist-live{display:flex;flex-direction:column;align-items:flex-start;min-height:185px;gap:10px;padding:21px;border:1px solid rgba(191,161,129,.17);border-radius:17px;background:#132b3d;color:#fff;text-decoration:none;transition:background-color .2s}
.pub-release-live:hover{background:#204257;color:#fff}
.pub-release-type{display:inline-block;padding:5px 10px;border-radius:20px;font-size:.73rem;color:#0A1828;background:#BFA181;font-weight:700}
.pub-release-live strong,.pub-artist-live strong{font-size:1.1rem;line-height:1.3;overflow-wrap:anywhere}
.pub-release-live small,.pub-artist-live small{font-size:.8rem;color:#aabeca}
.pub-release-arrow{margin-top:auto;font-size:.82rem;color:#BFA181}
.pub-artist-avatar{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:#178582;color:#fff;font:600 2.6rem 'Playfair Display',serif}