/* ==========================================================================
   前台播放器 — 设计令牌 + 组件
   深色主题 / 移动端优先 / iOS 安全区适配
   ========================================================================== */

:root{
  color-scheme: dark;

  /* 表面层级 */
  --bg:          #07080b;
  --surface-1:   #0e1015;
  --surface-2:   #14171e;
  --surface-3:   #1c2029;
  --surface-4:   #252a35;

  /* 描边 */
  --border:      #23262f;
  --border-soft: #191c23;

  /* 文字层级 */
  --text:        #f3f5f9;
  --text-2:      #a4adbd;
  --text-3:      #6d7686;

  /* 品牌色 */
  --brand:       #6366f1;
  --brand-2:     #a855f7;
  --brand-soft:  rgba(99,102,241,.14);
  --grad:        linear-gradient(135deg, var(--brand), var(--brand-2));

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* 阴影 */
  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 4px 16px rgba(0,0,0,.36);
  --sh-3: 0 18px 48px rgba(0,0,0,.5);
  --sh-brand: 0 6px 20px rgba(99,102,241,.34);

  /* 动效 */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .15s var(--ease);
  --t: .22s var(--ease);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --player-h: 76px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* hidden 属性必须能压过组件自己的 display，否则抽屉、图标会一直显示 */
[hidden]{display:none !important}
html,body{margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  padding-bottom:calc(var(--player-h) + var(--safe-b) + 16px);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
  letter-spacing:.005em;
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#333947}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
button:focus:not(:focus-visible){outline:none}

.ico{width:22px;height:22px;fill:currentColor;display:block;flex:0 0 auto}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   顶栏
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(7,8,11,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border-soft);
  padding:calc(var(--safe-t) + 12px) 16px 12px;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.brand-dot{
  width:30px;height:30px;border-radius:9px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:var(--sh-brand);flex:0 0 auto;
}
.brand-name{
  font-size:17px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-box{position:relative;display:flex;align-items:center}
.search-box .ico{
  position:absolute;left:13px;width:17px;height:17px;fill:var(--text-3);
  pointer-events:none;transition:fill var(--t-fast);
}
.search-box:focus-within .ico{fill:var(--brand)}
#search{
  width:100%;padding:11px 14px 11px 38px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:16px; /* 16px 防止 iOS 聚焦时页面缩放 */
  font-family:inherit;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
#search::placeholder{color:var(--text-3)}
#search:focus{
  outline:none;border-color:var(--brand);background:var(--surface-1);
  box-shadow:0 0 0 3px var(--brand-soft);
}
#search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ==========================================================================
   分类
   ========================================================================== */
.cats{
  display:flex;gap:8px;overflow-x:auto;padding:14px 16px 2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.cats::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:7px 15px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-2);font-size:13px;font-weight:500;
  white-space:nowrap;cursor:pointer;scroll-snap-align:start;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  user-select:none;
}
.chip:hover{background:var(--surface-3);color:var(--text)}
.chip:active{transform:scale(.96)}
.chip.on{
  background:var(--grad);border-color:transparent;color:#fff;font-weight:600;
  box-shadow:var(--sh-brand);
}
.chip b{font-weight:400;opacity:.6;margin-left:5px;font-size:11px;font-variant-numeric:tabular-nums}

/* ==========================================================================
   列表头
   ========================================================================== */
.listhead{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.btn-play-all{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--grad);color:#fff;border:0;
  border-radius:var(--r-full);padding:9px 18px;
  font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  box-shadow:var(--sh-brand);
  transition:transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn-play-all:hover{filter:brightness(1.08);box-shadow:0 8px 26px rgba(99,102,241,.44)}
.btn-play-all:active{transform:scale(.96)}
.btn-play-all .ico{width:17px;height:17px}
.sortbox{position:relative}
.sortbox::after{
  content:'';position:absolute;right:11px;top:50%;width:5px;height:5px;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.sortbox select{
  background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 26px 8px 11px;font-size:13px;font-family:inherit;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  transition:border-color var(--t-fast), color var(--t-fast);
}
.sortbox select:hover{color:var(--text);border-color:var(--surface-4)}
.sortbox select:focus{outline:none;border-color:var(--brand)}
.count{
  margin-left:auto;color:var(--text-3);font-size:12px;
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}

/* ==========================================================================
   曲目列表
   ========================================================================== */
.list{padding:4px 8px 0}
.item{
  display:flex;align-items:center;gap:12px;
  padding:9px 8px;border-radius:var(--r-md);cursor:pointer;
  transition:background var(--t-fast);
  position:relative;
}
.item:hover{background:var(--surface-1)}
.item:active{background:var(--surface-2)}
.item.on{background:var(--surface-2)}
.item.on::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--grad);
}
.idx{
  width:26px;text-align:center;color:var(--text-3);
  font-size:12px;font-variant-numeric:tabular-nums;flex:0 0 26px;
  display:flex;align-items:center;justify-content:center;
}
.item.on .idx{color:var(--brand)}
.cover{
  width:46px;height:46px;border-radius:10px;flex:0 0 46px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);font-size:17px;
  overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), var(--sh-1);
}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.meta{min-width:0;flex:1}
.t{
  font-size:15px;font-weight:500;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.item.on .t{color:#c7d2fe;font-weight:600}
.s{
  font-size:12.5px;color:var(--text-3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dur{
  color:var(--text-3);font-size:12px;
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}

/* 正在播放的跳动条 */
.bars{display:flex;align-items:flex-end;gap:2px;height:15px;width:15px;flex:0 0 15px}
/* 给个基础高度：动画被系统「减弱动效」关掉时也要看得见 */
.bars i{width:3px;height:7px;border-radius:2px;background:var(--brand);animation:bar .95s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.28s}
.bars i:nth-child(3){animation-delay:.55s}
@keyframes bar{0%,100%{height:4px;opacity:.65}50%{height:15px;opacity:1}}

/* 骨架屏 */
.skel{display:flex;align-items:center;gap:12px;padding:9px 8px}
.skel-box{
  background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-3) 37%,var(--surface-1) 63%);
  background-size:400% 100%;
  animation:shimmer 1.3s ease-in-out infinite;
  border-radius:6px;
}
.skel .sk-cover{width:46px;height:46px;border-radius:10px;flex:0 0 46px}
.skel .sk-lines{flex:1;display:flex;flex-direction:column;gap:7px}
.skel .sk-l1{height:12px;width:52%}
.skel .sk-l2{height:10px;width:32%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

.empty{
  text-align:center;color:var(--text-3);padding:70px 24px;font-size:14px;
}
.empty-ico{font-size:38px;display:block;margin-bottom:12px;opacity:.35}

/* ==========================================================================
   底部播放条
   ========================================================================== */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(14,16,21,.9);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid var(--border-soft);
  padding-bottom:var(--safe-b);
  box-shadow:0 -8px 32px rgba(0,0,0,.34);
}
.seek{padding:0 14px;margin-top:-8px}
.range{
  width:100%;height:16px;background:transparent;display:block;margin:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.range::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;
  background:linear-gradient(to right, var(--brand) var(--pct,0%), var(--surface-4) var(--pct,0%));
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;background:#fff;
  margin-top:-4px;box-shadow:0 1px 4px rgba(0,0,0,.5);
  transition:transform var(--t-fast);
}
.range:hover::-webkit-slider-thumb,
.range:active::-webkit-slider-thumb{transform:scale(1.25)}
.range::-moz-range-track{height:4px;border-radius:99px;background:var(--surface-4)}
.range::-moz-range-progress{height:4px;border-radius:99px;background:var(--brand)}
.range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}

.pl-main{display:flex;align-items:center;gap:12px;padding:2px 14px 10px}
.pl-tap{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  cursor:pointer;border-radius:var(--r-sm);
  transition:opacity var(--t-fast);
}
.pl-tap:active{opacity:.65}
.pl-cover{
  width:44px;height:44px;border-radius:10px;flex:0 0 44px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), var(--sh-1);
}
.pl-cover img{width:100%;height:100%;object-fit:cover}
.pl-info{min-width:0;flex:1}
.pl-title{
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-sub{display:flex;gap:8px;font-size:11.5px;color:var(--text-3);margin-top:2px}
.pl-sub span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-time{margin-left:auto;flex:0 0 auto;font-variant-numeric:tabular-nums}
.pl-ctrl{display:flex;align-items:center;gap:2px;flex:0 0 auto}

/* 底部条的音量控件只在宽屏出现：桌面用户多半停在列表页、不会打开全屏播放页，
   而窄屏再塞一个控件就和右侧 5 个按钮挤在一起了 */
.pl-vol{display:none;align-items:center;gap:2px;margin-right:6px}
.pl-vol .range{width:76px;flex:0 0 76px;height:16px}
@media (min-width:760px){
  .pl-vol{display:flex}
}

.ctrl{
  background:none;border:0;color:var(--text);padding:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.ctrl:hover{background:rgba(255,255,255,.07)}
.ctrl:active{transform:scale(.9)}
.ctrl.small{color:var(--text-3)}
.ctrl.small .ico{width:19px;height:19px}
.ctrl.small:hover{color:var(--text)}
.ctrl.small.on{color:var(--brand)}
.ctrl.main{
  background:var(--grad);color:#fff;width:42px;height:42px;padding:0;margin:0 3px;
  box-shadow:var(--sh-brand);
}
.ctrl.main:hover{filter:brightness(1.1);background:var(--grad)}

/* ==========================================================================
   全屏播放页
   ========================================================================== */
.np{
  position:fixed;inset:0;z-index:70;
  display:flex;flex-direction:column;
  background:var(--bg);
  padding:calc(var(--safe-t) + 8px) 22px calc(var(--safe-b) + 22px);
  animation:npUp .3s var(--ease);
  overflow:hidden;
}
@keyframes npUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.np.closing{animation:npDown .24s var(--ease) forwards}
@keyframes npDown{to{transform:translateY(100%)}}

/* 用封面做模糊背景 */
.np-bg{
  position:absolute;inset:-25%;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(64px) saturate(160%);opacity:.45;
  transform:scale(1.1);
  transition:background-image var(--t);
}
.np-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(7,8,11,.55) 0%, rgba(7,8,11,.82) 55%, rgba(7,8,11,.96) 100%);
}
.np-inner{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}

