/* =========================================================================
   MusicEmbed — a brand-themeable, self-hosted audio player with an editable
   playlist (drag to reorder, remove with an X, per-device persistence).
   Theme by setting the --me-* variables on a parent (all have fallbacks so it
   renders unstyled out of the box). No build step, no dependencies.
   ========================================================================= */
.me-player{
  --_panel:var(--me-panel,#FBF3E7); --_text:var(--me-text,#6E6052);
  --_deep:var(--me-text-deep,#574A3B); --_accent:var(--me-accent,#D49A41);
  --_accentd:var(--me-accent-deep,#BC8228); --_muted:var(--me-muted,#8AA178);
  --_line:var(--me-line,#EADFCB); --_track:var(--me-track,#E4DAC6);
  --_serif:var(--me-serif,'Cormorant Garamond',Georgia,serif);
  --_sans:var(--me-sans,'Jost',system-ui,sans-serif);
  --_body:var(--me-body,'Mulish',system-ui,sans-serif);
  --_cover:var(--me-cover-grad,linear-gradient(135deg,#F3CE6B,#E59B94 58%,#D49A41));
  --_shadow:var(--me-shadow,0 3px 8px rgba(87,74,59,.07),0 1px 24px rgba(87,74,59,.06),0 0 16px rgba(87,74,59,.05));
  --_shadowh:var(--me-shadow-hover,0 7px 8px rgba(87,74,59,.12),0 5px 16px rgba(87,74,59,.10));
  max-width:540px;margin:0 auto;background:var(--_panel);border:1px solid var(--_line);
  border-radius:24px;box-shadow:var(--_shadow);padding:22px 20px 18px;color:var(--_text);
  font-family:var(--_body);-webkit-font-smoothing:antialiased;
}
.me-player *{box-sizing:border-box;}

.me-head{text-align:center;margin-bottom:6px;}
.me-title{font-family:var(--_serif);font-weight:600;font-size:1.7rem;color:var(--_accentd);line-height:1.05;}
.me-sub{font-family:var(--_serif);font-size:1rem;color:var(--_text);opacity:.9;margin-top:2px;}

.me-np{display:flex;align-items:center;gap:14px;margin:12px 0 12px;}
.me-cover{width:84px;height:84px;border-radius:18px;flex:0 0 auto;position:relative;overflow:hidden;
  background:var(--_cover);box-shadow:inset 0 0 0 3px #fff,var(--_shadow);display:grid;place-items:center;}
.me-note{font-size:2rem;filter:drop-shadow(0 2px 4px rgba(87,74,59,.25));transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.me-player.me-playing .me-note{animation:me-bob 2.6s ease-in-out infinite;}
@keyframes me-bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-5px) rotate(4deg);}}
.me-meta{flex:1;min-width:0;text-align:left;}
.me-trackno{font-family:var(--_sans);text-transform:uppercase;letter-spacing:.18em;font-size:.56rem;color:var(--_accent);opacity:.9;}
.me-nptitle{font-family:var(--_serif);font-weight:600;font-size:1.6rem;color:var(--_accentd);line-height:1.05;margin:2px 0 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.me-vibe{font-family:var(--_body);font-size:.86rem;color:var(--_muted);}

.me-seek{margin:4px 2px 2px;}
.me-seek input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;margin:0;}
.me-seek input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;
  background:linear-gradient(to right,var(--_accent) 0%,var(--_accent) var(--pct,0%),var(--_track) var(--pct,0%),var(--_track) 100%);}
.me-seek input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--_track);}
.me-seek input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--_accent);}
.me-seek input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--_accent);box-shadow:0 1px 4px rgba(87,74,59,.3);margin-top:-5px;transition:transform .15s;}
.me-seek input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--_accent);}
.me-seek input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);}
.me-times{display:flex;justify-content:space-between;font-family:var(--_sans);font-size:.66rem;letter-spacing:.05em;color:var(--_text);opacity:.7;margin-top:2px;}

