/* =========================================================
   THEME TOKENS
========================================================= */
:root{
  --bg:#0b0c10;
  --panel:#111320;
  --panel2:#0f111b;
  --text:#eef0f6;
  --muted:#a7adbb;
  --line:rgba(255,255,255,.08);
  --accent:#7c5cff;
  --accent2:#27d3a2;
  --shadow:0 16px 50px rgba(0,0,0,.35);
  --radius:18px;

  --cardbg:rgba(255,255,255,.03);
  --cardbg2:rgba(255,255,255,.05);
  --headerbg1:rgba(11,12,16,.92);
  --headerbg2:rgba(11,12,16,.70);

  /* url-encoded colors for inline svg */
  --searchStroke:%23a7adbb;
}

html[data-theme="light"]{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel2:#f1f4f9;
  --text:#111827;
  --muted:#6b7280;
  --line:rgba(17,24,39,.12);
  --shadow:0 16px 40px rgba(0,0,0,.08);

  --accent:#4f7cff;
  --accent2:#6ea8ff;

  --cardbg:rgba(255,255,255,.95);
  --cardbg2:rgba(255,255,255,1);
  --headerbg1:rgba(245,247,251,.92);
  --headerbg2:rgba(245,247,251,.70);

  --searchStroke:%236b7280;
}

/* =========================================================
   RESET / BASE
========================================================= */
*{box-sizing:border-box}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom:92px;
}

img,
svg,
video,
canvas,
iframe{
  max-width:100%;
}

a{color:inherit}

h1,h2,h3{margin:0}
h1{font-size:28px;line-height:1.15}

main{padding:18px 0 28px}
footer{padding:22px 0 40px;color:rgba(255,255,255,.45)}

html[data-theme="light"] footer{
  color:rgba(14,19,32,.55);
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

.sep{
  height:1px;
  background:var(--line);
  margin:14px 0;
}

.panel{}
.panel-pad{padding:16px}
.grid{display:grid;gap:14px}
.items{
  display:grid;
   grid-template-columns:repeat(7,1fr);
  gap:12px;
}

/* =========================================================
   FORMS / INPUTS
========================================================= */
input,
select,
textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:rgba(255,255,255,.85);
}

input::placeholder,
textarea::placeholder{
  color:rgba(231,235,255,.55);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color:rgba(14,19,32,.45);
}

/* =========================================================
   HEADER
========================================================= */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg,var(--headerbg1),var(--headerbg2));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header{
  height:60px;
  display:flex;
  align-items:center;
}

.topbar{
  display:grid;
  grid-template-columns:1fr minmax(320px,560px) 1fr;
  align-items:center;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:20px;
  text-decoration:none;
  height:60px;
}

.dot{
  margin-top:10px;
  width:100px;
  height:60px;
  position:relative;
  flex:0 0 100px;
}

.dot svg{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  display:block;
  margin-top:0;
}

.brand strong{
  font-size:24px;
  line-height:1;
  margin-left:-20px;
  margin-top:0;
  font-weight:600;
}

/* =========================================================
   TOP SEARCH
========================================================= */
.topsearch{
  justify-self:center;
  width:100%;
}

.topsearch .row{
  position:relative;
  display:flex;
  gap:10px;
}

.topsearch input{
  height:44px;
  border-radius:999px;
  padding-left:44px;
  background-repeat:no-repeat;
  background-position:16px 50%;
  background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='var(--searchStroke)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

.searchico{
  position:absolute;
  left:16px;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  background-color:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 104.472 10.004l4.762 4.762 1.414-1.414-4.762-4.762A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 104.472 10.004l4.762 4.762 1.414-1.414-4.762-4.762A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:.95;
  pointer-events:none;
}

/* =========================================================
   THEME BUTTON
========================================================= */
.themebtn{
  justify-self:end;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}

html[data-theme="light"] .themebtn{
  background:rgba(255,255,255,.75);
}

.themebtn:hover{
  background:rgba(255,255,255,.06);
}

html[data-theme="light"] .themebtn:hover{
  background:rgba(255,255,255,.92);
}

.themebtn .sun,
.themebtn .moon{
  font-size:14px;
  line-height:1;
}

html[data-theme="dark"] .themebtn .sun{display:none}
html[data-theme="light"] .themebtn .moon{display:none}

.themebtn--footer{
  height:36px;
  padding:0 14px;
}

/* =========================================================
   HEADER MENU
========================================================= */
.hmenu{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.hmenu__item{
  height:34px;
  padding:0 8px;
  border-radius:999px;
  border:0 !important;
  background:transparent !important;
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  font-weight:500 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  letter-spacing:.15px;
}

.hmenu__item:hover{
  background:transparent !important;
  border:0 !important;
  color:var(--text);
  text-decoration:underline;
}

/* =========================================================
   COMMON CARD / TILE
========================================================= */
.card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--cardbg);
  text-decoration:none;
}

.card:hover{
  border-color:rgba(255,255,255,.16);
  background:var(--cardbg2);
}

html[data-theme="light"] .card:hover{
  border-color:rgba(14,19,32,.18);
}

.logo{
  width:58px;
  height:58px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 58px;
  position:relative;
}

html[data-theme="light"] .logo{
  background:rgba(14,19,32,.06);
}

.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card .meta{min-width:0}

.title{
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card__image,
.card__image img{
  background:none;
  box-shadow:none;
  filter:none;
}


/* card play button */
.card .logo .cardPlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  /*width:56px;
  height:56px;*/
  border-radius:50%;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  transition:.2s;
  opacity:0;
}

.card:hover .logo .cardPlay{
  opacity:1;
}

.card .logo .cardPlay:hover{
  color:#000;
}

.card .logo .cardPlay.playing{
  background:#fff;
  color:#000;
}

/* =========================================================
   SECTION HEADERS
========================================================= */
.sectionhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 0 10px;
}

.sectiontitle{
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
}

.sectionh2{
  font-size:28px;
  font-weight:900;
  margin:26px 0 14px;
}

/* =========================================================
   TOP STRIP
========================================================= */
.topstrip{
  margin-bottom:24px;
  max-width:100%;
  overflow:hidden;
}

.topstrip__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  gap:12px;
  flex-wrap:wrap;
}

.topstrip__title{
  font-size:20px;
  font-weight:500;
  letter-spacing:.2px;
}

.topstrip__controls{
  display:flex;
  gap:8px;
}

.topstrip__btn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}

html[data-theme="light"] .topstrip__btn{
  background:rgba(255,255,255,.85);
}

.topstrip__btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

html[data-theme="light"] .topstrip__btn:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(14,19,32,.20);
}

.topstrip__row{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  scroll-behavior:smooth;
  max-width:100%;
  padding:8px 0 10px;
  overflow-y:visible;
}

.topstrip__row::-webkit-scrollbar{
  height:8px;
  display:none;
}

.topstrip__row .topcard{
  flex:0 0 auto;
  max-width:110px;
  max-height:110px;
  width:100%;
  aspect-ratio:1/1;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  cursor:pointer;
  transition:.25s;
}

.topstrip__row .topcard img{
  width:100%;
  height:auto;
  object-fit:contain;
  padding:0;
  display:block;
}

html[data-theme="light"] .topcard{
  background:#fff;
}

.topcard:hover{
  transform:none;
  border-color:rgba(255,255,255,.25);
}

/* fullstory variation */
.topstrip--fullstory .topstrip__row{
  gap:14px;
}

.topstrip--fullstory .topcard{
  flex:0 0 133px;
  height:133px;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  border-radius:16px;
}

.topstrip--fullstory .topcard img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   GENRES / COUNTRIES GRID
========================================================= */
.genres{
  margin-top:26px;
}

.genres__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.genres__title{
  font-size:20px;
  font-weight:500;
  letter-spacing:.2px;
}

.genres__chev{
  color:rgba(255,255,255,.65);
  font-size:22px;
  transform:translateY(1px);
}

html[data-theme="light"] .genres__chev{
  color:rgba(14,19,32,.55);
}

.genres__grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.genres__grid > a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  min-height:50px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
  text-decoration:none;
  overflow:hidden;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}

.genres__grid > a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}

.genres__grid > a > span:last-child{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:300;
}

.genre{
  height:56px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.40);
  background:rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  letter-spacing:.2px;
  transition:.18s;
  user-select:none;
}

.genre:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.06);
}

.genre__ico,
.genres__grid .genre__ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.genres__grid .genre__ico img{
  width:20px;
  height:20px;
  border-radius:5px;
}

.genres__grid .genre__ico img[src*="no_icon"]{
  opacity:.55;
}

html[data-theme="light"] .genre{
  border:1px solid rgba(14,19,32,.18);
  background:rgba(255,255,255,.85);
  color:rgba(14,19,32,.92);
}

html[data-theme="light"] .genre:hover{
  border-color:rgba(14,19,32,.28);
  background:rgba(255,255,255,.95);
}

/* =========================================================
   SEO BLOCK
========================================================= */
.seo{
  margin-top:50px;
  padding:40px 0 10px;
  border-top:1px solid var(--line);
}

.seo__title{
  text-align:center;
  font-size:28px;
  font-weight:900;
  margin-bottom:36px;
  letter-spacing:.3px;
}