.np-top{display:flex;align-items:center;gap:12px;margin-bottom:auto}
.np-top .ctrl{color:var(--text-2)}
.np-label{
  flex:1;text-align:center;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);font-weight:600;
}

.np-art{
  position:relative;
  width:100%;max-width:min(74vw, 320px);aspect-ratio:1/1;
  margin:0 auto;border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;cursor:pointer;
}
/* 封面本体单独一层：无封面时的渐变占位色由 JS 写在这一层的 style 上，
   唱片模式下外层要显示黑胶盘面，占位色不能盖住它 */
.np-art-face{
  position:relative;z-index:1;
  width:100%;height:100%;border-radius:inherit;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);font-size:64px;
  transition:width var(--t), height var(--t);
}
.np-art img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 唱片模式 ---------- */
.np-art.disc{
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #23262e 0 30%, #14161b 30% 70%, #1b1e25 70% 100%);
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.06);
  animation:discSpin 16s linear infinite;
  animation-play-state:paused;
}
/* 暂停时用 play-state 停住，而不是撤掉 animation，这样才能停在当前角度而非弹回 0° */
.np-art.disc.spin{animation-play-state:running;will-change:transform}
@keyframes discSpin{to{transform:rotate(360deg)}}

/* 黑胶纹理 */
.np-art.disc::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  pointer-events:none;z-index:2;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.045) 0 1px, rgba(0,0,0,0) 1px 4px);
}
/* 同心圆纹理 + 圆形标签 + 居中圆孔构成旋转对称图形，只有它们的话唱片转起来
   肉眼根本分辨不出（实测转 40° 画面只有 4% 的像素有可见变化）。
   叠一道跟着盘面一起转的非对称反光，转动才看得出来。
   conic-gradient 不支持时整条 background 会失效，所以用 @supports 兜住纹理。 */
