/* ================= 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;
}

    *{box-sizing:border-box}
 body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color:var(--text);
  padding-bottom: 92px;
}
    a{color:inherit}
    .wrap{max-width:1200px;margin:0 auto;padding:16px} /* ширина 1200 */

    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);
    }

    /* topbar grid: brand | centered search | theme */
    .topbar{
      display:grid;
      grid-template-columns: 1fr minmax(320px, 560px) 1fr;
      align-items:center;
      gap:12px;
    }


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

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

.dot{
  width:0;              /* контейнер не влияет на размер */
  height:60px;
  position:relative;
}

/* РЕАЛЬНАЯ иконка 100px */
.dot svg{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  display:block;
	margin-top:16px;  
}

.brand strong{
  font-size:24px;
  line-height:1;
  margin-left:80px;    /* отступ после большой иконки */
	margin-top:16px; 
	font-weight: 600;
}



    /* centered search in header (NO Find button) */
    .topsearch{justify-self:center;width:100%}
    .topsearch .row{position:relative;display:flex;gap:10px}
    .topsearch input{
      height:44px;
      border-radius:999px;
      padding-left:44px; /* icon */
      background-repeat:no-repeat;
      background-position:16px 50%;
      background-size:16px 16px;
      /* inline SVG with theme stroke (var is url-encoded) */
      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");
    }

    .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}

    main{padding:18px 0 28px}
    .panel{ }
    .panel-pad{padding:16px}
    .grid{display:grid;gap:14px}
    .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}

    h1,h2,h3{margin:0}
    h1{font-size:28px;line-height:1.15}
    .sep{height:1px;background:var(--line);margin:14px 0}

    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)}

    .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
    }
    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}

    /* ===== TOP RADIO STRIP ===== */
    .topstrip{ margin-bottom:24px; }
    .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;
      overflow-x:auto;
      scroll-behavior:smooth;
      padding-bottom:4px;
    }
    .topstrip__row::-webkit-scrollbar{ height:8px; display: none}
    .topcard{
      flex:0 0 140px;
      height:140px;
      border-radius:18px;
      overflow:hidden;
      background:#111;
      border:1px solid var(--line);
      cursor:pointer;
      transition:.25s;
      display:grid;
      place-items:center;
    }
    .topcard:hover{
      transform:translateY(-4px);
      border-color:rgba(255,255,255,.25);
    }
    html[data-theme="light"] .topcard{background:#fff}
    .topcard img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* ===== GENRES (AFTER MAIN TILES) ===== */
    .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:14px
    }
    @media (max-width:1100px){.genres__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
    @media (max-width:760px){.genres__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    .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;
    }
    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);
    }
    .genre:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.06)}
    html[data-theme="light"] .genre:hover{border-color:rgba(14,19,32,.28);background:rgba(255,255,255,.95)}
    .genre__ico{width:18px;height:18px;display:inline-grid;place-items:center;opacity:.95}

    /* ===== SEO ACCORDION (AFTER GENRES) ===== */
    .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}

    /* ===== FOOTER LINKS + LANGUAGE VERSIONS ===== */
    footer{padding:22px 0 40px;color:rgba(255,255,255,.45)}
    html[data-theme="light"] footer{color:rgba(14,19,32,.55)}
    .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:10px}
    .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;
    }
    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);
    }
    .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: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;
    }
    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);
    }
    .langpop.open{display:block}
    .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;
    }
    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);
    }
    .langitem:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20)}
    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}

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

    /* ===== FIXED BOTTOM PLAYER (transparent like screenshot) ===== */
    .bplayer{
      position:fixed;
      left:0; right:0; bottom:0;
      z-index:100;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border-top: 1px solid var(--line);
      backdrop-filter: blur(10px);
    }
    html[data-theme="light"] .bplayer{
      background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
    }
    .bplayer__inner{
      max-width:1200px;
      margin:0 auto;
      padding:12px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .bleft{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      flex: 1 1 auto;
    }
    .bcover{
      width:54px;height:54px;border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      overflow:hidden;
      display:grid;place-items:center;
      flex:0 0 54px;
    }
    html[data-theme="light"] .bcover{
      border:1px solid rgba(14,19,32,.10);
      background:rgba(14,19,32,.04);
    }
    .bcover img{width:100%;height:100%;object-fit:cover;display:block}
    .bmeta{min-width:0}
    .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;
    }
    html[data-theme="light"] .bsub{color:rgba(14,19,32,.55)}
    .bcenter{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }
    .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);
    }
    html[data-theme="light"] .bplay{box-shadow:0 16px 40px rgba(10,16,28,.18)}
    .bplay:hover{filter:brightness(1.03)}
    .bplay svg{width:22px;height:22px}

    .bright{
      flex:1 1 auto;
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .bicon{
      width:40px;height:40px;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;
    }
    html[data-theme="light"] .bicon{
      border:1px solid rgba(14,19,32,.10);
      background:rgba(255,255,255,.80);
    }
    .bicon:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
    html[data-theme="light"] .bicon:hover{background:rgba(255,255,255,.95);border-color:rgba(14,19,32,.18)}
    .bvol{
      display:flex;align-items:center;gap:10px;
      color:rgba(255,255,255,.75);
      font-size:12px;
      white-space:nowrap;
    }
    html[data-theme="light"] .bvol{color:rgba(14,19,32,.60)}
    .bvol input[type="range"]{
      width:140px;height:10px;padding:0;border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      accent-color: #fff;
    }
    html[data-theme="light"] .bvol input[type="range"]{
      background:rgba(14,19,32,.06);
      border:1px solid rgba(14,19,32,.12);
      accent-color: var(--accent);
    }

    /* keep layout on small */
    @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}
    }
    @media (max-width: 520px){
      body{padding-bottom: 102px;}
      .bplayer__inner{gap:10px}
      .bcover{display:none}
      .bvol input[type="range"]{display:none}
      .bplay{width:54px;height:54px}
    }
  
    /* search icon inside input */
    .topsearch .row{position:relative}
    .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;
    }
    .topsearch input{padding-left:44px}

    /* section heading above tiles */
    .sectionhead{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}
    .sectiontitle{font-size:18px;font-weight:700;letter-spacing:.2px}
    .sectiontitle{font-size:18px;font-weight:700;letter-spacing:.2px}

    /* footer theme button spacing */
    .themebtn--footer{height:36px;padding:0 14px}
    .langwrap{gap:12px}

  
    /* ===== Header menu under search ===== */
    .hmenu{
      margin-top:12px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
    }
    .hmenu__item{
      height:34px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      text-decoration:none;
      font-size:13px;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      letter-spacing:.15px;
    }
    html[data-theme="light"] .hmenu__item{background:rgba(255,255,255,.85)}
    .hmenu__item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
    html[data-theme="light"] .hmenu__item:hover{background:rgba(255,255,255,.95);border-color:rgba(14,19,32,.20)}
    @media (max-width:860px){
      .hmenu{justify-content:flex-start}
    }

    /* ===== Top strip cards: make higher and avoid clipping on hover ===== */
    .topcard{
      flex:0 0 170px;
      height:170px;
    }
    .topstrip__row{
      padding:8px 0 10px; /* extra vertical space */
      overflow-y: visible;
    }
    .topcard:hover{
      transform:none; /* prevent lift that gets clipped */
    }

