/* ============================================================
 * 主题变量 · 浅色（默认）
 * ============================================================ */
:root{
  --brand:#00aeec;
  --bg:#f6f7f8;
  --surface:#ffffff;
  --surface-2:#f1f2f3;
  --text:#18191c;
  --text-2:#61666d;
  --text-3:#9499a0;
  --border:#e3e5e7;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --radius:10px;
  --topbar-h:60px;
  --stage-bg:#000;
}

/* ============================================================
 * 主题变量 · 深色
 * ============================================================ */
html[data-theme="dark"]{
  --bg:#0f0f0f;
  --surface:#181818;
  --surface-2:#222222;
  --text:#f1f2f3;
  --text-2:#a2a7ae;
  --text-3:#6d7278;
  --border:#2a2a2a;
  --shadow:0 6px 24px rgba(0,0,0,.6);
}

/* ============================================================
 * 基础
 * ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ min-height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  font-size:14px;
  transition:background .25s, color .25s;
  overflow-x:hidden;
}
[hidden]{ display:none !important; }
button, input, select{ font-family:inherit; font-size:inherit; color:inherit; outline:none; }
button{ cursor:pointer; border:0; background:none; }

/* ============================================================
 * 吸顶区
 * ============================================================ */
.sticky-head{
  position:sticky; top:0; z-index:30;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:background .25s, border-color .25s;
}

.topbar{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(12px, 3vw, 32px);
  max-width:1600px; margin:0 auto;
}

.logo{
  display:flex; align-items:center; gap:8px;
  font-size:18px; font-weight:800; letter-spacing:.3px;
  flex:none; user-select:none;
}
.logo-mark{
  width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),#0088cc);
  color:#fff; font-size:13px;
  box-shadow:0 4px 12px rgba(0,174,236,.35);
}
.logo-text{ color:var(--text); transition:color .25s; }
.logo-text b{ color:var(--brand); }

.search{
  flex:1; max-width:520px;
  display:flex; align-items:center;
  height:38px;
  background:var(--surface-2);
  border:1px solid transparent;
  border-radius:999px;
  padding:0 4px 0 16px;
  transition:border-color .2s, background .2s;
}
.search:focus-within{
  border-color:var(--brand);
  background:var(--surface);
}
.search input{
  flex:1; min-width:0; height:100%;
  background:none; border:0;
  color:var(--text);
}
.search input::placeholder{ color:var(--text-3); }
.search button{
  width:44px; height:30px; border-radius:999px;
  display:grid; place-items:center;
  font-size:15px; color:var(--text-2);
  transition:background .2s, color .2s;
}
.search button:hover{ background:var(--brand); color:#fff; }

.tools{
  margin-left:auto; flex:none;
  display:flex; align-items:center; gap:10px;
}
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  font-size:17px;
  background:var(--surface-2);
  transition:background .2s, transform .15s;
}
.icon-btn:hover{ background:var(--border); }
.icon-btn:active{ transform:scale(.9); }

.cats{
  display:flex; gap:6px;
  overflow-x:auto; scrollbar-width:none;
  padding:0 clamp(12px, 3vw, 32px) 10px;
  max-width:1600px; margin:0 auto;
}
.cats::-webkit-scrollbar{ display:none; }
.cat{
  flex:none;
  padding:7px 15px; border-radius:999px;
  font-size:13.5px; color:var(--text-2);
  white-space:nowrap;
  transition:background .2s, color .2s;
}
.cat:hover{ background:var(--surface-2); color:var(--text); }
.cat.active{
  background:var(--brand); color:#fff;
  box-shadow:0 4px 12px rgba(0,174,236,.3);
}

/* ============================================================
 * 视频网格
 * ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:20px 16px;
  padding:20px clamp(12px, 3vw, 32px) 60px;
  max-width:1600px; margin:0 auto;
}
.card{
  cursor:pointer;
  border-radius:var(--radius);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.card:hover{ transform:translateY(-5px); }
.card-thumb{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  display:grid; place-items:center;
  font-size:46px;
  box-shadow:var(--shadow);
}
.card-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 60%);
}
.card-emoji{
  position:relative; z-index:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
.card-duration{
  position:absolute; right:7px; bottom:7px; z-index:2;
  padding:2px 6px; border-radius:4px;
  font-size:11.5px; font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.75); color:#fff;
}
.card-title{
  margin:10px 0 6px;
  font-size:14px; font-weight:500; line-height:1.45;
  color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .25s;
}
.card-sub{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-3);
}
.empty{
  padding:90px 20px; text-align:center;
  color:var(--text-3); font-size:14px;
}

/* ============================================================
 * 播放器覆盖层
 * ============================================================ */
