/* Tunelost Core 4.0.2 — shared UI polish and responsive fixes */
:root{
  --tl-ui-bg:#08090d;
  --tl-ui-surface:#14151c;
  --tl-ui-surface-2:#1a1b24;
  --tl-ui-border:rgba(255,255,255,.095);
  --tl-ui-text:#fff;
  --tl-ui-muted:#a6a6b2;
  --tl-ui-accent:#8b5cf6;
  --tl-ui-radius:20px;
  --tl-ui-shadow:0 20px 55px rgba(0,0,0,.28);
}

html{scroll-behavior:smooth}
body.tl-ui-v402{background:var(--tl-ui-bg);overflow-x:hidden}
body.tl-ui-v402 img{max-width:100%;height:auto}
body.tl-ui-v402 button,
body.tl-ui-v402 a,
body.tl-ui-v402 input,
body.tl-ui-v402 select,
body.tl-ui-v402 textarea{-webkit-tap-highlight-color:transparent}
body.tl-ui-v402 button,
body.tl-ui-v402 [role="button"]{touch-action:manipulation}
body.tl-ui-v402 :focus-visible{outline:3px solid rgba(167,139,250,.7);outline-offset:3px}

/* Consistent modern scrollbars */
.tlh-row,.tle-row,.tle-artist-row,.tll-tabs,.tls-live-panel{
  scrollbar-color:rgba(167,139,250,.45) transparent;
  scrollbar-width:thin;
}
.tlh-row::-webkit-scrollbar,.tle-row::-webkit-scrollbar,.tle-artist-row::-webkit-scrollbar,.tll-tabs::-webkit-scrollbar{height:6px}
.tlh-row::-webkit-scrollbar-thumb,.tle-row::-webkit-scrollbar-thumb,.tle-artist-row::-webkit-scrollbar-thumb,.tll-tabs::-webkit-scrollbar-thumb{background:rgba(167,139,250,.42);border-radius:999px}

/* Cards */
.tlh-card,.tle-card,.tll-card{transition:transform .24s ease,filter .24s ease}
.tlh-card:hover,.tle-card:hover,.tll-card:hover{transform:translateY(-4px)}
.tlh-cover,.tle-art,.tll-card-art{box-shadow:var(--tl-ui-shadow)}
.tlh-cover img,.tle-art img,.tll-card-art img{display:block}

/* Buttons */
.tlh-primary,.tle-primary,.tll-primary,.tlh-hero a,.tle-secondary,.tll-secondary,
.tlp-extra-btn,.tlp-close,.tlp-full-close,.tll-tabs button{
  transition:transform .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease;
}
.tlh-primary:hover,.tle-primary:hover,.tll-primary:hover,.tlh-hero a:hover,.tle-secondary:hover,.tll-secondary:hover{transform:translateY(-2px)}
.tlh-primary:active,.tle-primary:active,.tll-primary:active,.tlh-hero a:active,.tle-secondary:active,.tll-secondary:active{transform:translateY(0) scale(.98)}