/* ===== HEADER MENU STYLE (no background / no border / normal font) ===== */
.hmenu__item{
  background: transparent !important;
  border: 0 !important;
  font-weight: 500 !important; /* not bold */
  font-size: 14px;
  color: var(--muted);
  padding: 0 8px;
  height: auto;
}
.hmenu__item:hover{
  background: transparent !important;
  border: 0 !important;
  color: var(--text);
  text-decoration: underline;
}

/* =========================
   RADIO STATION PAGE
   ========================= */

.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}

.shero{
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 360px at 15% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  overflow:hidden;
  padding:22px;
}
html[data-theme="light"] .shero{
  background:
    radial-gradient(900px 360px at 15% 0%, rgba(14,19,32,.06), transparent 55%),
    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;
}
@media (max-width:720px){ .shero__title{font-size:34px} }

.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;
}
html[data-theme="light"] .sbadge{
  border-color:rgba(14,19,32,.14);
  background:rgba(14,19,32,.04);
  color:rgba(14,19,32,.72);
}
.sbadge a{text-decoration: none;}
.shero__actions{
  display:flex;align-items:center;gap:10px;
}
.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;
}
html[data-theme="light"] .siconbtn{
  border-color:rgba(14,19,32,.14);
  background:rgba(255,255,255,.78);
  color:rgba(14,19,32,.9);
}
.siconbtn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
html[data-theme="light"] .siconbtn:hover{background:rgba(255,255,255,.95);border-color:rgba(14,19,32,.20)}

