:root{
  --bg:#080808;--s1:#111;--s2:#181818;--s3:#222;
  --border:#2a2a2a;--accent:#e8ff00;--accent2:#ff3c6e;--green:#00d4aa;
  --text:#f0f0f0;--sub:#888;--muted:#444;
  --ph:90px;--sb:260px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;
  display:grid;grid-template-columns:var(--sb) 1fr;
  grid-template-rows:1fr var(--ph);
  grid-template-areas:"sb main""player player";
  height:100vh;
}


/* SIDEBAR */
.sb{grid-area:sb;background:var(--s1);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.logo-area{padding:24px 22px 18px;border-bottom:1px solid var(--border)}
.logo{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:4px}
.logo em{color:var(--accent);font-style:normal}
.logo-sub{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:2px;margin-top:2px}
.free-tag{display:inline-flex;align-items:center;gap:5px;font-family:'Space Mono',monospace;font-size:9px;padding:3px 8px;border-radius:10px;background:rgba(0,212,170,.1);color:var(--green);border:1px solid rgba(0,212,170,.2);margin-top:6px;letter-spacing:1px}
.free-tag::before{content:'● ';animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.sb-nav{padding:12px 10px 6px;flex-shrink:0}
.nav-btn{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:6px;cursor:pointer;color:var(--sub);font-size:13px;font-weight:600;transition:all .15s;border:none;background:none;width:100%;text-align:left}
@media (hover: hover) { .nav-btn:hover{color:var(--text);background:var(--s2)} }
.nav-btn.active{color:var(--text);background:var(--s2)}
.nav-btn.active .ni{color:var(--accent)}
.ni{font-size:16px;flex-shrink:0}
.sb-divider{height:1px;background:var(--border);margin:5px 20px}
.sb-sect{padding:5px 10px;flex:1;overflow-y:auto}
.sb-sect::-webkit-scrollbar{width:3px}
.sb-sect::-webkit-scrollbar-thumb{background:var(--border)}
.sb-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:5px 13px 7px;display:block}
.g-btn{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:6px;cursor:pointer;color:var(--sub);font-size:12px;font-weight:600;transition:all .15s;border:none;background:none;width:100%;text-align:left}
@media (hover: hover) { .g-btn:hover{color:var(--text);background:var(--s2)} }
.g-btn.active{color:var(--accent)}
.gd{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:.2s}
.g-btn.active .gd{background:var(--accent);box-shadow:0 0 6px var(--accent)}

.snp{padding:12px;border-top:1px solid var(--border);flex-shrink:0}
.snp-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:8px;text-transform:uppercase}
.snp-art{width:100%;aspect-ratio:16/9;border-radius:7px;object-fit:cover;background:var(--s3);display:block;margin-bottom:7px}
.snp-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snp-ch{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* MAIN */
main{grid-area:main;overflow-y:auto;overflow-x:hidden}
main::-webkit-scrollbar{width:5px}
main::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.page{display:none;min-height:100%;padding-bottom:24px}
.page.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* TOPBAR */
.topbar{padding:20px 28px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.badge{font-family:'Space Mono',monospace;font-size:10px;padding:5px 11px;border-radius:20px;white-space:nowrap;letter-spacing:1px}
.badge-free{background:rgba(0,212,170,.08);color:var(--green);border:1px solid rgba(0,212,170,.2)}
.search-box{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:11px 15px;flex:1;max-width:520px;transition:border-color .2s}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,255,0,.07)}
.search-box svg{color:var(--sub);flex-shrink:0}
.search-box input{background:none;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;width:100%}
.search-box input::placeholder{color:var(--muted)}

/* SECTION HEAD */
.sec-head{padding:24px 28px 16px;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px}
.sec-title{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:3px}
.sec-title span{color:var(--accent)}
.sec-meta{font-family:'Space Mono',monospace;font-size:11px;color:var(--sub);letter-spacing:1px}