.seo__item{
  margin-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-bottom:18px;
}

html[data-theme="light"] .seo__item{
  border-bottom:1px solid rgba(14,19,32,.08);
}

.seo__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  font-weight:500;
  font-size:18px;
  gap:12px;
}

.seo__arrow{
  font-size:18px;
  transition:.25s;
  opacity:.7;
}

.seo__item.open .seo__arrow{
  transform:rotate(180deg);
  opacity:1;
}

.seo__content{
  margin-top:16px;
  color:rgba(255,255,255,.75);
  line-height:1.7;
  font-size:15px;
  display:none;
}

html[data-theme="light"] .seo__content{
  color:rgba(14,19,32,.70);
}

.seo__item.open .seo__content{
  display:block;
}

.seo__content p{
  margin:0 0 14px;
}

/* static SEO */
.seo.seo-static{
  margin-top:50px;
  padding:40px 0 10px;
  border-top:1px solid var(--line);
}

.seo.seo-static h1,
.seo.seo-static h2,
.seo.seo-static h3,
.seo.seo-static h4{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:500;
  font-size:18px;
  margin:22px 0 12px;
  padding:0 0 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

html[data-theme="light"] .seo.seo-static h2,
html[data-theme="light"] .seo.seo-static h3,
html[data-theme="light"] .seo.seo-static h4{
  border-bottom:1px solid rgba(14,19,32,.08);
}

.seo.seo-static p{
  margin:0 0 14px;
  color:rgba(255,255,255,.75);
  line-height:1.7;
  font-size:15px;
}

html[data-theme="light"] .seo.seo-static p{
  color:rgba(14,19,32,.70);
}

.seo.seo-static h2 + p,
.seo.seo-static h3 + p,
.seo.seo-static h4 + p{
  margin-top:6px;
}

/* =========================================================
   FOOTER / LANG
========================================================= */
.footerbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:16px;
}

html[data-theme="light"] .footerbar{
  border-top:1px solid rgba(14,19,32,.08);
}

.flinks{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.flinks a{
  text-decoration:none;
  color:rgba(255,255,255,.65);
  font-size:13px;
}

.flinks a:hover{
  text-decoration:underline;
  color:rgba(255,255,255,.85);
}

html[data-theme="light"] .flinks a{
  color:rgba(14,19,32,.60);
}

html[data-theme="light"] .flinks a:hover{
  color:rgba(14,19,32,.85);
}

.langwrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
}

.langbtn{
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.75);
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

.langbtn:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.85);
}

html[data-theme="light"] .langbtn{
  border:1px solid rgba(14,19,32,.12);
  background:rgba(255,255,255,.85);
  color:rgba(14,19,32,.70);
}

html[data-theme="light"] .langbtn:hover{
  border-color:rgba(14,19,32,.22);
  background:rgba(255,255,255,.95);
  color:rgba(14,19,32,.90);
}

.langbtn .chev{opacity:.75}

.langpop{
  position:absolute;
  right:0;
  bottom:46px;
  width:min(620px,calc(100vw - 32px));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,13,18,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 55px rgba(0,0,0,.55);
  padding:14px;
  display:none;
  z-index:999;
}

.langpop.open{display:block}

html[data-theme="light"] .langpop{
  border:1px solid rgba(14,19,32,.10);
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 55px rgba(10,16,28,.18);
}

.langgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 14px;
  max-height:270px;
  overflow:auto;
  padding-right:6px;
}

.langgrid::-webkit-scrollbar{width:8px}
.langgrid::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

html[data-theme="light"] .langgrid::-webkit-scrollbar-thumb{
  background:rgba(14,19,32,.12);
}

.langitem{
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  text-decoration:none;
}

.langitem:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.20);
}

html[data-theme="light"] .langitem{
  border:1px solid rgba(14,19,32,.10);
  background:rgba(255,255,255,.90);
  color:rgba(14,19,32,.88);
}

html[data-theme="light"] .langitem:hover{
  background:rgba(255,255,255,.98);
  border-color:rgba(14,19,32,.18);
}

.flag{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
}

/* =========================================================
   FIXED BOTTOM PLAYER
========================================================= */
.bplayer{
  --player-accent:transparent;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  background:
    radial-gradient(
      1600px 360px at 10% 50%,
      rgba(var(--player-accent-rgb),.28) 0%,
      rgba(var(--player-accent-rgb),.16) 35%,
      rgba(var(--player-accent-rgb),.06) 55%,
      transparent 72%
    ),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border-top:1px solid var(--line);
  backdrop-filter:blur(10px);
}

.bplayer__inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
  align-items:center;
  gap:14px;
}

.bleft{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
}

.bcover{
  width:54px;
  height:54px;
  border-radius:14px;
  border:0;
  background:none;
  overflow:visible;
  display:grid;
  place-items:center;
  flex:0 0 54px;
  position:relative;
}


.bcover::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:76px;
  height:76px;
  transform:translate(-50%,-50%);
  border-radius:20px;
  filter:blur(18px);
  opacity:.85;
  z-index:-1;
  pointer-events:none;
}

.bcover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

.bmeta{
  min-width:0;
  overflow:hidden;
}

.bname{
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bsub{
  margin-top:3px;
  color:rgba(255,255,255,.65);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bcenter{
  width:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bplay{
  width:56px;
  height:56px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  background:#fff;
  color:#0b0c10;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}

.bplay:hover{
  filter:brightness(1.05);
}

.bplay svg{
  width:22px;
  height:22px;
}

.bright{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.bvol{
  position:absolute;
  bottom:60px;
  right:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:36px;
  height:140px;
  background:transparent;
  backdrop-filter:blur(10px);
}

.bright.volume-open .bvol{
  display:flex;
}

.bvol input[type="range"]{
  -webkit-appearance:slider-vertical;
  appearance:slider-vertical;
  width:6px;
  height:110px;
  background:transparent;
  accent-color:#fff;
}

.bicon{
  border:0;
  background:none;
  color:var(--text);
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bicon svg{
  width:22px;
  height:22px;
  display:block;
  opacity:.9;
}

.bicon:hover svg{
  opacity:1;
}

/* =========================================================
   BREADCRUMBS
========================================================= */
.breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.55);
  font-size:13px;
  margin:10px 0 14px;
}

html[data-theme="light"] .breadcrumbs{
  color:rgba(14,19,32,.55);
}

.breadcrumbs a{
  color:inherit;
  text-decoration:none;
}

.breadcrumbs a:hover{
  text-decoration:underline;
}

.breadcrumbs .sep{
  margin:0 2px;
  opacity:.6;
}

/* =========================================================
   STATION HERO / PAGE
========================================================= */
.shero{
  --accent:var(--accent);
  position:relative;
  border-radius:22px;
  border:1px solid var(--line);
  overflow:hidden;
  padding:22px;
  width:100% !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}

.shero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  pointer-events:none;
  background:radial-gradient(700px 320px at 15% 0%,var(--accent),transparent 65%);
  opacity:.18;
}

html[data-theme="light"] .shero{
  background:
    radial-gradient(900px 360px at 15% 0%,var(--accent) 0%,transparent 60%),
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  border-color:rgba(14,19,32,.12);
}

.shero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.shero__title{
  font-size:44px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.2px;
  margin:0;
}

.shero__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.shero__body{
  margin-top:18px;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:18px;
  align-items:start;
}

.sleft{min-width:0}
.splaystack{min-width:0}

.sbadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.75);
  font-size:12px;
  margin-top:10px;
}

.sbadge a{text-decoration:none}

html[data-theme="light"] .sbadge{
  border-color:rgba(14,19,32,.14);
  background:rgba(14,19,32,.04);
  color:rgba(14,19,32,.72);
}

.siconbtn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.siconbtn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

html[data-theme="light"] .siconbtn{
  border-color:rgba(14,19,32,.14);
  background:rgba(255,255,255,.78);
  color:rgba(14,19,32,.9);
}

html[data-theme="light"] .siconbtn:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(14,19,32,.20);
}

.slogo{
  width:160px;
  height:160px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  overflow:hidden;
  display:grid;
  place-items:center;
}

.slogo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

html[data-theme="light"] .slogo{
  border-color:rgba(14,19,32,.14);
  background:rgba(255,255,255,.88);
}

.splaybar,
.player-box{
  width:100% !important;
  max-width:100% !important;
}