.shero__body{
  margin-top:18px;
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:18px;
  align-items:end;
}
@media (max-width:860px){
  .shero__body{grid-template-columns: 1fr;align-items:start}
}

.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;
}
html[data-theme="light"] .slogo{
  border-color:rgba(14,19,32,.14);
  background:rgba(255,255,255,.88);
}
.slogo img{width:100%;height:100%;object-fit:cover;display:block}
.splaybar{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  padding:14px;
  display:flex;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}
.splaymeta .k{font-size:12px;color:rgba(255,255,255,.65)}
html[data-theme="light"] .splaymeta .k{color:rgba(14,19,32,.55)}
.splaymeta .v{margin-top:4px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.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);
}
html[data-theme="light"] .splaybtn{background:rgba(14,19,32,.92);color:#fff}
.splaybtn:hover{filter:brightness(1.03)}
.splaybtn svg{width:18px;height:18px}

.sectionh2{
  font-size:28px;
  font-weight:900;
  margin:26px 0 14px;
}
@media (max-width:720px){ .sectionh2{font-size:24px} }

.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;
}
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);
}
.similar__btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
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;
}
html[data-theme="light"] .simthumb{
  border-color:rgba(14,19,32,.12);
  background:#fff;
}
.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"] .simsub{color:rgba(14,19,32,.55)}

/* ===== Station hero layout (3/4 + 1/4) ===== */
.shero{padding:22px}

@media (max-width: 980px){
  
}

.station__title{
  margin:0;
}

/* Left content */
.sleft{min-width:0}
.splaystack{min-width:0}
.shero__body{
  margin-top:18px;
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width:860px){
  .shero__body{grid-template-columns:1fr}
}

/* Genres under player */
.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:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  color:rgba(255,255,255,.80);
  font-size:13px;
}
html[data-theme="light"] .sgchip{
  border-color:rgba(14,19,32,.14);
  background:rgba(14,19,32,.04);
  color:rgba(14,19,32,.75);
}
.sgchip:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
html[data-theme="light"] .sgchip:hover{background:rgba(255,255,255,.95);border-color:rgba(14,19,32,.20)}

/* Links + rating */
.slinks{margin-top:12px}
.slinks__row{display:flex;gap:10px;flex-wrap:wrap}
.slink{
  display:inline-flex;align-items:center;justify-content:center;
  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;
}
html[data-theme="light"] .slink{
  border-color:rgba(14,19,32,.14);
  background:rgba(255,255,255,.85);
  color:rgba(14,19,32,.72);
}
.slink:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
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:baseline;gap:8px;
  color:rgba(255,255,255,.72);
  font-size:13px;
}
html[data-theme="light"] .srating{color:rgba(14,19,32,.62)}
.srating__label{opacity:.85}
.srating__value{font-size:18px;font-weight:900;color:var(--text)}
html[data-theme="light"] .srating__value{color:rgba(14,19,32,.9)}
.srating__count{opacity:.8}

/* Right description panel */
.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{
  border-color:rgba(14,19,32,.12);
  background:rgba(255,255,255,.82);
}
.sdesc__title{
  font-weight:900;
  font-size:14px;
  margin-bottom:10px;
  color:rgba(255,255,255,.85);
}
html[data-theme="light"] .sdesc__title{color:rgba(14,19,32,.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__body{color:rgba(14,19,32,.65)}

/* ===== Station page: right block (screenshot style) ===== */
.sright{
  border-radius:28px;
  border:4px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.02);
  min-height: 320px;
  overflow:hidden;
}
html[data-theme="light"] .sright{
  border-color: rgba(14,19,32,.22);
  background: rgba(255,255,255,.86);
}
.sright__inner{
  width:100%;
  height:100%;
  min-height: 320px;
}
@media (max-width:980px){
  .sright{min-height:220px}
  .sright__inner{min-height:220px}
}


/* ===== FIXED Separate Layout ===== */
.station-layout{
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:24px;
  align-items:start;
}
@media(max-width:980px){
  .station-layout{grid-template-columns:1fr}
}

.station-right{
  border-radius:28px;
  background:rgba(255,255,255,.04);
  min-height:340px;
  padding:18px;
}

html[data-theme="light"] .station-right{
  background:rgba(0,0,0,.04);
}


/* ===== FIX player full width ===== */
.splaybar,
.player-box{
  width:100% !important;
}

/* ===== REMOVE border from genres ===== */
.sgchip{
  border:0 !important;
  background:rgba(255,255,255,.06) !important;
}

/* ===== station-right same style as shero ===== */
.station-right{
  background:rgba(255,255,255,.06) !important;
  border-radius:24px !important;
  padding:24px !important;
}

/* ===== description scroll same style as language dropdown ===== */
.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;}

