/* Ukrainian Warm theme */
:root {
  --mp-bg: #faf7f0;
  --mp-surface: #ffffff;
  --mp-ink: #19324e;
  --mp-muted: #716e69;
  --mp-accent: #c58b2a;
  --mp-accent-hover: #a7711e;
  --mp-stroke: #e8dfd1;
  --mp-soft: #f4eadb;
  --mp-radius: 14px;
  --mp-shadow: 0 8px 28px rgba(58,49,37,.055);
}
body { background: var(--mp-bg); color: var(--mp-ink); }
a { color: var(--mp-ink); }
a:hover, a:focus-visible { color: var(--mp-accent-hover); }
.header { background: rgba(250,247,240,.98); box-shadow: 0 1px 0 var(--mp-stroke); }
.header-in { padding-top: 16px; padding-bottom: 16px; }
.logo, .logo:hover { color: var(--mp-ink) !important; text-transform: none; width: 240px; min-width: 210px; font-weight: 700; font-size: 25px; letter-spacing: -.6px; }
.logo span, .logo .sitename { color: var(--mp-ink); margin-left: 11px; }
.logo img { width: 38px; height: 38px; object-fit: contain; }
.search-wrap { min-width: 0; }
.search-box { position: relative; border: 1px solid var(--mp-stroke); border-radius: 14px; background: #fff; box-shadow: var(--mp-shadow); overflow: hidden; }
.search-box input#story { background: transparent; border: 0; box-shadow: none; width: 100%; height: 48px; line-height: normal; padding: 0 62px 0 18px; color: var(--mp-ink); }
.search-box input#story::placeholder { color: #99918a; opacity: 1; }
.search-box:focus-within { border-color: var(--mp-accent); box-shadow: 0 0 0 3px rgba(197,139,42,.13); }
.search-box .search-btn { position: absolute; inset: 3px 4px 3px auto; width: 47px; height: 42px; line-height: 42px; border-radius: 10px; padding: 0; background: transparent; color: var(--mp-ink); box-shadow: none; font-size: 18px; }
.search-box .search-btn:hover, .search-box .search-btn:focus-visible { background: var(--mp-soft); color: var(--mp-accent-hover); }
.sect-bg { background-color: var(--mp-surface); border: 1px solid var(--mp-stroke); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); }
.sect-title, h1, h2, .side-bt { color: var(--mp-ink); }
.sect-title span, .side-nav>li>span, .sect-title [class*=fa-], .side-bt [class*=fa-] { color: var(--mp-accent); }
.side-nav>li>a { color: var(--mp-ink); }
.side-nav>li:hover>a, .side-nav>li>a:hover { color: var(--mp-accent-hover); }
.side-item::before { color: var(--mp-accent); }
.side-item, .side-item span { color: var(--mp-ink); }
.side-bt { border-bottom-color: var(--mp-stroke); }
.sect-link { background: var(--mp-soft); color: var(--mp-accent-hover); border-radius: 7px; transform: none; }
.sect-link:hover { color: #fff; background: var(--mp-accent); }
.footer, .footer a { color: var(--mp-muted); }
.footer a:hover { color: var(--mp-accent-hover); }
.btn-menu { color: var(--mp-ink) !important; }
.side-panel { background: var(--mp-bg); }
@media (max-width: 760px) {
  .logo { width: auto; min-width: 0; font-size: 21px; }
  .logo img { width: 34px; height: 34px; }
  .search-wrap { width: 100%; }
  .search-box input#story { height: 46px; }
}
@media (max-width: 470px) {
  .logo { font-size: 19px; }
  .logo .sitename { margin-left: 8px; }
}


/* Navigation and sidebar components */

/* Category navigation: preserve DLE category list and links. */
.col-left .side-nav, .side-panel .side-nav {
  background: var(--mp-surface); border: 1px solid var(--mp-stroke);
  border-radius: 16px; padding: 10px; box-shadow: var(--mp-shadow);
}
.col-left .side-nav > li, .side-panel .side-nav > li {margin:0 0 3px;min-height:46px;position:relative;}
.col-left .side-nav > li:last-child, .side-panel .side-nav > li:last-child {margin-bottom:0;}
.col-left .side-nav > li > a, .side-panel .side-nav > li > a {
  display:flex; align-items:center; min-height:46px; padding:9px 12px 9px 46px;
  border-radius:11px; line-height:1.35; font-size:14px; font-weight:600;
  color:var(--mp-ink); transition:background-color .18s,color .18s;
}
.col-left .side-nav > li > a:hover, .col-left .side-nav > li > a:focus-visible,
.side-panel .side-nav > li > a:hover, .side-panel .side-nav > li > a:focus-visible {
  background:var(--mp-soft); color:var(--mp-accent-hover);
}
.col-left .side-nav > li > span, .side-panel .side-nav > li > span {
  display:block; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  height:22px; width:22px; color:var(--mp-accent); font-size:0;
  background-position:center; background-repeat:no-repeat; background-size:22px 22px;
  pointer-events:none;
}
.col-left .side-nav > li > span:before, .side-panel .side-nav > li > span:before {content:none!important;}
/* The individual symbols match the order of categories in this template. */
.col-left .side-nav > li:nth-child(1) > span, .side-panel .side-nav > li:nth-child(1) > span {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C58B2A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M8%202v4M16%202v4M4%209h16M8%2014h8M8%2017h5%22%2F%3E%3C%2Fsvg%3E");}
.col-left .side-nav > li:nth-child(2) > span, .side-panel .side-nav > li:nth-child(2) > span {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C58B2A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%204c4%202%201%205%205%207%202-2%203-4%203-7%204%205%205%209%204%2012-1%204-4%206-8%206S4%2019%204%2015c0-4%202-7%204-11Z%22%2F%3E%3C%2Fsvg%3E");}
.col-left .side-nav > li:nth-child(3) > span, .side-panel .side-nav > li:nth-child(3) > span {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C58B2A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2016%202-7h10l2%207M4%2016v3M20%2016v3M4%2016h16M8%2012h8%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2217%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");}
.col-left .side-nav > li:nth-child(4) > span, .side-panel .side-nav > li:nth-child(4) > span {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C58B2A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013v-2M7%2018V6M11%2021V3M15%2017V7M19%2014v-4M23%2013v-2%22%2F%3E%3C%2Fsvg%3E");}
.col-left .side-nav > li:nth-child(5) > span, .side-panel .side-nav > li:nth-child(5) > span {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C58B2A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%228%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M10%203V1M14%203V1M11%208h2M11%2012h2M11%2016h2%22%2F%3E%3C%2Fsvg%3E");}

/* Right-side widgets. */
.col-right .side-box {padding:0 0 10px;overflow:hidden;margin-bottom:20px;}
.col-right .side-bt {
  display:flex;align-items:center;gap:11px;
  margin:0 0 6px;padding:17px 17px 15px; min-height:62px;
  border-bottom:1px solid var(--mp-stroke);font-weight:700;font-size:16px;
  color:var(--mp-ink);
}
.mp-side-icon {width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  flex:none;border-radius:10px;background:var(--mp-soft);color:var(--mp-accent);}
.mp-side-icon svg {width:20px;height:20px;}
.col-right .side-bc {padding:2px 12px 3px;}
.col-right .side-item {
  display:block;padding:10px 10px 10px 43px;margin:1px 0;min-height:41px;
  border-radius:10px;line-height:1.45;color:var(--mp-ink);font-size:13px;
  transition:background-color .18s,color .18s;
}
.col-right .side-item:before {
  content:'♪'; font-family:inherit;font-weight:700;font-size:17px;
  position:absolute;top:50%;left:10px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:25px;height:25px;
  border-radius:8px;background:var(--mp-soft);color:var(--mp-accent);
}
.col-right .side-item:hover,.col-right .side-item:focus-visible {
  background:var(--mp-soft);color:var(--mp-accent-hover);
}
@media (max-width:1220px) {
  .side-panel .side-nav {margin:0;padding:10px;}
  .side-panel .side-nav > li > a {white-space:normal;}
}
@media (max-width:590px) {
  .col-right .side-bt {padding:14px 15px;}
  .col-right .side-bc {padding:2px 10px 3px;}
}

/* Layout alignment — desktop only.
   Keep the search aligned with the central content column. */
@media screen and (min-width: 1221px) {
  .wrap-main .col-left {
    width: 230px;
    flex: 0 0 230px;
    margin-right: 30px;
  }
  .header-in .logo {
    width: 240px;
    flex: 0 0 240px;
  }
  .header-in .search-wrap {
    margin: 0 270px 0 20px;
    min-width: 0;
  }
}


/* Home page music sections: Warm 1.3 */
.mp-home { display:flex; flex-direction:column; gap:22px; }
.mp-home-featured { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.mp-home-panel { min-width:0; background:var(--mp-surface); border:1px solid var(--mp-stroke); border-radius:var(--mp-radius); box-shadow:var(--mp-shadow); padding:19px 20px; }
.mp-home-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.mp-home-heading-title { display:flex; align-items:center; gap:10px; min-width:0; }
.mp-home-heading h1, .mp-home-heading h2 { font-size:18px; line-height:1.3; font-weight:700; margin:0; color:var(--mp-ink); }
.mp-home-symbol { width:34px; height:34px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--mp-soft); border-radius:10px; color:var(--mp-accent); font-size:21px; }
.mp-home-more { flex:none; font-size:12px; font-weight:600; color:var(--mp-accent-hover); white-space:nowrap; }
.mp-home-more:hover { text-decoration:underline; }
.mp-home .mp-compact-track, .mp-home .mp-main-track { position:relative; min-width:0; display:flex; align-items:center; }
.mp-home .mp-compact-track { gap:9px; padding:9px 1px; min-height:55px; border-top:1px solid #f0e9df; }
.mp-home .mp-compact-track:first-child { border-top:0; }
.mp-compact-icon { display:flex; align-items:center; justify-content:center; flex:none; height:32px; width:32px; border-radius:10px; background:var(--mp-soft); color:var(--mp-accent); font-size:20px; }
.mp-home .mp-compact-title { display:block; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mp-ink); font-weight:600; font-size:13px; }
.mp-home .mp-compact-controls { display:flex; flex:none; align-items:center; gap:5px; }
.mp-home button.mp-track-play, .mp-home .mp-track-download { display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0; width:31px; height:31px; border:1px solid var(--mp-stroke); border-radius:50%; color:var(--mp-ink); background:#fff; line-height:1; font:inherit; font-size:12px; cursor:pointer; }
.mp-home .mp-track-download { color:var(--mp-accent-hover); font-size:21px; }
.mp-home .mp-track-play:hover, .mp-home .mp-track-play:focus-visible, .mp-home .mp-track-download:hover, .mp-home .mp-track-download:focus-visible { background:var(--mp-soft); border-color:var(--mp-accent); color:var(--mp-accent-hover); }
.mp-home-top .mp-compact-list { counter-reset:mp-chart; }
.mp-home-top .mp-compact-track { counter-increment:mp-chart; }
.mp-home-top .mp-compact-icon { font-size:0; }
.mp-home-top .mp-compact-icon::after { content:counter(mp-chart,decimal-leading-zero); font-size:12px; font-weight:700; }
.mp-home .mp-main-track { gap:15px; padding:13px 2px; min-height:75px; border-bottom:1px solid #efe7da; }
.mp-home .mp-main-track:last-child { border-bottom:0; }
.mp-main-track-icon { flex:none; display:flex; justify-content:center; align-items:center; width:47px; height:47px; border-radius:13px; background:var(--mp-soft); color:var(--mp-accent); font-size:24px; }
.mp-main-track-content { flex:1; min-width:0; }
.mp-home .mp-main-track-title { color:var(--mp-ink); font-size:15px; line-height:1.45; font-weight:600; display:block; overflow-wrap:anywhere; }
.mp-home .mp-main-track-actions { display:flex; align-items:center; flex:none; gap:9px; }
.mp-home button.mp-main-play, .mp-home .mp-main-download { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 13px; border-radius:10px; font:inherit; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; line-height:1; }
.mp-home button.mp-main-play { border:1px solid var(--mp-ink); background:var(--mp-ink); color:#fff; }
.mp-home .mp-main-download { border:1px solid var(--mp-stroke); color:var(--mp-accent-hover); background:var(--mp-soft); }
.mp-home button.mp-main-play:hover, .mp-home button.mp-main-play:focus-visible { background:#294765; color:#fff; }
.mp-home .mp-main-download:hover, .mp-home .mp-main-download:focus-visible { border-color:var(--mp-accent); color:var(--mp-accent-hover); }
.mp-home .mp-main-play span:first-child { font-size:11px; }
.mp-home .mp-main-download span:first-child { font-size:22px; font-weight:400; }
.mp-home .mp-home-about { margin:0; }
.mp-home .mp-home-about .sect-header { display:block; margin-bottom:12px; }
.mp-home .mp-home-about p { margin:0; line-height:1.75; }
.mp-home .mp-compact-track.js-item-current, .mp-home .mp-main-track.js-item-current { background:#fbf6ed; border-radius:10px; }
@media (max-width:1100px) { .mp-home-featured { grid-template-columns:1fr; } }
@media (max-width:780px) { .mp-home-panel { padding:16px; } .mp-home .mp-main-track-actions { gap:5px; } .mp-home button.mp-main-play, .mp-home .mp-main-download { width:38px; padding:0; } .mp-home .mp-main-track-actions span:nth-child(2) { display:none; } }
@media (max-width:460px) { .mp-home-heading h1, .mp-home-heading h2 { font-size:16px; } .mp-home-more { font-size:11px; } .mp-home .mp-main-track { gap:10px; } .mp-main-track-icon { height:39px; width:39px; } .mp-home .mp-main-track-title { font-size:13px; } }

/* Homepage controls: compact, consistent with the warm palette. */
.mp-home button.mp-main-play,
.mp-home .mp-main-download {
  box-sizing:border-box !important;
  -webkit-appearance:none; appearance:none;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  vertical-align:middle !important;
  width:auto !important; min-width:0 !important; height:34px !important; min-height:34px !important;
  margin:0 !important; padding:0 12px !important;
  border-radius:9px !important; font-family:inherit !important; font-size:12px !important;
  font-weight:600 !important; line-height:1 !important; letter-spacing:0 !important;
  text-transform:none !important; white-space:nowrap !important; text-decoration:none !important;
  box-shadow:none !important; transition:background-color .15s,border-color .15s,color .15s;
}
.mp-home button.mp-main-play {
  border:1px solid #19324e !important; background:#19324e !important; color:#fff !important;
}
.mp-home button.mp-main-play:hover, .mp-home button.mp-main-play:focus-visible {
  background:#294765 !important; color:#fff !important;
}
.mp-home .mp-main-download {
  border:1px solid #e6d5bc !important; background:#f5ead9 !important; color:#9e681c !important;
}
.mp-home .mp-main-download:hover, .mp-home .mp-main-download:focus-visible {
  border-color:#c58b2a !important; color:#815213 !important;
}
.mp-home button.mp-main-play span, .mp-home .mp-main-download span {
  display:inline-flex; align-items:center; justify-content:center; line-height:1 !important;
  margin:0 !important; padding:0 !important; color:inherit !important;
}
.mp-home .mp-main-play span:first-child { font-size:11px !important; }
.mp-home .mp-main-download span:first-child { font-size:16px !important; }
@media (max-width:780px) {
  .mp-home button.mp-main-play, .mp-home .mp-main-download {
    width:34px !important; height:34px !important; min-height:34px !important; padding:0 !important;
  }
}


/* Homepage controls — layout and playback state (1.3.3). */
/* The existing audio player sets js-item-played / js-item-stopped on rows. */
.mp-home .mp-compact-track { padding-left:7px; padding-right:7px; }
.mp-home .mp-main-track { padding-left:12px; padding-right:12px; box-sizing:border-box; }
.mp-home .mp-main-track.js-item-current,
.mp-home .mp-compact-track.js-item-current { background:#fbf6ed; }
.mp-home .mp-main-track.js-item-current { border-radius:12px; }

.mp-home button.mp-track-play {
  box-sizing:border-box !important; appearance:none !important;
  width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important;
  padding:0 !important; margin:0 !important; border:1px solid #19324e !important;
  background:#19324e !important; color:#fff !important; border-radius:10px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important; box-shadow:none !important; font-size:14px !important;
}
.mp-home button.mp-track-play:hover, .mp-home button.mp-track-play:focus-visible { background:#294765 !important; border-color:#294765 !important; color:#fff !important; }
.mp-home button.mp-main-play { border-radius:9px !important; }
.mp-home .mp-play-glyph {display:inline-block!important; position:relative; width:12px; height:14px; flex:none; font-size:0!important; line-height:0!important; color:inherit!important;}
.mp-home .mp-play-glyph::before { content:''; position:absolute; top:2px; left:2px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; }
.mp-home .js-item-played .mp-play-glyph::before { border:0; width:3px; height:11px; left:2px; top:1px; background:currentColor; }
.mp-home .js-item-played .mp-play-glyph::after { content:''; position:absolute; left:8px; top:1px; width:3px; height:11px; background:currentColor; }
.mp-home .mp-label-pause {display:none!important;}
.mp-home .js-item-played .mp-label-listen {display:none!important;}
.mp-home .js-item-played .mp-label-pause {display:inline!important;}
.mp-home .mp-main-play .mp-play-label {display:inline-flex!important; align-items:center; padding:0!important; margin:0!important; line-height:1!important;}
@media (max-width:780px) {
 .mp-home .mp-main-track {padding-left:9px; padding-right:9px;}
 .mp-home .mp-main-play .mp-play-label {display:none!important;}
}

/* Homepage featured cards: warm differentiated backgrounds (1.3.4). */
.mp-home-featured .mp-home-new {
  background: #fffaf0;
  border-color: #ead9bb;
}
.mp-home-featured .mp-home-top {
  background: #fff6ed;
  border-color: #ecd9c6;
}
.mp-home-featured .mp-home-new .mp-compact-track,
.mp-home-featured .mp-home-top .mp-compact-track {
  border-top-color: rgba(167,113,30,.14);
}
.mp-home-featured .mp-compact-track.js-item-current {
  background: rgba(232,204,156,.23);
}

/* Mobile header: one clean brand/menu row, one full-width search row. */
@media screen and (max-width: 760px) {
  .header .header-in {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 44px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 12px;
    align-items: center;
    justify-content: stretch;
    padding: 12px 0 14px;
  }
  .header .header-in .logo {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    font-size: clamp(16px,4.6vw,22px) !important;
    line-height: 1.2;
    white-space: nowrap;
  }
  .header .header-in .logo img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }
  .header .header-in .logo .sitename {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 !important;
  }
  .header .header-in .btn-menu {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 23px;
    color: var(--mp-ink) !important;
    border-radius: 10px;
  }
  .header .header-in .btn-menu:hover {
    background: var(--mp-soft);
  }
  .header .header-in .search-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: none !important;
  }
  .header .header-in .search-wrap form,
  .header .header-in .search-box {width: 100%; min-width: 0;}
  .header .header-in .search-box input#story {
    min-width: 0;
    width: 100%;
    font-size: 14px;
  }
}


/* Featured lists: clearer warm distinction against the page background. */
.mp-home-featured .mp-home-new {
  background-color: #FFF0D7;
  border-color: #E8CDA3;
}
.mp-home-featured .mp-home-top {
  background-color: #FBE8DF;
  border-color: #EBC8B9;
}
.mp-home-featured .mp-home-new .mp-compact-track.js-item-current {
  background-color: #F5DEBA;
}
.mp-home-featured .mp-home-top .mp-compact-track.js-item-current {
  background-color: #F2D6C8;
}

/* Mobile navigation close button — palette-aligned, no legacy red. */
@media screen and (max-width: 760px) {
  .btn-close {
    background: #19324E !important;
    color: #FFFFFF !important;
    border: 1px solid #D6C6AF !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 5px 16px rgba(25,50,78,.16) !important;
    font-size: 20px !important;
    line-height: 42px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .btn-close:hover,
  .btn-close:focus-visible {
    background: #294765 !important;
    color: #FFFFFF !important;
  }
  .side-panel {
    background-color: #FAF7F0 !important;
  }
}

/* Keep the off-canvas close control fully hidden when menu is closed. */
@media screen and (max-width: 760px) {
  .btn-close:not(.active) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .btn-close.active {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* 1.3.7 — iOS Chrome mobile header: keep header in document flow.
   This overrides possible legacy positioning / transforms without affecting desktop. */
@media screen and (max-width: 760px) {
  html { scroll-padding-top: 0 !important; }
  body { scroll-margin-top: 0 !important; }
  .header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    margin-top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .header .header-in {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .header .logo, .header .search-wrap {
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
  }
}


/* 1.4.0 — Featured headings and track symbols contrast with tinted panels. */
.mp-home-featured .mp-home-new .mp-home-symbol,
.mp-home-featured .mp-home-new .mp-compact-icon {
  background-color: #E9C78D !important;
  color: #795117 !important;
}
.mp-home-featured .mp-home-top .mp-home-symbol,
.mp-home-featured .mp-home-top .mp-compact-icon {
  background-color: #EFC8B7 !important;
  color: #8A4D2B !important;
}
.mp-home-featured .mp-home-top .mp-compact-icon::after { color: #8A4D2B !important; }
.mp-home-featured .mp-compact-track.js-item-current .mp-compact-icon {
  background-color: #FFFFFF !important;
}

/* Category archive — one clean listening action per row. */
.mp-category .sect-bg { padding: 22px 24px; }
.mp-category .sect-header.sect-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 24px; font-weight: 750; line-height: 1.35;
  margin: 0 0 16px; padding: 0 0 16px;
  border-bottom: 1px solid #ede2d3;
}
.mp-category .sect-header.sect-title::before {
  content: '♫'; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  background: #f3e2c8; color: #a56e1e;
  font-size: 23px; border-radius: 12px;
}
.mp-category .mp-category-track {
  box-sizing: border-box !important;
  display: flex !important; align-items: center !important;
  flex-wrap: nowrap !important; gap: 14px !important;
  margin: 0 !important; padding: 12px 12px !important;
  min-height: 70px; border: 0 !important;
  border-bottom: 1px solid #efe6da !important;
  border-radius: 0; background: transparent;
}
.mp-category .mp-category-track:last-child { border-bottom: 0 !important; }
.mp-category .mp-category-track:hover { background: #faf4eb !important; border-radius: 12px; }
.mp-category .mp-category-track.js-item-current {
  background: #f7ead7 !important; border-radius: 12px;
}
.mp-category .mp-category-note {
  display: flex; justify-content: center; align-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 12px; background: #f3e4cf; color: #c28a2e;
  font-size: 26px; line-height: 1;
}
.mp-category .mp-category-track.js-item-current .mp-category-note { background: #fff9ee; }
.mp-category .mp-category-title {
  display: block !important; flex: 1 1 auto !important; min-width: 0 !important;
  width: auto !important; overflow: hidden !important; text-overflow: ellipsis;
  white-space: nowrap; font-size: 15px; font-weight: 650;
  line-height: 1.5; color: #19324e !important;
}
.mp-category .mp-category-title:hover { color: #aa721f !important; }
.mp-category button.mp-category-play {
  box-sizing: border-box !important; appearance: none !important;
  position: static !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  flex: 0 0 38px !important; width: 38px !important; height: 38px !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 11px !important;
  background: #19324e !important; color: #fff !important;
  cursor: pointer; box-shadow: none !important;
}
.mp-category button.mp-category-play:hover { background: #294765 !important; }
.mp-category button.mp-category-play .mp-play-glyph {
  display: inline-block; height: 0; width: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 9px solid #fff; margin-left: 3px;
}
.mp-category .mp-category-track.js-item-played button.mp-category-play .mp-play-glyph {
  width: 11px; height: 13px; margin-left: 0; border: 0;
  border-left: 3px solid #fff; border-right: 3px solid #fff;
}
.mp-category button.mp-category-play:focus-visible,
.mp-category .mp-category-title:focus-visible { outline: 2px solid #c58b2a !important; outline-offset: 3px; }
@media screen and (max-width: 760px) {
  .mp-category .sect-bg { padding: 17px 14px; }
  .mp-category .sect-header.sect-title { font-size: 20px; }
  .mp-category .mp-category-track { gap: 10px !important; padding: 11px 6px !important; min-height: 66px; }
  .mp-category .mp-category-note { width: 39px; height: 39px; flex-basis: 39px; font-size: 23px; }
  .mp-category .mp-category-title { font-size: 14px; }
}


/* 1.4.1 — category playback state: neutralize legacy gray ::before overlay.
   Critical.css has .song-item.js-item-played:before with #f2f6f8.
   Only category tracks are affected; homepage and player remain unchanged. */
.mp-category .song-item.mp-category-track.js-item-played::before {
  content: none !important;
  display: none !important;
}
.mp-category .mp-category-track.js-item-played,
.mp-category .mp-category-track.js-item-current {
  background-color: #f7ead7 !important;
  border-radius: 12px !important;
}
.mp-category .mp-category-track.js-item-played .mp-category-note {
  background-color: #fff9ee !important;
}


/* 1.4.2 — minimal search page. No controls or player bindings in search results. */
.mp-search-page { color:#19324e; }
.mp-search-title-row { display:flex; align-items:center; gap:13px; margin-bottom:23px; }
.mp-search-title-row h1 { margin:0; color:#19324e; font-size:23px; font-weight:800; line-height:1.25; }
.mp-search-heading-icon { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:#f0dfc3; color:#a66e1d; font-size:30px; line-height:1; }
.mp-search-form { margin:0 0 22px; }
.mp-search-form .searchtable { padding:0; border:0; background:transparent; box-shadow:none; }
.mp-search-form .searchtable table { width:100%; max-width:100%; border-collapse:collapse; }
.mp-search-form .searchtable td { padding:5px 8px 5px 0; vertical-align:middle; }
.mp-search-form input[type="text"], .mp-search-form input[type="search"], .mp-search-form select { color:#19324e; border:1px solid #e8dccb; background:#fff; border-radius:11px; padding:11px 14px; min-height:44px; max-width:100%; box-shadow:none; font:inherit; }
.mp-search-form input[type="text"], .mp-search-form input[type="search"] { width:min(100%, 390px); }
.mp-search-form input[type="text"]:focus, .mp-search-form input[type="search"]:focus { outline:2px solid rgba(197,139,42,.35); outline-offset:1px; }
.mp-search-form button, .mp-search-form input[type="submit"], .mp-search-form input[type="button"], .mp-search-form .bbcodes, .mp-search-form .btn { min-height:42px; padding:9px 17px; border:1px solid #19324e; border-radius:10px; background:#19324e; color:#fff; font:inherit; font-weight:700; cursor:pointer; box-shadow:none; }
.mp-search-form button:hover, .mp-search-form input[type="submit"]:hover, .mp-search-form .bbcodes:hover { background:#294765; color:#fff; }
.mp-search-notice { margin:14px 0 20px; padding:12px 15px; border:1px solid #eddcbd; border-radius:11px; background:#fff5e4; color:#765426; line-height:1.5; }
.mp-search-notice b, .mp-search-notice strong { color:#19324e; }
.mp-search-result { display:flex; align-items:center; gap:13px; padding:13px 5px; min-height:65px; border-bottom:1px solid #eee3d4; color:#19324e; }
.mp-search-result:last-of-type { border-bottom:0; }
.mp-search-result-icon { display:flex; justify-content:center; align-items:center; flex:0 0 42px; height:42px; background:#f3e5d0; color:#b77a23; border-radius:11px; font-size:24px; }
.mp-search-result-link { flex:1; min-width:0; display:block; color:#19324e !important; font-size:15px; line-height:1.45; font-weight:650; overflow-wrap:anywhere; }
.mp-search-result-link:hover, .mp-search-result-link:focus-visible { color:#ae741f !important; text-decoration:underline; }
.mp-search-result-chevron { color:#bc8b45; font-size:21px; padding:0 5px; }
@media(max-width:780px) {
 .mp-search-title-row { margin-bottom:17px; }
 .mp-search-title-row h1 { font-size:20px; }
 .mp-search-form .searchtable table, .mp-search-form .searchtable tbody, .mp-search-form .searchtable tr, .mp-search-form .searchtable td { max-width:100%; }
 .mp-search-form .searchtable td { padding:4px 5px 4px 0; }
 .mp-search-form input[type="text"], .mp-search-form input[type="search"] { width:100%; }
 .mp-search-result { padding:11px 0; gap:10px; }
 .mp-search-result-icon { flex-basis:38px; height:38px; font-size:21px; }
 .mp-search-result-link { font-size:14px; }
}


/* 1.5.0 — Single track: warm layout (preserves DLE data and original playback handlers). */
.mp-song-page { color:#19324e; }
.mp-song-breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:#987d5d; font-size:13px; margin-bottom:15px; }
.mp-song-breadcrumbs a {color:#95681f;}
.mp-song-breadcrumbs a:hover {color:#19324e;}
.mp-song-page .sect-bg {border:1px solid #e9ddca; border-radius:17px; padding:23px; margin-bottom:20px; background:#fff;}
.mp-song-head {display:flex; align-items:center; gap:14px; padding-bottom:19px; border-bottom:1px solid #eee2d1; margin-bottom:20px;}
.mp-song-head-icon {width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:15px;background:#f0dcc0;color:#a46d1e;font-size:32px;}
.mp-song-eyebrow {display:block;color:#ab7930;font-size:12px;font-weight:700;margin-bottom:5px;letter-spacing:.04em;}
.mp-song-page #mp-song-heading {font-weight:800;color:#19324e;font-size:clamp(21px,2.3vw,28px);line-height:1.3;margin:0;overflow-wrap:anywhere;}
.mp-song-body {display:grid;grid-template-columns:156px minmax(0,1fr) 212px;gap:22px;align-items:center;}
.mp-song-art {width:156px;height:156px;overflow:hidden;border-radius:15px;background:#f3e6d2;border:1px solid #eadeca;}
.mp-song-art img {display:block;width:100%;height:100%;object-fit:cover;}
.mp-song-info-label {font-weight:800;font-size:14px;margin-bottom:10px;}
.mp-song-meta {margin:0;display:grid;gap:9px;}
.mp-song-meta>div {display:grid;grid-template-columns:minmax(62px,.75fr) minmax(0,1fr);gap:7px;font-size:13px;line-height:1.4;}
.mp-song-meta dt {color:#9b9287;}.mp-song-meta dd {margin:0;color:#19324e;font-weight:600;}
.mp-song-page .mp-song-actions.fctrl {width:auto!important;min-width:0;margin:0!important;display:flex!important;flex-direction:column;gap:11px;}
.mp-song-page .mp-song-action.fplay {position:relative;box-sizing:border-box;display:flex!important;align-items:center;min-height:60px;height:auto!important;min-width:0;width:100%!important;margin:0!important;padding:11px 12px 11px 57px!important;box-shadow:none!important;border-radius:12px!important;color:white!important;background:#19324e!important;text-align:left;cursor:pointer;}
.mp-song-page .mp-song-action.mp-song-download {background:#f3e3cc!important;color:#946018!important;border:1px solid #e9d0a8;}
.mp-song-page .mp-song-action:hover {filter:brightness(1.08);}
.mp-song-page .mp-song-action .song-play {position:absolute!important;display:flex!important;align-items:center;justify-content:center;left:9px!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translateY(-50%);opacity:1!important;width:36px!important;height:38px!important;border-radius:9px;background:rgba(255,255,255,.13)!important;color:inherit!important;font-size:15px!important;}
.mp-song-page .mp-song-download .song-play {background:#ead3af!important;}
.mp-song-action-copy {min-width:0;line-height:1.25;}
.mp-song-action-copy strong {display:block;font-size:13px;font-weight:800;white-space:normal;}
.mp-song-action-copy small {display:block;font-size:11px;opacity:.83;margin-top:4px;white-space:normal;}
.mp-song-section-heading {display:flex;gap:12px;align-items:center;margin-bottom:17px;padding-bottom:16px;border-bottom:1px solid #eee2d1;}
.mp-song-section-heading h2 {font-size:21px;line-height:1.3;color:#19324e;font-weight:800;margin:0;}
.mp-song-section-icon {display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;border-radius:11px;background:#f3e4ce;color:#ae7828;font-size:22px;font-weight:700;}
.mp-song-lyrics-text {color:#283e56;font-size:15px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;}
.mp-song-related-list {display:grid;gap:0;}
.mp-song-related-list .song-item {display:flex!important;align-items:center;gap:12px;margin:0!important;padding:12px 6px;border-bottom:1px solid #f0e7da;min-height:59px;}
.mp-song-related-list .song-item:last-child {border-bottom:0;}
.mp-song-related-list .song-item::before {display:none!important;content:none!important;}
.mp-song-related-list .song-img {width:42px;height:42px;flex:0 0 42px;border-radius:11px;overflow:hidden;background:#f2e4d0;margin:0;}
.mp-song-related-list .song-img img {width:100%;height:100%;object-fit:cover;}
.mp-song-related-list .song-desc {min-width:0;font-size:14px;font-weight:650;color:#19324e;}
.mp-song-related-list .song-time {color:#b68636;}
@media (max-width:1050px) {.mp-song-body {grid-template-columns:118px minmax(0,1fr);gap:15px;}.mp-song-art {width:118px;height:118px;}.mp-song-page .mp-song-actions.fctrl {grid-column:1/-1;flex-direction:row;}.mp-song-page .mp-song-action.fplay{flex:1 1 0;}}
@media (max-width:760px) {.mp-song-page .sect-bg {padding:16px;margin-bottom:15px;}.mp-song-head{gap:10px;}.mp-song-head-icon {height:44px;width:44px;flex-basis:44px;font-size:26px;}.mp-song-body{grid-template-columns:100px minmax(0,1fr);gap:12px;align-items:start;}.mp-song-art{width:100px;height:100px;}.mp-song-meta>div{font-size:12px;grid-template-columns:62px 1fr;gap:4px;}.mp-song-page .mp-song-actions.fctrl{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr;gap:9px;margin:5px 0 0!important;}.mp-song-page .mp-song-action.fplay{min-height:62px;padding:9px 7px 9px 42px!important;}.mp-song-page .mp-song-action .song-play{width:27px!important;height:32px!important;left:7px!important;}.mp-song-action-copy strong{font-size:12px;}.mp-song-action-copy small{font-size:10px;}.mp-song-section-heading h2{font-size:19px;}}
@media (max-width:390px) {.mp-song-page .mp-song-actions.fctrl {grid-template-columns:1fr;}.mp-song-page .mp-song-action.fplay{min-height:52px;padding-left:53px!important;}.mp-song-page .mp-song-action .song-play {width:35px!important;left:9px!important;}}

/* 1.5.0 — existing bottom audio player: CSS only, no JS or plugin changes. */
.wplayer .audioplayer {background:#19324e!important;color:#fff!important;border:1px solid #304c68;border-radius:13px!important;box-shadow:0 -7px 32px rgba(25,50,78,.20)!important;}
.wplayer .audioplayer-bar {background:#e3d5bd!important;height:5px!important;top:-5px!important;border-radius:10px 10px 0 0!important;}
.wplayer .audioplayer-bar-played {background:#c58b2a!important;}
.wplayer .audioplayer-bar-loaded {background:#ece3d4!important;opacity:.45;}
.wplayer .ap-next,.wplayer .ap-prev {background:#38556e!important;color:#fff!important;}
.wplayer .audioplayer-playpause a {background:#c58b2a!important;color:#fff!important;}
.wplayer .ap-next:hover,.wplayer .ap-prev:hover,.wplayer .audioplayer-playpause a:hover {background:#ab741e!important;color:#fff!important;}
.wplayer .ap-time,.wplayer .ap-artist {color:#d7dfe6!important;}
.wplayer .ap-dl {color:#e7b86b!important;}
.wplayer .ap-dl:hover {color:#fff!important;}
.wplayer .ap-img {background:#f0e1cb!important;border-radius:10px;}
.wplayer .ap-img img {border-radius:10px;}
@media (max-width:760px) {.wplayer .audioplayer {border-radius:13px 13px 0 0!important;}.wplayer .ap-next,.wplayer .ap-prev{background:#38556e!important;}}


/* 1.5.1 — compact song page, universal cover, mobile-first cleanup */
.mp-song-page .sect-bg {padding:18px 20px; border-radius:18px;}
.mp-song-breadcrumbs {margin-bottom:14px; font-size:13px; gap:8px;}
.mp-song-head {display:block; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid #eee2d1;}
.mp-song-page #mp-song-heading {font-size:clamp(24px,2.8vw,31px); line-height:1.2; margin:0;}
.mp-song-body {display:grid; grid-template-columns:116px minmax(0,1fr) 260px; gap:18px; align-items:start;}
.mp-song-art {width:116px; height:116px; border-radius:16px; border:1px solid #eadfce; box-shadow:0 8px 24px rgba(25,50,78,.06);}
.mp-song-info {padding-top:2px;}
.mp-song-info-label {font-size:13px; margin-bottom:8px; color:#19324e;}
.mp-song-meta {gap:7px;}
.mp-song-meta>div {grid-template-columns:76px minmax(0,1fr); gap:8px; font-size:12.5px; line-height:1.35;}
.mp-song-meta dt {color:#948779;}
.mp-song-meta dd {font-weight:700;}
.mp-song-page .mp-song-actions.fctrl {gap:10px;}
.mp-song-page .mp-song-action.fplay {min-height:56px; padding:10px 12px 10px 52px!important; border-radius:14px!important;}
.mp-song-page .mp-song-action .song-play {left:10px!important; width:34px!important; height:34px!important; border-radius:10px;}
.mp-song-action-copy strong {font-size:13px;}
.mp-song-action-copy small {font-size:10.5px; margin-top:3px;}
.mp-song-section-heading {margin-bottom:14px; padding-bottom:13px;}
.mp-song-section-heading h2 {font-size:18px;}
.mp-song-section-icon {width:34px; height:34px; flex:0 0 34px; border-radius:10px; font-size:18px;}
.mp-song-lyrics-text {font-size:14px; line-height:1.75;}
.mp-song-related-list .song-item {padding:10px 4px; min-height:0;}
.mp-song-related-list .song-desc {font-size:14px; font-weight:700;}
.mp-song-related-list .song-item:hover .song-desc {color:#9c6d25;}
@media (max-width:1180px) {
  .mp-song-body {grid-template-columns:104px minmax(0,1fr) 220px; gap:16px;}
  .mp-song-art {width:104px; height:104px;}
  .mp-song-page .mp-song-action.fplay {min-height:54px;}
}
@media (max-width:900px) {
  .mp-song-body {grid-template-columns:96px minmax(0,1fr); gap:15px;}
  .mp-song-art {width:96px; height:96px;}
  .mp-song-page .mp-song-actions.fctrl {grid-column:1 / -1; display:grid!important; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px!important;}
}
@media (max-width:760px) {
  .mp-song-page .sect-bg {padding:15px 16px; margin-bottom:14px;}
  .mp-song-breadcrumbs {font-size:12px; margin-bottom:12px;}
  .mp-song-head {padding-bottom:10px; margin-bottom:12px;}
  .mp-song-page #mp-song-heading {font-size:clamp(22px,5.8vw,28px);}
  .mp-song-body {grid-template-columns:1fr; gap:12px;}
  .mp-song-art {display:none;}
  .mp-song-info {padding-top:0;}
  .mp-song-meta>div {grid-template-columns:72px minmax(0,1fr); font-size:12px;}
  .mp-song-page .mp-song-actions.fctrl {grid-column:auto; grid-template-columns:1fr; gap:8px;}
  .mp-song-page .mp-song-action.fplay {min-height:50px; padding:9px 12px 9px 50px!important;}
  .mp-song-page .mp-song-action .song-play {width:32px!important; height:32px!important;}
  .mp-song-action-copy strong {font-size:12.5px;}
  .mp-song-action-copy small {font-size:10px;}
  .mp-song-section-heading h2 {font-size:17px;}
  .mp-song-lyrics-text {font-size:13.5px; line-height:1.7;}
}

/* 1.5.2 — song page micro-adjustments only */
.mp-song-page .mp-song-breadcrumbs {margin-bottom:7px!important;}
.mp-song-page #mp-song-heading {font-size:clamp(19px,1.9vw,23px)!important;line-height:1.26!important;letter-spacing:-.02em;font-weight:800;}
.mp-song-page .mp-song-head {padding-bottom:10px!important;margin-bottom:14px!important;}
.mp-song-page .mp-song-action.fplay {min-height:48px!important;padding-top:8px!important;padding-bottom:8px!important;}
.mp-song-page .mp-song-action-copy strong {font-size:12.5px!important;line-height:1.35!important;}
@media(max-width:760px){
 .mp-song-page .mp-song-breadcrumbs {margin-bottom:6px!important;}
 .mp-song-page #mp-song-heading {font-size:20px!important;line-height:1.28!important;}
 .mp-song-page .mp-song-head {padding-bottom:9px!important;margin-bottom:11px!important;}
 .mp-song-page .mp-song-action.fplay {min-height:48px!important;}
}