*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0d0a08;--surface:#1c1410;--surface2:#16120e;--surface3:#211810;
--border:#2e2018;--border2:#3a2820;--border3:rgba(201,148,58,.2);
--gold:#c9943a;--gold-light:#e8b96a;--gold-dim:#f3b54f;
--gold-glow:rgba(201,148,58,0.15);--gold-glow2:rgba(201,148,58,0.08);
--crimson:#8b1f2f;--teal:#1a8a7a;
--cream:#eee6d0;--cream-dim:#c8b89a;
--text:#d8ccb4;--text-dim:#8a7a62;--text-muted:#fec668;
--font-display:'Cormorant Garamond',serif;
--font-body:'Outfit',sans-serif;
--signal:#00e5a0;
--nav-h:58px;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;min-height:100vh;overflow-x:hidden}


/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ─── PAGE SECTIONS ─── */
.page{display:none}
.page.active{display:block}

/* ─── LOADING OVERLAY ─── */
#loading-overlay{
  position:fixed;inset:0;background:rgba(8,6,4,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:9999;transition:opacity .5s ease
}
.loader-logo{font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--cream);margin-bottom:24px}
.loader-logo span{color:var(--gold)}
.music-bars{display:flex;align-items:flex-end;gap:4px;height:36px;margin-bottom:20px}
.music-bars span{width:5px;background:var(--gold);border-radius:2px;animation:barBounce 1s ease-in-out infinite}
.music-bars span:nth-child(2){animation-delay:.15s}
.music-bars span:nth-child(3){animation-delay:.3s}
.music-bars span:nth-child(4){animation-delay:.45s}
.music-bars span:nth-child(5){animation-delay:.6s}
@keyframes barBounce{0%,100%{height:8px}50%{height:36px}}
.loader-text{color:var(--text-dim);font-size:.9rem;margin-bottom:16px;min-height:22px;text-align:center}
.loader-bar-wrap{width:260px;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
#loader-progress{height:100%;width:0%;background:var(--gold);border-radius:2px;transition:width .3s ease}
.enter-btn{
  margin-top:28px;padding:14px 48px;
  background:var(--gold);border:none;border-radius:6px;
  color:#0d0a08;font-family:var(--font-body);font-size:.95rem;font-weight:700;
  letter-spacing:.5px;cursor:pointer;display:none;
  animation:pulse 2s ease infinite
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--gold-glow)}50%{box-shadow:0 0 0 12px transparent}}
.enter-btn:hover{background:var(--gold-light)}

/* ─── NAV ─── */
nav{
  display:flex;align-items:center;gap:12px;
  padding:0 20px;height:var(--nav-h);
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:500
}
.logo{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--cream);white-space:nowrap;text-decoration:none}
.logo span{color:var(--gold)}
.logo sub{font-size:.6rem;color:var(--text-dim);font-family:var(--font-body);font-weight:400;margin-left:4px;vertical-align:middle}
.nav-srch{
  flex:1;max-width:400px;
  display:flex;align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:30px;
  padding:3px 3px 3px 14px;transition:border-color .2s
}
.nav-srch:focus-within{border-color:var(--gold)}
.nav-srch input{flex:1;background:transparent;border:none;outline:none;color:var(--cream);font-family:var(--font-body);font-size:.85rem}
.nav-srch input::placeholder{color:var(--text-dim)}
.nav-srch button{padding:6px 16px;background:var(--gold);border:none;border-radius:30px;color:#0d0a08;font-weight:600;font-size:.8rem;cursor:pointer;transition:background .2s}
.nav-srch button:hover{background:var(--gold-light)}
.nav-links{display:flex;gap:16px;margin-left:auto}
.nav-links a{color:var(--text-dim);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--gold)}