/* Player safe-area and compact layout fixes */
body.tlp-player-active{padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
.tl-player{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;min-width:0}
.tl-player>*{min-width:0}
.tl-now strong,.tl-now span{max-width:100%}
.tlp-panel,.tlp-full{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.tlp-full-card>img{display:block}

/* Prevent long metadata from breaking public pages */
.tl-artist-public-details,.tl-growth-public,.tll-app,.tle-wrap,.tlh-wrap{overflow-wrap:anywhere}
.tl-artist-socials a{min-width:0}

/* Tablet */
@media (max-width:1024px){
  .tlh-wrap,.tle-wrap,.tll-app{max-width:100%}
  .tlh-artists{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tle-tax-grid,.tlh-tax-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-player{grid-template-columns:minmax(180px,1fr) minmax(300px,1.4fr) minmax(180px,.8fr);gap:12px!important;padding-left:14px!important;padding-right:14px!important}
  .tl-right #tl-volume{width:64px}
}

/* Mobile */
@media (max-width:760px){
  html{scroll-behavior:auto}
  body.tlp-player-active{padding-bottom:calc(74px + env(safe-area-inset-bottom))!important}
  .tl-player{bottom:0;height:calc(74px + env(safe-area-inset-bottom))!important;padding:7px 10px calc(7px + env(safe-area-inset-bottom))!important;border-radius:18px 18px 0 0}
  .tl-now{gap:9px}
  .tl-now img{flex:0 0 50px}
  .tl-now strong{font-size:13px!important;max-width:44vw!important}
  .tl-now span{font-size:11px!important;max-width:44vw!important}
  .tlp-panel{width:100%;border-left:0;border-top:1px solid var(--tl-ui-border);padding:20px 16px calc(28px + env(safe-area-inset-bottom))}
  .tlp-full{min-height:100dvh;padding:18px 16px calc(24px + env(safe-area-inset-bottom))}
  .tlp-full-card{width:100%}
  .tlp-full-card>img{width:min(78vw,360px)!important;max-height:42dvh;margin-bottom:20px!important}
  .tlp-full-progress{margin:20px 0 14px!important}
  .tlp-full-controls{gap:15px!important}
  .tlp-full-actions{margin-top:18px!important}

  /* Touch devices cannot hover, so keep play controls visible */
  .tlh-cover button,.tle-play,.tll-card-art span{opacity:1!important;transform:none!important}
  .tlh-cover button,.tle-play{width:44px;height:44px;right:10px;bottom:10px}

  .tlh-wrap,.tle-wrap,.tll-app{padding-left:12px!important;padding-right:12px!important}
  .tlh-hero,.tle-hero,.tll-hero{border-radius:22px!important}
  .tle-hero{grid-template-columns:1fr!important;min-height:520px;padding:24px!important;align-content:end}
  .tle-hero-art{position:absolute!important;inset:0;z-index:0!important}
  .tle-hero-art img{width:100%!important;height:100%!important;border-radius:0!important;transform:none!important;opacity:.42}
  .tle-hero-copy{z-index:2}
  .tle-hero h1{font-size:clamp(40px,13vw,58px)!important}
  .tle-search{height:52px;margin-top:22px}

  .tlh-row,.tle-row{grid-auto-columns:minmax(156px,72vw)!important;gap:13px!important;scroll-padding-left:2px}
  .tle-artist-row{grid-auto-columns:minmax(135px,44vw)!important;gap:14px!important}
  .tlh-section,.tle-section{margin-top:38px!important}
  .tlh-section h2,.tle-head h2,.tll-section-head h2{font-size:25px!important}
  .tlh-artists{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .tle-tax-grid,.tlh-tax-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .tle-tax,.tlh-tax{min-height:108px!important;padding:15px!important;border-radius:17px!important}
  .tle-tax strong,.tlh-tax strong{font-size:18px!important}

  .tll-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .tll-card{padding:10px!important;border-radius:15px!important}
  .tll-track{grid-template-columns:36px 48px minmax(0,1fr) auto!important;gap:8px!important;padding:8px!important}
  .tll-track-album,.tll-track time,.tll-track .tll-extra-action{display:none!important}
  .tll-hero{padding:24px!important}
  .tll-stats{gap:10px!important}
  .tll-modal{padding:10px!important;align-items:end!important}
  .tll-modal-card{border-radius:24px 24px 10px 10px!important;padding:24px 18px calc(22px + env(safe-area-inset-bottom))!important;max-height:90dvh;overflow:auto}

  .tl-growth-public{padding:14px!important;border-radius:16px!important}
  .tl-growth-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important}
  .tl-growth-stats div{min-width:0;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.035);text-align:center}
  .tl-growth-stats strong{font-size:19px!important}
  .tl-growth-stats small{font-size:10px}

  .tl-artist-socials{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .tl-artist-socials a{width:100%;padding:10px!important}
}

@media (max-width:390px){
  .tle-tax-grid,.tlh-tax-grid{grid-template-columns:1fr!important}
  .tll-card-grid{grid-template-columns:1fr 1fr!important}
  .tl-growth-stats{grid-template-columns:1fr 1fr!important}
  .tlp-full-card>img{width:min(74vw,300px)!important}
  .tlp-full-info h1{font-size:28px!important}
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .tlp-is-playing .tlp-equalizer i{animation:none!important;height:14px}
}