:root{
  --bg-primary:#F7F9FC;
  --bg-secondary:#FFFFFF;
  --bg-card:#FFFFFF;
  --bg-hover:#F1F5FB;

  --text-primary:#0F172A;   /* slate-900 */
  --text-secondary:#334155; /* slate-700 */
  --text-muted:#64748B;     /* slate-500 */

  --accent-primary:#18B26B; /* fresh green */
  --accent-hover:#16A066;
  --accent-secondary:#3B82F6; /* blue accent */

  --border-color:#E5EAF1;
  --border-light:#D7DEE8;

  --gradient-primary:linear-gradient(135deg,#18B26B 0%,#22C55E 100%);
  --gradient-card:linear-gradient(145deg,#FFFFFF 0%,#F7FAFF 100%);

  --shadow-sm:0 2px 6px rgba(15,23,42,.06);
  --shadow-md:0 6px 18px rgba(15,23,42,.08);
  --shadow-lg:0 12px 28px rgba(15,23,42,.10);

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
}

*{margin:0;padding:0;box-sizing:border-box;outline:0;border:0}
html{scroll-behavior:smooth}
body{
  font:14px/1.6 'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--text-primary);text-decoration:none;transition:.25s}
a:hover{color:var(--accent-primary)}
img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;margin-bottom:.75rem}
h1{font-size:2.1rem} h2{font-size:1.7rem} h3{font-size:1.35rem} h4{font-size:1.15rem}

.wrap{min-height:100vh;display:flex;flex-direction:column}
.wrap-center{
  max-width:1200px;margin:0 auto;background:var(--bg-secondary);
  min-height:100vh;box-shadow:var(--shadow-lg);border-radius:0;overflow:hidden
}

.header{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  padding:12px 16px;
  border-bottom:1px solid var(--border-color);
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:12px;justify-content:space-between;
}
.logo{
  font-size:1.35rem;font-weight:800;color:var(--text-primary);
  display:flex;align-items:center;gap:.6rem;min-width:0
}
.logo img{width:32px;height:32px;border-radius:10px}

.btn-menu{
  display:none;width:40px;height:40px;border:1px solid var(--border-color);
  background:var(--bg-secondary);border-radius:10px;color:var(--text-primary);
  align-items:center;justify-content:center;cursor:pointer;transition:.2s
}
.btn-menu:hover{background:var(--bg-hover);border-color:var(--accent-primary)}

.search-wrap{flex:0 1 520px;margin-left:auto}
.search-box{position:relative}
.search-box input{
  width:100%;height:44px;background:#F8FAFE;border:1px solid var(--border-color);
  border-radius:999px;padding:0 54px 0 16px;color:var(--text-primary);font-size:14px;
  transition:.2s
}
.search-box input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(24,178,107,.15)}
.search-box input::placeholder{color:var(--text-muted)}
.search-btn{
  position:absolute;right:4px;top:4px;width:36px;height:36px;border-radius:50%;
  background:var(--gradient-primary);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s
}
.search-btn:hover{transform:scale(1.04);box-shadow:var(--shadow-sm)}

.cols{display:flex;min-height:calc(100vh - 64px)}
.gol-left{
  width:280px;background:var(--bg-secondary);border-right:1px solid var(--border-color);
  padding:20px 16px;overflow-y:auto
}
.col-main{flex:1;padding:24px;background:var(--bg-secondary)}

.june-box{
  background:var(--gradient-card);border-radius:var(--radius-md);
  padding:16px;margin-bottom:18px;border:1px solid var(--border-color);box-shadow:var(--shadow-sm)
}
.june-box-title{
  font-size:1rem;font-weight:700;margin-bottom:12px;color:var(--text-primary);
  display:flex;align-items:center;gap:.5rem
}
.june-box-title::before{
  content:'';width:4px;height:18px;background:var(--gradient-primary);border-radius:2px
}

.side-nav{list-style:none}
.side-nav li{margin-bottom:6px}
.side-nav a{
  display:flex;align-items:center;padding:10px 12px;color:var(--text-secondary);
  border-radius:10px;transition:.2s;font-size:14px;position:relative;overflow:hidden
}
.side-nav a:hover{background:var(--bg-hover);color:var(--accent-primary);transform:translateX(3px)}
.side-nav a:before{
  content:'\f660';font-family:'Font Awesome 6 Pro';margin-right:10px;color:var(--accent-primary);
  font-size:16px;opacity:.7
}

.sect{margin-bottom:24px}
.sect-title{
  font-size:1.4rem;font-weight:700;margin-bottom:14px;color:var(--text-primary);
  display:flex;align-items:center;gap:.75rem
}
.sect-title::after{
  content:'';flex:1;height:2px;background:linear-gradient(90deg,var(--accent-primary) 0%,transparent 100%)
}

.track-item{
  background:var(--bg-card);border-radius:12px;padding:10px 12px;margin-bottom:8px;
  border:1px solid var(--border-color);transition:.2s;position:relative;display:flex;align-items:center;gap:10px;min-height:52px
}
.track-item:hover{background:var(--bg-hover);border-color:var(--border-light);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.track-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient-primary);
  transform:scaleY(0);transition:transform .2s;border-radius:0 2px 2px 0
}
.track-item:hover::before{transform:scaleY(1)}

