/* ===== 声波音频平台 · 高端深色主题 ===== */
:root {
  --bg: #070810;
  --bg2: #0d0f1d;
  --card: rgba(22, 24, 44, 0.55);
  --card-solid: #12142a;
  --line: rgba(255, 255, 255, 0.09);
  --txt: #eef0fa;
  --sub: #98a0bd;
  --accent: #8b5cf6;
  --accent2: #22d3ee;
  --accent3: #ff5ca8;
  --accent-soft: rgba(139, 92, 246, 0.16);
  --grad: linear-gradient(135deg, #8b5cf6 0%, #6d5cf6 45%, #22d3ee 100%);
  --grad-warm: linear-gradient(135deg, #8b5cf6 0%, #ff5ca8 100%);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --radius: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--txt);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* 背景极光光晕 */
body::before {
  content: "";
  position: fixed; inset: -20% -20% auto -20%; height: 70vh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 18% 20%, rgba(139, 92, 246, 0.35), transparent 70%),
    radial-gradient(45% 55% at 82% 8%, rgba(34, 211, 238, 0.25), transparent 70%),
    radial-gradient(40% 50% at 60% 60%, rgba(255, 92, 168, 0.18), transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(7, 8, 16, 0.85) 100%);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== 顶部导航（大气简约） ===== */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(8, 9, 18, 0.62);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid transparent;
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .5), rgba(34, 211, 238, .5), transparent);
}
.nav-inner {
  position: relative; max-width: 1120px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; letter-spacing: .3px; }
.brand .logo {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px;
  background: var(--grad); color: #fff;
  box-shadow: 0 6px 18px rgba(109, 92, 246, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.brand b {
  background: linear-gradient(100deg, #fff, #c4b5ff 45%, #67e8f9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand .logo-img { width: 36px; height: 36px; border-radius: 12px; object-fit: contain; display: block; background: rgba(255,255,255,.06); }
/* 后台 LOGO 预览 */
.brand-logo-row { display: flex; gap: 16px; align-items: flex-start; }
.brand-logo-prev { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--line); overflow: hidden; }
.brand-logo-prev .logo { box-shadow: none; }
.brand-logo-prev .logo-img { width: 100%; height: 100%; border-radius: 0; }
.tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1; justify-content: center; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { height: 0; }
.tab {
  position: relative; padding: 9px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
  color: var(--sub); border: 1px solid transparent; white-space: nowrap; transition: .22s; cursor: pointer;
}
.tab:hover { color: var(--txt); background: rgba(255, 255, 255, 0.05); }
.tab.active {
  color: #fff; background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3);
}
.tab.active::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--grad);
}
.admin-link {
  padding: 9px 18px; border-radius: 11px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); color: var(--sub); transition: .2s; white-space: nowrap;
}
.admin-link:hover { border-color: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(139, 92, 246, 0.25); }

/* ===== 左侧悬浮公告栏 ===== */
.announce {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  width: 268px; z-index: 25; padding: 20px 20px 20px 22px;
  background: rgba(18, 20, 40, 0.72); backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
  animation: annIn .55s cubic-bezier(.2, .8, .2, 1) both;
}
.announce::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 18px 0 0 18px; background: linear-gradient(180deg, #8b5cf6, #22d3ee);
}
@keyframes annIn { from { opacity: 0; transform: translateY(-50%) translateX(-18px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }
.announce-ico { font-size: 22px; margin-bottom: 10px; }
.announce-body { font-size: 14px; color: #e8eaf6; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.announce-close {
  position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, 0.06); color: var(--sub); font-size: 16px; line-height: 1; cursor: pointer; transition: .2s;
}
.announce-close:hover { background: rgba(255, 92, 168, 0.2); color: #fff; }
@media (max-width: 1024px) { .announce { display: none; } }

/* ===== 主体 ===== */
main { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 48px 24px 130px; }
.hero { margin-bottom: 34px; position: relative; }
.hero h1 {
  font-size: 44px; font-weight: 850; letter-spacing: -1px; line-height: 1.1;
  background: linear-gradient(100deg, #ffffff 0%, #d8c9ff 40%, #7df0ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p { color: var(--sub); margin-top: 14px; font-size: 16px; max-width: 560px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 6px 14px; border-radius: 20px; font-size: 12.5px; color: #c9bdf6;
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3);
}
.hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }

/* Hero 均衡器 */
.hero-viz { display: flex; align-items: flex-end; gap: 4px; height: 54px; margin-top: 26px; opacity: .85; }
.hero-viz .bar {
  flex: 1; max-width: 7px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  height: 12%; transform-origin: bottom;
  animation: eq 1.2s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
.hero-viz.live .bar { animation-duration: .55s; }
@keyframes eq { from { height: 8%; } to { height: var(--h, 70%); } }

/* 分类简介/关键词可见区块（hero 下方，分类列表页展示） */
.cat-tags { margin: 0 0 26px; }
.cat-tags-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.cat-tags-head .lbl {
  display: inline-flex; align-items: center; padding: 4px 13px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; color: #c9bdf6; letter-spacing: .4px;
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3);
}
.cat-tags-sub { font-size: 13px; color: var(--sub); }
.cat-tags-list { display: flex; flex-wrap: wrap; gap: 10px; }
/* 标签与下方三级分类导航（灰白矩形胶囊）做视觉区分：更小的圆角胶囊 + 青色文字 + “#”前缀 */
.cat-tags .chip {
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #7ee7f5;
  background: rgba(34, 211, 238, 0.07);
  border-color: rgba(34, 211, 238, 0.25);
  transition: .22s;
}
.cat-tags .chip::before {
  content: "#";
  opacity: .55;
  font-weight: 700;
}
.cat-tags .chip:hover {
  color: #c9f7fd;
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(34, 211, 238, 0.14);
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.15);
}

/* 面包屑 + 子分类 */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; font-size: 14px; }
.crumb { color: var(--sub); cursor: pointer; transition: .18s; padding: 2px 4px; border-radius: 7px; }
.crumb:hover { color: var(--txt); }
.crumb.active { color: #fff; font-weight: 600; background: rgba(139, 92, 246, 0.14); padding: 2px 10px; }
.crumb-sep { color: rgba(255, 255, 255, 0.25); user-select: none; }
.subcats { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.subcats.hidden { display: none; }
/* 搜索态紧凑分类导航：一排横向二级分类按钮（三级全部收起），让结果列表整体上移 */
.search-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1100px; margin: 0 auto 14px;
  padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); }