@supports (background: conic-gradient(#000, #fff)){
  .np-art.disc::before{
    background:
      conic-gradient(from 0deg,
        rgba(255,255,255,.22) 0deg,
        rgba(0,0,0,.20)       62deg,
        rgba(255,255,255,.04) 122deg,
        rgba(255,255,255,.16) 184deg,
        rgba(0,0,0,.18)       246deg,
        rgba(255,255,255,.04) 306deg,
        rgba(255,255,255,.22) 360deg),
      repeating-radial-gradient(circle at 50% 50%,
        rgba(255,255,255,.045) 0 1px, rgba(0,0,0,0) 1px 4px);
  }
}
/* 中心孔 */
.np-art.disc::after{
  content:'';position:absolute;top:50%;left:50%;width:12%;height:12%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--bg);pointer-events:none;z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), inset 0 1px 3px rgba(0,0,0,.8);
}
.np-art.disc .np-art-face{
  width:62%;height:62%;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.45);
}
/* 盘心让给中心孔：无封面时的 ♪ 占位符摆在这里会被孔切成两半 */
.np-art.disc .np-art-face span{display:none}

/* 顶部那条全局的 prefers-reduced-motion 规则会把一圈 22s 压成 .01ms，
   唱片会变成高速抖动并吃满 CPU，这里必须整个关掉动画 */