.player{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:flex; flex-direction:column;
  overflow-y:auto;
  animation:fadeIn .2s ease;
  transition:background .25s;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.player-head{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:16px;
  min-height:68px;
  padding:14px clamp(16px, 3vw, 32px);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  transition:background .25s, border-color .25s;
}
.player-title{
  flex:1; min-width:0;
  font-size:15px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.player-body{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:24px;
  width:100%; max-width:1600px;
  margin:0 auto;
  padding:20px clamp(12px, 3vw, 32px) 60px;
  align-items:start;
}

/* ---------- 舞台 ---------- */
.stage{
  position:relative;
  aspect-ratio:16/9;
  background:var(--stage-bg);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.stage video{
  width:100%; height:100%;
  object-fit:contain;
  background:var(--stage-bg);
  display:block;
}

/* ---------- 媒体元素通用 ---------- */
.stage .media-el{
  width:100%; height:100%;
  object-fit:contain;
  background:var(--stage-bg);
  display:block;
}
.stage .media-el[hidden]{ display:none; }

/* ---------- 暂停按钮 ---------- */
.stage-center{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.85);
  width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center;
  font-size:24px; color:#fff; padding-left:4px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
  opacity:0; transition:opacity .2s, transform .2s;
  z-index:5;
}
.stage.paused .stage-center{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ============================================================
 * 音频可视化（层级：0，不响应鼠标）
 * ============================================================ */
.audio-viz{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, #1e1e2f 0%, #000 70%);
  z-index:0;
  pointer-events:none;
}
.audio-viz[hidden]{ display:none; }

.audio-disc{
  width:min(45%, 260px); aspect-ratio:1;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:clamp(40px, 8vw, 70px);
  background:conic-gradient(from 0deg, #fe2c55, #8a2be2, #00aeec, #fe2c55);
  box-shadow:
    0 0 60px rgba(254,44,85,.55),
    inset 0 0 40px rgba(0,0,0,.5);
  animation:audioSpin 12s linear infinite;
  animation-play-state:paused;
}
.stage:not(.paused) .audio-disc{ animation-play-state:running; }
@keyframes audioSpin { to { transform:rotate(360deg); } }

/* ============================================================
 * 控制条（z-index 最高，保证音频模式下也盖在可视化之上）
 * ============================================================ */
.controls{
  position:absolute; left:0; right:0; bottom:0;
  z-index:10;
  padding:44px 14px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.78));
  opacity:0;
  transition:opacity .22s;
}
.stage:hover .controls,
.stage.show-controls .controls,
.stage.paused .controls{ opacity:1; }

/* ---------- 音频模式：控制条常显 ---------- */
.stage[data-type="audio"] .controls{
  opacity:1;
}

/* ---------- 图片模式：隐藏暂停按钮与进度、时间、音量、倍速 ---------- */
.stage[data-type="image"] .stage-center{ display:none; }
.stage[data-type="image"] .progress{ display:none; }
.stage[data-type="image"] .time,
.stage[data-type="image"] .volume,
.stage[data-type="image"] .speed-sel{ display:none; }

/* ---------- 视频 / 音频：明确显示进度条 ---------- */
.stage[data-type="video"] .progress,
.stage[data-type="audio"] .progress{ display:flex; }

/* ============================================================
 * 进度条
 * ============================================================ */
.progress{
  position:relative;
  height:16px;
  display:flex; align-items:center;
  cursor:pointer;
  touch-action:none;
}
.progress-track{
  position:relative;
  width:100%; height:4px; border-radius:999px;
  background:rgba(255,255,255,.28);
  transition:height .15s;
}
.progress:hover .progress-track{ height:6px; }
.progress-buffer{
  position:absolute; left:0; top:0; bottom:0;
  width:0; border-radius:999px;
  background:rgba(255,255,255,.35);
}
.progress-played{
  position:absolute; left:0; top:0; bottom:0;
  width:0; border-radius:999px;
  background:var(--brand);
}
.progress-knob{
  position:absolute; top:50%; left:0;
  width:12px; height:12px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%) scale(0);
  transition:transform .15s;
  box-shadow:0 1px 6px rgba(0,0,0,.5);
}
.progress:hover .progress-knob{ transform:translate(-50%,-50%) scale(1); }

/* ============================================================
 * 控制栏
 * ============================================================ */
.controls-row{
  display:flex; align-items:center; gap:12px;
  margin-top:6px;
  color:#fff;
}
.ctrl-btn{
  width:34px; height:34px; border-radius:8px;
  display:grid; place-items:center;
  font-size:15px; color:#fff;
  transition:background .18s;
}
.ctrl-btn:hover{ background:rgba(255,255,255,.16); }
.time{
  font-size:12.5px; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.9);
  white-space:nowrap;
}
.spacer{ flex:1; }