.me-transport{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0 4px;}
.me-btn{border:none;background:none;cursor:pointer;color:var(--_deep);display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;transition:background .2s,transform .15s;padding:0;}
.me-btn:hover{background:#fff;transform:translateY(-1px);}
.me-btn svg{width:24px;height:24px;fill:currentColor;}
.me-btn.main{width:64px;height:64px;background:var(--_accent);color:#fff;box-shadow:var(--_shadow);}
.me-btn.main:hover{background:var(--_accentd);transform:translateY(-2px);box-shadow:var(--_shadowh);}
.me-btn.main svg{width:28px;height:28px;}
.me-loopwrap{display:flex;flex-direction:column;align-items:center;gap:3px;}
.me-btn.loop{width:40px;height:40px;border:1px solid var(--_line);background:#fff;color:var(--_text);}
.me-btn.loop svg{width:18px;height:18px;}
.me-btn.loop.on{background:var(--_accent);border-color:var(--_accent);color:#fff;}
.me-looplab{font-family:var(--_sans);text-transform:uppercase;letter-spacing:.12em;font-size:.46rem;color:var(--_text);opacity:.6;}

/* ---- songs list: always visible, scrolls ~2.5 rows (Spotify-style) ---- */
.me-listhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:12px 2px 0;padding-top:11px;border-top:1px solid var(--_line);}
.me-listlabel{font-family:var(--_sans);text-transform:uppercase;letter-spacing:.14em;font-size:.56rem;color:var(--_accent);opacity:.85;}
.me-listhint{display:flex;align-items:center;color:var(--_text);opacity:.4;transition:opacity .25s;}
.me-listhint svg{width:13px;height:13px;fill:currentColor;animation:me-hintbob 1.6s ease-in-out infinite;}
@keyframes me-hintbob{0%,100%{transform:translateY(-1px);}50%{transform:translateY(1px);}}
.me-list{--_rowh:48px;margin-top:4px;position:relative;
  max-height:calc(2.5 * var(--_rowh));overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--_line) transparent;}
.me-list.me-more-below{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);
                               mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);}
.me-list.me-more-above.me-more-below{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 22px),transparent);
                                              mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 22px),transparent);}
