:root{
    --accent:#E8A53C; --accent2:#B91626;
    --bg:#0C0A07; --ink:#FFF7E8; --ink-2:#C9BCA0; --ink-3:#8A7E63;
    --surface:rgba(255,247,232,.06); --border:rgba(255,247,232,.12);
    --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
    --serif:"Fraunces",Georgia,serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{font-family:var(--sans);background:var(--bg);color:var(--ink);overflow:hidden;
    -webkit-font-smoothing:antialiased;line-height:1.4;
    /* tela cheia mesmo em notch */ padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

  /* fundo imersivo: capa borrada por trás */
  #bgArt{position:fixed;inset:-60px;z-index:0;background-size:cover;background-position:center;
    filter:blur(60px) saturate(1.3) brightness(.55);transform:scale(1.15);transition:background-image .6s;opacity:.9}
  #bgGrad{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(120% 90% at 50% -10%,transparent,rgba(12,10,7,.55) 55%,rgba(12,10,7,.92) 100%),
               radial-gradient(80% 50% at 80% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%)}

  .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
    max-width:680px;margin:0 auto;padding:20px 20px max(20px,env(safe-area-inset-bottom))}

  /* topo: logo + nome */
  header{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
  header img{height:32px;width:auto;flex:0 0 auto}
  header .logoIcon{display:none}
  @media(max-width:480px){header .logoFull{display:none}header .logoIcon{display:block}}
  header .nm{font-weight:700;font-size:16px;letter-spacing:-.01em;flex:1 1 auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header .live{flex:0 0 auto;max-width:46%;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:30px;border:1px solid var(--border);
    background:var(--surface);color:var(--ink-2);overflow:hidden}
  header .live #liveTxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header .live .dot{flex:0 0 auto}
  header .live .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
  header .live.on{color:#fff;border-color:color-mix(in srgb,var(--accent2) 50%,transparent);background:color-mix(in srgb,var(--accent2) 22%,transparent)}
  header .live.on .dot{background:var(--accent2);animation:pulse 1.6s infinite}
  header .live.dj{color:#fff;border-color:color-mix(in srgb,var(--accent2) 50%,transparent);background:color-mix(in srgb,var(--accent2) 26%,transparent)}
  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent2) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

  /* centro: capa + faixa */
  main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,24px);min-height:0;overflow:hidden;padding:12px 0}
  .art{width:auto;height:min(48vh,100%);aspect-ratio:1;max-width:100%;border-radius:26px;overflow:hidden;position:relative;
    box-shadow:0 30px 70px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);background:var(--surface);flex:0 1 auto;min-height:0}
  .art img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s}
  .art #camImg{position:absolute;inset:0;display:none;z-index:2;opacity:1}
  .art.cam #camImg{display:block}
  .cambadge{position:absolute;top:10px;left:10px;z-index:3;display:none;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 10px;border-radius:999px;background:#B91626;color:#fff}
  .art.cam .cambadge{display:inline-flex}
  .cambadge .cdot{width:6px;height:6px;border-radius:50%;background:#fff;animation:campulse 1.2s infinite}
  @keyframes campulse{0%,100%{opacity:1}50%{opacity:.35}}
  .art .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);
    background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 28%,#1a160e),#120f09)}
  .art .ph svg{width:38%;height:38%;opacity:.5}
  .art.spin{animation:breath 3.6s ease-in-out infinite}
  @keyframes breath{0%,100%{box-shadow:0 30px 70px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12)}
    50%{box-shadow:0 26px 86px -18px color-mix(in srgb,var(--accent) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}}

  .meta{text-align:center;width:100%;padding:0 6px;flex:0 0 auto}
  .meta .lab{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
  .meta .ti{font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:-.02em;line-height:1.15;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .meta .ar{font-size:17px;color:var(--ink-2);margin-top:6px;font-weight:500}

  .controls{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:12px}
  .ctlrow{display:flex;align-items:center;gap:21px}
  .ctlbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s,transform .1s}
  .ctlbtn:active{transform:scale(.93)}
  .ctlbtn svg{width:18px;height:18px}
  .ctlbtn .voloff{display:none}
  .ctlbtn.muted{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 50%,transparent)}
  .ctlbtn.muted .volon{display:none}.ctlbtn.muted .voloff{display:block}
  .play{width:78px;height:78px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto;
    background:linear-gradient(150deg,var(--accent),#cf8a1f);color:#1A1206;display:grid;place-items:center;
    box-shadow:0 16px 40px -12px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 2px 0 rgba(255,255,255,.4);
    transition:transform .12s,filter .2s}
  .play>*{grid-area:1/1} /* tudo no mesmo cell: ícone e spinner não empilham */
  .play:active{transform:scale(.94)}
  .play:hover{filter:brightness(1.06)}
  .play svg{width:34px;height:34px}
  .play .pausebars{display:none}
  .play.playing .playtri{display:none}.play.playing .pausebars{display:block}
  .play.loading{pointer-events:none}
  .play.loading svg{display:none}
  .play .ld{display:none;width:28px;height:28px;border:4px solid rgba(26,18,6,.3);border-top-color:#1A1206;border-radius:50%;animation:spin 1s linear infinite}
  .play.loading .ld{display:block}
  @keyframes spin{to{transform:rotate(360deg)}}
  .listeners{font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;font-weight:600}
  .listeners svg{width:16px;height:16px;opacity:.8}
  .listeners.off{color:var(--ink-3)}

  /* rodapé: ações grandes */
  footer{flex:0 0 auto;display:flex;gap:11px;padding-top:18px}
  .act{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:16px;
    background:var(--surface);border:1px solid var(--border);color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
  .act:active{transform:scale(.97)}
  .act:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
  .act svg{width:24px;height:24px}
  .act.wa svg{color:#25D366}
  #installAct{display:none}
  .act{position:relative}
  .actBadge{position:absolute;top:7px;right:14px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#E2455A;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px #0c0907}
  .actBadge[hidden]{display:none}
  .chatFeed{display:flex;flex-direction:column;gap:8px;min-height:240px}
  .chatFeed .cmsg{padding:9px 12px;border-radius:11px;background:#241d12;font-size:14px;animation:fade .2s}
  .chatFeed .cmsg b{color:var(--accent)}
  /* locutor ao vivo no chat: ponto vermelho pulsante + tag de papel */
  .chatFeed .cmsg--dj{background:rgba(226,59,59,.12);box-shadow:inset 0 0 0 1px rgba(226,59,59,.3)}
  .chatFeed .cmsg--dj b{color:#ff6b6b}
  .livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e23b3b;margin-right:6px;vertical-align:middle;animation:livePulse 1.3s infinite}
  @keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(226,59,59,.55)}50%{box-shadow:0 0 0 5px rgba(226,59,59,0)}}
  .rtag{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:999px;margin-left:6px;background:#e23b3b;color:#fff;vertical-align:middle}
  /* badges de nível do ouvinte (recompensa por engajamento) */
  .rtag--lvl{background:#3a3326;color:#e8d9b8}
  .rtag--lvl2{background:#1f6f6b;color:#fff}
  .rtag--lvl3{background:var(--accent);color:#1a1208}
  .rtag--lvl4{background:linear-gradient(90deg,#8b5cf6,#d946ef);color:#fff}
  @media (prefers-reduced-motion:reduce){.livedot{animation:none}}
  .chatCompose{display:flex;gap:6px;margin-top:10px;align-items:center}
  .chatCompose input{padding:9px 11px;border-radius:10px;background:#241d12;border:1px solid #3a2f1c;color:inherit;font-size:14px;outline:none}
  .chatCompose .chatNick{flex:0 0 84px;min-width:0;opacity:.85}
  .chatCompose .chatInput{flex:1;min-width:0}
  .chatCompose .chatSend{flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:none;background:var(--accent);color:#1a1208;display:grid;place-items:center;cursor:pointer}
  .chatCompose .chatSend svg{width:18px;height:18px}
  .chatNickAsk{margin-bottom:14px;padding:14px;border-radius:13px;background:var(--surface);border:1px solid var(--border)}
  .chatNickAsk p{font-size:14px;color:var(--ink-2);margin-bottom:10px;font-weight:600}
  .chatNickRow{display:flex;gap:8px}
  .chatNickRow input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;background:#241d12;border:1px solid #3a2f1c;color:inherit;font-size:14px;outline:none}
  .chatNickRow button{flex:0 0 auto;padding:10px 18px;border-radius:10px;border:none;background:var(--accent);color:#1a1208;font-weight:700;font-size:14px;cursor:pointer}
  .reqExtra-btn{width:100%;padding:12px;border-radius:12px;background:var(--accent);color:#1A1206;font-weight:700;font-size:14px;border:none;margin-bottom:12px;cursor:pointer}

  #toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:50;
    background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:14px;font-weight:700;font-size:14px;
    box-shadow:0 16px 40px -12px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:.25s}
  #toast.show{opacity:1;transform:translate(-50%,0)}

  /* ===== painel de interação do ouvinte (bottom sheet) — o diferencial ===== */
  .sheet{position:fixed;inset:0;z-index:40;display:none}
  .sheet.open{display:block}
  .sheet-bg{position:absolute;inset:0;background:rgba(6,5,3,.62);backdrop-filter:blur(4px);animation:fade .25s}
  .sheet-card{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:#16120b;
    border:1px solid var(--border);border-bottom:none;border-radius:26px 26px 0 0;height:86vh;max-height:86vh;display:flex;flex-direction:column;
    animation:slideup .32s cubic-bezier(.2,.7,.3,1);padding-bottom:env(safe-area-inset-bottom)}
  @keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
  .sheet-grab{width:40px;height:4px;border-radius:4px;background:var(--ink-3);margin:11px auto 2px;flex:0 0 auto;opacity:.6}
  .sheet-h{display:flex;align-items:center;gap:10px;padding:8px 20px 0;flex:0 0 auto}
  .sheet-h h2{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.01em}
  .sheet-h .x{margin-left:auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--border);font-size:16px;background:var(--surface)}
  .sheet-tabs{display:flex;gap:6px;padding:15px 18px 0;flex:0 0 auto}
  .sheet-tabs button{flex:1;min-width:0;padding:10px 3px;border-radius:13px;font-weight:700;font-size:11.5px;line-height:1.15;text-align:center;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px}
  .sheet-tabs button svg{width:19px;height:19px;flex:0 0 auto}
  /* aba Letra: letra plana da música tocando (via LRCLIB, servida pelo painel) */
  .lyrics{padding:2px 2px 8px;color:var(--ink);overflow-wrap:break-word}
  .lyrics .ly-head{font-size:12.5px;color:var(--ink-2);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--border)}
  .lyrics .ly-head .ly-t{font-weight:700;color:var(--ink)}
  .lyrics .ly-line{font-size:15.5px;line-height:1.62;color:var(--ink);min-height:.7em}
  .lyrics .ly-line.ly-gap{height:.7em}
  .lyrics .ly-src{margin-top:16px;font-size:11px;color:var(--ink-3);letter-spacing:.02em}
  .meta-tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sheet-tabs button.on{color:#1A1206;background:var(--accent);border-color:var(--accent)}
  .sheet-body{overflow-y:auto;padding:16px 20px 24px;flex:1 1 auto;-webkit-overflow-scrolling:touch}
  .pane{display:none}.pane.on{display:block}
  .sheet-foot{flex:0 0 auto;padding:12px 20px 14px;border-top:1px solid var(--border);background:#16120b}
  .sheet-foot[hidden]{display:none}
  .sheet-foot .chatCompose{margin-top:0}
  .sheet-card.chat .sheet-body{overflow:hidden;padding-bottom:6px}
  .sheet-card.chat .pane.on[data-pane="chat"]{display:flex;flex-direction:column;height:100%}
  .sheet-card.chat .chatFeed{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .srch{width:100%;padding:14px 15px;border-radius:13px;border:1px solid rgba(255,247,232,.18);background:var(--surface);color:var(--ink);font-size:16px;font-family:inherit;margin-bottom:13px}
  .srch:focus{outline:none;border-color:var(--accent)}
  .reqrow{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;border:1px solid var(--border);margin-bottom:8px;background:var(--surface)}
  .reqrow .ic{width:46px;height:46px;border-radius:9px;background:#241d12;flex:0 0 auto;object-fit:cover}
  .reqrow .nf{flex:1;min-width:0}
  .reqrow .nf .t{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .reqrow .nf .a{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .reqrow .go{flex:0 0 auto;padding:10px 17px;border-radius:11px;font-weight:700;font-size:14px;background:var(--accent);color:#1A1206;border:none;cursor:pointer}
  .reqrow .go:disabled{opacity:.45}
  .recrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
  .recrow img{width:44px;height:44px;border-radius:9px;flex:0 0 auto;background:#241d12;object-fit:cover}
  .recrow .t{font-weight:600;font-size:15px}.recrow .a{font-size:12.5px;color:var(--ink-2)}
  .emptyline{text-align:center;color:var(--ink-3);font-size:14px;padding:30px 10px}
  .sleepgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
  .sleepgrid button{padding:20px;border-radius:15px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:18px;cursor:pointer}
  .sleepgrid button.on{background:var(--accent);color:#1A1206;border-color:var(--accent)}
  .sleepnote{text-align:center;color:var(--ink-2);font-size:14px;margin-top:16px;line-height:1.5}

  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  @media(max-height:680px){.art{width:min(52vw,210px)}.meta .ti{font-size:23px}.play{width:65px;height:65px}.play svg{width:28px;height:28px}}

  /* =========================================================================
     SKINS — 4 visuais selecionáveis do player. Todas leem a PALETA central
     (--accent / --accent2, vindas da config/identidade), então trocar a cor
     no painel reflete em todas. O ouvinte troca de skin pelo botão do topo
     (persistido em localStorage); o default vem de C.defaultSkin.
       · nocturne  → baseline (escuro, capa borrada no fundo, capa em destaque)
       · clean     → minimal claro-frio, sem fundo borrado, cartão sóbrio
       · glass     → glassmorphism translúcido, capa difusa + vidro fosco
       · vinyl     → disco de vinil girando (adaptado do offset.autos)
     ========================================================================= */

  /* botão seletor de skin (canto do header) + popover */
  .skinBtn{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
    border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.15s}
  .skinBtn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
  .skinBtn svg{width:18px;height:18px}
  .skinPop{position:fixed;z-index:60;display:none}
  .skinPop.open{display:block}
  .skinPop-bg{position:fixed;inset:0;background:rgba(6,5,3,.5);backdrop-filter:blur(3px);animation:fade .2s}
  .skinPop-card{position:fixed;top:64px;right:16px;left:auto;width:min(280px,calc(100vw - 32px));
    background:#16120b;border:1px solid var(--border);border-radius:18px;padding:10px;
    box-shadow:0 24px 60px -18px rgba(0,0,0,.8);animation:slideup .25s cubic-bezier(.2,.7,.3,1)}
  .skinPop-card h3{font-family:var(--serif);font-weight:500;font-size:16px;padding:6px 8px 10px;color:var(--ink)}
  .skinGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .skinOpt{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:13px;cursor:pointer;
    border:1px solid var(--border);background:var(--surface);color:var(--ink);text-align:left;transition:.15s}
  .skinOpt:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
  .skinOpt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
  .skinOpt .sw{height:40px;border-radius:9px;overflow:hidden;position:relative;border:1px solid var(--border)}
  .skinOpt .nm2{font-weight:700;font-size:13px}
  /* mini-previews dos swatches (representam a vibe de cada skin) */
  .sw-nocturne{background:radial-gradient(120% 90% at 30% 0%,color-mix(in srgb,var(--accent) 40%,#1a160e),#0c0a07)}
  .sw-clean{background:linear-gradient(160deg,#f3efe6,#e7e2d6)}
  .sw-clean::after{content:"";position:absolute;left:10px;bottom:8px;width:14px;height:14px;border-radius:50%;background:var(--accent)}
  .sw-glass{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#0c0a07),#221b10)}
  .sw-glass::after{content:"";position:absolute;inset:6px;border-radius:7px;background:rgba(255,255,255,.14);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.25)}
  .sw-vinyl{background:#0a0a0b;display:grid;place-items:center}
  .sw-vinyl::after{content:"";width:26px;height:26px;border-radius:50%;
    background:repeating-radial-gradient(circle at 50% 50%,#0a0a0b 0,#0a0a0b 1px,#222 2px,#0a0a0b 3px);
    box-shadow:inset 0 0 0 6px transparent,0 0 0 1px #333}
  .sw-vinyl::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent2);z-index:1}

  /* ---------- VINYL: disco reaproveitado do offset.autos (classes vinyl-*) ---------- */
  /* só aparece na skin vinyl; substitui a .art quadrada por um disco que gira ao tocar */
  .vinyl-disc{display:none;width:var(--v,min(70vw,38vh,290px));height:var(--v,min(70vw,38vh,290px));position:relative;flex:0 0 auto}
  body[data-skin="vinyl"] .vinyl-disc{display:block}
  .vinyl-disc .vinyl-spin{position:absolute;inset:0;animation:vinyl-rot 3.4s linear infinite;animation-play-state:paused}
  .vinyl-disc .vinyl-spin[data-spin="true"]{animation-play-state:running}
  @keyframes vinyl-rot{to{transform:rotate(360deg)}}
  .vinyl-grooves{position:absolute;inset:0;border-radius:9999px;
    background:repeating-radial-gradient(circle at 50% 50%,#0a0a0b 0px,#0a0a0b 1px,#18181b 2px,#0a0a0b 3px);
    box-shadow:0 24px 60px -18px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06)}
  /* capa real da música no anel externo do disco (fica embaixo do label) */
  .vinyl-cover{position:absolute;inset:6%;border-radius:9999px;background-size:cover;background-position:center;
    opacity:0;transition:opacity .5s;mask:radial-gradient(circle at 50% 50%,transparent 0 27%,#000 30% 100%);
    -webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 27%,#000 30% 100%)}
  .vinyl-disc.hasart .vinyl-cover{opacity:.92}
  .vinyl-word{display:none}
  .vinyl-word-white{color:#f4f2ed}
  .vinyl-word-black{color:#0a0a0b;clip-path:circle(21% at 50% 50%)}
  /* label central na cor de ACENTO da rádio (paleta editável) */
  .vinyl-label{position:absolute;inset:29%;border-radius:9999px;
    background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent2) 88%,#fff),var(--accent2));
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
  .vinyl-hole{position:absolute;inset:47.5%;border-radius:9999px;background:#0a0a0b;box-shadow:0 0 0 1.5px rgba(0,0,0,.5)}
  .vinyl-spec{position:absolute;inset:0;border-radius:9999px;pointer-events:none;
    background:linear-gradient(125deg,rgba(255,255,255,.14) 0%,transparent 32%,transparent 68%,rgba(255,255,255,.06) 100%)}
  /* tonearm decorativo (braço do toca-discos) */
  .vinyl-arm{position:absolute;top:-8%;right:-6%;width:56%;height:56%;pointer-events:none;transform-origin:88% 12%;z-index:3;
    transform:rotate(-34deg);transition:transform .6s ease}
  .vinyl-disc.playing .vinyl-arm{transform:rotate(2deg)}
  .vinyl-arm i{position:absolute;top:5%;right:6%;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#6a6a72,#26262a);box-shadow:0 2px 6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.35);border:1px solid #151517}
  .vinyl-arm b{position:absolute;top:12%;right:14%;width:5px;height:74%;background:linear-gradient(#edeef2,#9a9aa2);border-radius:4px;transform-origin:top;transform:rotate(28deg);box-shadow:0 1px 5px rgba(0,0,0,.55)}
  .vinyl-arm b::after{content:"";position:absolute;bottom:-5px;left:-4px;width:13px;height:17px;border-radius:3px;background:linear-gradient(150deg,#44444a,#1a1a1d);box-shadow:0 2px 6px rgba(0,0,0,.6);border:1px solid #0c0c0e}

  body[data-skin="vinyl"] .art{display:none}
  body[data-skin="vinyl"] main{overflow:visible}
  body[data-skin="vinyl"] main{gap:clamp(18px,4vh,32px)}
  body[data-skin="vinyl"] .meta .lab{color:var(--accent)}

  /* ---------- CLEAN: minimal claro, sem fundo borrado ---------- */
  body[data-skin="clean"]{--bg:#f4f0e7;--ink:#1c1810;--ink-2:#6b6353;--ink-3:#9a9080;
    --surface:rgba(28,24,16,.05);--border:rgba(28,24,16,.12);color:var(--ink);background:var(--bg)}
  body[data-skin="clean"] #bgArt{display:none}
  body[data-skin="clean"] #bgGrad{background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
  body[data-skin="clean"] .art{border-radius:18px;box-shadow:0 18px 50px -22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5)}
  body[data-skin="clean"] .meta .ti{color:var(--ink)}
  body[data-skin="clean"] .play{color:#fff;background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));
    box-shadow:0 14px 36px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
  body[data-skin="clean"] .toast,body[data-skin="clean"] #toast{background:#1c1810;color:#f4f0e7}
  body[data-skin="clean"] .sheet-card,body[data-skin="clean"] .skinPop-card{background:#fbf8f1;color:var(--ink)}
  body[data-skin="clean"] .chatFeed .cmsg,body[data-skin="clean"] .chatCompose input,
  body[data-skin="clean"] .reqrow .ic,body[data-skin="clean"] .recrow img{background:rgba(28,24,16,.06)}
  body[data-skin="clean"] .chatCompose input{border-color:rgba(28,24,16,.16)}

  /* ---------- GLASS: glassmorphism translúcido moderno ---------- */
  body[data-skin="glass"] #bgArt{filter:blur(46px) saturate(1.5) brightness(.6);opacity:1}
  body[data-skin="glass"] #bgGrad{background:
    radial-gradient(120% 90% at 50% -10%,transparent,rgba(12,10,7,.35) 60%,rgba(12,10,7,.78) 100%),
    radial-gradient(70% 50% at 18% 12%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),
    radial-gradient(70% 50% at 85% 90%,color-mix(in srgb,var(--accent2) 26%,transparent),transparent 60%)}
  body[data-skin="glass"] main{gap:clamp(16px,3.5vh,26px)}
  body[data-skin="glass"] .art{border-radius:24px;border:1px solid rgba(255,255,255,.22);
    box-shadow:0 30px 80px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.35)}
  body[data-skin="glass"] .meta{padding:14px 18px;border-radius:22px;
    background:rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid rgba(255,255,255,.18);box-shadow:0 16px 50px -22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22)}
  body[data-skin="glass"] header .live,body[data-skin="glass"] .act,body[data-skin="glass"] .listeners{
    backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
  body[data-skin="glass"] .act{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  body[data-skin="glass"] .play{box-shadow:0 16px 44px -12px color-mix(in srgb,var(--accent) 80%,transparent),
    inset 0 2px 0 rgba(255,255,255,.5),0 0 0 1px rgba(255,255,255,.25)}