@font-face{font-family:Peyda;src:url('../peyda/PeydaWebFaNum-Regular.woff2') format('woff2'),url('../peyda/PeydaWebFaNum-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Peyda;src:url('../peyda/PeydaWebFaNum-Bold.woff2') format('woff2'),url('../peyda/PeydaWebFaNum-Bold.woff') format('woff');font-weight:700 900;font-style:normal;font-display:swap}
:root{--bg:#030812;--bg2:#06101d;--panel:#081321;--panel2:#0b1828;--soft:#102137;--line:#17304a;--line2:#254563;--text:#f4f8ff;--muted:#8194ac;--accent:#2f80ff;--accent2:#5bb8ff;--danger:#ff5364;--green:#34d399;--side:248px;--top:72px;--player:92px;--shadow:0 24px 80px rgba(0,0,0,.36)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Peyda,Tahoma,Arial,sans-serif;overflow:hidden}button,input,select{font:inherit}button{border:0}img{display:block;-webkit-user-drag:none;user-select:none}.protect-media,.protect-media img,.cover img,.artist-avatar img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.app-shell{height:100dvh;display:grid;grid-template-columns:var(--side) minmax(0,1fr);direction:rtl;background:radial-gradient(circle at 20% -15%,rgba(47,128,255,.09),transparent 36%),var(--bg)}
.sidebar{height:100dvh;border-left:1px solid var(--line);background:linear-gradient(180deg,#07111d,#050b14 72%);padding:22px 16px calc(var(--player) + 25px);position:relative;z-index:40}.brand{height:54px;display:flex;align-items:center;gap:12px;padding:0 5px 18px}.brand-mark{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#58b5ff);color:#ffffff;font-weight:900;font-size:20px;box-shadow:0 8px 28px rgba(47,128,255,.28)}.brand b{display:block;font-size:16px}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:1.4px;text-transform:uppercase}.nav-list{display:grid;gap:5px;margin-top:12px}.nav-list button,.mobile-nav button{background:transparent;color:#9aa4b5;cursor:pointer}.nav-list button{display:flex;align-items:center;gap:13px;width:100%;padding:12px 13px;border-radius:13px;text-align:right;transition:.2s}.nav-list button i{font-style:normal;width:23px;text-align:center;font-size:17px}.nav-list button:hover{background:#121722;color:#fff}.nav-list button.active{background:linear-gradient(90deg,rgba(47,128,255,.13),rgba(47,128,255,.045));color:#fff;box-shadow:inset -2px 0 var(--accent)}.nav-list button.active i{color:var(--accent)}.nav-sep{height:1px;background:var(--line);margin:9px 8px}.backend-pill{position:absolute;right:16px;left:16px;bottom:calc(var(--player) + 18px);border:1px solid var(--line);border-radius:15px;background:#10151e;padding:11px;display:flex;align-items:center;gap:9px}.backend-pill>span{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(52,211,153,.08)}.backend-pill b{display:block;font-size:9px;color:#cbd2dd}.backend-pill small{font-size:8px;color:#6f7b8d}
.main-shell{min-width:0;height:100dvh;display:grid;grid-template-rows:var(--top) minmax(0,1fr)}.topbar{position:relative;z-index:35;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(300px,680px) 1fr;align-items:center;gap:18px;padding:10px 22px;background:rgba(8,10,15,.88);backdrop-filter:blur(22px)}.searchbar{height:48px;background:#111620;border:1px solid #252f3d;border-radius:16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:4px;box-shadow:inset 0 1px rgba(255,255,255,.025)}.searchbar button{height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#4da9ff);color:#ffffff;padding:0 18px;font-weight:900;cursor:pointer}.searchbar input{min-width:0;border:0;outline:0;background:transparent;color:#fff;padding:0 14px;text-align:right}.searchbar input::placeholder{color:#697587}.searchbar kbd,.command kbd{background:#202735;color:#9ea8b8;border:1px solid #30394a;padding:3px 7px;border-radius:7px;font-size:10px}.top-actions{justify-self:end;display:flex;gap:8px}.icon-btn{width:44px;height:44px;border-radius:14px;background:#121722;color:#b9c2cf;border:1px solid var(--line);cursor:pointer;position:relative}.icon-btn:hover{color:#fff;border-color:#354154}.badge{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--accent);color:#ffffff;display:grid;place-items:center;font-size:8px;font-weight:900}.mobile-only{display:none}
.viewport{overflow:auto;overscroll-behavior:contain;padding:24px 26px calc(var(--player) + 42px);scrollbar-width:thin;scrollbar-color:#293343 transparent}.viewport::-webkit-scrollbar{width:8px}.viewport::-webkit-scrollbar-thumb{background:#293343;border-radius:20px}.hero{min-height:350px;border:1px solid #272f3d;border-radius:30px;position:relative;overflow:hidden;padding:48px;display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:center;background:linear-gradient(120deg,#111722 0%,#09182a 45%,#0a2037 100%);box-shadow:var(--shadow)}.hero:before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;left:-90px;top:-210px;background:radial-gradient(circle,rgba(47,128,255,.26),transparent 62%);filter:blur(8px)}.hero>div{position:relative;z-index:2}.eyebrow{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:1.4px;margin-bottom:9px}.hero h1{font-size:48px;line-height:1.12;margin:0 0 14px;max-width:760px}.hero p{color:#aab3c1;max-width:700px;line-height:2;margin:0}.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.primary,.ghost,.chip-btn{border-radius:13px;padding:11px 16px;cursor:pointer;font-weight:800}.primary{background:linear-gradient(135deg,var(--accent),#4aaeff);color:#ffffff;box-shadow:0 9px 28px rgba(47,128,255,.18)}.ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.11)}.primary:hover,.ghost:hover{transform:translateY(-1px)}.hero-art{height:245px;display:grid;place-items:center;position:relative}.disc{width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(circle at center,#181c24 0 4px,#0c0f14 5px 8px);box-shadow:0 25px 70px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.04);animation:spin 18s linear infinite}.disc-center{position:absolute;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#5cc4ff);color:#ffffff;font-weight:900;font-size:30px;box-shadow:0 0 0 12px #0c0f14}@keyframes spin{to{transform:rotate(360deg)}}
.section{margin-top:34px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:23px;margin:0}.section-head p{font-size:11px;color:var(--muted);margin:4px 0 0}.section-head .more{background:transparent;color:#b5bfcd;cursor:pointer}.section-head .more:hover{color:var(--accent)}.horizontal{display:grid;grid-auto-flow:column;grid-auto-columns:190px;overflow-x:auto;gap:13px;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:none}.horizontal::-webkit-scrollbar{display:none}.media-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.media-card{min-width:0;background:transparent;color:#fff;text-align:right;cursor:pointer;padding:0}.cover{aspect-ratio:1;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#151b25,#0c1017);position:relative;border:1px solid #202938}.cover img{width:100%;height:100%;object-fit:cover;pointer-events:none}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent 45%);opacity:0;transition:.2s}.play-float{position:absolute;z-index:2;left:10px;bottom:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#18100a;transform:translateY(10px);opacity:0;transition:.2s;box-shadow:0 8px 28px rgba(47,128,255,.26)}.media-card:hover .cover:after,.media-card:hover .play-float{opacity:1}.media-card:hover .play-float{transform:none}.media-card .meta{padding:9px 3px 0}.title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.media-card .title{font-size:12px}.artist-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:15px}.artist-card{background:transparent;color:#fff;cursor:pointer;text-align:center;min-width:0;padding:0}.artist-avatar{aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid #222b38;background:#141923;position:relative}.artist-avatar:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}.artist-avatar img{width:100%;height:100%;object-fit:cover;pointer-events:none}.artist-card strong{display:block;font-size:12px;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist-card small{display:block;color:var(--muted);font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tracklist{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(14,18,26,.5)}.track{height:68px;display:grid;grid-template-columns:34px 48px minmax(0,1fr) 110px 58px 42px;align-items:center;gap:11px;padding:0 13px;border-bottom:1px solid #1a222e;cursor:pointer;transition:.16s}.track:last-child{border-bottom:0}.track:hover{background:#121823}.track.playing{background:linear-gradient(90deg,rgba(47,128,255,.12),rgba(47,128,255,.02));box-shadow:inset -2px 0 var(--accent)}.track .num,.track .date,.track .dur{color:#778397;font-size:10px}.track-cover{width:44px;height:44px;border-radius:12px;overflow:hidden;background:#171d28}.track-cover img{width:100%;height:100%;object-fit:cover;pointer-events:none}.track .playbtn{width:34px;height:34px;border-radius:50%;background:#171e29;color:#dbe1ea;cursor:pointer}.track:hover .playbtn,.track.playing .playbtn{background:var(--accent);color:#ffffff}.empty,.error-card{border:1px dashed #293343;border-radius:18px;padding:36px;text-align:center;color:#8995a6;background:rgba(15,19,27,.48)}.error-card b{display:block;color:#fff;margin-bottom:6px}.error-card button{margin-top:14px}.load-more{display:flex;justify-content:center;margin-top:15px}.load-more button{min-width:180px}.skeleton{background:linear-gradient(90deg,#111620 20%,#1a202b 40%,#111620 60%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:14px}@keyframes shimmer{to{background-position:-200% 0}}
.artist-hero{height:390px;border:1px solid #27303e;border-radius:30px;overflow:hidden;position:relative;background:#121720;box-shadow:var(--shadow)}.artist-hero .wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.artist-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,13,.18),rgba(7,9,13,.75) 58%,#050b14 100%),linear-gradient(0deg,rgba(7,9,13,.96),transparent 68%)}.artist-info{position:absolute;z-index:3;right:34px;left:34px;bottom:30px;display:flex;align-items:end;gap:20px}.artist-info .big-avatar{width:142px;height:142px;border-radius:30px;object-fit:cover;border:3px solid rgba(255,255,255,.13);background:#171d27;pointer-events:none;box-shadow:0 20px 50px rgba(0,0,0,.38)}.artist-info h1{font-size:38px;margin:2px 0}.stats{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.stats span{background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);padding:6px 9px;border-radius:999px;color:#c4ccd8;font-size:9px}.tabbar{display:flex;gap:8px;overflow-x:auto;margin:20px 0 13px;scrollbar-width:none}.tabbar::-webkit-scrollbar{display:none}.tabbar button{white-space:nowrap;border:1px solid var(--line);background:#111620;color:#aeb7c5;border-radius:999px;padding:10px 14px;cursor:pointer}.tabbar button.active{background:#f6f8fb;color:#0d1118;border-color:#fff;font-weight:900}.tab-panel{display:none}.tab-panel.active{display:block}.detail-hero{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:end;padding:28px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,#121722,#0e1219)}.detail-hero .detail-cover{width:220px;aspect-ratio:1;border-radius:24px;overflow:hidden;background:#171d28;box-shadow:0 24px 60px rgba(0,0,0,.42)}.detail-hero .detail-cover img{width:100%;height:100%;object-fit:cover;pointer-events:none}.detail-hero h1{font-size:38px;margin:4px 0}.detail-hero p{color:var(--muted)}
.player-shell{position:fixed;z-index:70;right:calc(var(--side) + 18px);left:18px;bottom:14px;min-height:78px;border:1px solid #2b3545;background:rgba(13,17,24,.93);backdrop-filter:blur(24px);border-radius:22px;padding:9px 12px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,1.5fr) minmax(190px,.8fr);align-items:center;gap:13px;box-shadow:0 20px 70px rgba(0,0,0,.5)}.now-playing{display:grid;grid-template-columns:58px minmax(0,1fr) 38px;align-items:center;gap:10px;min-width:0}.art-wrap{width:54px;height:54px;border-radius:13px;overflow:hidden;background:#171d28;position:relative}.art-wrap img{width:100%;height:100%;object-fit:cover;pointer-events:none}.eq{position:absolute;inset:auto 5px 5px auto;height:16px;display:none;align-items:end;gap:2px}.eq i{display:block;width:3px;background:var(--accent);border-radius:3px;animation:eq .6s ease-in-out infinite alternate}.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.4s}@keyframes eq{from{height:4px}to{height:15px}}body.is-playing .eq{display:flex}.now-meta{min-width:0}.now-meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.now-meta small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.transport{display:grid;gap:6px}.transport-buttons{display:flex;justify-content:center;align-items:center;gap:7px}.player-icon,.main-play{border:1px solid var(--line);background:#171e29;color:#dbe2ec;cursor:pointer;border-radius:50%;display:grid;place-items:center}.player-icon{width:36px;height:36px}.main-play{width:45px;height:45px;background:var(--accent);color:#ffffff;border-color:var(--accent);font-weight:900}.timeline{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px;color:#758195;font-size:8px;direction:ltr}.timeline input,.volume input{accent-color:var(--accent);width:100%}.player-tools{display:flex;align-items:center;justify-content:flex-start;gap:9px;direction:ltr}.volume{display:flex;align-items:center;gap:6px;font-size:11px;width:115px}.player-tools select{background:#171e29;color:#cfd6e1;border:1px solid var(--line);border-radius:10px;padding:6px 8px;outline:0}
.mobile-nav{display:none}.shade{position:fixed;z-index:79;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.2s}.shade.open{opacity:1;pointer-events:auto}.drawer{position:fixed;z-index:80;top:0;bottom:0;left:0;width:min(410px,92vw);background:#0d1118;border-right:1px solid var(--line);transform:translateX(-105%);transition:.25s;padding:18px;overflow:auto}.drawer.open{transform:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.drawer-head b{font-size:18px}.drawer-head small{display:block;color:var(--muted);font-size:9px}.drawer-head button{width:38px;height:38px;border-radius:12px;background:#161d28;color:#fff;cursor:pointer}.queue-row{display:grid;grid-template-columns:46px minmax(0,1fr) 32px;align-items:center;gap:9px;padding:8px;border-radius:13px;cursor:pointer}.queue-row:hover{background:#141a24}.queue-row img{width:44px;height:44px;object-fit:cover;border-radius:11px}.queue-row button{background:transparent;color:#7f8b9e;font-size:20px;cursor:pointer}.command{position:fixed;z-index:100;inset:0;background:rgba(4,6,10,.72);backdrop-filter:blur(10px);display:none;padding:10vh 16px}.command.open{display:block}.command-box{width:min(720px,100%);margin:auto;border:1px solid #303a4a;background:#0f141c;border-radius:22px;box-shadow:0 30px 100px rgba(0,0,0,.6);overflow:hidden}.command-head{height:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}.command-head input{height:44px;border:0;background:transparent;color:#fff;outline:0;font-size:16px}.quick{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 14px;cursor:pointer}.quick:hover{background:#151b25}.quick img{width:44px;height:44px;object-fit:cover;border-radius:12px}.quick .kind{color:#788497;font-size:9px}.toast{position:fixed;z-index:120;top:86px;left:50%;transform:translate(-50%,-12px);background:#151b24;border:1px solid #313b4a;border-radius:13px;padding:9px 14px;color:#e8edf4;font-size:11px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.page-loader{min-height:50vh;display:grid;place-items:center;align-content:center;color:#7f8a9b;gap:12px}.page-loader span{width:38px;height:38px;border:3px solid #232c39;border-top-color:var(--accent);border-radius:50%;animation:spin2 .8s linear infinite}@keyframes spin2{to{transform:rotate(360deg)}}
@media(max-width:1280px){:root{--side:218px}.artist-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.media-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.hero{grid-template-columns:1fr 270px}.player-shell{grid-template-columns:minmax(200px,1fr) minmax(340px,1.4fr)}.player-tools{display:none}}
@media(max-width:900px){:root{--top:66px;--player:78px}.app-shell{display:block}.sidebar{position:fixed;z-index:95;right:0;top:0;bottom:0;width:270px;transform:translateX(105%);transition:.25s;padding-bottom:20px;box-shadow:-30px 0 80px rgba(0,0,0,.45)}.sidebar.open{transform:none}.backend-pill{bottom:20px}.main-shell{height:100dvh}.topbar{grid-template-columns:42px minmax(0,1fr) auto;padding:9px 10px;gap:8px}.mobile-only{display:block}.top-actions .icon-btn:nth-child(1),.top-actions .icon-btn:nth-child(2){display:none}.viewport{padding:14px 11px 150px}.hero{min-height:240px;padding:28px 22px;display:block;border-radius:23px}.hero h1{font-size:34px}.hero p{font-size:11px}.hero-art{display:none}.artist-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.horizontal{grid-auto-columns:154px}.artist-hero{height:310px;border-radius:22px}.artist-info{right:17px;left:17px;bottom:18px;align-items:center}.artist-info .big-avatar{width:96px;height:96px;border-radius:22px}.artist-info h1{font-size:27px}.detail-hero{grid-template-columns:120px minmax(0,1fr);padding:18px;gap:16px}.detail-hero .detail-cover{width:120px;border-radius:18px}.detail-hero h1{font-size:25px}.track{grid-template-columns:42px minmax(0,1fr) 42px;height:64px}.track .num,.track .date,.track .dur{display:none}.track-cover{width:42px;height:42px}.player-shell{right:8px;left:8px;bottom:62px;min-height:70px;border-radius:19px;grid-template-columns:minmax(0,1fr) 150px;padding:7px 9px}.now-playing{grid-template-columns:48px minmax(0,1fr)}.art-wrap{width:46px;height:46px}.now-playing>#likeNow{display:none}.timeline,.desktop-only{display:none}.mobile-nav{display:grid;position:fixed;z-index:75;right:0;left:0;bottom:0;height:58px;grid-template-columns:repeat(5,1fr);background:rgba(10,13,19,.96);backdrop-filter:blur(22px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{display:grid;place-items:center;font-size:8px;gap:1px}.mobile-nav button b{font-size:17px;font-weight:400}.mobile-nav button.active{color:var(--accent)}}
@media(max-width:560px){.searchbar kbd{display:none}.searchbar button{padding:0 12px}.hero h1{font-size:29px}.artist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.artist-info .big-avatar{width:82px;height:82px}.stats span:nth-child(n+4){display:none}.detail-hero{grid-template-columns:92px minmax(0,1fr);gap:13px}.detail-hero .detail-cover{width:92px}.detail-hero h1{font-size:21px}.section-head h2{font-size:19px}.player-shell{grid-template-columns:minmax(0,1fr) 132px}.transport-buttons{gap:4px}.player-icon{width:32px;height:32px}.main-play{width:40px;height:40px}}
/* Ravix Music X 3 — paged catalog / infinite scroll */
.browse-title{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(47,128,255,.09),rgba(18,23,34,.72) 40%,rgba(10,13,19,.92));box-shadow:0 18px 55px rgba(0,0,0,.22)}
.browse-title h1{margin:0;font-size:26px}.browse-title p{margin:4px 0 0;color:var(--muted);font-size:10px}.browse-title>span{font-size:10px;color:#c4ccd8;border:1px solid var(--line);background:#111620;border-radius:999px;padding:7px 10px;white-space:nowrap}.browse-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#58b5ff);color:#ffffff;font-size:23px;font-weight:900;box-shadow:0 12px 34px rgba(47,128,255,.2)}
.browse-grid{align-items:start}.radio-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.radio-card{min-width:0;background:transparent;color:#fff;text-align:right;cursor:pointer;padding:0}.radio-cover{aspect-ratio:1;border-radius:20px;overflow:hidden;position:relative;background:linear-gradient(145deg,#151b25,#0a0e14);border:1px solid #222c39;box-shadow:0 14px 42px rgba(0,0,0,.18)}.radio-cover img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .28s ease}.radio-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,6,10,.72),transparent 55%)}.radio-card:hover .radio-cover img{transform:scale(1.035)}.radio-card .play-float{opacity:1;transform:none;z-index:3}.radio-card.playing .radio-cover{border-color:rgba(47,128,255,.85);box-shadow:0 0 0 1px rgba(47,128,255,.22),0 20px 52px rgba(47,128,255,.12)}.radio-live{position:absolute;z-index:3;right:10px;top:10px;display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:999px;background:rgba(7,9,13,.74);backdrop-filter:blur(10px);font-size:8px;font-weight:900;letter-spacing:.7px;color:#fff;border:1px solid rgba(255,255,255,.1)}.radio-live i{width:6px;height:6px;border-radius:50%;background:#ff4d61;box-shadow:0 0 0 0 rgba(255,77,97,.55);animation:radioPulse 1.5s infinite}@keyframes radioPulse{65%{box-shadow:0 0 0 7px rgba(255,77,97,0)}}.radio-meta{padding:9px 4px 0}.radio-meta .title{font-size:12px}.radio-meta .sub{font-size:9px}
.infinite-sentinel{height:1px}.infinite-status{min-height:76px;margin:20px 0 2px;display:flex;align-items:center;justify-content:center;gap:10px;color:#778396;font-size:10px;border:1px dashed transparent;border-radius:16px}.infinite-status>span{display:none;width:20px;height:20px;border:2px solid #2a3443;border-top-color:var(--accent);border-radius:50%;animation:spin2 .75s linear infinite}.infinite-status p{margin:0}.infinite-status.loading>span{display:block}.infinite-status.loading{color:#aeb7c5}.infinite-status.done{color:#6f7b8d}.infinite-status.done:before{content:"✓";width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(52,211,153,.1);color:var(--green);font-weight:900}.infinite-status.error{border-color:rgba(255,83,100,.22);background:rgba(255,83,100,.04);color:#ff9ca6}.infinite-status button{padding:7px 11px;font-size:9px}
@media(max-width:1280px){.radio-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:900px){.browse-title{grid-template-columns:46px minmax(0,1fr);padding:14px}.browse-title>span{grid-column:2;justify-self:start}.browse-icon{width:44px;height:44px;border-radius:14px}.browse-title h1{font-size:22px}.radio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}}
@media(max-width:560px){.browse-title{gap:10px}.browse-title h1{font-size:19px}.browse-title p{font-size:9px}.radio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.radio-cover{border-radius:17px}.infinite-status{min-height:64px}}

/* =========================================================
   Ravix Music X 4 — Midnight Blue / premium responsive UI
   ========================================================= */
:root{
  --blue:#2f80ff;--blue2:#55b4ff;--cyan:#33d6ff;--ink:#02060d;
  --glass:rgba(8,20,35,.78);--glass2:rgba(10,25,43,.92);
  --shadow-blue:0 22px 80px rgba(20,91,190,.18);
  --ring:0 0 0 1px rgba(105,181,255,.16),0 20px 60px rgba(0,0,0,.34)
}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button svg{pointer-events:none}.ambient-layer{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#02060d 0%,#040a13 52%,#02060d 100%)}
.ambient-layer:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(82,154,239,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(82,154,239,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.68),transparent 78%)}
.ambient-layer span{position:absolute;border-radius:50%;filter:blur(100px);opacity:.16}.ambient-layer span:nth-child(1){width:40vw;height:40vw;background:#0b67ff;right:-14vw;top:-14vw}.ambient-layer span:nth-child(2){width:34vw;height:34vw;background:#00c8ff;left:-17vw;top:28vh;opacity:.08}.ambient-layer span:nth-child(3){width:28vw;height:28vw;background:#1645ad;left:28vw;bottom:-18vw;opacity:.12}
html,body{background:#02060d}.app-shell{background:transparent}.sidebar{background:linear-gradient(180deg,rgba(5,13,23,.97),rgba(3,8,15,.96));border-left-color:rgba(86,150,220,.14);box-shadow:-16px 0 60px rgba(0,0,0,.16)}
.brand{gap:11px}.brand-mark{background:linear-gradient(145deg,#0e6dff,#3bb9ff);color:#fff;box-shadow:0 12px 34px rgba(47,128,255,.3);border:1px solid rgba(255,255,255,.16)}.brand-mark svg{width:22px;height:22px;stroke-width:2}.brand small{color:#6f88a5;letter-spacing:1.7px}
.nav-list button{position:relative;isolation:isolate;overflow:hidden}.nav-list button>svg{width:20px;height:20px;flex:0 0 20px;transition:.2s}.nav-list button:before{content:"";position:absolute;inset:0;border-radius:13px;background:linear-gradient(90deg,rgba(47,128,255,.16),rgba(51,214,255,.035));opacity:0;z-index:-1;transition:.2s}.nav-list button:hover:before,.nav-list button.active:before{opacity:1}.nav-list button:hover{background:transparent}.nav-list button.active{background:transparent;box-shadow:inset -2px 0 var(--accent),0 8px 24px rgba(11,73,160,.07)}.nav-list button.active>svg{color:#5dbbff;filter:drop-shadow(0 0 8px rgba(68,170,255,.35))}
.backend-pill{background:linear-gradient(180deg,rgba(10,27,46,.82),rgba(6,17,29,.88));border-color:rgba(74,145,217,.18);box-shadow:inset 0 1px rgba(255,255,255,.025)}.backend-pill>span{background:#37d99b;box-shadow:0 0 0 5px rgba(55,217,155,.07),0 0 18px rgba(55,217,155,.22)}
.topbar{background:rgba(3,9,16,.72);border-bottom-color:rgba(82,148,214,.12);backdrop-filter:blur(30px) saturate(140%)}
.searchbar{background:linear-gradient(180deg,rgba(11,26,43,.9),rgba(8,20,34,.86));border-color:rgba(86,153,222,.17);box-shadow:inset 0 1px rgba(255,255,255,.035),0 12px 30px rgba(0,0,0,.14)}.searchbar:focus-within{border-color:rgba(70,155,255,.55);box-shadow:0 0 0 4px rgba(47,128,255,.08),0 18px 42px rgba(0,0,0,.2)}.searchbar button{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,#176cff,#40b7ff);color:#fff;box-shadow:0 7px 24px rgba(35,122,255,.24)}.searchbar button svg{width:17px;height:17px}.searchbar input::placeholder{color:#607b98}
.icon-btn,.player-icon,.round-action{display:grid;place-items:center}.icon-btn{background:linear-gradient(180deg,rgba(13,29,47,.92),rgba(8,19,32,.92));border-color:rgba(88,150,214,.18);color:#9cb2c9}.icon-btn svg{width:19px;height:19px}.icon-btn:hover{border-color:rgba(82,166,255,.46);color:#eaf6ff;background:#10243a;transform:translateY(-1px)}.badge{background:linear-gradient(135deg,#1a75ff,#56baff);color:#fff;box-shadow:0 0 0 2px #06101d}
.viewport{scrollbar-color:#153354 transparent}.viewport::-webkit-scrollbar-thumb{background:#153354}.section{margin-top:31px}.section-head h2{letter-spacing:-.4px}.section-head p{color:#7087a1}.more{color:#8abce9!important}.more:hover{color:#cfeaff!important}
.hero{position:relative;overflow:hidden;border-color:rgba(75,145,219,.16)!important;background:radial-gradient(circle at 12% 20%,rgba(43,142,255,.2),transparent 34%),radial-gradient(circle at 88% 12%,rgba(51,214,255,.08),transparent 24%),linear-gradient(135deg,rgba(9,26,46,.96),rgba(4,12,23,.98) 64%,rgba(5,16,29,.96))!important;box-shadow:0 28px 90px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.03)}
.hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-190px;bottom:-260px;border:1px solid rgba(73,171,255,.16);box-shadow:0 0 0 34px rgba(63,150,255,.025),0 0 0 72px rgba(63,150,255,.02)}.hero h1{background:linear-gradient(180deg,#fff,#bddcff);-webkit-background-clip:text;background-clip:text;color:transparent}.eyebrow{color:#5db6ff!important;letter-spacing:1.7px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#1268ff,#45b8ff)!important;color:#fff!important;box-shadow:0 12px 32px rgba(33,121,255,.24);border:1px solid rgba(255,255,255,.12)!important}.primary svg,.ghost svg{width:17px;height:17px}.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(12,29,48,.74)!important;border-color:rgba(84,151,218,.18)!important;color:#c5d9eb!important}.ghost:hover{border-color:rgba(71,162,255,.5)!important;background:#102743!important}.disc{border-color:rgba(71,162,255,.16)!important;background:repeating-radial-gradient(circle,#081528 0 6px,#0e2137 7px 9px)!important;box-shadow:0 0 0 1px rgba(77,170,255,.12),0 30px 60px rgba(0,0,0,.34)!important}.disc-center{background:radial-gradient(circle,#5ac0ff,#1673ff 62%,#0b4fc5)!important;color:#fff!important;box-shadow:0 0 30px rgba(50,149,255,.42)}
.media-card,.artist-card{transition:transform .22s ease,filter .22s ease}.media-card:hover,.artist-card:hover{transform:translateY(-4px)}.cover,.radio-cover{border-color:rgba(74,135,197,.17)!important;background:#07111f!important;box-shadow:0 18px 46px rgba(0,0,0,.2)!important}.media-card:hover .cover,.radio-card:hover .radio-cover{border-color:rgba(65,156,255,.4)!important;box-shadow:0 18px 55px rgba(18,87,170,.16)!important}.play-float{background:linear-gradient(135deg,#1771ff,#4dbbff)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 10px 28px rgba(25,113,241,.34)!important}.play-float svg{width:16px;height:16px;stroke:none;fill:currentColor}.track{border-color:transparent!important}.track:hover{background:linear-gradient(90deg,rgba(12,33,55,.72),rgba(8,21,36,.5))!important;border-color:rgba(78,145,210,.12)!important}.track.playing{background:linear-gradient(90deg,rgba(47,128,255,.13),rgba(8,21,36,.48))!important}.playbtn{background:linear-gradient(180deg,#0f2943,#0a1d31)!important;color:#a9d3ff!important;border-color:rgba(76,150,224,.24)!important}.playbtn:hover{background:linear-gradient(135deg,#176cff,#48baff)!important;color:#fff!important;border-color:transparent!important}.playbtn svg{width:15px;height:15px;stroke:none;fill:currentColor}
.artist-avatar,.detail-cover,.big-avatar{border-color:rgba(80,147,214,.18)!important;box-shadow:0 18px 50px rgba(0,0,0,.2)}.artist-hero:after{background:linear-gradient(0deg,#05101d 0%,rgba(5,16,29,.8) 30%,transparent 74%)!important}.stats span{background:rgba(10,31,52,.76)!important;border-color:rgba(78,145,211,.17)!important;color:#9fb7ce!important}.tabbar{border-color:rgba(83,149,215,.13)!important}.tabbar button.active{color:#cfe9ff!important;background:rgba(47,128,255,.11)!important;border-color:rgba(55,146,255,.2)!important}
.browse-title{background:radial-gradient(circle at 0 0,rgba(47,128,255,.18),transparent 34%),linear-gradient(135deg,rgba(9,24,42,.96),rgba(5,14,25,.95))!important;border-color:rgba(78,145,212,.17)!important;box-shadow:var(--shadow-blue)!important}.browse-icon{background:linear-gradient(135deg,#176cff,#49b8ff)!important;color:#fff!important;box-shadow:0 12px 34px rgba(47,128,255,.24)!important}.browse-icon svg{width:24px;height:24px}.radio-card.playing .radio-cover{border-color:rgba(64,155,255,.85)!important;box-shadow:0 0 0 1px rgba(47,128,255,.26),0 20px 52px rgba(26,111,225,.18)!important}.radio-live{background:rgba(4,13,23,.78)!important}.infinite-status.loading>span,.page-loader span{border-top-color:#49b6ff!important}

/* Mini player */
.player-shell{background:linear-gradient(180deg,rgba(8,21,36,.97),rgba(4,13,23,.98))!important;border:1px solid rgba(72,145,216,.22)!important;box-shadow:0 24px 80px rgba(0,0,0,.48),0 0 0 1px rgba(19,85,157,.08)!important;backdrop-filter:blur(26px) saturate(145%);overflow:hidden}.player-shell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0,rgba(47,128,255,.13),transparent 34%);pointer-events:none}.player-shell>*{position:relative;z-index:2}.player-click-zone{position:absolute!important;z-index:1!important;inset:0;cursor:pointer}.now-playing,.transport,.player-tools{pointer-events:auto}.art-wrap{border:1px solid rgba(83,158,230,.2);box-shadow:0 10px 28px rgba(0,0,0,.28)}.eq i{background:#51b9ff!important}.now-meta b{color:#eef8ff}.now-meta small{color:#7790a9}.player-icon{background:rgba(11,29,48,.72)!important;border:1px solid rgba(75,144,210,.16)!important;color:#96b7d6!important;transition:.2s}.player-icon:hover,.player-icon.active{color:#e8f7ff!important;border-color:rgba(64,155,255,.5)!important;background:rgba(19,57,91,.78)!important}.player-icon svg{width:17px;height:17px}.main-play{display:grid;place-items:center;background:linear-gradient(135deg,#1268ff,#4abaff)!important;color:#fff!important;box-shadow:0 8px 28px rgba(33,125,255,.35)!important}.main-play svg{width:19px;height:19px}.timeline input,.volume input,.full-timeline input,.full-tools-row input{accent-color:#3b9fff}.volume svg{width:17px;height:17px;color:#7699b8}.player-tools select{background:#0b1c2e!important;border-color:rgba(79,146,211,.18)!important;color:#a9c3da!important}

/* Full immersive player */
.player-overlay{position:fixed;z-index:140;inset:0;display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease;background:rgba(1,5,10,.76);backdrop-filter:blur(28px) saturate(145%)}.player-overlay.open{opacity:1;visibility:visible;pointer-events:auto}.full-backdrop{position:absolute;inset:0;overflow:hidden;opacity:.28;pointer-events:none}.full-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,7,13,.52),#02070d 72%)}.full-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(70px) saturate(150%);transform:scale(1.18);opacity:.75}.full-player-stage{position:relative;width:min(1100px,96vw);height:min(760px,92dvh);border-radius:34px;border:1px solid rgba(99,171,239,.18);background:linear-gradient(145deg,rgba(9,23,39,.92),rgba(3,11,20,.96));box-shadow:0 55px 160px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.04);overflow:hidden;transform:translateY(22px) scale(.985);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.player-overlay.open .full-player-stage{transform:none}.full-player-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 10%,rgba(51,172,255,.14),transparent 26%),radial-gradient(circle at 10% 90%,rgba(25,92,207,.12),transparent 34%);pointer-events:none}.full-player-head{position:relative;z-index:2;height:76px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:0 22px;border-bottom:1px solid rgba(80,145,208,.11);direction:ltr}.full-player-head>div{text-align:center;direction:rtl}.full-player-head b{display:block;font-size:14px}.full-player-head small{display:block;color:#5f7c98;font-size:8px;letter-spacing:1.5px;margin-top:3px}.round-action{width:44px;height:44px;border-radius:15px;background:rgba(12,31,51,.7);border:1px solid rgba(81,150,215,.17);color:#9bbbd7;cursor:pointer;transition:.2s}.round-action:hover,.round-action.active{color:#eaf7ff;background:#12304f;border-color:rgba(66,158,255,.48);transform:translateY(-1px)}.round-action svg{width:19px;height:19px}.full-player-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.9fr);gap:54px;align-items:center;height:calc(100% - 76px);padding:42px 54px;direction:ltr}.full-visual{display:grid;place-items:center;min-width:0}.full-cover-wrap{position:relative;width:min(440px,38vw);aspect-ratio:1;border-radius:34px;isolation:isolate}.full-cover-wrap:before{content:"";position:absolute;inset:-1px;border-radius:35px;padding:1px;background:linear-gradient(145deg,rgba(114,192,255,.55),rgba(40,104,186,.08),rgba(51,214,255,.32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:3}.full-cover-wrap img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;border-radius:34px;box-shadow:0 36px 80px rgba(0,0,0,.48)}.cover-glow{position:absolute;z-index:-1;inset:12%;background:#1c7dff;filter:blur(75px);opacity:.32}.full-live{position:absolute;z-index:4;right:18px;top:18px;display:flex;align-items:center;gap:7px;border-radius:999px;padding:8px 11px;background:rgba(3,11,19,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);font-size:9px;font-weight:900;letter-spacing:.8px}.full-live i{width:7px;height:7px;border-radius:50%;background:#ff5364;box-shadow:0 0 0 5px rgba(255,83,100,.1)}.full-console{direction:rtl;min-width:0}.full-meta-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:18px;align-items:center}.full-meta h2{font-size:clamp(28px,3.4vw,46px);line-height:1.18;margin:7px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-1px}.full-meta p{margin:0;color:#89a4be;font-size:13px}.like-full.liked{color:#66bfff;background:rgba(47,128,255,.13)}.full-timeline{margin-top:32px}.full-timeline input{width:100%;height:4px}.full-timeline>div{display:flex;justify-content:space-between;direction:ltr;color:#66829d;font-size:10px;margin-top:8px}.full-controls{display:grid;grid-template-columns:44px 54px 74px 54px 44px;align-items:center;justify-content:center;gap:12px;margin:30px 0}.control-lg{width:54px;height:54px;border-radius:18px}.full-main-play{width:74px;height:74px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(145deg,#1169ff,#4cc1ff);color:#fff;border:1px solid rgba(255,255,255,.17);box-shadow:0 16px 42px rgba(28,120,255,.36);cursor:pointer;transition:.2s}.full-main-play:hover{transform:scale(1.04)}.full-main-play svg{width:28px;height:28px}.full-tools-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border:1px solid rgba(76,145,211,.13);border-radius:18px;background:rgba(7,20,34,.55)}.full-tools-row label{display:flex;align-items:center;gap:10px;width:min(280px,70%);direction:ltr;color:#7fa2c1}.full-tools-row label svg{width:18px;height:18px}.full-tools-row input{width:100%}.full-tools-row select{background:#0c2035;color:#b9d1e5;border:1px solid rgba(84,151,216,.16);border-radius:11px;padding:7px 10px;outline:0}.up-next{margin-top:20px;border:1px solid rgba(75,143,207,.12);border-radius:20px;background:rgba(7,19,32,.48);overflow:hidden}.up-next-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(72,139,204,.1)}.up-next-head b{font-size:12px}.up-next-head small{display:block;color:#607c96;font-size:8px;margin-top:2px}.up-next-head button{background:transparent;color:#6ebcff;font-size:9px;cursor:pointer}.full-queue-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;cursor:pointer;transition:.18s}.full-queue-row:hover{background:rgba(31,92,148,.14)}.full-queue-row img{width:38px;height:38px;object-fit:cover;border-radius:10px}.full-queue-row .title{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.full-queue-row .sub{font-size:8px;color:#68839c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.full-queue-row>span{font-size:8px;color:#55718c}.full-empty{padding:18px;text-align:center;color:#69839b;font-size:10px}.full-player-open{overflow:hidden}

.drawer{background:linear-gradient(180deg,#071321,#040b14)!important;border-right-color:rgba(81,149,214,.16)!important;box-shadow:32px 0 90px rgba(0,0,0,.5)}.drawer-head button svg{width:18px;height:18px}.queue-row:hover{background:#0d2238!important}.queue-row button{display:grid;place-items:center}.queue-row button svg{width:15px;height:15px}.command{background:rgba(1,5,10,.74)!important}.command-box{background:linear-gradient(180deg,#081725,#050e19)!important;border-color:rgba(88,157,225,.2)!important}.command-head{grid-template-columns:24px minmax(0,1fr) auto!important;direction:ltr}.command-head>svg{width:20px;height:20px;color:#6f9abe}.command-head input{direction:rtl}.quick:hover{background:#0e253d!important}.toast{background:#0a1c2e!important;border-color:rgba(76,147,216,.22)!important;box-shadow:0 16px 50px rgba(0,0,0,.36)}

.mobile-nav{background:rgba(3,10,18,.94)!important;border-top-color:rgba(81,146,209,.13)!important;backdrop-filter:blur(24px) saturate(140%)}.mobile-nav button{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px}.mobile-nav button svg{width:19px;height:19px}.mobile-nav button span{font-size:8px}.mobile-nav button.active{color:#58b9ff!important}.mobile-nav button.active svg{filter:drop-shadow(0 0 9px rgba(62,164,255,.46))}

@media(max-width:1100px){.full-player-grid{gap:32px;padding:34px}.full-cover-wrap{width:min(390px,40vw)}.full-meta h2{font-size:34px}}
@media(max-width:900px){
  .sidebar{background:linear-gradient(180deg,#071421,#040b14)!important;border-left:1px solid rgba(79,147,210,.18)!important}
  .topbar{background:rgba(3,9,16,.86)}.searchbar button span{display:none}.searchbar button{width:40px;padding:0;justify-content:center}
  .player-shell{bottom:68px!important;min-height:72px!important;border-radius:21px!important;grid-template-columns:minmax(0,1fr) 144px!important;padding:7px 9px!important}.player-tools{display:none!important}.player-shell .now-meta{max-width:calc(100vw - 230px)}
  .player-overlay{padding:0}.full-player-stage{width:100%;height:100dvh;max-height:none;border-radius:0;border:0;background:linear-gradient(180deg,rgba(7,22,38,.94),#020812 72%)}.full-player-head{height:68px;padding:0 14px}.full-player-grid{height:calc(100% - 68px);grid-template-columns:1fr;grid-template-rows:minmax(0,42vh) minmax(0,1fr);gap:18px;padding:18px 18px 24px;overflow:auto}.full-visual{align-items:end}.full-cover-wrap{width:min(48vh,78vw);max-width:340px;border-radius:28px}.full-cover-wrap img{border-radius:28px}.full-console{width:min(620px,100%);margin:0 auto}.full-meta h2{font-size:30px}.full-timeline{margin-top:20px}.full-controls{margin:22px 0}.up-next{margin-top:14px}.full-tools-row{display:none}
}
@media(max-width:560px){
  .topbar{grid-template-columns:42px minmax(0,1fr) 44px}.top-actions .icon-btn:not(#back){display:none!important}.icon-btn{border-radius:13px}.searchbar{height:46px;border-radius:14px}.searchbar button{height:36px;border-radius:11px}
  .hero{border-radius:24px!important;padding:24px 20px!important}.hero h1{font-size:31px!important;line-height:1.25}.hero p{line-height:1.9}.hero-actions{gap:8px!important}.hero-actions button{min-height:42px}
  .media-grid,.radio-grid{gap:12px!important}.cover,.radio-cover{border-radius:18px!important}.media-card .meta,.radio-meta{padding-top:8px!important}
  .player-shell{left:7px!important;right:7px!important;grid-template-columns:minmax(0,1fr) 126px!important}.now-playing{grid-template-columns:46px minmax(0,1fr)!important;gap:9px!important}.art-wrap{width:44px!important;height:44px!important}.player-shell .now-meta{max-width:calc(100vw - 205px)}.now-meta b{font-size:11px!important}.now-meta small{font-size:8px!important}.transport-buttons{gap:3px!important}.transport-buttons .player-icon{width:31px!important;height:31px!important}.main-play{width:41px!important;height:41px!important}
  .full-player-grid{grid-template-rows:minmax(0,36vh) minmax(0,1fr);padding:14px 16px 28px;gap:12px}.full-cover-wrap{width:min(34vh,72vw);max-width:300px}.full-meta-row{grid-template-columns:minmax(0,1fr) 44px}.full-meta h2{font-size:26px;margin-top:5px}.full-meta p{font-size:11px}.full-controls{grid-template-columns:40px 50px 68px 50px 40px;gap:8px}.round-action{width:40px;height:40px;border-radius:14px}.control-lg{width:50px;height:50px}.full-main-play{width:68px;height:68px;border-radius:23px}.up-next{border-radius:17px}.full-queue-row:nth-child(n+3){display:none}
}
@media(max-width:380px){.full-cover-wrap{width:63vw}.full-meta h2{font-size:23px}.full-controls{gap:5px}.full-player-grid{padding-inline:12px}.browse-title>span{display:none}}


/* =========================================================
   Ravix Music X 4.2 — Premium Desktop / Ads / Performance
   Non-destructive overrides: existing sections & behaviors kept.
   ========================================================= */
:root{--ad-h:78px;--card-gap:18px;--card-radius:22px}
.sidebar{display:flex;flex-direction:column;overflow:hidden}.nav-list{min-height:0;overflow-y:auto;scrollbar-width:none}.nav-list::-webkit-scrollbar{display:none}.sidebar-footer{margin-top:auto;display:grid;gap:9px;padding-top:14px}.sidebar-footer .backend-pill{position:static;right:auto;left:auto;bottom:auto;width:100%;background:linear-gradient(135deg,rgba(11,28,47,.94),rgba(7,18,31,.94));border-color:rgba(79,151,219,.18)}
.ravix-main-link{min-height:58px;display:grid;grid-template-columns:40px minmax(0,1fr) 22px;align-items:center;gap:10px;padding:8px 10px;border-radius:17px;text-decoration:none;color:#edf8ff;border:1px solid rgba(82,161,236,.26);background:linear-gradient(135deg,rgba(35,113,214,.18),rgba(13,36,61,.84));box-shadow:inset 0 1px rgba(255,255,255,.04),0 12px 34px rgba(0,0,0,.16);transition:transform .2s ease,border-color .2s ease,background .2s ease}.ravix-main-link:hover{transform:translateY(-1px);border-color:rgba(92,181,255,.55);background:linear-gradient(135deg,rgba(47,128,255,.28),rgba(13,42,71,.92))}.ravix-main-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#1c76ff,#53c0ff);box-shadow:0 8px 24px rgba(38,133,255,.28)}.ravix-main-mark svg{width:20px;height:20px}.ravix-main-copy{min-width:0}.ravix-main-copy b{display:block;font-size:11px;white-space:nowrap}.ravix-main-copy small{display:block;margin-top:2px;color:#6f9bbf;font-size:8px;letter-spacing:1.2px;direction:ltr;text-align:right}.ravix-main-external{width:17px;height:17px;color:#75bfff}
.main-shell{grid-template-rows:var(--top) auto minmax(0,1fr)}
.top-ad{position:relative;z-index:31;min-height:var(--ad-h);display:grid;grid-template-columns:auto minmax(250px,1fr) auto auto;align-items:center;gap:16px;margin:0;padding:10px 24px;border-bottom:1px solid rgba(77,153,225,.15);background:radial-gradient(circle at 22% 0%,rgba(47,128,255,.18),transparent 36%),linear-gradient(90deg,rgba(7,20,34,.98),rgba(8,27,46,.98) 52%,rgba(5,16,28,.98));box-shadow:0 12px 34px rgba(0,0,0,.16);overflow:hidden}.top-ad:after{content:"";position:absolute;left:8%;top:-90px;width:320px;height:180px;background:radial-gradient(circle,rgba(71,183,255,.14),transparent 68%);pointer-events:none}.top-ad-badge{position:relative;z-index:1;width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#1d76ff,#4ebcff);box-shadow:0 11px 28px rgba(33,126,255,.28);isolation:isolate}.top-ad-badge span{font-size:11px;font-weight:900;letter-spacing:1px}.top-ad-badge i{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#7dffcb;box-shadow:0 0 0 5px rgba(125,255,203,.08)}.top-ad-copy{position:relative;z-index:1;min-width:0}.top-ad-copy strong{display:block;font-size:14px;letter-spacing:-.1px}.top-ad-copy small{display:block;margin-top:4px;color:#7f9ab3;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-ad-perks{display:flex;align-items:center;gap:6px;position:relative;z-index:1}.top-ad-perks span{white-space:nowrap;padding:6px 9px;border:1px solid rgba(95,166,231,.14);border-radius:999px;background:rgba(9,29,49,.72);color:#83a9cb;font-size:8px}.top-ad-cta{position:relative;z-index:1;min-height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:13px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#176cff,#49b9ff);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 28px rgba(36,130,255,.24);font-size:10px;font-weight:900;white-space:nowrap;transition:transform .18s ease,filter .18s ease}.top-ad-cta:hover{transform:translateY(-1px);filter:brightness(1.07)}.top-ad-cta svg{width:15px;height:15px}
.viewport{padding:24px 32px calc(var(--player) + 42px);scroll-behavior:smooth}.section{content-visibility:auto;contain-intrinsic-size:1px 440px}.section-head{margin-bottom:16px}.section-head h2{font-size:24px;letter-spacing:-.25px}.section-head .more{display:flex;align-items:center;gap:6px;padding:7px 0}.section-head .more svg{width:15px;height:15px}
.media-card,.radio-card{border-radius:var(--card-radius);transition:transform .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease}.cover,.radio-cover{isolation:isolate;box-shadow:0 13px 34px rgba(0,0,0,.22)}.cover img,.radio-cover img{object-position:center center;image-rendering:auto;transform:translateZ(0);transition:transform .32s cubic-bezier(.2,.7,.2,1),filter .3s ease}.media-card:hover .cover img,.radio-card:hover .radio-cover img{transform:scale(1.035) translateZ(0);filter:saturate(1.04) contrast(1.02)}.media-card:hover,.radio-card:hover{transform:translateY(-3px)}.play-float{background:linear-gradient(145deg,#1c76ff,#51c3ff);color:#fff;box-shadow:0 10px 30px rgba(29,122,255,.38)}
.horizontal{gap:var(--card-gap);padding:4px 2px 12px;scroll-padding-inline:2px;overscroll-behavior-inline:contain}.horizontal .media-card{scroll-snap-align:start}.horizontal .media-card .meta{padding-inline:4px}.media-grid,.radio-grid{gap:18px}.media-card .meta,.radio-meta{padding-top:11px}.media-card .title,.radio-meta .title{font-size:13px}.media-card .sub,.radio-meta .sub{font-size:10px;line-height:1.5}
.artist-avatar{box-shadow:0 12px 36px rgba(0,0,0,.2);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.artist-card:hover .artist-avatar{transform:translateY(-3px) scale(1.015);border-color:rgba(84,169,247,.42);box-shadow:0 16px 42px rgba(0,0,0,.28),0 0 0 4px rgba(47,128,255,.05)}
.tracklist{box-shadow:0 18px 54px rgba(0,0,0,.14)}.track{content-visibility:auto;contain-intrinsic-size:68px}.track-cover img{image-rendering:auto}.icon-btn,.player-icon,.round-action,.main-play,.full-main-play{transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}.icon-btn:hover,.player-icon:hover{transform:translateY(-1px)}
@media(min-width:1500px){.horizontal{grid-auto-columns:calc((100% - (6 * var(--card-gap)))/7)}.media-grid,.radio-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.artist-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(min-width:1200px) and (max-width:1499px){.horizontal{grid-auto-columns:calc((100% - (5 * 16px))/6);gap:16px}.media-grid,.radio-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:901px) and (max-width:1199px){.horizontal{grid-auto-columns:calc((100% - (4 * 14px))/5);gap:14px}.top-ad{grid-template-columns:auto minmax(220px,1fr) auto}.top-ad-perks{display:none}}
@media(max-width:900px){:root{--ad-h:58px}.sidebar{overflow:hidden}.sidebar-footer{padding-top:10px}.ravix-main-link{min-height:54px}.main-shell{grid-template-rows:var(--top) auto minmax(0,1fr)}.top-ad{min-height:var(--ad-h);grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:8px 11px}.top-ad-badge{width:36px;height:36px;border-radius:12px}.top-ad-badge span{font-size:9px}.top-ad-copy strong{font-size:11px}.top-ad-copy small,.top-ad-perks{display:none}.top-ad-cta{min-height:34px;padding:0 10px;border-radius:11px;font-size:8px}.top-ad-cta span{display:none}.top-ad-cta svg{width:16px;height:16px}.viewport{padding-top:14px}.section{contain-intrinsic-size:1px 360px}.media-card:hover,.radio-card:hover{transform:none}}
@media(max-width:560px){.top-ad-copy strong{font-size:10px}.top-ad{grid-template-columns:34px minmax(0,1fr) 34px}.top-ad-badge{width:34px;height:34px}.top-ad-cta{width:34px;padding:0;justify-content:center}.ravix-main-copy b{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* =========================================================
   Ravix Music X 4.4 — Signature Desktop Header
   One-row fixed desktop composition. Mobile layout is preserved.
   ========================================================= */
.desktop-head-context{display:none}
@media (min-width:901px){
  :root{--top:82px;--ad-h:68px}
  .main-shell{grid-template-rows:var(--top) auto minmax(0,1fr);min-height:0;overflow:hidden}
  .topbar{
    position:relative!important;
    z-index:70!important;
    height:var(--top)!important;
    min-height:var(--top)!important;
    display:grid!important;
    grid-template-columns:minmax(190px,1fr) minmax(360px,500px) minmax(190px,1fr)!important;
    grid-template-areas:"actions search context"!important;
    align-items:center!important;
    column-gap:22px!important;
    padding:0 24px!important;
    direction:ltr!important;
    overflow:hidden!important;
    border-bottom:1px solid rgba(80,151,220,.14)!important;
    background:linear-gradient(180deg,rgba(3,10,18,.985),rgba(3,9,16,.965))!important;
    box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
    backdrop-filter:blur(18px) saturate(130%)!important;
  }
  .topbar:before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 50% -110%,rgba(63,153,255,.18),transparent 48%),linear-gradient(90deg,transparent 0%,rgba(75,164,255,.025) 50%,transparent 100%);
  }
  .topbar:after{
    content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(69,153,240,.2),transparent);
  }
  .topbar>.mobile-only{display:none!important}

  .desktop-head-context{
    grid-area:context;justify-self:end;position:relative;z-index:2;
    display:flex!important;align-items:center;gap:11px;direction:rtl;min-width:0;
  }
  .desktop-head-logo{
    width:44px;height:44px;flex:0 0 44px;border-radius:15px;display:grid;place-items:center;
    color:#fff;background:linear-gradient(145deg,#176fff,#4fc2ff);border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 30px rgba(30,124,255,.22),inset 0 1px rgba(255,255,255,.16);
  }
  .desktop-head-logo svg{width:21px;height:21px;stroke-width:2.1}
  .desktop-head-copy{min-width:0;text-align:right;line-height:1.15}
  .desktop-head-copy b{display:block;color:#f7fbff;font-size:13px;font-weight:900;white-space:nowrap;letter-spacing:.05px}
  .desktop-head-copy small{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin-top:6px;color:#7892ac;font-size:8px;font-weight:700;white-space:nowrap}
  .desktop-head-copy small i{width:6px;height:6px;border-radius:50%;background:#38dda0;box-shadow:0 0 0 4px rgba(56,221,160,.07),0 0 14px rgba(56,221,160,.3)}

  .topbar .searchbar{
    grid-area:search;justify-self:center;position:relative;z-index:3;
    width:100%!important;max-width:500px!important;min-width:0!important;height:48px!important;margin:0!important;
    display:grid!important;grid-template-columns:104px minmax(0,1fr) 36px!important;align-items:center!important;
    padding:4px!important;direction:rtl!important;
    border:1px solid rgba(85,158,226,.22)!important;border-radius:16px!important;
    background:linear-gradient(180deg,rgba(10,26,44,.94),rgba(7,19,33,.96))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 28px rgba(0,0,0,.16)!important;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
  }
  .topbar .searchbar:focus-within{
    border-color:rgba(71,164,255,.62)!important;
    background:linear-gradient(180deg,rgba(12,31,52,.98),rgba(8,22,38,.98))!important;
    box-shadow:0 0 0 3px rgba(47,128,255,.075),0 12px 32px rgba(0,0,0,.18)!important;
  }
  .topbar .searchbar button{
    width:100%!important;height:38px!important;margin:0!important;padding:0 13px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
    border-radius:12px!important;background:linear-gradient(135deg,#156cff,#43b8ff)!important;color:#fff!important;
    box-shadow:0 7px 22px rgba(31,122,255,.24)!important;font-size:11px!important;font-weight:900!important;cursor:pointer!important;
  }
  .topbar .searchbar button svg{width:16px!important;height:16px!important;flex:0 0 16px}
  .topbar .searchbar input{
    width:100%!important;min-width:0!important;height:100%!important;padding:0 14px!important;border:0!important;outline:0!important;
    background:transparent!important;color:#eef7ff!important;text-align:right!important;font-size:12px!important;font-weight:700!important;direction:rtl!important;
  }
  .topbar .searchbar input::placeholder{color:#647e98!important;font-weight:500!important}
  .topbar .searchbar kbd{
    justify-self:center!important;display:grid!important;place-items:center!important;width:25px!important;height:25px!important;padding:0!important;
    border-radius:8px!important;background:rgba(16,38,61,.9)!important;border:1px solid rgba(90,157,218,.18)!important;
    color:#7697b5!important;font-size:9px!important;line-height:1!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
  }

  .topbar .top-actions{
    grid-area:actions;justify-self:start;position:relative!important;z-index:3!important;
    display:flex!important;align-items:center!important;gap:6px!important;direction:ltr!important;
    height:50px!important;margin:0!important;padding:5px!important;
    border:1px solid rgba(84,154,219,.18)!important;border-radius:17px!important;
    background:linear-gradient(180deg,rgba(10,26,43,.94),rgba(7,18,31,.96))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.15)!important;
  }
  .topbar .top-actions .icon-btn{
    display:grid!important;place-items:center!important;position:relative!important;
    flex:0 0 38px!important;width:38px!important;height:38px!important;min-width:38px!important;margin:0!important;
    border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;color:#8fa8c0!important;
    box-shadow:none!important;transform:none!important;transition:background .16s ease,color .16s ease,border-color .16s ease!important;
  }
  .topbar .top-actions .icon-btn:hover{
    transform:none!important;color:#f4fbff!important;background:rgba(29,78,119,.55)!important;border-color:rgba(82,166,244,.17)!important;
  }
  .topbar .top-actions .icon-btn svg{width:18px!important;height:18px!important}
  .topbar .top-actions .badge{
    top:-3px!important;left:-3px!important;min-width:17px!important;height:17px!important;padding:0 4px!important;
    font-size:7px!important;border-radius:99px!important;background:linear-gradient(135deg,#1a75ff,#5ac3ff)!important;
    box-shadow:0 0 0 2px #071422,0 4px 12px rgba(31,125,255,.24)!important;
  }

  .top-ad{
    min-height:var(--ad-h)!important;margin:10px 24px 0!important;padding:9px 14px!important;
    border:1px solid rgba(83,158,229,.18)!important;border-radius:18px!important;
    background:radial-gradient(circle at 18% 0%,rgba(47,128,255,.18),transparent 34%),linear-gradient(100deg,rgba(7,23,40,.97),rgba(8,29,49,.97) 52%,rgba(5,17,30,.98))!important;
    box-shadow:0 14px 38px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025)!important;
  }
  .top-ad-badge{width:42px!important;height:42px!important;border-radius:14px!important}
  .top-ad-copy strong{font-size:13px!important}
  .top-ad-copy small{font-size:9px!important;color:#7895ae!important}
  .top-ad-cta{min-height:38px!important}
  .viewport{padding-top:18px!important}

  /* Artist / cover presentation stays clean on large displays. */
  .artist-hero{height:350px!important;border-radius:28px!important;background:radial-gradient(circle at 18% 18%,rgba(44,128,225,.16),transparent 34%),linear-gradient(135deg,#0b1725,#06101b 68%,#050b13)!important}
  .artist-hero .wall{object-fit:cover!important;object-position:center 22%!important;filter:saturate(.88) contrast(.98) brightness(.72)!important;transform:scale(1.01)!important}
  .artist-hero.has-wall:after{background:linear-gradient(90deg,rgba(5,10,17,.2),rgba(5,10,17,.7) 58%,rgba(4,10,17,.96) 100%),linear-gradient(0deg,rgba(4,10,17,.94),transparent 62%)!important}
  .artist-hero.no-wall:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 25%,rgba(45,140,255,.18),transparent 30%),radial-gradient(circle at 75% 15%,rgba(55,206,255,.07),transparent 26%);pointer-events:none}
  .artist-hero.no-wall:after{background:linear-gradient(90deg,rgba(4,10,17,.08),rgba(4,10,17,.42) 55%,rgba(4,10,17,.72))!important}
  .artist-info{right:32px!important;left:32px!important;bottom:26px!important;gap:18px!important}
  .artist-info .big-avatar{width:128px!important;height:128px!important;border-radius:26px!important}
  .artist-info h1{font-size:36px!important}
  .cover,.radio-cover{background:#0b1624!important;overflow:hidden!important}
  .cover img,.radio-cover img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
  .horizontal{padding-inline:1px!important}
}
@media (min-width:1500px){
  .horizontal{grid-auto-columns:calc((100% - (5 * 18px))/6)!important;gap:18px!important}
}
@media (min-width:1200px) and (max-width:1499px){
  .horizontal{grid-auto-columns:calc((100% - (4 * 16px))/5)!important;gap:16px!important}
}
@media (min-width:901px) and (max-width:1199px){
  .topbar{grid-template-columns:minmax(160px,1fr) minmax(330px,480px) minmax(160px,1fr)!important;column-gap:14px!important;padding-inline:18px!important}
  .desktop-head-logo{width:40px;height:40px;flex-basis:40px;border-radius:13px}
  .desktop-head-copy b{font-size:11px}.desktop-head-copy small{font-size:7px}
  .topbar .searchbar{max-width:480px!important}
  .topbar .top-actions{height:46px!important;padding:4px!important}
  .topbar .top-actions .icon-btn{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important}
  .top-ad{margin-inline:18px!important}
  .horizontal{grid-auto-columns:calc((100% - (3 * 14px))/4)!important;gap:14px!important}
}
@media (min-width:901px) and (max-width:1020px){
  .topbar{grid-template-columns:minmax(130px,1fr) minmax(290px,440px) minmax(130px,1fr)!important;padding-inline:14px!important;column-gap:10px!important}
  .desktop-head-copy small{display:none}.desktop-head-logo{width:38px;height:38px;flex-basis:38px}
  .topbar .searchbar{max-width:440px!important;grid-template-columns:92px minmax(0,1fr) 32px!important}
  .topbar .searchbar button{padding-inline:10px!important}.topbar .searchbar input{padding-inline:10px!important}
  .topbar .top-actions{gap:3px!important}.topbar .top-actions .icon-btn{width:34px!important;height:34px!important;min-width:34px!important;flex-basis:34px!important}
}

/* =========================================================
   Ravix Music X 4.5 — Crystal Glass / RTL Desktop Header
   Browser-style back + forward, right-anchored search,
   lightweight glass language across the entire application.
   ========================================================= */
:root{
  --glass-bg:rgba(8,20,35,.58);
  --glass-bg-strong:rgba(8,22,39,.78);
  --glass-bg-soft:rgba(13,31,52,.42);
  --glass-line:rgba(150,205,255,.13);
  --glass-line-strong:rgba(120,194,255,.24);
  --glass-highlight:rgba(255,255,255,.055);
  --glass-shadow:0 18px 55px rgba(0,0,0,.22);
  --glass-shadow-soft:0 10px 30px rgba(0,0,0,.14);
}
html,body{background:#030914!important}
body{background:radial-gradient(circle at 13% 8%,rgba(47,128,255,.12),transparent 28%),radial-gradient(circle at 73% 1%,rgba(56,193,255,.07),transparent 24%),linear-gradient(180deg,#04101d 0%,#020812 48%,#02060d 100%)!important}
.ambient-layer{background:radial-gradient(circle at 86% -10%,rgba(52,139,255,.12),transparent 30%),radial-gradient(circle at 15% 52%,rgba(0,198,255,.055),transparent 31%),linear-gradient(180deg,#03101c 0%,#020812 58%,#02060d 100%)!important}
.ambient-layer:before{opacity:.72}
.app-shell{background:transparent!important}
.sidebar,.topbar,.top-ad,.player-shell,.drawer,.command-box,.full-player-stage{-webkit-backdrop-filter:blur(22px) saturate(138%);backdrop-filter:blur(22px) saturate(138%)}
.sidebar{background:linear-gradient(180deg,rgba(7,18,31,.74),rgba(3,10,18,.68))!important;border-left:1px solid var(--glass-line)!important;box-shadow:-18px 0 70px rgba(0,0,0,.16),inset 1px 0 var(--glass-highlight)!important}
.brand-mark,.ravix-main-mark,.desktop-head-logo{background:linear-gradient(145deg,rgba(29,116,255,.92),rgba(75,194,255,.88))!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 10px 30px rgba(35,127,255,.24),inset 0 1px rgba(255,255,255,.18)!important}
.nav-list button{position:relative;overflow:hidden;border:1px solid transparent!important;background:transparent!important;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important}
.nav-list button:hover{color:#f8fbff!important;background:linear-gradient(100deg,rgba(255,255,255,.055),rgba(76,160,255,.05))!important;border-color:rgba(150,205,255,.08)!important}
.nav-list button.active{color:#fff!important;background:linear-gradient(100deg,rgba(47,128,255,.16),rgba(255,255,255,.045))!important;border-color:rgba(108,184,255,.16)!important;box-shadow:inset -2px 0 #4aa9ff,0 8px 24px rgba(0,0,0,.08)!important}
.ravix-main-link,.backend-pill{background:linear-gradient(135deg,rgba(15,42,69,.56),rgba(8,24,41,.5))!important;border-color:var(--glass-line)!important;box-shadow:inset 0 1px var(--glass-highlight),0 12px 30px rgba(0,0,0,.12)!important}

@media (min-width:901px){
  :root{--top:76px;--ad-h:64px}
  .main-shell{grid-template-rows:var(--top) auto minmax(0,1fr)!important}
  .topbar{height:var(--top)!important;min-height:var(--top)!important;grid-template-columns:auto minmax(36px,1fr) minmax(350px,520px) auto!important;grid-template-areas:"actions spacer search context"!important;column-gap:18px!important;padding:0 22px!important;direction:ltr!important;overflow:visible!important;background:linear-gradient(180deg,rgba(5,16,28,.66),rgba(5,15,27,.52))!important;border-bottom:1px solid var(--glass-line)!important;box-shadow:0 10px 34px rgba(0,0,0,.12),inset 0 -1px rgba(255,255,255,.018)!important}
  .topbar:before{background:radial-gradient(circle at 72% -80%,rgba(69,163,255,.17),transparent 43%),linear-gradient(90deg,transparent,rgba(255,255,255,.014),transparent)!important}
  .topbar:after{left:22px!important;right:22px!important;background:linear-gradient(90deg,transparent,rgba(108,189,255,.22),transparent)!important}
  .desktop-head-context{grid-area:context!important;justify-self:end!important;gap:10px!important;min-width:max-content!important;padding:5px 6px 5px 10px!important;border-radius:16px!important}
  .desktop-head-logo{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:14px!important}
  .desktop-head-copy b{font-size:12px!important;letter-spacing:.05px}
  .desktop-head-copy small{margin-top:5px!important;font-size:7.5px!important;color:#7894af!important}
  .topbar .searchbar{grid-area:search!important;justify-self:end!important;width:min(100%,520px)!important;max-width:520px!important;height:46px!important;grid-template-columns:96px minmax(0,1fr) 34px!important;border:1px solid var(--glass-line-strong)!important;border-radius:15px!important;background:linear-gradient(180deg,rgba(15,38,63,.60),rgba(8,25,43,.53))!important;box-shadow:inset 0 1px var(--glass-highlight),0 12px 35px rgba(0,0,0,.12)!important;-webkit-backdrop-filter:blur(16px) saturate(135%);backdrop-filter:blur(16px) saturate(135%)}
  .topbar .searchbar:focus-within{border-color:rgba(90,181,255,.56)!important;background:linear-gradient(180deg,rgba(18,47,77,.72),rgba(9,29,49,.65))!important;box-shadow:0 0 0 3px rgba(47,128,255,.07),0 16px 38px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.07)!important}
  .topbar .searchbar button{height:36px!important;border-radius:11px!important;background:linear-gradient(135deg,#1d78ff,#55c4ff)!important;box-shadow:0 8px 22px rgba(31,125,255,.20),inset 0 1px rgba(255,255,255,.16)!important}
  .topbar .searchbar input{text-align:right!important;direction:rtl!important;padding:0 13px!important;font-size:11.5px!important;color:#f5fbff!important}
  .topbar .searchbar kbd{width:24px!important;height:24px!important;border-radius:8px!important;background:rgba(255,255,255,.045)!important;border-color:rgba(154,207,255,.11)!important;color:#7e9ab4!important}
  .topbar .top-actions{grid-area:actions!important;justify-self:start!important;display:flex!important;align-items:center!important;gap:5px!important;direction:ltr!important;height:48px!important;padding:4px!important;border:1px solid var(--glass-line)!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(12,32,53,.56),rgba(7,23,40,.50))!important;box-shadow:inset 0 1px var(--glass-highlight),0 12px 34px rgba(0,0,0,.12)!important;-webkit-backdrop-filter:blur(16px) saturate(132%);backdrop-filter:blur(16px) saturate(132%)}
  .history-actions{display:flex;align-items:center;gap:3px;direction:ltr}
  .top-actions-sep{width:1px;height:24px;margin:0 2px;background:linear-gradient(180deg,transparent,rgba(153,205,255,.18),transparent)}
  .topbar .top-actions .icon-btn{width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important;border-radius:12px!important;color:#90abc4!important;background:transparent!important;border:1px solid transparent!important}
  .topbar .top-actions .history-btn{color:#c5d7e7!important}
  .topbar .top-actions .icon-btn:hover{color:#fff!important;background:linear-gradient(180deg,rgba(83,169,255,.15),rgba(255,255,255,.045))!important;border-color:rgba(125,196,255,.15)!important}
  .topbar .top-actions .history-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(71,152,236,.08))!important}
  .topbar .top-actions .icon-btn svg{width:18px!important;height:18px!important;stroke-width:1.8}
  .topbar .top-actions .badge{top:-2px!important;left:-2px!important}
  .top-ad{min-height:var(--ad-h)!important;margin:10px 22px 0!important;padding:8px 12px!important;border:1px solid var(--glass-line)!important;border-radius:18px!important;background:radial-gradient(circle at 16% 0%,rgba(54,147,255,.14),transparent 35%),linear-gradient(105deg,rgba(11,34,57,.52),rgba(7,24,42,.43) 54%,rgba(7,21,36,.49))!important;box-shadow:var(--glass-shadow-soft),inset 0 1px var(--glass-highlight)!important}
  .top-ad-badge{width:40px!important;height:40px!important;border-radius:13px!important}
  .top-ad-copy strong{font-size:12px!important}.top-ad-copy small{font-size:8.5px!important}
  .top-ad-perks span{background:rgba(255,255,255,.035)!important;border-color:rgba(151,205,255,.10)!important}
  .top-ad-cta{min-height:36px!important;border-radius:12px!important;background:linear-gradient(135deg,rgba(29,116,255,.96),rgba(76,190,255,.94))!important}
}
@media (min-width:901px) and (max-width:1199px){
  .topbar{grid-template-columns:auto minmax(18px,1fr) minmax(300px,430px) auto!important;column-gap:11px!important;padding-inline:16px!important}
  .topbar .searchbar{max-width:430px!important;grid-template-columns:88px minmax(0,1fr) 30px!important}
  .desktop-head-copy small{display:none!important}.desktop-head-logo{width:39px!important;height:39px!important;flex-basis:39px!important}
  .topbar .top-actions{height:46px!important}.topbar .top-actions .icon-btn{width:35px!important;height:35px!important;min-width:35px!important;flex-basis:35px!important}
  .top-ad{margin-inline:16px!important}
}
@media (min-width:901px) and (max-width:1035px){
  .desktop-head-copy{display:none!important}.desktop-head-context{padding:3px!important}
  .topbar{grid-template-columns:auto minmax(8px,1fr) minmax(275px,390px) 42px!important;column-gap:9px!important;padding-inline:13px!important}
  .topbar .searchbar{max-width:390px!important;grid-template-columns:78px minmax(0,1fr) 28px!important}
  .topbar .searchbar button span{display:inline!important}
  .topbar .top-actions{gap:2px!important;padding:3px!important}.top-actions-sep{margin:0!important}
}

.viewport{background:radial-gradient(circle at 80% 0%,rgba(47,128,255,.045),transparent 24%),linear-gradient(180deg,rgba(2,8,15,.08),rgba(2,7,13,.02))!important}
.hero,.artist-hero,.detail-hero,.tracklist,.browse-grid,.empty,.error-card,.up-next,.full-tools-row{border-color:var(--glass-line)!important;box-shadow:var(--glass-shadow-soft),inset 0 1px var(--glass-highlight)!important}
.hero{background:radial-gradient(circle at 10% 0%,rgba(61,158,255,.16),transparent 38%),linear-gradient(120deg,rgba(17,39,63,.58),rgba(8,25,43,.50) 48%,rgba(8,31,52,.48))!important}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.028),transparent 30%,rgba(255,255,255,.012) 72%,transparent)}
.artist-hero{background:linear-gradient(135deg,rgba(13,33,54,.60),rgba(6,20,35,.56))!important;border-color:rgba(148,202,255,.14)!important}
.detail-hero{background:radial-gradient(circle at 8% 0%,rgba(60,153,255,.12),transparent 28%),linear-gradient(135deg,rgba(14,34,56,.60),rgba(8,22,38,.50))!important}
.tracklist{background:linear-gradient(180deg,rgba(11,29,48,.42),rgba(6,18,31,.34))!important}
.track{border-bottom-color:rgba(154,204,255,.07)!important}.track:hover{background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(47,128,255,.04))!important}.track.playing{background:linear-gradient(90deg,rgba(47,128,255,.16),rgba(255,255,255,.025))!important}
.track .playbtn{background:rgba(255,255,255,.045)!important;border:1px solid rgba(150,203,255,.08)!important}.track:hover .playbtn,.track.playing .playbtn{background:linear-gradient(145deg,#1c76ff,#51c3ff)!important;border-color:transparent!important}
.cover,.radio-cover,.artist-avatar,.track-cover,.art-wrap,.detail-cover,.big-avatar{border-color:rgba(151,205,255,.11)!important;box-shadow:0 12px 36px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.035)!important}
.tabbar button,.chip-btn,.ghost{background:rgba(255,255,255,.045)!important;border-color:rgba(151,205,255,.11)!important;color:#bfd0df!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important}
.tabbar button:hover,.chip-btn:hover,.ghost:hover{background:rgba(255,255,255,.075)!important;border-color:rgba(111,187,255,.18)!important}
.tabbar button.active{color:#fff!important;background:linear-gradient(135deg,rgba(32,120,255,.92),rgba(74,184,255,.86))!important;border-color:rgba(255,255,255,.13)!important}
.primary{background:linear-gradient(135deg,#1c76ff,#55c4ff)!important;border:1px solid rgba(255,255,255,.13)!important}
.stats span{background:rgba(7,22,38,.46)!important;border-color:rgba(161,210,255,.12)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.empty,.error-card{background:linear-gradient(180deg,rgba(12,31,52,.40),rgba(7,20,35,.32))!important;border-style:solid!important}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.035) 20%,rgba(116,183,255,.09) 40%,rgba(255,255,255,.035) 60%)!important;background-size:200% 100%!important}
.player-shell{border-color:rgba(139,200,255,.17)!important;background:linear-gradient(180deg,rgba(10,29,49,.75),rgba(6,21,37,.70))!important;box-shadow:0 22px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.065)!important}
.player-icon,.player-tools select{background:rgba(255,255,255,.045)!important;border-color:rgba(149,204,255,.10)!important}.player-icon:hover{background:rgba(91,173,255,.12)!important;border-color:rgba(122,193,255,.18)!important}
.main-play,.full-main-play{background:linear-gradient(145deg,#1b74ff,#58c8ff)!important;box-shadow:0 12px 32px rgba(26,119,255,.30)!important}
.drawer{background:linear-gradient(180deg,rgba(7,23,40,.84),rgba(4,14,25,.80))!important;border-right-color:var(--glass-line)!important}.queue-row{border:1px solid transparent}.queue-row:hover{background:rgba(70,148,221,.10)!important;border-color:rgba(145,202,255,.08)}
.command{background:rgba(1,6,12,.64)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.command-box{background:linear-gradient(180deg,rgba(10,31,51,.82),rgba(6,20,35,.78))!important;border-color:rgba(141,202,255,.16)!important;box-shadow:0 30px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.055)!important}.quick:hover{background:rgba(70,151,228,.10)!important}
.full-player-stage{background:radial-gradient(circle at 15% 0%,rgba(50,142,255,.13),transparent 30%),linear-gradient(180deg,rgba(8,26,44,.92),rgba(2,10,18,.94) 72%)!important;border-color:rgba(146,204,255,.14)!important;box-shadow:0 36px 120px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.055)!important}.full-tools-row,.up-next{background:rgba(10,31,51,.37)!important}.backend-pill{color:#d6e5f2}
@media(max-width:900px){.topbar{background:linear-gradient(180deg,rgba(6,18,31,.82),rgba(5,15,27,.74))!important;border-bottom-color:var(--glass-line)!important}.topbar .searchbar{background:rgba(12,31,51,.62)!important;border-color:rgba(144,202,255,.14)!important}.top-ad{background:linear-gradient(105deg,rgba(11,34,57,.62),rgba(7,23,40,.56))!important;border-color:var(--glass-line)!important}.sidebar{background:linear-gradient(180deg,rgba(7,20,34,.94),rgba(3,11,20,.92))!important}.mobile-nav{background:rgba(5,16,28,.82)!important;border-top-color:rgba(146,204,255,.12)!important;-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%)}}
@media(max-width:900px){.top-actions #favTop,.top-actions #queueTop,.top-actions #forward,.top-actions .top-actions-sep{display:none!important}.top-actions .history-actions{display:flex!important}.top-actions #back{display:grid!important}}

/* Ravix Music X 4.6 — rendering performance + resilient media */
.section{content-visibility:auto;contain-intrinsic-size:1px 420px}
.tracklist,.artist-grid,.media-grid,.radio-grid{contain:layout style}
img.img-failed{opacity:.16!important;filter:grayscale(1)!important}
.cover:has(img.img-failed),.track-cover:has(img.img-failed),.artist-avatar:has(img.img-failed),.radio-cover:has(img.img-failed){background:linear-gradient(135deg,rgba(24,47,70,.92),rgba(9,21,34,.96))!important}
@media (prefers-reduced-motion:reduce){.disc,.skeleton{animation:none!important}.media-card,.radio-card,.artist-card,.cover img,.radio-cover img{transition:none!important}}


/* =========================================================
   Ravix Music X 4.7 — Mobile Player / Responsive Polish
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100%;overscroll-behavior:none}
.viewport{overflow-x:hidden}

/* Precise, touch-friendly seek bars with a live filled track. */
.timeline input[type="range"],
.full-timeline input[type="range"]{
  --seek-progress:0%;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-width:0;
  height:18px;
  margin:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  direction:ltr;
  touch-action:none;
}
.timeline input[type="range"]::-webkit-slider-runnable-track,
.full-timeline input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#2f80ff 0 var(--seek-progress),rgba(132,166,201,.22) var(--seek-progress) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.timeline input[type="range"]::-webkit-slider-thumb,
.full-timeline input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  margin-top:-5px;
  border:2px solid #dff2ff;
  border-radius:50%;
  background:#3b9fff;
  box-shadow:0 2px 10px rgba(47,128,255,.48);
}
.timeline input[type="range"]::-moz-range-track,
.full-timeline input[type="range"]::-moz-range-track{
  height:4px;
  border:0;
  border-radius:999px;
  background:rgba(132,166,201,.22);
}
.timeline input[type="range"]::-moz-range-progress,
.full-timeline input[type="range"]::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background:#2f80ff;
}
.timeline input[type="range"]::-moz-range-thumb,
.full-timeline input[type="range"]::-moz-range-thumb{
  width:12px;
  height:12px;
  border:2px solid #dff2ff;
  border-radius:50%;
  background:#3b9fff;
  box-shadow:0 2px 10px rgba(47,128,255,.48);
}
.timeline input[type="range"]:focus-visible,
.full-timeline input[type="range"]:focus-visible{outline:2px solid rgba(91,184,255,.8);outline-offset:4px;border-radius:999px}
.timeline input[type="range"]:disabled,
.full-timeline input[type="range"]:disabled{cursor:default;opacity:.45}

@media(max-width:900px){
  :root{--player:108px}
  .app-shell,.main-shell,.topbar,.top-ad,.viewport{width:100%;max-width:100%}
  .viewport{padding-left:12px!important;padding-right:12px!important;padding-bottom:calc(182px + env(safe-area-inset-bottom))!important}

  /* Floating mini-player: symmetric gutters and a dedicated seek row. */
  .player-shell{
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:calc(68px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-height:96px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:minmax(52px,auto) 24px!important;
    grid-template-areas:"now controls" "timeline timeline"!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:5px!important;
    padding:8px 10px 7px!important;
    border-radius:21px!important;
    overflow:hidden;
    box-shadow:0 18px 58px rgba(0,0,0,.5),0 0 0 1px rgba(87,166,235,.06)!important;
  }
  .player-shell:after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:inset 0 1px rgba(255,255,255,.055);
  }
  .player-click-zone{inset:0 0 30px!important}
  .now-playing{grid-area:now;grid-template-columns:46px minmax(0,1fr)!important;gap:9px!important;min-width:0}
  .art-wrap{width:46px!important;height:46px!important;border-radius:13px!important}
  .now-playing>#likeNow{display:none!important}
  .player-shell .now-meta{max-width:none!important;min-width:0}
  .now-meta b{font-size:11.5px!important;line-height:1.45}
  .now-meta small{font-size:8.5px!important;line-height:1.45;margin-top:1px}

  .transport{display:contents!important}
  .transport-buttons{grid-area:controls;position:relative;z-index:4;display:flex!important;justify-content:flex-end;gap:5px!important;direction:ltr;pointer-events:auto}
  .transport-buttons .desktop-only{display:none!important}
  .transport-buttons .player-icon{width:34px!important;height:34px!important;flex:0 0 auto}
  .transport-buttons .main-play{width:44px!important;height:44px!important;flex:0 0 auto}

  .timeline{
    grid-area:timeline;
    position:relative;
    z-index:4;
    display:grid!important;
    grid-template-columns:31px minmax(0,1fr) 31px!important;
    align-items:center;
    gap:6px!important;
    width:100%;
    min-width:0;
    color:#7f9ab2!important;
    font-size:7.5px!important;
    line-height:1;
    pointer-events:auto;
  }
  .timeline span{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
  .timeline input[type="range"]{height:20px}
  .timeline input[type="range"]::-webkit-slider-runnable-track{height:4px}
  .timeline input[type="range"]::-webkit-slider-thumb{width:15px;height:15px;margin-top:-5.5px}

  .player-tools{display:none!important}
  .mobile-nav{
    height:calc(58px + env(safe-area-inset-bottom))!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
  .mobile-nav button{min-width:0;touch-action:manipulation}
  button,.media-card,.artist-card,.track,.radio-card{touch-action:manipulation}
}

@media(max-width:560px){
  .player-shell{
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    column-gap:7px!important;
    padding-inline:9px!important;
  }
  .now-playing{grid-template-columns:43px minmax(0,1fr)!important;gap:8px!important}
  .art-wrap{width:43px!important;height:43px!important}
  .transport-buttons{gap:3px!important}
  .transport-buttons .player-icon{width:31px!important;height:31px!important}
  .transport-buttons .main-play{width:41px!important;height:41px!important}
  .timeline{grid-template-columns:29px minmax(0,1fr) 29px!important;gap:5px!important}
}

@media(max-width:380px){
  .player-shell{left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important;padding-inline:8px!important}
  .now-playing{grid-template-columns:40px minmax(0,1fr)!important;gap:7px!important}
  .art-wrap{width:40px!important;height:40px!important}
  .now-meta b{font-size:10.5px!important}.now-meta small{font-size:7.5px!important}
  .transport-buttons .player-icon{width:29px!important;height:29px!important}
  .transport-buttons .main-play{width:39px!important;height:39px!important}
  .timeline{grid-template-columns:27px minmax(0,1fr) 27px!important;font-size:7px!important}
}

/* =========================================================
   V4.8 — instant artist pages + playback-ready mini player
   ========================================================= */
.player-shell[hidden]{display:none!important}
.player-shell{opacity:0;transform:translateY(12px) scale(.992);transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),border-color .2s ease,box-shadow .2s ease}
.player-shell.player-ready{opacity:1;transform:none}
body.audio-loading .player-shell:not(.player-ready){pointer-events:none}

.catalog-status{display:flex;align-items:center;justify-content:center;gap:12px;min-height:74px;margin:12px 0;padding:14px 16px;border:1px solid rgba(111,180,244,.14);border-radius:18px;background:linear-gradient(135deg,rgba(11,34,57,.72),rgba(6,20,35,.64));color:#dcecff}
.catalog-status>span{width:20px;height:20px;border-radius:50%;border:2px solid rgba(91,184,255,.22);border-top-color:#5bb8ff;animation:spin .75s linear infinite;flex:0 0 auto}
.catalog-status>div{min-width:0}.catalog-status b{display:block;font-size:11px}.catalog-status small{display:block;margin-top:3px;color:#7894ae;font-size:8.5px;line-height:1.8}.catalog-status.soft{justify-content:space-between}.catalog-status.soft .ghost{flex:0 0 auto;min-height:34px;padding:0 13px;border-radius:11px}

.track.audio-loading .playbtn{position:relative;color:transparent!important}
.track.audio-loading .playbtn svg{opacity:0}
.track.audio-loading .playbtn:after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;border:2px solid rgba(91,184,255,.25);border-top-color:#5bb8ff;animation:spin .7s linear infinite}
.track.audio-loading{background:linear-gradient(90deg,rgba(47,128,255,.07),transparent 40%)}

/* Do not reserve mini-player space before the first real playback starts. */
@media(min-width:901px){body:not(.has-player) .viewport{padding-bottom:38px!important}}
@media(max-width:900px){body:not(.has-player) .viewport{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}.catalog-status{margin-inline:0;border-radius:16px}.catalog-status.soft{align-items:flex-start;flex-direction:column}.catalog-status.soft .ghost{width:100%}}

/* Slightly denser, more deliberate player proportions. */
@media(min-width:901px){.player-shell{right:calc(var(--side) + 20px);left:20px;bottom:16px;border-radius:24px;padding:10px 13px;box-shadow:0 26px 76px rgba(0,0,0,.40),inset 0 1px rgba(255,255,255,.065)!important}.art-wrap{border-radius:15px}.main-play{width:47px;height:47px}}
@media(max-width:900px){.player-shell.player-ready{transform:none}.player-shell{will-change:transform,opacity;border-radius:22px!important}.timeline input[type="range"]{touch-action:pan-x}}

/* v4.9.1: controlled near-viewport image loading */
img[data-src]{opacity:.01}img.img-loading{opacity:.35;transition:opacity .18s ease}.artist-avatar img,.cover img,.radio-cover img,.track-cover img{transition:opacity .22s ease}img:not([data-src]):not(.img-failed){opacity:1}


/* v5.0.0 — download controls + radio removal */
.track{grid-template-columns:34px 48px minmax(0,1fr) 110px 58px 82px}
.track-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.track .downloadbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.045);border:1px solid rgba(150,203,255,.08);color:#8fcfff;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.track .downloadbtn:hover{transform:translateY(-1px);background:rgba(91,173,255,.14);border-color:rgba(122,193,255,.22);color:#fff}
.track .downloadbtn svg{width:17px;height:17px}
.now-playing{grid-template-columns:58px minmax(0,1fr) 38px 38px}
.full-meta-actions{display:flex;align-items:center;gap:8px}
@media(max-width:900px){
  .track{grid-template-columns:42px minmax(0,1fr) 76px}
  .track-actions{gap:5px}
  .track .downloadbtn,.track .playbtn{width:32px;height:32px}
  .mobile-nav{grid-template-columns:repeat(4,1fr)!important}
  .now-playing{grid-template-columns:48px minmax(0,1fr)!important}
  .now-playing>#downloadNow,.now-playing>#likeNow{display:none!important}
  .full-meta-row{grid-template-columns:minmax(0,1fr) auto!important}
}
@media(max-width:560px){.track{grid-template-columns:42px minmax(0,1fr) 72px}.track .downloadbtn,.track .playbtn{width:31px;height:31px}}


/* =========================================================
   Ravix Music X 5.1 — Clean playlist directory
   Image-free, list-first browse page.
   ========================================================= */
.playlist-list{display:grid;gap:8px;padding:4px 0}
.playlist-row{width:100%;min-height:70px;display:grid;grid-template-columns:44px 46px minmax(0,1fr) 38px;align-items:center;gap:12px;padding:10px 14px;border:1px solid rgba(147,201,255,.09);border-radius:17px;background:linear-gradient(135deg,rgba(10,28,47,.62),rgba(6,18,31,.48));color:var(--text);text-align:right;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.playlist-row:hover{transform:translateY(-1px);border-color:rgba(80,166,255,.24);background:linear-gradient(135deg,rgba(16,43,72,.72),rgba(7,23,40,.58));box-shadow:0 14px 34px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.035)}
.playlist-index{font-size:11px;color:#66829d;text-align:center;font-variant-numeric:tabular-nums}
.playlist-symbol{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:#7ec5ff;background:linear-gradient(145deg,rgba(47,128,255,.14),rgba(44,183,255,.07));border:1px solid rgba(99,177,246,.16)}
.playlist-symbol svg{width:20px;height:20px}
.playlist-copy{min-width:0;display:grid;gap:3px}
.playlist-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#eef7ff}
.playlist-copy small{font-size:9px;color:#7189a2}
.playlist-open{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#6f94b8;background:rgba(255,255,255,.025);transition:color .18s ease,background .18s ease,transform .18s ease}
.playlist-open svg{width:16px;height:16px}
.playlist-row:hover .playlist-open{color:#fff;background:rgba(47,128,255,.12);transform:translateX(-2px)}
@media(max-width:700px){.playlist-row{min-height:62px;grid-template-columns:34px 40px minmax(0,1fr) 32px;gap:9px;padding:8px 10px;border-radius:14px}.playlist-symbol{width:38px;height:38px;border-radius:12px}.playlist-copy strong{font-size:12px}.playlist-copy small{font-size:8px}.playlist-open{width:30px;height:30px}.playlist-index{font-size:10px}}


/* =========================================================
   Ravix Music 5.2 — Official brand / fixed utility footer / mobile drawer UX
   ========================================================= */
.brand{height:auto!important;min-height:68px!important;padding:3px 4px 15px!important;gap:12px!important;border-bottom:1px solid rgba(124,188,248,.07)}
.brand-logo-wrap,.desktop-head-logo,.ravix-main-mark{overflow:hidden!important;isolation:isolate!important}
.brand-logo-img,.desktop-logo-img,.ravix-main-logo-img{display:block!important;width:68%!important;height:68%!important;object-fit:contain!important;object-position:center!important;filter:drop-shadow(0 5px 12px rgba(0,0,0,.24))}
.brand-mark{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:14px!important;background:linear-gradient(145deg,#176fff,#44b6ff)!important;box-shadow:0 12px 30px rgba(29,119,255,.24),inset 0 1px rgba(255,255,255,.18)!important}
.brand-copy{min-width:0;line-height:1.15}.brand-copy b{font-size:14px!important;font-weight:900!important;letter-spacing:.05px}.brand-copy small{margin-top:5px!important;color:#6e91b2!important;font-size:8px!important;letter-spacing:0!important;text-transform:none!important}
.desktop-head-logo{background:linear-gradient(145deg,#176fff,#44b6ff)!important}
.desktop-logo-img{width:66%!important;height:66%!important}
.ravix-main-mark{background:linear-gradient(145deg,#176fff,#45b9ff)!important}
.ravix-main-logo-img{width:66%!important;height:66%!important}

.sidebar{display:flex!important;flex-direction:column!important;padding-bottom:16px!important}
.nav-list{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding-bottom:12px!important}
.sidebar-footer{position:relative!important;z-index:3!important;flex:0 0 auto!important;margin-top:auto!important;padding-top:14px!important;display:grid!important;gap:9px!important;background:linear-gradient(180deg,rgba(4,13,23,0),rgba(4,13,23,.94) 24%,rgba(4,13,23,.98))!important}
.sidebar-footer:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(112,187,255,.18),transparent)}
.ravix-main-link{min-height:60px!important;grid-template-columns:42px minmax(0,1fr) 22px!important;padding:9px 10px!important;border-radius:18px!important;background:radial-gradient(circle at 90% 0,rgba(61,161,255,.16),transparent 40%),linear-gradient(135deg,rgba(15,43,72,.78),rgba(7,22,38,.82))!important;border-color:rgba(111,186,255,.16)!important;box-shadow:inset 0 1px rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.14)!important}
.ravix-main-link:hover{transform:translateY(-1px)!important;border-color:rgba(92,181,255,.42)!important;background:radial-gradient(circle at 90% 0,rgba(61,161,255,.22),transparent 42%),linear-gradient(135deg,rgba(18,52,88,.88),rgba(8,27,46,.9))!important}
.ravix-main-mark{width:40px!important;height:40px!important;border-radius:13px!important}
.ravix-main-copy b{font-size:11px!important;color:#f0f8ff!important}.ravix-main-copy small{margin-top:4px!important;color:#6f9fc8!important;font-size:8px!important;letter-spacing:.35px!important;direction:ltr!important;text-align:right!important}
.backend-pill{position:static!important;min-height:58px!important;width:100%!important;display:grid!important;grid-template-columns:12px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;padding:10px 12px!important;border-radius:17px!important;background:linear-gradient(135deg,rgba(10,30,50,.78),rgba(6,19,33,.82))!important;border:1px solid rgba(111,186,255,.11)!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important}
.backend-pill>.api-status-dot,.backend-pill>span{width:7px!important;height:7px!important;align-self:center!important;background:#34d399!important;box-shadow:0 0 0 5px rgba(52,211,153,.07),0 0 16px rgba(52,211,153,.28)!important}
.backend-pill b{font-size:10px!important;color:#dbeeff!important;font-weight:800!important}.backend-pill small{display:block!important;margin-top:3px!important;color:#6e8ba6!important;font-size:8px!important;letter-spacing:0!important;direction:rtl!important}

@media(max-width:900px){
  .sidebar{height:100dvh!important;padding:16px 14px max(14px,env(safe-area-inset-bottom))!important;box-shadow:-28px 0 80px rgba(0,0,0,.48)!important;transition:transform .24s cubic-bezier(.22,.78,.24,1)!important}
  .sidebar .brand{min-height:62px!important;padding:2px 3px 12px!important}
  .sidebar-footer{padding-top:11px!important;background:linear-gradient(180deg,rgba(4,13,23,0),rgba(4,13,23,.96) 20%,rgba(4,13,23,.99))!important}
  .ravix-main-link{min-height:56px!important}.backend-pill{min-height:54px!important}
}


/* =========================================================
   Ravix Music 5.3 — Royal-blue brand + compact sidebar + image-free directories
   ========================================================= */
:root{--ravix-brand-blue:#3346d1;--ravix-brand-blue-bright:#3f55ff;--ravix-brand-glow:rgba(58,77,255,.34)}

/* Show the actual Ravix blue mark clearly instead of a white mark inside a blue tile. */
.brand-logo-wrap,.desktop-head-logo,.ravix-main-mark{
  background:linear-gradient(145deg,rgba(12,22,45,.96),rgba(8,17,34,.92))!important;
  border:1px solid rgba(75,94,255,.38)!important;
  box-shadow:0 0 0 1px rgba(72,91,255,.08),0 10px 30px rgba(0,0,0,.22),0 0 24px rgba(55,73,255,.13)!important;
}
.brand-logo-img,.desktop-logo-img,.ravix-main-logo-img{
  width:84%!important;height:84%!important;
  filter:saturate(1.28) contrast(1.08) brightness(1.06) drop-shadow(0 0 9px var(--ravix-brand-glow))!important;
}
.brand-mark{width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:12px!important}
.desktop-head-logo{border-radius:12px!important}
.desktop-logo-img{width:82%!important;height:82%!important}
.ravix-main-logo-img{width:82%!important;height:82%!important}

/* A tighter sidebar: no wasted vertical space, footer stays pinned and everything fits at once. */
.sidebar{padding:12px 12px 12px!important}
.brand{min-height:52px!important;height:52px!important;padding:0 2px 9px!important;gap:10px!important}
.brand-copy b{font-size:13px!important}.brand-copy small{margin-top:3px!important;font-size:7.5px!important;color:#7289a4!important}
.nav-list{gap:2px!important;margin-top:7px!important;padding-bottom:6px!important;align-content:start!important}
.nav-list button{min-height:40px!important;padding:8px 10px!important;border-radius:11px!important;gap:10px!important;font-size:12px!important}
.nav-list button svg{width:18px!important;height:18px!important}
.nav-sep{margin:5px 7px!important}
.sidebar-footer{gap:6px!important;padding-top:8px!important}
.ravix-main-link{min-height:48px!important;grid-template-columns:34px minmax(0,1fr) 18px!important;padding:6px 8px!important;border-radius:13px!important}
.ravix-main-mark{width:32px!important;height:32px!important;border-radius:10px!important}
.ravix-main-copy b{font-size:10px!important}.ravix-main-copy small{font-size:7px!important;margin-top:2px!important}
.ravix-main-external{width:14px!important;height:14px!important}
.backend-pill{min-height:46px!important;padding:7px 9px!important;border-radius:13px!important;gap:7px!important}
.backend-pill b{font-size:9px!important}.backend-pill small{font-size:7px!important;margin-top:2px!important}

/* Image-free Mix rows: same visual language as playlists, with direct play/download actions. */
.mix-list{display:grid;gap:8px;padding:4px 0}
.mix-row{width:100%;min-height:68px;display:grid;grid-template-columns:44px 46px minmax(0,1fr) 82px;align-items:center;gap:12px;padding:9px 13px;border:1px solid rgba(147,201,255,.09);border-radius:17px;background:linear-gradient(135deg,rgba(10,28,47,.62),rgba(6,18,31,.48));color:var(--text);cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.mix-row:hover{transform:translateY(-1px);border-color:rgba(75,94,255,.34);background:linear-gradient(135deg,rgba(16,43,72,.75),rgba(7,23,40,.6));box-shadow:0 14px 34px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.035)}
.mix-index{font-size:11px;color:#718ba7;text-align:center;font-variant-numeric:tabular-nums}
.mix-symbol{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:#9da9ff;background:linear-gradient(145deg,rgba(51,70,209,.2),rgba(63,85,255,.07));border:1px solid rgba(79,96,255,.22)}
.mix-symbol svg{width:20px;height:20px}.mix-copy{min-width:0;display:grid;gap:3px}.mix-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#f2f6ff}.mix-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;color:#7189a2}
.mix-actions{display:flex;justify-content:flex-end;gap:7px}.mix-actions .downloadbtn,.mix-playbtn{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#9eb9d6;background:rgba(255,255,255,.025);border:1px solid rgba(126,190,248,.1);cursor:pointer;transition:.18s}.mix-actions .downloadbtn:hover,.mix-playbtn:hover{color:#fff;background:linear-gradient(145deg,#293fd0,#3f55ff);border-color:transparent;box-shadow:0 8px 24px rgba(51,70,209,.24)}.mix-actions svg{width:16px;height:16px}

/* Home directories are compact two-column lists instead of oversized image cards. */
.home-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px!important;padding:2px 0!important}
.home-list-grid .playlist-row,.home-list-grid .mix-row{min-height:62px!important;border-radius:15px!important}
.home-list-grid .playlist-row{grid-template-columns:36px 40px minmax(0,1fr) 32px!important;padding:8px 10px!important}
.home-list-grid .playlist-symbol{width:38px!important;height:38px!important;border-radius:11px!important}
.home-list-grid .mix-row{grid-template-columns:36px 40px minmax(0,1fr) 74px!important;padding:8px 10px!important}
.home-list-grid .mix-symbol{width:38px!important;height:38px!important;border-radius:11px!important}

@media(max-width:900px){
  .sidebar{width:min(258px,86vw)!important;padding:11px 11px max(11px,env(safe-area-inset-bottom))!important}
  .sidebar .brand{min-height:50px!important;height:50px!important;padding-bottom:8px!important}
  .nav-list button{min-height:39px!important;padding:7px 9px!important}
  .sidebar-footer{padding-top:7px!important}.ravix-main-link{min-height:46px!important}.backend-pill{min-height:44px!important}
}
@media(max-width:700px){
  .home-list-grid{grid-template-columns:1fr!important}
  .mix-row{min-height:61px;grid-template-columns:34px 40px minmax(0,1fr) 70px;gap:9px;padding:8px 10px;border-radius:14px}
  .mix-symbol{width:38px;height:38px;border-radius:12px}.mix-copy strong{font-size:12px}.mix-copy small{font-size:8px}.mix-index{font-size:10px}.mix-actions .downloadbtn,.mix-playbtn{width:30px;height:30px;border-radius:10px}
}

/* =========================================================
   Ravix Music 5.4 — Ravix royal-blue system / balanced rail
   ========================================================= */
:root{
  --ravix-brand-blue:#2f41c4;
  --ravix-brand-blue-deep:#1d2fb2;
  --ravix-brand-blue-bright:#5069ff;
  --ravix-brand-glow:rgba(47,65,196,.34);
  --bg:#06132b;
  --bg2:#081a38;
  --panel:#0a1d3d;
  --panel2:#0c2449;
  --soft:#102c57;
  --line:#1a3b6e;
  --line2:#28518a;
  --text:#f5f8ff;
  --muted:#8ea7c9;
  --accent:#2f41c4;
  --accent2:#5069ff;
  --glass-bg:rgba(8,25,56,.70);
  --glass-bg-strong:rgba(9,29,65,.86);
  --glass-bg-soft:rgba(14,43,88,.52);
  --glass-line:rgba(94,125,240,.17);
  --glass-line-strong:rgba(92,123,244,.30);
}

/* Stronger branded dark-blue canvas — still dark enough for album artwork. */
html,body{background:#06132b!important}
body{background:
  radial-gradient(circle at 12% 0%,rgba(71,91,255,.22),transparent 31%),
  radial-gradient(circle at 78% -8%,rgba(47,65,196,.18),transparent 29%),
  linear-gradient(180deg,#091b3a 0%,#06142e 46%,#051127 100%)!important}
.ambient-layer{background:
  radial-gradient(circle at 88% -8%,rgba(63,84,241,.24),transparent 31%),
  radial-gradient(circle at 12% 58%,rgba(47,65,196,.12),transparent 34%),
  linear-gradient(180deg,#091b3a 0%,#06142e 56%,#051127 100%)!important}
.viewport{background:radial-gradient(circle at 82% 0%,rgba(73,94,255,.10),transparent 27%),linear-gradient(180deg,rgba(8,26,57,.20),rgba(5,17,39,.06))!important}

/* White logo tiles, blue official mark. */
.brand-logo-wrap,.desktop-head-logo,.ravix-main-mark{
  background:#fff!important;
  border:1px solid rgba(255,255,255,.94)!important;
  box-shadow:0 8px 26px rgba(3,12,35,.28),0 0 0 1px rgba(47,65,196,.16),0 0 22px rgba(47,65,196,.16)!important;
}
.brand-logo-img,.desktop-logo-img,.ravix-main-logo-img{
  width:78%!important;height:78%!important;
  filter:saturate(1.18) contrast(1.08) drop-shadow(0 2px 5px rgba(47,65,196,.16))!important;
}
.brand-mark{width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:13px!important}
.desktop-head-logo{width:43px!important;height:43px!important;flex-basis:43px!important;border-radius:13px!important}
.ravix-main-mark{width:37px!important;height:37px!important;border-radius:11px!important}

/* Balanced desktop sidebar: compact, not miniature. */
@media(min-width:1281px){:root{--side:236px!important}}
@media(min-width:901px) and (max-width:1280px){:root{--side:224px!important}}
.sidebar{
  padding:16px 14px 14px!important;
  background:linear-gradient(180deg,rgba(8,27,61,.97),rgba(5,18,42,.97) 68%,rgba(5,16,37,.99))!important;
  border-left:1px solid rgba(82,111,229,.19)!important;
  box-shadow:-18px 0 58px rgba(1,6,20,.22),inset 1px 0 rgba(255,255,255,.025)!important;
}
.brand{min-height:60px!important;height:60px!important;padding:1px 3px 12px!important;gap:11px!important}
.brand-copy b{font-size:14px!important;font-weight:900!important}.brand-copy small{margin-top:4px!important;font-size:8px!important;color:#8aa2c6!important}
.nav-list{gap:4px!important;margin-top:9px!important;padding-bottom:9px!important;align-content:start!important}
.nav-list button{min-height:46px!important;padding:10px 12px!important;border-radius:13px!important;gap:11px!important;font-size:13px!important}
.nav-list button svg{width:19px!important;height:19px!important}
.nav-sep{margin:7px 7px!important;background:rgba(92,121,227,.18)!important}
.nav-list button:hover{background:linear-gradient(100deg,rgba(80,101,255,.12),rgba(47,65,196,.055))!important;border-color:rgba(92,121,227,.13)!important}
.nav-list button.active{background:linear-gradient(100deg,rgba(59,78,219,.30),rgba(47,65,196,.11))!important;border-color:rgba(98,125,241,.25)!important;box-shadow:inset -3px 0 #536cff,0 9px 26px rgba(7,15,54,.16)!important}
.sidebar-footer{gap:8px!important;padding-top:11px!important;background:linear-gradient(180deg,rgba(5,18,42,0),rgba(5,18,42,.97) 23%,rgba(5,16,37,.99))!important}
.ravix-main-link{min-height:54px!important;grid-template-columns:39px minmax(0,1fr) 19px!important;padding:8px 9px!important;border-radius:15px!important;background:linear-gradient(135deg,rgba(22,51,111,.78),rgba(10,31,72,.88))!important;border-color:rgba(96,124,239,.19)!important}
.ravix-main-copy b{font-size:10.5px!important}.ravix-main-copy small{font-size:7.5px!important;margin-top:2px!important;color:#819ac0!important}
.backend-pill{min-height:52px!important;padding:8px 10px!important;border-radius:15px!important;background:linear-gradient(135deg,rgba(16,44,96,.76),rgba(9,29,68,.86))!important;border-color:rgba(96,124,239,.14)!important}
.backend-pill b{font-size:9.5px!important}.backend-pill small{font-size:7.5px!important;margin-top:2px!important;color:#819ac0!important}

/* Carry Ravix royal blue through the main chrome. */
.topbar{background:linear-gradient(180deg,rgba(9,29,65,.91),rgba(7,23,53,.86))!important;border-bottom-color:rgba(95,124,238,.18)!important}
.topbar .searchbar{background:linear-gradient(180deg,rgba(17,47,99,.76),rgba(10,33,75,.70))!important;border-color:rgba(96,126,241,.25)!important}
.topbar .searchbar:focus-within{border-color:rgba(91,117,255,.62)!important;box-shadow:0 0 0 3px rgba(47,65,196,.12),0 16px 38px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.06)!important}
.topbar .searchbar button,.primary,.main-play,.full-main-play,.top-ad-cta{background:linear-gradient(135deg,#2639b9,#526bff)!important;color:#fff!important;box-shadow:0 10px 28px rgba(47,65,196,.26)!important}
.topbar .top-actions{background:linear-gradient(180deg,rgba(16,44,94,.75),rgba(9,31,71,.70))!important;border-color:rgba(92,121,230,.18)!important}
.top-ad{background:radial-gradient(circle at 15% 0%,rgba(75,94,255,.19),transparent 37%),linear-gradient(105deg,rgba(17,49,101,.72),rgba(10,34,76,.65) 56%,rgba(8,28,64,.72))!important;border-color:rgba(95,124,238,.18)!important}
.hero{background:radial-gradient(circle at 10% 0%,rgba(79,99,255,.22),transparent 38%),linear-gradient(120deg,rgba(20,52,105,.78),rgba(10,35,78,.72) 48%,rgba(9,31,70,.76))!important;border-color:rgba(95,124,238,.18)!important}
.disc-center{background:linear-gradient(135deg,#273bc1,#526bff)!important;box-shadow:0 0 0 12px #0a1d3f,0 0 34px rgba(47,65,196,.35)!important}
.tracklist,.playlist-row,.mix-row,.detail-hero,.artist-hero,.browse-title,.catalog-status,.error-card,.empty{border-color:rgba(93,121,229,.15)!important}
.tracklist{background:linear-gradient(180deg,rgba(12,37,80,.55),rgba(7,26,59,.48))!important}
.track:hover{background:linear-gradient(90deg,rgba(75,95,244,.10),rgba(47,65,196,.045))!important}
.track.playing{background:linear-gradient(90deg,rgba(58,77,218,.24),rgba(47,65,196,.045))!important}
.track:hover .playbtn,.track.playing .playbtn{background:linear-gradient(145deg,#283bbd,#526bff)!important}
.tabbar button.active{background:linear-gradient(135deg,#283abd,#526bff)!important}
.playlist-row,.mix-row{background:linear-gradient(135deg,rgba(14,43,91,.72),rgba(8,29,67,.64))!important}
.playlist-row:hover,.mix-row:hover{background:linear-gradient(135deg,rgba(22,57,116,.82),rgba(11,36,81,.72))!important;border-color:rgba(88,115,238,.30)!important}
.playlist-symbol,.mix-symbol{color:#aab5ff!important;background:linear-gradient(145deg,rgba(47,65,196,.30),rgba(80,105,255,.10))!important;border-color:rgba(93,119,238,.26)!important}
.player-shell{background:linear-gradient(180deg,rgba(12,39,84,.90),rgba(7,27,63,.88))!important;border-color:rgba(95,124,238,.20)!important}
.drawer,.command-box,.full-player-stage{background:linear-gradient(180deg,rgba(10,34,76,.94),rgba(6,23,54,.94))!important;border-color:rgba(95,124,238,.18)!important}

/* Mobile keeps a comfortable navigation scale too. */
@media(max-width:900px){
  .sidebar{width:min(276px,88vw)!important;padding:15px 13px max(14px,env(safe-area-inset-bottom))!important;background:linear-gradient(180deg,rgba(8,27,61,.99),rgba(5,17,40,.99))!important}
  .sidebar .brand{min-height:58px!important;height:58px!important;padding-bottom:11px!important}
  .nav-list{gap:4px!important;margin-top:8px!important}
  .nav-list button{min-height:45px!important;padding:9px 11px!important;font-size:13px!important}
  .sidebar-footer{padding-top:10px!important;gap:8px!important}
  .ravix-main-link{min-height:52px!important}.backend-pill{min-height:50px!important}
  .topbar{background:linear-gradient(180deg,rgba(9,29,65,.96),rgba(7,23,53,.94))!important}
  .mobile-nav{background:rgba(6,22,51,.94)!important;border-top-color:rgba(95,124,238,.18)!important}
}

/* =========================================================
   Ravix Music 5.5 — low-glare navy / image-free mixes & playlists
   ========================================================= */
:root{
  --bg:#070d16;
  --bg2:#0a121e;
  --panel:#0b1624;
  --panel2:#0d1a2b;
  --soft:#102036;
  --line:#1a2a3d;
  --line2:#243a52;
  --text:#edf2f8;
  --muted:#8292a7;
  --accent:#3146bd;
  --accent2:#4056cc;
  --ravix-brand-blue:#3146bd;
  --ravix-brand-blue-deep:#2739a4;
  --ravix-brand-blue-bright:#4056cc;
  --ravix-brand-glow:rgba(49,70,189,.18);
  --glass-bg:rgba(9,20,34,.74);
  --glass-bg-strong:rgba(10,23,39,.90);
  --glass-bg-soft:rgba(13,29,48,.60);
  --glass-line:rgba(117,143,176,.11);
  --glass-line-strong:rgba(91,119,158,.18);
}
html,body{background:#070d16!important}
body{background:linear-gradient(180deg,#0a121e 0%,#08101b 42%,#070d16 100%)!important}
.ambient-layer{background:radial-gradient(circle at 83% -12%,rgba(49,70,189,.10),transparent 34%),radial-gradient(circle at 12% 72%,rgba(27,54,86,.12),transparent 30%),linear-gradient(180deg,#0a121e 0%,#08101b 58%,#070d16 100%)!important}
.viewport{background:linear-gradient(180deg,rgba(10,20,34,.08),rgba(7,13,22,.02))!important}
.sidebar{background:linear-gradient(180deg,rgba(9,20,34,.985),rgba(7,15,27,.99))!important;border-left-color:rgba(105,130,164,.13)!important;box-shadow:-14px 0 44px rgba(0,0,0,.18)!important}
.topbar{background:rgba(9,20,34,.94)!important;border-bottom-color:rgba(105,130,164,.12)!important}
.topbar .searchbar,.topbar .top-actions{background:rgba(13,29,48,.78)!important;border-color:rgba(104,132,168,.14)!important}
.topbar .searchbar:focus-within{border-color:rgba(78,99,196,.42)!important;box-shadow:0 0 0 3px rgba(49,70,189,.08)!important}
.top-ad{background:linear-gradient(105deg,rgba(15,32,53,.82),rgba(10,23,39,.78))!important;border-color:rgba(106,132,164,.12)!important}
.hero{background:radial-gradient(circle at 10% 0%,rgba(49,70,189,.09),transparent 38%),linear-gradient(120deg,rgba(15,32,53,.88),rgba(9,22,38,.86))!important;border-color:rgba(106,132,164,.13)!important}
.browse-title,.detail-hero,.artist-hero,.catalog-status,.error-card,.empty{background:linear-gradient(135deg,rgba(13,29,48,.82),rgba(9,21,36,.78))!important;border-color:rgba(105,131,163,.12)!important}
.tracklist{background:rgba(11,24,40,.62)!important;border-color:rgba(105,131,163,.11)!important}
.track{border-bottom-color:rgba(100,125,156,.08)!important}
.track:hover{background:rgba(49,70,189,.055)!important}.track.playing{background:rgba(49,70,189,.10)!important}
.playlist-row,.mix-row{background:rgba(12,27,45,.74)!important;border-color:rgba(105,131,163,.10)!important;box-shadow:none!important}
.playlist-row:hover,.mix-row:hover{background:rgba(16,34,55,.86)!important;border-color:rgba(76,96,181,.23)!important;box-shadow:none!important}
.playlist-symbol,.mix-symbol,.playlist-detail-symbol,.queue-no-art{color:#a8b3e7!important;background:rgba(49,70,189,.11)!important;border-color:rgba(76,96,181,.18)!important}
.primary,.main-play,.full-main-play,.top-ad-cta,.topbar .searchbar button{background:linear-gradient(135deg,#2d41b2,#3a50c3)!important;box-shadow:0 7px 20px rgba(31,47,130,.18)!important}
.tabbar button.active{background:#3045b9!important;box-shadow:none!important}
.nav-list button:hover{background:rgba(49,70,189,.055)!important;border-color:rgba(95,119,151,.10)!important}
.nav-list button.active{background:rgba(49,70,189,.14)!important;border-color:rgba(76,96,181,.20)!important;box-shadow:inset -3px 0 #4056cc!important}
.ravix-main-link,.backend-pill{background:rgba(13,29,48,.78)!important;border-color:rgba(102,128,161,.12)!important}
.sidebar-footer{background:linear-gradient(180deg,rgba(7,15,27,0),rgba(7,15,27,.98) 24%)!important}
.player-shell{background:rgba(10,23,39,.94)!important;border-color:rgba(105,131,163,.13)!important;box-shadow:0 -10px 34px rgba(0,0,0,.16)!important}
.drawer,.command-box,.full-player-stage{background:linear-gradient(180deg,rgba(10,23,39,.98),rgba(7,16,28,.98))!important;border-color:rgba(105,131,163,.13)!important}

/* Playlist detail: deliberately no cover, no follower metric. */
.playlist-detail-hero{grid-template-columns:82px minmax(0,1fr)!important;min-height:176px!important}
.playlist-detail-symbol{width:68px;height:68px;border:1px solid;border-radius:20px;display:grid;place-items:center}
.playlist-detail-symbol svg{width:30px;height:30px}

/* Mix/remix and playlist surfaces must never show their own artwork. */
.artist-mix-list .track-cover,.artist-playlist-list .cover{display:none!important}
.artist-playlist-list,.artist-mix-list{width:100%}
.queue-no-art{width:42px;height:42px;border:1px solid;border-radius:12px;display:grid;place-items:center;flex:0 0 42px}
.queue-no-art svg{width:18px;height:18px}
#nowImg.no-art{opacity:0!important;visibility:hidden!important}

/* Keep the official logo crisp without making the whole UI bright. */
.brand-logo-wrap,.desktop-head-logo,.ravix-main-mark{background:#fff!important;border-color:rgba(255,255,255,.94)!important;box-shadow:0 5px 18px rgba(0,0,0,.20),0 0 0 1px rgba(49,70,189,.11)!important}
.brand-logo-img,.desktop-logo-img,.ravix-main-logo-img{filter:saturate(1.12) contrast(1.06)!important}

@media(max-width:700px){
  .playlist-detail-hero{grid-template-columns:58px minmax(0,1fr)!important;min-height:150px!important}
  .playlist-detail-symbol{width:52px;height:52px;border-radius:16px}.playlist-detail-symbol svg{width:24px;height:24px}
}

/* =========================================================
   Ravix Music 5.6 — duplicate-free desktop header + Light/Dark
   ========================================================= */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* Desktop header: the sidebar already carries the brand, so keep the toolbar clean. */
.desktop-head-context{display:none!important}
.theme-toggle{display:grid!important;place-items:center!important}
.theme-toggle svg{width:18px!important;height:18px!important}
@media(min-width:901px){
  .topbar{
    grid-template-columns:auto minmax(36px,1fr) minmax(360px,560px)!important;
    grid-template-areas:"actions spacer search"!important;
  }
  .topbar .searchbar{justify-self:end!important;width:min(100%,560px)!important;max-width:560px!important}
}
@media(min-width:901px) and (max-width:1199px){
  .topbar{grid-template-columns:auto minmax(20px,1fr) minmax(300px,470px)!important;grid-template-areas:"actions spacer search"!important}
}
@media(min-width:901px) and (max-width:1035px){
  .topbar{grid-template-columns:auto minmax(8px,1fr) minmax(275px,410px)!important;grid-template-areas:"actions spacer search"!important}
}
@media(max-width:900px){
  .topbar .top-actions .theme-toggle{display:grid!important}
  .topbar .top-actions .icon-btn:not(#themeToggle){display:none!important}
  .topbar .top-actions{display:flex!important;width:44px!important;min-width:44px!important;padding:3px!important;justify-content:center!important}
  .topbar .top-actions-sep,.topbar .history-actions{display:none!important}
}

/* Light theme — clean white canvas, Ravix blue retained only as the accent. */
html[data-theme="light"]{
  --bg:#f4f7fb;
  --bg2:#edf2f8;
  --panel:#ffffff;
  --panel2:#f8fafd;
  --soft:#edf3fb;
  --line:#dce5f0;
  --line2:#c8d6e7;
  --text:#10213a;
  --muted:#708198;
  --accent:#3146bd;
  --accent2:#4056cc;
  --glass-bg:rgba(255,255,255,.86);
  --glass-bg-strong:rgba(255,255,255,.96);
  --glass-bg-soft:rgba(247,250,254,.92);
  --glass-line:rgba(38,65,105,.10);
  --glass-line-strong:rgba(49,70,189,.20);
  --glass-highlight:rgba(255,255,255,.88);
  --shadow:0 20px 55px rgba(31,54,83,.09);
}
html[data-theme="light"],html[data-theme="light"] body{background:#f4f7fb!important;color:#10213a!important}
html[data-theme="light"] body{background:linear-gradient(180deg,#f8fbff 0%,#f4f7fb 48%,#eef3f9 100%)!important}
html[data-theme="light"] .ambient-layer{background:radial-gradient(circle at 80% -10%,rgba(49,70,189,.08),transparent 32%),radial-gradient(circle at 8% 68%,rgba(70,139,214,.07),transparent 31%),linear-gradient(180deg,#f8fbff 0%,#f4f7fb 58%,#eef3f9 100%)!important}
html[data-theme="light"] .viewport{background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(239,244,250,.20))!important}

html[data-theme="light"] .sidebar{background:linear-gradient(180deg,#ffffff,#f7f9fc 72%,#f2f6fb)!important;border-left-color:#dce5f0!important;box-shadow:-12px 0 38px rgba(26,48,78,.07)!important}
html[data-theme="light"] .brand-copy b,html[data-theme="light"] .nav-list button.active,html[data-theme="light"] .ravix-main-copy b,html[data-theme="light"] .backend-pill b{color:#14253e!important}
html[data-theme="light"] .brand-copy small,html[data-theme="light"] .ravix-main-copy small,html[data-theme="light"] .backend-pill small{color:#71829a!important}
html[data-theme="light"] .nav-list button{color:#687b94!important}
html[data-theme="light"] .nav-list button:hover{color:#1a2c48!important;background:#edf2fb!important;border-color:#dfe7f1!important}
html[data-theme="light"] .nav-list button.active{background:linear-gradient(90deg,rgba(49,70,189,.13),rgba(49,70,189,.045))!important;border-color:rgba(49,70,189,.17)!important;box-shadow:inset -3px 0 #4056cc!important}
html[data-theme="light"] .nav-sep{background:#e2e9f2!important}
html[data-theme="light"] .sidebar-footer{background:linear-gradient(180deg,rgba(247,249,252,0),rgba(247,249,252,.98) 24%)!important}
html[data-theme="light"] .ravix-main-link,html[data-theme="light"] .backend-pill{background:#ffffff!important;border-color:#dce5f0!important;box-shadow:0 8px 20px rgba(31,54,83,.05)!important}

html[data-theme="light"] .topbar{background:rgba(255,255,255,.94)!important;border-bottom-color:#dce5f0!important;box-shadow:0 9px 28px rgba(31,54,83,.06)!important}
html[data-theme="light"] .topbar:before,html[data-theme="light"] .topbar:after{opacity:.45!important}
html[data-theme="light"] .topbar .searchbar,html[data-theme="light"] .topbar .top-actions{background:#f7f9fc!important;border-color:#d9e3ef!important;box-shadow:inset 0 1px #fff,0 8px 22px rgba(31,54,83,.05)!important}
html[data-theme="light"] .topbar .searchbar:focus-within{background:#fff!important;border-color:rgba(49,70,189,.34)!important;box-shadow:0 0 0 3px rgba(49,70,189,.07)!important}
html[data-theme="light"] .topbar .searchbar input{color:#172a45!important}
html[data-theme="light"] .topbar .searchbar input::placeholder{color:#8998aa!important}
html[data-theme="light"] .topbar .searchbar kbd{background:#edf2f7!important;border-color:#dce5f0!important;color:#78899f!important}
html[data-theme="light"] .topbar .top-actions .icon-btn{color:#61748e!important}
html[data-theme="light"] .topbar .top-actions .icon-btn:hover{color:#263a58!important;background:#e9eef8!important;border-color:#d8e1ed!important}

html[data-theme="light"] .top-ad{background:linear-gradient(105deg,#ffffff,#f5f8fc)!important;border-color:#dce5f0!important;box-shadow:0 12px 28px rgba(31,54,83,.05)!important}
html[data-theme="light"] .top-ad-copy strong{color:#1a2c48!important}
html[data-theme="light"] .top-ad-copy small{color:#78899e!important}
html[data-theme="light"] .top-ad-perks span{background:#f1f5fa!important;border-color:#e0e7f0!important;color:#657890!important}

html[data-theme="light"] .hero{background:radial-gradient(circle at 10% 0%,rgba(49,70,189,.07),transparent 40%),linear-gradient(120deg,#ffffff,#f5f8fc)!important;border-color:#dce5f0!important;box-shadow:0 18px 42px rgba(31,54,83,.06)!important}
html[data-theme="light"] .hero h1,html[data-theme="light"] .section h2,html[data-theme="light"] .browse-title h1,html[data-theme="light"] .artist-info h1,html[data-theme="light"] .detail-info h1{color:#10213a!important}
html[data-theme="light"] .hero p,html[data-theme="light"] .section-sub,html[data-theme="light"] .browse-title p{color:#728399!important}
html[data-theme="light"] .disc{border-color:#cbd9e9!important;box-shadow:inset 0 0 0 12px #eef3f9!important}
html[data-theme="light"] .disc-center{box-shadow:0 0 0 12px #eef3f9,0 0 28px rgba(49,70,189,.18)!important}

html[data-theme="light"] .browse-title,html[data-theme="light"] .detail-hero,html[data-theme="light"] .artist-hero,html[data-theme="light"] .catalog-status,html[data-theme="light"] .error-card,html[data-theme="light"] .empty,html[data-theme="light"] .full-tools-row,html[data-theme="light"] .up-next{background:#ffffff!important;border-color:#dce5f0!important;box-shadow:0 14px 34px rgba(31,54,83,.05)!important}
html[data-theme="light"] .tracklist{background:#ffffff!important;border-color:#dce5f0!important;box-shadow:0 14px 34px rgba(31,54,83,.045)!important}
html[data-theme="light"] .track{border-bottom-color:#edf1f6!important;color:#20334f!important}
html[data-theme="light"] .track:hover{background:#f5f7fc!important}
html[data-theme="light"] .track.playing{background:rgba(49,70,189,.075)!important}
html[data-theme="light"] .track .title,html[data-theme="light"] .mix-copy strong,html[data-theme="light"] .playlist-copy strong{color:#192c48!important}
html[data-theme="light"] .track .sub,html[data-theme="light"] .track .date,html[data-theme="light"] .track .dur,html[data-theme="light"] .mix-copy small,html[data-theme="light"] .playlist-copy small{color:#78899f!important}
html[data-theme="light"] .track .playbtn,html[data-theme="light"] .downloadbtn,html[data-theme="light"] .mix-playbtn{background:#f1f5fa!important;border-color:#dce5f0!important;color:#5f728b!important}
html[data-theme="light"] .playlist-row,html[data-theme="light"] .mix-row{background:#ffffff!important;border-color:#dce5f0!important;box-shadow:0 8px 20px rgba(31,54,83,.035)!important}
html[data-theme="light"] .playlist-row:hover,html[data-theme="light"] .mix-row:hover{background:#f7f9fd!important;border-color:rgba(49,70,189,.18)!important}
html[data-theme="light"] .playlist-symbol,html[data-theme="light"] .mix-symbol,html[data-theme="light"] .playlist-detail-symbol,html[data-theme="light"] .queue-no-art{color:#3146bd!important;background:rgba(49,70,189,.075)!important;border-color:rgba(49,70,189,.15)!important}

html[data-theme="light"] .tabbar button,html[data-theme="light"] .ghost,html[data-theme="light"] .round-action{background:#f2f5f9!important;border-color:#dce5f0!important;color:#566b86!important}
html[data-theme="light"] .tabbar button:hover,html[data-theme="light"] .ghost:hover,html[data-theme="light"] .round-action:hover{background:#e9eef7!important;color:#1b2f4c!important}
html[data-theme="light"] .tabbar button.active{background:#3146bd!important;color:#fff!important;border-color:#3146bd!important}
html[data-theme="light"] .primary,html[data-theme="light"] .main-play,html[data-theme="light"] .full-main-play,html[data-theme="light"] .top-ad-cta,html[data-theme="light"] .topbar .searchbar button{color:#fff!important}

html[data-theme="light"] .player-shell{background:rgba(255,255,255,.96)!important;border-color:#d8e2ee!important;box-shadow:0 -12px 34px rgba(31,54,83,.09)!important}
html[data-theme="light"] .now-meta b{color:#152742!important}html[data-theme="light"] .now-meta small{color:#728399!important}
html[data-theme="light"] .drawer,html[data-theme="light"] .command-box,html[data-theme="light"] .full-player-stage{background:#ffffff!important;border-color:#dce5f0!important;color:#10213a!important}
html[data-theme="light"] .shade{background:rgba(32,47,67,.22)!important}
html[data-theme="light"] .command{background:rgba(40,55,74,.22)!important}
html[data-theme="light"] .command-head{background:#f6f8fb!important;border-color:#dce5f0!important}
html[data-theme="light"] .command-head input{color:#152742!important}
html[data-theme="light"] .quick,html[data-theme="light"] .queue-row{border-color:#edf1f6!important}
html[data-theme="light"] .quick:hover,html[data-theme="light"] .queue-row:hover{background:#f5f7fb!important}
html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,.96)!important;border-top-color:#dce5f0!important;box-shadow:0 -8px 28px rgba(31,54,83,.06)!important}
html[data-theme="light"] .mobile-nav button{color:#71839b!important}html[data-theme="light"] .mobile-nav button.active{color:#3146bd!important}

/* Keep album/track imagery untouched in both themes; only UI chrome changes. */
html[data-theme="light"] .brand-logo-wrap,html[data-theme="light"] .ravix-main-mark{background:#fff!important;border-color:#e2e8f0!important;box-shadow:0 5px 16px rgba(31,54,83,.08),0 0 0 1px rgba(49,70,189,.08)!important}

/* =========================================================
   Ravix Music 5.7 — brand-blue Light Mode + unified theme UI
   ========================================================= */
:root{
  --ravix-blue:#263bc4;
  --ravix-blue-2:#3452e6;
  --ravix-blue-3:#5c72ee;
}

/* Desktop: search + official mark + theme are one compact visual group. */
.search-side-tools{display:none;align-items:center;gap:8px;direction:ltr;position:relative;z-index:3}
.header-brand-mark{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;
  overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.88);
  box-shadow:0 8px 22px rgba(0,0,0,.16),0 0 0 1px rgba(38,59,196,.12)
}
.header-brand-mark img{width:72%;height:72%;object-fit:contain;display:block;filter:saturate(1.14) contrast(1.06)}
.search-side-tools .theme-toggle{width:44px;height:44px;display:grid!important;place-items:center;border-radius:14px}
.search-side-tools .theme-toggle svg{width:18px;height:18px}

@media(min-width:901px){
  .topbar{
    grid-template-columns:auto minmax(20px,1fr) minmax(340px,560px) auto!important;
    grid-template-areas:"actions spacer search searchtools"!important;
    column-gap:10px!important;
  }
  .topbar .searchbar{grid-area:search!important;justify-self:end!important;width:min(100%,560px)!important;max-width:560px!important}
  .topbar .search-side-tools{grid-area:searchtools;display:flex!important;justify-self:end}
  .topbar .top-actions{grid-area:actions!important}
}
@media(min-width:901px) and (max-width:1199px){
  .topbar{grid-template-columns:auto minmax(8px,1fr) minmax(280px,440px) auto!important}
  .header-brand-mark,.search-side-tools .theme-toggle{width:42px;height:42px;flex-basis:42px}
}
@media(max-width:900px){
  .search-side-tools{display:none!important}
  .topbar .top-actions{display:none!important}
  .mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .mobile-nav .mobile-theme-toggle{display:grid!important;place-items:center;align-content:center;gap:3px}
  .mobile-nav .mobile-theme-toggle svg{width:19px;height:19px}
  .mobile-nav .mobile-theme-toggle span{display:block}
}

.artist-filter-input{
  min-width:220px;max-width:340px;width:min(34vw,340px);background:rgba(13,29,48,.78);color:var(--text);
  border:1px solid var(--line);border-radius:13px;padding:11px 13px;outline:0;transition:.18s
}
.artist-filter-input:focus{border-color:rgba(72,96,210,.45);box-shadow:0 0 0 3px rgba(49,70,189,.08)}
.artist-filter-input::placeholder{color:var(--muted)}
@media(max-width:700px){.section-head:has(.artist-filter-input){align-items:stretch;flex-direction:column}.artist-filter-input{width:100%;max-width:none}}

/* ----- Light palette: white canvas + strong Ravix blue, without glare ----- */
html[data-theme="light"]{
  --bg:#f5f7fc!important;
  --bg2:#eef2fa!important;
  --panel:#ffffff!important;
  --panel2:#f8faff!important;
  --soft:#edf1fb!important;
  --line:#dbe2f1!important;
  --line2:#c9d3e8!important;
  --text:#111d39!important;
  --muted:#687894!important;
  --accent:#263bc4!important;
  --accent2:#3452e6!important;
  --shadow:0 18px 48px rgba(26,43,90,.09)!important;
}
html[data-theme="light"],html[data-theme="light"] body{background:#f5f7fc!important;color:#111d39!important}
html[data-theme="light"] body{background:linear-gradient(180deg,#fbfcff 0%,#f6f8fd 46%,#eef2fa 100%)!important}
html[data-theme="light"] .ambient-layer{
  background:radial-gradient(circle at 84% -12%,rgba(38,59,196,.10),transparent 31%),radial-gradient(circle at 7% 65%,rgba(52,82,230,.055),transparent 32%),linear-gradient(180deg,#fbfcff,#f2f5fb)!important
}
html[data-theme="light"] .app-shell{background:transparent!important}
html[data-theme="light"] .viewport{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(239,243,250,.18))!important;color:#111d39!important}
html[data-theme="light"] ::selection{background:rgba(38,59,196,.18);color:#14204a}

/* Sidebar and brand */
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,#ffffff 0%,#f9faff 72%,#f4f6fc 100%)!important;border-left:1px solid #dde4f2!important;box-shadow:-12px 0 38px rgba(25,42,84,.055)!important}
html[data-theme="light"] .brand{border-bottom-color:#e5eaf4!important}
html[data-theme="light"] .brand-copy b,html[data-theme="light"] .ravix-main-copy b,html[data-theme="light"] .backend-pill b{color:#172342!important}
html[data-theme="light"] .brand-copy small,html[data-theme="light"] .ravix-main-copy small,html[data-theme="light"] .backend-pill small{color:#75829b!important}
html[data-theme="light"] .nav-list button{color:#687794!important}
html[data-theme="light"] .nav-list button svg{color:#8290aa!important}
html[data-theme="light"] .nav-list button:hover{background:#f0f3fb!important;color:#1c2b53!important;border-color:#e0e5f1!important}
html[data-theme="light"] .nav-list button:hover svg{color:#263bc4!important}
html[data-theme="light"] .nav-list button.active{background:linear-gradient(90deg,rgba(38,59,196,.14),rgba(38,59,196,.045))!important;color:#17245c!important;border-color:rgba(38,59,196,.15)!important;box-shadow:inset -3px 0 #263bc4!important}
html[data-theme="light"] .nav-list button.active svg{color:#263bc4!important}
html[data-theme="light"] .nav-sep{background:#e3e8f2!important}
html[data-theme="light"] .sidebar-footer{background:linear-gradient(180deg,rgba(248,250,255,0),rgba(248,250,255,.98) 24%)!important}
html[data-theme="light"] .ravix-main-link,html[data-theme="light"] .backend-pill{background:#fff!important;border-color:#dde4f2!important;box-shadow:0 8px 20px rgba(25,42,84,.045)!important;color:#172342!important}
html[data-theme="light"] .api-status-dot{box-shadow:0 0 0 4px rgba(52,211,153,.10)!important}

/* Header/search/brand tools */
html[data-theme="light"] .topbar{background:rgba(255,255,255,.94)!important;border-bottom-color:#dde4f2!important;box-shadow:0 8px 26px rgba(25,42,84,.055)!important}
html[data-theme="light"] .topbar:before{background:radial-gradient(circle at 52% -120%,rgba(38,59,196,.085),transparent 50%)!important}
html[data-theme="light"] .topbar:after{background:linear-gradient(90deg,transparent,rgba(38,59,196,.14),transparent)!important}
html[data-theme="light"] .searchbar,html[data-theme="light"] .top-actions,html[data-theme="light"] .search-side-tools .theme-toggle{background:#f7f9fe!important;border-color:#dbe2f1!important;box-shadow:inset 0 1px #fff,0 7px 18px rgba(25,42,84,.045)!important}
html[data-theme="light"] .searchbar:focus-within{background:#fff!important;border-color:rgba(38,59,196,.36)!important;box-shadow:0 0 0 3px rgba(38,59,196,.07),0 8px 22px rgba(25,42,84,.05)!important}
html[data-theme="light"] .searchbar input{color:#172342!important}
html[data-theme="light"] .searchbar input::placeholder{color:#8995aa!important}
html[data-theme="light"] .searchbar kbd{background:#edf1f8!important;border-color:#dbe2ee!important;color:#73819a!important}
html[data-theme="light"] .searchbar button,html[data-theme="light"] .primary,html[data-theme="light"] .main-play,html[data-theme="light"] .full-main-play,html[data-theme="light"] .top-ad-cta{background:linear-gradient(135deg,#263bc4,#3452e6)!important;color:#fff!important;box-shadow:0 8px 22px rgba(38,59,196,.20)!important}
html[data-theme="light"] .icon-btn,html[data-theme="light"] .search-side-tools .theme-toggle{color:#556987!important}
html[data-theme="light"] .icon-btn:hover,html[data-theme="light"] .search-side-tools .theme-toggle:hover{background:#edf1fb!important;color:#263bc4!important;border-color:#cad5eb!important}
html[data-theme="light"] .header-brand-mark{background:#fff!important;border-color:#e0e5ef!important;box-shadow:0 6px 18px rgba(26,42,84,.08),0 0 0 1px rgba(38,59,196,.08)!important}

/* Advertising bar */
html[data-theme="light"] .top-ad{background:linear-gradient(105deg,#ffffff,#f7f9fe)!important;border-color:#dde4f2!important;box-shadow:0 10px 28px rgba(25,42,84,.045)!important}
html[data-theme="light"] .top-ad-copy strong{color:#172342!important}
html[data-theme="light"] .top-ad-copy small{color:#75839b!important}
html[data-theme="light"] .top-ad-perks span{background:#f0f3fa!important;border-color:#e1e6f0!important;color:#667794!important}
html[data-theme="light"] .top-ad-badge{background:linear-gradient(145deg,#263bc4,#4162ef)!important;color:#fff!important}

/* Home hero */
html[data-theme="light"] .hero{background:radial-gradient(circle at 8% 8%,rgba(38,59,196,.10),transparent 35%),linear-gradient(120deg,#ffffff 0%,#f7f9ff 55%,#f1f4fc 100%)!important;border-color:#dce3f1!important;box-shadow:0 18px 44px rgba(25,42,84,.065)!important}
html[data-theme="light"] .hero:before{background:radial-gradient(circle,rgba(38,59,196,.13),transparent 64%)!important}
html[data-theme="light"] .hero h1{color:#101b37!important}
html[data-theme="light"] .hero p{color:#65748e!important}
html[data-theme="light"] .eyebrow{color:#263bc4!important}
html[data-theme="light"] .disc{background:repeating-radial-gradient(circle at center,#12213a 0 4px,#081426 5px 8px)!important;border-color:#cbd5e8!important;box-shadow:0 20px 50px rgba(30,46,86,.16),inset 0 0 0 2px rgba(255,255,255,.06)!important}
html[data-theme="light"] .disc-center{background:linear-gradient(135deg,#263bc4,#3452e6)!important;color:#fff!important;box-shadow:0 0 0 12px #f3f5fb,0 0 28px rgba(38,59,196,.18)!important}

/* Global headings/copy: fix white-on-white remnants from the dark theme. */
html[data-theme="light"] .section,html[data-theme="light"] .section-head,html[data-theme="light"] .tab-panel{color:#111d39!important}
html[data-theme="light"] .section-head h2,html[data-theme="light"] .section h2,html[data-theme="light"] .browse-title h1,html[data-theme="light"] .detail-hero h1,html[data-theme="light"] .catalog-status b,html[data-theme="light"] .error-card b,html[data-theme="light"] .empty b{color:#15213e!important}
html[data-theme="light"] .section-head p,html[data-theme="light"] .section-sub,html[data-theme="light"] .browse-title p,html[data-theme="light"] .catalog-status small{color:#6d7c95!important}
html[data-theme="light"] .section-head .more,html[data-theme="light"] .more{color:#263bc4!important}
html[data-theme="light"] .section-head .more:hover,html[data-theme="light"] .more:hover{color:#1c2da7!important}
html[data-theme="light"] .title{color:#172342!important}
html[data-theme="light"] .sub{color:#75839a!important}

/* Album/track cards and artists */
html[data-theme="light"] .media-card,html[data-theme="light"] .artist-card{color:#172342!important}
html[data-theme="light"] .media-card .title,html[data-theme="light"] .artist-card strong{color:#172342!important}
html[data-theme="light"] .media-card .sub,html[data-theme="light"] .artist-card small{color:#74829a!important}
html[data-theme="light"] .cover{background:#edf1f7!important;border-color:#d7dfed!important;box-shadow:0 8px 22px rgba(24,41,82,.05)!important}
html[data-theme="light"] .artist-avatar{background:#edf1f7!important;border-color:#d4deed!important;box-shadow:0 8px 20px rgba(24,41,82,.05)!important}
html[data-theme="light"] .play-float{background:#263bc4!important;color:#fff!important;box-shadow:0 8px 24px rgba(38,59,196,.22)!important}
html[data-theme="light"] .artist-filter-input{background:#fff!important;color:#172342!important;border-color:#d7e0ee!important;box-shadow:0 6px 16px rgba(26,43,83,.035)!important}
html[data-theme="light"] .artist-filter-input:focus{border-color:rgba(38,59,196,.38)!important;box-shadow:0 0 0 3px rgba(38,59,196,.07)!important}
html[data-theme="light"] .artist-filter-input::placeholder{color:#8a96aa!important}

/* Artist hero: hero artwork remains dark, so its copy must remain light. */
html[data-theme="light"] .artist-hero{border-color:#dbe2ef!important;box-shadow:0 15px 36px rgba(25,42,84,.07)!important}
html[data-theme="light"] .artist-hero.has-wall{background:#081321!important}
html[data-theme="light"] .artist-hero.has-wall .artist-info h1{color:#fff!important;text-shadow:0 2px 16px rgba(0,0,0,.35)!important}
html[data-theme="light"] .artist-hero.has-wall .artist-info .sub{color:#d5deeb!important}
html[data-theme="light"] .artist-hero.has-wall .eyebrow{color:#87a4ff!important}
html[data-theme="light"] .artist-hero.has-wall .ghost{background:rgba(255,255,255,.92)!important;border-color:rgba(255,255,255,.95)!important;color:#18284a!important}
html[data-theme="light"] .artist-hero.no-wall{background:linear-gradient(135deg,#fff,#f3f6fc)!important}
html[data-theme="light"] .artist-hero.no-wall .artist-info h1{color:#15213e!important}
html[data-theme="light"] .artist-hero.no-wall .artist-info .sub{color:#71809a!important}
html[data-theme="light"] .big-avatar{border-color:rgba(255,255,255,.70)!important;box-shadow:0 9px 26px rgba(11,24,55,.15)!important}

/* Browse/detail/status surfaces */
html[data-theme="light"] .browse-title,html[data-theme="light"] .detail-hero,html[data-theme="light"] .catalog-status,html[data-theme="light"] .error-card,html[data-theme="light"] .empty,html[data-theme="light"] .full-tools-row,html[data-theme="light"] .up-next{background:#fff!important;border-color:#dce3f0!important;box-shadow:0 12px 32px rgba(25,42,84,.05)!important;color:#172342!important}
html[data-theme="light"] .browse-icon,html[data-theme="light"] .detail-symbol,html[data-theme="light"] .playlist-detail-symbol{background:rgba(38,59,196,.075)!important;border-color:rgba(38,59,196,.14)!important;color:#263bc4!important}
html[data-theme="light"] .stats span{background:#f0f3fa!important;border-color:#dce3ef!important;color:#5e6f8b!important}
html[data-theme="light"] .detail-hero p{color:#6e7d96!important}
html[data-theme="light"] .loading,html[data-theme="light"] .page-loader,html[data-theme="light"] .infinite-status{color:#6f7e96!important}
html[data-theme="light"] .loading span,html[data-theme="light"] .page-loader span,html[data-theme="light"] .infinite-status>span{border-color:#d5ddeb!important;border-top-color:#263bc4!important}

/* Tabs/buttons */
html[data-theme="light"] .tabbar button,html[data-theme="light"] .ghost,html[data-theme="light"] .round-action,html[data-theme="light"] .chip-btn{background:#f2f4fa!important;border-color:#dbe2ef!important;color:#536581!important}
html[data-theme="light"] .tabbar button:hover,html[data-theme="light"] .ghost:hover,html[data-theme="light"] .round-action:hover,html[data-theme="light"] .chip-btn:hover{background:#e9edf8!important;color:#263bc4!important;border-color:#cad4e9!important}
html[data-theme="light"] .tabbar button.active{background:linear-gradient(135deg,#263bc4,#3452e6)!important;color:#fff!important;border-color:#263bc4!important;box-shadow:0 7px 20px rgba(38,59,196,.16)!important}

/* Tracks */
html[data-theme="light"] .tracklist{background:#fff!important;border-color:#dce3ef!important;box-shadow:0 12px 30px rgba(25,42,84,.04)!important}
html[data-theme="light"] .track{color:#172342!important;border-bottom-color:#edf0f6!important}
html[data-theme="light"] .track:hover{background:#f6f8fd!important}
html[data-theme="light"] .track.playing{background:linear-gradient(90deg,rgba(38,59,196,.10),rgba(38,59,196,.025))!important;box-shadow:inset -3px 0 #263bc4!important}
html[data-theme="light"] .track .title{color:#172342!important}
html[data-theme="light"] .track .sub{color:#6f7f98!important}
html[data-theme="light"] .track .num,html[data-theme="light"] .track .date,html[data-theme="light"] .track .dur{color:#8190a6!important}
html[data-theme="light"] .track-cover{background:#edf1f7!important}
html[data-theme="light"] .track .playbtn,html[data-theme="light"] .downloadbtn,html[data-theme="light"] .mix-playbtn{background:#f0f3fa!important;border-color:#d9e1ef!important;color:#566b89!important}
html[data-theme="light"] .track .playbtn:hover,html[data-theme="light"] .downloadbtn:hover,html[data-theme="light"] .mix-playbtn:hover,html[data-theme="light"] .track.playing .playbtn{background:#263bc4!important;border-color:#263bc4!important;color:#fff!important}

/* Mixes / playlists */
html[data-theme="light"] .playlist-row,html[data-theme="light"] .mix-row{background:#fff!important;border-color:#dce3ef!important;box-shadow:0 7px 18px rgba(25,42,84,.035)!important;color:#172342!important}
html[data-theme="light"] .playlist-row:hover,html[data-theme="light"] .mix-row:hover{background:#f7f9fd!important;border-color:rgba(38,59,196,.20)!important;box-shadow:0 9px 22px rgba(25,42,84,.05)!important}
html[data-theme="light"] .playlist-copy strong,html[data-theme="light"] .mix-copy strong{color:#172342!important}
html[data-theme="light"] .playlist-copy small,html[data-theme="light"] .mix-copy small,html[data-theme="light"] .playlist-index,html[data-theme="light"] .mix-index{color:#77879e!important}
html[data-theme="light"] .playlist-symbol,html[data-theme="light"] .mix-symbol,html[data-theme="light"] .queue-no-art{color:#263bc4!important;background:rgba(38,59,196,.07)!important;border-color:rgba(38,59,196,.14)!important}
html[data-theme="light"] .playlist-open{background:#f0f3fa!important;color:#6b7d98!important}
html[data-theme="light"] .playlist-row:hover .playlist-open{background:rgba(38,59,196,.09)!important;color:#263bc4!important}

/* Player */
html[data-theme="light"] .player-shell{background:rgba(255,255,255,.965)!important;border-color:#d7e0ed!important;box-shadow:0 -12px 34px rgba(25,42,84,.09)!important;color:#172342!important}
html[data-theme="light"] .now-meta b{color:#172342!important}
html[data-theme="light"] .now-meta small,html[data-theme="light"] .player-time{color:#71819a!important}
html[data-theme="light"] .player-icon,html[data-theme="light"] .player-shell select{background:#f1f4fa!important;border-color:#dce3ef!important;color:#5c6e8b!important}
html[data-theme="light"] .player-icon:hover{background:#e9edf8!important;color:#263bc4!important}
html[data-theme="light"] input[type="range"]{accent-color:#263bc4!important}

/* Drawers / search command / full player */
html[data-theme="light"] .drawer,html[data-theme="light"] .command-box,html[data-theme="light"] .full-player-stage{background:#fff!important;border-color:#dce3ef!important;color:#172342!important}
html[data-theme="light"] .drawer-head,html[data-theme="light"] .full-player-head{border-color:#e7ebf3!important}
html[data-theme="light"] .drawer-head b,html[data-theme="light"] .full-player-head b,html[data-theme="light"] .full-meta h2,html[data-theme="light"] .up-next-head b{color:#172342!important}
html[data-theme="light"] .drawer-head small,html[data-theme="light"] .full-meta p,html[data-theme="light"] .up-next-head small{color:#71819a!important}
html[data-theme="light"] .shade{background:rgba(20,31,55,.22)!important}
html[data-theme="light"] .command{background:rgba(27,38,62,.20)!important}
html[data-theme="light"] .command-head{background:#f7f9fd!important;border-color:#dce3ef!important;color:#60718d!important}
html[data-theme="light"] .command-head input{color:#172342!important}
html[data-theme="light"] .quick,html[data-theme="light"] .queue-row,html[data-theme="light"] .full-queue-row{color:#172342!important;border-color:#edf0f6!important}
html[data-theme="light"] .quick:hover,html[data-theme="light"] .queue-row:hover,html[data-theme="light"] .full-queue-row:hover{background:#f6f8fd!important}
html[data-theme="light"] .quick .kind{color:#263bc4!important;background:rgba(38,59,196,.07)!important}
html[data-theme="light"] .full-cover-wrap{background:#eef2f8!important;border-color:#dce3ef!important}

/* Toast */
html[data-theme="light"] .toast{background:#172342!important;color:#fff!important;border-color:#263bc4!important;box-shadow:0 14px 38px rgba(25,42,84,.18)!important}

/* Mobile Light Mode has its own clean header/sidebar/navigation. */
@media(max-width:900px){
  html[data-theme="light"] .topbar{background:rgba(255,255,255,.96)!important;border-bottom-color:#dde4f1!important}
  html[data-theme="light"] .topbar .searchbar{background:#f7f9fd!important;border-color:#dbe2ef!important}
  html[data-theme="light"] .sidebar{background:#fff!important;border-left-color:#dde4f1!important}
  html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,.97)!important;border-top-color:#dbe2ef!important;box-shadow:0 -8px 24px rgba(25,42,84,.07)!important}
  html[data-theme="light"] .mobile-nav button{color:#73829a!important}
  html[data-theme="light"] .mobile-nav button svg{color:#7c8ba2!important}
  html[data-theme="light"] .mobile-nav button.active{color:#263bc4!important}
  html[data-theme="light"] .mobile-nav button.active svg,html[data-theme="light"] .mobile-nav .mobile-theme-toggle svg{color:#263bc4!important}
}

/* =========================================================
   Ravix Music 5.8 — responsive header theme controls
   Desktop: theme only beside search. Mobile: theme + logo beside search.
   ========================================================= */
.mobile-header-tools{display:none}

@media(min-width:901px){
  .search-side-tools.desktop-theme-tools{display:flex!important;align-items:center!important;justify-self:end!important}
  .search-side-tools.desktop-theme-tools .theme-toggle{display:grid!important}
  .header-brand-mark{display:none!important}
}

@media(max-width:900px){
  .topbar{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    grid-template-areas:"menu search mobiletools"!important;
    align-items:center!important;
    gap:8px!important;
    padding:9px 10px!important;
    direction:rtl!important;
    overflow:visible!important;
  }
  .topbar>#menuBtn{grid-area:menu!important;display:grid!important;place-items:center!important}
  .topbar>.searchbar{grid-area:search!important;min-width:0!important;width:100%!important;margin:0!important}
  .topbar>.search-side-tools{display:none!important}
  .topbar>.top-actions{display:none!important}
  .mobile-header-tools{
    grid-area:mobiletools;
    display:flex!important;
    align-items:center;
    gap:6px;
    direction:ltr;
    min-width:max-content;
  }
  .mobile-header-theme,.mobile-header-brand{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    border-radius:13px!important;
  }
  .mobile-header-theme{
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    color:#b8c6d9!important;
    background:rgba(13,29,48,.72)!important;
    border:1px solid rgba(117,143,176,.16)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
  }
  .mobile-header-theme svg{width:19px!important;height:19px!important}
  .mobile-header-brand{
    display:grid!important;
    place-items:center!important;
    overflow:hidden;
    background:#fff!important;
    border:1px solid rgba(255,255,255,.88)!important;
    box-shadow:0 7px 20px rgba(0,0,0,.18),0 0 0 1px rgba(38,59,196,.13)!important;
  }
  .mobile-header-brand img{
    width:72%;height:72%;display:block;object-fit:contain;
    filter:saturate(1.16) contrast(1.08);
  }
  .mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .mobile-nav .mobile-theme-toggle{display:none!important}

  html[data-theme="light"] .mobile-header-theme{
    background:#f7f9fe!important;
    color:#263bc4!important;
    border-color:#d5deed!important;
    box-shadow:0 5px 14px rgba(25,42,84,.055),inset 0 1px #fff!important;
  }
  html[data-theme="light"] .mobile-header-brand{
    background:#fff!important;
    border-color:#dce3f0!important;
    box-shadow:0 5px 14px rgba(25,42,84,.07),0 0 0 1px rgba(38,59,196,.07)!important;
  }
}

@media(max-width:560px){
  .topbar{grid-template-columns:42px minmax(0,1fr) auto!important;gap:7px!important;padding-inline:8px!important}
  .mobile-header-tools{gap:5px}
  .mobile-header-theme,.mobile-header-brand{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:12px!important}
  .topbar .searchbar{height:46px!important;border-radius:14px!important}
  .topbar .searchbar button{width:40px!important;min-width:40px!important;padding:0!important;display:grid!important;place-items:center!important}
  .topbar .searchbar button span{display:none!important}
  .topbar .searchbar button svg{width:19px!important;height:19px!important}
  .topbar .searchbar input{padding-inline:9px!important;font-size:12px!important}
}

@media(max-width:390px){
  .topbar{grid-template-columns:40px minmax(0,1fr) auto!important;gap:5px!important;padding-inline:6px!important}
  .topbar>#menuBtn{width:40px!important;height:40px!important;border-radius:12px!important}
  .mobile-header-tools{gap:4px}
  .mobile-header-theme,.mobile-header-brand{width:35px!important;height:35px!important;flex-basis:35px!important;border-radius:11px!important}
  .topbar .searchbar input{font-size:11px!important;padding-inline:7px!important}
}


/* =========================================================
   Ravix Music 5.9 — final header placement, adaptive logos,
   centered icon controls, and sidebar advertising slot.
   ========================================================= */

/* Theme-aware brand artwork: white logo on dark, blue logo on light. */
.theme-logo-blue{display:none!important}
.theme-logo-white{display:block!important}
html[data-theme="light"] .theme-logo-blue{display:block!important}
html[data-theme="light"] .theme-logo-white{display:none!important}

/* Sidebar main brand: dark mode is a quiet navy tile with the white mark. */
html[data-theme="dark"] .brand-logo-wrap{
  background:linear-gradient(145deg,#102447,#0a1831)!important;
  border-color:rgba(116,148,215,.20)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.045)!important;
}
html[data-theme="light"] .brand-logo-wrap{
  background:#fff!important;border-color:#dce3f0!important;
  box-shadow:0 5px 16px rgba(25,42,84,.07),0 0 0 1px rgba(38,59,196,.07)!important;
}
.brand-logo-wrap .brand-logo-img{position:absolute!important;inset:16%!important;width:68%!important;height:68%!important;object-fit:contain!important}
.brand-logo-wrap{position:relative!important}

/* All icon-only round/square controls are optically centered. */
.icon-btn,.player-icon,.round-action,.track .playbtn,.track .downloadbtn,.mix-playbtn,.mix-actions .downloadbtn{
  display:grid!important;place-items:center!important;align-content:center!important;justify-content:center!important;
  padding:0!important;line-height:0!important;text-indent:0!important;
}
.icon-btn>svg,.player-icon>svg,.round-action>svg,.track .playbtn>svg,.track .downloadbtn>svg,.mix-playbtn>svg,.mix-actions .downloadbtn>svg{
  display:block!important;margin:auto!important;position:static!important;transform:none!important;vertical-align:middle!important;
}
.track-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important}

/* Replace API-status tile with a neutral advertising placeholder. */
.sidebar-ad-card{
  min-height:52px;width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:9px;
  padding:7px 9px;border-radius:15px;border:1px solid rgba(105,131,165,.13);
  background:rgba(13,29,48,.78);box-shadow:inset 0 1px rgba(255,255,255,.025);
  color:#dce9f7;
}
.sidebar-ad-mark{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;
  border:1px solid rgba(255,255,255,.92);box-shadow:0 5px 15px rgba(0,0,0,.16);
}
.sidebar-ad-mark small{color:#263bc4!important;font-family:Arial,sans-serif;font-size:7px!important;font-weight:900;letter-spacing:.8px;line-height:1}
.sidebar-ad-copy{min-width:0}.sidebar-ad-copy b{display:block;font-size:9.5px;font-weight:900;white-space:nowrap}.sidebar-ad-copy small{display:block;margin-top:3px;color:#7d92aa;font-size:7.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-ad-icon{width:14px;height:14px;color:#7893ad}
html[data-theme="light"] .sidebar-ad-card{background:#fff;border-color:#dde4f2;box-shadow:0 8px 20px rgba(25,42,84,.045);color:#172342}
html[data-theme="light"] .sidebar-ad-mark{border-color:#e0e6f1;box-shadow:0 4px 12px rgba(25,42,84,.06)}
html[data-theme="light"] .sidebar-ad-copy small{color:#7b879d}
html[data-theme="light"] .sidebar-ad-icon{color:#5167c9}

/* Desktop: theme control returns to the original top-left quick-tools cluster. */
.search-side-tools.desktop-theme-tools{display:none!important}
@media(min-width:901px){
  .topbar>.top-actions{
    grid-area:actions!important;display:flex!important;align-items:center!important;justify-self:start!important;
    width:auto!important;min-width:0!important;
  }
  .topbar>.top-actions .theme-toggle{display:grid!important}
  .topbar>.mobile-header-theme,.topbar>.mobile-header-brand{display:none!important}
}

/* Mobile: theme on the far left, search in the middle, logo immediately on the RIGHT of search, menu at far right. */
@media(max-width:900px){
  .topbar{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 40px 42px!important;
    grid-template-areas:"theme search brand menu"!important;
    direction:ltr!important;align-items:center!important;gap:7px!important;padding:9px 9px!important;overflow:visible!important;
  }
  .topbar>#menuBtn{grid-area:menu!important;display:grid!important;place-items:center!important;margin:0!important}
  .topbar>.searchbar{grid-area:search!important;width:100%!important;min-width:0!important;margin:0!important;direction:rtl!important}
  .topbar>.top-actions,.topbar>.search-side-tools{display:none!important}
  .topbar>.mobile-header-theme{grid-area:theme!important;display:grid!important;width:40px!important;height:40px!important;min-width:40px!important;margin:0!important;border-radius:13px!important}
  .topbar>.mobile-header-brand{
    grid-area:brand!important;display:grid!important;place-items:center!important;position:relative!important;
    width:40px!important;height:40px!important;min-width:40px!important;margin:0!important;border-radius:13px!important;overflow:hidden!important;
  }
  html[data-theme="dark"] .mobile-header-brand{
    background:linear-gradient(145deg,#102447,#0a1831)!important;border:1px solid rgba(116,148,215,.20)!important;
    box-shadow:0 6px 18px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.04)!important;
  }
  html[data-theme="light"] .mobile-header-brand{
    background:#fff!important;border:1px solid #dce3f0!important;box-shadow:0 5px 14px rgba(25,42,84,.07),0 0 0 1px rgba(38,59,196,.06)!important;
  }
  .mobile-header-brand img{position:absolute!important;inset:14%!important;width:72%!important;height:72%!important;object-fit:contain!important;filter:none!important}
  .mobile-header-theme{color:#b9c7db!important;background:rgba(13,29,48,.72)!important;border:1px solid rgba(117,143,176,.16)!important;box-shadow:inset 0 1px rgba(255,255,255,.035)!important}
  html[data-theme="light"] .mobile-header-theme{background:#f7f9fe!important;color:#263bc4!important;border-color:#d5deed!important;box-shadow:0 5px 14px rgba(25,42,84,.055),inset 0 1px #fff!important}
  .mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .mobile-nav .mobile-theme-toggle{display:none!important}
}
@media(max-width:560px){
  .topbar{grid-template-columns:38px minmax(0,1fr) 38px 40px!important;gap:6px!important;padding-inline:7px!important}
  .topbar>.mobile-header-theme,.topbar>.mobile-header-brand{width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important}
  .topbar>#menuBtn{width:40px!important;height:40px!important;border-radius:12px!important}
  .topbar .searchbar{height:46px!important;border-radius:14px!important}
  .topbar .searchbar button{width:40px!important;min-width:40px!important;padding:0!important;display:grid!important;place-items:center!important}
  .topbar .searchbar button span{display:none!important}
}
@media(max-width:390px){
  .topbar{grid-template-columns:35px minmax(0,1fr) 35px 38px!important;gap:5px!important;padding-inline:6px!important}
  .topbar>.mobile-header-theme,.topbar>.mobile-header-brand{width:35px!important;height:35px!important;min-width:35px!important;border-radius:11px!important}
  .topbar>#menuBtn{width:38px!important;height:38px!important;border-radius:11px!important}
  .topbar .searchbar input{font-size:11px!important;padding-inline:6px!important}
}


/* =========================================================
   Ravix Music 5.9.1 — mobile header geometry + light drawer
   ========================================================= */
@media(max-width:900px){
  .topbar{
    --rvx-mobile-head:44px;
    grid-template-columns:var(--rvx-mobile-head) minmax(0,1fr) var(--rvx-mobile-head) var(--rvx-mobile-head)!important;
    grid-template-areas:"theme search brand menu"!important;
    align-items:center!important;
    gap:7px!important;
    padding:9px!important;
  }

  /* All four visible header controls share one exact outer height. */
  .topbar>.mobile-header-theme,
  .topbar>.mobile-header-brand,
  .topbar>#menuBtn,
  .topbar>.searchbar{
    width:auto!important;
    height:var(--rvx-mobile-head)!important;
    min-height:var(--rvx-mobile-head)!important;
    max-height:var(--rvx-mobile-head)!important;
    margin:0!important;
    box-sizing:border-box!important;
    border-radius:13px!important;
    align-self:center!important;
  }
  .topbar>.mobile-header-theme,
  .topbar>.mobile-header-brand,
  .topbar>#menuBtn{
    width:var(--rvx-mobile-head)!important;
    min-width:var(--rvx-mobile-head)!important;
    max-width:var(--rvx-mobile-head)!important;
    flex:0 0 var(--rvx-mobile-head)!important;
  }

  /* Search becomes a true same-height control rather than a taller wrapper. */
  .topbar>.searchbar{
    padding:0!important;
    overflow:hidden!important;
    grid-template-columns:var(--rvx-mobile-head) minmax(0,1fr)!important;
  }
  .topbar>.searchbar kbd{display:none!important}
  .topbar>.searchbar button{
    width:var(--rvx-mobile-head)!important;
    min-width:var(--rvx-mobile-head)!important;
    height:100%!important;
    min-height:100%!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    align-self:stretch!important;
  }
  .topbar>.searchbar button svg{width:19px!important;height:19px!important;margin:auto!important}
  .topbar>.searchbar input{
    height:100%!important;
    min-height:0!important;
    padding-inline:11px!important;
    line-height:normal!important;
    align-self:stretch!important;
  }
  .topbar>.mobile-header-theme svg,
  .topbar>#menuBtn svg{width:20px!important;height:20px!important;margin:auto!important}
  .topbar>.mobile-header-brand img{inset:13%!important;width:74%!important;height:74%!important}

  /* Light mobile hamburger trigger: never inherit a dark tile. */
  html[data-theme="light"] .topbar>#menuBtn{
    background:#ffffff!important;
    color:#263bc4!important;
    border:1px solid #d7e0ee!important;
    box-shadow:0 5px 14px rgba(25,42,84,.055),inset 0 1px #fff!important;
  }
  html[data-theme="light"] .topbar>#menuBtn:hover,
  html[data-theme="light"] .topbar>#menuBtn[aria-expanded="true"]{
    background:#eef2ff!important;
    color:#2035bd!important;
    border-color:#c9d4ef!important;
    box-shadow:0 0 0 3px rgba(38,59,196,.055),0 6px 16px rgba(25,42,84,.06)!important;
  }

  /* The hamburger drawer itself is fully light in light mode. */
  html[data-theme="light"] .sidebar,
  html[data-theme="light"] .sidebar.open{
    background:linear-gradient(180deg,#ffffff 0%,#fbfcff 72%,#f5f7fc 100%)!important;
    color:#172342!important;
    border-left:1px solid #dce4f1!important;
    box-shadow:-24px 0 70px rgba(25,42,84,.12)!important;
  }
  html[data-theme="light"] .sidebar .brand-copy b{color:#172342!important}
  html[data-theme="light"] .sidebar .brand-copy small{color:#7a879d!important}
  html[data-theme="light"] .sidebar .nav-list button{
    background:transparent!important;
    color:#65758f!important;
    border:1px solid transparent!important;
  }
  html[data-theme="light"] .sidebar .nav-list button:hover{
    background:#f3f5fb!important;
    color:#263bc4!important;
    border-color:#e4e9f3!important;
  }
  html[data-theme="light"] .sidebar .nav-list button.active{
    background:linear-gradient(90deg,rgba(38,59,196,.11),rgba(38,59,196,.045))!important;
    color:#263bc4!important;
    border-color:rgba(38,59,196,.12)!important;
    box-shadow:inset -2px 0 #263bc4!important;
  }
  html[data-theme="light"] .sidebar .nav-list button svg{color:currentColor!important}
  html[data-theme="light"] .sidebar .nav-sep{background:#e2e7f0!important}
  html[data-theme="light"] .sidebar-footer{
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.98) 24%)!important;
  }
  html[data-theme="light"] .shade.open{background:rgba(20,31,55,.20)!important}
}

@media(max-width:390px){
  .topbar{--rvx-mobile-head:42px;gap:5px!important;padding-inline:6px!important}
  .topbar>.mobile-header-theme,
  .topbar>.mobile-header-brand,
  .topbar>#menuBtn,
  .topbar>.searchbar{border-radius:12px!important}
  .topbar>.searchbar button{border-radius:11px!important}
  .topbar>.searchbar input{font-size:10.8px!important;padding-inline:8px!important}
}