/* Radio 100: shared login-inspired theme for the panel and public player. */
html body{
    background:#070a39 url("assets/login-background.svg") center / cover no-repeat fixed;
}

.radio-brand{
    width:100%;
    max-width:390px;
    margin:0 auto;
    text-align:center;
}

.radio-brand-wordmark{
    width:100%;
    aspect-ratio:2146 / 555;
    overflow:hidden;
}

.radio-brand-img{
    display:block;
    width:100%;
    height:auto;
    clip-path:polygon(0 0,100% 0,100% 72%,62% 72%,59% 76%,45% 76%,41% 72%,0 72%);
}

.radio-brand-tagline{
    margin-top:8px;
    color:#fff;
    font-size:clamp(16px,4.6vw,25px);
    font-weight:700;
    letter-spacing:.02em;
    white-space:nowrap;
}

html body .sidebar{
    background:rgba(2,8,30,.9);
    border-color:rgba(0,162,255,.4);
    overflow-y:auto;
}

.sidebar .radio-brand{
    max-width:216px;
    margin-bottom:28px;
}

.sidebar .radio-brand-tagline{
    font-size:14px;
    letter-spacing:0;
    margin-top:5px;
}

html body .card,
html body .player-card{
    background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
        linear-gradient(135deg,#021024,#0a2d5f,#021024);
    border-color:rgba(0,162,255,.4);
    box-shadow:0 0 40px rgba(0,162,255,.15);
}

html body .main,
html body .grid > *,
html body .now-section > *{
    min-width:0;
}

html body .main > .topbar{
    background:rgba(2,8,30,.78);
    border:1px solid rgba(0,162,255,.25);
    border-radius:22px;
    padding:20px 24px;
}

.player-card .radio-brand{
    max-width:390px;
}

@media(max-width:850px){
    .sidebar .radio-brand{max-width:260px;}
    .sidebar .radio-brand-tagline{font-size:17px;}
}

@media(max-width:480px){
    html body .main > .topbar{padding:16px;}
    .player-card .radio-brand-tagline{font-size:clamp(13px,4vw,20px);}
}