.splaybar{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  padding:14px;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

html[data-theme="light"] .splaybar{
  border-color:rgba(14,19,32,.14);
  background:rgba(14,19,32,.04);
}

.splaymeta{
  min-width:0;
  text-align:left;
  align-items:flex-start;
}

.splaymeta .k{
  font-size:12px;
  color:rgba(255,255,255,.65);
}

.splaymeta .v{
  margin-top:4px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[data-theme="light"] .splaymeta .k{
  color:rgba(14,19,32,.55);
}

.splaybtn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:#fff;
  color:#0b0c10;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}

.splaybtn:hover{
  filter:brightness(1.03);
}

.splaybtn svg{
  width:18px;
  height:18px;
}

html[data-theme="light"] .splaybtn{
  background:#1f2937 !important;
  color:#fff !important;
}

.sgenres{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sgchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:0 !important;
  background:rgba(255,255,255,.06) !important;
  text-decoration:none;
  color:rgba(255,255,255,.80);
  font-size:13px;
}

.sgchip:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
}

html[data-theme="light"] .sgchip{
  background:#eef1f6 !important;
  color:#1f2937 !important;
  border:1px solid #d6dbe3 !important;
}

html[data-theme="light"] .sgchip:hover{
  background:#e5e9f1 !important;
  border-color:#cfd6df !important;
}

.slinks{margin-top:12px}

.slinks__row{
  display:flex !important;
  flex-wrap:wrap !important;
  margin-top:12px;
  gap:10px 10px !important;
  row-gap:10px !important;
  column-gap:10px !important;
}

.slinks__row .slink{
  margin-bottom:6px;
}

.slink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:13px;
}

.slink:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.3);
}

.slink svg{
  width:16px;
  height:16px;
  fill:currentColor;
  opacity:.9;
}

html[data-theme="light"] .slink{
  border-color:rgba(14,19,32,.14);
  background:rgba(255,255,255,.85);
  color:rgba(14,19,32,.72);
}

html[data-theme="light"] .slink:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(14,19,32,.20);
}

.srating{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  white-space:nowrap;
  color:rgba(255,255,255,.72);
}

.srating__label{opacity:.85}
.srating__value{
  font-weight:700;
  font-size:16px;
  color:var(--text);
}
.srating__count{
  opacity:.6;
  font-size:13px;
}

html[data-theme="light"] .srating{
  color:rgba(14,19,32,.62);
}

html[data-theme="light"] .srating__value{
  color:#111827 !important;
}

.sdesc{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:14px;
  min-width:0;
}

html[data-theme="light"] .sdesc,
html[data-theme="light"] .station-right{
  background:#f3f5f9 !important;
  border:1px solid #d8dde6 !important;
}

.sdesc__title{
  font-weight:900;
  font-size:14px;
  margin-bottom:10px;
  color:rgba(255,255,255,.85);
}

.sdesc__body{
  max-height:260px;
  overflow:auto;
  padding-right:6px;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.70);
}

html[data-theme="light"] .sdesc__title{
  color:rgba(14,19,32,.85);
}

html[data-theme="light"] .sdesc__body,
html[data-theme="light"] .station-desc,
html[data-theme="light"] .station-right{
  color:#1f2937 !important;
}

.sright{
  border-radius:28px;
  border:4px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.02);
  min-height:320px;
  overflow:hidden;
}

.sright__inner{
  width:100%;
  height:100%;
  min-height:320px;
}

html[data-theme="light"] .sright{
  border-color:rgba(14,19,32,.22);
  background:rgba(255,255,255,.86);
}

/* station layout */
.station-layout{
  display:grid !important;
  grid-template-columns:1.8fr 1fr !important;
  gap:24px !important;
  align-items:start;
}

.station-right{
  position:relative;
  overflow:hidden;
  display:block !important;
  width:100% !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.06) !important;
  min-height:340px;
  padding:24px !important;
}

.station-right::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:70%;
  height:55%;
  pointer-events:none;
  background:radial-gradient(600px 260px at 100% 100%,var(--accent),transparent 70%);
  opacity:.16;
  filter:blur(26px);
}

.station-right .desc-scroll{
  max-height:420px;
  overflow-y:auto;
  padding-right:8px;
}

.station-right .desc-scroll::-webkit-scrollbar{
  width:6px;
}

.station-right .desc-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);
  border-radius:10px;
}

.station-desc{
  max-height:320px;
  overflow:auto;
  padding-right:6px;
  font-size:14px;
}

.station-desc h1{
  font-size:16px;
  font-weight:500;
  letter-spacing:.2px;
}

#station-about{
  scroll-margin-top:90px;
}

#stationTrack{
  will-change:contents;
  backface-visibility:hidden;
  transform:translateZ(0);
  transition:opacity .25s ease;
}

/* =========================================================
   NEW STATION PAGE DESIGN
========================================================= */
.station-page{
  display:block;
}

.station-hero{
  margin:0 0 28px;
}

.station-hero__grid{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.station-hero__logo img{
  width:100%;
  max-width:220px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:24px;
  display:block;
}

.station-hero__main{
  min-width:0;
}

.station-hero__top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:14px;
}

.station-title{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.12;
  font-weight:500;
}

.station-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:14px;
  opacity:.82;
}

.station-meta__item{
  display:inline-flex;
  align-items:center;
}

.station-meta a{
  text-decoration:none;
}

.station-rating{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:14px;
}

.station-rating__value,
.station-rating__score{
  font-weight:700;
}

.station-summary{
  max-width:900px;
  margin:0 0 18px;
  font-size:14px;
  line-height:1.7;
  opacity:.92;
}

.station-summary__more{
  text-decoration:none;
  font-weight:600;
}

.station-player{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
}

.station-playbtn{
  width:56px;
  height:56px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--brand,#0ea5e9);
  color:#fff;
  padding:0;
}

.station-playbtn svg{
  width:24px;
  height:24px;
  margin-left:2px;
}

.station-player__meta{
  min-width:0;
}

.station-player__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.65;
  margin-bottom:4px;
}

.station-player__track{
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  word-break:break-word;
}

.station-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
}

.station-link{
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}

.station-genres{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.station-section{
  margin:0 0 34px;
}

.station-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.station-section__title{
  margin:0 0 14px;
  font-size:20px;
  line-height:1.2;
  font-weight:500;
}

.station-section__head .station-section__title{
  margin:0;
}

.station-about{
  font-size:15px;
  line-height:1.8;
}

.station-about h1,
.station-about h2,
.station-about h3{
  margin-top:0;
}

/* now artist */
.now-artist{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.now-artist__photo{
  width:88px;
  height:88px;
  border-radius:18px;
  object-fit:cover;
  flex:0 0 88px;
}

.now-artist__content{
  min-width:0;
  flex:1 1 auto;
}

.now-artist__line{
  font-size:16px;
  line-height:1.45;
  margin-bottom:8px;
  word-break:break-word;
}

.now-artist__line a{
  text-decoration:none;
}

.now-artist__track{
  opacity:.88;
}

.now-artist__bio{
  font-size:14px;
  line-height:1.7;
  opacity:.82;
}

.now-artist--empty{
  display:none;
}

/* =========================================================
   SIMILAR / STRIPS
========================================================= */
.similar{
  margin-bottom:10px;
}

.similar__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.similar__controls{
  display:flex;
  gap:8px;
}

.similar__btn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.similar__btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

html[data-theme="light"] .similar__btn{
  border-color:rgba(14,19,32,.14);
  background:rgba(255,255,255,.80);
  color:rgba(14,19,32,.9);
}

html[data-theme="light"] .similar__btn:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(14,19,32,.20);
}

.simrow{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:6px 0 10px;
}

.simrow::-webkit-scrollbar{
  height:8px;
  display:none;
}

.simcard{
  flex:0 0 170px;
  text-decoration:none;
  color:inherit;
}

.simthumb{
  width:170px;
  height:170px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#111;
}

.simthumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.simtitle{
  margin-top:10px;
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.simsub{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.60);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[data-theme="light"] .simthumb{
  border-color:rgba(14,19,32,.12);
  background:#fff;
}

html[data-theme="light"] .simsub{
  color:rgba(14,19,32,.55);
}

/* =========================================================
   CATALOG CONTROLS / VIEW / SORT
========================================================= */
.catalog-controls{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:0 0 12px;
}

.catalog-controls > div:first-child{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.catalog-controls .sort-links{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 auto;
  white-space:nowrap;
  margin:0 !important;
  padding:0 !important;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  position:relative;
  top:1px;
}

.catalog-controls .sort-links::-webkit-scrollbar{
  display:none;
}

.viewbtn,
.sortbar__link{
  width:36px !important;
  height:36px !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  line-height:0 !important;
  font-size:0 !important;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:inherit;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  transition:.18s ease;
}

.viewbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
}

.viewbtn svg,
.sortbar__link svg{
  width:24px !important;
  height:24px !important;
  display:block !important;
}

.viewbtn:hover,
.sortbar__link:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.25);
}

.viewbtn.active,
.sortbar__link.active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.35);
}

.sortbar{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.sortbar form{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.sort-links,
.sortbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 16px;
}

.sortbar__link{
  text-decoration:none;
  line-height:1;
  user-select:none;
  transition:.2s;
}

.sortbar__link.is-active::after{
  font-size:10px;
  margin-left:6px;
  opacity:.8;
}

.sortsel{
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:inherit;
  padding:8px 12px;
  border-radius:10px;
}

#fullsearch{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

html[data-theme="light"] .viewbtn,
html[data-theme="light"] .sortbar__link,
html[data-theme="light"] .sortsel{
  background:#ffffff !important;
  border:1px solid #d8dde6 !important;
  color:#1f2937 !important;
}

html[data-theme="light"] .viewbtn:hover,
html[data-theme="light"] .sortbar__link:hover{
  background:#f1f4f8 !important;
  border-color:#cfd6df !important;
}

html[data-theme="light"] .viewbtn.is-active,
html[data-theme="light"] .sortbar__link.is-active{
  background:#f1f4f8 !important;
  border-color:#cfd6df !important;
  color:#111827 !important;
}

/* list mode */
#stations.is-list{
  display:flex !important;
  flex-direction:column;
  gap:10px;
}