@media (prefers-reduced-motion: reduce){
  .np-art.disc{animation:none !important}
}

.np-meta{margin:26px 0 0;text-align:center;padding:0 4px}
.np-title{
  font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.np-artist{
  font-size:14px;color:var(--text-2);margin-top:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.np-seek{margin:22px 0 0}
.np-seek .range{height:20px}
.np-seek .range::-webkit-slider-runnable-track{height:5px}
.np-seek .range::-webkit-slider-thumb{width:14px;height:14px;margin-top:-4.5px}
.np-times{
  display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--text-3);
  font-variant-numeric:tabular-nums;margin-top:2px;
}

/* auto 下边距放在外层：音量面板展开或收起都不会改变控制键的位置 */
.np-bottom{margin:22px 0 auto}
.np-ctrl{
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.np-ctrl .ctrl .ico{width:30px;height:30px}
.np-ctrl .ctrl.small .ico{width:21px;height:21px}
.np-ctrl .ctrl.main{width:66px;height:66px;margin:0 6px}
.np-ctrl .ctrl.main .ico{width:32px;height:32px}

/* ---------- 音量面板 ---------- */
.np-vol-wrap{margin-top:14px;animation:volIn .2s var(--ease)}
@keyframes volIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* 音量是次要控件：做得和进度条一样长，两根同款滑块上下叠着会互相抢视觉重心，
   所以这里收窄居中，轨道更细、用中性灰而非品牌紫 */
.np-vol{display:flex;align-items:center;gap:8px;max-width:196px;margin:0 auto}
.np-vol .range{flex:1;height:18px}
.np-vol .range::-webkit-slider-runnable-track{
  height:4px;
  background:linear-gradient(to right, var(--text-2) var(--pct,0%), var(--surface-4) var(--pct,0%));
}
.np-vol .range::-webkit-slider-thumb{width:11px;height:11px;margin-top:-3.5px}
.np-vol .range::-moz-range-track{height:4px}
.np-vol .range::-moz-range-progress{height:4px;background:var(--text-2)}
.np-vol .range::-moz-range-thumb{width:11px;height:11px}
.np-vol-off{display:block;margin:8px auto 0}
.np-vol-tip{font-size:12px;color:var(--text-3);line-height:1.65;text-align:center;padding:0 4px}
.np-vol-link{
  background:none;border:0;color:var(--brand);font-family:inherit;font-size:12px;
  font-weight:500;cursor:pointer;padding:3px 5px;border-radius:var(--r-sm);white-space:nowrap;
  transition:background var(--t-fast);
}
.np-vol-link:hover{background:var(--brand-soft)}

/* ==========================================================================
   播放队列
   ========================================================================== */
.queue-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:fade .2s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.queue{
  position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:74vh;
  background:var(--surface-1);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;
  padding-bottom:var(--safe-b);
  box-shadow:var(--sh-3);
  animation:npUp .26s var(--ease);
}
.queue::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:38px;height:4px;border-radius:99px;background:var(--surface-4);
}
.queue-head{
  display:flex;align-items:center;gap:10px;
  padding:22px 18px 14px;border-bottom:1px solid var(--border-soft);
}
.queue-head strong{font-size:15px;font-weight:650}
.queue-head span{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}
.queue-head button{
  margin-left:auto;background:none;border:0;color:var(--brand);
  font-size:14px;font-family:inherit;cursor:pointer;padding:4px 6px;border-radius:var(--r-sm);
}
.queue-head button:hover{background:var(--brand-soft)}
.queue-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 10px 18px}

