/* =============================================================
   BSCC Playlist v2 — Mini Bar + Sheet Drawer
   Apple-quality editorial design · 全站常驻
   ============================================================= */

/* ── 全局工具类 ── */
body.no-scroll{overflow:hidden}

/* ── Mini Bar — 全站底部常驻 ── */
.pl-minibar{
  position:fixed;bottom:0;left:0;right:0;z-index:9990;
  background:rgba(26,23,21,.97);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(201,185,122,.15);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.pl-minibar.visible{transform:translateY(0)}

.pl-minibar-inner{
  display:flex;align-items:center;
  height:56px;padding:0 12px 0 16px;gap:12px;
  max-width:1200px;margin:0 auto;
}
.pl-minibar-thumb{
  width:40px;height:40px;
  border-radius:2px;object-fit:cover;
  flex-shrink:0;background:#3a3530;
}
.pl-minibar-info{
  flex:1;min-width:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pl-minibar-title{
  font-family:"Inter","Noto Sans SC",sans-serif;
  font-size:14px;font-weight:500;color:#f5f1ea;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;letter-spacing:.2px;
}
.pl-minibar-sub{
  font-family:"Inter",sans-serif;
  font-size:12px;color:#a89e94;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;margin-top:1px;
}
.pl-minibar-actions{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
}
.pl-minibar-btn{
  width:40px;height:40px;
  border:none;background:none;
  color:#f5f1ea;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s;
}
.pl-minibar-btn:active{color:#c9b97a}
.pl-minibar-btn svg{width:20px;height:20px}
.pl-minibar-badge{
  position:absolute;top:4px;right:2px;
  min-width:16px;height:16px;
  background:#c9b97a;color:#1a1715;
  font-size:10px;font-weight:700;
  font-family:"Inter",sans-serif;
  border-radius:2px;
  display:none;align-items:center;justify-content:center;
  padding:0 3px;line-height:1;
}
.pl-minibar-badge.visible{display:flex}

/* ── Overlay ── */
.pl-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.pl-overlay.open{opacity:1;pointer-events:auto}

/* ── Sheet Drawer ── */
.pl-drawer{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:#fff;
  box-shadow:0 -8px 40px rgba(0,0,0,.15);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.32,.72,0,1);
  max-height:min(85vh,600px);
  display:flex;flex-direction:column;
  font-family:"Inter","Noto Sans SC",sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
.pl-drawer.open{transform:translateY(0)}

/* Handle */
.pl-drawer-handle{
  display:flex;justify-content:center;
  padding:10px 0 4px;flex-shrink:0;
}
.pl-drawer-handle span{
  width:36px;height:4px;
  background:#ddd8d2;border-radius:2px;
}

/* Header */
.pl-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 20px 14px;flex-shrink:0;
}
.pl-header-title{
  font-size:17px;font-weight:600;color:#1a1715;
  letter-spacing:.2px;
}
.pl-header-count{
  font-size:13px;color:#a89e94;font-weight:400;
  margin-left:8px;
}
.pl-header-actions{display:flex;gap:8px;align-items:center}
.pl-header-btn{
  border:none;background:none;
  font-size:13px;color:#a89e94;
  cursor:pointer;padding:4px 10px;
  font-family:inherit;transition:color .15s;
  -webkit-tap-highlight-color:transparent;
}
.pl-header-btn:active{color:#1a1715}
.pl-close-btn{
  width:32px;height:32px;
  border:none;background:none;cursor:pointer;color:#a89e94;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
}
.pl-close-btn:active{color:#1a1715}

/* List */
.pl-list{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  flex:1;padding:0;
  overscroll-behavior:contain;
}
.pl-item{
  display:flex;align-items:center;
  padding:10px 20px;gap:10px;
  transition:background .12s;
  border-left:2px solid transparent;
}
.pl-item:active{background:rgba(180,170,150,.06)}
.pl-item.pl-current{
  border-left-color:#c9b97a;
  background:rgba(201,185,122,.06);
}
.pl-item-thumb{
  width:44px;height:44px;
  border-radius:2px;object-fit:cover;
  flex-shrink:0;background:#e8e4de;
}
.pl-item-info{
  flex:1;min-width:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pl-item-title{
  font-size:14px;font-weight:500;color:#1a1715;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.4;
}
.pl-item.pl-current .pl-item-title{color:#2d2926;font-weight:600}
.pl-item-sub{
  font-size:12px;color:#a89e94;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}
.pl-item-dur{
  font-size:12px;color:#b5ada5;
  font-family:"Inter",sans-serif;
  flex-shrink:0;font-variant-numeric:tabular-nums;
}
/* Sort arrows — 44px touch target (Apple HIG minimum) */
.pl-sort-btns{
  display:flex;flex-direction:column;gap:0;flex-shrink:0;
}
.pl-sort-btn{
  width:36px;height:28px;
  border:none;background:none;cursor:pointer;color:#c8c0b8;
  display:flex;align-items:center;justify-content:center;
  padding:0;transition:color .12s;
  -webkit-tap-highlight-color:transparent;
}
.pl-sort-btn:active{color:#1a1715}
.pl-sort-btn svg{width:16px;height:16px}
/* Remove button — 44px touch target */
.pl-remove-btn{
  width:44px;height:44px;
  border:none;background:none;cursor:pointer;color:#d0c8c0;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;transition:color .12s;
  -webkit-tap-highlight-color:transparent;
}
.pl-remove-btn:active{color:#c75050}
.pl-remove-btn svg{width:16px;height:16px}

/* Empty state */
.pl-empty{
  text-align:center;padding:48px 20px;
  color:#a89e94;font-size:14px;
}
.pl-empty-hint{
  font-size:12px;color:#c8c0b8;
  margin-top:8px;line-height:1.6;
}

/* Drawer footer */
.pl-drawer-footer{
  flex-shrink:0;padding:12px 20px 16px;
  border-top:1px solid rgba(180,170,150,.1);
}
.pl-play-all{
  width:100%;height:44px;
  background:#2d2926;color:#f5f1ea;
  border:none;font-size:14px;font-weight:600;
  font-family:"Inter","Noto Sans SC",sans-serif;
  letter-spacing:.3px;cursor:pointer;
  border-radius:2px;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.pl-play-all:active{background:#4a4540}

/* ── 播放栏列表按钮（单曲页） ── */
.pbar-btn.playlist-btn{position:relative}
.pbar-btn.playlist-btn .playlist-badge{
  position:absolute;top:-2px;right:-4px;
  min-width:16px;height:16px;
  background:#c9b97a;color:#1a1715;
  font-size:10px;font-weight:700;
  font-family:"Inter",sans-serif;
  border-radius:2px;
  display:none;align-items:center;justify-content:center;
  padding:0 3px;line-height:1;
}
.pbar-btn.playlist-btn .playlist-badge.visible{display:flex}

/* ── 列表页：卡片播放列表按钮 ── */
.card-add-pl{
  display:flex;align-items:center;gap:6px;
  margin-top:10px;padding:8px 0;
  border:none;background:none;
  border-top:1px solid rgba(180,170,150,.1);
  width:100%;cursor:pointer;
  color:#a89e94;
  font-family:"Inter","Noto Sans SC",sans-serif;
  font-size:13px;font-weight:400;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s;
}
.card-add-pl:active{color:#6b6560}
.card-add-pl svg{width:16px;height:16px;flex-shrink:0}
.card-add-pl .card-pl-icon-check{display:none}
.card-add-pl.added{color:#c9b97a;font-weight:500}
.card-add-pl.added .card-pl-icon-add{display:none}
.card-add-pl.added .card-pl-icon-check{display:block}

/* ── Toast ── */
.pl-toast{
  position:fixed;bottom:80px;left:50%;
  transform:translateX(-50%) translateY(16px);
  background:rgba(26,23,21,.92);color:#f5f1ea;
  font-size:13px;padding:10px 20px;
  font-family:"Inter","Noto Sans SC",sans-serif;
  border-radius:2px;z-index:10001;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s cubic-bezier(.32,.72,0,1);
  max-width:calc(100vw - 40px);text-align:center;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.pl-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ── 响应式 ── */
@media(max-width:640px){
  .pl-minibar-inner{height:52px;padding:0 10px}
  .pl-minibar-thumb{width:36px;height:36px}
  .pl-drawer{max-height:88vh}
  .pl-header{padding:8px 16px 12px}
  .pl-item{padding:10px 16px;gap:10px}
  .pl-item-thumb{width:40px;height:40px}
  /* 手机端隐藏排序箭头——用户主要在列表页按顺序添加 */
  .pl-sort-btns{display:none}
  .pl-drawer-footer{padding:10px 16px 14px}
}