/* HERO */
.hero{margin:16px 28px 0;border-radius:14px;overflow:hidden;position:relative;height:200px;border:1px solid var(--border);cursor:pointer;background:#080808}
.hb{position:absolute;border-radius:50%;filter:blur(40px); will-change: transform;}
.hb1{width:320px;height:320px;background:rgba(232,255,0,.07);top:-130px;left:-60px}
.hb2{width:220px;height:220px;background:rgba(255,60,110,.06);bottom:-90px;right:50px}
.hero-inner{position:relative;z-index:2;padding:28px 36px;display:flex;align-items:center;gap:26px;height:100%}
.hero-art{width:148px;height:83px;border-radius:8px;object-fit:cover;background:var(--s3);flex-shrink:0;box-shadow:0 16px 50px rgba(0,0,0,.7)}
.hero-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:3px;color:var(--accent);margin-bottom:5px}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:1px;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:460px;line-height:1.1}
.hero-ch{font-size:13px;color:var(--sub);margin-bottom:14px}
.hero-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#000;border:none;border-radius:4px;padding:9px 18px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .2s}
@media (hover: hover) { .hero-btn:hover{background:#fff} }

/* VIDEO CARDS */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));gap:14px;padding:0 28px 28px}
.v-card{background:var(--s1);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s;position:relative}
@media (hover: hover) { .v-card:hover{transform:translateY(-3px);border-color:rgba(232,255,0,.3);box-shadow:0 10px 36px rgba(0,0,0,.4)} }
.v-card.playing{border-color:var(--accent)}
.vc-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--s3)}
.vc-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.v-card:hover .vc-img,.v-card.playing .vc-img{transform:scale(1.04)}
.vc-ov{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.v-card:hover .vc-ov,.v-card.playing .vc-ov{opacity:1}
.vc-play{width:44px;height:44px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#000}
.vc-dur{position:absolute;bottom:5px;right:6px;font-family:'Space Mono',monospace;font-size:10px;background:rgba(0,0,0,.85);color:#fff;padding:2px 5px;border-radius:3px}
.vc-wave{position:absolute;top:6px;left:6px;display:none;align-items:flex-end;gap:2px;height:12px}
.v-card.playing .vc-wave{display:flex}
.vc-wb{width:2px;background:var(--accent);border-radius:1px;animation:wbar .7s ease-in-out infinite alternate}
.vc-wb:nth-child(2){animation-delay:.12s}.vc-wb:nth-child(3){animation-delay:.24s}
@keyframes wbar{from{height:20%}to{height:100%}}
.vc-body{padding:10px}
.vc-title{font-size:12px;font-weight:600;line-height:1.4;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v-card.playing .vc-title{color:var(--accent)}
.vc-ch{font-size:11px;color:var(--sub)}

/* TRACK LIST */
.track-list{padding:0 28px 16px}
.track-item{display:grid;grid-template-columns:34px 90px 1fr auto;align-items:center;gap:13px;padding:8px 11px;border-radius:8px;cursor:pointer;transition:background .13s;border-bottom:1px solid rgba(255,255,255,.025)}
.track-item:last-child{border-bottom:none}
@media (hover: hover) { .track-item:hover{background:var(--s2)} }
.track-item.playing{background:rgba(232,255,0,.04)}
.t-num{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted);text-align:center}
.track-item.playing .t-num{color:var(--accent)}
.t-thumb{width:90px;height:51px;border-radius:5px;object-fit:cover;background:var(--s3)}
.t-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-item.playing .t-name{color:var(--accent)}
.t-ch{font-size:11px;color:var(--sub);margin-top:2px}
.t-dur{font-family:'Space Mono',monospace;font-size:11px;color:var(--sub);flex-shrink:0}

/* PLAYER */
#player{grid-area:player;background:rgba(5,5,5,.97);border-top:1px solid var(--border);display:grid;grid-template-columns:260px 1fr 220px;align-items:center;padding:0 26px;gap:18px;height:var(--ph);transition:transform .4s cubic-bezier(.16,1,.3,1)}
#player.hidden{transform:translateY(100%)}
.p-left{display:flex;align-items:center;gap:12px;min-width:0}
.p-art{width:50px;height:28px;border-radius:5px;object-fit:cover;background:var(--s3);flex-shrink:0}
.p-info{min-width:0}
.p-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-ch{font-size:11px;color:var(--sub);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-src{font-family:'Space Mono',monospace;font-size:10px;color:var(--green);margin-top:2px}
.p-center{display:flex;flex-direction:column;align-items:center;gap:9px}
.p-ctrls{display:flex;align-items:center;gap:18px}
.ctrl{background:none;border:none;color:var(--sub);cursor:pointer;display:flex;align-items:center;transition:color .15s;padding:4px;position:relative}
@media (hover: hover) { .ctrl:hover{color:var(--text)} }
.ctrl.active{color:var(--accent)}
.ctrl-sm{font-size:14px}
.ctrl-sm svg{width:18px;height:18px}
.repeat-one-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:var(--accent);display:none}
.ctrl.repeat-one .repeat-one-indicator{display:block}
.ctrl.repeat-one svg{opacity:0.3}
.ctrl-main{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#000;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 0 18px rgba(232,255,0,.2)}
@media (hover: hover) { .ctrl-main:hover{transform:scale(1.07);background:#fff} }
.p-prog{display:flex;align-items:center;gap:9px;width:100%;max-width:420px}
.p-time{font-family:'Space Mono',monospace;font-size:11px;color:var(--sub);width:36px;flex-shrink:0}
.p-time:last-child{text-align:right}
.p-bar{flex:1;height:3px;background:var(--s3);border-radius:2px;position:relative;cursor:pointer}
.p-fill{height:100%;background:var(--accent);border-radius:2px;pointer-events:none;width:0%}
.p-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .2s}
@media (hover: hover) { .p-bar:hover .p-thumb{opacity:1} }
.p-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.vol-wrap{display:flex;align-items:center;gap:8px}
.vol-sl{width:88px;-webkit-appearance:none;height:3px;background:var(--s3);border-radius:2px;outline:none;cursor:pointer}
.vol-sl::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}
.wvf{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.wb{width:3px;background:var(--accent);border-radius:2px;animation:wbar .9s ease-in-out infinite alternate}
.wb:nth-child(2){animation-delay:.15s}.wb:nth-child(3){animation-delay:.3s}.wb:nth-child(4){animation-delay:.1s}

/* STATUS */
.ls{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 28px;gap:14px}
.spin{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.lt{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--sub);text-align:center;line-height:1.8}

#yt-wrap{position:fixed;width:1px;height:1px;opacity:0;bottom:100px;right:0;pointer-events:none}

@media(max-width:820px){
  body{grid-template-columns:1fr;grid-template-areas:"main" "player"}
  
  .sb{
    display:none;
    position:fixed;
    left:0;
    top:0;
    bottom:var(--ph);
    width:280px;
    z-index:9999;
    transform:translateX(-100%);
    transition:transform .3s ease;
  }
  
  .sb.mobile-open{
    display:flex;
    transform:translateX(0);
  }
  
  .sb.mobile-open::after{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    z-index:-1;
  }
  
  #player{grid-template-columns:1fr;justify-items:center;padding:0 16px}
  .p-left{max-width:200px}
  .p-right{display:none}
  .p-ctrls{gap:12px}
  .ctrl-sm{display:none}
  .topbar{padding:16px 20px 0}
  .search-box{max-width:100%;font-size:13px}
  .sec-head{padding:20px 20px 14px}
  .sec-title{font-size:28px}
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:0 20px 20px}
  .hero{height:160px;margin:14px 20px 0}
  .hero-art{width:100px;height:56px}
  .hero-title{font-size:22px}
  .track-list{padding:0 20px 16px}
  .track-item{grid-template-columns:28px 70px 1fr auto;gap:10px;padding:7px 9px}
  .t-thumb{width:70px;height:39px}
}

/* Hamburger menu button for mobile */
.mobile-menu-btn{
  display:none;
  position:fixed;
  top:16px;
  left:16px;
  z-index:10000;
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--s2);
  border:1px solid var(--border);
  color:var(--accent);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

@media(max-width:820px){
  .mobile-menu-btn{display:flex}
}

/* LYRICS MODAL */
#lyrics-modal { position: fixed; top: 0; left: var(--sb); right: 0; bottom: var(--ph); background: #080808;  -webkit-overflow-scrolling: touch; will-change: transform; z-index: 100; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s; display: flex; flex-direction: column; padding: 40px; overflow-y: auto; opacity: 0; pointer-events: none; }
@media(max-width:820px) { #lyrics-modal { left: 0; padding: 20px; } }
#lyrics-modal.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.lyrics-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; border-bottom: 1px solid var(--border); padding-bottom: 20px; gap: 20px; }
.lyrics-title { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--accent); line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lyrics-ch { font-size: 13px; color: var(--sub); font-family: 'Space Mono', monospace; margin-top: 6px; }
.close-lyrics { background: var(--s2); border: 1px solid var(--border); color: var(--text); cursor: pointer; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.close-lyrics:hover { background: var(--accent); color: #000; border-color: var(--accent); }
/* SYNCED LYRICS STYLES */
.lyric-line { font-size: 22px; font-weight: 500; color: var(--muted); padding: 10px 0; cursor: pointer; transition: color 0.3s, transform 0.3s; transform-origin: left center; width: fit-content; }
.lyric-line.active { color: var(--accent); font-weight: 700; transform: scale(1.05); text-shadow: 0 0 16px rgba(232,255,0,0.25); }
.lyric-line:hover { color: var(--text); }
@media(max-width:820px){ .lyric-line { font-size: 18px; } }


/* --- ULTIMATE MOBILE UI OVERRIDES --- */
@media(max-width:820px) {
  /* Fix Topbar spacing so hamburger menu doesn't overlap */
  .topbar { padding: 16px 16px 0 64px !important; }
  .mobile-menu-btn { top: 12px; left: 12px; background: var(--s1); box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
  
  /* Fix the Player Bar Layout */
  
  .p-left { max-width: 55%; gap: 10px; }
  .p-art { width: 44px; height: 44px; border-radius: 6px; aspect-ratio: 1/1; object-fit: cover; }
  .p-src { display: none; } /* Hide extra text to save space */
  .p-name { font-size: 14px; }
  
  /* Align controls to the right */
  .p-center { flex-direction: row !important; flex: 1; justify-content: flex-end; position: static; }
  .p-ctrls { gap: 14px !important; }
  
  /* Hide shuffle/repeat, but KEEP Lyrics and Like buttons */
  .ctrl-sm { display: none !important; } 
  #lyrics-btn { display: flex !important; }
  #like-btn { display: flex !important; margin-right: -4px; }
  
  /* Make Progress Bar a sleek thin line at the top of the player */
  .p-prog { position: absolute; top: 0; left: 0; right: 0; width: 100%; max-width: 100% !important; margin: 0; padding: 0; transform: translateY(-100%); }
  .p-time { display: none; }
  .p-bar { height: 2px !important; border-radius: 0; background: rgba(255,255,255,0.1); }
  .p-thumb { display: none; }
  
  /* Make grid cards fit perfectly (2 per row) */
  .cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 0 16px 20px !important; }
  .hero-inner { flex-direction: column; align-items: flex-start; padding: 20px !important; gap: 14px !important; }
  .hero-art { width: 100% !important; height: auto !important; aspect-ratio: 16/9; }
  .hero { height: auto !important; }
  
  /* Mobile Sidebar Overlay */
  body::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  body.menu-open::before { opacity: 1; pointer-events: auto; }
  .sb { z-index: 9999 !important; border-right: none; box-shadow: 5px 0 30px rgba(0,0,0,0.5); }
}
/* BULLETPROOF MOBILE PLAYER BAR */
@media(max-width:820px) {
  #player {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 72px !important;
    z-index: 2147483647 !important; /* Absolute maximum z-index */
    background: #0a0a0a !important;
    border-top: 1px solid #333 !important;
    padding: 0 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
    transform: translateZ(0) !important; /* Forces it to the top GPU layer */
  }
  #player:not(.hidden) { display: flex !important; }
  #player.hidden { display: none !important; }
  
  /* Add padding so the last song cards aren't hidden behind the player */
  .cards-grid, .page { padding-bottom: 100px !important; }
  
  .p-left { max-width: 65%; gap: 12px; }
  .p-center { position: static !important; transform: none !important; width: auto !important; }
}

/* Ensure Overlays Never Block Clicks */
.vc-ov, .vc-wave { pointer-events: none !important; }
.v-card, .track-item { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* SIDEBAR LAYER FIXES */
@media(max-width:820px) {
    .sb { z-index: 2147483647 !important; } /* Highest possible layer */
    #player { z-index: 2147483646 !important; } /* Just underneath sidebar */
    body::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 2147483645 !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
    body.menu-open::before { opacity: 1; pointer-events: auto; }
}

/* Hide bypassed engine */

/* Mobile Autoplay Bypass */
#yt-player { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 200px !important; height: 200px !important; z-index: -10 !important; pointer-events: none !important; opacity: 0.01 !important; }

@media(max-width:820px) {
  #player { position:fixed; bottom:0; left:0; width:100%; background:#000; border-top:1px solid #333; z-index:999999; padding:10px; box-sizing:border-box; align-items:center; }
  main { padding-bottom: 80px; }
  .p-prog { position:absolute; top:0; left:0; width:100%; height:2px; background:#333; }
  .p-fill { height:100%; background:var(--accent); width:0%; }
}