/* Radio ZOO v0.4.4 : a shared playlist and a personal audio player. */
.radio-page{align-items:start}
.radio-page .radio-main{min-height:650px;justify-content:center;gap:7px}
.radio-page .radio-main .album{width:min(78%,310px);aspect-ratio:1;object-fit:cover;border-radius:15px;box-shadow:0 20px 48px #0003;margin:14px 0 18px}
.radio-page .radio-main .track{font-size:25px;font-weight:750;margin-top:0}
.radio-page .radio-main .artist{font-size:13px}
.radio-page .radio-main .audio-line{margin-top:25px}
.radio-page .radio-main .player-buttons{gap:16px;min-height:68px}
.radio-page .radio-main .player-buttons .primary-play{width:66px;height:66px}
.radio-page .radio-side{display:flex;flex-direction:column;gap:var(--content-gap,18px);min-width:0}
.radio-page .radio-side .panel{min-height:0;padding:19px 20px}
.radio-page .radio-side h3{margin:0 0 13px;font-size:16px}
.radio-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.radio-panel-heading small{color:var(--muted);font-size:11px}
.radio-entry{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.radio-entry:first-of-type{margin-top:4px}
.radio-entry img{width:45px;height:45px;border-radius:9px;object-fit:cover;flex:none}
.radio-entry-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.radio-entry-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-entry-info small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-queue-btn,.radio-skip{border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.radio-queue-btn{height:36px;width:36px;flex:none}
.radio-queue-btn:hover,.radio-skip:hover{border-color:var(--accent2)}
.radio-queue-btn .ico{width:17px;height:17px}
.radio-queue-btn:disabled{opacity:.5;cursor:wait}
.radio-skip{min-height:40px;padding:7px 11px;gap:7px;font-size:12px}
.radio-skip .ico{height:18px;width:18px}
.radio-volume{display:flex;width:min(100%,340px);align-items:center;gap:10px;margin-top:5px}
.radio-volume label{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap}
.radio-volume label .ico{width:17px;height:17px}
.radio-volume input{accent-color:var(--accent);min-width:50px;flex:1}
.radio-volume strong{min-width:33px;text-align:right;font-size:11px}
.radio-page .radio-main .radio-message{max-width:320px}
@media(max-width:820px){.radio-page .radio-side{display:flex;flex-direction:column}}
@media(max-width:540px){.radio-page .radio-main{min-height:0;padding:20px}.radio-page .radio-main .album{width:min(78%,250px)}.radio-volume{flex-wrap:wrap}}

/* v0.4.5 — Interface RADIO ZOO : proportions, centering and fluidity.
   Every surface/halo/control inherits the active site palette (including light mode). */
.radio-page{align-items:start;grid-template-columns:minmax(0,1fr) minmax(270px,370px)}
.radio-page .radio-main{
  position:relative;isolation:isolate;overflow:hidden;min-height:620px;
  justify-content:center;gap:9px;padding:clamp(22px,3vw,36px);
  background:radial-gradient(ellipse 45% 46% at 50% 32%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 95%),linear-gradient(155deg,var(--panel2),var(--panel));
}
.radio-page .radio-main::after{
 content:'';pointer-events:none;position:absolute;inset:0;border-radius:inherit;
 background:linear-gradient(124deg,transparent 15%,color-mix(in srgb,var(--accent) 3%,transparent) 58%,transparent 85%);z-index:-1;
}
.radio-top{width:100%;margin-bottom:12px;min-height:22px}
.radio-on-air{width:24px;height:2px;border-radius:2px;background:var(--accent);opacity:.55}
.radio-page .radio-main .album{
 display:block;width:clamp(180px,49%,320px);max-width:100%;aspect-ratio:1;
 border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));border-radius:16px;
 object-fit:cover;margin:5px 0 21px;
 box-shadow:0 22px 50px color-mix(in srgb,var(--bg) 50%,transparent),0 0 32px color-mix(in srgb,var(--accent) 11%,transparent);
 animation:radio-art-appear .75s cubic-bezier(.15,.75,.32,1) both;
}
.radio-page .radio-main .track{
 font-size:clamp(22px,2.5vw,28px);line-height:1.28;letter-spacing:-.02em;
 text-align:center;max-width:100%;overflow-wrap:anywhere;margin:0;
 animation:radio-label-in .55s ease-out both;
}
.radio-page .radio-main .artist{font-size:13px;text-align:center;max-width:100%;opacity:.93;animation:radio-label-in .7s ease-out both}
.radio-page .radio-main .audio-line{margin-top:23px}
.radio-main .audio-line,.radio-card .audio-line{height:6px;background:color-mix(in srgb,var(--accent) 13%,var(--input));overflow:hidden;border-radius:999px}
.radio-main .audio-line>.fill,.radio-card .audio-line>.fill{background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .55s linear;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 26%,transparent)}
.radio-page .radio-main .audio-caption{margin-top:4px;font-variant-numeric:tabular-nums}
/* The play button is ALWAYS exactly at the centre, regardless of whether Skip is present. */
.radio-main .radio-controls{position:relative;display:grid;grid-template-columns:1fr;place-items:center;width:100%;min-height:74px;margin:19px 0 8px}
.radio-page .radio-main .radio-controls .primary-play{width:70px;height:70px}
.radio-controls .primary-play{display:grid;place-items:center;flex:none;padding:0;border-radius:50%;color:#fff;
 box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 30%,transparent);
 transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .45s ease,filter .35s ease;
}
.radio-controls .primary-play:hover:not(:disabled){transform:scale(1.055);filter:brightness(1.04);box-shadow:0 12px 33px color-mix(in srgb,var(--accent) 40%,transparent)}
.radio-controls .primary-play:active:not(:disabled){transform:scale(.96);transition-duration:.13s}
.radio-controls .primary-play .ico{display:block;margin:0;width:27px;height:27px;animation:radio-glyph .34s cubic-bezier(.2,.75,.2,1) both}
.radio-controls .radio-skip{position:absolute;right:0;top:50%;transform:translateY(-50%);min-height:40px;
 transition:border-color .35s,background .35s,transform .3s;}