.search-cats.hidden { display: none; }
.sc-label { flex: none; font-size: 12.5px; color: var(--sub); opacity: .8; padding: 0 6px 0 4px; letter-spacing: .5px; }
.sc-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 13px; border-radius: 11px; font-size: 13.5px; font-weight: 500;
  color: var(--sub); text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); transition: .2s;
}
.sc-chip:hover { color: #fff; border-color: rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .14); transform: translateY(-1px); }
@media (max-width: 600px) {
  .search-cats { max-height: 96px; overflow-y: auto; padding: 8px; }
  .sc-label { display: none; }
}
.secnav-back {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--sub);
  font-size: 13.5px; cursor: pointer; transition: .2s;
}
.secnav-back:hover { color: #fff; border-color: rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .12); box-shadow: 0 6px 18px rgba(109, 92, 246, .15); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 13px;
  font-size: 14px; font-weight: 500; color: var(--sub); position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); cursor: pointer; transition: .22s;
}
.chip .ico { font-size: 15px; }
.chip:hover { color: #fff; border-color: rgba(139, 92, 246, .45); transform: translateY(-2px); background: rgba(139, 92, 246, .12); box-shadow: 0 8px 22px rgba(109, 92, 246, .18); }
.chip.active { color: #fff; background: rgba(139, 92, 246, .14); border-color: rgba(139, 92, 246, .4); }
.chip.active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad); }
/* 素材归属标签：公版（沿用原「水印」标签同一套粉紫配色）/ 原创（金黄色高端配色）
   —— 2026-10-02 站长要求：全站素材统一加水印后「水印」标签失去信息量，改成公版 / 原创 */
.item .sub .zone-badge {
  display: inline-block; padding: 2px 9px; border-radius: 9px; font-size: 11px; line-height: 1.45;
  white-space: nowrap; border: 1px solid transparent;
}
.item .sub .zone-badge.public {
  color: #ffd0e4; background: rgba(255, 92, 168, 0.16); border: 1px solid rgba(255, 92, 168, 0.3);
}
.item .sub .zone-badge.original {
  color: #ffe6ab; background: linear-gradient(135deg, rgba(255, 197, 92, 0.24), rgba(212, 175, 55, 0.14));
  border: 1px solid rgba(240, 196, 90, 0.5); box-shadow: 0 1px 6px rgba(212, 175, 55, 0.14);
}

/* ===== 顶部搜索框（已移除，搜索入口统一为首页醒目搜索框 .hero-search） ===== */

/* 搜索结果提示条 */
.search-info { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; padding: 12px 16px; border-radius: 13px;
  background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.22); font-size: 14px; color: #e8eaf6; }
.search-info b { color: #fff; }
.search-info .link { margin-left: auto; background: none; border: 1px solid var(--line); color: #c4b5ff; padding: 6px 13px; border-radius: 10px; font-size: 13px; transition: .2s; }
.search-info .link:hover { border-color: var(--accent); color: #fff; }

/* ===== 首页醒目搜索框（替代右上角角落位） ===== */
.hero-search { display: flex; align-items: center; gap: 8px; margin: 22px auto 6px; max-width: 620px; width: 100%;
  padding: 6px 6px 6px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.28); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: .2s; }
.hero-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18), 0 10px 30px rgba(0, 0, 0, 0.3); }
.hs-ico { font-size: 16px; opacity: .7; }
/* 搜索范围选择器（音效/音乐）：搜索框左侧，深色胶囊风格与整体一致 */
.hs-scope { appearance: none; -webkit-appearance: none; border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.14) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c4b5ff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
  color: var(--txt); font-size: 14px; font-weight: 600; padding: 9px 26px 9px 12px; border-radius: 10px;
  cursor: pointer; outline: none; transition: .2s; flex: none; }