.track-img{width:44px;height:44px;border-radius:8px;position:relative;overflow:hidden;flex-shrink:0}
.track-img img{width:100%;height:100%;object-fit:cover}
.track-img::after{
  content:'';position:absolute;inset:0;background:linear-gradient(45deg,transparent 0%,rgba(24,178,107,.06) 100%);
  opacity:0;transition:.2s;border-radius:8px
}
.track-item:hover .track-img::after{opacity:1}

.track-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(24,178,107,.95);opacity:0;transition:.2s;cursor:pointer;font-size:12px
}
.track-item:hover .track-play{opacity:1}
.track-play:hover{background:var(--accent-hover);transform:translate(-50%,-50%) scale(1.05)}

.track-link{flex:1;min-width:0;display:flex;align-items:center}
.track-info{min-width:0;flex:1}
.track-title-link{display:block;color:inherit;transition:.2s}
.track-title-link:hover .mp3-title{color:var(--accent-primary)}

.mp3-title,.track-title{font-weight:600;color:var(--text-primary);margin-bottom:2px;font-size:14px;line-height:1.3}
.track-subtitle{color:var(--text-secondary);font-size:12px;line-height:1.2}
.track-time{color:var(--text-muted);font-size:11px;margin-left:8px;padding-right:4px;font-variant-numeric:tabular-nums}

.track-actions{display:flex;align-items:center;gap:6px;opacity:.9;transition:.2s}
.track-item:hover .track-actions{opacity:1}
.track-download-btn,.track-menu-btn{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);background:transparent;border:1px solid var(--border-color);transition:.2s;font-size:10px;cursor:pointer;text-decoration:none
}
.track-download-btn:hover{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;transform:scale(1.05)}
.track-menu-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--accent-primary)}

.track-count{
  background:var(--gradient-primary);color:#fff;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:700;
  position:absolute;left:-8px;top:50%;transform:translateY(-50%);box-shadow:var(--shadow-sm);z-index:5;min-width:18px;text-align:center
}

.js-item-current{background:var(--bg-hover);border-color:var(--accent-primary)}
.js-item-current::before{transform:scaleY(1)}
.js-item-current .track-count{background:var(--accent-hover);animation:pulse 2s infinite}
.js-item-played .track-play i::before{content:'\f04c'} /* pause icon */
.js-item-played .track-play{opacity:1;background:var(--accent-primary)}
.js-item-stopped .track-play{opacity:.7}