/* scrollbar style */
.station-desc::-webkit-scrollbar{
  width:6px;
}
.station-desc::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);
  border-radius:999px;
}


/* ===== v5 HERO CLEAN FULL WIDTH ===== */

/* Remove any right column space inside hero */
.shero-body{
  display:block !important;
}

.shero-body > *{
  width:100% !important;
  max-width:100% !important;
}

/* Player full width */
.player-box,
.splaybar{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
}

/* Remove any placeholder / empty flex blocks */
.shero-right,
.shero-empty,
.hero-extra{
  display:none !important;
}

/* Ensure layout left block expands */
.shero{
  width:100% !important;
}

/* Adjust station layout */
.station-layout{
  grid-template-columns: 2fr 1.4fr !important;
}



/* ===== v6 FORCE SINGLE HERO COLUMN ===== */

/* Kill any grid layout */
.shero,
.shero-body,
.station-hero,
.station-layout{
  display:block !important;
  grid-template-columns:1fr !important;
  width:100% !important;
}

/* Remove any right column completely */
.shero-right,
.station-right-hero,
.hero-right,
.right-col{
  display:none !important;
  width:0 !important;
}

/* Remove gaps */
.shero-body,
.station-hero{
  gap:0 !important;
}

/* Player full width guaranteed */
.player-box,
.splaybar{
  width:100% !important;
  max-width:100% !important;
}



/* ===== v7 PROPER HERO LAYOUT ===== */

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

.shero{
  width:100% !important;
}

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

.station-right{
  display:block !important;
  width:100% !important;
}

/* Scroll like language popup */
.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;
}



/* ===== v8 HERO SINGLE COLUMN FINAL ===== */

.shero__grid{
    display:block !important;
    width:100% !important;
}

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

 .catalog-controls{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin:0 0 12px;
      flex-wrap:wrap;
    }
    .viewbtn{
      border:1px solid rgba(255,255,255,.12);
      background:transparent;
      color:inherit;
      padding:8px 12px;
      border-radius:10px;
      cursor:pointer;
      line-height:1;
      user-select:none;
    }
    .viewbtn.is-active{ border-color: rgba(255,255,255,.30); }
    .sortsel{
      border:1px solid rgba(255,255,255,.12);
      background:transparent;
      color:inherit;
      padding:8px 12px;
      border-radius:10px;
    }

    /* LIST MODE (grid не ломаем — включаем только когда добавится .is-list) */
    #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;
    }


 



.card .logo{
  position: relative; /* опорный контейнер */
  overflow: hidden;
}

.card .logo img{
  display: block;
  width: 100%;
  height: auto;
}

/* Кнопка строго по центру логотипа */
.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;
}

.card .logo .cardPlay:hover{
 /* background: #fff;*/
  color: #000;
}

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

/* (опционально) показывать только при наведении на карточку */
.card .logo .cardPlay{ opacity: 0; }
.card:hover .logo .cardPlay{ opacity: 1; }


/* ===== PAGER NEW ===== */

.pager{
  margin: 30px 0 20px;
  width:100%;
}

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

/* arrows */
.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);
}

/* pages */
.pager-pages{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* numbers */
.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);
}

/* active page (ONLY current page span, not nav_ext) */
.pager-pages span:not(.nav_ext){
 
}

/* dots ... (nav_ext) */
.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;
}


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



/* ===== 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;
}




/* ===========================
   SORTBAR (DLE) — CLEAN FULL CSS
   =========================== */

/* hide native DLE sort UI safely (keep in DOM for JS clicks) */
.sortbar{ position:relative; }

.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;
}

/* container (same vibe as your controls) */
.sort-links,
.sortbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 16px;
}

/* ================= SORTBAR CLEAN ================= */

/* прячем родной DLE сорт */
.sortbar{ position:relative; }

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

/* контейнер */
.sortbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 16px;
}

/* кнопки */
.sortbar__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:34px;
  padding:8px 12px;
  border-radius:10px;

  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:inherit;

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

/* hover */
.sortbar__link:hover{
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.05);
}

/* стрелка только у текущей сортировки */
.sortbar__link.is-active::after{
 /* content:"▲";*/
  font-size:10px;
  margin-left:6px;
  opacity:.8;
}

/* если DESC */
.sortbar__link.is-active.is-desc::after{
  /*content:"▼";*/
}


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

/* =========================
   HIDE DLE FULL SEARCH SAFE
   (как сортировку)
   ========================= */

#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;
}




/* рейтинг */
.srating{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  white-space:nowrap;
}

.srating__value{
  font-weight:700;
  font-size:16px;
}

.srating__count{
  opacity:.6;
  font-size:13px;
}



.slink{

  gap:8px;

}

.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;
}

@media (max-width: 768px) {

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

    .shero {
        grid-row: 1;
    }

    .station-right {
        grid-row: 2;
    }

}

/* ===== LIGHT FIX: genres + about block ===== */

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;
}

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

/* текст внутри */
html[data-theme="light"] .station-right,
html[data-theme="light"] .station-desc,
html[data-theme="light"] .sdesc__body{
  color:#1f2937 !important;
}

/* play кнопка */
html[data-theme="light"] .splaybtn{
  background:#1f2937 !important;
  color:#fff !important;
}
/* ===== LIGHT: pagination colors only ===== */
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;
}

/* активная страница (если у тебя current page = span) */
html[data-theme="light"] .pager-pages span:not(.nav_ext){
  background:#f1f4f8 !important;
  border-color:#cfd6df !important;
  color:#111827 !important;
  font-weight:700;
}
/* ===== LIGHT: view buttons + sort ===== */

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{
  background:#f1f4f8 !important;
  border-color:#cfd6df !important;
  color:#111827 !important;
}

/* активная сортировка */
html[data-theme="light"] .sortbar__link.is-active{
  background:#f1f4f8 !important;
  border-color:#cfd6df !important;
  color:#111827 !important;
}


/* Сетка (Genres + Countries) */
.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;
}

/* Текст не ломаем в 3 строки */
.genres__grid > a > span:last-child{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	font-weight:300;
}

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

/* Иконка/флаг */
.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;
}

/* Если нет флага (no_icon.gif) — чуть приглушим */
.genres__grid .genre__ico img[src*="no_icon"]{
  opacity: .55;
}

/* Адаптив */
@media (max-width: 1200px){
  .genres__grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px){
  .genres__grid{ grid-template-columns: repeat(2, 1fr); }
}
/* соцсети отступ при переносе */
.slinks__row{
  margin-top:12px;
}

@media (max-width:900px){
  .slinks__row{
    margin-top:16px;
  }
}

/* расстояние между рядами соц.кнопок при переносе */
.slinks__row{
  row-gap: 10px !important;   /* вертикально */
  column-gap: 10px !important;/* горизонтально */
}
/* FIX перенос соц.кнопок */
.slinks__row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px 10px !important; /* row-gap column-gap */
}

/* если всё равно прилипает */
.slinks__row .slink{
  margin-bottom:6px;
}



/* =========================
   FULLSTORY: similar stations strip
   affects ONLY .topstrip--fullstory
   ========================= */

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

/* размер логотипов (карточек) только в полной новости */
.topstrip--fullstory .topcard{
  flex: 0 0 133px;   /* ширина */
  height: 133px;     /* высота */
  border-radius: 16px;
}

/* чтобы картинки не обрезались некрасиво */
.topstrip--fullstory .topcard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* мобилка */
@media (max-width: 520px){
  .topstrip--fullstory .topcard{
    flex-basis: 112px;
    height: 112px;
    border-radius: 14px;
  }
}


/* ===== PLAYER REAL FIX ===== */

/* контейнер */
.bplayer__inner{
  position: relative;
  display:flex;
  align-items:center;
}

/* центр фиксируем абсолютно */
.bcenter{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
}

/* левый блок может сжиматься */
.bleft{
  flex:1 1 auto;
  min-width:0;
  padding-right:80px; /* чтобы текст не лез под кнопку */
}

/* обрезаем текст */
.bmeta{min-width:0;}
.bname,
.bsub{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* правый блок фикс справа */
.bright{
  flex:0 0 auto;
}






/* ===== Track history (grid 2 cols / mobile 1 col) ===== */
.rthist__list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

/* мобилка: 1 колонка */
@media (max-width:520px){
  .rthist__list{
    grid-template-columns: 1fr;
    gap:10px;
  }
}

/* карточка */
.rthist__item{
  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 12px;
  border-radius:16px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] .rthist__item{
  background: rgba(255,255,255,.85);
  border-color: rgba(17,24,39,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

/* обложка */
.rthist__cover{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:14px;
  object-fit:cover;
  display:block;
}

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

/* текст */
.rthist__txt{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.95;
  color: inherit;
}

/* пусто */
.rthist__empty{
  margin-top:12px;
  opacity:.7;
}

/* мобилка: крупнее обложка, чуть компактнее карточка */
@media (max-width:520px){
  .rthist__item{
    padding:9px 10px;
    border-radius:14px;
  }
  .rthist__cover{
    width:64px;
    height:64px;
    flex-basis:64px;
    border-radius:12px;
  }
}
}


/* ===== FIX: topstrip row must not widen page ===== */
/* ===== Top strip: square cards WITHOUT stretching page ===== */
.topstrip{ max-width:100%; overflow:hidden; }          /* чтобы секция не раздувала страницу */
.topstrip__row{ max-width:100%; overflow-x:auto; }     /* горизонтальный скролл только внутри */

.topstrip__row .topcard{
  flex: 0 0 112px;         /* ширина карточки */
  aspect-ratio: 1 / 1;     /* делает квадрат */
  height: auto !important; /* важно: не фиксируем высоту */
  width: auto !important;  /* важно: не фиксируем width */
  overflow: hidden;
  border-radius: 18px;
}

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




/* ===== Station page mobile: remove empty right column + full-bleed ===== */
@media (max-width: 768px){

  /* 1) full-bleed для всей страницы станции */
  .station-layout{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 12px;   /* можно 0 если хочешь прям в край */
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* 2) grid -> 1 колонка (убираем “пустой блок справа”) */
  .shero__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* на всякий случай — обе стороны 100% */
  .sleft, .sright,
  .station-left, .station-right{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}








/* ===== Mobile: убрать пустую колонку в shero__grid ===== */
@media (max-width: 768px){

  .station-layout .shero__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;   /* было 2 колонки -> станет 1 */
    gap: 12px !important;
  }

  .station-layout .sleft{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* station-right нужен — просто пусть будет под ним */
  .station-right{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }
}


/* ================= FIX: station page mobile full-width + remove 2nd column =================
   Требование: на мобилке блок station-layout должен быть от края до края и без "пустой" второй колонки.
   Ничего не переименовываем — только переопределения.
*/
@media (max-width: 900px){
  /* Full-bleed container (если station-layout внутри центрированного контейнера) */
  .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: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }

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

  .station-layout > .shero .shero__grid{
    display:block !important; /* чтобы не оставалось места под "вторую" колонку */
  }

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

  /* страховка от горизонтального скролла */
  html, body{
    overflow-x:hidden !important;
  }
}


/* ===== mobile station page small side padding ===== */
@media (max-width: 900px){

  .station-layout{
    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;

    box-sizing:border-box;
  }

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

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

  .station-layout .station-right{
    margin-top:12px !important;
  }
}


/* ===== Mobile catalog: 2 columns WITHOUT breaking cards ===== */
@media (max-width: 768px){

  /* 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;
  }
}


/* ===== SEO STATIC (accordion look, always open) ===== */
.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);
}

/* p как seo__content, но без класса */
.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;
}




/* ===== SOCIAL LINKS: brand icons via CSS (NO SVG IN HTML) ===== */

.social-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{
  border:1px solid rgba(14,19,32,.10);
  background:#fff;
  box-shadow:0 6px 18px rgba(14,19,32,.06);
}

.social-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;
}

/* --- masks (SVG INSIDE CSS) --- */

/* Website (globe) */
.slink--website{
  --brand:#0ea5e9;
  --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-20zm6.92%209H16.9a15.6%2015.6%200%200%200-1.2-5.05A8.03%208.03%200%200%201%2018.92%2011zM12%204.08c.78%201.07%201.62%203.1%201.92%206.92H10.08C10.38%207.18%2011.22%205.15%2012%204.08zM5.08%2013h2.02c.2%201.9.63%203.67%201.2%205.05A8.03%208.03%200%200%201%205.08%2013zM7.1%2011H5.08a8.03%208.03%200%200%201%203.22-5.05A15.6%2015.6%200%200%200%207.1%2011zm2.98%200h3.84c-.07.72-.2%201.46-.36%202H10.44c-.16-.54-.29-1.28-.36-2zm0-2c.07-.72.2-1.46.36-2h3.12c.16.54.29%201.28.36%202H10.08zm1.92%2010.92c-.78-1.07-1.62-3.1-1.92-6.92h3.84c-.3%203.82-1.14%205.85-1.92%206.92zM15.7%2018.05c.57-1.38%201-3.15%201.2-5.05h2.02a8.03%208.03%200%200%201-3.22%205.05z%27/%3E%3C/svg%3E");
}

/* Facebook */
.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");
}

/* X */
.slink--x{
  --brand:#FFFFFF;
  --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%27M18.9%202.2h3.1l-6.8%207.8L23%2021.8h-6.2l-4.9-6.4-5.6%206.4H3.2l7.3-8.4L1%202.2h6.3l4.4%205.9%205.2-5.9zm-1.1%2017.7h1.7L7.2%203.9H5.3l12.5%2016z%27/%3E%3C/svg%3E");
}

/* Instagram */
.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");
}

/* Telegram */
.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");
}

/* TikTok */
.slink--tiktok{
  --brand:#FFFFFF;
  --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%202c.5%203%202.4%205.1%205%205.3v3.2c-1.9.1-3.7-.5-5-1.5V16c0%203.8-3.1%206.9-6.9%206.9S2.2%2019.8%202.2%2016s3.1-6.9%206.9-6.9c.5%200%201%200%201.5.2v3.5c-.5-.3-1-.4-1.5-.4-1.9%200-3.4%201.6-3.4%203.6s1.5%203.6%203.4%203.6%203.5-1.2%203.5-4V2h3.4z%27/%3E%3C/svg%3E");
}

/* VK */
.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");
}

/* YouTube */
.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");
}

/* WhatsApp */
.slink--whatsapp{
  --brand:#25D366;
  --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.5%203.5A11%2011%200%200%200%202.7%2016.7L2%2022l5.5-1.4A11%2011%200%201%200%2020.5%203.5zm-9.5%2018a9%209%200%200%201-4.6-1.3l-.3-.2-3.2.8.9-3.1-.2-.3A9%209%200%201%201%2011%2021.5zm5.2-6.7c-.3-.1-1.8-.9-2.1-1-.3-.1-.5-.1-.7.1s-.8%201-1%201.2c-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3%200-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2%200-.4%200-.6s-.7-1.7-.9-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2%200-.6.1-.9.4s-1.2%201.2-1.2%202.9%201.2%203.4%201.4%203.6c.2.2%202.4%203.7%205.8%205.2.8.4%201.5.6%202%20.8.9.3%201.7.3%202.3.2.7-.1%201.8-.7%202.1-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.3z%27/%3E%3C/svg%3E");
}

/* Discord */
.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");
}

/* Twitch */
.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");
}

/* Reddit */
.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");
}

/* LinkedIn */
.slink--linkedin{
  --brand:#0A66C2;
  --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%27M6.9%206.8a2.2%202.2%200%201%201%200-4.4%202.2%202.2%200%200%201%200%204.4zM4.8%2021.6V9h4.2v12.6H4.8zM13%209v1.7c.6-1%201.8-2%203.7-2%204%200%204.8%202.6%204.8%206V21.6h-4.2v-5.4c0-1.6-.3-2.7-1.8-2.7-1.2%200-1.9.8-2.2%201.6-.1.3-.1.7-.1%201v5.5H9V9h4z%27/%3E%3C/svg%3E");
}

/* OK */
.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");
}

/* SoundCloud */
.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");
}

/* Spotify */
.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");
}

/* Apple Music */
.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");
}

/* Deezer */
.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");
}

/* Mixcloud */
.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");
}

/* Bandcamp */
.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");
}

/* RuTube */
.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");
}

.viewbtn{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    
    cursor:pointer;
    border-radius:8px;
   
}

.viewbtn svg{
    width:26px;
    height:26px;
}


/* плитка (по умолчанию) */
#stations:not(.is-list) .cardDesc {
  display: none;
}

/* список */
#stations.is-list .cardDesc {
  display: block;
}

/* скрыть сам виджет, но не ломать работу */
[id^="__wau72g"],
iframe[src*="waust"],
img[src*="waust"]{
  display:none !important;
  visibility:hidden !important;
}