.hs-scope:hover, .hs-scope:focus { border-color: var(--accent); background-color: rgba(139, 92, 246, 0.24); }
.hs-scope option { background: #1b1530; color: var(--txt); font-weight: 500; }
.hero-search input { flex: 1; border: none; background: transparent; color: var(--txt); font-size: 16px; outline: none; min-width: 0; }
.hero-search input::placeholder { color: var(--sub); }
.hero-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hs-btn { border: none; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; font-weight: 600; font-size: 15px;
  padding: 11px 22px; border-radius: 12px; cursor: pointer; transition: .2s; white-space: nowrap; }
.hs-btn:hover { filter: brightness(1.1); }
.hs-clear { border: none; background: rgba(255, 255, 255, 0.08); color: var(--sub); width: 26px; height: 26px; border-radius: 50%; font-size: 16px; line-height: 1; transition: .2s; }
.hs-clear:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
@media (max-width: 600px) { .hero-search { margin-top: 16px; } .hs-btn { padding: 10px 14px; } }

/* 搜索结果匹配类型标签（精准 / 模糊） */
.match-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 7px; vertical-align: middle; margin-left: 4px; }
.match-badge.precise { color: #7cf0c2; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.35); }
.match-badge.semantic { color: #ffd479; background: rgba(245, 158, 11, 0.16); border: 1px solid rgba(245, 158, 11, 0.35); }
.match-badge.fuzzy { color: #c4b5ff; background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(139, 92, 246, 0.35); }
.search-info .mt { font-weight: 600; }
.search-info .mt.precise { color: #7cf0c2; }
.search-info .mt.semantic { color: #ffd479; }
.search-info .mt.fuzzy { color: #c4b5ff; }

/* ===== 二级/三级 行列式导航 ===== */
/* 整块导航区做独立面板底：带主题紫色调，与下方纯暗色列表卡片区分 */
.subcats {
  display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.06), rgba(22, 24, 44, 0.34));
  border: 1px solid rgba(139, 92, 246, 0.13);
  border-radius: 16px;
  padding: 14px 16px;
}
.subcats.hidden { display: none; }
.hier-head { display: flex; align-items: center; gap: 10px; }
.hier-top {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 11px;
  font-size: 13px; font-weight: 600; color: var(--sub); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line); cursor: pointer; transition: .2s;
}
.hier-top:hover { color: #fff; border-color: rgba(139, 92, 246, .4); }
.hier-top.active { color: #fff; background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .45); }
.hier-top .ico { font-size: 14px; }
.hier-all { font-size: 12.5px; color: var(--sub); background: none; border: none; cursor: pointer; padding: 6px 4px; transition: .2s; }
.hier-all:hover { color: #c4b5ff; }
.hier-row {
  /* 纵向排布：二级标题在左上角、三级在下方（与一级分类页布局统一，2026-10-02 用户要求） */
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 9px 12px 9px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line);
}
.hier-title {
  display: inline-flex; align-items: center; gap: 7px; flex: none; min-width: 108px;
  padding: 8px 15px; border-radius: 11px; font-size: 14px; font-weight: 700; color: #c4b5ff;
  background: rgba(139, 92, 246, 0.10); border: 1px solid rgba(139, 92, 246, 0.28); cursor: pointer; transition: .2s;
}
.hier-title:hover { color: #fff; border-color: rgba(139, 92, 246, .5); transform: translateY(-1px); }
.hier-title.active { color: #fff; background: rgba(139, 92, 246, .2); border-color: rgba(139, 92, 246, .6); box-shadow: 0 6px 18px rgba(109, 92, 246, .2); }
/* emoji 彩色字形不受 color 控制（如 🎵 自带暗红、🔊 自带灰白），
   用 filter 统一压成纯亮白，保证各行标题图标颜色一致 */
.hier-title .ico { font-size: 14px; filter: brightness(0) invert(1); }
.hier-btns { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; align-items: center; }
.hier-chip {
  padding: 7px 14px; border-radius: 11px; font-size: 13px; color: var(--sub);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); cursor: pointer; transition: .2s; white-space: nowrap;
}
.hier-chip:hover { color: #fff; border-color: rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .12); transform: translateY(-1px); }
.hier-chip.active { color: #fff; background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .45); }

/* 折叠式层级导航：二级标题即入口（点击进入该二级分类页）；右侧箭头仅负责展开/收起 */
.hier-title.toggle .arrow { margin-left: 2px; font-size: 11px; opacity: .75; transition: transform .18s; cursor: pointer; padding: 2px 3px; }
.hier-row.open .hier-title .arrow { transform: rotate(90deg); }
.hier-row:not(.open) .hier-btns { display: none; } /* 折叠行隐藏芯片区，仅留二级标题 */
/* 三级芯片：从二级标题右侧丝滑滑出（错峰），叶子列表页与二级分类页共用 */
/* 三级芯片入场动画。⚠️ 只作用于三级本身（.hier-btns 的直接子级或其 .drawer 壳里的父级芯片），
   绝不能命中 .drawer-sub 里的四级芯片 —— 那条规则把 opacity:0 写在基础样式上，
   而抽屉的 drawerPop 是 backwards 填充，动画一结束就回落到 opacity:0 → 四级文字消失（2026-10-02 修） */
.hier-btns > .hier-chip, .hier-btns > .drawer > .hier-chip {
  opacity: 0;
  transform: translateX(-14px);
  animation: leafPop .75s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--leaf-i, 0) * 70ms);
}

/* 列表内下载按钮 + 关键词 */
.item .dl {
  flex: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(34, 211, 238, .32);
  background: rgba(34, 211, 238, .1); color: #7df0ff; font-size: 14px; cursor: pointer; transition: .2s;
  display: grid; place-items: center;
}
.item .dl:hover { background: rgba(34, 211, 238, .2); color: #fff; box-shadow: 0 6px 18px rgba(34, 211, 238, .25); }
.item .kw { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 5px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.item .kw::-webkit-scrollbar { display: none; }
.kw-chip { font-size: 11px; padding: 1px 8px; border-radius: 9px; color: #9fb4ff; background: rgba(99, 102, 241, .16); border: 1px solid rgba(99, 102, 241, .3); flex: none; white-space: nowrap; }

/* 分类导航锚点：去掉默认链接外观，保持与原按钮一致，且可被搜索引擎抓取
   （注意：.hier-title / .hier-chip 有各自的配色与 hover 态，不在此处继承覆盖） */
.dir-l2, .dir-l3, .crumb { text-decoration: none; color: inherit; cursor: pointer; }
.dir-l2:hover, .dir-l3:hover, .crumb:hover { color: inherit; }

/* SEO 隐藏内容：保留在 DOM 中供搜索引擎抓取，对用户不可见 */
.seo-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* 列表排序控件 */
.sortbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 2px 2px 12px; font-size: 13px; color: var(--sub); }
.sortbar select { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); font-size: 13px; cursor: pointer; }
.sortbar select:focus { outline: none; border-color: #8b5cf6; }

/* ===== 音频列表 ===== */
.list { display: flex; flex-direction: column; gap: 12px; }
.item {
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s, border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad); opacity: 0; transition: opacity .25s;
}
.item:hover { transform: translateY(-3px); border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 14px 40px rgba(109, 92, 246, 0.22); }
.item:hover::before { opacity: 1; }
.item.playing { border-color: rgba(139, 92, 246, 0.55); box-shadow: 0 14px 44px rgba(109, 92, 246, 0.28); }
.item.playing::before { opacity: 1; }
.item .play {
  width: 50px; height: 50px; flex: none; border-radius: 50%; border: none;
  background: var(--accent-soft); color: #c4b5ff; font-size: 17px; transition: .25s;
  display: grid; place-items: center; position: relative; z-index: 1;
}
.item .play::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--grad); opacity: 0; filter: blur(10px); transition: opacity .25s; z-index: -1;
}
.item.playing .play, .item .play:hover { background: var(--grad); color: #fff; }
.item.playing .play::after, .item .play:hover::after { opacity: .9; }
.item .meta { width: 240px; flex: none; min-width: 0; }
.item .title { font-weight: 650; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .title .tt { display: inline-block; white-space: nowrap; vertical-align: bottom; }
.item .sub { font-size: 12.5px; color: var(--sub); margin-top: 4px; display: flex; align-items: center; gap: 7px; }
.item .cat-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px;
  color: #c4b5ff; background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.25);
}
.item .wave {
  flex: 1; height: 56px; min-width: 0; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s;
  transform-origin: center;
}
/* 鼠标悬停：频谱波形微微放大 + 发光 */
.item:hover .wave { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.4)); }
.item .dur { font-size: 12.5px; color: var(--sub); width: 46px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--sub); padding: 70px 0; }
.empty .em-ico {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center;
  font-size: 30px; background: var(--grad); box-shadow: 0 12px 34px rgba(109, 92, 246, 0.4);
}

/* ===== 首页分类目录（二级/三级大区域列表） ===== */
.cat-grid { display: flex; flex-direction: column; gap: 30px; max-width: 1120px; margin: 0 auto; }
.dir-sec { scroll-margin-top: 84px; }
.dir-top {
  display: flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 800; letter-spacing: .3px; color: #fff;
  padding: 12px 0; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dir-top .ico { font-size: 20px; filter: drop-shadow(0 0 8px rgba(139, 92, 246, .5)); }
.dir-block { padding: 14px 0 8px; }
.dir-l2 {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; color: #ece9ff;
  background: linear-gradient(180deg, rgba(139, 92, 246, .14), rgba(139, 92, 246, .06));
  border: 1px solid rgba(139, 92, 246, .32); border-radius: 13px;
  padding: 11px 18px; cursor: pointer; transition: .2s; margin-bottom: 12px;
}
.dir-l2:hover { color: #fff; border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .18); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(109, 92, 246, .22); }
.dir-l2 .ico { font-size: 15px; }
/* 三级常显（横排一行），只有四级走抽屉 —— 区块内边距回到两行布局的原值 */
.dir-l3s { display: flex; flex-wrap: wrap; gap: 9px; padding-left: 10px; align-items: flex-start; }
/* 「一行一个」：当这组三级里有任何一个会弹出四级抽屉时，纵向排列。
   横排时抽屉向右滑出会盖住同一行右边的兄弟三级（实测遮住 2 个），纵向则右侧是空白。
   不带四级的分组（如公版音效）维持横排原样。 */
.dir-l3s.one-per-row, .hier-btns.one-per-row {
  flex-direction: column; align-items: flex-start; gap: 7px;
}
.dir-l3s.one-per-row > *, .hier-btns.one-per-row > * { max-width: 100%; }
.dir-l3 {
  font-size: 13.5px; color: #c8c8d6;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: .2s;
}
.dir-l3:hover { color: #fff; border-color: rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .14); transform: translateY(-1px); }

/* 三级芯片滑出动画（leafPop）：供层级导航 .hier-chip 使用 */
@keyframes leafPop {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hier-btns .hier-chip { animation: none; opacity: 1; transform: none; }
}

/* ===== 底部播放器 ===== */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px; padding: 16px 26px;
  background: rgba(12, 13, 26, 0.72); backdrop-filter: blur(20px);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}
.player::before { content: ""; position: absolute; inset: 0; top: -1px; height: 2px; background: var(--grad); opacity: .7; }
.player .pbtn {
  width: 46px; height: 46px; flex: none; border-radius: 50%; border: none;
  background: var(--grad); color: #fff; font-size: 17px; transition: .2s; display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(109, 92, 246, 0.45);
}
.player .pbtn:hover { transform: scale(1.07); filter: brightness(1.1); }
.player .pinfo { width: 210px; flex: none; min-width: 0; }
.player .ptitle { font-weight: 650; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .psub { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .pbar { flex: 1; height: 7px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); position: relative; cursor: pointer; overflow: hidden; }
.player .pfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 7px; background: var(--grad); box-shadow: 0 0 12px rgba(109, 92, 246, 0.6); will-change: width; }
.player .ptime { font-size: 12px; color: var(--sub); width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.player .pvol { width: 110px; accent-color: var(--accent); }

/* ===== 后台专属 ===== */
.auth-wrap { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 36px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.auth-card h1 { font-size: 23px; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.auth-card p { color: var(--sub); font-size: 13px; margin-bottom: 24px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04); color: var(--txt); font-size: 14px; outline: none; transition: .2s;
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
/* 修复后台下拉选项白底白字：强制 option 弹出层为深色背景 + 浅色字 */
select option, select optgroup { background: var(--card-solid); color: var(--txt); }
/* 兜底：表单控件不继承 body 字色（UA 默认黑字），统一为浅色字，避免深底黑字不可见 */
.admin input[type="text"], .admin input:not([type]), .admin input[type="password"],
.admin input[type="number"], .admin input[type="search"], .admin textarea, .admin select { color: var(--txt); }
.admin input::placeholder, .admin textarea::placeholder { color: var(--sub); }
.btn {
  padding: 11px 19px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-solid);
  color: var(--txt); font-size: 14px; transition: .2s; font-weight: 500;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--grad); border: none; color: #fff; font-weight: 650; }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 8px 24px rgba(109, 92, 246, 0.4); }
.btn.danger { color: #ff8ba3; border-color: rgba(255, 92, 168, 0.3); }
.btn.danger:hover { background: rgba(255, 92, 168, 0.12); }
.btn.sm { padding: 7px 13px; font-size: 13px; }
.btn.block { width: 100%; justify-content: center; }

.admin { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }
.admin-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.admin-head h1 { font-size: 23px; }
.admin-head .spacer { flex: 1; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 22px; backdrop-filter: blur(14px); }
.panel h2 { font-size: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.panel h2 .count { font-size: 12px; color: var(--sub); font-weight: 400; }
.panel textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04); color: var(--txt); font-size: 14px; outline: none;
  resize: vertical; font-family: inherit; transition: .2s;
}
.panel textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
.wm-toggle { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 13.5px; color: var(--sub); cursor: pointer; user-select: none; }
.wm-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
.wm-toggle strong { color: #c4b5ff; }
/* 水印列表（设置页多条目 / 上传页可勾选） */
.wm-list { display: flex; flex-direction: column; gap: 9px; margin: 8px 0 0 26px; }
.wm-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.03); }
.wm-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.03); cursor: pointer; user-select: none; }
.wm-option .wm-sel { width: 16px; height: 16px; accent-color: var(--accent); }
.wm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(139,92,246,0.7); flex: 0 0 auto; }
.wm-meta { flex: 1; min-width: 0; }
.wm-name { font-size: 14px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-sub { font-size: 12px; color: var(--sub); margin-top: 2px; }
.wm-option .wm-name { flex: 1; }
.wm-option .wm-sub { flex: 0 0 auto; margin: 0 6px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cat-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* 折叠树：任意层级（一级/二级/三级）都可收起；grid-rows 0fr→1fr 高度过渡实现丝滑伸缩 */
.cat-node { min-width: 0; }
.cat-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1); }
.cat-node.open > .cat-children { grid-template-rows: 1fr; }
.cat-children-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.cat-children-inner > * + * { margin-top: 8px; }
.cat-toggle { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; cursor: pointer; flex: none; transition: background .18s; }
.cat-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.cat-toggle .caret { display: inline-block; font-size: 12px; line-height: 1; color: var(--sub); transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.cat-node.open > .cat-item .caret { transform: rotate(90deg); }
.cat-item .cname.has-kids { cursor: pointer; transition: color .18s; }
.cat-item .cname.has-kids:hover { color: #c4b5ff; }
.cat-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.03); }
.cat-item .cname { font-weight: 600; font-size: 14px; flex: 1; }
.cat-item .cmeta { font-size: 12px; color: var(--sub); }
.cat-item input.edit { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; width: 190px; background: rgba(255,255,255,0.04); color: var(--txt); }
.cat-item .cat-parent { padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--sub); font-size: 12px; max-width: 210px; }
.cat-item .dl-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sub); cursor: pointer; user-select: none; white-space: nowrap; }
.cat-item .dl-toggle input { width: 15px; height: 15px; accent-color: var(--accent2); }
table.tbl input.kw-edit { width: 170px; max-width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; background: rgba(255,255,255,0.04); color: var(--txt); }

