*{margin:0;padding:0;box-sizing:border-box}
body{background:#070a18;color:#e8ecff;font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid #1c2340;position:sticky;top:0;background:#070a18ee;z-index:10}
.brand{font-weight:800;letter-spacing:1px}
.brand span{color:#7da2ff}
.topbar nav a{color:#9aa5d6;text-decoration:none;margin-left:18px;font-size:14px}
.topbar nav a:hover{color:#fff}
main{max-width:1200px;margin:0 auto;padding:32px 20px}
.hero{text-align:center;margin-bottom:36px}
.hero h1{font-size:32px;margin-bottom:10px}
.hero p{color:#9aa5d6;max-width:640px;margin:0 auto;line-height:1.5}
.now-playing{display:flex;align-items:center;gap:12px;justify-content:center;margin:22px auto 0;background:#101636;border:1px solid #2a3468;border-radius:14px;padding:12px 20px;max-width:520px}
.now-playing.hidden{display:none}
#now-playing-name{font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#global-stop{background:#e5484d;border:0;color:#fff;font-weight:700;padding:8px 16px;border-radius:10px;cursor:pointer}
.eq{display:flex;gap:3px;align-items:flex-end;height:18px}
.eq i{width:4px;background:#4ade80;animation:eq 0.9s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:6px}50%{height:18px}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:#0d1228;border:1px solid #1c2340;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s}
.card:hover{border-color:#3b4a8f}
.card.playing{border-color:#4ade80;box-shadow:0 0 18px #4ade8030}
.card h3{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{color:#8b95c9;font-size:12px;display:flex;gap:8px;flex-wrap:wrap}
.badge{background:#18204a;border-radius:6px;padding:2px 8px}
.badge.ok{background:#12351f;color:#4ade80}
.play-btn{margin-top:auto;background:linear-gradient(135deg,#5b6cff,#8b5cf6);border:0;color:#fff;font-weight:700;padding:11px;border-radius:10px;cursor:pointer;font-size:14px}
.play-btn.stop{background:#e5484d}
.play-btn:disabled{opacity:.5;cursor:wait}
.error{color:#f6a5a5;text-align:center;margin:20px}
.hidden{display:none}
.note{color:#5c6690;font-size:12px;text-align:center;margin-top:36px;line-height:1.6}

.brand-logo-inline{width:34px;height:34px;border-radius:8px;vertical-align:middle;margin-right:8px}

/* noms de stations longs (arabe, etc.) */
.station-name, h3 { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }