/* Music CMS Default 1.0 · Fresh Teal */
:root{color-scheme:light;--page:#f4f8f8;--paper:#fff;--ink:#203c48;--muted:#607c84;--teal:#078a88;--border:#d6e3e3;--soft:#e5f3f0;--blue:#edf2f9}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:#176c75}
button,input{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ft-sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}

.ft-wrap{max-width:1250px;margin:0 auto;padding:0 20px}
.ft-header{display:grid;grid-template-columns:max-content minmax(250px,360px) minmax(0,1fr);column-gap:18px;align-items:center;padding:15px 0;border-bottom:1px solid var(--border)}
.ft-brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:20px;line-height:1.1;font-weight:750;text-decoration:none;min-width:0}
.ft-brand img{width:40px;height:40px;object-fit:contain;border-radius:9px;flex:none}
.ft-brand span{overflow-wrap:anywhere}
.ft-header-search,.ft-search-controls{display:flex;gap:7px}
.ft-header-search input,.ft-search-controls input{width:100%;min-width:0;padding:9px 10px;border:1px solid #bbcdcd;border-radius:8px;background:#fff;color:var(--ink)}
.ft-header-search button,.ft-search-controls button{display:flex;align-items:center;gap:5px;background:var(--teal);color:#fff;border:1px solid var(--teal);border-radius:8px;padding:9px 12px;font-weight:650;white-space:nowrap}
/* One-line desktop categories: scroll within the available header width rather than
   pushing the last item onto a second line. Native horizontal scroll supports
   touch, trackpad and shift+wheel; keyboard users can focus the links. */
.ft-categories{display:flex;justify-content:flex-start;align-items:center;gap:4px;flex-wrap:nowrap;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b4cccc transparent}
.ft-categories a{flex:0 0 auto;white-space:nowrap;color:#315761;text-decoration:none;font-size:12px;padding:5px 8px;border-radius:7px}
.ft-categories a:hover{background:var(--soft)}
.ft-mobile-toggle{display:none}
.ft-main{padding:24px 0 44px;min-height:55vh}
.ft-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:24px}
.ft-content-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(250px,3fr);gap:20px;align-items:start}
.ft-primary,.ft-side,.ft-top-grid>div{min-width:0}
.ft-side{display:grid;gap:14px}
h1{font-size:clamp(22px,2vw,27px);line-height:1.35;margin:0 0 14px}
h2{font-size:18px;line-height:1.35;margin:0 0 11px}
.ft-block{min-width:0;background:var(--paper);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:16px}
.ft-block h2{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ft-heading-icon{display:inline-grid;color:var(--teal);flex:none}
.ft-top-grid>div:first-child .ft-block{background:var(--soft)}
.ft-top-grid>div:last-child .ft-block{background:var(--blue)}
.ft-side .ft-block:first-child{background:var(--soft)}
.ft-side .ft-block:nth-child(2){background:var(--blue)}
.ft-main-new{background:var(--paper)}
.ft-intro{font-size:14px;line-height:1.65;margin:0 0 15px;color:var(--muted);overflow-wrap:anywhere}
.ft-breadcrumb{color:var(--muted);font-size:12px;margin:0 0 13px}
.ft-songlist{border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--paper)}
.ft-row{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 10px;border-bottom:1px solid var(--border)}
.ft-row:last-child{border-bottom:0}
.ft-row-mark{width:23px;flex:none;display:grid;place-items:center;color:var(--teal)}
.ft-row-title{color:var(--ink);font-size:14px;text-decoration:none;min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ft-row-title:hover{text-decoration:underline}
.ft-row-actions{display:flex;align-items:center;gap:7px;flex:none}
.ft-play,.ft-download{display:inline-grid;place-items:center;width:35px;height:35px;border:1px solid #a2c7c4;border-radius:8px;color:#056e6c;background:#e5f3f0;text-decoration:none}
.ft-play.is-playing{background:var(--teal);color:#fff}
.ft-play svg,.ft-download svg{display:block}
.ft-ranking{margin:0;padding:0;list-style:none;counter-reset:ft-rank}
.ft-ranking li{counter-increment:ft-rank;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);min-height:40px;padding:7px 3px}
.ft-ranking li:last-child{border-bottom:0}
.ft-ranking li:before{content:counter(ft-rank);display:grid;place-items:center;background:#d9eeea;color:#145b60;font-weight:700;font-size:12px;width:23px;height:23px;border-radius:7px;flex:none}
.ft-ranking a{font-size:13px;text-decoration:none;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-empty{padding:13px;color:var(--muted);background:#f7fafa;border:1px dashed var(--border);border-radius:8px;margin:0;font-size:13px}
.ft-pages{display:flex;gap:6px;flex-wrap:wrap;margin:17px 0 0}
.ft-pages a{display:grid;place-items:center;min-width:32px;height:32px;border:1px solid var(--border);border-radius:7px;background:#fff;text-decoration:none;font-size:13px}
.ft-pages .is-active{background:var(--teal);color:#fff;border-color:var(--teal)}

.ft-search-form{max-width:660px;margin-bottom:14px}
.ft-search-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.ft-search-count{font-size:13px;color:var(--muted)}
.ft-song-detail,.ft-lyrics,.ft-related{background:var(--paper);border:1px solid var(--border);border-radius:10px;padding:17px;margin-bottom:17px}
.ft-song-heading{display:flex;align-items:center;gap:12px}
.ft-song-heading h1{font-size:clamp(21px,1.85vw,25px);line-height:1.35;margin:0;overflow-wrap:anywhere}
.ft-song-cover{width:64px;height:64px;border-radius:9px;object-fit:cover;flex:none}
.ft-song-cover-fallback{display:grid;place-items:center;background:var(--soft);color:var(--teal)}
.ft-song-actions{display:flex;gap:10px;margin:18px 0}
.ft-song-play,.ft-song-download{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:1;min-height:43px;border-radius:9px;border:1px solid #188c89;background:var(--teal);color:#fff;text-decoration:none;padding:9px 12px;font-weight:650;font-size:14px}
.ft-song-download{background:#fff;color:#087674}
.ft-song-play.is-playing{background:#006b69}
.ft-song-meta{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:11px;color:var(--muted);font-size:12px}
.ft-song-meta span{background:#f1f6f6;padding:3px 8px;border-radius:6px}
.ft-lyrics-text{line-height:1.8;overflow-wrap:anywhere;font-size:15px}
.ft-footer{border-top:1px solid var(--border);padding:19px 0 35px;display:flex;flex-wrap:wrap;gap:9px 18px;color:var(--muted);font-size:12px}
.ft-footer a{color:#176c75}

.music-player[hidden]{display:none}
.music-player{position:fixed;z-index:99;left:0;right:0;bottom:0;background:#203c48;color:#fff;border-top:2px solid var(--teal);padding:10px max(20px,calc((100vw - 1210px)/2));box-shadow:0 -3px 15px #173d471f}
.player-main{display:flex;align-items:center;gap:14px}
.player-now{min-width:125px;flex:1}
.player-now strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.player-controls{display:flex;gap:6px}
.player-icon{display:grid;place-items:center;min-width:34px;min-height:34px;background:#365964;border:0;border-radius:8px;color:#fff}
.player-icon svg{display:block}
.player-progress{display:flex;align-items:center;gap:6px;flex:1;min-width:150px;font-size:11px}
.player-progress input{flex:1;min-width:40px}
.player-volume{display:flex;align-items:center;gap:5px}
.player-volume input{width:75px}
.music-player input{accent-color:#46c6b6}
body:has(.music-player:not([hidden])) .ft-wrap{padding-bottom:100px}

@media(max-width:1050px){
.ft-header{grid-template-columns:max-content minmax(205px,300px) minmax(0,1fr);column-gap:12px}
.ft-brand{font-size:18px}
.ft-header-search button{padding-inline:9px}
}

@media(max-width:800px){.ft-content-grid{grid-template-columns:minmax(0,1fr)}
.ft-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ft-top-grid{gap:12px}
.player-main{flex-wrap:wrap}
.player-progress{order:5;flex-basis:100%}
}

@media(max-width:600px){.ft-wrap{padding:0 13px}
.ft-header{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 0;border-bottom:0}
.ft-brand{font-size:19px}
.ft-header-search{width:100%}
.ft-mobile-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--paper);color:var(--ink);font-size:13px;margin-bottom:7px}
.ft-categories{display:none;flex-direction:column;align-items:stretch;overflow:visible;max-width:none;border:1px solid var(--border);border-radius:9px;padding:6px}
.ft-categories.is-open{display:flex}
.ft-categories a{padding:9px 10px}
.ft-main{padding-top:15px}
.ft-top-grid{grid-template-columns:1fr;gap:0;margin-bottom:6px}
.ft-side{grid-template-columns:1fr}
.ft-block{padding:12px}
.ft-row{padding:9px 8px;gap:7px}
.ft-row-mark{width:19px}
.ft-row-actions{gap:6px}
.ft-play,.ft-download{width:35px;height:35px}
h1{font-size:23px}
h2{font-size:17px}
.ft-song-detail,.ft-lyrics,.ft-related{padding:13px}
.ft-song-heading h1{font-size:clamp(19px,5.2vw,22px)}
.ft-song-cover{width:44px;height:44px}
.ft-song-actions{flex-wrap:wrap}
.ft-song-actions>*{min-width:0}
.music-player{padding:9px 10px max(8px,env(safe-area-inset-bottom))}
.player-now{min-width:0}
.player-volume{display:none}
.player-progress{flex-basis:100%}
.player-icon{min-width:35px;min-height:35px}
body:has(.music-player:not([hidden])) .ft-wrap{padding-bottom:160px}
}



/* Fresh Teal 1.0.1 — shared player's dynamically created mute control. */
.music-player .player-mute {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #365964;
  color: #ffffff;
  border: 1px solid #507783;
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
}

.music-player .player-mute svg { display: block; width: 20px; height: 20px; }

.music-player .player-mute:hover { background: #41717c; border-color: #68c9bd; }

.music-player .player-mute:focus-visible { outline: 2px solid #70ddd1; outline-offset: 2px; }

/* Equal, compact controls; avoid wrapping “Слухати онлайн” on narrow screens. */
.ft-song-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 10px; }

.ft-song-actions > .ft-song-play,
.ft-song-actions > .ft-song-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 8px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  gap: 5px;
}

.ft-song-actions svg { flex-shrink: 0; display: block; }

@media (max-width: 600px) {
  .music-player .player-mute { display: none; }

  .ft-song-actions { gap: 8px; flex-wrap: nowrap; }

  .ft-song-actions > .ft-song-play,
  .ft-song-actions > .ft-song-download { font-size: clamp(11px, 3.1vw, 13px); padding: 8px 4px; }

  .ft-song-actions svg { width: 16px; height: 16px; }

}