/* DJPORT v28.00
   Dense marketplace / DJ-store layout inspired by the information architecture
   of leading DJ music stores. DJPORT branding/assets only. */
:root{
  --mk-bg:#0b0c0e;
  --mk-panel:#15171a;
  --mk-panel2:#1b1d21;
  --mk-panel3:#202328;
  --mk-line:#30343a;
  --mk-line2:#25282d;
  --mk-text:#f4f5f7;
  --mk-muted:#949aa3;
  --mk-accent:#ff6a00;
  --mk-accent2:#ff8b3d;
  --mk-sidebar:214px;
  --mk-player:72px;
  --mk-header:58px;
}

*{box-sizing:border-box}
html{background:var(--mk-bg)!important}
body.dp4-body{
  margin:0!important;
  background:var(--mk-bg)!important;
  color:var(--mk-text)!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-size:13px!important;
  padding-bottom:var(--mk-player)!important;
  overflow-x:hidden!important;
}
a{text-decoration:none}

/* SHELL */
.dp4-shell{display:block!important;min-height:100vh!important;background:var(--mk-bg)!important}
.dp4-workspace{margin-left:var(--mk-sidebar)!important;min-width:0!important;background:var(--mk-bg)!important}
.dp4-content{padding:22px 24px 50px!important;max-width:none!important;min-width:0!important;background:var(--mk-bg)!important}