#stations.is-list .card{
  display:flex;
  align-items:center;
  gap:12px;
}

/*#stations.is-list .card .logo{
  flex:0 0 56px;
}*/

#stations.is-list .card .logo img{
  /*width:56px;
  height:56px;*/
  object-fit:cover;
  border-radius:12px;
}

/* desc toggle by mode */
#stations:not(.is-list) .cardDesc{
  display:none;
}

#stations.is-list .cardDesc{
  display:block;
}

/* =========================================================
   PAGER
========================================================= */
.pager{
  margin:30px 0 20px;
  width:100%;
}

.pager-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.pager-arrows{
  display:flex;
}

.pager-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  transition:.2s;
}

.pager-btn a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-decoration:none;
  color:#fff;
}

.pager-btn:hover{
  background:rgba(255,255,255,.12);
}

.pager-pages{
  display:flex;
  align-items:center !important;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.pager-pages a,
.pager-pages span{
  min-width:38px;
  height:38px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  color:#fff;
  font-size:14px;
  transition:.2s;
}

.pager-pages a:hover{
  background:rgba(255,255,255,.12);
}

.pager-pages .nav_ext{
  background:transparent !important;
  border:0 !important;
  color:rgba(255,255,255,.6) !important;
  min-width:auto;
  padding:0 6px;
  height:auto;
  background:#fff;
  border-color:#fff;
}

html[data-theme="light"] .pager-btn,
html[data-theme="light"] .pager-pages a,
html[data-theme="light"] .pager-pages span{
  background:#ffffff !important;
  border-color:#d8dde6 !important;
  color:#1f2937 !important;
}

html[data-theme="light"] .pager-pages a:hover,
html[data-theme="light"] .pager-btn:hover{
  background:#f1f4f8 !important;
  border-color:#cfd6df !important;
}

html[data-theme="light"] .pager-pages .nav_ext{
  color:#6b7280 !important;
}

html[data-theme="light"] .pager-pages span:not(.nav_ext){
  background:#f1f4f8 !important;
  border-color:#cfd6df !important;
  color:#111827 !important;
  font-weight:700;
}

/* artist index pager */
.pager-pages.artist-index{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px;
  flex-wrap:wrap !important;
  overflow:visible !important;
  white-space:normal !important;
  width:100%;
  box-sizing:border-box;
  padding:0 10px;
}

.pager-pages.artist-index a,
.pager-pages.artist-index span{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-size:13px !important;
  line-height:1 !important;
  font-weight:500;
  text-decoration:none !important;
  transition:.2s;
}

.pager-pages.artist-index a:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}

.pager-pages.artist-index span{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.12);
  color:#fff;
  font-weight:700;
}

.pager-pages.artist-index a.reset{
  padding:0 12px;
  font-weight:600;
}

/* =========================================================
   RADIO HISTORY
========================================================= */
.rhist{
  margin:16px 0;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.rhist__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.rhist__title{
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
}

.rhist__clear{
  background:transparent;
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.85);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
}

.rhist__clear:hover{
  border-color:rgba(255,255,255,.28);
}

.rhist__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rhist__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.12);
}

.rhist__item:hover{
  border-color:rgba(255,255,255,.22);
}

.rhist__cover{
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  flex:0 0 38px;
  background-size:cover;
  background-position:center;
}

.rhist__meta{
  min-width:0;
  flex:1 1 auto;
}