/* 重命名弹窗（深色主题，输入框始终可见，避免原生 prompt 黑底黑字） */
.modal-mask { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4,5,12,0.66); backdrop-filter: blur(4px); padding: 20px; }
.modal-card { width: 100%; max-width: 380px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.modal-card h3 { font-size: 17px; margin-bottom: 14px; color: #fff; }
.modal-input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--txt); font-size: 14px; outline: none; transition: .2s; box-sizing: border-box; }
.modal-input::placeholder { color: var(--sub); }
.modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.modal-msg { color: var(--sub); font-size: 14px; line-height: 1.6; margin: 2px 0 0; }

.drop {
  border: 2px dashed var(--line); border-radius: 16px; padding: 30px; text-align: center;
  color: var(--sub); transition: .2s; cursor: pointer; background: rgba(255,255,255,0.02);
}
.drop.drag { border-color: var(--accent); background: var(--accent-soft); color: #c4b5ff; }
.drop strong { color: var(--txt); }

/* min-width：窄屏（或浏览器页面放大）时整表横向滚动，而不是把列压到比控件还窄 → 输入框溢出压住右侧按钮 */
table.tbl { width: 100%; min-width: 900px; border-collapse: collapse; }
table.tbl th, table.tbl td { text-align: left; padding: 12px 11px; border-bottom: 1px solid var(--line); font-size: 13px; }
table.tbl th { color: var(--sub); font-weight: 600; font-size: 12px; }
table.tbl tr:hover td { background: rgba(255, 255, 255, 0.04); }
table.tbl .ttl { font-weight: 600; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 固定宽控件一律 max-width:100%：列被压窄时跟着缩，不会溢出去盖住右边的试听/时长列 */
table.tbl input.ttl-edit { width: 240px; max-width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; background: rgba(255,255,255,0.04); color: var(--txt); }
table.tbl input.m-realwx { width: 150px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; background: #fff; color: #000; }
table.tbl input.m-realwx::placeholder { color: #999; }
table.tbl select { max-width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; background: rgba(255,255,255,0.04); color: var(--txt); }
table.tbl .mini-wave { height: 30px; width: 160px; vertical-align: middle; }
.badge { display: inline-block; padding: 3px 11px; border-radius: 12px; background: var(--accent-soft); color: #c4b5ff; font-size: 12px; font-weight: 500; }
.muted { color: var(--sub); font-size: 13px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filter-sel { padding: 9px 13px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--txt); font-size: 13px; }

/* ===== 批量操作面板 ===== */
.batch-panel { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(139, 92, 246, 0.06); overflow: hidden; }
.bp-block { padding: 14px 16px; }
.bp-block + .bp-block { border-top: 1px solid var(--line); }
.bp-title { font-size: 13px; font-weight: 600; color: #c4b5ff; margin-bottom: 10px; }
.bp-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bp-row input { flex: 1; min-width: 180px; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--txt); font-size: 13px; }
.bp-row select { flex: 0 0 auto; }

/* ===== 数据统计 ===== */
.stat-bar { height: 18px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); overflow: hidden; margin-bottom: 10px; }
.stat-fill { height: 100%; width: 0; background: linear-gradient(90deg,#5b5bd6,#8b5cf6); transition: width .5s ease; }
.stat-totals { display: flex; flex-wrap: wrap; gap: 14px; }
.stat-tile { flex: 1; min-width: 120px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.stat-tile .num { font-size: 28px; font-weight: 700; color: #fff; }
.stat-tile .lbl { font-size: 12.5px; color: var(--sub); margin-top: 4px; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 168px; }
.chart .bar { flex: 1; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; }
.chart .bar-in { width: 100%; border-radius: 5px 5px 0 0; min-height: 3px; transition: height .4s ease; }
.chart .bar-d { text-align: center; font-size: 10px; color: var(--sub); margin-top: 6px; line-height: 1; }
.bp-hint { margin-top: 9px; font-size: 12px; }
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: rgba(18, 20, 38, 0.95); color: #fff; padding: 12px 22px; border-radius: 13px; font-size: 14px;
  opacity: 0; transition: .25s; pointer-events: none; z-index: 99; box-shadow: var(--shadow); border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: rgba(185, 28, 28, 0.95); border-color: rgba(255,90,90,0.4); }
/* 居中高显提示（下载进行中·防重复点击） */
.center-toast {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96);
  background: rgba(18, 20, 38, 0.96); color: #fff; padding: 16px 30px; border-radius: 14px;
  font-size: 15px; font-weight: 600; opacity: 0; transition: .2s; pointer-events: none;
  z-index: 120; box-shadow: var(--shadow); border: 1px solid var(--line); backdrop-filter: blur(12px);
}
.center-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.section-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.section-tabs .tab { cursor: pointer; flex: 0 0 auto; white-space: nowrap; }
.hidden { display: none !important; }

/* ---------------- 专辑海报（仅商用素材区三级分类列表页展示） ---------------- */
.poster-band { margin: 2px 0 16px; }
.poster-band .poster-img {
  display: block; width: 100%; max-height: 300px; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); background: var(--bg2);
}

/* 后台分类行内的海报管理块（换行铺满整行） */
.cat-item { flex-wrap: wrap; }
.poster-box { flex-basis: 100%; min-width: 100%; padding-top: 9px; margin-top: 9px; border-top: 1px dashed var(--line); }
.poster-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.poster-thumb { width: 120px; height: 36px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.06); }
span.poster-thumb.poster-empty { display: grid; place-items: center; font-size: 12px; color: var(--sub); }
.poster-hint { font-size: 12px; color: var(--sub); line-height: 1.5; }

/* 后台定制服务面板 */
.svc-admin-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .svc-admin-list { grid-template-columns: 1fr; } }
.svc-admin-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,0.03); }
.svc-admin-main { display: flex; gap: 16px; }
.svc-admin-poster { flex: none; width: 160px; }
.svc-admin-poster img { width: 160px; height: 100px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); }
.svc-admin-poster .poster-empty { width: 160px; height: 100px; display: grid; place-items: center; font-size: 12px; color: var(--sub); border: 1px dashed var(--line); border-radius: 10px; }
/* 海报上传行：上传/更换按钮 + 尺寸/格式/大小要求标注（按钮旁边） */
.svc-admin-poster-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 11px; }
.svc-admin-poster-row .poster-hint { flex: 1; min-width: 220px; }
/* 详情页独立海报行：与宫格海报分开上传 */
.svc-admin-detail-poster-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 11px; }
.svc-admin-detail-prev { flex: none; width: 200px; height: 83px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.06); display: grid; place-items: center; }
.svc-admin-detail-prev img { width: 100%; height: 100%; object-fit: cover; }
.svc-admin-detail-prev .poster-empty { width: 100%; height: 100%; display: grid; place-items: center; font-size: 12px; color: var(--sub); }
.svc-admin-detail-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 220px; }
.svc-admin-detail-actions .poster-hint { flex: 1; min-width: 220px; }
.svc-admin-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.svc-admin-fields .field { margin: 0; }
.svc-admin-fields .svc-save { align-self: flex-start; }

