/* Widget di Sociale Radio: stessi colori del sito (frontend/public/assets/css/tokens.css), chiaro e scuro */
:root{
  --bg:#ffffff; --text:#0A1240; --muted:#4B5687; --line:#D6DEF7; --surface:#EEF3FF; --surface-2:#E3ECFF;
  --accent:#2456F0; --on-accent:#ffffff; --live:#FF4D8D; --danger:#C2410C;
  color-scheme:light;
}
:root[data-accent="violet"]{ --accent:#7C4DFF }
:root[data-accent="pink"]{ --accent:#E0306F }
:root[data-accent="gold"]{ --accent:#FFC63A; --on-accent:#0A1240 }
:root[data-theme="dark"]{
  --bg:#0B1031; --text:#E6EBFF; --muted:#A9B4DD; --line:#253067; --surface:#0E1539; --surface-2:#151E4D;
  --accent:#5A80FF; --danger:#FFB59A; color-scheme:dark;
}
:root[data-theme="dark"][data-accent="violet"]{ --accent:#9B7BFF }
:root[data-theme="dark"][data-accent="pink"]{ --accent:#FF4D8D }
:root[data-theme="dark"][data-accent="gold"]{ --accent:#FFC63A }
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg:#0B1031; --text:#E6EBFF; --muted:#A9B4DD; --line:#253067; --surface:#0E1539; --surface-2:#151E4D;
    --accent:#5A80FF; --danger:#FFB59A; color-scheme:dark;
  }
  :root[data-theme="auto"][data-accent="violet"]{ --accent:#9B7BFF }
  :root[data-theme="auto"][data-accent="pink"]{ --accent:#FF4D8D }
  :root[data-theme="auto"][data-accent="gold"]{ --accent:#FFC63A }
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text) }
body{ font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding:10px }
a{ color:var(--accent) }
button{ font:inherit; cursor:pointer }
.w__app{ max-width:720px; margin:0 auto }
.w__muted{ color:var(--muted); margin:.4rem 0 }

/* lettore */
.w__player{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px 14px; display:grid; gap:10px }
.w__top,.w__bar{ display:flex; align-items:center; gap:10px; justify-content:space-between }
.w__tag{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); display:inline-flex; align-items:center; gap:6px }
.w__tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--muted) }
.is-live .w__tag{ color:var(--live) }
.is-live .w__tag::before{ background:var(--live); animation:wpulse 1.4s ease-in-out infinite }
@keyframes wpulse{ 50%{ opacity:.35 } }
.w__ears{ font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:4px }
.w__main{ display:flex; align-items:center; gap:12px; min-width:0 }
.w__play{ flex:none; width:52px; height:52px; border-radius:50%; border:0; background:var(--accent); color:var(--on-accent); display:grid; place-items:center }
.w__play svg{ width:24px; height:24px }
.w__play:disabled{ opacity:.45; cursor:not-allowed }
.w__play:focus-visible,.w__vbtn:focus-visible,.w__btn:focus-visible,.w__search:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.w__who{ display:grid; min-width:0; flex:1 }
.w__who small{ color:var(--muted); font-size:12px }
.w__who b{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.w__who span{ color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.w__art img,.w__art .w__ph{ width:56px; height:56px; border-radius:12px; object-fit:cover; display:block }
.w__ph{ background:var(--surface-2) }
.w__vbtn{ border:0; background:none; color:var(--muted); padding:4px; display:grid; place-items:center }
.w__range{ flex:1; accent-color:var(--accent); max-width:180px }
.w__open{ font-size:13px; font-weight:600; text-decoration:none; margin-left:auto }
.w__note{ margin:0; font-size:13px; color:var(--danger) }

/* liste: ultimi brani, palinsesto, richieste */
.w__h{ font-size:15px; margin:0 0 8px }
.w__items{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.w__it{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--surface); border:1px solid var(--line); min-width:0 }
.w__it.is-now{ border-color:var(--accent) }
.w__thumb{ flex:none; width:40px; height:40px; border-radius:10px; object-fit:cover }
.w__tx{ display:grid; min-width:0; flex:1 }
.w__tx b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.w__tx span{ color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.w__time{ flex:none; color:var(--muted); font-size:12px }
.w__btn{ flex:none; padding:6px 12px; border-radius:999px; background:var(--accent); color:var(--on-accent); text-decoration:none; font-size:13px; font-weight:600 }
.w__search{ width:100%; padding:9px 12px; margin:0 0 8px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit }
.w__foot{ margin:10px 0 0; text-align:right; font-size:12px }
.w__brand{ color:var(--muted); text-decoration:none; font-weight:600 }
@media (prefers-reduced-motion: reduce){ .is-live .w__tag::before{ animation:none } }

/* mini lettore (una riga) */
body.w--mini{ padding:4px }
.w__player--mini{ padding:8px 10px; border-radius:999px; gap:0 }
.w__player--mini .w__main{ gap:10px }
.w__player--mini .w__play{ width:40px; height:40px }
.w__player--mini .w__play svg{ width:18px; height:18px }
.w__player--mini .w__who b{ font-size:14px }
.w__player--mini .w__who small, .w__player--mini .w__who > span{ font-size:12px }
.w__player--mini .w__open{ font-size:12px; margin:0 }
.w__player--mini .w__note{ font-size:12px; padding:4px 6px 0 }