/* OKEMIX PUBLIC UI — scoped. Admin remains on legacy styles. */
body.okemixPublic{
  margin:0;
  background:#07090D;
  color:#FFFFFF;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body.okemixPublic *{box-sizing:border-box}
body.okemixPublic a{color:inherit;text-decoration:none}
body.okemixPublic button,body.okemixPublic input,body.okemixPublic select,body.okemixPublic textarea{font:inherit}
body.okemixPublic button,body.okemixPublic a{ -webkit-tap-highlight-color:transparent }
body.okemixPublic svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Layout shell */
body.okemixPublic .sideNav.publicSidebar{
  position:fixed!important;inset:0 auto 0 0!important;width:258px!important;height:100vh!important;
  display:flex!important;flex-direction:column!important;background:#07090D!important;border-right:1px solid #16181F!important;
  padding:0 18px 18px!important;z-index:80!important;overflow:hidden!important;transform:none!important;
}
body.okemixPublic .publicBrand{height:88px;display:flex;align-items:center;padding:10px 4px 6px;flex:0 0 auto}
body.okemixPublic .publicBrand img{width:208px;height:69px;object-fit:contain;object-position:left center;display:block}
body.okemixPublic .publicSideMenu{display:flex;flex-direction:column;gap:4px;overflow-y:auto;padding:9px 0 18px;scrollbar-width:none;min-height:0}
body.okemixPublic .publicSideMenu::-webkit-scrollbar{display:none}
body.okemixPublic .publicSideItem{
  appearance:none;border:0;background:transparent;color:#FFFFFF;width:100%;height:44px;border-radius:9px;
  display:flex;align-items:center;gap:16px;padding:0 16px;font-size:15px;text-align:left;cursor:pointer;position:relative;
}
body.okemixPublic .publicSideItem i{width:24px;height:24px;display:grid;place-items:center;color:#FFFFFF;flex:0 0 24px}
body.okemixPublic .publicSideItem i svg{width:22px;height:22px}
body.okemixPublic .publicSideItem:hover{background:#16181F}
body.okemixPublic .publicSideItem.active{background:#16181F!important;color:#00D4FF!important;box-shadow:none!important;text-shadow:none!important}
body.okemixPublic .publicSideItem.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0;background:#00D4FF;box-shadow:none}
body.okemixPublic .publicSideItem.active i{color:#00D4FF}
body.okemixPublic .publicSideDivider{height:1px;background:#16181F;margin:10px 4px 12px}
body.okemixPublic .publicLibraryGroup{display:flex;flex-direction:column;gap:2px}
body.okemixPublic .publicLibraryToggle{position:relative}
body.okemixPublic .publicLibraryToggle.active::before{display:none}
body.okemixPublic .publicLibraryCaret{margin-left:auto;font-size:18px;line-height:1;color:#FFFFFF;transition:transform .18s ease;font-weight:500}
body.okemixPublic .publicLibraryGroup.open .publicLibraryCaret{transform:rotate(180deg);color:#00D4FF}
body.okemixPublic .publicLibrarySubmenu{max-height:0;overflow:hidden;opacity:0;padding-left:14px;transition:max-height .18s ease,opacity .18s ease}
body.okemixPublic .publicLibraryGroup.open .publicLibrarySubmenu{max-height:126px;opacity:1}
body.okemixPublic .publicLibraryChild{height:38px;font-size:13px;padding-left:20px;gap:13px}
body.okemixPublic .publicLibraryChild i{width:20px;height:20px;flex-basis:20px}
body.okemixPublic .publicLibraryChild i svg{width:18px;height:18px}
body.okemixPublic .publicLibraryChild.active::before{width:3px}
body.okemixPublic .publicSideBottom{margin-top:auto;padding:10px 4px 0;flex:0 0 auto;background:#07090D}
body.okemixPublic .publicPremiumCard{border:1px solid #FF6B3D;border-radius:12px;padding:17px;background:#07090D}
body.okemixPublic .publicPremiumCard.active{border-color:#00D4FF}
body.okemixPublic .publicPremiumTitle{display:flex;align-items:center;gap:10px;color:#FF6B3D;font-weight:800;font-size:14px}
body.okemixPublic .publicPremiumCard.active .publicPremiumTitle{color:#00D4FF}
body.okemixPublic .publicPremiumTitle svg{width:23px;height:23px}
body.okemixPublic .publicPremiumCard p{font-size:12.5px;line-height:1.65;margin:14px 0 18px;color:#FFFFFF}
body.okemixPublic .publicPremiumCard button{width:100%;height:39px;border:0;border-radius:9px;background:#FF6B3D;color:#07090D;font-weight:900;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
body.okemixPublic .publicPremiumCard.active button{background:#00D4FF}
body.okemixPublic .publicPremiumCard button span{font-size:22px;line-height:1}

body.okemixPublic .topbar.publicTopbar{
  position:fixed!important;left:258px!important;right:0!important;top:0!important;height:88px!important;background:#07090D!important;
  border-bottom:1px solid #16181F!important;display:grid!important;grid-template-columns:minmax(300px,496px) 1fr!important;align-items:center!important;
  padding:0 24px 0 166px!important;z-index:70!important;gap:24px!important;
}
body.okemixPublic .publicMobileMenu{display:none}
body.okemixPublic .searchBox.publicSearch{height:44px;max-width:496px;width:100%;border-radius:17px;border:1px solid #16181F;background:#16181F;color:#FFFFFF;display:flex;align-items:center;padding:0 16px;gap:12px;box-shadow:none}
body.okemixPublic .publicSearch i{color:#FFFFFF;width:20px;height:20px;display:grid;place-items:center}
body.okemixPublic .publicSearch svg{width:20px;height:20px}
body.okemixPublic .publicSearch input{width:100%;border:0;outline:0;background:transparent!important;color:#FFFFFF!important;font-size:14px;padding:0!important;height:auto!important}
body.okemixPublic .publicSearch input::placeholder{color:#FFFFFF;opacity:1}
body.okemixPublic .publicTopActions{justify-self:end;display:flex;align-items:center;gap:18px;min-width:0}
body.okemixPublic .publicUpgrade{height:43px;padding:0 23px;border-radius:23px;border:1px solid #FF6B3D;background:#07090D;color:#FFFFFF;font-size:12px;font-weight:800;display:flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap}
body.okemixPublic .publicUpgrade svg{width:20px;height:20px;color:#00D4FF}
body.okemixPublic .publicUpgrade:hover{background:#16181F}
body.okemixPublic .publicUpgrade.active{border-color:#00D4FF;color:#00D4FF}
body.okemixPublic .publicAdminShortcut{margin:0 0 10px;height:42px;border:1px solid #00D4FF;border-radius:10px;background:#07090D;color:#00D4FF;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:900;cursor:pointer}
body.okemixPublic .publicAdminShortcut:hover{background:#16181F}
body.okemixPublic .publicAdminShortcut span{font-size:16px}
body.okemixPublic .publicBell{position:relative;width:38px;height:42px;border:0;background:transparent;color:#FFFFFF;display:grid;place-items:center;cursor:pointer}
body.okemixPublic .publicBell svg{width:26px;height:26px}
body.okemixPublic .publicBell b{position:absolute;right:4px;top:4px;width:9px;height:9px;border-radius:50%;background:#FF6B3D;box-shadow:0 0 8px #FF6B3D}
body.okemixPublic .publicProfileWrap{position:relative}
body.okemixPublic .publicProfileChip{border:0;background:transparent;color:#FFFFFF;display:grid;grid-template-columns:44px minmax(96px,auto) 20px;align-items:center;gap:10px;cursor:pointer;padding:0}
body.okemixPublic .publicProfileChip>img,body.okemixPublic .publicProfileChip>span:first-child{width:42px;height:42px;border-radius:50%;border:1px solid #00D4FF;object-fit:cover;display:grid;place-items:center;background:#16181F;color:#00D4FF;font-weight:900}
body.okemixPublic .publicProfileChip>span:nth-child(2){display:flex;flex-direction:column;text-align:left;min-width:0}
body.okemixPublic .publicProfileChip b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.okemixPublic .publicProfileChip small{font-size:11px;color:#FFFFFF;margin-top:2px}
body.okemixPublic .publicProfileChip>i{font-style:normal;font-size:18px}
body.okemixPublic .publicLogin{border:1px solid #00D4FF;border-radius:22px;padding:10px 20px;font-weight:800;font-size:12px}
body.okemixPublic .userQuickMenu{position:absolute;right:0;top:52px;width:210px;background:#16181F;border:1px solid #00D4FF;border-radius:12px;padding:7px;display:none;z-index:200;box-shadow:0 14px 40px #07090D}
body.okemixPublic .userQuickMenu.open{display:grid}
body.okemixPublic .userQuickMenu a,body.okemixPublic .userQuickMenu button{border:0;background:transparent;color:#FFFFFF;padding:10px 12px;border-radius:8px;text-align:left;cursor:pointer;font-size:13px}
body.okemixPublic .userQuickMenu a:hover,body.okemixPublic .userQuickMenu button:hover{background:#07090D;color:#00D4FF}
body.okemixPublic .globalSearchResults{position:fixed!important;left:424px!important;top:72px!important;width:496px!important;max-height:68vh!important;background:#16181F!important;border:1px solid #00D4FF!important;border-radius:14px!important;z-index:150!important;box-shadow:0 18px 60px #07090D!important}

/* Public page canvas */
body.okemixPublic .appPage{margin-left:258px!important;padding:108px 24px 128px!important;min-height:100vh!important;width:auto!important;max-width:none!important;background:#07090D!important;color:#FFFFFF!important}
body.okemixPublic .publicHome{padding-top:88px!important;padding-left:22px!important;padding-right:22px!important}

/* Home hero — compact, audio-reactive */
body.okemixPublic .publicHero{height:278px;border:1px solid #16181F;border-radius:12px;background:#07090D;display:grid;grid-template-columns:minmax(340px,39%) minmax(0,61%);position:relative;overflow:hidden;margin:0 0 20px}
body.okemixPublic .publicHeroCopy{padding:26px 0 24px 42px;position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
body.okemixPublic .publicHeroCopy>span{color:#00D4FF;font-size:12px;font-weight:900;letter-spacing:3px;margin-bottom:12px}
body.okemixPublic .publicHeroCopy h1{font-size:36px;line-height:1.05;margin:0;color:#FFFFFF;font-weight:900;letter-spacing:-1px;white-space:nowrap}
body.okemixPublic .publicHeroCopy h1 b{color:#00D4FF;font-weight:900}
body.okemixPublic .publicHeroCopy p{font-size:14px;line-height:1.45;color:#FFFFFF;margin:12px 0 16px}
body.okemixPublic .publicHeroActions{display:flex;gap:20px;align-items:center}
body.okemixPublic .publicPrimaryCta,body.okemixPublic .publicPremiumCta{height:43px;border-radius:12px;background:#07090D;font-size:12px;font-weight:900;display:flex;align-items:center;gap:10px;padding:0 20px;cursor:pointer}
body.okemixPublic .publicPrimaryCta{border:2px solid #00D4FF;color:#00D4FF;box-shadow:0 0 10px #00D4FF}
body.okemixPublic .publicPremiumCta{border:1px solid #FF6B3D;color:#FFFFFF}
body.okemixPublic .publicPremiumCta svg{width:20px;height:20px;color:#00D4FF}
body.okemixPublic .publicHeroVisual{position:relative;display:grid;place-items:center;overflow:hidden;background:#07090D;isolation:isolate}
body.okemixPublic .publicHeroVisual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07090D,transparent 22%,transparent 78%,#07090D);z-index:2;pointer-events:none}
body.okemixPublic .publicHeroVisual img{position:relative;z-index:4;width:224px;height:224px;object-fit:contain;filter:drop-shadow(0 0 7px #00D4FF);transform-origin:center;transition:transform .08s linear,filter .18s ease}
body.okemixPublic .publicHeroEqSide{position:absolute;top:50%;height:132px;transform:translateY(-50%);display:flex;align-items:center;gap:5px;z-index:1;overflow:hidden;opacity:.86;pointer-events:none}
body.okemixPublic .publicHeroEqLeft{left:1.5%;right:calc(50% + 124px);justify-content:flex-end;mask-image:linear-gradient(90deg,transparent,#07090D 16%,#07090D);-webkit-mask-image:linear-gradient(90deg,transparent,#07090D 16%,#07090D)}
body.okemixPublic .publicHeroEqRight{left:calc(50% + 124px);right:1.5%;justify-content:flex-start;mask-image:linear-gradient(90deg,#07090D,#07090D 84%,transparent);-webkit-mask-image:linear-gradient(90deg,#07090D,#07090D 84%,transparent)}
body.okemixPublic .publicHeroEqSide::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#00D4FF;opacity:.72}
body.okemixPublic .publicHeroEqSide i{display:block;flex:1 1 0;max-width:4px;min-width:2px;min-height:2px;height:2px;border-radius:4px;background:#00D4FF;transform-origin:center;opacity:.58;transition:height .045s linear,opacity .07s linear}
body.okemixPublic.audioPlaying .publicHeroEqSide i{min-height:2px;max-height:128px;opacity:.92}
body.okemixPublic.audioPlaying .publicHeroVisual img{filter:drop-shadow(0 0 10px #00D4FF)}

/* Sections */
body.okemixPublic .publicSection{margin-top:18px}
body.okemixPublic .publicSection>h2,body.okemixPublic .publicSectionHead h2{font-size:16px;margin:0 0 14px;font-weight:850;color:#FFFFFF}
body.okemixPublic .publicQuickGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
body.okemixPublic .publicQuickCard{height:90px;border:1px solid #16181F;background:#16181F;border-radius:11px;display:flex;align-items:center;gap:15px;padding:14px 17px;min-width:0;transition:.15s ease}
body.okemixPublic .publicQuickCard:hover{border-color:#00D4FF;transform:translateY(-1px)}
body.okemixPublic .publicQuickCard>i{width:50px;height:50px;border:1px solid #00D4FF;border-radius:50%;display:grid;place-items:center;color:#00D4FF;flex:0 0 50px}
body.okemixPublic .publicQuickCard.coral>i{border-color:#FF6B3D;color:#FF6B3D}
body.okemixPublic .publicQuickCard svg{width:29px;height:29px}
body.okemixPublic .publicQuickCard span{display:flex;flex-direction:column;min-width:0}
body.okemixPublic .publicQuickCard b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.okemixPublic .publicQuickCard small{font-size:11px;margin-top:5px;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.okemixPublic .publicRailArrow{position:absolute;right:-15px;top:28px;width:34px;height:34px;border-radius:50%;border:1px solid #16181F;background:#16181F;color:#FFFFFF;font-size:25px;display:grid;place-items:center;cursor:pointer;z-index:4}
body.okemixPublic .publicSectionHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding:0 3px}
body.okemixPublic .publicSectionHead h2{margin:0}
body.okemixPublic .publicSectionHead>div{display:flex;align-items:center;gap:9px}
body.okemixPublic .publicSectionHead a{font-size:10px;color:#00D4FF;font-weight:900;margin-right:6px}
body.okemixPublic .publicSectionHead button{width:29px;height:29px;border-radius:50%;border:1px solid #16181F;background:#16181F;color:#FFFFFF;display:grid;place-items:center;cursor:pointer}
body.okemixPublic .publicPlaylistRail{display:grid;grid-template-columns:repeat(7,minmax(125px,1fr));gap:12px;position:relative}
body.okemixPublic .publicPlaylistCard{min-width:0;background:#07090D;border:1px solid #16181F;border-radius:8px;overflow:hidden;padding-bottom:11px}
body.okemixPublic .publicPlaylistCover{position:relative;aspect-ratio:1/1;overflow:hidden;background:#16181F}
body.okemixPublic .publicPlaylistCover>img,body.okemixPublic .publicPlaylistImage{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
body.okemixPublic .publicPlaylistFallback{width:100%;height:100%;display:grid;place-items:center;color:#00D4FF;background:#16181F}
body.okemixPublic .publicPlaylistFallback svg{width:62px;height:62px}
body.okemixPublic .publicPlaylistCard.placeholder.tone1 .publicPlaylistFallback,body.okemixPublic .publicPlaylistCard.placeholder.tone3 .publicPlaylistFallback{color:#FF6B3D}
body.okemixPublic .publicPlaylistCover button{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;border:1px solid #FFFFFF;background:#07090D;color:#FF6B3D;font-size:16px;display:grid;place-items:center;cursor:pointer}
body.okemixPublic .publicPlaylistCard:nth-child(5n+1) .publicPlaylistCover button{color:#00D4FF}
body.okemixPublic .publicPlaylistCard>b{display:block;font-size:13px;margin:11px 10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.okemixPublic .publicPlaylistCard>small{display:block;font-size:10.5px;margin:4px 10px 0;color:#FFFFFF}
body.okemixPublic .publicPlaylistRail .cardArrow{top:46%;right:-14px}
body.okemixPublic .publicHomeLower{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:18px}
body.okemixPublic .publicMiniList{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.okemixPublic .publicMiniTrack{height:68px;border:1px solid #16181F;background:#16181F;border-radius:9px;display:grid;grid-template-columns:54px 1fr 36px;align-items:center;gap:11px;padding:7px;min-width:0}
body.okemixPublic .publicMiniCover{width:54px!important;height:54px!important;object-fit:cover;border-radius:6px;display:grid;place-items:center;background:#07090D;color:#00D4FF}
body.okemixPublic .publicMiniTrack div{min-width:0}
body.okemixPublic .publicMiniTrack b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.okemixPublic .publicMiniTrack small{font-size:10px;display:block;margin-top:4px;color:#FFFFFF}
body.okemixPublic .publicMiniTrack button{width:32px;height:32px;border-radius:50%;border:1px solid #00D4FF;background:#07090D;color:#00D4FF;cursor:pointer}
body.okemixPublic .publicArtistsPreview{padding-bottom:12px}
body.okemixPublic .publicArtistStrip{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
body.okemixPublic .publicArtistStrip::-webkit-scrollbar{display:none}
body.okemixPublic .publicArtistStrip a{width:94px;flex:0 0 94px;text-align:center}
body.okemixPublic .publicArtistAvatar{width:78px!important;height:78px!important;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#16181F;margin:auto;color:#00D4FF}
body.okemixPublic .publicArtistStrip b{display:block;font-size:10.5px;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Public bottom player — new model */
body.okemixPublic .bottomPlayer.publicPlayer{position:fixed!important;left:258px!important;right:0!important;bottom:0!important;height:99px!important;background:#07090D!important;border-top:1px solid #16181F!important;z-index:90!important;display:grid!important;grid-template-columns:330px 335px minmax(250px,1fr) 265px!important;align-items:center!important;padding:0 22px!important;gap:16px!important;box-shadow:none!important}
body.okemixPublic .publicNowPlaying{display:grid;grid-template-columns:62px minmax(0,1fr) 35px 35px;gap:11px;align-items:center;min-width:0}
body.okemixPublic .publicNowPlaying .albumMini{width:62px;height:62px;border-radius:6px;overflow:hidden;background:#16181F}
body.okemixPublic .publicNowPlaying .albumMini img{width:100%;height:100%;object-fit:cover}
body.okemixPublic .publicNowPlaying .playerMeta{min-width:0}
body.okemixPublic .publicNowPlaying .playerMeta b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.okemixPublic .publicNowPlaying .playerMeta small{display:block;font-size:10px;margin-top:4px;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.okemixPublic .publicNowPlaying .heartBtn,body.okemixPublic .publicMoreTrack{width:34px;height:34px;border:0;background:transparent;color:#FFFFFF;font-size:20px;display:grid;place-items:center;cursor:pointer}
body.okemixPublic .publicNowPlaying .heartBtn.active{color:#FF6B3D}
body.okemixPublic .publicMoreTrack svg{width:21px;height:21px}
body.okemixPublic .publicTransport{display:flex;justify-content:center}
body.okemixPublic .playerControls.publicPlayerControls{display:flex!important;align-items:center!important;justify-content:center!important;gap:19px!important}
body.okemixPublic .publicPlayerControls button{width:33px;height:33px;border:0!important;background:transparent!important;color:#FFFFFF!important;font-size:18px;display:grid!important;place-items:center!important;padding:0!important;box-shadow:none!important}
body.okemixPublic .publicPlayerControls .playMain{width:54px!important;height:54px!important;border-radius:50%!important;border:2px solid #00D4FF!important;color:#FFFFFF!important;font-size:21px!important}
body.okemixPublic .publicTimeline{display:grid;grid-template-columns:40px minmax(120px,1fr) 40px;align-items:center;gap:10px;min-width:0}
body.okemixPublic .publicTimeline small{font-size:9px;color:#FFFFFF;text-align:center}
body.okemixPublic .fakeProgress.publicWaveProgress{--progress-pct:0%;--wave-shape:polygon(0 48%,2% 42%,4% 59%,6% 35%,8% 67%,10% 44%,12% 57%,14% 25%,16% 75%,18% 42%,20% 63%,22% 31%,24% 72%,26% 47%,28% 55%,30% 38%,32% 65%,34% 43%,36% 58%,38% 32%,40% 71%,42% 45%,44% 55%,46% 37%,48% 68%,50% 43%,52% 60%,54% 29%,56% 73%,58% 40%,60% 62%,62% 35%,64% 70%,66% 48%,68% 56%,70% 38%,72% 66%,74% 44%,76% 59%,78% 34%,80% 71%,82% 45%,84% 58%,86% 39%,88% 64%,90% 46%,92% 56%,94% 42%,96% 61%,98% 47%,100% 50%,100% 52%,98% 53%,96% 39%,94% 58%,92% 44%,90% 54%,88% 36%,86% 61%,84% 42%,82% 55%,80% 29%,78% 66%,76% 41%,74% 56%,72% 34%,70% 62%,68% 44%,66% 52%,64% 30%,62% 65%,60% 38%,58% 60%,56% 27%,54% 71%,52% 40%,50% 57%,48% 32%,46% 63%,44% 45%,42% 55%,40% 29%,38% 68%,36% 42%,34% 57%,32% 35%,30% 62%,28% 45%,26% 53%,24% 28%,22% 69%,20% 37%,18% 58%,16% 25%,14% 71%,12% 43%,10% 56%,8% 33%,6% 65%,4% 41%,2% 58%,0 52%);height:44px!important;border:0!important;background:transparent!important;position:relative!important;overflow:hidden!important;padding:0!important}
body.okemixPublic .publicWaveProgress::before{content:"";position:absolute;left:0;right:0;top:50%;height:38px;transform:translateY(-50%);background:linear-gradient(90deg,#FF6B3D 0 var(--progress-pct),#00D4FF var(--progress-pct) 100%);clip-path:var(--wave-shape);-webkit-mask-image:repeating-linear-gradient(90deg,#FFFFFF 0 2px,transparent 2px 5px);mask-image:repeating-linear-gradient(90deg,#FFFFFF 0 2px,transparent 2px 5px);-webkit-mask-repeat:repeat;mask-repeat:repeat}
body.okemixPublic .publicWaveProgress>i{display:none!important}
body.okemixPublic .publicVolume{display:grid!important;grid-template-columns:30px minmax(100px,1fr) 32px!important;align-items:center!important;gap:12px!important;border:0!important;background:transparent!important;padding:0!important;min-width:0!important}
body.okemixPublic .publicVolume .volumeSpeaker{width:30px!important;height:30px!important;background:transparent!important;border:0!important;color:#FFFFFF!important;padding:0!important}
body.okemixPublic .publicVolume .volumeSpeaker svg{width:28px;height:28px;stroke:#FFFFFF;fill:none}
body.okemixPublic .publicVolume input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:0;background:linear-gradient(90deg,#FF6B3D 0 var(--volume-pct,100%),#16181F var(--volume-pct,100%) 100%);border-radius:999px;outline:0;cursor:pointer}
body.okemixPublic .publicVolume input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:transparent}
body.okemixPublic .publicVolume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#FF6B3D;border:2px solid #FFFFFF;box-shadow:0 0 0 2px #07090D}
body.okemixPublic .publicVolume input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:#16181F}
body.okemixPublic .publicVolume input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:#FF6B3D}
body.okemixPublic .publicVolume input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#FF6B3D;border:2px solid #FFFFFF}
body.okemixPublic .publicQueue{width:30px;height:30px;display:grid;place-items:center;color:#FFFFFF}
body.okemixPublic .publicQueue svg{width:23px;height:23px}
body.okemixPublic .volumePercent,body.okemixPublic .mobileMuteBtn{display:none!important}

/* Rest of public pages: same visual system, legacy functionality preserved */
body.okemixPublic .libraryDashboard,body.okemixPublic .artistPage,body.okemixPublic .livePage,body.okemixPublic .accountPage,body.okemixPublic .membershipPage,body.okemixPublic .redeemPage,body.okemixPublic .playerPage{color:#FFFFFF}
body.okemixPublic .libraryHeader,body.okemixPublic .dashboardSection,body.okemixPublic .artistHero,body.okemixPublic .catalogHero,body.okemixPublic .membershipCard,body.okemixPublic .accountProfileCard,body.okemixPublic .redeemCard,body.okemixPublic .card{background:#07090D!important;border-color:#16181F!important;color:#FFFFFF!important;box-shadow:none!important}
body.okemixPublic .btn{background:#00D4FF!important;color:#07090D!important;border-color:#00D4FF!important}
body.okemixPublic .btn.ghost{background:#07090D!important;color:#FFFFFF!important;border-color:#FF6B3D!important}
body.okemixPublic .selectionBadge,body.okemixPublic .miniHeading span,body.okemixPublic .adminEyebrow{color:#00D4FF!important}
body.okemixPublic input,body.okemixPublic textarea,body.okemixPublic select{background:#16181F!important;border-color:#16181F!important;color:#FFFFFF!important}
body.okemixPublic .songTable,body.okemixPublic .songTableWrap{background:#07090D!important;color:#FFFFFF!important;border-color:#16181F!important}
body.okemixPublic .songTable tr,body.okemixPublic .songTable td,body.okemixPublic .songTable th{border-color:#16181F!important}
body.okemixPublic .genreTag{background:#16181F!important;color:#00D4FF!important}

/* Toasts/modals public palette */
body.okemixPublic .toast,body.okemixPublic .notify,body.okemixPublic [class*="Overlay"]>[class*="Modal"],body.okemixPublic [class*="overlay"]>[class*="modal"]{border-color:#16181F;color:#FFFFFF}

/* Responsive — desktop, tablet and mobile */
@media (max-width:1320px){
  body.okemixPublic .topbar.publicTopbar{padding-left:72px!important;grid-template-columns:minmax(300px,496px) 1fr!important}
  body.okemixPublic .publicQuickGrid{gap:12px}
  body.okemixPublic .publicPlaylistRail{grid-template-columns:repeat(6,minmax(130px,1fr));overflow:hidden}
  body.okemixPublic .publicPlaylistRail>.publicPlaylistCard:nth-child(n+7){display:none}
  body.okemixPublic .bottomPlayer.publicPlayer{grid-template-columns:280px 290px minmax(230px,1fr) 220px!important;gap:10px!important}
}
@media (max-width:1100px){
  body.okemixPublic .topbar.publicTopbar{padding-left:34px!important;grid-template-columns:minmax(270px,430px) 1fr!important}
  body.okemixPublic .publicUpgrade{padding:0 14px}
  body.okemixPublic .publicHero{grid-template-columns:minmax(310px,45%) minmax(0,55%)}
  body.okemixPublic .publicHeroCopy{padding-left:30px}
  body.okemixPublic .publicHeroCopy h1{font-size:31px}
  body.okemixPublic .publicHeroVisual img{width:205px;height:205px}
  body.okemixPublic .publicQuickGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.okemixPublic .publicPlaylistRail{grid-template-columns:repeat(5,minmax(130px,1fr))}
  body.okemixPublic .publicPlaylistRail>.publicPlaylistCard:nth-child(n+6){display:none}
  body.okemixPublic .bottomPlayer.publicPlayer{grid-template-columns:240px 245px minmax(200px,1fr) 180px!important;padding:0 14px!important}
  body.okemixPublic .publicPlayerControls{gap:10px!important}
}
@media (max-width:900px){
  body.okemixPublic .sideNav.publicSidebar{width:min(290px,86vw)!important;transform:translateX(-100%)!important;transition:transform .2s ease!important;z-index:130!important;box-shadow:8px 0 34px #07090D!important}
  body.okemixPublic .sideNav.publicSidebar.mobileOpen{transform:translateX(0)!important}
  body.okemixPublic .topbar.publicTopbar{left:0!important;height:72px!important;padding:0 12px!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:10px!important}
  body.okemixPublic .publicMobileMenu{display:grid;width:40px;height:40px;place-items:center;border:1px solid #16181F;background:#16181F;color:#FFFFFF;border-radius:10px}
  body.okemixPublic .publicSearch{grid-column:2;max-width:none;height:42px}
  body.okemixPublic .publicUpgrade span{display:none}
  body.okemixPublic .publicUpgrade{width:42px;padding:0;justify-content:center;border-color:#FF6B3D}
  body.okemixPublic .publicUpgrade.active{border-color:#00D4FF}
  body.okemixPublic .publicBell{display:none}
  body.okemixPublic .publicProfileChip{grid-template-columns:38px 16px}
  body.okemixPublic .publicProfileChip>img,body.okemixPublic .publicProfileChip>span:first-child{width:37px;height:37px}
  body.okemixPublic .publicProfileChip>span:nth-child(2){display:none}
  body.okemixPublic .appPage{margin-left:0!important;padding:88px 12px 116px!important}
  body.okemixPublic .publicHome{padding-top:84px!important;padding-left:12px!important;padding-right:12px!important}
  body.okemixPublic .publicHero{height:auto;min-height:415px;grid-template-columns:1fr;border-radius:12px}
  body.okemixPublic .publicHeroCopy{padding:28px 22px 6px;align-items:center;text-align:center}
  body.okemixPublic .publicHeroCopy h1{font-size:31px;white-space:normal}
  body.okemixPublic .publicHeroCopy p br{display:none}
  body.okemixPublic .publicHeroActions{justify-content:center;gap:10px;flex-wrap:wrap}
  body.okemixPublic .publicPrimaryCta,body.okemixPublic .publicPremiumCta{padding:0 14px;height:40px;font-size:11px}
  body.okemixPublic .publicHeroVisual{height:225px}
  body.okemixPublic .publicHeroVisual img{width:178px;height:178px}
  body.okemixPublic .publicHeroEqSide{height:120px;gap:4px}
  body.okemixPublic .publicHeroEqLeft{left:1%;right:calc(50% + 101px)}
  body.okemixPublic .publicHeroEqRight{left:calc(50% + 101px);right:1%}
  body.okemixPublic .publicHeroEqSide i{max-width:3px;max-height:98px}
  body.okemixPublic .publicQuickGrid{display:flex;overflow-x:auto;gap:10px;scrollbar-width:none;padding-bottom:4px}
  body.okemixPublic .publicQuickGrid::-webkit-scrollbar{display:none}
  body.okemixPublic .publicQuickCard{flex:0 0 220px;height:80px}
  body.okemixPublic .publicRailArrow{display:none}
  body.okemixPublic .publicPlaylistRail{display:flex;overflow-x:auto;gap:10px;scrollbar-width:none;padding-bottom:5px}
  body.okemixPublic .publicPlaylistRail::-webkit-scrollbar{display:none}
  body.okemixPublic .publicPlaylistCard{flex:0 0 150px}
  body.okemixPublic .publicPlaylistRail>.publicPlaylistCard:nth-child(n){display:block}
  body.okemixPublic .publicHomeLower{grid-template-columns:1fr;gap:8px}
  body.okemixPublic .bottomPlayer.publicPlayer{left:0!important;height:104px!important;grid-template-columns:minmax(0,1fr) auto!important;padding:14px 10px 0!important;gap:8px!important}
  body.okemixPublic .publicNowPlaying{grid-template-columns:48px minmax(0,1fr) 28px!important;gap:8px!important}
  body.okemixPublic .publicNowPlaying .albumMini{width:48px;height:48px}
  body.okemixPublic .publicNowPlaying .playerMeta small{font-size:9px}
  body.okemixPublic .publicMoreTrack{display:none!important}
  body.okemixPublic .publicTransport{justify-content:flex-end}
  body.okemixPublic .publicPlayerControls{gap:7px!important}
  body.okemixPublic .publicPlayerControls button[data-player-shuffle],body.okemixPublic .publicPlayerControls .repeatBtn{display:none!important}
  body.okemixPublic .publicPlayerControls button{width:28px;height:28px;font-size:14px}
  body.okemixPublic .publicPlayerControls .playMain{width:46px!important;height:46px!important}
  body.okemixPublic .publicTimeline{display:grid!important;position:absolute;left:10px;right:10px;top:5px;height:12px;grid-template-columns:1fr!important;gap:0!important}
  body.okemixPublic .publicTimeline small{display:none!important}
  body.okemixPublic .fakeProgress.publicWaveProgress{height:12px!important;width:100%}
  body.okemixPublic .publicWaveProgress::before,body.okemixPublic .publicWaveProgress>i{height:10px!important}
  body.okemixPublic .publicVolume{display:none!important}
  body.okemixPublic .globalSearchResults{left:12px!important;right:12px!important;top:66px!important;width:auto!important}
}
@media (max-width:620px){
  body.okemixPublic .topbar.publicTopbar{grid-template-columns:40px minmax(0,1fr) 42px!important;padding:0 8px!important}
  body.okemixPublic .publicTopActions .publicUpgrade{display:none}
  body.okemixPublic .publicProfileChip>i{display:none}
  body.okemixPublic .publicProfileChip{grid-template-columns:38px}
  body.okemixPublic .publicSearch{padding:0 11px;gap:8px}
  body.okemixPublic .publicSearch input{font-size:12px}
  body.okemixPublic .publicHero{min-height:430px}
  body.okemixPublic .publicHeroCopy{padding:25px 14px 4px}
  body.okemixPublic .publicHeroCopy h1{font-size:30px;line-height:1.08}
  body.okemixPublic .publicHeroCopy>span{font-size:10px;letter-spacing:2px}
  body.okemixPublic .publicHeroCopy p{font-size:12px;margin:11px 0 15px}
  body.okemixPublic .publicHeroVisual{height:205px}
  body.okemixPublic .publicHeroVisual img{width:158px;height:158px}
  body.okemixPublic .publicHeroEqSide{height:102px;gap:3px}
  body.okemixPublic .publicHeroEqLeft{right:calc(50% + 90px)}
  body.okemixPublic .publicHeroEqRight{left:calc(50% + 90px)}
  body.okemixPublic .publicHeroEqSide i{max-width:3px;max-height:84px}
  body.okemixPublic .publicMiniList{grid-template-columns:1fr}
  body.okemixPublic .publicSectionHead h2{font-size:14px}
  body.okemixPublic .publicPlaylistCard{flex-basis:137px}
  body.okemixPublic .publicQuickCard{flex-basis:195px}
  body.okemixPublic .publicNowPlaying .heartBtn{display:none!important}
}
@media (max-width:420px){
  body.okemixPublic .publicHeroCopy h1{font-size:27px}
  body.okemixPublic .publicHeroActions{width:100%;display:grid;grid-template-columns:1fr}
  body.okemixPublic .publicPrimaryCta,body.okemixPublic .publicPremiumCta{justify-content:center;width:100%}
  body.okemixPublic .publicHeroVisual img{width:145px;height:145px}
  body.okemixPublic .publicHeroEqSide{gap:2px}
  body.okemixPublic .publicHeroEqSide i{max-width:2px}
  body.okemixPublic .bottomPlayer.publicPlayer{grid-template-columns:minmax(0,1fr) 150px!important}
  body.okemixPublic .publicNowPlaying{grid-template-columns:44px minmax(0,1fr)!important}
  body.okemixPublic .publicNowPlaying .albumMini{width:44px;height:44px}
}


/* v18.99 — navegación pública consistente y Favoritos coral */
body.okemixPublic .publicSideItem i svg{width:22px;height:22px;stroke-width:1.85}
body.okemixPublic .publicLibraryChild i svg{width:19px;height:19px}
body.okemixPublic .publicLibraryChild.favoriteNav i{color:#FF6B3D!important}
body.okemixPublic .publicLibraryChild.favoriteNav.active i{color:#FF6B3D!important}
body.okemixPublic .trackLikeBtn.liked{color:#FF6B3D!important;border-color:#FF6B3D!important;background:#07090D!important;text-shadow:none!important}
body.okemixPublic .trackLikeBtn.liked:hover{color:#FF6B3D!important;border-color:#FF6B3D!important;background:#16181F!important}
body.okemixPublic .publicNowPlaying .heartBtn.active{color:#FF6B3D!important;text-shadow:none!important}