.rhist__name{
  font-weight:700;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rhist__sub{
  margin-top:2px;
  font-size:12px;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rhist__badge{
  font-size:11px;
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.15);
  padding:4px 8px;
  border-radius:999px;
  flex:0 0 auto;
}

.rhist__empty{
  font-size:13px;
  color:rgba(255,255,255,.6);
  padding:10px 2px;
}

/* track history alt */
.rthist__list2{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.rthist__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.rthist__list a{
  text-decoration:none;
  color:inherit;
}

.rthist__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 0;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:10px;
  transition:background .18s ease;
}

.rthist__item:hover{
  background:rgba(255,255,255,.05);
}

html[data-theme="light"] .rthist__item:hover{
  background:rgba(0,0,0,.05);
}

.rthist__cover{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

.rthist__cover--none{
  display:none !important;
}

.rthist__txt{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
  line-height:1.4;
  opacity:.92;
  color:inherit;
  font-weight:500;
  letter-spacing:.01em;
}

.rthist__txt span{
  opacity:.75;
}

.rthist__txt a{
  text-decoration:none;
}

.rthist__txt a:hover{
  text-decoration:none;
}

.rthist__empty{
  margin-top:12px;
  opacity:.7;
}

/* =========================================================
   SOCIAL LINKS / ICON BUTTONS
========================================================= */
.social-links,
.artist-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.social-links .slink{
  position:relative;
  width:32px;
  height:32px;
  padding:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  transition:.18s ease;
  color:var(--brand,#0ea5e9);
  font-size:0;
  line-height:0;
}

html[data-theme="light"] .social-links .slink,
html[data-theme="light"] .artist-links .slink{
  border:1px solid rgba(14,19,32,.10);
  background:#fff;
  box-shadow:0 6px 18px rgba(14,19,32,.06);
}

.social-links .slink:hover,
.artist-links .slink:hover{
  transform:translateY(-2px);
}

.social-links .slink::before{
  content:"";
  width:22px;
  height:22px;
  background-color:currentColor;
  -webkit-mask:var(--mask) center/contain no-repeat;
  mask:var(--mask) center/contain no-repeat;
}

.artist-links .slink{
  position:relative;
  min-height:32px;
  padding:0 12px 0 36px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  transition:.18s ease;
  color:#fff;
  font-size:13px;
  line-height:1;
}

.artist-links .slink::before{
  content:"";
  position:absolute;
  left:8px;
  width:18px;
  height:18px;
  background-color:var(--brand,#0ea5e9);
  -webkit-mask:var(--mask) center/contain no-repeat;
  mask:var(--mask) center/contain no-repeat;
}

/* brands */
.slink--website{
  --brand:#0ea5e9;
  --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18'/%3E%3Cpath d='M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E");
}
.slink--facebook{
  --brand:#1877F2;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M22%2012a10%2010%200%201%200-11.5%209.87V15h-2.6v-3h2.6V9.8c0-2.57%201.53-3.99%203.87-3.99%201.12%200%202.29.2%202.29.2v2.52h-1.29c-1.27%200-1.67.79-1.67%201.6V12h2.84l-.45%203h-2.39v6.87A10%2010%200%200%200%2022%2012z%27/%3E%3C/svg%3E");
}
.slink--x{
  --brand:#fff;
  --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.4 3h2.2l-5.7 6.5L21 21h-5l-4-5.2L6.9 21H4.7l6-6.8L3 3h5l3.6 4.8L17.4 3zm-1 16h1.2L7.3 4.1H6l10.4 14.9z'/%3E%3C/svg%3E");
}
.slink--instagram{
  --brand:#E1306C;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%202h10a5%205%200%200%201%205%205v10a5%205%200%200%201-5%205H7a5%205%200%200%201-5-5V7a5%205%200%200%201%205-5zm5%206a4%204%200%201%200%200%208%204%204%200%200%200%200-8zm6-1.5a1%201%200%201%201-2%200%201%201%200%200%201%202%200z%27/%3E%3C/svg%3E");
}
.slink--telegram{
  --brand:#229ED9;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M22%203L2.8%2010.3c-1.1.4-1.1%201%20.2%201.4l4.9%201.5L19.1%206c.5-.3.9.1.6.4l-9%208.2-.3%204.7c.6%200%20.9-.2%201.2-.5l2.4-2.3%204.9%203.6c.9.5%201.5.2%201.7-.9L23%204.1c.3-1.4-.5-2-1-1.1z%27/%3E%3C/svg%3E");
}
.slink--tiktok{
  --brand:#fff;
  --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 2c.3 1.8 1.6 3.3 3.5 3.7v3a7 7 0 0 1-3.5-1v6.4a5.4 5.4 0 1 1-4.6-5.4v3a2.4 2.4 0 1 0 1.6 2.3V2H15Z'/%3E%3C/svg%3E");
}
.slink--vk{
  --brand:#0077FF;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M21.6%207.1c.1-.4%200-.7-.6-.7h-2.2c-.5%200-.8.3-.9.6%200%200-1.1%202.7-2.7%204.5-.5.5-.7.7-1%20.7-.1%200-.3-.2-.3-.6V7.1c0-.6-.2-.7-.6-.7H9.6c-.4%200-.6.3-.6.5%200%20.5.8.6.9%202.1v3.2c0%20.7-.1.8-.4.8-.7%200-2.6-2.7-3.6-5.9-.2-.6-.4-.9-1-.9H2.8c-.6%200-.8.3-.8.6%200%20.6.7%203.5%203.5%207.3%201.8%202.6%204.4%204%206.7%204%201.4%200%201.6-.3%201.6-.9v-2c0-.6.1-.8.6-.8.3%200%20.9.2%202.2%201.4%201.5%201.5%201.7%202.2%202.6%202.2H21c.6%200%20.9-.3.7-.9-.2-.6-.9-1.5-1.9-2.6-.5-.6-1.3-1.3-1.5-1.6-.3-.4-.2-.6%200-1%200%200%202.7-3.8%203-5z%27/%3E%3C/svg%3E");
}
.slink--youtube{
  --brand:#FF0000;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23%207.7s-.2-1.7-.9-2.5c-.8-.9-1.7-.9-2.1-1C17.1%204%2012%204%2012%204h0s-5.1%200-8%20.2c-.4%200-1.3.1-2.1%201C1.2%206%201%207.7%201%207.7S.8%209.6.8%2011.5v1c0%201.9.2%203.8.2%203.8s.2%201.7.9%202.5c.8.9%201.9.9%202.4%201%201.7.2%207.7.2%207.7.2s5.1%200%208-.2c.4%200%201.3-.1%202.1-1%20.7-.8.9-2.5.9-2.5s.2-1.9.2-3.8v-1c0-1.9-.2-3.8-.2-3.8zM10%2015.5V8.5l6%203.5-6%203.5z%27/%3E%3C/svg%3E");
}
.slink--whatsapp{
  --brand:#25D366;
  --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.5 15.3L2.8 22l4.8-1.3A10 10 0 1 0 12 2Zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-2.8.7.7-2.7-.2-.3A8 8 0 1 1 12 20Zm3.7-5.3c-.2-.1-1.3-.6-1.5-.7-.2-.1-.3-.1-.4.1-.1.2-.6.7-.7.8-.1.1-.2.1-.4.1-.2-.1-1-.4-1.8-1.1-.6-.6-1.1-1.3-1.2-1.5-.1-.2 0-.3.1-.4l.3-.4c.1-.1.1-.2.2-.3.1-.1 0-.2 0-.3s-.4-1-.6-1.3c-.1-.3-.3-.3-.4-.3h-.4c-.1 0-.3 0-.5.2s-.7.7-.7 1.6.7 1.8.8 2c.1.1 1.4 2.2 3.4 3.1.5.2.9.4 1.2.5.5.2.9.2 1.3.1.4-.1 1.1-.5 1.2-.9.2-.4.2-.8.1-.9 0-.1-.2-.1-.4-.2Z'/%3E%3C/svg%3E");
}
.slink--discord{
  --brand:#5865F2;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%204a16%2016%200%200%200-4-1l-.3.6a14%2014%200%200%200-7.4%200L8%203a16%2016%200%200%200-4%201C2.3%206.6%201.6%209.2%202%2012c1.2%202.2%202.7%203.9%205%205l.9-1.1c-.5-.2-1-.5-1.4-.8l.3-.2c2.7%201.2%205.6%201.2%208.4%200l.3.2c-.4.3-.9.6-1.4.8l.9%201.1c2.3-1.1%203.8-2.8%205-5%20.4-2.8-.3-5.4-2-8zM9.2%2013.5c-.7%200-1.2-.6-1.2-1.4s.5-1.4%201.2-1.4%201.2.6%201.2%201.4-.5%201.4-1.2%201.4zm5.6%200c-.7%200-1.2-.6-1.2-1.4s.5-1.4%201.2-1.4%201.2.6%201.2%201.4-.5%201.4-1.2%201.4z%27/%3E%3C/svg%3E");
}
.slink--twitch{
  --brand:#9146FF;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%202h18v12l-6%206h-5l-2%202H7v-2H4V2zm3%204v11h3v2.1L12.1%2017H17l4-4V5H7zm9%202h2v6h-2V8zm-5%200h2v6h-2V8z%27/%3E%3C/svg%3E");
}
.slink--reddit{
  --brand:#FF4500;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M14.3%202.2l-.9%204.1c1.5.2%202.9.8%204%201.6l2.8-2a1.6%201.6%200%201%201%201.8%202.6l-2.7%201.9c.2.6.3%201.2.3%201.9%200%204-4.1%207.3-9.1%207.3S2.4%2016.4%202.4%2012.4c0-.7.1-1.3.3-1.9L0%208.6A1.6%201.6%200%201%201%201.8%206l2.8%202c1.2-.9%202.7-1.5%204.3-1.7l1.1-5%204.3.9zM8.2%2013.4a1.2%201.2%200%201%200%200-2.4%201.2%201.2%200%200%200%200%202.4zm6.2%200a1.2%201.2%200%201%200%200-2.4%201.2%201.2%200%200%200%200%202.4zM8.3%2016c1.2%201.2%205%201.2%206.2%200l-1.1-1.1c-.7.7-3.3.7-4%200L8.3%2016z%27/%3E%3C/svg%3E");
}
.slink--linkedin{
  --brand:#0A66C2;
  --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.2 9h2.7v9H6.2V9zm1.35-3.9a1.55 1.55 0 1 1 0 3.1 1.55 1.55 0 0 1 0-3.1zM11 9h2.6v1.3c.5-.9 1.6-1.5 3-1.5 2.4 0 3.4 1.5 3.4 4v5.2h-2.7v-4.8c0-1.4-.5-2.2-1.7-2.2-1.2 0-1.9.9-1.9 2.2v4.8H11V9z'/%3E%3C/svg%3E");
}
.slink--ok{
  --brand:#EE8208;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2012.3a4.6%204.6%200%201%200%200-9.2%204.6%204.6%200%200%200%200%209.2zm0-7.1a2.5%202.5%200%201%201%200%205%202.5%202.5%200%200%201%200-5zm5.6%208.4a1.4%201.4%200%200%201%200%202.8c-1.2%200-2.3.4-3.6.8l1.8%201.8a1.4%201.4%200%200%201-2%202l-1.8-1.8-1.8%201.8a1.4%201.4%200%200%201-2-2l1.8-1.8c-1.3-.4-2.4-.8-3.6-.8a1.4%201.4%200%200%201%200-2.8c2.2%200%204%20.7%205.6%201.2%201.6-.5%203.4-1.2%205.6-1.2z%27/%3E%3C/svg%3E");
}
.slink--soundcloud{
  --brand:#FF5500;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M11%2011.2c.6-3.4%203.2-5.7%206.4-5.7%203.6%200%206.6%203.1%206.6%206.8%200%203.1-2.5%205.7-5.5%205.7H8.8V12c0-.4%200-.7-.1-1.1L11%2011.2zM6%2012v6H4v-6h2zm-3%201v5H2v-5h1zm6-3v8H7V10h2z%27/%3E%3C/svg%3E");
}
.slink--spotify{
  --brand:#1DB954;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm4.6%2014.5a.9.9%200%200%201-1.2.3c-2.9-1.8-6.6-2.2-11.1-1.2a.9.9%200%200%201-.4-1.7c4.9-1.1%209-.6%2012.4%201.4.4.2.5.8.3%201.2zm1-3a1.1%201.1%200%200%201-1.5.4c-3.3-2-8.3-2.6-12.1-1.4a1.1%201.1%200%201%201-.7-2.1c4.4-1.4%2010.1-.7%2014%201.7.5.3.6.9.3%201.4zm.1-3.1C14.8%208.8%209.1%208.6%205%209.9a1.2%201.2%200%200%201-.8-2.2c4.7-1.6%2011-1.4%2015.1%201.1a1.2%201.2%200%200%201-1.6%201.6z%27/%3E%3C/svg%3E");
}
.slink--applemusic{
  --brand:#FA243C;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M16%202v12.2c-.6-.5-1.5-.8-2.5-.8-2%200-3.5%201.2-3.5%202.8S11.5%2019%2013.5%2019%2017%2017.8%2017%2016V7h4V3h-5z%27/%3E%3C/svg%3E");
}
.slink--deezer{
  --brand:#A238FF;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%2016h4v5H3v-5zm0-7h4v5H3V9zm6%203h4v9H9v-9zm0-7h4v5H9V5zm6%207h4v9h-4v-9zm0-7h4v5h-4V5zm6%207h2v9h-2v-9zm0-7h2v5h-2V5z%27/%3E%3C/svg%3E");
}
.slink--mixcloud{
  --brand:#314359;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%2011.5c0-2.5%202-4.5%204.5-4.5%201.4%200%202.7.6%203.5%201.7.6-.5%201.4-.7%202.2-.7%202.1%200%203.8%201.7%203.8%203.8V18H7v-6.5zm2%200V16h2v-4.5H9zm4%200V16h2v-4.5h-2zm4%200V16h2v-4.5h-2z%27/%3E%3C/svg%3E");
}
.slink--bandcamp{
  --brand:#1DA0C3;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%2017l7-10h11l-7%2010H3z%27/%3E%3C/svg%3E");
}
.slink--rutube{
  --brand:#2B2BFF;
  --mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%207h10a5%205%200%200%201%200%2010H7A5%205%200%200%201%207%207zm4%203.5V14l4-2-4-1.5z%27/%3E%3C/svg%3E");
}

/* =========================================================
   ARTISTS
========================================================= */
.artist-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.artist-card{margin:0}

.artist-link{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--cardbg);
  text-decoration:none;
  color:inherit;
  transition:.2s;
  height:100%;
}

.artist-link:hover{
  border-color:rgba(255,255,255,16);
  background:var(--cardbg2);
}

html[data-theme="light"] .artist-link:hover{
  border-color:rgba(14,19,32,18);
}

.artist-photo{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,05);
}

.artist-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

html[data-theme="light"] .artist-photo{
  background:rgba(14,19,32,06);
}

.artist-name{
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.artist-bio{
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
  max-height:calc(1.55em * 4);
  overflow:hidden;
}

/* artist page */
.artist-page{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:20px;
  margin-top:20px;
}

.artist-page-photo img{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}

.artist-page-bio{
  margin:0 0 24px;
  font-size:15px;
  line-height:1.4;
  color:rgba(255,255,255,.82);
}

.artist-page-bio h1,
.artist-page-bio h2,
.artist-page-bio h3{
  font-size:20px;
}

.artist-page-bio a{
  text-decoration:none;
}

.artist-description h1,
.artist-description h2,
.artist-description h3{
  font-size:20px;
  font-weight:500;
  letter-spacing:.2px;
}

/* artist stations */
.artist-stations-block{
  margin:20px 0;
}

.artist-stations-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding-top:10px;
}

.artist-station-tile{
  width:60px;
  height:60px;
}

.artist-station-tile__link{
  display:block;
  width:100%;
  height:100%;
}

.artist-station-tile__logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}

/* related artists */
.artist-related{
  margin:30px 0;
}

.artist-related__list{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.artist-related-item{
  width:80px;
}

.artist-related-item__link{
  display:block;
  text-align:center;
  text-decoration:none;
  color:inherit;
}

.artist-related-item__photo{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:8px;
}

.artist-related-item__name{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.2;
}

/* =========================================================
   HOME ARTISTS BLOCK
========================================================= */
.artists-home{
  margin:40px 0 30px;
}

.artists-home__head{
  margin-bottom:20px;
}

.artists-home__title{
  font-size:20px;
  font-weight:500;
}

.artists-home__body{
  display:flex;
  justify-content:center;
}

.radio-popular{
  margin:24px 0;
}

.radio-popular__grid{
  display:grid;
  grid-template-columns:repeat(6,164px);
  justify-content:center;
  gap:26px;
}

.radio-popular__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:#fff;
  transition:transform .22s ease,opacity .22s ease;
}

.radio-popular__item:hover{
  transform:translateY(-4px);
}

.radio-popular__img-wrap{
  position:relative;
  width:164px;
  height:164px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:14px;
  background:rgba(255,255,255,.04);
  box-shadow:
    0 12px 34px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.radio-popular__img-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:box-shadow .25s ease,opacity .25s ease;
  opacity:1;
}

.radio-popular__item:hover .radio-popular__img-wrap{
  transform:scale(1.04);
  box-shadow:
    0 16px 38px rgba(0,0,0,.38),
    0 0 24px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.14);
}