.me-list.me-more-above:not(.me-more-below){-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px);
                                                    mask-image:linear-gradient(to bottom,transparent,#000 16px);}
.me-list::-webkit-scrollbar{width:5px;}
.me-list::-webkit-scrollbar-thumb{background:var(--_line);border-radius:3px;}
.me-list::-webkit-scrollbar-track{background:transparent;}
.me-row{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:12px;min-height:var(--_rowh,48px);text-align:left;
  transition:background .2s;background:transparent;}
.me-row:hover{background:rgba(125,125,125,.10);background:color-mix(in srgb,var(--_text) 9%,transparent);}
.me-row.active{background:rgba(212,154,65,.14);background:color-mix(in srgb,var(--_accent) 16%,transparent);}
.me-row.active .me-nm b{color:var(--_accentd);}
.me-row.me-dragging{box-shadow:var(--_shadowh);background:#fff;opacity:.97;}
.me-row-ph{border-radius:14px;border:1.5px dashed var(--_accent);background:rgba(212,154,65,.06);margin:0;}
.me-handle{flex:0 0 auto;width:22px;height:30px;display:grid;place-items:center;cursor:grab;color:var(--_text);opacity:.4;
  touch-action:none;font-size:1rem;line-height:1;}
.me-handle:hover{opacity:.75;}
.me-handle:active{cursor:grabbing;}
.me-tap{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;}
.me-idx{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:1px solid var(--_line);background:var(--_panel);
  display:grid;place-items:center;font-family:var(--_serif);font-weight:600;font-size:.88rem;color:var(--_accentd);}
.me-row.active .me-idx{background:var(--_accent);border-color:var(--_accent);color:#fff;}
.me-nm{flex:1;min-width:0;}
.me-nm b{font-family:var(--_serif);font-weight:600;font-size:1rem;color:var(--_deep);display:block;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.me-nm span{font-family:var(--_body);font-size:.72rem;color:var(--_text);opacity:.66;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.me-rowdur{font-family:var(--_sans);font-size:.66rem;color:var(--_text);opacity:.6;flex:0 0 auto;}
.me-eq{display:none;gap:2.5px;align-items:flex-end;height:15px;width:18px;flex:0 0 auto;}
.me-row.active.me-playing .me-eq{display:flex;}
.me-row.active.me-playing .me-rowdur{display:none;}
.me-eq i{width:3px;background:var(--_accent);border-radius:2px;animation:me-eq .9s ease-in-out infinite;}
.me-eq i:nth-child(1){height:6px;animation-delay:0s;}.me-eq i:nth-child(2){height:14px;animation-delay:.15s;}.me-eq i:nth-child(3){height:9px;animation-delay:.32s;}
@keyframes me-eq{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}
.me-remove{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--_line);background:transparent;color:var(--_text);
  cursor:pointer;display:grid;place-items:center;font-size:.8rem;line-height:1;opacity:.55;transition:all .2s;padding:0;}
.me-remove:hover{opacity:1;color:#fff;background:var(--me-danger,#D67E74);border-color:var(--me-danger,#D67E74);}

.me-reset{display:block;text-align:center;font-family:var(--_sans);text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;
  color:var(--_accentd);background:none;border:none;cursor:pointer;margin:12px auto 0;opacity:.8;}
.me-reset:hover{opacity:1;text-decoration:underline;}

.me-extwrap{display:flex;justify-content:center;margin-top:14px;}
.me-extlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--_sans);text-transform:uppercase;letter-spacing:.1em;
  font-size:.6rem;color:var(--_accentd);text-decoration:none;border:1px solid var(--_line);background:var(--me-bg,#FFFCF7);
  border-radius:20px;padding:8px 16px;transition:background .2s,transform .2s,box-shadow .2s;}
.me-extlink:hover{background:#fff;transform:translateY(-1px);box-shadow:var(--_shadow);}
.me-extlink .me-leaf{width:15px;height:15px;border-radius:50%;background:var(--_accent);color:#fff;display:grid;place-items:center;font-size:.58rem;}
.me-extlink .me-arr{opacity:.6;font-size:.7rem;}
.me-credit{font-family:var(--_sans);font-size:.6rem;letter-spacing:.03em;color:var(--_text);opacity:.5;text-align:center;margin:12px 0 0;}

/* ---- body header (titles + collapse chevron) ---- */
.me-bodyhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px;}
.me-titles{flex:1;min-width:0;}
.me-eyebrow{font-family:var(--_sans);text-transform:uppercase;letter-spacing:.18em;font-size:.56rem;color:var(--_accent);opacity:.85;}
.me-iconbtn{flex:0 0 auto;border:none;background:none;cursor:pointer;color:var(--_text);opacity:.5;width:30px;height:30px;
  border-radius:50%;display:grid;place-items:center;padding:0;transition:background .2s,opacity .2s;}
.me-iconbtn:hover{background:#fff;opacity:.9;}
.me-iconbtn svg{width:22px;height:22px;fill:currentColor;}

/* ---- compact mode (smaller footprint) ---- */
.me-player.me-compact{padding:13px 14px 12px;border-radius:20px;}
.me-player.me-compact .me-bodyhead{margin-bottom:2px;}
.me-player.me-compact .me-cover{width:46px;height:46px;border-radius:12px;}
.me-player.me-compact .me-note{font-size:1.2rem;}
.me-player.me-compact .me-np{margin:6px 0 8px;gap:11px;}
.me-player.me-compact .me-nptitle{font-size:1.2rem;}
.me-player.me-compact .me-title{font-size:1.4rem;}
.me-player.me-compact .me-seek{margin:2px 2px 0;}
.me-player.me-compact .me-transport{gap:13px;margin:4px 0 0;}
.me-player.me-compact .me-btn{width:40px;height:40px;}
.me-player.me-compact .me-btn svg{width:22px;height:22px;}
.me-player.me-compact .me-btn.main{width:46px;height:46px;}
.me-player.me-compact .me-btn.main svg{width:22px;height:22px;}
.me-player.me-compact .me-btn.loop{width:36px;height:36px;}
.me-player.me-compact .me-btn.loop svg{width:16px;height:16px;}
.me-player.me-compact .me-list{--_rowh:46px;}
.me-player.me-compact .me-listhead{margin-top:8px;padding-top:8px;}
.me-player.me-compact .me-extwrap{margin-top:10px;}
.me-player.me-compact .me-extlink{padding:7px 14px;}
.me-player.me-compact .me-credit{margin-top:8px;}

/* ---- collapsed: only the mini-bar shows ---- */
.me-mini{display:none;align-items:center;gap:12px;position:relative;padding:4px 2px 8px;}
.me-player.me-collapsed .me-mini{display:flex;}
.me-player.me-collapsed .me-body{display:none;}
.me-miniplay{width:46px;height:46px;flex:0 0 auto;background:var(--_accent);color:#fff;box-shadow:var(--_shadow);}
.me-miniplay:hover{background:var(--_accentd);}
.me-miniplay svg{width:22px;height:22px;}
.me-mini-info{flex:1;min-width:0;}
.me-mini-info b{font-family:var(--_serif);font-weight:600;font-size:1.18rem;color:var(--_accentd);display:block;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.me-mini-info span{font-family:var(--_body);font-size:.74rem;color:var(--_muted);}
.me-mini-prog{position:absolute;left:2px;right:2px;bottom:0;height:3px;border-radius:3px;background:var(--_track);overflow:hidden;}
.me-mini-prog i{display:block;height:100%;width:0;background:var(--_accent);transition:width .25s linear;}