.volume{ display:flex; align-items:center; gap:6px; }
.volume input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:70px; height:4px; border-radius:999px;
  background:rgba(255,255,255,.35);
  cursor:pointer;
}
.volume input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; border-radius:50%;
  background:#fff;
}
.volume input[type=range]::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%;
  background:#fff; border:0;
}

.speed-sel{
  height:30px; padding:0 6px;
  border-radius:8px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:12.5px;
  cursor:pointer;
}
.speed-sel option{ color:#111; }

/* ============================================================
 * 播放器下方信息
 * ============================================================ */
.player-meta{ padding:18px 2px 0; }
.player-meta h1{
  font-size:19px; font-weight:700; line-height:1.45;
  margin-bottom:10px;
  color:var(--text);
}
.meta-sub{
  display:flex; flex-wrap:wrap; gap:8px 14px;
  font-size:13px; color:var(--text-3);
}
.meta-sub span{ display:inline-flex; align-items:center; gap:4px; }
.meta-sub .tag{
  padding:2px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--brand);
  font-weight:600;
}

/* ============================================================
 * 相关推荐
 * ============================================================ */
.player-side h3{
  font-size:15px; font-weight:700;
  margin-bottom:14px;
  padding-left:2px;
}
.rel-item{
  display:grid;
  grid-template-columns:118px 1fr;
  gap:10px;
  padding:8px; border-radius:var(--radius);
  cursor:pointer;
  transition:background .18s;
}
.rel-item:hover{ background:var(--surface-2); }
.rel-thumb{
  position:relative;
  aspect-ratio:16/9;
  border-radius:8px; overflow:hidden;
  display:grid; place-items:center;
  font-size:24px;
}
.rel-thumb .rel-dur{
  position:absolute; right:5px; bottom:5px;
  padding:1px 5px; border-radius:4px;
  font-size:10.5px; background:rgba(0,0,0,.75); color:#fff;
}
.rel-info{
  min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.rel-title{
  font-size:13px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.rel-sub{ font-size:11.5px; color:var(--text-3); }

/* ============================================================
 * 遗留角标：如果之前 HTML 里输出过 .card-type / .rel-type，隐藏掉
 * ============================================================ */
.card-type,
.rel-type{ display:none !important; }

/* ============================================================
 * 响应式
 * ============================================================ */
@media (max-width: 980px){
  .player-body{ grid-template-columns:1fr; }
  .player-side{ margin-top:10px; }
}
@media (max-width: 720px){
  :root{ --topbar-h:56px; }
  .logo-text{ display:none; }
  .search{ max-width:none; }
  .grid{
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:16px 10px;
  }
  .card-thumb{ font-size:36px; }
  .card-title{ font-size:13px; }
  .player-meta h1{ font-size:16px; }
  .volume input[type=range]{ width:48px; }
  .rel-item{ grid-template-columns:96px 1fr; }
}
.toast{
  position:fixed; left:50%; z-index:9999;
  bottom:48px;
  transform:translate(-50%, 12px);
  padding:10px 20px; border-radius:999px;
  font-size:13.5px; white-space:nowrap;
  color:#fff;
  background:rgba(0,0,0,.82);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
html[data-theme="dark"] .toast{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.2);
}
/* ============================================================
 * 分享按钮
 * ============================================================ */
.btn-share{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 16px;
  border-radius:999px;
  font-size:13.5px; font-weight:600;
  color:#fff;
  background:linear-gradient(135deg, var(--brand), #0088cc);
  border:0;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s, filter .2s, box-shadow .2s;
  box-shadow:0 4px 12px rgba(0,174,236,.35);
}
.btn-share:hover{
  filter:brightness(1.08);
  box-shadow:0 6px 16px rgba(0,174,236,.45);
}
.btn-share:active{
  transform:scale(.94);
}
.btn-share:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

/* 播放器头部内布局微调：标题占满，按钮固定在右侧 */
.player-head .player-title{ flex:1; min-width:0; }
.player-head .btn-share{ flex:none; }

/* 移动端小一点 */
@media (max-width: 720px){
  .btn-share{
    height:32px; padding:0 12px; font-size:12.5px;
  }
}
/* ============================================================
 * 播放器下方简介
 * ============================================================ */
.player-meta .meta-desc{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-2);
  white-space:pre-wrap;
  word-break:break-word;
}
html[data-theme="dark"] .player-meta .meta-desc{
  color:var(--text-2);
}

@media (max-width: 720px){
  .player-meta .meta-desc{
    font-size:13px;
    line-height:1.65;
    margin-top:10px;
  }
}
body {
            user-select: none; /* 禁止文本选中 */
            -webkit-user-select: none; /* Safari/Chrome */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE/Edge */
        }