/* 详情 / 播放页、播放器、播放列表 */
/* ================= 详情 / 播放页 ================= */
.detail{position:fixed;inset:0;z-index:80;background:var(--bg);animation:fade .18s ease}
.detail-scroll{position:absolute;inset:0;overflow-y:auto}
.detail-wrap{max-width:var(--page-max);margin:0 auto;padding:18px var(--side) 60px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px 0 12px;border-radius:999px;
  border:1px solid var(--line);background:#14171c;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;
}
.back-btn:hover{border-color:var(--line-2)}
.back-btn svg{width:17px;height:17px}
.tipbar{
  display:flex;gap:8px;align-items:center;margin-top:16px;padding:10px 14px;border-radius:10px;
  background:rgba(243,178,63,.1);border:1px solid rgba(243,178,63,.3);color:#e9c98b;font-size:13px;line-height:1.6;
}
.tipbar svg{width:16px;height:16px;flex:none;color:var(--accent)}
.tipbar b{font-weight:650}
.play-row{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;margin-top:18px}

/* 播放器 */
.vp{
  position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;
  user-select:none;outline:none;box-shadow:0 20px 50px -24px rgba(0,0,0,.8);color:#fff;
}
.vp video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vp.wide{position:fixed;inset:0;z-index:200;border-radius:0;aspect-ratio:auto}
.vp:fullscreen{border-radius:0;aspect-ratio:auto}
body.vp-wide{overflow:hidden}
.vp-cover{position:absolute;inset:0;z-index:2;display:grid;place-items:center;cursor:pointer;background:#000;overflow:hidden}
.vp-cover-bg{position:absolute;inset:-8%;background:center/cover no-repeat;filter:blur(30px) brightness(.42) saturate(120%)}
.vp-cover-title{
  position:absolute;left:24px;right:24px;bottom:96px;font-size:20px;font-weight:650;
  text-shadow:0 2px 8px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vp-cover-title small{display:block;font-size:13px;font-weight:500;opacity:.7;margin-top:4px}
.vp-big{
  position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);background:rgba(10,11,13,.5);color:#fff;padding:0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .15s, background .15s, color .15s;
}
.vp-big:hover{transform:scale(1.06);background:var(--accent);color:#1a1205;border-color:var(--accent)}
.vp-big svg{width:30px;height:30px;margin-left:4px}
.vp-top{
  position:absolute;left:0;right:0;top:0;z-index:3;padding:14px 18px 34px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);font-size:15px;font-weight:600;
  opacity:0;transition:opacity .25s;
}
.vp:fullscreen .vp-top,.vp.wide .vp-top{opacity:1}
.vp-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:28px 14px 8px;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));transition:opacity .25s;
}
.vp.idle{cursor:none}
.vp.idle .vp-bar,.vp.idle .vp-top{opacity:0;pointer-events:none}
.vp-progress{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.vp-rail{position:relative;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.22);transition:height .12s}
.vp-progress:hover .vp-rail,.vp-progress.drag .vp-rail{height:6px}
.vp-buf,.vp-played{position:absolute;left:0;top:0;bottom:0;border-radius:2px;width:0}
.vp-buf{background:rgba(255,255,255,.32)}
.vp-played{background:var(--accent)}
.vp-played i{
  position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(243,178,63,.35);transform:scale(0);transition:transform .12s;
}
.vp-progress:hover .vp-played i,.vp-progress.drag .vp-played i{transform:scale(1)}
.vp-tip{
  position:absolute;bottom:20px;transform:translateX(-50%);padding:3px 7px;border-radius:5px;
  background:rgba(0,0,0,.85);font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;
}
.vp-ctrls{display:flex;align-items:center;gap:2px;margin-top:4px}
.vb{
  width:40px;height:40px;border:0;border-radius:8px;background:none;color:#fff;display:grid;place-items:center;
  cursor:pointer;flex:none;opacity:.92;padding:0;
}
.vb:hover{background:rgba(255,255,255,.12);opacity:1}
.vb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vb[disabled]{opacity:.28;cursor:default;background:none}
.vb svg{width:23px;height:23px}
.vp-vol{display:flex;align-items:center}
.vp-vol input{width:0;opacity:0;margin:0;transition:width .2s, opacity .2s, margin .2s;accent-color:var(--accent);cursor:pointer}
.vp-vol:hover input,.vp-vol input:focus-visible{width:84px;opacity:1;margin:0 6px 0 2px}
.vp-time{font-size:14px;margin-left:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-sp{flex:1}
.vp-set{position:relative}
.vp-menu{
  position:absolute;right:-6px;bottom:48px;width:280px;padding:6px;border-radius:12px;z-index:5;
  background:rgba(22,24,29,.97);border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.vm-row{padding:8px 8px 10px}
.vm-row + .vm-row{border-top:1px solid rgba(255,255,255,.08)}
.vm-label{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:9px}
.vm-label svg{width:19px;height:19px}
.vm-label span{margin-left:auto;color:rgba(255,255,255,.55);font-size:12.5px}
.vm-opts{display:flex;flex-wrap:wrap;gap:6px}
.vm-opts button{
  height:28px;padding:0 10px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:#e9eaec;font-size:12.5px;cursor:pointer;
}
.vm-opts button:hover{border-color:rgba(255,255,255,.34)}
.vm-opts button[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:#1a1205;font-weight:650}
.vp-spin{
  position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;z-index:2;
  border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:rotate .8s linear infinite;pointer-events:none;
}
.vp-msg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,86%);z-index:4;text-align:center;
  font-size:13.5px;line-height:1.7;color:#f2cd85;background:rgba(20,16,8,.92);border:1px solid rgba(243,178,63,.3);
  padding:12px 16px;border-radius:12px;
}
.vp-msg:empty{display:none}

/* 播放列表（深色面板，与播放器同高） */
.detail .pl{position:relative;min-height:320px;border-radius:12px;background:#1b1d22;color:#e9eaec;overflow:hidden}
.pl-in{position:absolute;inset:0;display:flex;flex-direction:column}
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.pl-head h3{margin:0;font-size:18px;font-weight:700}
.pl-mag{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:8px;
  background:var(--accent);color:#1a1205;font-weight:650;font-size:13.5px;cursor:pointer;
}
.pl-mag:hover{filter:brightness(1.08)}
.pl-mag svg{width:15px;height:15px;transform:rotate(45deg)}
.pl-now{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;color:rgba(255,255,255,.6)}
.pl-now svg{width:12px;height:12px;color:#3ccf6e;flex:none}
.pl-now b{color:#3ccf6e;font-weight:650}
.pl-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 10px;font-size:14.5px;font-weight:600}
.pl-sort{
  display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:7px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e9eaec;font-size:12.5px;
}
.pl-sort svg{width:13px;height:13px}
.pl-sort[aria-pressed="true"]{border-color:rgba(243,178,63,.6);color:var(--accent-2)}
.detail .pl .season-tabs{padding:0 18px 10px;gap:6px}
.detail .pl .season-tabs:empty{display:none}
.detail .pl .season-tab{height:28px;padding:0 10px;font-size:12.5px;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.detail .pl .season-tab.active{background:rgba(243,178,63,.14);border-color:rgba(243,178,63,.5);color:var(--accent-2)}
.detail .pl .ep-grid{
  flex:1;overflow-y:auto;padding:2px 18px 18px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px;align-content:start;
}
.detail .pl .ep-tile{min-height:54px;padding:8px 10px 10px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:#e9eaec}
.detail .pl .ep-tile:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.detail .pl .ep-tile .ep-num{font-size:14px}
.detail .pl .ep-tile .ep-sub{color:rgba(255,255,255,.45)}
.detail .pl .ep-tile.is-last{background:rgba(243,178,63,.08);border-color:rgba(243,178,63,.45)}
.detail .pl .ep-tile.is-current{background:#b8323f;border-color:#b8323f;color:#fff}
.detail .pl .ep-tile.is-current .ep-num{color:#fff}
.detail .pl .ep-tile.is-current .ep-sub{color:rgba(255,255,255,.78)}
.detail .pl .ep-tile.is-current .ep-done{color:#fff}