.radio-popular__item:hover .radio-popular__img-wrap::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 18px rgba(255,255,255,.10);
}

.radio-popular__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform .35s ease;
}

.radio-popular__item:hover .radio-popular__img{
  transform:scale(1.08);
}

.radio-popular__name{
  display:block;
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
  white-space:normal;
  max-width:150px;
  color:#fff;
}

.radio-popular__plays{
  display:none;
}

/* =========================================================
   HIDE EXTERNAL WIDGET
========================================================= */
[id^="__wau72g"],
iframe[src*="waust"],
img[src*="waust"]{
  display:none !important;
  visibility:hidden !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1200px){
  .genres__grid{grid-template-columns:repeat(4,1fr)}
  .radio-popular__grid{
    grid-template-columns:repeat(4,140px);
    gap:22px;
  }
  .radio-popular__img-wrap{
    width:140px;
    height:140px;
  }
  .radio-popular__name{
    max-width:140px;
    font-size:14px;
  }
}

@media (max-width:1100px){
  .artist-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1024px){
  .brand{
    margin:0 auto 12px auto;
  }
}

@media (min-width:768px) and (max-width:1024px){
  .shero__body{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:20px;
  }
  .slogo{flex:0 0 auto}
  .splaystack{flex:1 1 auto}
}

@media (max-width:980px){
  .station-layout{grid-template-columns:1fr !important}
  .sright,
  .sright__inner{
    min-height:220px;
  }
  .station-hero__grid{
    grid-template-columns:160px minmax(0,1fr);
    gap:20px;
  }
  .station-title{
    font-size:28px;
  }
}

@media (max-width:900px){
  .station-layout{
    display:block !important;
    grid-template-columns:1fr !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:12px !important;
    padding-right:12px !important;
    gap:0 !important;
    box-sizing:border-box;
  }

  .station-layout > .shero,
  .station-layout > .shero .shero__grid,
  .station-layout > .shero .sleft,
  .station-layout > .shero .shero__body,
  .station-layout .sleft,
  .station-layout .station-right{
    width:100% !important;
    max-width:100% !important;
  }

  .station-layout > .shero .shero__grid,
  .station-layout .shero__grid{
    display:block !important;
  }

  .station-layout > .station-right,
  .station-layout .station-right{
    width:100% !important;
    max-width:100% !important;
    margin:12px 0 0 !important;
  }

  .slinks__row{
    margin-top:16px;
  }
}

@media (max-width:860px){
  .topbar{grid-template-columns:1fr}
  .themebtn{justify-self:start}
  .topsearch{order:3}
  .topsearch .row{flex-wrap:wrap}
  .topsearch input{border-radius:14px}
  .bvol input[type="range"]{width:100px}
  .bicon{display:none}
  .hmenu{justify-content:flex-start}
  .shero__body{grid-template-columns:1fr}
}

@media (max-width:800px){
  .radio-popular{
    margin:20px 0;
  }
  .radio-popular__grid{
    grid-template-columns:repeat(3,118px);
    gap:18px;
  }
  .radio-popular__img-wrap{
    width:118px;
    height:118px;
    margin-bottom:10px;
  }
  .radio-popular__name{
    max-width:118px;
    font-size:13px;
    line-height:1.3;
  }
}

@media (max-width:768px){
  .sort-links,
  .sortbar{
    width:100%;
    gap:10px;
  }

  .artist-list{grid-template-columns:repeat(2,minmax(0,1fr))}

  .pager-pages.artist-index{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    padding:0 12px !important;
    width:100% !important;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .pager-pages.artist-index::-webkit-scrollbar{
    height:6px;
  }

  .station-wrapper{
    display:grid;
    grid-template-columns:1fr;
  }

  .shero{grid-row:1}
  .station-right{grid-row:2}

  .items{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .items > .card{
    width:100% !important;
    max-width:100% !important;
  }

  .items > .card img{
    width:100% !important;
    height:110px !important;
    object-fit:cover !important;
    display:block;
    border-radius:14px;
  }

  .items > .card .title,
  .items > .card .sub{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .items > .card .logo{
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .items > .card .logo img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    display:block;
    border-radius:0 !important;
  }

  .topstrip__row .topcard img{
    object-fit:contain;
  }
}

@media (max-width:720px){
  .langgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .langpop{left:0;right:auto}
  .shero__title{font-size:34px}
  .sectionh2{font-size:24px}
}

@media (max-width:700px){
  .artist-page{
    grid-template-columns:1fr;
  }
  .artist-page-photo{
    max-width:260px;
  }
}

@media (max-width:640px){
  .station-hero__grid{
    grid-template-columns:1fr;
  }
  .station-hero__logo img{
    max-width:140px;
  }
  .station-hero__top{
    flex-direction:column;
    align-items:flex-start;
  }
  .station-player{
    align-items:flex-start;
  }
  .station-title{
    font-size:24px;
  }
  .station-section__title{
    font-size:21px;
  }
  .station-card:hover img{
    transform:scale(1.05);
  }

}

@media (max-width:600px){
  .pager-inner{gap:6px}
}

@media (max-width:520px){
  body{padding-bottom:102px}

  .langgrid{grid-template-columns:1fr}

  .bplayer__inner{gap:10px}
  .bcover{display:none}
  .bvol input[type="range"]{display:none}
  .bplay{width:54px;height:54px}

  .topstrip{
    max-width:100%;
    overflow:hidden;
  }

  .topstrip__row{
    max-width:100%;
    overflow-x:hidden !important;
    gap:12px !important;
    padding:8px 0 10px;
  }

  .topstrip__row .topcard{
    flex:0 0 calc((100% - 24px) / 3) !important;
    width:auto !important;
    height:auto !important;
    aspect-ratio:1 / 1;
    border-radius:18px;
  }

  .topstrip__row .topcard img{
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    display:block;
  }

  .topstrip--fullstory .topcard{
    flex-basis:112px;
    height:112px;
    border-radius:14px;
  }

  .radio-popular__grid{
    grid-template-columns:repeat(2,120px);
    gap:18px 16px;
  }

  .radio-popular__img-wrap{
    width:120px;
    height:120px;
  }

  .radio-popular__name{
    max-width:120px;
    font-size:13px;
  }

  .rthist__list{
    grid-template-columns:1fr;
    gap:8px;
  }

  .rthist__item{
    padding:6px 0;
  }

  .rthist__cover{
    width:44px;
    height:44px;
    flex-basis:44px;
  }
}

@media (max-width:420px){
  .artist-list{grid-template-columns:1fr}
}

@media (max-width:767px){
  .slogo{
    margin:0 auto 16px auto;
    width:250px;
    height:250px;
  }

  .shero__body{
    text-align:center;
  }
}
/* =========================================================
   STATION CARD универсальная
   GRID + LIST
========================================================= */

/* базово: grid-view */
.stationCard{
  display:block;
  padding:0;
  border:0;
  background:transparent;
  text-decoration:none;
  color:inherit;
}

/* квадратная обложка */
.stationCard__logo{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
}

 

html[data-theme="light"] .stationCard__logo{
  background:#f3f5f9;
}

.stationCard__logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* текст под карточкой */
.stationCard__meta{
  padding:10px 6px 0;
  min-width:0;
  text-align:center;
}

.stationCard__title{
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  white-space:normal;
  overflow:hidden;
	text-overflow:ellipsis;
	
	

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  min-height:2.7em;
}

.stationCard__cat,
.stationCard__genre{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stationCard__genre{
  display:none; /* в плитке не показываем второй текст */
}

.stationCard__desc{
  display:none; /* в плитке не показываем описание */
}

/* кнопка play */
.stationCard__play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  border:0;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  opacity:0;
  transition:.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stationCard:hover .stationCard__play{
  opacity:1;
}

.stationCard__play.playing{
  background:#fff;
  color:#000;
}

/* =========================================================
   LIST MODE
========================================================= */

#stations.is-list .stationCard{
  display:flex !important;
  align-items:flex-start;
  gap:14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--cardbg);
}

#stations.is-list .stationCard:hover{
  background:var(--cardbg2);
  border-color:rgba(255,255,255,.16);
}

html[data-theme="light"] #stations.is-list .stationCard:hover{
  border-color:rgba(14,19,32,.18);
}

