.mtc-map-player{
  display:flex;
  gap:14px;
  align-items:stretch;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  max-width: 980px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.mtc-map-cover{
  width:110px;
  min-width:110px;
  height:110px;
  border-radius:12px;
  overflow:hidden;
  background: rgba(0,0,0,.06);
}
.mtc-map-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mtc-map-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.mtc-map-meta{min-width:0}
.mtc-map-title{font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-map-artist{opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-map-controls{display:flex;gap:10px;align-items:center}
.mtc-map-btn{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  user-select:none;
}
.mtc-map-btn:active{transform: translateY(1px)}
.mtc-map-progress{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mtc-map-progress input[type=range]{width:100%}
.mtc-map-time{font-size:12px;opacity:.75;display:flex;justify-content:space-between}
.mtc-map-playlist{
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mtc-map-pl-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  cursor:pointer;
}
.mtc-map-pl-item[aria-current="true"]{
  outline:2px solid rgba(0,0,0,.18);
}
.mtc-map-pl-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-map-pl-artist{font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-map-pl-meta{min-width:0;flex:1}
.mtc-map-topchart{
  max-width: 980px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,.92);
}
.mtc-map-topchart-title{font-weight:900;margin-bottom:10px}
.mtc-map-topchart-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px}
.mtc-map-topchart-item{display:flex;align-items:center;gap:10px}
.mtc-map-topchart-cover{width:44px;height:44px;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.06)}
.mtc-map-topchart-cover img{width:100%;height:100%;object-fit:cover}
.mtc-map-topchart-meta{flex:1;min-width:0}
.mtc-map-topchart-track{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-map-topchart-artist{font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-map-topchart-action{min-width: 250px}
@media (max-width: 600px){
  .mtc-map-player{flex-direction:column}
  .mtc-map-cover{width:100%;min-width:0;height:180px}
  .mtc-map-controls{flex-wrap:wrap}
  .mtc-map-topchart-action{min-width: 0}
}


/* Spotify-style layout */
.mtc-spotify-app{display:flex;gap:0;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.10);background:#0b0b0f;color:rgba(255,255,255,.92);max-width:1200px}
.mtc-sp-sidebar{width:240px;min-width:240px;padding:18px 14px;background:#07070a;border-right:1px solid rgba(255,255,255,.06)}
.mtc-sp-brand{padding:10px 10px 14px}
.mtc-sp-logo{font-weight:1000;font-size:22px;letter-spacing:.2px}
.mtc-sp-sub{opacity:.75;font-size:12px;margin-top:2px}
.mtc-sp-nav{display:flex;flex-direction:column;gap:6px;padding:6px 6px 10px}
.mtc-sp-nav a{color:rgba(255,255,255,.86);text-decoration:none;padding:10px 10px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.02)}
.mtc-sp-nav a:hover{background:rgba(255,255,255,.05)}
.mtc-sp-nav a.is-active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10)}
.mtc-sp-tip{opacity:.7;font-size:12px;padding:10px 10px}
.mtc-sp-main{flex:1;min-width:0;padding:16px 16px 92px}
.mtc-sp-hero{border-radius:16px;padding:18px 18px;background:linear-gradient(135deg, rgba(255,0,160,.24), rgba(120,70,255,.20));border:1px solid rgba(255,255,255,.08);margin-bottom:16px}
.mtc-sp-hero-badge{display:inline-flex;gap:8px;align-items:center;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12)}
.mtc-sp-hero-title{font-weight:1000;font-size:28px;margin-top:10px}
.mtc-sp-hero-actions{margin-top:12px}
.mtc-sp-hero-btn{border:0;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer}
.mtc-sp-row{margin-top:14px}
.mtc-sp-row-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 10px}
.mtc-sp-row-head h2{margin:0;font-size:18px;font-weight:1000}
.mtc-sp-row-sub{opacity:.7;font-size:12px}
.mtc-sp-cards{display:flex;gap:12px;overflow:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.mtc-sp-card{width:160px;min-width:160px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px;cursor:pointer;position:relative;scroll-snap-align:start}
.mtc-sp-card:hover{background:rgba(255,255,255,.06)}
.mtc-sp-cover{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06)}
.mtc-sp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mtc-sp-card-meta{margin-top:10px;min-width:0}
.mtc-sp-card-title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-sp-card-sub{opacity:.75;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-sp-play{position:absolute;right:12px;bottom:56px;width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(255,0,160,.85);border:1px solid rgba(255,255,255,.14);transform:translateY(8px);opacity:0;transition:all .15s ease;font-weight:1000}
.mtc-sp-card:hover .mtc-sp-play{opacity:1;transform:translateY(0)}
.mtc-sp-footer{opacity:.6;font-size:12px;margin-top:18px;padding:6px 2px}
.mtc-sp-bottom{position:fixed;left:0;right:0;bottom:0;z-index:99999;display:flex;gap:14px;align-items:center;padding:10px 12px;background:rgba(10,10,14,.92);border-top:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:rgba(255,255,255,.92)}
.mtc-sp-bottom-left{display:flex;align-items:center;gap:10px;min-width:220px}
.mtc-sp-bottom-cover{width:48px;height:48px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06)}
.mtc-sp-bottom-cover img{width:100%;height:100%;object-fit:cover}
.mtc-sp-bottom-meta{min-width:0}
.mtc-sp-bottom-title{font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.mtc-sp-bottom-artist{opacity:.75;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.mtc-sp-bottom-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:center}
.mtc-sp-bottom-controls{display:flex;gap:10px;align-items:center}
.mtc-sp-ctl{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);border-radius:12px;padding:8px 10px;cursor:pointer;font-weight:900}
.mtc-sp-ctl.is-primary{border-radius:999px;padding:8px 14px;background:rgba(255,0,160,.85);border-color:rgba(255,255,255,.20)}
.mtc-sp-bottom-progress{width:min(720px,100%);display:flex;gap:10px;align-items:center}
.mtc-sp-bottom-progress input[type=range]{flex:1}
.mtc-sp-time{font-size:12px;opacity:.75;min-width:38px;text-align:center}
.mtc-sp-bottom-right{display:flex;align-items:center;gap:10px;min-width:220px;justify-content:flex-end}
.mtc-sp-vol{display:flex;align-items:center;gap:8px}
.mtc-sp-vol input[type=range]{width:120px}
@media (max-width:860px){.mtc-sp-sidebar{display:none}.mtc-spotify-app{border-radius:14px}.mtc-sp-bottom-right{display:none}.mtc-sp-bottom-left{min-width:160px}.mtc-sp-bottom-title,.mtc-sp-bottom-artist{max-width:160px}}