:root{
    --navy-900:#0b1f3a;
    --navy-800:#102a4c;
    --navy-700:#16365f;
    --navy-600:#1e4576;
    --cyan:#22d3ee;
    --cyan-d:#06b6d4;
    --txt:#e8eef7;
    --txt-dim:#9fb3cc;
    --card:#13294b;
    --line:rgba(255,255,255,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    background:linear-gradient(160deg,var(--navy-900),var(--navy-800) 60%,var(--navy-700));
    color:var(--txt);
    min-height:100vh;
    padding-bottom:96px;
}

/* Header */
.radio-header{
    padding:38px 20px 26px;
    text-align:center;
    border-bottom:1px solid var(--line);
}
.radio-header h1{
    font-size:2rem;
    font-weight:700;
    letter-spacing:.3px;
}
.radio-header h1 i{color:var(--cyan)}
.radio-header p{color:var(--txt-dim);margin-top:6px;font-size:.95rem}

/* Grid */
.radio-grid{
    max-width:1100px;
    margin:26px auto;
    padding:0 16px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:14px;
}
.radio-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 14px;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.radio-card:hover{
    transform:translateY(-2px);
    border-color:var(--cyan);
    background:var(--navy-600);
}
.radio-card.playing{
    border-color:var(--cyan);
    box-shadow:0 0 0 1px var(--cyan),0 6px 22px rgba(34,211,238,.18);
}
.radio-card__logo{
    width:52px;height:52px;flex:0 0 52px;
    border-radius:11px;
    background:#fff;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}
.radio-card__logo img{width:100%;height:100%;object-fit:contain}
.radio-card__fallback{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--cyan-d),var(--navy-600));
    color:#fff;font-size:1.4rem;
}
.radio-card__info{flex:1;min-width:0}
.radio-card__info h3{
    font-size:1rem;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.radio-card__meta{font-size:.8rem;color:var(--txt-dim)}
.radio-card__btn{
    width:40px;height:40px;flex:0 0 40px;
    border:none;border-radius:50%;
    background:var(--cyan);color:var(--navy-900);
    font-size:1.25rem;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background .15s;
}
.radio-card__btn:hover{background:#fff}

/* Reproductor fijo */
.radio-player{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:flex;align-items:center;gap:14px;
    padding:10px 18px;
    background:rgba(11,31,58,.96);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--cyan);
}
.radio-player[hidden]{display:none}
.radio-player__logo{
    width:46px;height:46px;flex:0 0 46px;
    border-radius:10px;background:#fff;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    color:var(--navy-700);font-size:1.3rem;
}
.radio-player__logo img{width:100%;height:100%;object-fit:contain}
.radio-player__info{flex:1;min-width:0;line-height:1.25}
.radio-player__info strong{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-player__info small{color:var(--cyan);font-size:.78rem}
.radio-player__info small.buffering{color:#fbbf24}
.radio-player__info small.error{color:#f87171}
.radio-player__toggle{
    width:48px;height:48px;flex:0 0 48px;
    border:none;border-radius:50%;
    background:var(--cyan);color:var(--navy-900);
    font-size:1.5rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;
}
.radio-player__toggle:hover{background:#fff}
.radio-player__vol{display:flex;align-items:center;gap:8px;color:var(--txt-dim)}
.radio-player__vol input{accent-color:var(--cyan);width:90px;cursor:pointer}
.radio-player__close{
    background:transparent;border:none;color:var(--txt-dim);
    font-size:1.1rem;cursor:pointer;padding:8px;
}
.radio-player__close:hover{color:#fff}

@media(max-width:560px){
    .radio-header h1{font-size:1.5rem}
    .radio-player__vol{display:none}
    .radio-player{gap:10px;padding:9px 12px}
}