/* ─── CATEGORY BAR ─── */
.cat-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;background:var(--surface2);
  border-bottom:1px solid var(--border);flex-wrap:wrap;
  position:relative
}
.mega-wrapper{position:relative}
.mega-btn{
  padding:6px 16px;border:1px solid var(--border2);border-radius:4px;
  background:#3a1208;color:var(--cream);
  font-family:var(--font-body);font-size:.82rem;font-weight:600;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;
  font-size: 1.2rem !important;
}
.mega-btn:hover{background:#5a1c0a}
.mega-panel{
  display:none;position:absolute;top:calc(100% + 8px);left:0;
  width:620px;background:#0e1118;
  border:1px solid rgba(201,148,58,.3);border-radius:12px;
  padding:24px;z-index:999;box-shadow:0 20px 40px rgba(0,0,0,.7)
}
.mega-panel.show{display:block;animation:megaIn .2s ease}
@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:24px}
.mega-col-title{font-size:.68rem;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.mega-col a{display:block;color:var(--text-dim);padding:5px 4px;font-size:.85rem;text-decoration:none;border-radius:3px;transition:all .15s}
.mega-col a:hover{color:var(--cream);padding-left:8px;background:var(--gold-glow2)}
.alpha-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.alpha-grid a{
  background:rgba(255,255,255,.03);text-align:center;
  padding:5px 2px;border-radius:3px;font-size:.72rem;
  color:var(--text-dim);text-decoration:none;transition:all .15s
}
.alpha-grid a:hover{background:var(--gold);color:#0d0a08;padding-left:2px}

.cat-btn{
  padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: #ffe5b8;
    font-family: var(--font-body);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s;
    text-transform: capitalize;
}
.cat-btn:hover,.cat-btn.active{background:var(--gold);color:#0d0a08;border-color:var(--gold);font-weight:600}

/* ─── SEARCH + STATUS ─── */
.srch-row{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 8px;flex-wrap:wrap;gap:8px}
.srch-box{display:flex;align-items:center;max-width:480px;flex:1}
.srch-box input{
  flex:1;padding:9px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:6px 0 0 6px;
  color:var(--cream);font-family:var(--font-body);font-size:.88rem;outline:none;
  transition:border-color .2s
}
.srch-box input:focus{border-color:var(--gold)}
.srch-box button{
  padding:9px 18px;background:#3a1208;
  border:1px solid #3a1208;border-radius:0 6px 6px 0;
  color:#fff;cursor:pointer;font-size:.85rem;transition:background .2s
}
.srch-box button:hover{background:#5a1c0a}
#status-msg{
  font-size:.75rem;color:var(--gold);font-weight:500;
  padding:6px 20px;background:var(--surface2);
  border-bottom:1px solid var(--border)
}

/* ─── SECTION LABELS ─── */
.sec-label{
  font-family:var(--font-display);font-size:1.15rem;font-weight:600;
  color:var(--gold);padding:18px 20px 10px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--border)
}
.sec-label i{font-size:17px}

/* ─── CARDS GRID ─── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:14px;padding:16px 20px;}
.empty-msg{grid-column:1/-1;color:var(--text-dim);font-size:.85rem;padding:24px;text-align:center}

/* ─── MIDI CARD ─── */
.midi-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:transform .15s,border-color .2s,box-shadow .2s
}
.midi-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.midi-card.best{border-color:rgba(26,138,122,.3);background:linear-gradient(160deg,#0a1614 0%,#1c1410 100%)}
.midi-card.fav{border-color:rgba(139,31,47,.3);background:linear-gradient(160deg,#180a0e 0%,#1c1410 100%)}
.midi-card.playing{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)}

.card-thumb{
  height:74px;
  background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--border);
  font-size:1.8rem;color:var(--gold);
  position:relative;overflow:hidden
}
.midi-card.best .card-thumb{color:var(--teal)}
.midi-card.fav .card-thumb{color:var(--crimson)}
.card-thumb .playing-indicator{
  position:absolute;inset:0;background:rgba(201,148,58,.08);
  display:none;align-items:center;justify-content:center;gap:3px
}
.midi-card.playing .card-thumb .playing-indicator{display:flex}
.playing-bar{width:3px;background:var(--gold);border-radius:2px;animation:barBounce .8s ease infinite}
.playing-bar:nth-child(2){animation-delay:.1s}
.playing-bar:nth-child(3){animation-delay:.2s}

.card-body{padding:10px 12px 12px}
.card-title{
  font-size:.85rem;font-weight:500;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-transform:capitalize;margin-bottom:3px
}
.card-folder{
  font-size:.68rem;color:var(--gold);
  margin-bottom:8px;text-transform:capitalize;
  display:flex;align-items:center;gap:4px
}
.card-actions{display:flex;gap:4px}
.card-actions button{
  flex:1;padding:5px 3px;border:1px solid var(--border);border-radius:4px;
  background:rgba(255,255,255,.03);color:var(--text-dim);
  font-size:.67rem;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:3px
}
.card-actions button:hover{background:var(--gold-glow);color:var(--gold);border-color:var(--border3)}
.card-actions button.fav-on{background:rgba(139,31,47,.15);color:#e87a8a;border-color:rgba(139,31,47,.3)}

.load-more-btn{
  display:none;margin:8px auto 28px;padding:10px 40px;
  background:transparent;border:1px solid var(--border2);border-radius:6px;
  color:var(--text-dim);font-family:var(--font-body);font-size:.83rem;cursor:pointer;transition:all .2s;
  margin-bottom: 80px;
}
.load-more-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ─── PLAYER HEADER ─── */
.player-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;background:var(--surface2);
  border-bottom:1px solid var(--border)
}
.back-btn{
  padding:6px 18px;background:#3a1208;border:none;border-radius:4px;
  color:var(--cream);font-family:var(--font-body);font-size:.83rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s
}
.back-btn:hover{background:#5a1c0a}
.player-song-title{
  flex:1;text-align:center;
  font-family:var(--font-display);font-size:1.2rem;font-weight:600;
  color:var(--gold-light);text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* LEARN DROPDOWN */
.learn-wrap{position:relative;display:inline-block}
.learn-btn{
  padding:6px 14px;background:#0c4a28;
  border:1px solid #1a6a40;border-radius:4px;
  color:var(--cream);font-family:var(--font-body);font-size:.78rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:5px
}
#learn-dropdown{
  display:none;position:absolute;right:0;top:calc(100%+4px);
  background:#0e1118;border:1px solid var(--border2);border-radius:8px;
  min-width:168px;z-index:400;box-shadow:0 8px 20px rgba(0,0,0,.6)
}
.learn-wrap:hover #learn-dropdown{display:block}
#learn-dropdown a{
  display:flex;align-items:center;gap:8px;
  color:var(--text);padding:9px 14px;font-size:.82rem;
  text-decoration:none;border-bottom:1px solid var(--border);transition:background .2s
}
#learn-dropdown a:last-child{border:none}
#learn-dropdown a:hover{background:rgba(26,138,122,.2);color:var(--teal)}


/* ─── PLAYER CONTROLS ZONE ─── */
.player-zone{padding:0 20px 16px}
.now-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px
}
.now-info .now-label{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.now-info .now-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--gold-light);text-transform:capitalize}
.time-display{font-size:.78rem;color:var(--text-dim);font-family:monospace;margin-left:auto;white-space:nowrap}

.controls-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctrl-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;font-size:1rem;transition:all .2s
}
.ctrl-btn.primary{background:var(--gold);color:#0d0a08}
.ctrl-btn.primary:hover{background:var(--gold-light)}
.ctrl-btn.secondary{background:rgba(255,255,255,.05);border:1px solid var(--border2);color:var(--text)}
.ctrl-btn.secondary:hover{border-color:var(--gold);color:var(--gold)}
.ctrl-btn.danger{background:rgba(139,31,47,.15);border:1px solid rgba(139,31,47,.3);color:#e87a8a}

.right-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.act-btn{
  padding:8px 12px;border:1px solid var(--border2);border-radius:6px;
  background:rgba(255,255,255,.03);color:var(--text);
  font-size:.76rem;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:5px
}
.act-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}
.act-btn.on{border-color:rgba(139,31,47,.4);background:rgba(139,31,47,.12);color:#e87a8a}

/* INSTRUMENT DROPUP */
.inst-wrap{position:relative;display:inline-block}
.inst-btn{
  padding:8px 12px;background:#3a1208;
  border:1px solid var(--border2);border-radius:6px;
  color:var(--cream);font-family:var(--font-body);font-size:.76rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s
}
.inst-btn:hover{background:#5a1c0a}
.inst-menu{
  display:none;position:absolute;bottom:calc(100% + 0px);left:0;
  background:#0e1118;border:1px solid var(--border2);border-radius:8px;
  min-width:200px;max-height:260px;overflow-y:auto;
  z-index:300;box-shadow:0 -8px 20px rgba(0,0,0,.6)
}
.inst-wrap:hover .inst-menu{display:block}
.inst-menu a{
  display:block;padding:8px 14px;color:var(--text);
  font-size:.82rem;text-decoration:none;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background .2s
}
.inst-menu a:last-child{border:none}
.inst-menu a:hover{background:var(--gold-glow);color:var(--gold)}
.inst-menu a.active-inst{color:var(--gold);font-weight:500}

/* ─── RELATED SECTION ─── */
.related-wrap{padding:0 20px 120px}
.related-label{
  font-family:var(--font-display);font-size:1rem;color:var(--gold);
  padding:12px 0 10px;border-bottom:1px solid var(--border);
  margin-bottom:12px;display:flex;align-items:center;gap:6px
}

/* ─── FIXED FOOTER PLAYER ─── */
#fixed-player-footer{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);border-top:1px solid var(--border2);
  padding:8px 20px;z-index:600
}
.footer-inner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:1400px;margin:0 auto
}
.fp-info{flex:1;min-width:120px;overflow:hidden}
.fp-title{font-size:.82rem;font-weight:500;color:var(--gold-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.fp-time{font-size:.7rem;color:var(--text-dim);font-family:monospace}
.fp-ctrls{display:flex;gap:6px;align-items:center}
.fp-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;font-size:.88rem;transition:all .2s
}
.fp-btn.play-btn{background:var(--gold);color:#0d0a08}
.fp-btn.play-btn:hover{background:var(--gold-light)}
.fp-btn.nav-btn{background:rgba(255,255,255,.05);border:1px solid var(--border2);color:var(--text)}
.fp-btn.nav-btn:hover{border-color:var(--gold);color:var(--gold)}
.fp-extra{display:flex;gap:6px;margin-left:auto}
.fp-ext-btn{
  padding:6px 10px;border:1px solid var(--border2);
  border-radius:5px;background:transparent;color:var(--text-dim);
  font-size:.72rem;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:4px
}
.fp-ext-btn:hover{color:var(--gold);border-color:var(--gold)}
.fp-ext-btn.on{color:#e87a8a;border-color:rgba(139,31,47,.4)}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  nav{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  .nav-links{display:none}
  .mega-panel{width:95vw}
  .mega-grid{grid-template-columns:1fr;gap:16px}
  .player-song-title{font-size:.95rem}
  .footer-inner{gap:8px}
  .fp-extra{display:none}
}
.yamaha-title {
			font-family: 'Arial Black', sans-serif;
			font-size: 1em;
			color: #f7f7f7;
			letter-spacing: 2px;
			text-transform: uppercase;
			align-items: center;
			border-bottom: 0;
		}
header .yamaha-title {
			flex: 1;
			text-align: center;
		}
@media (max-width: 768px) {
	.musicss {
		display: none;
	}
}
@media (max-width: 768px) {
    nav {
        flex-wrap: nowrap;
	}
}
.mega-item {
    text-decoration: none;
}
#song-counter {
    font-size: .75rem;
    color: var(--gold);
    font-weight: 500;
    padding: 6px 20px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
#status-msg {
    display: none;
}