.track-header-compact{
  background:var(--bg-card);border-radius:16px;padding:18px;margin-bottom:18px;border:1px solid var(--border-color);box-shadow:var(--shadow-sm)
}
.track-main-info{gap:16px;display:flex;align-items:center}
.track-artwork-small{width:120px;height:120px;position:relative;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:var(--shadow-sm)}
.track-artwork-small img{width:100%;height:100%;object-fit:cover}
.play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;cursor:pointer}
.track-artwork-small:hover .play-overlay{opacity:1}
.play-btn-small{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--gradient-primary);color:#fff;font-size:18px;transition:.2s
}
.play-btn-small:hover{transform:scale(1.08)}

.track-details{min-width:0}
.track-name{font-size:1.6rem;font-weight:800;margin-bottom:.6rem;color:var(--text-primary)}
.track-meta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:.5rem}
.meta-item{display:flex;align-items:center;gap:.45rem;color:var(--text-secondary);font-size:13px}
.meta-item i{color:var(--accent-primary);font-size:12px;width:14px}
.track-genre-date{display:flex;gap:10px}
.genre-tag{background:var(--accent-primary);color:#fff;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.release-date{color:var(--text-muted);font-size:12px}

.track-actions-compact{display:flex;gap:10px;flex-shrink:0}
.btn-play-main{
  background:var(--gradient-primary);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;display:flex;align-items:center;gap:.5rem;
  cursor:pointer;transition:.2s;font-size:14px
}
.btn-play-main:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-download-main{
  width:44px;height:44px;background:#F7FAFF;border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);
  display:flex;align-items:center;justify-content:center;transition:.2s;text-decoration:none
}
.btn-download-main:hover{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}

.track-description-compact{
  background:var(--bg-card);border-radius:14px;padding:16px;margin-bottom:18px;border:1px solid var(--border-color)
}
.track-description-compact h3{
  display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:10px
}
.track-description-compact h3 i{color:var(--accent-primary);font-size:16px}
.description-text{color:var(--text-secondary);font-size:14px;line-height:1.7}
.description-text.default{text-align:center;color:var(--text-muted);font-style:italic}

.wplayer{
  position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-top:1px solid var(--border-color);z-index:1000;transition:.2s
}
.audioplayer{
  max-width:1200px;margin:0 auto;padding:12px 16px;height:76px;display:flex;align-items:center;gap:12px;position:relative
}
.audioplayer-bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--border-color);cursor:pointer}
.audioplayer-bar-loaded{position:absolute;left:0;top:0;height:100%;background:rgba(15,23,42,.15);border-radius:10px 10px 0 0}
.audioplayer-bar-played{position:absolute;left:0;top:0;height:100%;z-index:10;border-radius:0;background:var(--gradient-primary)}

.ap-img{width:48px;height:48px;border-radius:10px;flex-shrink:0}
.ap-img img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.ap-info{flex:1;min-width:0}
.ap-title{font-weight:700;color:var(--text-primary);font-size:14px;margin-bottom:2px}
.ap-artist{color:var(--text-secondary);font-size:12px}

.ap-btns{display:flex;align-items:center;gap:10px}
.audioplayer-playpause a{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--gradient-primary);color:#fff;font-size:16px;transition:.2s;text-decoration:none
}
.audioplayer-playpause a:hover{transform:scale(1.05);box-shadow:var(--shadow-sm);color:#fff}
.ap-prev,.ap-next{
  width:32px;height:32px;background:#F7FAFF;border:1px solid var(--border-color);
  border-radius:50%;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s
}
.ap-prev:hover,.ap-next:hover{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--accent-primary)}

.audioplayer-volume{position:relative;margin-left:10px;font-size:18px}
.audioplayer-muted .fa-volume-up:before{content:'\f6a9'}
.audioplayer-volume-button a{color:var(--text-secondary);opacity:.8;display:block;height:30px;line-height:30px;text-align:center;transition:.2s}
.audioplayer-volume-button a:hover{opacity:1;color:var(--accent-primary)}
.audioplayer-volume-adjust{
  position:absolute;left:0;bottom:100%;width:30px;height:100px;background:var(--bg-card);
  border:1px solid var(--border-color);box-shadow:var(--shadow-md);padding:10px;display:none;border-radius:10px
}
.audioplayer-volume-adjust>div{width:10px;height:80px;border-radius:6px;position:relative;cursor:pointer;background:var(--border-color);overflow:hidden}
.audioplayer-volume-adjust>div>div{width:100%!important;background:var(--gradient-primary);position:absolute;left:0;bottom:0;z-index:10;border-radius:6px 6px 0 0}
.audioplayer-volume:hover .audioplayer-volume-adjust{display:block}

