*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:clip;background:#171717;color:#fff;font-family:Arial,Helvetica,sans-serif}button{font:inherit;color:inherit;border:0;cursor:pointer;background:transparent}button:focus-visible,input:focus-visible{outline:2px solid #e4c56f;outline-offset:3px}#app{height:100dvh;width:100%;position:relative;display:flex;overflow:clip}#backdrop{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(30px);transform:scale(1.12);pointer-events:none}main{position:relative;z-index:1;flex:1;min-width:0;height:100%;overflow:clip}header{position:absolute;z-index:4;inset:0 0 auto;height:96px;display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:0 18px;font-size:14px}header img{width:60px;height:60px;object-fit:contain;background:#262324;border-radius:5px}#hamburger{position:absolute;left:18px;top:16px;width:28px;height:28px;padding:0}#hamburger span{display:block;height:2px;background:#fff;margin:7px 0}#sidebar{position:relative;z-index:5;flex:0 0 250px;margin:9px 0 9px 9px;border-radius:12px;background:#292929;height:calc(100% - 18px);overflow:clip;box-shadow:9px 0 24px #0008}#sidebar.collapsed{display:none}.channels{text-align:center;padding-top:75px;font-size:28px;font-weight:400}.channel{display:block;background:#3d3d3d;border-radius:12px;width:calc(100% - 24px);margin:45px 12px 0;padding:19px 17px;text-align:left;font-size:15px}.credit{position:absolute;bottom:30px;width:100%;text-align:center;color:#aaa;font-size:11px}.credit strong{font-weight:400}.page{display:none;position:absolute;left:15px;right:15px;top:96px;bottom:85px;overflow:clip}.page.active{display:block}.onair-wrap{height:100%;display:grid;grid-template-columns:244px minmax(0,1fr);gap:0;align-items:center;padding:0 16px}.album{aspect-ratio:1;width:240px;position:relative;box-shadow:0 7px 16px #0008;border:2px solid #222;border-radius:13px;overflow:hidden;background:#252125}.album img{width:100%;height:100%;object-fit:contain;display:block}.album button{position:absolute;top:0;right:0;background:#0007;width:64px;height:46px;display:grid;place-items:center}.album button svg{width:32px;height:32px}.album button.liked{color:#e4b653}#heart:disabled{opacity:.45;cursor:not-allowed}.info{width:100%;text-align:center;min-width:0}.info h1{font-size:24px;font-weight:400;line-height:1.3;margin:0 0 14px;overflow-wrap:anywhere}.info p{font-size:22px;line-height:1.35;margin:0 0 25px}.rule{height:1px;width:100%;background:linear-gradient(90deg,#fff0,#ffffff85,#fff0)}.controls{height:108px;display:flex;align-items:center;justify-content:center;gap:32px}.controls button{display:flex;align-items:center;justify-content:center;padding:0}#share svg{width:30px;height:30px}#play{width:78px;height:78px}#play svg{width:78px;height:78px}.volume{position:relative;width:32px;flex:0 0 32px}.volume button{width:32px;height:38px}.volume input{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:85px;accent-color:#fff;opacity:0;pointer-events:none}.volume:hover input,.volume:focus-within input{opacity:1;pointer-events:auto}#status{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#ddd;font-size:10px;opacity:.55;min-height:14px}#tabs{position:absolute;bottom:12px;left:13px;right:13px;height:58px;background:#292929c9;border:1px solid #ffffff24;border-radius:12px;display:flex;gap:8px;padding:10px;box-shadow:inset 0 0 12px #fff1,0 0 12px #fff1}#tabs button{flex:1;border-radius:10px;display:grid;place-items:center}#tabs svg{width:30px;height:30px}#tabs .selected{background:#ffffff0b}.recent-grid,.favorites-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}.recent-grid{padding:20px 10px;overflow-y:auto;max-height:100%}.song-card{display:flex;gap:15px;align-items:center;padding:12px;border-radius:12px;background:#3336;min-height:130px}.song-card img{width:110px;aspect-ratio:1;object-fit:contain;border-radius:7px;flex-shrink:0}.song-copy{min-width:0;overflow-wrap:anywhere}.song-title{font-size:18px;font-weight:600}.song-artist{font-size:16px;margin-top:4px}.song-time{font-size:11px;margin-top:5px;color:#ccc}.song-card .remove{align-self:flex-start;flex:0 0 25px;font-size:26px}.empty{text-align:center;color:#ddd;font-size:18px}#favorites h2{text-align:center;font-size:36px;font-weight:400;margin:25px 0 35px}#favoritesList{padding:0 15px 15px;max-height:calc(100% - 110px);overflow:auto}#favoritesList>p{text-align:center;line-height:1.5}
@media(min-width:1500px){.onair-wrap{max-width:1250px;margin:auto;grid-template-columns:244px minmax(0,1fr);gap:70px}}
@media(max-width:760px){header{height:78px;font-size:13px;padding:0 12px;gap:12px}header img{width:50px;height:50px}#sidebar{position:absolute;inset:60px auto 0 0;width:min(260px,80vw);height:calc(100% - 78px)}.page{top:78px;bottom:82px;left:12px;right:12px}.onair-wrap{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:6px 10px 18px}.album{width:min(30vh,210px);flex-shrink:0}.info h1{font-size:22px;margin-bottom:10px}.info p{font-size:19px;margin-bottom:18px}.controls{height:90px;gap:28px}#play,#play svg{width:70px;height:70px}#tabs{left:10px;right:10px;bottom:10px;height:58px}.recent-grid,.favorites-grid{grid-template-columns:1fr}.song-card img{width:85px}.song-card{min-height:105px}.song-title{font-size:17px}.song-artist{font-size:15px}#status{font-size:9px}}
@media(max-height:550px) and (max-width:760px){.onair-wrap{flex-direction:row;gap:20px}.album{width:min(29vw,170px)}.info h1{font-size:19px}.info p{font-size:17px}.controls{height:75px}#play,#play svg{width:62px;height:62px}}

header img{padding:4px;flex-shrink:0}.album img[src*="rtc-logo-complete"]{padding:5px}
@media(min-width:761px) and (max-width:900px){header{height:80px;font-size:12px;gap:15px;padding:0 15px}header img{width:50px;height:50px}.page{top:80px;bottom:70px}.onair-wrap{grid-template-columns:204px minmax(0,1fr);padding:0 10px}.album{width:200px}.info h1{font-size:20px}.info p{font-size:18px;margin-bottom:22px}.controls{height:88px;gap:26px}#play,#play svg{width:72px;height:72px}#tabs{height:48px;bottom:10px;left:10px;right:10px;padding:7px}#tabs svg{width:26px;height:26px}}

#shareDialog{border:0;padding:0;background:transparent;color:white;width:min(470px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto}
#shareDialog::backdrop{background:rgba(0,0,0,.78)}
.share-panel{position:relative;padding:30px 18px 20px;text-align:center;background:#202020;border:1px solid #ffffff24;border-radius:14px;box-shadow:0 12px 60px #0008}
#shareTitle{font-size:21px;margin:8px 15px 12px}#shareTrack{font-size:14px;opacity:.8;margin:0 0 26px;overflow-wrap:anywhere}
#closeShare{position:absolute;right:8px;top:3px;font-size:28px;width:36px;height:36px}
.social-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.social-options a,.social-options button{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:white;font:inherit;font-size:13px;padding:8px 2px;border:0;border-radius:8px;background:transparent;cursor:pointer}.social-options img,.instagram-placeholder{width:44px;height:44px;object-fit:contain}.instagram-placeholder{font:48px/44px sans-serif;color:#ff68b5}.social-options small{font-size:10px;opacity:.7}.social-options a:hover,.social-options button:hover{background:#ffffff16}.social-options :focus-visible,#closeShare:focus-visible{outline:2px solid #d4b647;outline-offset:2px}#shareFeedback{font-size:13px;line-height:1.5;margin:18px 5px 0}#shareFeedback:empty{display:none}#manualCopy{font-size:13px}#shareCopyText{box-sizing:border-box;width:100%;margin-top:10px;padding:8px;color:#111;background:white}
@media(max-width:360px){.social-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:360px){.social-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Sharing covers the complete player viewport, including its header and tabs. */
#shareDialog{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;box-sizing:border-box;background:rgba(0,0,0,.8);overflow:auto}
#shareDialog[open]{display:flex;align-items:center;justify-content:center}
#shareDialog::backdrop{background:transparent}
.share-panel{box-sizing:border-box;width:min(470px,100%);padding:56px 22px;background:transparent;border:0;border-radius:0;box-shadow:none;position:static}
#closeShare{position:fixed;right:14px;top:10px}

/* Keep the current cover softly blended into the player edges. */
#backdrop{inset:-18px;filter:blur(28px);transform:none}
#app::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;box-shadow:inset 0 0 22px 6px rgba(18,22,23,.36)}
#tabs{bottom:10px;left:10px;right:10px;border-radius:8px;background:rgba(45,49,49,.65);border-color:rgba(255,255,255,.22);box-shadow:inset 0 0 12px #ffffff0d,0 0 10px #ffffff0d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

.info .metadata-line{display:block;width:100%;max-width:100%;white-space:nowrap;overflow:hidden;overflow-wrap:normal;text-align:center}
.metadata-copy{display:inline-block;white-space:nowrap;vertical-align:top}
.info .metadata-overflow{text-align:left}
@media(prefers-reduced-motion:reduce){.info .metadata-overflow{overflow-x:auto;scrollbar-width:none}.metadata-overflow::-webkit-scrollbar{display:none}}

header img{padding:0}
.album{border:3px solid #181818;border-radius:10px}
.album button{width:54px;height:38px;background:rgba(17,17,17,.7);border-radius:0 0 0 5px;padding:5px}
.album button svg{width:24px;height:24px}
#onair{overflow:visible}
.album.cover-moving{z-index:8;backface-visibility:visible;transform-origin:center center;will-change:transform}
@media(max-width:760px) and (min-height:571px){.album{width:200px;max-width:calc(100vw - 48px)}}
@media(max-height:570px){.album{width:150px}}

#play{color:#ffd700}

#status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;min-height:0}

html,body{font-family:"Red Hat Display",Arial,sans-serif}
.album img[src*="rtc-logo-complete"]{padding:0}
#hamburger{width:24px;height:24px;left:15px;top:10px}
#hamburger span{margin:4px 0}
@media(min-width:761px) and (max-width:900px){.page{bottom:50px}.info{transform:translateY(6px)}}

/* Compact home player: keep transport and navigation inside the mobile frame. */
@media(max-width:760px){
header{height:64px;font-size:12px;gap:10px}
header img{width:42px;height:42px}
.page{top:64px;bottom:64px;left:10px;right:10px}
.onair-wrap{flex-direction:column;justify-content:center;gap:12px;padding:0 8px}
.album{width:min(150px,32vh)!important;max-width:calc(100vw - 64px)}
.info h1{font-size:18px;margin:0 0 6px}
.info p{font-size:16px;margin:0 0 10px}
.controls{height:68px;gap:25px}
#play,#play svg{width:56px;height:56px}
#share svg{width:25px;height:25px}
#tabs{height:44px;bottom:10px;padding:6px}
#tabs svg{width:24px;height:24px}
}

#shareDialog,#shareTitle{font-family:"Red Hat Display",Arial,sans-serif}#shareTitle{font-size:24px;font-weight:400;line-height:1.3;margin:0 0 26px}#shareTrack{display:none}.social-options{display:flex;justify-content:center;gap:16px}.social-options a{padding:0}.social-options img{width:44px;height:44px}

@media(max-width:760px){.album{width:min(180px,39.2vh)!important}}

/* Larger desktop artwork; the mobile layout keeps its existing size. */
@media(min-width:761px) and (max-width:900px){.onair-wrap{grid-template-columns:244px minmax(0,1fr);gap:16px}.album{width:240px}}

/* Give the pointer a continuous, forgiving path to the volume slider. */
.volume input{width:110px;height:30px;margin:0;top:38px;visibility:hidden;pointer-events:auto;transition:opacity .15s ease 1.2s,visibility 0s linear 1.35s}.volume:hover input,.volume:focus-within input{visibility:visible;opacity:1;transition-delay:0s}.volume::after{content:"";position:absolute;left:50%;top:28px;width:134px;height:44px;transform:translateX(-50%);pointer-events:none}.volume:hover::after,.volume:focus-within::after{pointer-events:auto}.volume input{z-index:1}