#stations.is-list .stationCard__logo{
  flex:0 0 72px;
  width:72px;
  aspect-ratio:1 / 1;
  border-radius:16px;
}

#stations.is-list .stationCard__meta{
  flex:1 1 auto;
  padding:0;
  text-align:left;
}

#stations.is-list .stationCard__title{
  display:block;
  min-height:auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#stations.is-list .stationCard__cat{
  display:block;
}

#stations.is-list .stationCard__genre{
  display:block;
}

#stations.is-list .stationCard__desc{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* в list кнопка play чуть меньше */
#stations.is-list .stationCard__play{
  width:44px;
  height:44px;
  font-size:18px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){
  .stationCard__title{
    font-size:14px;
  }

  #stations.is-list .stationCard{
    gap:12px;
    padding:10px;
  }

  #stations.is-list .stationCard__logo{
    flex:0 0 64px;
    width:64px;
    border-radius:14px;
  }

  #stations.is-list .stationCard__desc{
    -webkit-line-clamp:2;
  }
}


/* FORCE current mixed HTML into new station card layout */

.card.stationCard{
  display:block !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  text-decoration:none !important;
  color:inherit !important;
}

.card.stationCard .stationCard__logo.logo{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  flex:none !important;
  aspect-ratio:1 / 1 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.04) !important;
  display:block !important;
}

.card.stationCard .stationCard__logo.logo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.card.stationCard .stationCard__meta.meta{
  padding:10px 6px 0 !important;
  text-align:center !important;
  min-width:0 !important;
}

.card.stationCard .stationCard__title.title{
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:unset !important;

  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  min-height:2.7em !important;
}

.card.stationCard .stationCard__cat.sub{
  display:block !important;
  margin-top:6px !important;
  font-size:13px !important;
  color:var(--muted) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.card.stationCard .stationCard__genre.sub,
.card.stationCard .stationCard__desc.cardDesc{
  display:none !important;
}

.card.stationCard .stationCard__play.cardPlay{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  border:0 !important;
  background:rgba(0,0,0,.65) !important;
  color:#fff !important;
  font-size:22px !important;
  opacity:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.card.stationCard:hover .stationCard__play.cardPlay{
  opacity:1 !important;
}

/* LIST MODE */
#stations.is-list .card.stationCard{
  display:flex !important;
  align-items:flex-start !important;
  gap:14px !important;
  padding:12px !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  background:var(--cardbg) !important;
}

#stations.is-list .card.stationCard .stationCard__logo.logo{
  flex:0 0 72px !important;
  width:72px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:16px !important;
}

#stations.is-list .card.stationCard .stationCard__meta.meta{
  flex:1 1 auto !important;
  padding:0 !important;
  text-align:left !important;
}

#stations.is-list .card.stationCard .stationCard__title.title{
  display:block !important;
  min-height:auto !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#stations.is-list .card.stationCard .stationCard__genre.sub{
  display:block !important;
  margin-top:4px !important;
  font-size:13px !important;
  color:var(--muted) !important;
}

#stations.is-list .card.stationCard .stationCard__desc.cardDesc{
  display:-webkit-box !important;
  margin-top:8px !important;
  font-size:13px !important;
  line-height:1.5 !important;
  color:var(--muted) !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* =========================================================
   TOP STRIP FINAL
========================================================= */

.topstrip{
  width:100%;
  max-width:100%;
  margin:0 0 28px;
  overflow:hidden;
}

.topstrip__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.topstrip__title{
  margin:0;
  font-size:20px;
  line-height:1.2;
  font-weight:600;
  color:var(--text);
}

.topstrip__controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.topstrip__btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.18s ease;
  font-size:16px;
  line-height:1;
  padding:0;
}

.topstrip__btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

.topstrip__btn:disabled{
  opacity:.45;
  cursor:default;
}

html[data-theme="light"] .topstrip__btn{
  background:#fff;
  border-color:rgba(14,19,32,.12);
}

html[data-theme="light"] .topstrip__btn:hover{
  background:#f3f5f9;
  border-color:rgba(14,19,32,.18);
}

.topstrip__row{
  display:flex;
  align-items:flex-start;
  gap:16px;

  width:100%;
  max-width:100%;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;

  padding:0 0 6px;
  margin:0;

  box-sizing:border-box;
}

.topstrip__row::-webkit-scrollbar{
  height:8px;
}

.topstrip__row::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

html[data-theme="light"] .topstrip__row::-webkit-scrollbar-thumb{
  background:rgba(14,19,32,.12);
}

/* карточка внутри ряда */
.topstrip__row .topcard{
  flex:0 0 110px;
  width:110px;
  min-width:110px;
  height:110px;

  display:block;
  overflow:hidden;
  border-radius:18px;

  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);

  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.topstrip__row .topcard:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

html[data-theme="light"] .topstrip__row .topcard{
  border-color:rgba(14,19,32,.10);
  background:#fff;
}

html[data-theme="light"] .topstrip__row .topcard:hover{
  border-color:rgba(14,19,32,.18);
  background:#fff;
}

.topstrip__row .topcard img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* планшет */
@media (max-width:900px){
  .topstrip__row{
    gap:14px;
  }

  .topstrip__row .topcard{
    flex-basis:100px;
    width:100px;
    min-width:100px;
    height:100px;
    border-radius:16px;
  }
}

/* мобилка */
@media (max-width:640px){
  .topstrip{
    margin-bottom:24px;
  }

  .topstrip__head{
    margin-bottom:14px;
  }

  .topstrip__title{
    font-size:18px;
  }

  .topstrip__controls{
    gap:6px;
  }

  .topstrip__btn{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:14px;
  }

  .topstrip__row{
    gap:12px;
  }

  .topstrip__row .topcard{
    flex:0 0 88px;
    width:88px;
    min-width:88px;
    height:88px;
    border-radius:14px;
  }
}

/* desktop */
.genres__grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

/* tablet */
@media (max-width:1100px){
  .genres__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* mobile */
@media (max-width:768px){
  .genres__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px;
  }
}/* desktop */
.genres__grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

/* tablet */
@media (max-width:1100px){
  .genres__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* mobile */
@media (max-width:768px){
  .genres__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px;
  }
}

/* =========================================================
   STATION PAGE — FINAL MOBILE/DESKTOP
========================================================= */

.station-page{
  display:block;
}

/* ---------- HERO ---------- */

.station-hero{
  margin:0 0 28px;
}

.station-hero__grid{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.station-hero__logo{
  width:100%;
}

.station-hero__logo img{
  width:100%;
  max-width:220px;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:24px;
  display:block;
}

.station-hero__main{
  min-width:0;
}

.station-hero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.station-hero__head{
  min-width:0;
}

.station-title{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.15;
  font-weight:600;
  word-break:break-word;
}

.station-title a{
  text-decoration:none;
}

.station-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:15px;
  color:var(--muted);
}

.station-meta__item{
  display:inline-flex;
  align-items:center;
}

/* ---------- RATING ---------- */

.station-rating{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  white-space:nowrap;
  font-size:15px;
}

.station-rating__value{
  color:#facc15;
  letter-spacing:1px;
}

