*{box-sizing:border-box} :root{--blue:#2059b6;--green:#168653;--ink:#132238;--bg:#eef4fb;--card:#fff;--line:#d5deea;--orange:#ff9d00}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}
header{position:sticky;top:0;z-index:20;background:var(--blue);color:#fff;padding:9px 14px;display:flex;justify-content:space-between;align-items:center}h1{font-size:21px;margin:0}header small{opacity:.92}
button,.select-btn{cursor:pointer;border:0;border-radius:10px;background:var(--green);color:#fff;padding:10px 14px;font-weight:700;text-decoration:none}.secondary{background:#fff;color:var(--blue)}.secondary-action{background:#5b6b83;color:#fff}
main{max-width:1400px;margin:auto;padding:12px 14px 175px}.panel{background:var(--card);border-radius:15px;padding:12px;margin-bottom:12px;box-shadow:0 2px 9px rgba(0,0,0,.08)}
.welcome{text-align:center;padding:28px 16px}.welcome h2{margin:0 0 8px}.welcome p{color:#56657a}.select-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0}.select-btn{display:inline-flex;min-height:54px;align-items:center;background:#2868b8}.select-btn.primary{background:var(--green)}.tip{color:#667085}
.toolbar{display:flex;gap:8px;margin-bottom:10px;align-items:stretch}.toolbar>input[type=search]{flex:1;min-width:180px;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:17px}.go-btn{min-width:48px;font-size:14px;padding:0 12px;background:var(--orange);color:#132238;min-height:32px;height:32px;align-self:center}#clearBtn{min-height:32px;height:32px;padding:2px 12px;align-self:center}
.quality-buttons{display:flex;gap:7px}.quality-btn,.mode-btn{position:relative;min-width:88px;min-height:32px;height:32px;padding:1px 7px;border:2px solid #7d8aa0;background:linear-gradient(#fff,#dbe3ee);color:#142238;box-shadow:0 5px 0 #7a8798,0 8px 12px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}.quality-btn.active,.mode-btn.active{border-color:var(--orange);background:linear-gradient(#858585,#595959);color:#fff;box-shadow:0 5px 0 #704000,0 0 12px var(--orange),0 0 22px rgba(255,157,0,.75)}.quality-main{font-size:14px;font-weight:800;line-height:1}.quality-sub{font-size:7px;margin-top:1px;white-space:nowrap;line-height:1}
/* v92: HD button wider so WAV · FLAC · ALAC fits inside; Home slimmer to compensate */
.quality-btn[data-format="HD"]{min-width:112px}.quality-btn[data-format="HD"] .quality-sub{font-size:7.5px}
#homeBtn{padding:2px 7px;font-size:11px}
.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:7px;padding:2px 0 6px}.top-folder-card{min-height:30px;padding:3px 10px;background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:13px;display:flex;align-items:center;text-align:left;overflow:hidden;font-weight:400}.top-folder-card.active{background:#eaf7f0;border-color:var(--green);box-shadow:0 0 0 2px rgba(25,135,84,.12)}
.top-folder-card img,.top-avatar{width:58px;height:58px;border-radius:10px;object-fit:cover;background:#dbe8fb;display:flex;align-items:center;justify-content:center;color:#214c8c;font-size:17px;font-weight:600}.top-info{min-width:0;width:100%;display:flex;flex-wrap:nowrap;align-items:baseline;gap:8px}.top-info strong{font-size:12px;font-weight:500;line-height:1.2;flex:1;min-width:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.top-info small{color:#667085;font-size:10px;white-space:nowrap}
.panel-head,.results-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.panel-head h2{font-size:14px;font-weight:700;margin:2px 0}.breadcrumb{font-size:12px;color:#667085}.back{background:linear-gradient(#fff,#d5dce6);color:#132238;border:2px solid #9aa7b8;box-shadow:0 5px 0 #7a8798,0 8px 12px rgba(0,0,0,.18);border-radius:10px;font-weight:800}.back:active{transform:translateY(3px);box-shadow:0 2px 0 #7a8798,0 4px 6px rgba(0,0,0,.15)}
.people-grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:11px}.people-grid.hidden{display:none}.folder-card{background:#f8fbff;border:1px solid var(--line);border-radius:12px;padding:8px;text-align:left;color:var(--ink);min-height:172px;display:flex;flex-direction:column;overflow:hidden}.folder-card img,.folder-avatar{width:100%;height:116px;border-radius:9px;object-fit:cover;background:#dbe8fb;display:flex;align-items:center;justify-content:center;font-size:28px;color:#214c8c;font-weight:700}.folder-name{font-size:14px;font-weight:400;margin-top:7px;line-height:1.2}.folder-card small{font-size:11px;color:#667085;margin-top:3px}
.play-controls{position:fixed;left:50%;bottom:68px;transform:translateX(-50%);z-index:45;width:min(96%,980px);display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;align-items:stretch;padding:6px 8px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:15px;box-shadow:0 5px 22px rgba(0,0,0,.24);backdrop-filter:blur(8px)}.play-controls button{width:100%;min-width:0;min-height:32px;height:32px;padding:3px 5px;border-radius:8px;font-size:11px;line-height:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-btn{min-width:auto!important;min-height:32px!important;height:32px;display:inline-flex;flex-direction:row;box-shadow:0 2px 0 #7a8798,0 4px 8px rgba(0,0,0,.15)}.mode-btn.active{box-shadow:0 2px 0 #704000,0 0 8px var(--orange),0 0 14px rgba(255,157,0,.55)}.control-btn{background:#d98b00}.stop-btn{background:#b42318}.nav-play-btn{background:#2868b8}
#songList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#songList .empty{grid-column:1/-1}.song{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:8px;margin-bottom:0;min-width:0}.song>div{min-width:0}.song-title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cover{width:62px;height:62px;border-radius:8px;object-fit:cover;background:#e8eef7}.placeholder{display:flex;align-items:center;justify-content:center;font-size:25px}.song-title{font-weight:700;font-size:14px}.meta{font-size:11px;color:#667085;margin-top:4px}.badge{font-size:10px;padding:2px 6px;border-radius:10px;background:#e8eef7;display:inline-block;margin-top:4px}.play{width:44px;height:44px;border-radius:50%;padding:0;font-size:16px}.empty{text-align:center;color:#667085;padding:25px}
#playerBar{position:fixed;left:0;right:0;bottom:0;background:#101828;color:#fff;padding:8px 14px;z-index:30}#nowPlaying{font-size:12px;font-weight:700;margin-bottom:5px}.seek-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:13px}#seekBar{width:100%;height:28px;margin:0;accent-color:var(--orange);touch-action:none}
@media(max-width:900px){.people-grid{grid-template-columns:repeat(4,1fr)}#songList{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){main{padding:8px 8px 215px}.toolbar{flex-wrap:wrap}.quality-buttons{order:1;flex:1}.quality-btn{flex:1;min-width:0}.toolbar>input[type=search]{order:2;flex-basis:calc(100% - 130px);min-width:0}#searchGoBtn{order:3}#clearBtn{order:4}.tabs{grid-template-columns:1fr}.people-grid{grid-template-columns:repeat(3,1fr)}.folder-card{min-height:145px}.folder-card img,.folder-avatar{height:90px}.results-head{align-items:flex-start;flex-direction:column}.play-controls{left:6px;right:6px;bottom:68px;transform:none;width:auto;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px 6px;gap:5px}.play-controls button{height:32px;min-height:32px;padding:2px 4px;font-size:10px}.mode-btn{height:32px!important;min-height:32px!important}.song{grid-template-columns:52px 1fr auto}.cover{width:52px;height:52px}#songList{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.song{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:6px}.cover{width:100%;height:82px;border-radius:7px}.placeholder{font-size:22px}.song-title{font-size:11px;line-height:1.2;min-height:0;margin:0}.meta{display:none}.badge{font-size:8px;padding:1px 5px;margin-top:0;align-self:flex-start}.play{width:100%;height:20px;min-height:20px;border-radius:6px;font-size:10px;padding:0;margin-top:auto;display:flex;align-items:center;justify-content:center}}
@media(max-width:420px){main{padding-bottom:250px}.play-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.play-controls button{font-size:9.5px}}

.load-status{margin-top:12px;font-weight:700;color:#173f77;min-height:22px}.load-status.error{color:#b42318}.load-status.ok{color:#116233}

/* v7 compact top controls */
#changeLibraryBtn{min-height:38px;height:38px;padding:3px 10px;line-height:1.05;border-radius:9px;align-self:center}
@media(max-width:700px){.quality-btn{min-height:32px;height:32px;padding:1px 5px}.quality-main{font-size:13px}.quality-sub{font-size:6.5px}.quality-btn[data-format="HD"]{flex:1.45;min-width:0}.quality-btn[data-format="HD"] .quality-sub{font-size:7px}#homeBtn{padding:2px 5px}#changeLibraryBtn{min-height:36px;height:36px;padding:2px 8px;font-size:11px}}

.load-status.busy::before{content:'';display:inline-block;width:16px;height:16px;margin-right:8px;border:3px solid #93c5fd;border-top-color:#1d4ed8;border-radius:50%;vertical-align:-3px;animation:gcxspin .8s linear infinite}@keyframes gcxspin{to{transform:rotate(360deg)}}

[hidden]{display:none !important}

@media(min-width:1024px){#songList{grid-template-columns:repeat(6,minmax(0,1fr))}.song{grid-template-columns:66px 1fr auto;padding:6px;gap:6px}.cover{width:66px;height:66px}.placeholder{font-size:26px}.song-title{font-size:12px}.meta{font-size:10px}.play{width:36px;height:36px;font-size:13px}}

.sort-group{display:flex;gap:7px}.sort-btn{min-height:36px;height:36px;padding:2px 12px;border:2px solid #7d8aa0;border-radius:10px;background:linear-gradient(#fff,#dbe3ee);color:#142238;font-weight:800;font-size:12px;box-shadow:0 5px 0 #7a8798,0 8px 12px rgba(0,0,0,.18);cursor:pointer;white-space:nowrap}.sort-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #7a8798,0 4px 6px rgba(0,0,0,.15)}.sort-btn.active{border-color:var(--orange);background:linear-gradient(#858585,#595959);color:#fff;box-shadow:0 5px 0 #704000,0 0 12px var(--orange),0 0 22px rgba(255,157,0,.75)}
@media(max-width:700px){.sort-btn{flex:1;min-height:32px;height:32px;font-size:11px;padding:2px 6px}.sort-group{width:100%}}

img{max-width:100%}
.folder-card{width:100%;max-width:100%;overflow:hidden}
.folder-card img,.folder-avatar{width:100%!important;height:116px!important;max-height:116px;object-fit:contain!important;background:#dbe8fb;overflow:hidden}
.cover{object-fit:contain!important;background:#e8eef7}
@media(max-width:700px){.folder-card img,.folder-avatar{height:90px!important;max-height:90px}}

/* v61: playing-area logo + equaliser (style C) */
.eq{display:flex;align-items:flex-end;gap:3px;height:34px}
.eq span{width:6px;border-radius:3px;background:#3b82f6;height:30%;animation:eqb 1s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.15s;background:#f5c063}
.eq span:nth-child(3){animation-delay:.3s}
.eq span:nth-child(4){animation-delay:.45s;background:#f5c063}
.eq span:nth-child(5){animation-delay:.6s}
@keyframes eqb{0%,100%{height:25%}50%{height:100%}}
#playerBar:not(.playing) .eq span{animation-play-state:paused;height:25%}
.cover.logoart{object-fit:cover;background:#0a1022}

/* v62: Drive Mode (design B) */
#driveMode{position:fixed;inset:0;background:#060a18;z-index:999;color:#fff;overflow:hidden}
#driveMode .dm-stage{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1vh;padding:2vh;padding-top:max(9vh,84px);overflow:auto}
.dm-lane{position:absolute;top:-70px;bottom:-70px;width:10px;z-index:0;pointer-events:none}
.dm-lane-left{left:4vw}.dm-lane-right{right:4vw}
.dm-dash{position:absolute;left:0;width:10px;height:64px;border-radius:5px;background:#3b4d7a;animation:dmRoad 1.6s linear infinite}
@keyframes dmRoad{from{transform:translateY(-100px)}to{transform:translateY(110vh)}}
#dmClose{position:absolute;top:8px;right:8px;z-index:3;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:3px 9px;font-size:.9em;cursor:pointer}
.dm-cards{display:flex;gap:4vw;align-items:center;z-index:1}
.dm-card{background:transparent;border:1.5px solid #7b8494;border-radius:20px;padding:.7vh}
.dm-card.dm-logo{background:transparent}
.dm-card img{width:min(40vw,48vh);height:min(40vw,48vh);object-fit:contain;border-radius:16px;display:block}
.dm-eq{display:flex;gap:6px;align-items:flex-end;height:11vh;z-index:1} /* v101: taller EQ in Pic+EQ */
.dm-eq span{width:1.3vw;max-width:14px;min-width:6px;height:25%;background:#3b82f6;border-radius:4px;animation:eqb .9s ease-in-out infinite}
.dm-eq span:nth-child(3n){background:#f5c063}
#dmTitle{font-size:clamp(1.4em,3.6vw,2.6em);font-weight:700;z-index:1;text-align:center}
#dmSub{color:#aac3eb;font-size:clamp(.9em,2vw,1.3em);z-index:1}
#dmMode{background:#fff;color:#1a2b55;border:1.5px solid #c7cede;border-radius:8px;padding:2px 12px;font-size:.78em;line-height:1.5;cursor:pointer;z-index:1;font-weight:700;box-shadow:0 2px 4px rgba(0,0,0,.4)}
#driveMode.mode-pic .dm-eq{display:none}
#driveMode.mode-eq .dm-card.dm-art{display:none}
#driveMode.mode-eq .dm-eq{height:8vh}
#driveMode.mode-eq .dm-card.dm-logo img{width:min(54vw,25vh);height:min(54vw,25vh)} /* v109: smaller pic — the EQ is the hero in this mode */
@media (orientation:portrait){
  .dm-cards{flex-direction:column;gap:1.4vh}
  .dm-card img{width:min(84vw,27vh);height:min(84vw,27vh)} /* v101: pics slightly smaller for taller EQ */
  .dm-stage{padding-top:max(13vh,110px)}
}
#playerBar:not(.playing) ~ #driveMode .dm-eq span,#playerBar:not(.playing) ~ #driveMode .dm-dash{animation-play-state:paused}

/* v67: floating drive-mode controls */
#dmControls{position:relative;z-index:2;display:flex;gap:7px;flex-wrap:wrap;justify-content:center;background:rgba(15,25,55,.85);border:1px solid #33406a;border-radius:14px;padding:6px 9px;backdrop-filter:blur(4px)}
#dmControls button{background:#2868b8;color:#fff;border:0;border-radius:8px;padding:2px 8px;font-size:.78em;line-height:1.5;cursor:pointer;min-width:38px;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.35)}
#dmControls #dmRew{background:#168653}
#dmControls #dmFwd{background:linear-gradient(#858585,#595959)}
#dmControls #dmPause{background:#d98b00}
#dmControls #dmStop{background:#b42318}
#dmSeekRow{display:flex;align-items:center;gap:8px;width:min(92vw,760px);z-index:2;color:#fff;font-size:.82em}
#dmSeekRow input{flex:1;accent-color:#ff9d00;height:6px}


/* v68: floating top bar in Drive Mode */
#dmTop{position:absolute;top:8px;left:8px;right:58px;z-index:3;display:flex;gap:5px;flex-wrap:wrap;align-items:center;background:rgba(15,25,55,.9);border:1px solid #33406a;border-radius:10px;padding:4px 6px;backdrop-filter:blur(4px)}
#dmTop button{background:#243a7a;color:#fff;border:1px solid #3a4f96;border-radius:7px;padding:2px 7px;font-size:.74em;line-height:1.5;cursor:pointer}
#dmTop #dmHome{background:#eef1f6;border-color:#c7cede;color:#1a2b55;font-weight:700}
#dmTop #dmLib{background:#6b7280;border-color:#6b7280;color:#fff;font-weight:700}
#dmTop button.dmQ{background:#fff;border-color:#c7cede;color:#1a2b55;font-weight:700}
#dmTop button.dmQ.active{background:#f5a623;border-color:#f5a623;color:#1a1a1a;font-weight:700}
#dmTop #dmGo{background:#f5a623;border-color:#f5a623}
#dmTop #dmClear{background:#1d9e4f;border-color:#1d9e4f}
#dmTop #dmSearch{flex:1;min-width:90px;border:0;border-radius:7px;padding:3px 7px;font-size:.74em}
@media (orientation:portrait){#dmTop{right:64px}}

/* v83: 3D depth + neon backlight for all Drive Mode buttons */
#dmTop button,#dmControls button,#dmMode{position:relative;transition:transform .06s ease,box-shadow .06s ease}
#dmTop #dmHome{box-shadow:0 3px 0 #9aa4b5,0 0 8px rgba(255,255,255,.6)}
#dmTop #dmLib{box-shadow:0 3px 0 #3f4652,0 0 8px rgba(170,180,200,.7)}
#dmTop button.dmQ{box-shadow:0 3px 0 #9aa4b5,0 0 8px rgba(255,255,255,.55)}
#dmTop button.dmQ.active{box-shadow:0 3px 0 #704000,0 0 10px #ff9d00,0 0 18px rgba(255,157,0,.7)}
#dmTop #dmGo{box-shadow:0 3px 0 #704000,0 0 9px rgba(255,157,0,.85)}
#dmTop #dmClear{box-shadow:0 3px 0 #0d5a2e,0 0 9px rgba(29,158,79,.85)}
#dmControls button{box-shadow:0 3px 0 #16345c,0 0 9px rgba(40,104,184,.8)}
#dmControls #dmRew{box-shadow:0 3px 0 #0b4a2c,0 0 9px rgba(22,134,83,.85)}
#dmControls #dmPause{box-shadow:0 3px 0 #6e4700,0 0 9px rgba(217,139,0,.85)}
#dmControls #dmFwd{box-shadow:0 3px 0 #3a3a3a,0 0 9px rgba(160,160,160,.8)}
#dmControls #dmStop{box-shadow:0 3px 0 #5e120c,0 0 10px rgba(180,35,24,.9)}
#dmMode{box-shadow:0 3px 0 #9aa4b5,0 0 9px rgba(255,255,255,.65)}
#dmTop button:active,#dmControls button:active,#dmMode:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}

/* v87: road animation on/off */
#dmTop #dmRoad{background:#fff;border-color:#c7cede;color:#1a2b55;font-weight:700;box-shadow:0 3px 0 #9aa4b5,0 0 8px rgba(255,255,255,.55)}
#dmTop #dmRoad.on{background:#f5a623;border-color:#f5a623;color:#1a1a1a;box-shadow:0 3px 0 #704000,0 0 10px #ff9d00,0 0 18px rgba(255,157,0,.7)}
/* v94: STRONGER 3D depth — gradients + thicker bottom edge + brighter neon (small buttons were reading flat) */
#dmTop button,#dmControls button,#dmMode{border:1px solid rgba(255,255,255,.28)}
#dmTop #dmHome{background:linear-gradient(#ffffff,#d9e0ec);box-shadow:0 4px 0 #8b95a8,0 0 12px rgba(255,255,255,.85)}
#dmTop #dmLib{background:linear-gradient(#8a93a2,#5b6472);box-shadow:0 4px 0 #343b47,0 0 12px rgba(180,190,210,.9)}
#dmTop button.dmQ{background:linear-gradient(#ffffff,#dbe3ee);box-shadow:0 4px 0 #8b95a8,0 0 11px rgba(255,255,255,.8)}
/* v96: active filter keeps its OWN colour — thick BRIGHT RED blinking neon ring */
#dmTop button.dmQ.active{background:linear-gradient(#ffffff,#dbe3ee);border:2px solid #ff1a1a;animation:dmNeon .9s ease-in-out infinite}
@keyframes dmNeon{
  0%,100%{box-shadow:0 4px 0 #8b95a8,0 0 0 2px rgba(255,26,26,.9),0 0 10px #ff1a1a,0 0 20px rgba(255,26,26,.8)}
  50%{box-shadow:0 4px 0 #8b95a8,0 0 0 3px #ff1a1a,0 0 22px #ff1a1a,0 0 38px rgba(255,26,26,1)}
}
#dmTop #dmGo{background:linear-gradient(#ffb84d,#e08900);box-shadow:0 4px 0 #6e4700,0 0 13px rgba(255,157,0,.95)}
#dmTop #dmClear{background:linear-gradient(#27c368,#128a43);box-shadow:0 4px 0 #0a4f27,0 0 13px rgba(29,158,79,.95)}
#dmTop #dmRoad{background:linear-gradient(#ffffff,#dbe3ee);box-shadow:0 4px 0 #8b95a8,0 0 11px rgba(255,255,255,.8)}
#dmTop #dmRoad.on{background:linear-gradient(#ffffff,#dbe3ee);border:2px solid #ff1a1a;animation:dmNeon .9s ease-in-out infinite}
/* v98: Drive Mode Pause button blinks red while music is playing */
#playerBar.playing ~ #driveMode #dmControls #dmPause{border:2px solid #ff1a1a;animation:dmPlayNeon .9s ease-in-out infinite}
@keyframes dmPlayNeon{
  0%,100%{box-shadow:0 4px 0 #5e3c00,0 0 0 2px rgba(255,26,26,.9),0 0 10px #ff1a1a,0 0 20px rgba(255,26,26,.8)}
  50%{box-shadow:0 4px 0 #5e3c00,0 0 0 3px #ff1a1a,0 0 22px #ff1a1a,0 0 38px rgba(255,26,26,1)}
}
/* v97: playing song's Play button — same thick red blinking neon */
.song.playing{border-color:#ff1a1a}
.song.playing .play{border:2px solid #ff1a1a;animation:songNeon .9s ease-in-out infinite}
@keyframes songNeon{
  0%,100%{box-shadow:0 0 0 2px rgba(255,26,26,.9),0 0 10px #ff1a1a,0 0 20px rgba(255,26,26,.8)}
  50%{box-shadow:0 0 0 3px #ff1a1a,0 0 22px #ff1a1a,0 0 38px rgba(255,26,26,1)}
}
#dmControls button{background:linear-gradient(#3b82f6,#1d4f94);box-shadow:0 4px 0 #122c50,0 0 13px rgba(59,130,246,.95)}
#dmControls #dmRew{background:linear-gradient(#9a9a9a,#5a5a5a);box-shadow:0 4px 0 #303030,0 0 12px rgba(170,170,170,.9)} /* v115: grey like dmFwd */
#dmControls #dmPause{background:linear-gradient(#f5a623,#b36f00);box-shadow:0 4px 0 #5e3c00,0 0 13px rgba(245,166,35,.95)}
#dmControls #dmFwd{background:linear-gradient(#9a9a9a,#5a5a5a);box-shadow:0 4px 0 #303030,0 0 12px rgba(170,170,170,.9)}
#dmControls #dmStop{background:linear-gradient(#d3372a,#8c1a10);box-shadow:0 4px 0 #4d0d06,0 0 14px rgba(211,55,42,.95)}
#dmControls #dmRepeat{background:linear-gradient(#ffffff,#dbe3ee);color:#142238;box-shadow:0 4px 0 #8b95a8,0 0 12px rgba(255,255,255,.85)}
/* v130: Drive Mode Play All (green) + Normal (white, red neon when active) — same palette as master */
#dmControls #dmPlayAll{background:linear-gradient(#27c368,#128a43);box-shadow:0 4px 0 #0a4f27,0 0 13px rgba(29,158,79,.95)}
#dmControls #dmNormal{background:linear-gradient(#ffffff,#dbe3ee);color:#142238;box-shadow:0 4px 0 #8b95a8,0 0 12px rgba(255,255,255,.85)}
#dmControls #dmNormal.active{border:2px solid #ff1a1a;animation:songNeon .9s ease-in-out infinite}
#dmControls #dmRepeat.active{border:2px solid #ff1a1a;animation:songNeon .9s ease-in-out infinite}
.rew-btn{background:linear-gradient(#9a9a9a,#5a5a5a)!important;border-color:#5a5a5a!important} /* v115: grey like fwd for consistency */
.fwd-btn{background:linear-gradient(#9a9a9a,#5a5a5a)!important;border-color:#5a5a5a!important}
#dmMode{background:linear-gradient(#ffffff,#dbe3ee);box-shadow:0 4px 0 #8b95a8,0 0 12px rgba(255,255,255,.85)}
#dmTop button:active,#dmControls button:active,#dmMode:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.5)}
#driveMode.road-off .dm-lane{display:none}

/* v88: REAL frequency EQ (E3 thin lines) — heights driven by the song's audio */
.dm-eq.live{gap:4px;align-items:flex-end}
.dm-eq.live span{animation:none;width:4px;min-width:3px;max-width:6px;border-radius:2px;height:6%;
  transition:height .06s linear}
/* v90: 4 light colour groups matching the 4 frequency zones */
.dm-eq.live span:nth-child(-n+6){background:linear-gradient(to top,#5a9cf8,#b3d4ff)}                     /* Sub 20-80 Hz — light blue */
.dm-eq.live span:nth-child(n+7):nth-child(-n+12){background:linear-gradient(to top,#4ecb8d,#b5f3d2)}    /* Woofer 80-150 Hz — light green */
.dm-eq.live span:nth-child(n+13):nth-child(-n+20){background:linear-gradient(to top,#ffc75a,#ffe9b8)}   /* Mid 150-500 Hz — light gold */
.dm-eq.live span:nth-child(n+21){background:linear-gradient(to top,#ff8f8f,#ffcfcf)}                    /* High 500 Hz-20 kHz — light coral */
/* v110: dB VU meter + pitch display (option C) */
.dm-eqrow{display:flex;align-items:flex-end;gap:9px;z-index:1}
.dm-eqcol{display:flex;flex-direction:column;align-items:center}
.dm-vu{display:flex;flex-direction:column;align-items:center;gap:1px}
.dm-vu small{font-size:.55em;color:#9fb;font-weight:700}
.dm-vu-row{display:flex;align-items:stretch;gap:3px}
/* v111: fixed dB scale — labels sit at their TRUE levels (0=-top, -12=80%, -24=60%, -40=33%, -60=bottom) */
.dm-vu-scale{position:relative;width:16px;height:11vh;font-size:8px;color:#7f95b8;font-weight:600}
.dm-vu-scale span{position:absolute;right:0;transform:translateY(50%);line-height:1}
.dm-vu-scale .s0{bottom:100%}.dm-vu-scale .s12{bottom:80%}.dm-vu-scale .s24{bottom:60%}.dm-vu-scale .s40{bottom:33.3%}.dm-vu-scale .s60{bottom:0%}
.dm-vu-meter{width:10px;height:11vh;border:1px solid #394a6d;border-radius:4px;background:#0a0f1e;position:relative;overflow:hidden}
.dm-vu-meter::before{content:'';position:absolute;inset:0;z-index:2;background:
  linear-gradient(to top,transparent 79.5%,rgba(255,255,255,.35) 79.5%,rgba(255,255,255,.35) 80.5%,transparent 80.5%),
  linear-gradient(to top,transparent 59.5%,rgba(255,255,255,.35) 59.5%,rgba(255,255,255,.35) 60.5%,transparent 60.5%),
  linear-gradient(to top,transparent 32.8%,rgba(255,255,255,.35) 32.8%,rgba(255,255,255,.35) 33.8%,transparent 33.8%)}
.dm-vu-fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(to top,#1d9e4f,#1d9e4f 55%,#ffc75a 78%,#e05252);transition:height .07s linear}
.dm-vu-peak{position:absolute;left:0;right:0;height:2px;background:#fff;bottom:0%}
#driveMode.mode-eq .dm-vu-meter{width:16px;height:26vh}
#driveMode.mode-eq .dm-vu-scale{height:26vh;font-size:10px;width:20px}
.dm-pitch{z-index:1;font-size:.85em;font-weight:700;color:#b3d4ff;margin-top:2px}
.dm-pitch small{color:#8aa;font-weight:400}
#driveMode.mode-pic .dm-eqrow,#driveMode.mode-pic .dm-pitch{display:none}
/* v104: EQ-only mode — wider, thicker equaliser filling more of the screen */
#driveMode.mode-eq .dm-eq.live{gap:4px;max-width:96vw} /* v108: half-thickness lines so full spectrum fits in the window */
#driveMode.mode-eq .dm-eq.live span{width:1.1vw;min-width:4px;max-width:7px;border-radius:2px}
#driveMode.mode-eq .dm-eq{height:26vh} /* v109: much taller bars with the freed space */
#driveMode.mode-eq .dm-eq-labels .dm-lab{font-size:.72em}
/* v91: zone icon labels (style B — icon + Hz range) under the live EQ */
.dm-eq-labels{display:none;margin-top:2px;z-index:1}
.dm-eq-labels.on{display:flex}
.dm-lab{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:.6em;line-height:1.1;font-weight:600}
.dm-ic{font-size:1.05em}
.dm-l1{flex:6;color:#9cc3ff}.dm-l2{flex:6;color:#9fe8c4}.dm-l3{flex:8;color:#ffe0a3}.dm-l4{flex:12;color:#ffc0c0}
#driveMode.mode-pic .dm-eq-labels{display:none!important}


/* v99: master app active buttons — keep own colour, thick RED blinking neon ring (matches Drive Mode rule) */
.quality-btn.active,.sort-btn.active{border-color:#ff1a1a;background:linear-gradient(#fff,#dbe3ee);color:#142238;animation:masterNeon .9s ease-in-out infinite}
.mode-btn.active{border-color:#ff1a1a;background:linear-gradient(#fff,#dbe3ee);color:#142238;animation:masterNeonSm .9s ease-in-out infinite}
@keyframes masterNeon{
  0%,100%{box-shadow:0 5px 0 #7a8798,0 0 0 2px rgba(255,26,26,.9),0 0 12px #ff1a1a,0 0 22px rgba(255,26,26,.8)}
  50%{box-shadow:0 5px 0 #7a8798,0 0 0 3px #ff1a1a,0 0 24px #ff1a1a,0 0 40px rgba(255,26,26,1)}
}
@keyframes masterNeonSm{
  0%,100%{box-shadow:0 2px 0 #7a8798,0 0 0 2px rgba(255,26,26,.9),0 0 10px #ff1a1a,0 0 18px rgba(255,26,26,.8)}
  50%{box-shadow:0 2px 0 #7a8798,0 0 0 3px #ff1a1a,0 0 20px #ff1a1a,0 0 34px rgba(255,26,26,1)}
}

/* v117: floating Home (left) + Back (right) — appear after scrolling, save long scroll-ups */
#floatHome,#floatBack{position:fixed;top:var(--floatTop,165px);z-index:60;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(0,0,0,.15);font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .06s ease} /* v120: both float just BELOW the header, over the white page */
/* v127: style B — glossy dome, real physical button shine; Home dark green, Back light green */
/* v156: Install-App orange with a deeper 3D dome — bright top light, dark curved base,
   solid bottom edge and a soft cast shadow so the buttons look raised off the page */
#floatHome{left:12px;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.85),rgba(255,255,255,.15) 34%,rgba(255,255,255,0) 55%),
    radial-gradient(circle at 50% 118%,rgba(255,214,140,.55),rgba(255,214,140,0) 45%),
    linear-gradient(#ffc247,var(--orange) 42%,#c76a00 78%,#8a4400);
  border:2px solid #6d3500;
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.75),
    inset 0 -6px 9px rgba(90,40,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 6px 0 #7a3c00,
    0 10px 16px rgba(0,0,0,.42);
}
#floatBack{right:12px;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.85),rgba(255,255,255,.15) 34%,rgba(255,255,255,0) 55%),
    radial-gradient(circle at 50% 118%,rgba(255,214,140,.55),rgba(255,214,140,0) 45%),
    linear-gradient(#ffc247,var(--orange) 42%,#c76a00 78%,#8a4400);
  border:2px solid #6d3500;
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.75),
    inset 0 -6px 9px rgba(90,40,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 6px 0 #7a3c00,
    0 10px 16px rgba(0,0,0,.42);
}
#floatHome:active,#floatBack:active{transform:translateY(5px) scale(.97);
  box-shadow:inset 0 4px 8px rgba(90,40,0,.75),inset 0 -1px 2px rgba(255,255,255,.25),0 1px 0 #7a3c00,0 3px 6px rgba(0,0,0,.35)}

/* v122: Change Library lives INSIDE the green source capsule */
#tabsWrap{position:relative}
#tabsWrap #changeLibraryBtn{position:absolute;left:9px;top:50%;transform:translateY(-50%);z-index:5;min-height:26px;height:26px;padding:0 12px;font-size:11.5px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:9px;margin:0} /* v129: text perfectly centred vertically, same capsule height */
#tabsWrap .top-folder-card:first-child{padding-left:128px}
#tabsWrap #changeLibraryBtn:active{transform:translateY(calc(-50% + 2px))}


/* v125: old square grey Back retired — the blue floating ⬅ is THE Back now */
#backBtn{display:none!important}


/* v132: bigger circular-repeat icon in both rows */
.rep-ic{font-size:1.65em;line-height:1;vertical-align:middle;margin-right:2px}
.mode-btn .rep-ic{display:inline-block;transform:translateY(-1px)}
#dmControls #dmRepeat{font-size:1.5em;line-height:1}


/* v133: actor/folder name between logo and movie pic */
.dm-actor{z-index:1;font-weight:800;font-size:1.02em;color:#ffd479;text-align:center;max-width:88vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:2px 0}
.dm-actor:empty{display:none}


/* v134: rotating real credits line under the song title */
.dm-credits{z-index:1;min-height:1.25em;font-size:1.02em;font-weight:600;color:#bfe3ff;text-align:center;max-width:88vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity .35s}
.dm-credits.show{opacity:1}
.dm-credits:empty{display:none}


/* v139: Health Checker link inside source capsule, right of Change Library */
#tabsWrap #healthBtn{position:absolute;left:132px;top:50%;transform:translateY(-50%);z-index:5;min-height:26px;height:26px;padding:0 10px;font-size:11.5px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:9px;margin:0;text-decoration:none;background:linear-gradient(#3b82f6,#1d4f94);color:#fff;box-shadow:0 3px 0 #122c50}
#tabsWrap .top-folder-card:first-child{padding-left:206px}


/* v157: in-app message box (replaces the plain browser alert) */
.notice-back{position:fixed;inset:0;z-index:100000;background:rgba(8,14,26,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}
.notice-back[hidden]{display:none}
.notice-card{width:min(430px,94vw);background:linear-gradient(#ffffff,#f2f6fc);border:2px solid var(--orange);border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.9);overflow:hidden;animation:noticeIn .18s ease-out}
@keyframes noticeIn{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.notice-head{display:flex;align-items:center;gap:11px;padding:13px 15px;background:linear-gradient(var(--blue),#17418a);color:#fff}
.notice-head img{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:none}
.notice-title{font-size:16px;font-weight:800;line-height:1.2}
.notice-sub{font-size:11px;opacity:.85;margin-top:1px}
.notice-body{padding:14px 16px;color:var(--ink);font-size:14px;line-height:1.6}
.notice-body b{color:#0f2038}
.notice-body .brandred{color:#c62828;font-weight:900;letter-spacing:.2px}
.notice-body .hint{display:block;margin-top:9px;padding:9px 11px;background:#fff7e8;border-left:4px solid var(--orange);border-radius:8px;font-size:13px;color:#5b4520}
.notice-actions{display:flex;gap:9px;padding:0 16px 15px}
.notice-btn{flex:1;min-height:40px;border:none;border-radius:11px;font-size:14px;font-weight:800;cursor:pointer;color:#fff;transition:transform .06s ease}
.notice-btn.fix{background:linear-gradient(#ffc247,var(--orange) 45%,#c76a00);border:2px solid #6d3500;box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 -4px 7px rgba(90,40,0,.5),0 5px 0 #7a3c00,0 8px 12px rgba(0,0,0,.28);color:#2a1600}
.notice-btn.close{background:linear-gradient(#8a93a2,#5b6472);border:2px solid #343b47;box-shadow:inset 0 2px 3px rgba(255,255,255,.4),inset 0 -4px 7px rgba(0,0,0,.4),0 5px 0 #343b47,0 8px 12px rgba(0,0,0,.25)}
.notice-btn:active{transform:translateY(4px);box-shadow:inset 0 3px 6px rgba(0,0,0,.45)}


/* v162: credits sit right under the song name, the format line goes below them */
#driveMode #dmCredits{order:0;margin-top:1px}
#driveMode #dmSub{opacity:.9;font-size:.9em;margin-top:1px}


/* v163: quality tiers - HD (lossless) stands out in gold, everyday formats stay quiet */
.qtag{display:inline-block;padding:1px 8px;border-radius:7px;font-size:.72em;font-weight:900;letter-spacing:.6px;vertical-align:middle;margin-right:6px}
.qtag.hd{background:linear-gradient(#ffe08a,#e0a100);color:#3a2600;border:1px solid #b98200;box-shadow:0 0 10px rgba(255,200,80,.55)}
.qtag.std{background:linear-gradient(#8a93a2,#5b6472);color:#f2f6fc;border:1px solid #444c59}
.badge.hd{background:linear-gradient(#ffe08a,#e0a100)!important;color:#3a2600!important;border:1px solid #b98200!important;font-weight:800}
.badge.std{background:#e7edf6!important;color:#4b5a70!important;border:1px solid #cfd9e8!important}