/* 复选框列表（上传页归属服务 / 批量面板） */
.svc-check-list { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0; max-height: 150px; overflow-y: auto; }
.svc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--txt); cursor: pointer; user-select: none; }
.svc-check input { width: 15px; height: 15px; accent-color: var(--accent); }

/* 定制服务音频列表（独立音频，不挂分类） */
.svc-audio-list { display: flex; flex-direction: column; gap: 10px; }
.svc-audio-item { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.03); }
.svc-audio-item .sa-main { flex: 1; min-width: 0; }
.svc-audio-item .sa-title { font-size: 14.5px; font-weight: 600; color: var(--txt); margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-audio-item .sa-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.svc-audio-item .sa-desc { margin-top: 7px; font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.badge.svc { background: rgba(139,92,246,0.16); color: #c4b5ff; border: 1px solid rgba(139,92,246,0.32); }

/* 音频管理表：说明列输入框 */
table.tbl input.desc-edit { width: 180px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; background: rgba(255,255,255,0.04); color: var(--txt); }

/* ===== 定制服务：六项大方格宫格 ===== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-solid);
  box-shadow: var(--shadow); transition: transform .28s, border-color .28s, box-shadow .28s;
}
.svc-card:hover { transform: translateY(-5px); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 20px 52px rgba(109, 92, 246, 0.28); }
.svc-cover {
  position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #8b5cf6 0%, #6d5cf6 45%, #22d3ee 100%);
  background-size: cover; background-position: center;
}
/* 压暗层：保证任意海报图片上的居中文字均可读 */
.svc-cover-mask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 16, 0.22) 0%, rgba(7, 8, 16, 0.5) 100%); }
/* 标题/副标题：置于图片正中间 */
.svc-center {
  position: absolute; inset: 0; z-index: 1; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center;
}
.svc-emoji { font-size: 46px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4)); }
.svc-title { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: .5px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.svc-sub { font-size: 13px; color: #e3e6f3; line-height: 1.55; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); max-width: 92%; }

/* 定制服务详情页顶部海报 */
.svc-poster { margin: 2px 0 22px; }
.svc-poster .svc-poster-img {
  display: block; width: 100%; max-height: 380px; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); background: var(--bg2);
}
.svc-poster .svc-poster-ph {
  display: grid; place-items: center; width: 100%; min-height: 180px;
  border-radius: 18px; border: 1px solid var(--line);
  font-size: 26px; font-weight: 800; color: #fff; letter-spacing: 1px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d5cf6 45%, #22d3ee 100%);
}

/* 音频说明：长条框下方整行展示，用于介绍音频基本情况（定制服务页重点展示） */
.list .item { flex-wrap: wrap; }
.audio-desc {
  flex-basis: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.6; color: #c8cae0;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  display: flex; gap: 8px; align-items: flex-start;
}
.audio-desc-ico { flex: none; opacity: .7; }

/* ===== 前台会员状态区（导航栏右上） ===== */
.member-zone { display: flex; align-items: center; gap: 10px; }
.member-link { padding: 9px 16px; border-radius: 11px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); color: var(--sub); transition: .2s; white-space: nowrap; }
.member-link:hover { border-color: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(139, 92, 246, .25); }
.mz-type { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 10px; }
.mz-type.member { color: #9ff0d6; background: rgba(16, 185, 129, .14); border: 1px solid rgba(16, 185, 129, .3); }
.mz-type.sponsor { color: #ffd0e4; background: rgba(255, 92, 168, .16); border: 1px solid rgba(255, 92, 168, .35); }
.mz-type.pending { color: #ffd9a8; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .35); }
.mz-quota { font-size: 12.5px; color: var(--sub); }
.mz-logout { font-size: 12.5px; color: var(--sub); cursor: pointer; border: 1px solid var(--line); padding: 4px 11px; border-radius: 10px; transition: .2s; }
.mz-logout:hover { color: #fff; border-color: var(--accent); }

/* 列表内「购买商用授权」按钮（商用素材区每行的第二个按钮）— 黑金配色，高端大气 */
.item .buy-comm {
  flex: none; height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid rgba(212, 175, 55, .55);
  background: linear-gradient(135deg, #1a1a1a, #2b2b2b); color: #e8c66a; font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s;
  display: grid; place-items: center; white-space: nowrap;
}
.item .buy-comm:hover { background: linear-gradient(135deg, #2a2a2a, #3a2f12); color: #ffd86b; border-color: rgba(212, 175, 55, .85); box-shadow: 0 6px 18px rgba(212, 175, 55, .28); }

/* ===== 搜索框联想下拉 ===== */
.hero-search { position: relative; }
.suggest-box {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #1b1b28; border: 1px solid var(--line, #333); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); overflow: hidden; max-height: 340px; overflow-y: auto;
}
.suggest-box.hidden { display: none; }
.sg-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; cursor: pointer; color: #e7e8f5; font-size: 14px; transition: background .12s; }
.sg-item:hover, .sg-item.active { background: rgba(139, 92, 246, .18); }
.sg-w { font-weight: 600; }
.sg-c { font-size: 12px; color: #9ea0bf; flex: none; }

/* ===== 专辑封面宫格（商用区「系列 → 专辑」上下层级关系） ===== */
#childCats .alb-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 14px; }
#childCats .alb-head-t { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: .3px; }
#childCats .alb-head-s { font-size: 12.5px; color: var(--sub); }
#childCats .alb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px;
}
.alb-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; transition: transform .22s, border-color .22s, box-shadow .22s;
}
.alb-card:hover { transform: translateY(-4px); border-color: rgba(139, 92, 246, .55); box-shadow: 0 14px 34px rgba(109, 92, 246, .25); }
.alb-cover {
  position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
  background: linear-gradient(135deg, #191c33, #12142a);
}
.alb-cover::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46px;
  background: linear-gradient(to top, rgba(7, 8, 16, .55), transparent);
}
.alb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alb-ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--grad); opacity: .85; }
.alb-ph .ico { font-size: 34px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.alb-meta { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; }
.alb-name { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.35; word-break: break-all; }
.alb-sub { font-size: 12px; color: var(--sub); }
@media (max-width: 600px) {
  #childCats .alb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .poster-band .poster-img { max-height: 190px; }
}

/* ===== 抽屉式子分类（2026-10-02 用户要求）=====
   旧做法：子级纵向堆在父级正下方 → 会把父级那一行撑成两行（原创音乐区块比公版音效高 40px，看着很挤）。
   新做法：子级绝对定位不占文档流，默认「缩进收起」，划过父级时向右滑出，像拉开抽屉，带微微 Q 弹抖动。
   适用范围：首页/一级页目录（二级→三级→四级）与层级导航（三级→四级），公版与原创一视同仁。 */
.drawer { position: relative; display: inline-flex; align-items: center; max-width: 100%; vertical-align: middle; }
/* 父级右侧小箭头：提示"里面还有一层" */
.drawer > .has-sub::after {
  content: '›'; display: inline-block; margin-left: 4px;
  font-size: 13px; line-height: 1; opacity: .45;
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}
.drawer:hover > .has-sub::after, .drawer.dw-open > .has-sub::after { transform: rotate(90deg) translateX(-1px); opacity: .95; }

.drawer-sub {
  position: absolute; left: 100%; top: 50%; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  width: max-content;
  /* 收起态宽度归零：否则抽屉虽然看不见，却仍按内容宽度占位，会把窄屏页面撑出横向滚动 */
  max-width: 0; overflow: hidden;
  margin-left: 7px; padding: 8px 12px; border-radius: 13px;
  background: rgba(16, 14, 28, .97);
  border: 1px solid rgba(139, 92, 246, .34);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
  opacity: 0; pointer-events: none;
  transform: translate(-12px, -50%) scaleX(.86);
  transform-origin: left center;
  transition: opacity .18s ease, transform .44s cubic-bezier(.34, 1.5, .5, 1),
              max-width .44s cubic-bezier(.34, 1.5, .5, 1), padding .44s cubic-bezier(.34, 1.5, .5, 1);
}
/* 命中桥接：父级与抽屉之间有 7px 间隙，鼠标经过时会脱离 :hover 导致抽屉弹回。
   挂在 .drawer 上（挂抽屉自身会被 overflow:hidden 裁掉），向右延伸 16px 填满缝隙。
   只会覆盖 flex 的 gap 空白区，越界部分被后面的兄弟元素压在下面，不影响相邻芯片点击。 */
.drawer::after {
  content: ''; position: absolute; left: 100%; top: 0; bottom: 0; width: 16px;
}
/* 抽屉把手：左侧一条竖向高光，拉开时点亮 */
.drawer-sub::before {
  content: ''; position: absolute; left: 4px; top: 50%;
  width: 3px; height: 0; border-radius: 2px;
  background: linear-gradient(180deg, #a78bfa, #7c5cf5);
  transform: translateY(-50%);
  transition: height .34s cubic-bezier(.34, 1.56, .64, 1) .05s;
}
.drawer:hover > .drawer-sub::before, .drawer.dw-open > .drawer-sub::before { height: 58%; }

.drawer:hover > .drawer-sub,
.drawer:focus-within > .drawer-sub,
.drawer.dw-open > .drawer-sub {
  opacity: 1; pointer-events: auto;
  /* 62vw 是纯 CSS 兜底；bindDrawers() 会在 mouseenter 时按父级右侧剩余空间改成精确值 */
  max-width: min(560px, 62vw);
  transform: translate(0, -50%) scaleX(1);
}
/* 抽屉内芯片错峰弹出 → 微微 Q 弹抖动（fill-mode: backwards，动画结束后交还给普通 hover 样式） */
.drawer:hover > .drawer-sub > *,
.drawer:focus-within > .drawer-sub > *,
.drawer.dw-open > .drawer-sub > * {
  animation: drawerPop .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.drawer-sub > *:nth-child(1) { animation-delay: .03s }
.drawer-sub > *:nth-child(2) { animation-delay: .07s }
.drawer-sub > *:nth-child(3) { animation-delay: .11s }
.drawer-sub > *:nth-child(4) { animation-delay: .15s }
.drawer-sub > *:nth-child(5) { animation-delay: .19s }
.drawer-sub > *:nth-child(6) { animation-delay: .23s }
.drawer-sub > *:nth-child(7) { animation-delay: .27s }
.drawer-sub > *:nth-child(8) { animation-delay: .31s }
.drawer-sub > *:nth-child(n+9) { animation-delay: .35s }
@keyframes drawerPop {
  0%   { opacity: 0; transform: translateX(-16px) scale(.8) }
  55%  { opacity: 1; transform: translateX(4px) scale(1.07) }
  78%  { opacity: 1; transform: translateX(-2px) scale(.98) }
  100% { opacity: 1; transform: translateX(0) scale(1) }
}
/* 四级（二级抽屉）更紧凑一些 */
.drawer-sub.l4 { padding: 6px 10px; gap: 6px; }
.drawer-sub.l4 .hier-chip.l4 { font-size: 12px; padding: 4px 10px; }
.drawer-sub.l4 .dir-l3.l4 { font-size: 12px; padding: 5px 11px; }
@media (prefers-reduced-motion: reduce) {
  .drawer-sub { transition-duration: .12s; }
  .drawer:hover > .drawer-sub > *, .drawer.dw-open > .drawer-sub > * { animation: none; }
}

/* ===== 后台音频管理：标题+工具栏吸顶（滚动长列表时操作按钮始终可见） ===== */
.audio-head-sticky {
  position: sticky; top: 0; z-index: 25;
  background: var(--card-solid);
  margin: -22px -22px 16px;
  padding: 18px 22px 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.audio-head-sticky .toolbar { margin-bottom: 12px; }

/* ===== 搜索零结果：结果区原位的「换词建议」块 ===== */
.miss-box { padding: 26px 20px 24px; }
.miss-box .em-ico { font-size: 34px; }
.miss-title { font-size: 15px; margin: 10px 0 12px; color: var(--txt); }
.miss-tips { font-size: 13px; line-height: 2; color: var(--sub); margin-bottom: 14px; }
.miss-tips strong { color: var(--txt); font-weight: 600; }
.miss-rec { font-size: 13px; margin-bottom: 14px; }
.miss-rec .lbl { color: var(--sub); margin-right: 6px; }
.miss-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.modal-msg .modal-sub { display: block; margin-top: 8px; font-size: 12px; color: var(--sub); }

/* ===== 后台音频管理：试听按钮 + 播放中行高亮 + 次要按钮（2026-10-01 随按需加载改造补回） ===== */
.btn.ghost { background: transparent; color: var(--sub); }
.btn.ghost:hover { color: var(--txt); background: rgba(255, 255, 255, 0.06); border-color: var(--line); }
.btn.ghost.danger { color: #ff8ba3; border-color: rgba(255, 92, 168, 0.3); }
.btn.ghost.danger:hover { background: rgba(255, 92, 168, 0.12); }

#audioRows .preview-btn { min-width: 64px; transition: .18s; }
#audioRows .preview-btn:hover { border-color: var(--accent); }
#audioRows .preview-btn.playing {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--txt); font-weight: 650;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14);
}
#audioRows tr.playing td { background: rgba(139, 92, 246, 0.08); }
#audioRows tr.playing td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
#audioRows tr.playing .ttl-edit, #audioRows tr.playing .kw-edit, #audioRows tr.playing .cat-sel { opacity: .82; }

/* 分页提示条 */
.audio-more-info { font-size: 12.5px; color: var(--sub); margin-left: 8px; }

/* 后台 SEO 网址映射列表 */
.seo-map { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 320px; overflow: auto; }
.seo-map .sm-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--sub); }
.seo-map .sm-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--txt); word-break: break-all; }
.seo-map .sm-flag { padding: 1px 7px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line); white-space: nowrap; }
.seo-map .sm-flag.legacy { color: var(--accent2); border-color: rgba(34, 211, 238, 0.35); }
.seo-map .sm-flag.ok { color: var(--sub); }

/* ================= 后台顶部吸顶（2026-10-02 恢复：管理头部 + 分区 Tab + 音频管理工具条 + 表头） =================
   --admin-h / --tabs-h / --toolbar-h 由 admin.js 用 ResizeObserver 动态写入，改动字号或换行不会错位 */
.admin-head {
  position: sticky; top: 0; z-index: 46;
  margin: 0 -24px 12px; padding: 12px 24px;
  background: rgba(8, 9, 18, 0.78);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.section-tabs {
  position: sticky; top: var(--admin-h, 62px); z-index: 45;
  margin: 0 -24px 16px; padding: 12px 24px;
  background: rgba(8, 9, 18, 0.78);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  /* 侧栏已达 10 个分区：窄屏必须横滚，否则 flex 会把整页撑出横向滚动条
     （实测 9 个 tab 时总宽 ~786px 刚好卡住 800/780 视口，加到 10 个就溢出到 859px） */
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}

/* 音频管理工具条吸顶（在 Tab 条下方） */
#sec-audio > .panel > .toolbar {
  position: sticky; top: var(--sticky-top, 130px); z-index: 24;
  margin: 0 -22px 14px; padding: 10px 22px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
/* 表格横向滚动容器：宽屏下 JS 会把它改成 visible，让表头能跟着页面吸顶；窄屏保持 auto */
#sec-audio .tbl-scroll { overflow-x: auto; }
/* 表头吸附层：放在横向滚动容器【外面】。容器一旦 overflow-x:auto 就成了 sticky 的参照系，
   表头会被甩到行里压住数据（旧版现象：列头标签飘到某一行上、和「时长/大小」叠在一起），
   所以把表头单独搬到容器外做页面级吸顶，宽屏窄屏表现一致。列宽由 JS 按数据行同步。 */
#sec-audio .thead-clone {
  position: sticky; top: var(--thead-top, 190px); z-index: 22;
  margin-bottom: -1px;
  overflow: hidden;               /* 窄屏表头与表格同宽（比面板略宽），裁掉溢出的那一截，视觉跟数据区一致 */
}
#sec-audio .thead-clone table.tbl { table-layout: fixed; }
#sec-audio .thead-clone table.tbl th {
  position: static;              /* 吸顶由外层 .thead-clone 负责 */
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--line);
}
/* 原表头只作克隆源，不参与布局 */
#sec-audio table.tbl thead.real { display: none; }
#sec-audio table.tbl thead.real th.th-chk { width: 32px; }
/* 全选（从表头挪到工具条：表头已搬出表格） */
.chk-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); cursor: pointer; white-space: nowrap; }
.chk-all input { accent-color: var(--accent); }