/* TOP BAR */
.dp4-commandbar{
  position:sticky!important;top:0!important;z-index:90!important;height:var(--mk-header)!important;
  min-height:var(--mk-header)!important;padding:0 16px!important;display:flex!important;align-items:center!important;gap:12px!important;
  background:#111315!important;border-bottom:1px solid var(--mk-line)!important;box-shadow:none!important;
}
.dp4-global-search{
  order:3!important;flex:1 1 320px!important;min-width:180px!important;max-width:520px!important;height:34px!important;
  display:flex!important;align-items:center!important;gap:8px!important;padding:0 10px!important;
  background:#24272b!important;border:1px solid #34383e!important;border-radius:2px!important;
}
.dp4-global-search span{color:#c5c8cc!important;font-size:16px!important}
.dp4-global-search input{background:transparent!important;border:0!important;outline:0!important;color:#fff!important;font-size:12px!important;width:100%!important}
.dp4-global-search input::placeholder{color:#858b93!important}
.dp4-global-search kbd{display:none!important}
.dp4-catalog-drawer{order:1!important;flex:0 0 auto!important}
.dp4-catalog-trigger{
  height:34px!important;border:0!important;border-radius:2px!important;background:transparent!important;color:#d7d9dd!important;
  padding:0 6px!important;font-size:11px!important;font-weight:800!important;letter-spacing:.02em!important;
}
.dp4-catalog-trigger:hover{color:var(--mk-accent)!important;background:#1b1d20!important}
.dp-market-nav{order:2!important;display:flex!important;align-items:center!important;gap:15px!important;white-space:nowrap!important}
.dp-market-nav a{color:#c8cbd0!important;font-size:10px!important;font-weight:850!important;letter-spacing:.035em!important;text-transform:uppercase!important}
.dp-market-nav a:hover{color:var(--mk-accent)!important}
.dp4-command-actions{order:4!important;margin-left:auto!important;display:flex!important;align-items:center!important;gap:6px!important}
.dp4-upload,.dp4-account,.dp4-lang{
  min-height:32px!important;border-radius:2px!important;padding:0 10px!important;display:inline-flex!important;align-items:center!important;
  font-size:10px!important;font-weight:850!important;letter-spacing:.03em!important;
}
.dp4-upload{background:var(--mk-accent)!important;color:#111!important;border:1px solid var(--mk-accent)!important}
.dp4-account,.dp4-lang{background:transparent!important;color:#d8dbe0!important;border:1px solid transparent!important}
.dp4-account:hover,.dp4-lang:hover{background:#1f2226!important;border-color:#34383e!important}

/* SIDEBAR */
.dp4-sidebar{
  position:fixed!important;left:0!important;top:0!important;bottom:var(--mk-player)!important;width:var(--mk-sidebar)!important;z-index:95!important;
  background:#101214!important;border-right:1px solid var(--mk-line)!important;padding:0 0 16px!important;overflow-y:auto!important;
}
.dp4-logo{
  height:var(--mk-header)!important;display:flex!important;align-items:center!important;padding:0 18px!important;
  border-bottom:1px solid var(--mk-line)!important;background:#0e1012!important;
}
.dp4-logo img{width:118px!important;max-height:42px!important;object-fit:contain!important}
.dp4-side-label{padding:18px 18px 7px!important;color:#737982!important;font-size:9px!important;font-weight:900!important;letter-spacing:.12em!important}
.dp4-side-nav{display:block!important;padding:0!important}
.dp4-side-nav a{
  min-height:34px!important;padding:0 17px!important;display:flex!important;align-items:center!important;gap:10px!important;
  color:#babfc6!important;border-left:3px solid transparent!important;border-radius:0!important;background:transparent!important;
  font-size:11px!important;font-weight:650!important;
}
.dp4-side-nav a span{width:18px!important;color:#7f858d!important;text-align:center!important;font-size:13px!important}
.dp4-side-nav a:hover{background:#1b1e22!important;color:#fff!important;border-left-color:var(--mk-accent)!important}
.dp4-side-nav a:hover span{color:var(--mk-accent)!important}

/* DRAWER */
.dp4-catalog-panel{top:var(--mk-header)!important;left:var(--mk-sidebar)!important;width:310px!important;background:#17191c!important;border:1px solid var(--mk-line)!important;border-radius:0!important;box-shadow:0 18px 50px rgba(0,0,0,.55)!important}
.dp4-catalog-panel-head{background:#101214!important;border-bottom:1px solid var(--mk-line)!important}
.dp4-catalog-group summary{color:#8d939b!important}
.dp4-catalog-group a{border-radius:0!important;color:#d4d7dc!important}
.dp4-catalog-group a:hover{background:#24272b!important;color:var(--mk-accent)!important}

/* HOME MAIN */
.dp4-homegrid,.dp4-homegrid-wide{display:block!important;width:100%!important;max-width:none!important;margin:0!important}
.dp4-dashboard-main{width:100%!important;max-width:none!important;min-width:0!important}
.dp4-hero{
  display:grid!important;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr)!important;gap:0!important;
  min-height:380px!important;margin:0 0 26px!important;padding:0!important;background:#16181b!important;border:1px solid var(--mk-line)!important;
  border-radius:0!important;overflow:hidden!important;box-shadow:none!important;
}
.dp4-hero-art{order:1!important;position:relative!important;min-height:380px!important;overflow:hidden!important;background:#111!important}
.dp4-hero-art img{width:100%!important;height:100%!important;min-height:380px!important;object-fit:cover!important;display:block!important;filter:saturate(.88) contrast(1.05)!important}
.dp4-art-overlay{position:absolute!important;left:18px!important;bottom:18px!important;background:rgba(10,10,10,.86)!important;border:1px solid rgba(255,255,255,.12)!important;padding:10px 12px!important;border-radius:0!important}
.dp4-art-overlay span{display:block!important;color:var(--mk-accent)!important;font-size:9px!important;font-weight:900!important}
.dp4-art-overlay b{display:block!important;margin-top:2px!important;color:#fff!important;font-size:12px!important}
.dp4-hero-copy{order:2!important;padding:28px 26px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;background:#1b1d20!important}
.dp4-eyebrow{color:var(--mk-accent)!important;font-size:9px!important;font-weight:900!important;letter-spacing:.12em!important}
.dp4-hero h1{margin:8px 0 10px!important;color:#fff!important;font-size:34px!important;line-height:.98!important;letter-spacing:-1.5px!important;font-weight:900!important}
.dp4-hero h1 em{font-style:normal!important;color:#d7dade!important;font-size:.55em!important;letter-spacing:-.3px!important}
.dp4-hero p{margin:0!important;color:#a8adb5!important;font-size:12px!important;line-height:1.5!important}
.dp4-hero-actions{display:flex!important;gap:6px!important;margin-top:18px!important}
.dp4-hero-actions a{padding:9px 11px!important;border-radius:2px!important;background:var(--mk-accent)!important;color:#111!important;font-size:9px!important;font-weight:900!important;border:1px solid var(--mk-accent)!important}
.dp4-hero-actions a+ a{background:#25282c!important;color:#fff!important;border-color:#3c4046!important}

/* CHART QUICK CARDS */
.dp4-quickdeck{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1px!important;margin:0 0 24px!important;background:var(--mk-line)!important;border:1px solid var(--mk-line)!important}
.dp4-quickdeck>a{min-height:86px!important;padding:14px!important;background:#17191c!important;border:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important}
.dp4-quickdeck>a:hover{background:#202328!important}
.dp4-quickdeck span{color:var(--mk-accent)!important;font-size:9px!important;font-weight:900!important}
.dp4-quickdeck b{margin-top:4px!important;color:#fff!important;font-size:15px!important;letter-spacing:-.2px!important}
.dp4-quickdeck small{margin-top:3px!important;color:#818790!important;font-size:10px!important}

/* generic section headings like Beatport */
.dp4-panel,.dp4-artist-collections,.dp4-smart-packs,.dp-trend-section,.dp4-feature-jumps{
  margin:0 0 26px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
.dp4-panel-head,.dp4-artist-collections-head,.dp4-collection-head,.dp-section-head{
  min-height:42px!important;margin:0 0 12px!important;padding:0!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;border:0!important;
}
.dp4-panel-head h2,.dp4-artist-collections h2,.dp4-smart-packs h2,.dp-trend-section h2,.dp-section h2{
  margin:0!important;color:#f5f6f7!important;font-size:18px!important;line-height:1.15!important;font-weight:850!important;letter-spacing:-.35px!important;text-transform:none!important;
}
.dp4-panel-head span,.dp4-artist-collections-head span,.dp-kicker{display:block!important;color:var(--mk-accent)!important;font-size:8px!important;font-weight:900!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.dp4-panel-head>a,.dp-section-head>a,.dp4-artist-collections a.dp4-collection-more{color:#a8adb4!important;font-size:9px!important;font-weight:850!important;text-transform:uppercase!important}
.dp4-panel-head>a:hover,.dp-section-head>a:hover{color:var(--mk-accent)!important}

/* FEATURE CARDS */
.dp4-feature-jumps{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.dp4-feature-card{min-height:190px!important;border-radius:0!important;border:1px solid var(--mk-line)!important;overflow:hidden!important;background:#16181b!important}
.dp4-feature-card .dp4-feature-bg{filter:saturate(.8) contrast(1.08)!important}
.dp4-feature-card:after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.2))!important}
.dp4-feature-copy,.dp4-feature-index,.dp4-feature-arrow{z-index:2!important}
.dp4-feature-copy strong{font-size:25px!important;line-height:.95!important}
.dp4-feature-copy small{color:var(--mk-accent)!important}

/* RELEASE/COLLECTION CAROUSELS */
.dp4-collection-rail{
  display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(155px,1fr)!important;grid-template-columns:none!important;
  gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 0 8px!important;scrollbar-width:thin!important;scrollbar-color:#45494f transparent!important;
}
.dp4-collection-card{
  width:auto!important;min-width:0!important;background:#1a1c20!important;border:1px solid var(--mk-line2)!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;
}
.dp4-collection-card:hover{background:#202328!important;border-color:#3b3f45!important;transform:none!important}
.dp4-collection-art{border-radius:0!important;aspect-ratio:1/1!important;overflow:hidden!important;background:#24272b!important}
.dp4-collection-card h3,.dp4-collection-card strong{color:#fff!important;font-size:12px!important}
.dp4-collection-card p,.dp4-collection-card small{color:#8f959e!important;font-size:9px!important}

/* STATS */
.dp4-stats-center{display:flex!important;gap:1px!important;margin:0 0 24px!important;background:var(--mk-line)!important;border:1px solid var(--mk-line)!important;overflow:hidden!important}
.dp4-stats-center>*{flex:1!important;margin:0!important;background:#17191c!important;border-radius:0!important;border:0!important;box-shadow:none!important;padding:12px 14px!important}

/* TRACK TABLES */
.dp4-tracklist{width:100%!important;overflow-x:auto!important;background:#121416!important;border-top:1px solid var(--mk-line)!important;border-bottom:1px solid var(--mk-line)!important}
.dp-table{width:100%!important;min-width:820px!important;border-collapse:collapse!important;border-spacing:0!important;table-layout:auto!important;font-size:11px!important;background:#121416!important}
.dp-table thead{display:table-header-group!important}
.dp-table th{height:32px!important;padding:0 9px!important;background:#17191c!important;border-bottom:1px solid var(--mk-line)!important;color:#757c85!important;font-size:8px!important;font-weight:850!important;letter-spacing:.08em!important;text-transform:uppercase!important;text-align:left!important;white-space:nowrap!important}
.dp-table .dp-row{background:#121416!important;border:0!important;box-shadow:none!important;transform:none!important}
.dp-table .dp-row>td{height:61px!important;padding:6px 9px!important;background:#121416!important;border:0!important;border-bottom:1px solid #25282d!important;border-radius:0!important;color:#cfd3d8!important;vertical-align:middle!important;box-shadow:none!important}
.dp-table .dp-row:hover>td{background:#1b1e22!important;border-bottom-color:#34383e!important}
.dp-table .dp-row>td:first-child{border-left:0!important;border-radius:0!important;box-shadow:none!important;width:54px!important}
.dp-table .dp-row>td:last-child{border-right:0!important;border-radius:0!important}
.dp-table .dp-cover,.dp-table img.dp-cover{width:46px!important;height:46px!important;border-radius:0!important;border:0!important;box-shadow:none!important;object-fit:cover!important}
.dp-table .dp-title-cell{min-width:210px!important}
.dp-table .dp-track-title,.dp-table .dp-track-title a{color:#f5f6f7!important;font-size:11px!important;font-weight:750!important;line-height:1.2!important}
.dp-table .dp-title-cell>.dp-muted{color:#818790!important;font-size:9px!important;margin-top:3px!important}
.dp-table .dp-title-stats{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;margin-top:5px!important;color:#8f959d!important}
.dp-table .dp-title-stats>span,.dp-table .dp-title-stats>.dp-like-btn{
  display:inline-flex!important;align-items:center!important;gap:3px!important;min-height:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#8f959d!important;font-size:8px!important;font-weight:700!important;box-shadow:none!important;
}
.dp-table .dp-title-stats b{color:#adb2b9!important;font-size:8px!important}
.dp-table .dp-title-stats>.dp-like-btn:hover,.dp-table .dp-title-stats>.dp-like-btn.liked{background:transparent!important;color:var(--mk-accent)!important}
.dp-table .dp-tag{padding:4px 6px!important;border:1px solid #363a40!important;border-radius:2px!important;background:#1b1e22!important;color:#c6cad0!important;font-size:8px!important}
.dp-downloads{display:flex!important;gap:4px!important;align-items:center!important;flex-wrap:nowrap!important}
.dp-downloads .dp-btn,.dp-mini-btn,.dp-downloads a{
  min-height:28px!important;padding:0 8px!important;border-radius:2px!important;font-size:8px!important;font-weight:850!important;white-space:nowrap!important;
}

/* INLINE PLAYER in track row */
.dp-wave-player,.dp-player-cell .dp-wave-player,.dp-table .dp-wave-player,.dp-track-player-wrap .dp-wave-player{
  display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;gap:8px!important;align-items:center!important;width:100%!important;min-height:42px!important;
  padding:4px 6px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;
}
.dp-wave-player:before{display:none!important}
.dp-wave-player .dp-play,.dp-table .dp-wave-player .dp-play{
  width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;border:1px solid #454a51!important;border-radius:50%!important;background:#25282c!important;color:#fff!important;box-shadow:none!important;font-size:10px!important;
}
.dp-wave-player .dp-play:hover{background:var(--mk-accent)!important;border-color:var(--mk-accent)!important;color:#111!important}
.dp-wave-title{font-size:8px!important;margin-bottom:2px!important;color:#cfd3d8!important}
.dp-wave{height:23px!important;gap:1px!important}
.dp-wave span{max-width:3px!important;background:#373b41!important;border-radius:0!important}
.dp-wave span.active{background:var(--mk-accent)!important;box-shadow:none!important}
.dp-time{font-size:7px!important;color:#747b84!important;margin-top:1px!important}

/* ranking tabs/pagination */
.dp-rank-tabs,.dp-pagination{display:flex!important;gap:2px!important;flex-wrap:wrap!important}
.dp-rank-tabs a,.dp-pagination a,.dp-pagination span{border-radius:2px!important;background:#181a1e!important;border:1px solid #30343a!important;color:#b3b8c0!important;font-size:9px!important;padding:6px 8px!important}
.dp-rank-tabs a.active,.dp-pagination .current{background:var(--mk-accent)!important;border-color:var(--mk-accent)!important;color:#111!important}

/* GENERIC PANELS/FORMS/ACCOUNT/TOOLS */
.dp-card,.dp4-panel,.dp-account-card,.dp-tool-card,.dp-premium-box,.dp-sorter-shell,.dp-organizer-shell,.dp-master-shell{
  border-radius:0!important;box-shadow:none!important;
}
.dp-card,.dp-account-card,.dp-tool-card,.dp-premium-box{background:#17191c!important;border:1px solid var(--mk-line)!important;color:#e8eaed!important}
input,select,textarea{border-radius:2px!important;background:#1d2024!important;border-color:#3a3e44!important;color:#fff!important}
.dp-btn{border-radius:2px!important}

/* FOOTER */
.dp-footer,.dp4-footer{margin:32px 0 0!important;padding:24px!important;background:#111315!important;border-top:1px solid var(--mk-line)!important;color:#838992!important}
.dp-footer .dp-wrap{width:100%!important;max-width:none!important}
.dp-pwa-install{border-radius:0!important;background:#17191c!important;border:1px solid var(--mk-line)!important}
.dp-desktop-help-legal{background:#0f1113!important;border-top:1px solid var(--mk-line)!important}
.dp-pwa-legal{display:none!important}

/* GLOBAL PLAYER */
.dp-global-player{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:300!important;height:var(--mk-player)!important;
  width:100%!important;max-width:none!important;background:#111315!important;border-top:1px solid #383c42!important;border-radius:0!important;box-shadow:0 -10px 30px rgba(0,0,0,.4)!important;padding:0!important;
}
.dp-global-inner{height:100%!important;display:grid!important;grid-template-columns:54px 110px minmax(0,1fr) 90px 220px!important;gap:12px!important;align-items:center!important;padding:8px 14px!important}
.dp-global-cover{width:52px!important;height:52px!important;border-radius:0!important;object-fit:cover!important}
.dp-global-transport{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important}
.dp-global-transport button{border-radius:50%!important;background:#25282c!important;border:1px solid #3a3e44!important;color:#fff!important}
.dp-global-play{width:38px!important;height:38px!important;background:var(--mk-accent)!important;color:#111!important;border-color:var(--mk-accent)!important}
.dp-global-main{min-width:0!important}
.dp-global-title{font-size:11px!important;color:#fff!important;font-weight:750!important}
.dp-global-meta{font-size:8px!important;color:#858b94!important}
.dp-global-wave{height:28px!important}
.dp-global-actions{display:flex!important;justify-content:flex-end!important;gap:4px!important}
.dp-global-action,.dp-global-actions button{border-radius:2px!important;background:#202328!important;border:1px solid #383c42!important;color:#d8dbe0!important;font-size:8px!important}

/* Collection detail */
.dp4-collection-detail{background:transparent!important;border:0!important}
.dp4-collection-detail-head{display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;gap:22px!important;background:#17191c!important;border:1px solid var(--mk-line)!important;border-radius:0!important;padding:20px!important}
.dp4-collection-detail-art{border-radius:0!important}
.dp4-collection-download-all{border-radius:2px!important;background:var(--mk-accent)!important;color:#111!important}

/* MOBILE / PWA: same design language, no legacy second skin */
@media(max-width:1100px){
  :root{--mk-sidebar:180px}
  .dp-market-nav{display:none!important}
  .dp4-global-search{max-width:none!important}
  .dp4-content{padding:18px!important}
  .dp4-hero{grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr)!important}
}
@media(max-width:900px){
  :root{--mk-header:52px;--mk-player:68px}
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .dp4-sidebar{display:none!important}
  .dp4-workspace{margin-left:0!important}
  .dp4-commandbar{height:auto!important;min-height:52px!important;padding:7px 8px!important;gap:6px!important}
  .dp4-catalog-drawer{order:1!important}
  .dp4-global-search{order:2!important;flex:1!important;min-width:0!important;height:36px!important}
  .dp4-command-actions{order:3!important;gap:2px!important}
  .dp4-upload{display:none!important}
  .dp4-account{font-size:0!important;width:34px!important;padding:0!important;justify-content:center!important}
  .dp4-account:before{content:'●';font-size:13px!important;color:#dfe2e6!important}
  .dp4-lang{width:31px!important;padding:0!important;justify-content:center!important}
  .dp4-content{padding:12px 10px 34px!important}
  .dp4-hero{grid-template-columns:1fr!important;min-height:0!important}
  .dp4-hero-art{min-height:240px!important}
  .dp4-hero-art img{min-height:240px!important;height:240px!important}
  .dp4-hero-copy{padding:18px!important}
  .dp4-hero h1{font-size:27px!important}
  .dp4-quickdeck{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dp4-feature-jumps{grid-template-columns:1fr!important}
  .dp4-collection-rail{grid-auto-columns:145px!important}
  .dp4-tracklist{margin-left:0!important;margin-right:0!important;width:100%!important}
  .dp-table{min-width:780px!important}
  .dp-table thead{display:table-header-group!important}
  .dp-table .dp-row,.dp-table .dp-row>td{display:table-row!important}
  .dp-table .dp-row>td{display:table-cell!important}
  .dp-table .dp-row>td:before{display:none!important}
  .dp-global-inner{grid-template-columns:44px 52px minmax(0,1fr) 72px!important;gap:7px!important;padding:7px 8px!important}
  .dp-global-cover{width:42px!important;height:42px!important}
  .dp-global-prev,.dp-global-next{display:none!important}
  .dp-global-transport{width:50px!important}
  .dp-global-actions{display:none!important}
  .dp-global-time{font-size:8px!important}
  .dp4-catalog-panel{left:0!important;top:52px!important;width:min(92vw,330px)!important}
  .dp4-collection-detail-head{grid-template-columns:1fr!important}
  .dp4-collection-detail-art{max-width:260px!important}
}
@media(max-width:520px){
  .dp4-commandbar{position:sticky!important}
  .dp4-catalog-trigger b{display:none!important}
  .dp4-catalog-trigger{width:34px!important;padding:0!important;justify-content:center!important}
  .dp4-global-search input{font-size:16px!important}
  .dp4-hero-art{min-height:210px!important}
  .dp4-hero-art img{height:210px!important;min-height:210px!important}
  .dp4-quickdeck>a{min-height:76px!important;padding:11px!important}
  .dp4-collection-rail{grid-auto-columns:132px!important}
  .dp4-panel-head h2,.dp4-artist-collections h2,.dp-section h2{font-size:16px!important}
}

/* DJPORT v28.01 — ONLY contrast, PWA login visibility and homepage WOW layer. */

/* 1. Track row counters/actions must never inherit black text. */
.dp-title-stats,
.dp-title-stats *,
.dp-title-stats .dp-like-btn,
.dp-title-stats .dp-like-btn *,
.dp-title-stats .dp-stat-play,
.dp-title-stats .dp-stat-play *,
.dp-title-stats .dp-stat-download,
.dp-title-stats .dp-stat-download *,
.dp-downloads,
.dp-downloads *,
.dp-wave-player .dp-play,
.dp-wave-player .dp-play *{
  color:#d9dde3!important;
  -webkit-text-fill-color:#d9dde3!important;
}
.dp-title-stats .dp-like-btn:hover,
.dp-title-stats .dp-like-btn:hover *,
.dp-title-stats .dp-like-btn.liked,
.dp-title-stats .dp-like-btn.liked *,
.dp-title-stats .dp-like-btn.is-liked,
.dp-title-stats .dp-like-btn.is-liked *{
  color:var(--mk-accent)!important;
  -webkit-text-fill-color:var(--mk-accent)!important;
}
.dp-downloads .dp-btn,
.dp-downloads a,
.dp-downloads button{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.dp-wave-player .dp-play{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.dp-wave-player .dp-play:hover{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* 2. PWA/mobile must show a real LOG IN / MY ACCOUNT control, never a dot. */
@media(max-width:900px){
  body.dp-pwa-mode .dp4-commandbar,
  body.dp-pwa-mode .dp4-command-actions,
  body.dp-pwa-mode .dp4-account,
  .dp4-command-actions,
  .dp4-account{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .dp4-command-actions{margin-left:0!important;flex:0 0 auto!important}
  .dp4-account{
    width:auto!important;
    min-width:auto!important;
    max-width:none!important;
    height:34px!important;
    padding:0 9px!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
    justify-content:center!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    background:#23262a!important;
    border:1px solid #3d4249!important;
  }
  .dp4-account:before{content:none!important;display:none!important}
  .dp4-lang{display:inline-flex!important}
}

/* 3. Homepage WOW layer. Purely visual, no functional markup changes. */
body.home .dp4-content{
  position:relative!important;
  isolation:isolate!important;
}
body.home .dp4-content:before{
  content:""!important;
  position:fixed!important;
  z-index:-1!important;
  inset:58px 0 72px var(--mk-sidebar)!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 78% 4%,rgba(255,106,0,.18),transparent 27%),
    radial-gradient(circle at 12% 36%,rgba(255,255,255,.055),transparent 21%),
    linear-gradient(125deg,rgba(255,106,0,.035),transparent 32%,rgba(255,255,255,.015) 62%,transparent)!important;
}
body.home .dp4-hero{
  position:relative!important;
  min-height:440px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:#0c0e10!important;
  box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 70px rgba(255,106,0,.07)!important;
}
body.home .dp4-hero:before{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  width:420px!important;
  height:420px!important;
  right:-140px!important;
  top:-170px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(255,132,39,.34) 0%,rgba(255,106,0,.10) 38%,transparent 68%)!important;
  filter:blur(4px)!important;
}
body.home .dp4-hero:after{
  content:"DJPORT  /  DJ MUSIC  /  FLOW  /  MASTER"!important;
  position:absolute!important;
  z-index:5!important;
  left:18px!important;
  top:18px!important;
  pointer-events:none!important;
  color:rgba(255,255,255,.45)!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.22em!important;
  padding:6px 9px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(6,7,8,.62)!important;
  backdrop-filter:blur(10px)!important;
}
body.home .dp4-hero-art:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,transparent 0 62%,rgba(11,12,14,.8) 100%),
    linear-gradient(0deg,rgba(11,12,14,.78),transparent 38%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 72px)!important;
  mix-blend-mode:normal!important;
}
body.home .dp4-hero-copy{
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(155deg,rgba(255,106,0,.10),transparent 38%),
    linear-gradient(180deg,#191b1f,#111315)!important;
}
body.home .dp4-hero-copy:before{
  content:""!important;
  position:absolute!important;
  left:-18%!important;
  bottom:25px!important;
  width:138%!important;
  height:72px!important;
  opacity:.45!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,transparent 0 3%,var(--mk-accent) 3% 3.7%,transparent 3.7% 7%,rgba(255,255,255,.65) 7% 7.5%,transparent 7.5% 12%,var(--mk-accent) 12% 13%,transparent 13% 18%,rgba(255,255,255,.45) 18% 18.7%,transparent 18.7% 25%,var(--mk-accent) 25% 27%,transparent 27% 34%,rgba(255,255,255,.5) 34% 34.5%,transparent 34.5% 43%,var(--mk-accent) 43% 46%,transparent 46% 54%,rgba(255,255,255,.45) 54% 55%,transparent 55% 66%,var(--mk-accent) 66% 71%,transparent 71% 78%,rgba(255,255,255,.45) 78% 79%,transparent 79% 86%,var(--mk-accent) 86% 91%,transparent 91%)!important;
  clip-path:polygon(0 65%,3% 48%,6% 74%,10% 22%,13% 64%,18% 30%,22% 77%,27% 12%,31% 64%,36% 37%,40% 75%,45% 18%,49% 67%,54% 31%,58% 72%,63% 9%,68% 66%,72% 34%,76% 76%,81% 20%,86% 61%,91% 28%,95% 69%,100% 48%,100% 100%,0 100%)!important;
}
body.home .dp4-hero h1{
  position:relative!important;
  z-index:2!important;
  font-size:clamp(38px,4.2vw,70px)!important;
  line-height:.88!important;
  letter-spacing:-3.2px!important;
  text-shadow:0 10px 35px rgba(0,0,0,.5)!important;
}
body.home .dp4-hero p,
body.home .dp4-hero-actions,
body.home .dp4-eyebrow{position:relative!important;z-index:2!important}
body.home .dp4-quickdeck>a{
  position:relative!important;
  overflow:hidden!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease!important;
}
body.home .dp4-quickdeck>a:before{
  content:""!important;
  position:absolute!important;
  width:120px!important;
  height:120px!important;
  right:-62px!important;
  top:-66px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(255,106,0,.25),transparent 68%)!important;
}
body.home .dp4-quickdeck>a:hover{
  transform:translateY(-2px)!important;
  background:#202328!important;
}
body.home .dp4-feature-card{
  min-height:225px!important;
  box-shadow:0 18px 46px rgba(0,0,0,.28)!important;
}
body.home .dp4-feature-card:before{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  inset:auto 0 0!important;
  height:3px!important;
  background:linear-gradient(90deg,var(--mk-accent),rgba(255,106,0,0))!important;
}
body.home .dp4-panel,
body.home .dp4-artist-collections,
body.home .dp4-smart-packs,
body.home .dp-trend-section{
  position:relative!important;
}
body.home .dp4-panel:before,
body.home .dp4-artist-collections:before,
body.home .dp4-smart-packs:before,
body.home .dp-trend-section:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:42px!important;
  height:2px!important;
  background:var(--mk-accent)!important;
  box-shadow:50px 0 0 rgba(255,106,0,.26),100px 0 0 rgba(255,106,0,.10)!important;
}
body.home .dp4-collection-card{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
body.home .dp4-collection-card:hover{
  transform:translateY(-4px)!important;
  border-color:#4b5057!important;
  box-shadow:0 15px 32px rgba(0,0,0,.32)!important;
}
body.home .dp4-collection-art{position:relative!important}
body.home .dp4-collection-art:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 25%,transparent 70%,rgba(255,106,0,.12))!important;
}

@media(max-width:900px){
  body.home .dp4-content:before{inset:52px 0 68px 0!important}
  body.home .dp4-hero{min-height:0!important}
  body.home .dp4-hero:before{width:260px!important;height:260px!important;right:-120px!important;top:-90px!important}
  body.home .dp4-hero h1{font-size:38px!important;letter-spacing:-1.8px!important}
  body.home .dp4-hero:after{left:10px!important;top:10px!important;font-size:6px!important;letter-spacing:.12em!important}
}

/* DJPORT v28.02 — homepage cinematic hero. No functional changes. */
body.home .dp4-hero-copy:before{
  content:none!important;
  display:none!important;
  background:none!important;
  clip-path:none!important;
}

body.home .dp4-hero{
  min-height:520px!important;
  grid-template-columns:minmax(420px,.82fr) minmax(0,1.18fr)!important;
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:#07090b!important;
  box-shadow:0 36px 110px rgba(0,0,0,.56),0 0 90px rgba(255,106,0,.08)!important;
}
body.home .dp4-hero-copy{
  order:1!important;
  z-index:7!important;
  position:relative!important;
  padding:58px 38px 56px 48px!important;
  justify-content:center!important;
  background:
    linear-gradient(90deg,rgba(7,9,11,.98) 0%,rgba(7,9,11,.95) 62%,rgba(7,9,11,.40) 100%),
    radial-gradient(circle at 0 80%,rgba(255,106,0,.16),transparent 42%)!important;
}
body.home .dp4-hero-art{
  order:2!important;
  position:absolute!important;
  inset:0 0 0 34%!important;
  min-height:520px!important;
  z-index:1!important;
}
body.home .dp4-hero-art img{
  width:100%!important;
  height:100%!important;
  min-height:520px!important;
  object-fit:cover!important;
  object-position:center 44%!important;
  filter:saturate(.72) contrast(1.12) brightness(.78)!important;
  transform:scale(1.035)!important;
}
body.home .dp4-hero-art:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,#07090b 0%,rgba(7,9,11,.93) 16%,rgba(7,9,11,.48) 43%,rgba(7,9,11,.12) 72%,rgba(7,9,11,.34) 100%),
    linear-gradient(0deg,#07090b 0%,transparent 25%,transparent 72%,rgba(7,9,11,.55) 100%)!important;
}
body.home .dp4-art-overlay{
  z-index:8!important;
  left:auto!important;
  right:20px!important;
  bottom:20px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(7,9,11,.66)!important;
  backdrop-filter:blur(16px)!important;
}
body.home .dp4-hero:after{
  content:"DJPORT  •  MUSIC INTELLIGENCE  •  BUILT FOR DJS"!important;
  left:48px!important;
  top:26px!important;
  z-index:10!important;
  color:rgba(255,255,255,.58)!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  font-size:8px!important;
  letter-spacing:.24em!important;
}
body.home .dp4-hero h1{
  max-width:650px!important;
  margin:14px 0 18px!important;
  font-size:clamp(56px,5.7vw,92px)!important;
  line-height:.82!important;
  letter-spacing:-.065em!important;
  text-transform:uppercase!important;
  text-shadow:0 18px 54px rgba(0,0,0,.66)!important;
}
body.home .dp4-hero h1 em{
  display:block!important;
  margin-top:12px!important;
  font-size:.34em!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  color:#fff!important;
  background:linear-gradient(90deg,#fff 0%,#bfc5cd 58%,rgba(255,255,255,.38) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
body.home .dp4-hero p{
  max-width:460px!important;
  font-size:13px!important;
  color:#b3b8bf!important;
}
body.home .dp4-hero-actions{margin-top:24px!important;gap:8px!important}
body.home .dp4-hero-actions a{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 15px!important;
  letter-spacing:.07em!important;
  box-shadow:0 10px 30px rgba(255,106,0,.12)!important;
}

/* cinematic FX: smooth rings and light beams, no block/equalizer decoration */
body.home .dp4-hero-fx{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
body.home .dp4-hero-orbit{
  position:absolute!important;
  display:block!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 0 60px rgba(255,106,0,.05),inset 0 0 60px rgba(255,255,255,.02)!important;
}
body.home .dp4-hero-orbit-a{
  width:520px!important;height:520px!important;right:-105px!important;top:-105px!important;
  border-color:rgba(255,106,0,.32)!important;
  animation:dpOrbitPulse 6.5s ease-in-out infinite!important;
}
body.home .dp4-hero-orbit-b{
  width:330px!important;height:330px!important;right:-8px!important;top:36px!important;
  border-color:rgba(255,255,255,.14)!important;
  animation:dpOrbitPulse 8s ease-in-out infinite reverse!important;
}
body.home .dp4-hero-beam{
  position:absolute!important;
  display:block!important;
  width:62%!important;
  height:1px!important;
  transform-origin:left center!important;
  background:linear-gradient(90deg,transparent,rgba(255,106,0,.75),rgba(255,255,255,.35),transparent)!important;
  filter:drop-shadow(0 0 7px rgba(255,106,0,.35))!important;
  opacity:.7!important;
}
body.home .dp4-hero-beam-a{left:44%!important;top:22%!important;transform:rotate(16deg)!important}
body.home .dp4-hero-beam-b{left:52%!important;top:68%!important;transform:rotate(-13deg)!important;opacity:.38!important}
body.home .dp4-hero-glowpoint{
  position:absolute!important;
  display:block!important;
  right:8%!important;
  top:16%!important;
  width:170px!important;
  height:170px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(255,175,106,.60) 0%,rgba(255,106,0,.22) 19%,rgba(255,106,0,.08) 43%,transparent 68%)!important;
  filter:blur(3px)!important;
  animation:dpGlowFloat 7s ease-in-out infinite!important;
}
@keyframes dpOrbitPulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.035);opacity:.9}
}
@keyframes dpGlowFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.75}
  50%{transform:translate3d(-18px,14px,0) scale(1.08);opacity:1}
}

/* stronger visual rhythm below hero */
body.home .dp4-quickdeck{
  margin-top:-1px!important;
  position:relative!important;
  z-index:8!important;
  border-top:0!important;
}
body.home .dp4-quickdeck>a{
  min-height:104px!important;
  padding:17px 16px!important;
  background:linear-gradient(180deg,#17191c,#111315)!important;
}
body.home .dp4-quickdeck>a span{
  position:absolute!important;
  right:12px!important;
  top:10px!important;
  font-size:28px!important;
  line-height:1!important;
  color:rgba(255,255,255,.055)!important;
  letter-spacing:-.08em!important;
}
body.home .dp4-quickdeck>a b{font-size:17px!important}
body.home .dp4-quickdeck>a small{font-size:9px!important}
body.home .dp4-feature-card{
  min-height:270px!important;
  border-color:rgba(255,255,255,.12)!important;
}
body.home .dp4-feature-card .dp4-feature-bg{
  transform:scale(1.02)!important;
  transition:transform .45s ease!important;
}
body.home .dp4-feature-card:hover .dp4-feature-bg{transform:scale(1.07)!important}
body.home .dp4-feature-card:after{
  background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.44) 54%,rgba(0,0,0,.10))!important;
}
body.home .dp4-feature-copy strong{
  font-size:clamp(30px,3.4vw,52px)!important;
  line-height:.88!important;
  letter-spacing:-.045em!important;
}

@media(max-width:900px){
  body.home .dp4-hero{
    display:block!important;
    min-height:560px!important;
  }
  body.home .dp4-hero-copy{
    min-height:560px!important;
    padding:64px 18px 28px!important;
    justify-content:flex-end!important;
    background:linear-gradient(0deg,#07090b 0%,rgba(7,9,11,.88) 46%,rgba(7,9,11,.12) 100%)!important;
  }
  body.home .dp4-hero-art{
    inset:0!important;
    min-height:560px!important;
  }
  body.home .dp4-hero-art img{min-height:560px!important;height:560px!important;object-position:56% center!important}
  body.home .dp4-hero-art:after{
    background:linear-gradient(0deg,#07090b 0%,rgba(7,9,11,.94) 34%,rgba(7,9,11,.22) 75%,rgba(7,9,11,.48) 100%)!important;
  }
  body.home .dp4-hero:after{left:18px!important;top:18px!important;font-size:6px!important;letter-spacing:.12em!important}
  body.home .dp4-hero h1{font-size:clamp(49px,15vw,72px)!important;max-width:100%!important}
  body.home .dp4-hero h1 em{font-size:.31em!important;margin-top:9px!important}
  body.home .dp4-hero-orbit-a{width:390px!important;height:390px!important;right:-180px!important;top:-80px!important}
  body.home .dp4-hero-orbit-b{width:260px!important;height:260px!important;right:-85px!important;top:25px!important}
  body.home .dp4-hero-glowpoint{right:-35px!important;top:70px!important}
  body.home .dp4-hero-beam{width:90%!important;left:25%!important}
  body.home .dp4-art-overlay{display:none!important}
  body.home .dp4-feature-card{min-height:220px!important}
}
@media(prefers-reduced-motion:reduce){
  body.home .dp4-hero-orbit-a,
  body.home .dp4-hero-orbit-b,
  body.home .dp4-hero-glowpoint{animation:none!important}
}

/* DJPORT v28.03 — mobile/PWA navigation only. */
.dp-mobile-appnav{display:none!important}
@media(max-width:900px){
  .dp-mobile-appnav{
    position:sticky!important;
    top:50px!important;
    z-index:88!important;
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    width:100%!important;
    height:44px!important;
    background:rgba(12,14,16,.97)!important;
    border-bottom:1px solid #30343a!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  .dp-mobile-appnav button,
  .dp-mobile-appnav a{
    min-width:0!important;
    height:44px!important;
    margin:0!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border:0!important;
    border-right:1px solid #262a2f!important;
    border-radius:0!important;
    background:transparent!important;
    color:#eef1f4!important;
    -webkit-text-fill-color:#eef1f4!important;
    font:800 9px/1 Inter,Arial,sans-serif!important;
    letter-spacing:.07em!important;
    text-decoration:none!important;
    text-transform:uppercase!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    cursor:pointer!important;
  }
  .dp-mobile-appnav button:last-child,
  .dp-mobile-appnav a:last-child{border-right:0!important}
  .dp-mobile-appnav button:active,
  .dp-mobile-appnav a:active{background:#202328!important;color:var(--mk-accent)!important;-webkit-text-fill-color:var(--mk-accent)!important}
  .dp-mobile-appnav-back{justify-content:flex-start!important;padding-left:12px!important}
  .dp-mobile-appnav-menu{justify-content:flex-end!important;padding-right:12px!important}
  .dp-mobile-appnav-home{color:#cfd4da!important;-webkit-text-fill-color:#cfd4da!important}

  /* account for second sticky mobile bar */
  body.home .dp4-content:before{inset:94px 0 68px 0!important}
  .dp4-catalog-panel{top:94px!important}
}
@media(display-mode:standalone) and (max-width:900px){
  .dp-mobile-appnav{display:grid!important}
}

/* DJPORT v28.05 — mobile/PWA menu uses the ORIGINAL DJPORT catalog drawer. */
@media(max-width:900px){
  /* no black fullscreen backdrop on phones */
  .dp4-catalog-drawer .dp4-catalog-backdrop{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* closed state */
  .dp4-catalog-drawer:not(.is-open) .dp4-catalog-panel{
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateX(-105%)!important;
  }

  /* actual catalog panel */
  .dp4-catalog-panel{
    position:fixed!important;
    z-index:10080!important;
    top:94px!important;
    left:0!important;
    right:auto!important;
    bottom:var(--mk-player)!important;
    width:min(88vw,350px)!important;
    max-width:350px!important;
    height:auto!important;
    max-height:calc(100vh - 94px - var(--mk-player))!important;
    margin:0!important;
    padding:0 0 18px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:#111315!important;
    border:0!important;
    border-right:1px solid #363b42!important;
    border-radius:0!important;
    box-shadow:18px 0 42px rgba(0,0,0,.45)!important;
    transform:translateX(-105%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .18s ease,opacity .18s ease,visibility .18s ease!important;
  }
  .dp4-catalog-drawer.is-open .dp4-catalog-panel{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateX(0)!important;
  }

  .dp4-catalog-panel-head{
    position:sticky!important;
    top:0!important;
    z-index:4!important;
    min-height:50px!important;
    margin:0!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    background:#0d0f11!important;
    border-bottom:1px solid #30343a!important;
  }
  .dp4-catalog-panel-head span{color:var(--mk-accent)!important;font-size:8px!important;font-weight:900!important;letter-spacing:.14em!important}
  .dp4-catalog-panel-head strong{margin-left:0!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:11px!important}
  .dp4-catalog-close{
    margin-left:auto!important;
    width:34px!important;height:34px!important;
    border:1px solid #383d44!important;
    border-radius:2px!important;
    background:#1b1e22!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }

  .dp4-catalog-group{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-bottom:1px solid #292d32!important;
    background:#111315!important;
  }
  .dp4-catalog-group summary{
    min-height:44px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    list-style:none!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    cursor:pointer!important;
  }
  .dp4-catalog-group summary::-webkit-details-marker{display:none!important}
  .dp4-catalog-group summary:after{content:'＋';margin-left:auto!important;color:#858b94!important}
  .dp4-catalog-group[open] summary:after{content:'−';color:var(--mk-accent)!important}
  .dp4-catalog-group nav{display:block!important;padding:0!important;margin:0!important}
  .dp4-catalog-group a{
    min-height:40px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    background:#17191c!important;
    border:0!important;
    border-top:1px solid #22262b!important;
    border-radius:0!important;
    color:#d2d6dc!important;
    -webkit-text-fill-color:#d2d6dc!important;
    font-size:10px!important;
    font-weight:650!important;
    text-decoration:none!important;
  }
  .dp4-catalog-group a span{color:#d2d6dc!important;-webkit-text-fill-color:#d2d6dc!important}
  .dp4-catalog-group a b{color:#7f868f!important;-webkit-text-fill-color:#7f868f!important;font-size:8px!important}
  .dp4-catalog-group a:active{background:#22262a!important}

  /* mobile nav shows active menu state when original drawer is open */
  html.dp4-drawer-open .dp-mobile-appnav-menu,
  .dp4-catalog-drawer.is-open ~ * .dp-mobile-appnav-menu{
    color:var(--mk-accent)!important;
    -webkit-text-fill-color:var(--mk-accent)!important;
  }
}

/* DJPORT v28.06 — ROOT CAUSE FIX: old v27.06 CSS hid the entire catalog drawer on phones. */
@media(max-width:900px){
  /* Override legacy: .dp4-catalog-drawer{display:none!important} */
  .dp4-commandbar .dp4-catalog-drawer,
  body.dp-pwa-mode .dp4-commandbar .dp4-catalog-drawer{
    display:contents!important;
    visibility:visible!important;
  }

  /* We use the separate mobile MENU button, so hide only the duplicate top trigger. */
  .dp4-commandbar .dp4-catalog-trigger{
    display:none!important;
  }

  /* Closed state of the real catalog panel. */
  #dp4-catalog-drawer:not(.is-open) #dp4-catalog-panel{
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateX(-105%)!important;
  }

  /* Open state. Parent is no longer display:none, so this can finally render. */
  #dp4-catalog-drawer.is-open #dp4-catalog-panel{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateX(0)!important;
  }

  /* Keep catalog content itself visible despite legacy mobile cleanup rules. */
  #dp4-catalog-panel .dp4-catalog-panel-head,
  #dp4-catalog-panel .dp4-catalog-group,
  #dp4-catalog-panel .dp4-catalog-group nav,
  #dp4-catalog-panel .dp4-catalog-group a,
  #dp4-catalog-panel .dp4-catalog-group summary{
    visibility:visible!important;
  }
}

/* DJPORT v28.07 — FULL expandable mobile/PWA menu. */
.dp-mobile-fullmenu,.dp-mobile-fullmenu-backdrop{display:none!important}

@media(max-width:900px){
  .dp4-commandbar .dp4-catalog-drawer{display:none!important}

  .dp-mobile-fullmenu{
    display:block!important;
    position:fixed!important;z-index:12000!important;
    left:0!important;top:0!important;bottom:0!important;
    width:min(92vw,390px)!important;max-width:390px!important;
    padding:0 0 calc(var(--mk-player) + 16px)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    background:#101214!important;border-right:1px solid #353a40!important;
    box-shadow:24px 0 60px rgba(0,0,0,.58)!important;
    transform:translateX(-105%)!important;opacity:0!important;visibility:hidden!important;
    pointer-events:none!important;transition:transform .22s ease,opacity .22s ease,visibility .22s ease!important;
  }
  .dp-mobile-fullmenu.is-open{transform:translateX(0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}

  .dp-mobile-fullmenu-backdrop{
    display:block!important;position:fixed!important;z-index:11990!important;inset:0!important;
    background:rgba(0,0,0,.45)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:opacity .2s ease,visibility .2s ease!important;
  }
  html.dp-mobile-fullmenu-open .dp-mobile-fullmenu-backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  body.dp-mobile-fullmenu-open{overflow:hidden!important}

  .dp-mobile-fullmenu-head{
    position:sticky!important;top:0!important;z-index:5!important;min-height:66px!important;padding:0 14px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    background:rgba(12,14,16,.98)!important;border-bottom:1px solid #30343a!important;
  }
  .dp-mobile-fullmenu-head>div{display:flex!important;flex-direction:column!important;gap:4px!important}
  .dp-mobile-fullmenu-head span{color:var(--mk-accent)!important;-webkit-text-fill-color:var(--mk-accent)!important;font-size:8px!important;font-weight:950!important;letter-spacing:.18em!important}
  .dp-mobile-fullmenu-head strong{color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:15px!important;font-weight:900!important}
  .dp-mobile-fullmenu-close{width:38px!important;height:38px!important;padding:0!important;border:1px solid #3a3f46!important;border-radius:2px!important;background:#1b1e22!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:25px!important}

  .dp-mobile-fullmenu-primary{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1px!important;padding:1px!important;background:#2d3136!important}
  .dp-mobile-fullmenu-primary a{min-height:58px!important;padding:0 14px!important;display:flex!important;align-items:center!important;gap:9px!important;background:#17191c!important;color:#f0f2f4!important;-webkit-text-fill-color:#f0f2f4!important;font-size:10px!important;font-weight:850!important}
  .dp-mobile-fullmenu-primary a:first-child{color:var(--mk-accent)!important;-webkit-text-fill-color:var(--mk-accent)!important}

  .dp-mobile-fullmenu-group{margin:0!important;padding:0!important;background:#111315!important;border:0!important;border-bottom:1px solid #2b2f34!important}
  .dp-mobile-fullmenu-group>summary{min-height:52px!important;padding:0 14px!important;display:flex!important;align-items:center!important;list-style:none!important;cursor:pointer!important;background:#111315!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:10px!important;font-weight:950!important;letter-spacing:.08em!important;text-transform:uppercase!important}
  .dp-mobile-fullmenu-group>summary::-webkit-details-marker{display:none!important}
  .dp-mobile-fullmenu-group>summary:after{content:'＋'!important;margin-left:auto!important;color:#7d848d!important;-webkit-text-fill-color:#7d848d!important;font-size:16px!important}
  .dp-mobile-fullmenu-group[open]>summary:after{content:'−'!important;color:var(--mk-accent)!important;-webkit-text-fill-color:var(--mk-accent)!important}

  .dp-mobile-fullmenu-groupbody{display:block!important;padding:0!important;background:#17191c!important}
  .dp-mobile-fullmenu-groupbody a{min-height:42px!important;padding:0 16px 0 22px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;border-top:1px solid #24282d!important;background:#17191c!important;color:#d4d8de!important;-webkit-text-fill-color:#d4d8de!important;font-size:10px!important;font-weight:650!important;text-decoration:none!important}
  .dp-mobile-fullmenu-groupbody a:active{background:#22262a!important;color:var(--mk-accent)!important;-webkit-text-fill-color:var(--mk-accent)!important}
  .dp-mobile-fullmenu-groupbody a b{color:#737a83!important;-webkit-text-fill-color:#737a83!important;font-size:8px!important}

  .dp-mobile-appnav-menu[aria-expanded="true"]{background:#202328!important;color:var(--mk-accent)!important;-webkit-text-fill-color:var(--mk-accent)!important}
}