.radio-controls .radio-skip:hover{transform:translateY(-50%) translateX(2px);background:var(--accent-subtle)}
.radio-page .radio-main .radio-volume{justify-content:center;width:min(100%,385px);margin-top:9px}
.radio-page .radio-main .radio-message{margin:5px 0 0;line-height:1.55}
.radio-card-compact .radio-controls{display:grid;place-items:center;min-height:64px;margin:12px 0}
.radio-card-compact .radio-top{margin-bottom:12px}
.radio-card-compact .track{text-align:center;font-size:18px;font-weight:750;line-height:1.35}
.radio-card-compact .artist{text-align:center}
.radio-card-compact .radio-on-air{width:18px}
.radio-card-compact .radio-controls .primary-play{height:59px;width:59px}
.radio-card-compact .radio-controls .primary-play .ico{height:25px;width:25px}
.radio-entry{transition:background .32s ease,padding .32s ease}
.radio-queue-btn{transition:background .3s ease,border-color .3s ease,transform .35s cubic-bezier(.2,.8,.3,1)}
.radio-queue-btn:hover:not(:disabled){transform:translateY(-1px);background:var(--accent-subtle)}
.radio-import-panel .radio-panel-heading h3{margin:0}
.radio-dropzone{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
 text-align:center;min-height:130px;padding:18px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--accent) 44%,var(--line));
 background:color-mix(in srgb,var(--accent) 5%,var(--input));cursor:pointer;
 transition:background .4s ease,border-color .4s ease,transform .35s ease,box-shadow .45s ease;
}
.radio-dropzone:hover,.radio-dropzone.drag-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--input));box-shadow:inset 0 0 26px color-mix(in srgb,var(--accent) 7%,transparent);transform:translateY(-1px)}
.radio-drop-icon{width:34px;height:34px;border-radius:10px;background:var(--accent-subtle);color:var(--accent2);display:grid;place-items:center}
.radio-drop-icon .ico{width:19px;height:19px}
.radio-dropzone strong{font-size:13px;font-weight:700;line-height:1.4}
.radio-dropzone small{font-size:11px;color:var(--muted);line-height:1.4}
.radio-upload-status{min-height:0;margin:9px 0 0;line-height:1.5;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.radio-upload-status:empty{display:none}
.radio-upload-track{width:100%;height:4px;margin-top:10px;background:var(--input);border-radius:100px;overflow:hidden}
.radio-upload-track>span{display:block;width:0;height:100%;background:var(--accent);transition:width .3s ease}
@keyframes radio-art-appear{from{opacity:.52;transform:translateY(9px) scale(.977)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes radio-label-in{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes radio-glyph{from{opacity:.45;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
@media(max-width:690px){.radio-page{grid-template-columns:1fr}.radio-page .radio-main{min-height:0;padding:24px 18px}.radio-page .radio-main .album{width:min(66%,285px)}}
@media(max-width:390px){.radio-controls .radio-skip{right:-5px;font-size:11px;padding:6px}.radio-page .radio-main .radio-controls .primary-play{height:62px;width:62px}}
@media(prefers-reduced-motion:reduce){.radio-page .album,.radio-page .track,.radio-page .artist,.radio-controls .primary-play .ico{animation:none!important}.radio-page *, .radio-card-compact *{transition-duration:.01ms!important}}

/* v0.4.7 — sans contour décoratif dans le coin haut gauche du lecteur. */
.radio-on-air{display:none!important}
.radio-top{justify-content:flex-end}
.radio-picker{margin:12px 0 16px;display:flex;flex-direction:column;gap:7px}
.radio-picker label{font-size:12px;color:var(--muted)}
.radio-picker-actions{display:flex;gap:8px;align-items:center}
.radio-picker-actions select{flex:1;min-width:0;border-radius:9px;border:1px solid var(--line);background:var(--input);color:var(--text);padding:10px;font-size:12px}
.radio-picker-actions .btn{white-space:nowrap}
@media(max-width:420px){.radio-picker-actions{flex-wrap:wrap}.radio-picker-actions select{flex-basis:100%}}

.admin-radio-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}