/* ===== 搜索范围：台历翻页式翻牌（正面「音效」，背面「音乐」，点击连续翻几下才落面） ===== */
/* 真实值 <select>：视觉隐藏，只作为 JS 读取/深链写入的载体，不占布局 */
.hs-scope-src { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.scope-flip { position: relative; flex: none; width: 96px; height: 48px; padding: 0; border: 0;
  background: transparent; cursor: pointer; border-radius: 13px; perspective: 700px;
  -webkit-tap-highlight-color: transparent; }
.scope-flip:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
/* 翻动瞬间的青紫辉光（从卡片边缘晕开），时长随 JS 动画同步 */
.scope-flip::after { content: ""; position: absolute; inset: -7px; border-radius: 17px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(34, 211, 238, .5), transparent 74%);
  opacity: 0; transition: opacity .3s ease; }
.scope-flip.flipping::after { opacity: 1; animation: scopeFlipGlow var(--flip-dur, 380ms) ease-out; }
@keyframes scopeFlipGlow {
  0% { opacity: .85; transform: scaleY(1.35) }
  40% { opacity: 1; transform: scaleY(1.9) }
  70% { opacity: .9; transform: scaleY(1.3) }
  100% { opacity: 0; transform: scaleY(1) }
}
.scope-flip .flip-inner { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(0deg); will-change: transform; }

