/* v29.9 — Aeroify hero playlist: header chip + slide-in soundtrack panel */

/* Header chip (sits beside the Play button) */
.a29-music-btn{display:flex;align-items:center;gap:10px;padding:7px 16px 7px 9px;border-radius:12px;border:1px solid #8dd3ef40;background:linear-gradient(160deg,#ffffff14,#0a3c541f);box-shadow:inset 0 1px #ffffff22,0 6px 18px #021c3030;color:#eafaff;transition:transform .2s,box-shadow .2s,background .2s;margin-right:14px}
.a29-music-btn:hover{transform:translateY(-2px);background:linear-gradient(160deg,#ffffff20,#0a3c5430);box-shadow:inset 0 1px #ffffff30,0 10px 24px #021c3045}
.a29-music-btn img{width:30px;height:30px;padding:5px;border-radius:9px;background:linear-gradient(150deg,#69d3ef,#2f9cc8);box-shadow:inset 0 1px #ffffff70,0 4px 10px #04395a45}
.a29-music-btn>span{display:flex;flex-direction:column;align-items:flex-start;font-size:13px;font-weight:650;letter-spacing:-.2px;line-height:1.15;text-align:left}
.a29-music-btn small{font-size:8px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#9fd8ea}

/* Backdrop */
.a29-player-backdrop{position:fixed;inset:84px 0 0;z-index:78;background:#02162459;backdrop-filter:blur(3px);opacity:0;transition:opacity .4s ease}
.a29-player-backdrop.open{opacity:1}

/* Slide-in panel */
.a29-player{position:fixed;top:84px;right:0;bottom:0;z-index:79;width:min(392px,94vw);display:flex;flex-direction:column;gap:18px;padding:30px 26px 22px;background:linear-gradient(168deg,#0b3b55f5 0%,#072c41f8 55%,#062539fa 100%);backdrop-filter:blur(22px);border-left:1px solid #8dd3ef33;box-shadow:-30px 0 70px #01142166;color:#e7f8ff;transform:translateX(106%);transition:transform .48s cubic-bezier(.22,.9,.28,1);overflow:hidden}
.a29-player.open{transform:translateX(0)}
.a29-player:before{content:'';position:absolute;inset:0 0 auto;height:280px;background:radial-gradient(ellipse at 50% -30%,#4fc3ec38,transparent 65%);pointer-events:none}

.a29p-head{display:flex;align-items:center;gap:13px;position:relative}
.a29p-appicon{width:42px;height:42px;padding:8px;border-radius:13px;background:linear-gradient(150deg,#69d3ef,#2389b5);box-shadow:inset 0 1px #ffffff80,0 8px 20px #04395a55}
.a29p-heading{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.a29p-heading strong{font-size:19px;font-weight:650;letter-spacing:-.4px}
.a29p-heading span{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:#8fc6db;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a29p-close{border:0;background:none;color:#a9d3e4;font-size:15px;padding:8px 4px;line-height:1;opacity:.75;transition:opacity .2s,transform .2s}
.a29p-close:hover{opacity:1;transform:scale(1.12)}

/* Now playing */
.a29p-now{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px}
.a29p-now img{width:190px;height:190px;object-fit:cover;border-radius:18px;border:1px solid #9fdcf050;box-shadow:0 22px 50px #01152180,inset 0 1px #ffffff40;animation:a29-float 7s ease-in-out infinite}
.a29p-now-text{display:flex;flex-direction:column;gap:3px;margin-top:9px}
.a29p-now-text strong{font-size:20px;font-weight:650;letter-spacing:-.4px}
.a29p-now-text span{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#93c9dd}

/* Equalizer */
.a29p-eq{display:flex;align-items:flex-end;gap:3.5px;height:17px;margin-top:7px}
.a29p-eq i{width:3.5px;border-radius:2px;background:linear-gradient(180deg,#a8efd4,#4fc3ec);height:22%;opacity:.45;transition:opacity .3s}
.a29-player.is-playing .a29p-eq i{opacity:1;animation:a29p-bounce 1s ease-in-out infinite}
.a29p-eq i:nth-child(1){animation-delay:-.9s}.a29p-eq i:nth-child(2){animation-delay:-.35s}
.a29p-eq i:nth-child(3){animation-delay:-.7s}.a29p-eq i:nth-child(4){animation-delay:-.15s}
.a29p-eq i:nth-child(5){animation-delay:-.55s}.a29p-eq i:nth-child(6){animation-delay:-.25s}
.a29p-eq i:nth-child(7){animation-delay:-.8s}
@keyframes a29p-bounce{0%,100%{height:20%}50%{height:100%}}
/* When the live analyser is running, JS drives the bars every frame instead */
.a29-player.eq-live .a29p-eq i,.a29-player.eq-live .a29p-row.active .a29p-row-eq i{animation:none;opacity:.45}

/* Controls */
.a29p-controls{display:flex;align-items:center;justify-content:center;gap:22px}
.a29p-skip{border:0;background:none;color:#c9ecf8;padding:8px;opacity:.85;transition:opacity .2s,transform .2s}
.a29p-skip:hover{opacity:1;transform:scale(1.14)}
.a29p-skip svg{width:19px;height:19px;display:block}
.a29p-play{width:56px;height:56px;border-radius:50%;border:1px solid #bfe9f7;background:linear-gradient(#7adcf5 0%,#34a9d2 48%,#1488b4 52%,#1b96c2 100%);color:#fff;display:grid;place-items:center;box-shadow:inset 0 2px #ffffff90,0 10px 26px #0a4a6a70;transition:transform .2s,filter .2s}
.a29p-play:hover{transform:scale(1.07);filter:brightness(1.08)}
.a29p-play svg{width:23px;height:23px;display:block;margin-left:1px}

/* Seek + volume */
.a29p-seek,.a29p-vol{display:flex;align-items:center;gap:11px}
.a29p-seek span{font-size:10px;color:#8fc3d8;min-width:31px;text-align:center;font-variant-numeric:tabular-nums}
.a29p-vol svg{width:17px;height:17px;flex:0 0 auto;color:#8fc3d8}
.a29-player input[type=range]{flex:1;appearance:none;-webkit-appearance:none;height:4px;border-radius:3px;background:linear-gradient(90deg,#59c8ff var(--fill,0%),#7fb8cd38 var(--fill,0%));outline:none;cursor:pointer}
.a29-player input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bfeaf7 55%,#7fd4ee);box-shadow:0 2px 7px #032b4170,inset 0 1px #fff}
.a29-player input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bfeaf7 55%,#7fd4ee);box-shadow:0 2px 7px #032b4170}

/* Track list */
.a29p-list{flex:1;min-height:0;overflow-y:auto;margin:0;padding:2px 2px 2px 0;list-style:none;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:#3f88a8 transparent}
.a29p-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:12px;background:none;color:#dff3fb;text-align:left;transition:background .18s,border-color .18s}
.a29p-row:hover{background:#7fd4ee14;border-color:#8dd3ef26}
.a29p-row.active{background:linear-gradient(90deg,#59c8ff1f,#a5efd014);border-color:#8dd3ef40}
.a29p-row img{width:42px;height:42px;border-radius:9px;object-fit:cover;flex:0 0 auto;box-shadow:0 4px 10px #02181f50}
.a29p-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.a29p-meta strong{font-size:13px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a29p-meta small{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#8bbdd2}
.a29p-row time{font-size:10px;color:#87b7cb;font-variant-numeric:tabular-nums}
.a29p-row-eq{display:none;align-items:flex-end;gap:2.5px;height:12px}
.a29p-row-eq i{width:3px;height:30%;border-radius:2px;background:#a5efd0}
.a29p-row.active .a29p-row-eq{display:flex}
.a29-player.is-playing .a29p-row.active .a29p-row-eq i{animation:a29p-bounce .9s ease-in-out infinite}
.a29p-row-eq i:nth-child(2){animation-delay:-.3s}.a29p-row-eq i:nth-child(3){animation-delay:-.6s}

.a29p-note{margin:0;font-size:9.5px;line-height:1.7;color:#77a8bd;text-align:center;border-top:1px solid #8dd3ef1f;padding-top:14px}

@media(max-width:560px){
  .a29-music-btn{margin-right:8px;padding:6px 10px 6px 7px}
  .a29-music-btn>span small{display:none}
  .a29-player{padding:22px 18px 16px;gap:13px}
  .a29p-now img{width:150px;height:150px}
}
@media(prefers-reduced-motion:reduce){
  .a29-player,.a29-player-backdrop{transition-duration:.01s}
  .a29p-now img{animation:none}
  .a29-player.is-playing .a29p-eq i,.a29-player.is-playing .a29p-row.active .a29p-row-eq i{animation:none;height:70%}
}

/* Nav action group keeps chip + Play on one row, pinned to the right edge */
.a29-nav-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px}
.a29-nav-actions .a29-music-btn{margin-right:0}
@media(max-width:900px){
  .a29-nav-actions .a29-music-btn>span{display:none}
  .a29-nav-actions .a29-music-btn{padding:7px}
  .a29-nav-actions{gap:10px}
}