.ap-dl{font-size:18px;color:var(--text-secondary);margin-left:10px;padding:8px;border-radius:10px;transition:.2s}
.ap-dl:hover{color:var(--accent-primary);background:var(--bg-hover)}
.ap-time{font-size:12px;color:var(--text-muted);margin-left:10px;font-variant-numeric:tabular-nums}
.audioplayer-time-current:after{content:' / ';margin:0 2px}

.btn,button:not(.search-btn){
  background:var(--gradient-primary);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;cursor:pointer;transition:.2s;font-size:14px;display:inline-flex;align-items:center;gap:.5rem
}
.btn:hover,button:not(.search-btn):hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);background:var(--accent-hover)}

.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:20px;margin-top:auto}
.footer a{color:var(--accent-secondary)}
.footer-beware{color:var(--text-secondary);line-height:1.7;font-size:13px}

.overlay-box{position:fixed;z-index:998;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.45);cursor:pointer;display:none}
.side-panel{
  width:280px;height:100%;overflow:auto;background:var(--bg-card);padding:20px;z-index:9999;position:fixed;left:-320px;top:0;transition:left .35s;border-right:1px solid var(--border-color)
}
.side-panel.active{left:0}
.btn-close{
  cursor:pointer;display:block;left:280px;top:-40px;position:fixed;z-index:9999;width:40px;height:40px;line-height:40px;text-align:center;font-size:18px;
  background:var(--accent-primary);color:#fff;transition:top .35s;border-radius:0 0 10px 0
}
.btn-close.active{top:0}
body.opened-menu{overflow:hidden;width:100%;height:100%}

.fx-row{display:flex;flex-wrap:wrap}
.fx-col{display:flex;flex-direction:column}
.fx-center{justify-content:center}
.fx-middle{align-items:center}
.fx-between{justify-content:space-between}
.fx-first{order:-1}
.fx-1{flex:1;min-width:0}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hidden{display:none}
.img-fit{overflow:hidden;position:relative}
.img-fit img{width:100%;height:100%;object-fit:cover}

@keyframes pulse{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.06)}}
.loading{animation:pulse 1.5s ease-in-out infinite}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#F0F4FA}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}

