/* Panneau de contrôle Radio Tekyo */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,sans-serif; background:#12141a; color:#e6e6ee;
       display:flex; min-height:100vh; align-items:flex-start; justify-content:center; }
.wrap { width:min(680px,94vw); margin:5vh 0; }
h1 { font-size:1.3rem; margin:0 0 1rem; display:flex; align-items:center; gap:.5rem; }
h1 .dot { width:.7em; height:.7em; border-radius:50%; background:#e5484d; }
h1 .dot.on { background:#46a758; box-shadow:0 0 8px #46a75880; }
.card { background:#1b1e27; border:1px solid #2a2e3b; border-radius:10px;
        padding:1.2rem 1.4rem; margin-bottom:1rem; }
.np { font-size:1.15rem; font-weight:600; }
.muted { color:#9a9ab0; font-size:.85rem; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
button, .btn { font:inherit; border:0; border-radius:8px; padding:.55rem 1.1rem;
        cursor:pointer; background:#2a2e3b; color:#e6e6ee; }
button:hover { filter:brightness(1.2); }
.b-start { background:#1d3b25; } .b-stop { background:#452023; } .b-restart { background:#3a3320; }
.b-skip { background:#1f2c45; }
.hide { display:none; }
input { font:inherit; width:100%; padding:.55rem .8rem; border-radius:8px;
        border:1px solid #2a2e3b; background:#12141a; color:inherit; margin-bottom:.7rem; }
select { font:inherit; padding:.5rem .8rem; border-radius:8px;
         border:1px solid #2a2e3b; background:#12141a; color:inherit; }
.select-row { align-items:center; }
/* Lecteur perso + vumètre (états via data-state : idle|loading|wait|playing) */
.player { margin-top:1rem; padding:.9rem 1rem .7rem; border-radius:10px;
          background:#0d0f14; border:1px solid #2a2e3b; }
.pl-bar { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.pp { width:48px; height:48px; padding:0; border-radius:50%; flex:none;
      display:grid; place-items:center; background:#46a758; color:#0d0f14; }
.pp svg { width:24px; height:24px; fill:currentColor; grid-area:1/1; }
.pp .i-pause, .pp .spin { display:none; }
.player[data-state="playing"] .pp .i-play { display:none; }
.player[data-state="playing"] .pp .i-pause { display:block; }
.player[data-state="loading"] .pp .i-play,
.player[data-state="wait"] .pp .i-play { display:none; }
.player[data-state="loading"] .pp .spin,
.player[data-state="wait"] .pp .spin { display:block; }
.spin { grid-area:1/1; width:22px; height:22px; border-radius:50%;
        border:3px solid #0d0f1455; border-top-color:#0d0f14; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.pl-info { flex:1; min-width:9rem; display:flex; flex-direction:column; line-height:1.3; }
.live { font-size:.72rem; font-weight:700; letter-spacing:.12em; color:#6b6b80;
        display:flex; align-items:center; gap:.4rem; }
.live::before { content:""; width:.55em; height:.55em; border-radius:50%; background:currentColor; }
.player[data-state="playing"] .live { color:#e5484d; }
.player[data-state="playing"] .live::before { animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.pl-vol { display:flex; align-items:center; gap:.4rem; }
.mute { padding:.3rem; background:none; color:#9a9ab0; display:grid; }
.mute svg { width:22px; height:22px; fill:currentColor; grid-area:1/1; }
.mute .i-mute, .mute.muted .i-vol { display:none; }
.mute.muted .i-mute { display:block; color:#e5484d; }
.pl-vol input[type=range] { width:110px; margin:0; padding:0; border:0;
        background:none; accent-color:#46a758; cursor:pointer; }
#vu { display:block; width:100%; height:52px; margin-top:.8rem; }
@media (prefers-reduced-motion: reduce) { .spin, .live::before { animation:none !important; } }
pre { background:#0d0f14; border:1px solid #2a2e3b; border-radius:8px; padding:.8rem;
      max-height:340px; overflow:auto; font-size:.78rem; white-space:pre-wrap; }
.flash { border-left:3px solid #46a758; padding:.4rem .8rem; margin-bottom:1rem;
         background:#1d3b2533; }
.err { border-left-color:#e5484d; background:#45202333; }
a, .linkbtn { color:#7aa2f7; text-decoration:none; }
.linkbtn { background:none; padding:0; }
.top { display:flex; justify-content:space-between; align-items:baseline; }