.station-rating__score{
  font-weight:700;
  color:var(--text);
}

.station-rating__count{
  color:var(--muted);
}

/* ---------- PLAYER ---------- */

.station-player{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 16px;
}

.station-playbtn{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#1da1f2;
  color:#fff;
  padding:0;
}

.station-playbtn svg{
  width:24px;
  height:24px;
}

.station-player__meta{
  min-width:0;
}

.station-player__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:4px;
}

.station-player__track{
  font-size:16px;
  line-height:1.35;
  font-weight:600;
  color:var(--text);
  word-break:break-word;
}

/* ---------- GENRES ---------- */

.station-genres{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 16px;
}

.station-genres a,
.station-genres .genre,
.station-genres .sgchip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  line-height:1;
}

html[data-theme="light"] .station-genres a,
html[data-theme="light"] .station-genres .genre,
html[data-theme="light"] .station-genres .sgchip{
  border-color:rgba(14,19,32,.10);
  background:#f3f5f9;
}

/* ---------- SUMMARY ---------- */

.station-summary{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.75;
  color:var(--text);
}

.station-summary__more{
  text-decoration:none;
  font-weight:600;
  margin-left:4px;
}

/* ---------- LINKS ---------- */

.station-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0 0 8px;
}

.station-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

html[data-theme="light"] .station-link{
  border-color:rgba(14,19,32,.10);
  background:#fff;
}

/* ---------- SOCIAL ---------- */

.social-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.social-links .slink{
  position:relative;
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  text-decoration:none;
}

html[data-theme="light"] .social-links .slink{
  border-color:rgba(14,19,32,.10);
  background:#fff;
}

/* ---------- SECTIONS ---------- */

.station-section{
  margin:0 0 32px;
}

.station-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.station-section__title{
  margin:0 0 14px;
  font-size:22px;
  line-height:1.25;
  font-weight:600;
}

.station-section__head .station-section__title{
  margin:0;
}

/* ---------- ABOUT ---------- */

.station-about{
  font-size:15px;
  line-height:1.8;
  color:var(--text);
}

.station-about h1,
.station-about h2,
.station-about h3{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.3;
}

.station-about p{
  margin:0 0 14px;
}

/* ---------- HISTORY ---------- */

.rthist__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.rthist__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
}

.rthist__cover{
  width:42px;
  height:42px;
  border-radius:999px;
  object-fit:cover;
  flex:0 0 42px;
}

.rthist__txt{
  min-width:0;
  font-size:15px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rthist__empty{
  color:var(--muted);
}

/* ---------- TOPSTRIP IN FULL ---------- */

.topstrip__controls{
  display:flex;
  gap:8px;
}

.topstrip__btn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.topstrip__row{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  scroll-behavior:smooth;
}

.topstrip__row .topcard{
  flex:0 0 110px;
  width:110px;
  height:110px;
  border-radius:18px;
  overflow:hidden;
  display:block;
}

.topstrip__row .topcard img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- DESKTOP MEDIUM ---------- */

@media (max-width:980px){
  .station-hero__grid{
    grid-template-columns:180px minmax(0,1fr);
    gap:20px;
  }

  .station-hero__logo img{
    max-width:180px;
  }

  .station-title{
    font-size:22px;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width:768px){
  .station-hero__grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .station-hero__logo{
    display:flex;
    justify-content:flex-start;
  }

  .station-hero__logo img{
    max-width:128px;
    border-radius:22px;
  }

  .station-hero__top{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
  }

  .station-title{
    font-size:18px;
    line-height:1.2;
  }

  .station-meta{
    font-size:14px;
    gap:6px 10px;
  }

  .station-rating{
    font-size:14px;
    gap:6px;
  }

  .station-player{
    gap:14px;
    margin-bottom:14px;
  }

  .station-playbtn{
    width:52px;
    height:52px;
    flex-basis:52px;
  }

  .station-player__label{
    font-size:11px;
  }

  .station-player__track{
    font-size:15px;
  }

  .station-summary{
    font-size:14px;
    line-height:1.7;
  }

  .station-section{
    margin-bottom:28px;
  }

  .station-section__title{
    font-size:20px;
    line-height:1.25;
  }

  .rthist__list{
    grid-template-columns:1fr;
    gap:8px;
  }

  .topstrip__row{
    gap:12px;
  }

  .topstrip__row .topcard{
    flex:0 0 92px;
    width:92px;
    height:92px;
    border-radius:16px;
  }
}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){
  .station-hero__logo{
    justify-content:flex-start;
  }

  .station-hero__logo img{
    max-width:96px;
    border-radius:20px;
  }

  .station-title{
    font-size:16px;
  }

  .station-meta{
    font-size:13px;
  }

  .station-rating{
    font-size:13px;
  }

  .station-player{
    align-items:center;
  }

  .station-playbtn{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .station-player__track{
    font-size:14px;
  }

  .station-genres{
    gap:8px;
  }

  .station-genres a,
  .station-genres .genre,
  .station-genres .sgchip{
    min-height:32px;
    padding:7px 12px;
    font-size:12px;
  }

  .station-summary,
  .station-about{
    font-size:14px;
    line-height:1.7;
  }

  .station-link{
    min-height:34px;
    padding:0 12px;
    font-size:13px;
  }

  .social-links .slink{
    width:32px;
    height:32px;
  }

  .station-section__title{
    font-size:18px;
  }
}


/* =========================================
   ARTIST / PODCAST HERO MOBILE CENTER
========================================= */

@media (max-width:768px){

  /* общий контейнер */
  .artist-hero,
  .podcast-hero,
  .station-hero{
    text-align:center;
  }

  /* сетку переводим в колонку */
  .artist-hero__grid,
  .podcast-hero__grid,
  .station-hero__grid{
    grid-template-columns:1fr;
    justify-items:center;
    gap:18px;
  }

  /* обложка */
  .artist-hero__logo,
  .podcast-hero__logo,
  .station-hero__logo{
    display:flex;
    justify-content:center;
    width:100%;
  }

  /* большая картинка */
  .artist-hero__logo img,
  .podcast-hero__logo img,
  .station-hero__logo img{
    width:100%;
    max-width:420px;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:24px;
  }

  /* текстовый блок */
  .artist-hero__main,
  .podcast-hero__main,
  .station-hero__main{
    width:100%;
    max-width:520px;
    margin:0 auto;
    text-align:center;
  }

  /* заголовок */
  .artist-title,
  .podcast-title,
  .station-title{
    font-size:22px;
    line-height:1.2;
    margin-bottom:10px;
  }

  /* мета */
  .artist-meta,
  .podcast-meta,
  .station-meta{
    justify-content:center;
  }

  /* жанры */
  .artist-genres,
  .station-genres{
    justify-content:center;
  }

  /* соц сети */
  .social-links{
    justify-content:center;
  }

}

/* =========================================
   ARTISTS + PODCASTS MOBILE HERO FIX
========================================= */
@media (max-width:768px){

  /* ---------- PODCAST / ARTIST HERO ---------- */
  .podcast-view__hero,
  .artist-page,
  .artist-view,
  .artist-hero{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:18px !important;
  }

  /* ---------- COVER / PHOTO WRAP ---------- */
  .podcast-view__cover,
  .artist-page-photo,
  .artist-view__photo,
  .artist-hero__photo{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    max-width:none !important;
  }

  /* ---------- IMAGE ---------- */
  .podcast-view__cover img,
  .artist-page-photo img,
  .artist-view__photo img,
  .artist-hero__photo img{
    display:block !important;
    width:min(92vw, 420px) !important;
    max-width:420px !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;
    border-radius:24px !important;
    margin:0 auto !important;
  }

  /* ---------- MAIN CONTENT ---------- */
  .podcast-view__main,
  .artist-page-bio,
  .artist-view__main,
  .artist-hero__main{
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  /* ---------- TITLE ---------- */
  .podcast-view__title,
  .artist-page-bio h1,
  .artist-view__title,
  .artist-hero__title{
    font-size:24px !important;
    line-height:1.2 !important;
    margin:0 0 10px !important;
    text-align:center !important;
  }

  /* ---------- META ---------- */
  .podcast-view__meta,
  .artist-view__meta,
  .artist-hero__meta{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    text-align:center !important;
  }

  .podcast-view__meta span,
  .artist-view__meta span,
  .artist-hero__meta span{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
  }

  /* ---------- GENRES / TAGS ---------- */
  .artist-genres,
  .podcast-genres,
  .artist-links,
  .social-links{
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }
}

/* =========================================
   ARTIST CATALOG — FIX PHOTO WRAPPER
========================================= */

/* сам круг */
.artist-catalog__img-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border-radius:50% !important;
}

/* если {photo} выводит свою обёртку */
.artist-catalog__img-wrap > *{
  display:block !important;
  width:100% !important;
  height:100% !important;
}

/* только внутренняя картинка */
.artist-catalog__img-wrap > * img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

/* планшет */
@media (max-width:1024px){
  .artist-catalog__img-wrap{
    width:140px !important;
    height:140px !important;
  }
}

/* мобилка */
@media (max-width:768px){
  .artist-catalog__img-wrap{
    width:128px !important;
    height:128px !important;
  }
}