/* ==========================================================================
   轻提示
   ========================================================================== */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--player-h) + var(--safe-b) + 22px);
  background:rgba(28,32,41,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:#fff;padding:10px 18px;border-radius:var(--r-full);
  font-size:13px;font-weight:500;z-index:99;pointer-events:none;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--sh-2);
  transition:opacity var(--t), transform var(--t);
}

/* ==========================================================================
   访问口令页
   ========================================================================== */
.gate-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:24px;background:
    radial-gradient(1000px 620px at 50% -10%, rgba(99,102,241,.2), transparent 62%),
    var(--bg);
}
.gate{width:100%;max-width:340px;text-align:center}
.gate-logo{
  width:62px;height:62px;margin:0 auto 16px;border-radius:18px;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  font-size:29px;box-shadow:var(--sh-brand);
}
.gate h1{font-size:20px;font-weight:700;margin:0 0 5px;letter-spacing:-.01em}
.gate-sub{color:var(--text-3);font-size:13px;margin:0 0 22px}
.gate input{
  width:100%;padding:13px 15px;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-size:16px;text-align:center;font-family:inherit;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.gate input::placeholder{color:var(--text-3)}
.gate input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.gate button{
  width:100%;margin-top:12px;padding:13px;border:0;border-radius:var(--r-md);
  background:var(--grad);color:#fff;font-size:16px;font-weight:600;
  font-family:inherit;cursor:pointer;box-shadow:var(--sh-brand);
  transition:filter var(--t-fast), transform var(--t-fast);
}
.gate button:hover{filter:brightness(1.08)}
.gate button:active{transform:scale(.985)}
.gate-err{
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.32);
  color:#fca5a5;padding:10px;border-radius:var(--r-sm);
  margin-bottom:14px;font-size:13px;
}

/* ==========================================================================
   宽屏
   ========================================================================== */
@media (min-width:760px){
  body{max-width:960px;margin:0 auto}
  .topbar{padding-top:calc(var(--safe-t) + 16px)}
  .brand{margin-bottom:14px}
  .brand-name{font-size:18px}
  .player{
    left:0;right:0;margin:0 auto;max-width:960px;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-left:1px solid var(--border-soft);border-right:1px solid var(--border-soft);
  }
  .queue{left:0;right:0;margin:0 auto;max-width:960px}
  .np{padding-left:0;padding-right:0}
  .np-inner{max-width:440px;margin:0 auto;width:100%;padding:0 24px}
  .item{padding:9px 10px}
  .list{padding:4px 10px 0}
}

@media (min-width:1000px){
  body{max-width:1040px}
  .player{max-width:1040px}
  .queue{max-width:1040px}
}