::selection{background:var(--accent-primary);color:#fff}

@media (min-width:969px){
  .search-wrap{flex:0 1 520px;margin-left:auto;margin-right:0}
}

@media (max-width:968px){
  .gol-left{display:none}
  .btn-menu{display:flex}
  .cols{display:block}
  .col-main{width:100%}
  .header{
    flex-wrap:nowrap;gap:10px;justify-content:space-between
  }
  .logo{order:1;flex:0 0 auto}
  .search-wrap{order:2;flex:1 1 auto;width:auto;margin:0 8px}
  .btn-menu{order:3;margin-left:0}
}

@media (max-width:768px){
  .wrap-center{max-width:100%}
  .col-main{padding:16px}
  .header{padding:10px}
  .search-box input{height:42px}
  .track-item{padding:8px 10px;gap:8px;margin-bottom:6px;min-height:48px}
  .track-img{width:40px;height:40px}
  .track-play{width:24px;height:24px;font-size:10px}
  .mp3-title,.track-title{font-size:13px}
  .track-subtitle{font-size:11px}
  .track-time{font-size:10px}
  .track-download-btn,.track-menu-btn{width:24px;height:24px;font-size:9px}
  .track-count{font-size:9px;padding:1px 4px}
  .track-header-compact{padding:14px}
  .track-main-info{flex-direction:column;text-align:center;gap:10px}
  .track-artwork-small{width:96px;height:96px;margin:0 auto}
  .track-name{font-size:1.35rem}
  .track-actions-compact{width:100%;justify-content:center;flex-wrap:wrap}
  .btn-play-main{flex:1;min-width:140px;justify-content:center}
  .audioplayer{padding:10px}
  .audioplayer-volume{display:none}
}

@media (max-width:480px){
  body{font-size:13px}
  .sect-title{font-size:1.25rem}
  .june-box{padding:12px}
  .footer{padding:14px}
}

.june-box { padding: 14px 12px; }
.june-box-title {
  margin-bottom: 10px;
  font-size: 1.05rem;
}

.june-box .side-top-item{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  gap: 10px;
  position: relative;
}
.june-box .side-top-item + .side-top-item{ margin-top: 6px; }
.june-box .side-top-item:hover{
  background: var(--bg-hover);
  border-color: var(--border-color);
  transform: none;
}

.june-box .side-top-item-img{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border-color);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.june-box .side-top-item-img img{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  border-radius: 8px;
}

.june-box .side-letter{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg,#3B82F6 0%,#60A5FA 100%) !important;
  color: #fff;
  text-shadow: none;
}

.june-box .track-desc{ min-width: 0; }
.june-box .mp3-title.nowrap,
.june-box .page-title{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; color: var(--text-primary);
  line-height: 1.25; font-size: 14px;
}
.june-box .track-subtitle.nowrap{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-muted); font-size: 12px; line-height: 1.2;
}

.june-box .side-item-icon{
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-muted);
  background: #fff; opacity: .0; transition: .2s; flex-shrink: 0;
}
.june-box .side-top-item:hover .side-item-icon{ opacity: 1; color: var(--accent-primary); border-color: var(--accent-primary); }

.june-box .page-item .side-top-item-img{
  width: 34px; height: 34px; border-radius: 8px;
  background: #F8FAFE;
  border: 1px solid var(--border-color);
}
.june-box .page-item .page-overlay{
  position: absolute; inset: 0; opacity: 1;
  background: transparent; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.june-box .page-item:hover .page-overlay{ color: var(--accent-secondary); }

.june-box .page-title{ font-size: 14px; }

.june-box .page-arrow{
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-muted); opacity: 0; transition: .2s; flex-shrink: 0;
}
.june-box .page-item:hover .page-arrow{ opacity: 1; color: var(--accent-secondary); transform: translateX(2px); }

.june-box .page-item{ border-left: 0; }
.june-box .page-item::before{ display: none; }

.june-box .side-top-item:hover .track-desc .mp3-title{ color: var(--accent-primary); }
.june-box .page-item:hover .page-title{ color: var(--accent-secondary); }

.june-box .side-top-item, .june-box .page-item{ -webkit-tap-highlight-color: transparent; }

.june-box-content > hr{ display: none; }

.june-box .page-item{
  align-items: flex-start;
  padding: 10px 12px;
}

.june-box .track-desc{ min-width: 0; } 

.june-box .page-title{
  white-space: normal;
  overflow: hidden; 
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  font-size: 14px;
}

.june-box .page-item .side-top-item-img{
  margin-top: 2px;
}

.june-box .page-arrow{
  align-self: center;
  margin-top: 2px;
}

.june-box .mp3-title.nowrap{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.june-box .track-subtitle.nowrap{
  white-space: nowrap; 
}

.track-img.js-play{background:transparent;border:0;padding:0;cursor:pointer;}
.track-img.js-play:focus{outline:none}

/* Doirani yengillashtirish */
.track-play{
  width:22px;height:22px;            /* avval 26px edi */
  background:rgba(24,178,107,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  opacity:0;                         /* faqat hoverda ko'rinsin */
  transition:opacity .18s, transform .18s;
}
.track-item:hover .track-play{opacity:1}
.track-play:hover{transform:translate(-50%,-50%) scale(1.06)}

/* “Ijroda” holatda ko‘rinib tursin (pauza belgisi lib.js bilan almashadi) */
.js-item-played .track-play{opacity:1}