/* 高速翻动的「运动模糊」：每次转到侧面（90°）时最糊，落面时瞬间清晰 —— 这就是残影感的来源 */
.scope-flip.flipping { animation: scopeFlipBlur var(--flip-dur, 380ms) linear; }
@keyframes scopeFlipBlur {
  0%   { filter: blur(0) }
  8%   { filter: blur(3.2px) }
  16%  { filter: blur(0) }
  38%  { filter: blur(3.9px) }
  46%  { filter: blur(0px) }
  62%  { filter: blur(4px) }
  70%  { filter: blur(0) }
  88%  { filter: blur(3.2px) }
  100% { filter: blur(0) }
}
/* 残影拖尾：卡片上下缘甩出的两条青色光丝，落面瞬间收干净 */
.scope-flip .flip-trail { position: absolute; inset: 0; border-radius: 13px; pointer-events: none;
  opacity: 0; overflow: hidden; }
.scope-flip.flipping .flip-trail { opacity: 1; }
.scope-flip .flip-trail::before, .scope-flip .flip-trail::after {
  content: ""; position: absolute; left: 8%; right: 8%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .85), transparent); }
.scope-flip .flip-trail::before { top: 3px; animation: trailUp var(--flip-dur, 380ms) ease-out; }
.scope-flip .flip-trail::after { bottom: 3px; animation: trailDown var(--flip-dur, 380ms) ease-out; }
@keyframes trailUp { 0% { transform: translateY(4px) scaleX(.3); opacity: .2 }
  45% { transform: translateY(-6px) scaleX(1); opacity: 1 } 100% { transform: translateY(9px) scaleX(.5); opacity: 0 } }
@keyframes trailDown { 0% { transform: translateY(-4px) scaleX(.3); opacity: .2 }
  45% { transform: translateY(6px) scaleX(1); opacity: 1 } 100% { transform: translateY(-9px) scaleX(.5); opacity: 0 } }
.flip-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 13px; font-size: 14px; font-weight: 700; letter-spacing: 2px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.flip-face .fi-ico { font-size: 13px; font-style: normal; }
.flip-face.f-sfx { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(139, 92, 246, .45); }
.flip-face.f-music { transform: rotateX(180deg); color: #fff; border: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 20px rgba(139, 92, 246, .5); }
@media (max-width: 600px) { .scope-flip { width: 84px; height: 44px; } .flip-face { font-size: 13px; letter-spacing: 1px; } }
@media (prefers-reduced-motion: reduce) { .scope-flip .flip-inner { transition: none !important; } }