:root {
  --bg: #0f0a1e;
  --bg2: #1a1033;
  --panel: rgba(255,255,255,0.04);
  --panel-strong: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f1edff;
  --muted: #a99fce;
  --muted2: #7d719e;
  --primary: #b14bff;
  --primary2: #ff5db1;
  --pink: #ff5db1;
  --green: #2bd98a;
  --orange: #ff9f43;
  --red: #ff5b6e;
  --blue: #4dabff;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0,0,0,0.5);
  --grad: linear-gradient(135deg,#b14bff,#ff5db1);
}

* { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(1200px 700px at 78% -8%, #2a1452 0%, transparent 55%),
              radial-gradient(1000px 600px at 8% 108%, #3a1140 0%, transparent 52%),
              var(--bg);
  color: var(--text);
  overflow: hidden;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 自定义标题栏 ---------- */
.titlebar {
  height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,6,22,0.6);
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
  padding: 0 12px;
}
.titlebar-drag { display:flex; align-items:center; gap:9px; }
.titlebar-icon { font-size: 16px; }
.titlebar-text { font-size: 14px; font-weight: 600; color: var(--muted); }
.titlebar-controls { display:flex; gap:8px; -webkit-app-region: no-drag; }
.tb-btn {
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  background:transparent;color:var(--muted);font-size:13px;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.tb-btn svg { width:14px;height:14px; }
.tb-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.tb-close:hover { background: var(--red); color:#fff; }

/* ---------- 布局 ---------- */
.app { display:flex; flex-direction:column; height:100vh; width:100vw; }
.body-row { display:flex; flex:1; min-height:0; }

/* ---------- 侧边栏 ---------- */
.sidebar {
  width: 230px; flex: 0 0 230px;
  background: linear-gradient(180deg, rgba(18, 10, 38, 0.95), rgba(10, 5, 22, 0.98));
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column;
  padding: 22px 15px;
  gap: 8px;
  backdrop-filter: blur(8px);
}
.brand { display:flex; align-items:center; gap:12px; padding: 4px 8px 22px; }
.brand-logo {
  width:44px; height:44px; border-radius:13px; flex:0 0 44px;
  background: var(--grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px rgba(177,75,255,0.45);
}
.brand-logo svg { width:24px; height:24px; }
.brand-title { font-size:17px; font-weight:800; letter-spacing:.4px; }
.brand-sub { font-size:11.5px; color:var(--muted2); margin-top:2px; }

.nav { display:flex; flex-direction:column; gap:11px; }
.nav-item {
  position: relative;
  display:flex; align-items:center; gap:14px;
  padding: 15px 16px;
  border-radius: 16px;
  color: var(--muted);
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
  user-select:none;
  overflow:hidden;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, color .18s ease;
  /* 玻璃拟态基底 */
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
}
/* 每项左侧的主题光条（3D 卡片的高光边缘） */
.nav-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius: 4px 0 0 4px;
  background: var(--nav-c, var(--primary));
  box-shadow: 0 0 12px var(--nav-c, var(--primary));
  opacity:.0; transition: opacity .18s ease;
}
/* 每个菜单不同的鲜艳主题色 */
.nav-item[data-view="games"]   { --nav-c:#a78bfa; --nav-g:linear-gradient(135deg,#8b5cf6,#6366f1); }
.nav-item[data-view="console"] { --nav-c:#fb7185; --nav-g:linear-gradient(135deg,#f472b6,#fb7185); }
.nav-item[data-view="clock"]   { --nav-c:#38bdf8; --nav-g:linear-gradient(135deg,#38bdf8,#34d399); }
.nav-item[data-view="doc"]     { --nav-c:#f59e0b; --nav-g:linear-gradient(135deg,#fbbf24,#f97316); }
.nav-item .nav-ic {
  position: relative; z-index:1;
  display:flex; width:26px; height:26px; flex:0 0 26px;
  align-items:center; justify-content:center;
  border-radius:8px;
  background: var(--nav-g, var(--grad));
  color:#fff;
  box-shadow: 0 4px 10px var(--nav-c, rgba(177,75,255,.35));
}
.nav-item .nav-ic svg { width:17px; height:17px; }
.nav-item span:not(.nav-ic) { flex:1; position:relative; z-index:1; }
/* 悬停：3D 卡片上浮 + 主题色显现 */
.nav-item:hover {
  transform: translateY(-2px);
  color: var(--nav-c, var(--primary));
  border-color: color-mix(in srgb, var(--nav-c) 55%, transparent);
  box-shadow: 0 12px 22px rgba(0,0,0,.34), 0 0 18px color-mix(in srgb, var(--nav-c) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.14);
}
.nav-item:hover::before { opacity:1; }
/* 点击按压：3D 下沉 */
.nav-item:active { transform: translateY(1px) scale(.985); }
/* 选中：主题色渐变玻璃卡片 */
.nav-item.active {
  color:#fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nav-c) 34%, rgba(255,255,255,.06)), color-mix(in srgb, var(--nav-c) 16%, rgba(255,255,255,.02)));
  border-color: color-mix(in srgb, var(--nav-c) 60%, transparent);
  box-shadow: 0 10px 24px rgba(0,0,0,.36), 0 0 20px color-mix(in srgb, var(--nav-c) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 8px rgba(0,0,0,.25);
}
.nav-item.active::before { opacity:1; }
.nav-item.active .nav-ic { box-shadow: 0 5px 14px var(--nav-c, rgba(177,75,255,.4)), inset 0 -2px 4px rgba(0,0,0,.22); }

.sidebar-foot { margin-top:auto; padding: 14px 12px 4px; border-top:1px solid var(--border); }
.sf-row { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--muted); font-weight:600; }
.sf-row .dot { width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);flex:0 0 9px; }
.sf-sub { font-size:11.5px; color:var(--muted2); margin-top:6px; padding-left:18px; }
/* 在线更新按钮（侧边栏底部） */
.sf-update-row { display:flex; gap:6px; margin-top:10px; }
.sf-update {
  display:block; flex:1; padding:7px 0;
  background:rgba(84,214,255,.10); border:1px solid rgba(84,214,255,.28);
  color:#7fe0ff; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer;
  transition:all .15s; text-align:center;
}
.sf-update:hover { background:rgba(84,214,255,.2); transform:translateY(-1px); }
.sf-update:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.sf-update-set { flex:0 0 34px; font-weight:800; }

/* ---------- 主区 ---------- */
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  min-height:66px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 30px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(6px);
}
.topbar-title { font-size:21px; font-weight:800; letter-spacing:.4px; }
.topbar-sub { font-size:13.5px; color:var(--muted2); margin-top:5px; }
.pill {
  display:flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:700;
  padding:9px 17px; border-radius:22px;
  background:var(--panel-strong); border:1px solid var(--border-strong);
}
.pill .dot { width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green); }
.pill.off { color:var(--muted); }
.pill.off .dot { background:var(--muted2); box-shadow:none; }
.pill.debug-on { color:#8fe3ff; border-color:rgba(80,200,255,.5); background:rgba(80,200,255,.1); }
.pill.debug-on .dot { background:#50c8ff; box-shadow:0 0 10px #50c8ff; }

.lb-sep { width:1px; height:34px; background:var(--border-strong); margin:0 4px; opacity:.6; }

.content { flex:1; overflow:auto; padding: 30px 34px 44px; }
.content::-webkit-scrollbar { width:10px; }
.content::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:8px; }
.view { max-width:1480px; margin:0 auto; height:100%; }

/* ---------- 按钮 ---------- */
.btn {
  border:1px solid var(--border-strong);
  background: var(--panel-strong);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 12px;
  cursor:pointer;
  font-size: 15px;
  font-weight:700;
  transition: all .15s ease;
  display:inline-flex; align-items:center; gap:9px;
}
.btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.lg { padding:14px 30px; font-size:16px; }
.btn.primary { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(177,75,255,.35); }
.btn.primary:hover { box-shadow:0 10px 28px rgba(177,75,255,.55); }
.btn.green { background:linear-gradient(135deg,#2bd98a,#15b86f); border-color:transparent; color:#06210f; }
.btn.orange { background:linear-gradient(135deg,#ffb14d,#ff8f1f); border-color:transparent; color:#3a2400; }
.btn.pink { background:linear-gradient(135deg,#ff7ec0,#ff4f9e); border-color:transparent; color:#3a0020; }
.btn.warn { background:linear-gradient(135deg,#ffd24d,#ffae2e); border-color:transparent; color:#3a2a00; }
.btn.blue { background:linear-gradient(135deg,#5cc0ff,#2f9bff); border-color:transparent; color:#04203a; }
.btn.ghost { background:transparent; border-color:var(--border-strong); color:var(--muted); }
.btn.ghost:hover { color:#fff; }
.btn.debug { background:rgba(80,200,255,.12); border-color:rgba(80,200,255,.5); color:#8fe3ff; }
.btn.debug:hover { background:rgba(80,200,255,.22); color:#cdf3ff; }
.btn.danger { background:rgba(255,91,110,.15); border-color:rgba(255,91,110,.4); color:#ff8b97; }
.btn.sm { padding:10px 15px; font-size:14px; border-radius:11px; }
.btn.xs { padding:8px 13px; font-size:13px; border-radius:10px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- 游戏库 ---------- */
.games-page { display:flex; flex-direction:column; height:100%; }
.games-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap; flex:0 0 auto; padding-bottom:16px;
}
.games-title {
  font-size: 30px; font-weight:800; letter-spacing:.5px;
  display:flex; align-items:center; gap:14px;
}
.games-count {
  font-size:16px; font-weight:800; color:#3a0d4a;
  background: linear-gradient(135deg,#ffd76b,#ff8fd0);
  padding:6px 16px; border-radius:22px; min-width:36px; text-align:center;
  box-shadow:0 4px 14px rgba(255,143,208,.35);
}
.games-desc { display:none; }
.games-toolbar { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.search-box {
  display:flex; align-items:center; gap:8px;
  background:var(--panel-strong); border:1px solid var(--border);
  padding:8px 12px; border-radius:10px;
  width:190px; height:36px; box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-box:focus-within {
  border-color: hsla(var(--hue),70%,62%,.55);
  box-shadow: 0 0 0 3px hsla(var(--hue),70%,62%,.12);
}
.search-box .search-ic { opacity:.65; font-size:14px; line-height:1; }
.search-box .input { background:transparent; border:none; outline:none; color:var(--text); font-size:13.5px; width:100%; height:100%; }
.search-box .input::placeholder { color:var(--muted2); font-size:13px; }

.game-list {
  flex:1 1 auto;
  overflow-y:auto;
  padding-right:8px;
  padding-bottom:20px;
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  gap:14px;
  justify-content:stretch;
  perspective: 1200px;
}
@media (max-width:1640px) {
  .game-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width:1380px) {
  .game-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width:1140px) {
  .game-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width:900px) {
  .game-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap:13px; }
}
@media (max-width:640px) {
  .game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
}
.game-list::-webkit-scrollbar { width:10px; }
.game-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:8px; }
.game-card {
  position:relative;
  min-height:76px;
  display:flex; flex-direction:column;
  padding:16px 10px 8px;
  border-radius:14px;
  cursor:pointer;
  overflow:hidden;
  transform-style: preserve-3d;
  transform: translateZ(0);
  background:
    linear-gradient(165deg,
      hsla(var(--hue),82%,64%,.28) 0%,
      hsla(calc(var(--hue) + 18),68%,54%,.16) 45%,
      rgba(22,16,44,.85) 100%);
  border:1px solid hsla(var(--hue),72%,68%,.42);
  box-shadow:
    inset 0 1px 0 hsla(var(--hue),100%,88%,.30),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 8px 20px hsla(var(--hue),70%,20%,.32),
    0 3px 8px rgba(0,0,0,.18);
  transition: transform .32s cubic-bezier(.23,1,.32,1), border-color .25s, box-shadow .32s;
}
.game-card::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(110px 90px at 92% -8%, hsla(var(--hue),100%,76%,.32), transparent 58%),
    radial-gradient(130px 80px at -6% 108%, hsla(calc(var(--hue) + 45),82%,60%,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, transparent 42%);
  pointer-events:none;
  z-index:1;
}
.game-card::after {
  content:""; position:absolute; inset:0; border-radius:16px;
  border:1px solid transparent;
  background: linear-gradient(135deg, hsla(var(--hue),85%,78%,.50), hsla(calc(var(--hue) + 35),78%,60%,.14)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.65;
  transition: opacity .28s;
}
.game-card:hover {
  transform: translateY(-6px) translateZ(12px);
  border-color: hsla(var(--hue),88%,76%,.68);
  box-shadow:
    inset 0 1px 0 hsla(var(--hue),100%,94%,.38),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 18px 40px hsla(var(--hue),70%,28%,.46),
    0 6px 16px rgba(0,0,0,.22);
}
.game-card:hover::after { opacity:1; }
.gc-actions {
  position:absolute; top:6px; right:6px;
  display:flex; align-items:center; gap:4px;
  z-index:3;
  opacity:0;
  transform: translateY(-4px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.game-card:hover .gc-actions {
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(20,14,40,.72);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: all .18s ease;
  width:28px; height:28px;
  min-width:0; overflow:hidden;
  position:relative;
  user-select:none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  backdrop-filter: blur(6px);
}
.icon-btn svg { width:15px; height:15px; }
.icon-btn:hover {
  color:#fff; border-color: rgba(255,255,255,.5);
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
}
.icon-btn.edit-btn:hover {
  background: linear-gradient(135deg, #4dabff, #6c5ce7);
  border-color: rgba(77,171,255,.8);
  box-shadow: 0 5px 14px rgba(77,171,255,.45);
}
.icon-btn.del-btn:hover {
  background: linear-gradient(135deg, #ff5b6e, #ff7a8f);
  border-color: rgba(255,91,110,.8);
  box-shadow: 0 5px 14px rgba(255,91,110,.45);
}
.gc-name {
  flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:15px; font-weight:800; letter-spacing:.3px;
  line-height:1.2;
  color: hsl(var(--hue),95%,97%);
  text-shadow:
    0 1px 3px rgba(0,0,0,.42),
    0 0 18px hsla(var(--hue),88%,38%,.55);
  padding:6px 2px 2px;
  position:relative; z-index:2;
  min-height:28px;
}
.empty { color:var(--muted2); padding:70px; text-align:center; font-size:16px; }

.gc-status {
  margin-bottom:20px; padding:13px 17px; border-radius:13px;
  font-size:14.5px; font-weight:600;
  background:var(--panel-strong); border:1px solid var(--border);
}
.gc-status.ok { background:rgba(43,217,138,.14); border-color:rgba(43,217,138,.4); color:#9ff0c8; }
.gc-status.warn { background:rgba(255,159,67,.14); border-color:rgba(255,159,67,.4); color:#ffce9e; }
.gc-status.hidden { display:none; }

/* ---------- 通用面板 ---------- */
.panel {
  background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding:24px; margin-bottom:22px;
  backdrop-filter: blur(6px);
}
.panel h2 { font-size:20px; font-weight:800; margin-bottom:7px; }
.panel .sub { color:var(--muted); font-size:14px; margin-bottom:18px; line-height:1.6; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step {
  display:flex; gap:16px; align-items:flex-start;
  padding:18px; border-radius:13px; background:var(--panel-strong); border:1px solid var(--border);
}
.step .num {
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:var(--grad); color:#fff; display:flex;align-items:center;justify-content:center;
  font-weight:800; font-size:16px; box-shadow:0 6px 16px rgba(177,75,255,.4);
}
.step .st-body { flex:1; }
.step .st-body b { font-size:16px; }
.step .st-body p { color:var(--muted); font-size:13.5px; margin-top:5px; line-height:1.6; }
.step .btn { margin-top:12px; }

/* ---------- 语音面板 ---------- */
.vp-wrap { display:grid; grid-template-columns:1fr; gap:20px; }
.vp-now {
  display:flex; align-items:center; gap:13px;
  padding:17px 22px; border-radius:14px;
  background: linear-gradient(135deg, rgba(177,75,255,.18), rgba(255,93,177,.12));
  border:1px solid rgba(255,93,177,.35);
  font-size:16px; font-weight:700;
}
.vp-dot { width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 11px var(--green);flex:0 0 12px; }
.vp-dot.idle { background:var(--muted2); box-shadow:none; }
.vp-section { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px; }
.vp-section h3 { font-size:17px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.vp-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.vp-cat {
  background:var(--panel-strong); border:1px solid var(--border); border-radius:13px; padding:16px;
  transition: border-color .15s ease;
}
.vp-cat:hover { border-color:var(--border-strong); }
.vp-cat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.vp-cat-name { font-size:16px; font-weight:800; display:flex; align-items:center; gap:9px; }
.vp-badge {
  font-size:13px; font-weight:800; color:#3a0d4a;
  background:linear-gradient(135deg,#ffd76b,#ff8fd0);
  padding:4px 12px; border-radius:16px; min-width:28px; text-align:center;
}
.vp-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.vp-actions .btn { font-size:13.5px; padding:8px 12px; border-radius:10px; }
.vp-list { max-height:150px; overflow:auto; display:flex; flex-direction:column; gap:7px; }
.vp-list::-webkit-scrollbar { width:8px; }
.vp-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:6px; }
.vp-item {
  display:flex; align-items:center; justify-content:space-between; gap:9px;
  padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.045);
  font-size:13.5px; border:1px solid transparent;
}
.vp-item:hover { border-color:var(--border); }
.vp-item .vp-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; color:var(--text); }
.vp-item .vp-item-actions { display:flex; gap:6px; flex:0 0 auto; }
.vp-item .mini-btn {
  width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:var(--muted); cursor:pointer;
  display:flex;align-items:center;justify-content:center; transition:all .14s;
}
.vp-item .mini-btn:hover { background:#fff; color:#1a1033; }
.vp-item .mini-btn.del:hover { background:var(--red); color:#fff; border-color:var(--red); }
.vp-empty { color:var(--muted2); font-size:13px; padding:6px 2px; }

.vp-rec { display:flex; align-items:center; gap:13px; flex-wrap:wrap; padding:18px; border-radius:13px; background:var(--panel-strong); border:1px solid var(--border); margin-bottom:18px; }
.vp-rec-state { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; }
.vp-rec-dot { width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red); animation:pulse 1.1s infinite; }
.vp-rec-dot.off { background:var(--muted2); box-shadow:none; animation:none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.vp-rec .cat-select { padding:10px 13px; border-radius:11px; background:var(--panel-strong); border:1px solid var(--border); color:var(--text); font-size:14.5px; }
.vp-rec .rec-name { flex:1; min-width:170px; padding:10px 13px; border-radius:11px; background:var(--panel-strong); border:1px solid var(--border); color:var(--text); font-size:14.5px; }
.vp-rec .rec-name::placeholder { color:var(--muted2); }
.vp-slider-row { display:flex; align-items:center; gap:13px; margin-top:8px; }
.vp-slider-row label { font-size:14px; color:var(--muted); min-width:92px; }
.vp-slider-row input[type=range] { flex:1; accent-color: var(--primary); height:6px; }
.vp-slider-row .val { font-size:14px; color:var(--text); min-width:50px; text-align:right; font-weight:700; }

.vp-bgm-row { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:10px; }
.vp-bgm-info { font-size:13.5px; color:var(--muted); }

/* ---------- 设置 ---------- */
.settings-page { max-width:780px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); }
.set-row:last-child { border-bottom:none; }
.set-row .set-label b { font-size:16px; }
.set-row .set-label p { color:var(--muted); font-size:13.5px; margin-top:4px; }
.toggle { position:relative; width:54px; height:30px; flex:0 0 54px; cursor:pointer; }
.toggle input { display:none; }
.toggle .tk { position:absolute; inset:0; border-radius:20px; background:rgba(255,255,255,.14); transition:all .2s; }
.toggle .tk::before { content:""; position:absolute; width:24px;height:24px;border-radius:50%; background:#fff; top:3px; left:3px; transition:all .2s; }
.toggle input:checked + .tk { background:var(--grad); }
.toggle input:checked + .tk::before { transform:translateX(24px); }
.set-actions { margin-top:26px; display:flex; gap:12px; }
.input, input.input, .field input, .field textarea, .field select {
  width:100%; padding:12px 15px; border-radius:12px;
  background:var(--panel-strong); border:1px solid var(--border); color:var(--text);
  font-size:14.5px; outline:none; font-family:inherit; line-height:1.3;
}
.input:focus, input.input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color:var(--primary); }
.input.sm, input.input.sm { padding:9px 12px; font-size:13.5px; border-radius:10px; }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a99fce' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
select.input.sm { background-position:right 10px center; padding-right:30px; }
.field { display:block; margin-bottom:15px; }
.field > span { display:block; font-size:14px; color:var(--muted); margin-bottom:8px; }
.tip { font-size:13px; color:var(--muted2); line-height:1.6; margin-top:7px; }
.tip code { background:rgba(255,255,255,.1); padding:1px 6px; border-radius:5px; color:var(--text); }

/* 弹窗 */
.modal-mask {
  position:fixed; inset:0; background:rgba(8,4,18,.66);
  display:flex; align-items:center; justify-content:center; z-index:999;
  opacity:0; pointer-events:none; transition:opacity .18s ease; backdrop-filter:blur(3px);
}
.modal-mask.show { opacity:1; pointer-events:auto; }
.modal {
  width:min(560px,92vw); max-height:88vh; overflow:auto;
  background: linear-gradient(180deg,#1c1238,#160d2c);
  border:1px solid var(--border-strong); border-radius:18px;
  padding:28px; box-shadow:var(--shadow);
}
.modal h3 { font-size:22px; margin-bottom:18px; font-weight:800; }
.modal .modal-body { font-size:14.5px; line-height:1.7; }
.modal .modal-actions { margin-top:24px; display:flex; justify-content:flex-end; gap:12px; }
.modal .modal-actions .btn { font-size:15px; padding:13px 26px; }
.modal-prompt-body { margin-bottom:12px; color:var(--text); }
.modal-prompt-input {
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:15px;
  background:#0f0a1e; border:1px solid var(--border-strong); border-radius:10px;
  color:var(--text); outline:none; transition:border-color .15s ease;
}
.modal-prompt-input:focus { border-color:#7c5cff; }

/* 防封 / 特效 等弹窗内卡片 */
.ab-note { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.ab-hero { background:linear-gradient(135deg, rgba(177,75,255,.22), rgba(255,93,177,.16)); border:1px solid rgba(255,93,177,.35); border-radius:14px; padding:22px; margin-bottom:16px; text-align:center; }
.ab-hero-title { font-size:20px; font-weight:800; }
.ab-hero-desc { font-size:13.5px; color:var(--muted); margin:9px 0 18px; }
.ab-master { cursor:pointer; }
.ab-master-btn { display:inline-block; padding:13px 28px; border-radius:24px; font-weight:800; font-size:15px; background:rgba(255,255,255,.1); border:1px solid var(--border-strong); }
.ab-master input { display:none; }
.ab-layers { display:flex; flex-direction:column; gap:11px; }
.ab-layer { display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:12px; background:var(--panel-strong); border:1px solid var(--border); }
.ab-layer.on { border-color:rgba(43,217,138,.4); background:rgba(43,217,138,.08); }
.al-ic { font-size:24px; }
.ab-layer b { font-size:16px; }
.ab-layer i { display:block; font-size:13px; color:var(--muted); margin-top:2px; font-style:normal; }
.ab-advanced { margin-top:14px; }
.ab-advanced summary { cursor:pointer; color:var(--muted); font-size:14.5px; padding:8px 0; }
.mini-chk { font-size:14.5px; }
.fx-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.fx-item { display:flex; flex-direction:column; gap:6px; padding:17px; border-radius:12px; background:var(--panel-strong); border:1px solid var(--border); cursor:pointer; text-align:left; transition:all .15s; }
.fx-item:hover { border-color:var(--primary); transform:translateY(-2px); }
.fx-item b { font-size:16px; }
.fx-item span { font-size:13px; color:var(--muted); }
.clone-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* flash 提示 */
#flash {
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  background:rgba(20,12,40,.96); border:1px solid var(--border-strong);
  color:#fff; padding:14px 24px; border-radius:13px; font-size:14.5px; font-weight:700;
  box-shadow:var(--shadow); opacity:0; transition:opacity .25s ease; z-index:9999; pointer-events:none;
  max-width:80vw;
}

.hidden { display:none !important; }
.view { display:none; }
.view.active { display:block; animation:fadeIn .22s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* 占位视图（渲染器未就绪时短暂出现） */
.view-title { font-size:30px; font-weight:800; margin-bottom:12px; }
.view-desc { color:var(--muted); font-size:15px; line-height:1.7; }

/* ============ 卡密激活弹窗（v1.2.9 全新设计） ============ */
#activation-overlay, #disclaimer-overlay {
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
}
.act-bg {
  position:absolute; inset:0;
  background: radial-gradient(900px 500px at 50% 30%, #2a1452 0%, transparent 65%),
              radial-gradient(600px 400px at 50% 85%, #1a0a3e 0%, transparent 60%),
              rgba(6,3,14,.85);
  backdrop-filter: blur(14px);
  animation: actFadeIn .3s ease;
}
@keyframes actFadeIn { from { opacity:0; } to { opacity:1; } }
.act-card {
  position:relative; z-index:1;
  width: min(420px, 92vw); max-height:88vh; overflow:auto;
  background: linear-gradient(160deg, #1e1338 0%, #150c2a 50%, #0e0720 100%);
  border:1px solid rgba(177,75,255,.35);
  border-radius:24px;
  padding:40px 36px 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55),
              0 0 0 1px rgba(255,255,255,.04),
              inset 0 1px 0 rgba(255,255,255,.07);
  text-align:center;
  animation: actSlideUp .4s cubic-bezier(.22,1,.36,1);
}
@keyframes actSlideUp { from { opacity:0; transform:translateY(24px) scale(.96); } to { opacity:1; transform:none; } }
/* 光晕装饰 */
.act-card::before {
  content:''; position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:120px; height:4px; border-radius:4px;
  background: linear-gradient(90deg, transparent, #b14bff, transparent);
  box-shadow: 0 0 16px rgba(177,75,255,.6);
}
.act-close {
  position:absolute; top:14px; right:14px; width:32px; height:32px;
  border-radius:50%; border:none; background:rgba(255,255,255,.06);
  color:var(--muted); font-size:15px; cursor:pointer; transition:all .15s;
  display:flex; align-items:center; justify-content:center;
}
.act-close:hover { background:rgba(255,107,107,.2); color:#ff6b6b; transform:rotate(90deg); }
/* YG Logo */
.act-logo-wrap { position:relative; width:72px; height:72px; margin:0 auto 18px; }
.act-logo-circle {
  position:relative; z-index:1; width:72px; height:72px;
  border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:900; color:#fff; letter-spacing:1px;
  background: linear-gradient(135deg, #2a1850, #100820);
  border:1.5px solid rgba(177,75,255,.4);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.act-logo-glow {
  position:absolute; inset:-8px; border-radius:24px;
  background: radial-gradient(circle, rgba(177,75,255,.25), transparent 70%);
  animation: actPulse 2.5s ease-in-out infinite;
}
@keyframes actPulse { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:.8; transform:scale(1.08); } }
.act-card h2 { font-size:24px; font-weight:800; letter-spacing:.5px; color:#fff; }
.act-subtitle { color:var(--muted); font-size:13.5px; margin:8px 0 24px; }
/* 输入框 */
.act-field-wrap { position:relative; margin-bottom:16px; }
.act-input {
  width:100%; padding:14px 18px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1);
  color:#fff; font-size:16px; text-align:center; letter-spacing:1px;
  outline:none; transition:all .18s;
}
.act-input::placeholder { color:rgba(255,255,255,.25); letter-spacing:.5px; }
.act-input:focus {
  border-color:rgba(177,75,255,.55);
  background:rgba(177,75,255,.06);
  box-shadow:0 0 0 4px rgba(177,75,255,.12);
}
/* 激活按钮 */
.act-btn {
  position:relative; overflow:hidden;
  width:100%; padding:14px; border:none; border-radius:14px;
  background:linear-gradient(135deg, #9b3fff 0%, #7c2fd6 50%, #6a1fb8 100%);
  color:#fff; font-size:16px; font-weight:700; letter-spacing:2px;
  cursor:pointer; transition:all .2s;
  box-shadow: 0 6px 20px rgba(123,47,214,.45), inset 0 1px 0 rgba(255,255,255,.15);
}
.act-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(123,47,214,.55), inset 0 1px 0 rgba(255,255,255,.2); }
.act-btn:active { transform:translateY(0); }
.act-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.act-btn-shine {
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition:left .6s;
}
.act-btn:hover .act-btn-shine { left:120%; }
/* 复选项 */
.act-opts { display:flex; justify-content:center; gap:24px; margin:20px 0 8px; font-size:13px; color:var(--muted); }
.act-check { display:flex; align-items:center; gap:7px; cursor:pointer; transition:color .15s; }
.act-check:hover { color:rgba(255,255,255,.7); }
.act-check input { width:16px; height:16px; accent-color:#b14bff; cursor:pointer; }
/* 状态文字 */
.act-status { min-height:22px; margin-top:14px; font-size:13.5px; font-weight:600; }
/* 许可信息 */
.act-license {
  margin-top:14px; padding:14px 16px; border-radius:12px;
  background:linear-gradient(135deg, rgba(43,217,138,.1), rgba(43,217,138,.04));
  border:1px solid rgba(43,217,138,.3);
  color:#9ff0c8; font-size:13px; line-height:1.7; text-align:left;
}

/* ============ 免责声明弹窗 ============ */
.disc-bg {
  position:absolute; inset:0;
  background: radial-gradient(1000px 600px at 50% -20%, #2a1452 0%, transparent 60%),
              rgba(8,4,18,.78);
  backdrop-filter: blur(8px);
}
.disc-card {
  position:relative; z-index:1;
  width: min(440px,92vw); max-height:88vh; overflow:auto;
  background: linear-gradient(180deg, #1c1238, #130a26);
  border:1px solid var(--border-strong); border-radius:22px;
  padding:36px 34px 30px; box-shadow:var(--shadow);
  text-align:left;
}
.disc-card h2 { font-size:26px; font-weight:800; letter-spacing:.5px; text-align:center; }
.disc-card > p { color:var(--muted); font-size:14px; margin:10px 0 22px; }
.disc-text { max-height:48vh; overflow:auto; padding:16px; border-radius:12px; background:var(--panel-strong); border:1px solid var(--border); margin:16px 0; font-size:13.5px; line-height:1.8; color:var(--muted); }
.disc-text p { margin-bottom:10px; }
.disc-text p:last-child { margin-bottom:0; }
.disc-check { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text); cursor:pointer; }
.disc-check input { width:18px;height:18px; accent-color:var(--primary); }
.disc-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:22px; }
.disc-actions .btn { padding:12px 22px; }

/* ============ 智能播报（直播 + 语音包） ============ */
.console { display:flex; flex-direction:column; gap:18px; }

/* 开播引导条：进来一眼知道「选游戏 → 开播」 */
.get-started-bar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background: var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:14px 18px;
}
.gsb-step { display:flex; align-items:center; gap:10px; opacity:.7; }
.gsb-step.done { opacity:1; }
.gsb-dot { width:14px; height:14px; border-radius:50%; background:var(--muted2); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); flex:0 0 auto; }
.gsb-dot.ok { background:var(--green); box-shadow:0 0 10px rgba(45,212,140,.6); }
.gsb-txt { display:flex; flex-direction:column; line-height:1.25; }
.gsb-txt b { font-size:14.5px; font-weight:800; color:var(--text); }
.gsb-txt span { font-size:12px; color:var(--muted); }
.gsb-arrow { color:var(--muted2); font-size:18px; font-weight:800; }
.gsb-hint {
  margin-left:auto; font-size:13px; color:var(--primary); font-weight:700;
  background:rgba(177,75,255,.12); border:1px solid rgba(177,75,255,.3);
  padding:7px 13px; border-radius:10px;
}

/* 开播前声音设置条：放在开启直播按钮之前，必须先选来源 */
.prelive-bar {
  background: linear-gradient(135deg, rgba(255,91,110,.12), rgba(255,159,67,.08));
  border:1px solid rgba(255,91,110,.35);
  border-radius:16px; padding:16px 20px;
}
.prelive-bar.vp-flash { animation: flashBorder 1.1s ease 3; }
@keyframes flashBorder {
  0%,100% { border-color:rgba(255,91,110,.35); box-shadow:none; }
  50% { border-color:var(--red); box-shadow:0 0 18px rgba(255,91,110,.55); }
}
.prelive-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.prelive-title { font-size:16px; font-weight:800; color:#fff; }
.prelive-hint { font-size:13px; font-weight:700; color:var(--red); background:rgba(255,91,110,.12); border:1px solid rgba(255,91,110,.35); padding:6px 12px; border-radius:10px; }
.prelive-hint.ok { color:var(--green); background:rgba(43,217,138,.12); border-color:rgba(43,217,138,.4); }
.prelive-body { display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap; }
.prelive-group { display:flex; flex-direction:column; gap:10px; }
.prelive-label { font-size:13.5px; font-weight:700; color:var(--text); }
.prelive-label small { color:var(--muted); font-weight:600; }
.prelive-checks { display:flex; flex-wrap:wrap; gap:10px 12px; }
.src-pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px;
  background:rgba(10,6,26,.55); border:1px solid rgba(255,255,255,.14);
  color:var(--text); font-size:13.5px; font-weight:700; cursor:pointer;
  transition: all .14s ease;
  user-select:none;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.src-pill:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.30); transform: translateY(-1px); }
.src-pill.on {
  background: linear-gradient(135deg, rgba(255,91,110,.85), rgba(255,95,177,.85));
  border-color: rgba(255,95,110,.7);
  color:#fff;
  box-shadow: 0 4px 14px rgba(255,91,110,.42);
}
.src-pill.on:hover { filter: brightness(1.08); }
.prelive-divider { width:1px; align-self:stretch; background:rgba(255,255,255,.12); min-height:60px; }
.prelive-mon { min-width:220px; align-items:flex-start; }
.prelive-mon-row { display:flex; align-items:center; gap:14px; }
.prelive-mon-state { font-size:12.5px; color:var(--muted); line-height:1.45; max-width:260px; }
/* ★ 强制监听开关（button 实现，完全脱离 checkbox 兼容问题） */
.mon-toggle {
  position:relative;
  display:inline-block;
  width:68px; height:34px;
  flex:0 0 68px;
  align-self:flex-start;
  border:none;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border-radius:34px; cursor:pointer;
  padding:0; margin:0;
  transition: background .25s, box-shadow .25s, transform .12s;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.35),
    inset 0 -1px 1px rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.22);
  user-select:none;
  overflow:hidden;
}
.mon-toggle::before {
  content:"OFF";
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:10px; font-weight:800; letter-spacing:.4px;
  color: rgba(255,255,255,.55);
  transition: opacity .2s;
}
.mon-toggle:hover { background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.14)); }
.mon-toggle:active { transform: scale(0.96); }
.mon-toggle .mon-toggle-knob {
  position:absolute; top:3px; left:3px;
  width:28px; height:28px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e8e8e8 60%, #d0d0d0 100%);
  box-shadow:
    0 2px 5px rgba(0,0,0,.35),
    inset 0 -1px 1px rgba(0,0,0,.12),
    inset 0 1px 1px rgba(255,255,255,.9);
  transition: left .25s cubic-bezier(.34,1.56,.64,1);
}
.mon-toggle.on {
  background: linear-gradient(135deg,#2bd98a,#15b86f);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.18),
    inset 0 -1px 1px rgba(255,255,255,.18),
    0 4px 14px rgba(43,217,138,.45);
}
.mon-toggle.on::before { content:"ON"; left:12px; right:auto; color:rgba(255,255,255,.92); opacity:1; }
.mon-toggle.on:hover { background: linear-gradient(135deg,#34e394,#1bc97a); }
.mon-toggle.on .mon-toggle-knob { left:37px; }
.prelive-fname { font-size:12px; color:var(--muted); white-space:pre-line; line-height:1.5; }

/* 语音面板内"游戏专属语音绑定状态" */
.vp-bind { margin-top:12px; font-size:13px; padding:10px 13px; border-radius:11px; line-height:1.5; }
.vp-bind.off { color:var(--muted); background:var(--panel-strong); border:1px solid var(--border); }
.vp-bind.warn { color:#ffd479; background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.4); }
.vp-bind.on { color:#9bf5cf; background:rgba(45,212,140,.12); border:1px solid rgba(45,212,140,.4); }
.vp-bind b { color:#fff; }

.live-bar {
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(177,75,255,.16), rgba(255,93,177,.10));
  border:1px solid rgba(255,93,177,.32);
  border-radius:16px; padding:20px 24px;
}
.live-bar-hero { box-shadow:0 12px 36px rgba(177,75,255,.22); }
.lb-info { display:flex; flex-direction:column; gap:6px; }
.lb-title { font-size:22px; font-weight:800; }
.lb-sub { font-size:13.5px; color:var(--muted); max-width:420px; line-height:1.5; }
.lb-act { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }

/* 自定义下拉：替代原生 select，避免 Windows 默认白色背景 */
.custom-select { position:relative; display:inline-block; }
.custom-select select { position:absolute; opacity:0; pointer-events:none; height:0; width:0; }
.cs-trigger {
  min-width: 230px; max-width: 420px;
  padding:11px 38px 11px 16px; border-radius:12px;
  background:var(--panel-strong); border:1px solid var(--border-strong);
  color:var(--text); font-size:14px; font-weight:600; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a99fce' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  transition:all .15s;
}
.cs-trigger:hover { background-color:rgba(255,255,255,.08); border-color:var(--primary); box-shadow:0 0 0 3px rgba(177,75,255,.14); }

/* ===== 下拉面板 — v1.2.2 全新设计：玻璃拟态 + 卡片式选项 + sticky 头部 ===== */
.cs-dropdown {
  position:absolute; top:0; left:0; z-index:10000;
  min-width:200px; max-width:calc(100vw - 24px);
  max-height:min(480px, 65vh); overflow-y:auto;
  padding:0;
  background: linear-gradient(180deg, rgba(36,21,68,.97), rgba(22,13,46,.97));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border:1px solid rgba(177,75,255,.35); border-radius:16px;
  box-shadow:0 20px 56px rgba(0,0,0,.6), 0 0 0 1px rgba(177,75,255,.06), inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0; pointer-events:none; transform:translateY(-8px) scale(.97);
  transition:opacity .18s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1);
}
.cs-dropdown.open { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }

/* sticky 头部：标题 + 关闭按钮，不随选项滚动 */
.cs-dropdown-header {
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px 10px;
  background:linear-gradient(180deg, rgba(36,21,68,.98) 70%, rgba(36,21,68,0) 100%);
  border-radius:16px 16px 0 0;
}
.cs-dropdown-title {
  font-size:12px; font-weight:800; color:var(--primary); letter-spacing:.6px;
  display:flex; align-items:center; gap:7px;
}
.cs-dropdown-title::before {
  content:''; width:4px; height:14px; border-radius:3px;
  background:linear-gradient(180deg, var(--primary), var(--primary2));
}
.cs-dropdown-body { padding:0 8px 10px; }

/* 选项卡片 */
.cs-option {
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; margin:2px 0; border-radius:11px;
  font-size:13px; color:var(--muted); line-height:1.4;
  cursor:pointer; border:1px solid transparent;
  background:rgba(255,255,255,.015);
  position:relative; overflow:hidden;
  transition:all .15s cubic-bezier(.16,1,.3,1);
}
.cs-option::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:3px;
  background:linear-gradient(180deg, var(--primary), var(--primary2));
  transition:height .15s;
}
.cs-option .cs-ico {
  flex:0 0 34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; background:rgba(177,75,255,.1);
  border:1px solid rgba(177,75,255,.12);
  transition:all .15s;
}
.cs-option .cs-txt { flex:1 1 auto; min-width:0; }
.cs-option .cs-name {
  display:block; color:var(--text); font-weight:600; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cs-option .cs-tag { display:block; font-size:11px; color:var(--muted2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-option:last-child { margin-bottom:0; }
.cs-option:hover {
  background:rgba(177,75,255,.1); border-color:rgba(177,75,255,.22); color:var(--text);
  transform:translateX(2px);
}
.cs-option:hover::before { height:60%; }
.cs-option:hover .cs-ico { background:rgba(177,75,255,.18); border-color:rgba(177,75,255,.25); }
.cs-option.selected {
  background:linear-gradient(135deg, rgba(177,75,255,.16), rgba(255,93,177,.08));
  border-color:rgba(255,93,177,.3);
}
.cs-option.selected::before { height:70%; }
.cs-option.selected .cs-ico {
  background:linear-gradient(135deg, rgba(177,75,255,.28), rgba(255,93,177,.16));
  border-color:rgba(255,93,177,.35);
}
.cs-option.selected .cs-name { color:#fff; }

/* 分组标签 */
.cs-group {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px 4px; font-size:10.5px; font-weight:800; letter-spacing:.8px;
  color:var(--primary); opacity:.85;
}
.cs-group::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(177,75,255,.2), transparent); }
.cs-group:first-child { padding-top:6px; }

/* 关闭按钮 — 在头部右侧 */
.cs-close {
  width:26px; height:26px; border-radius:8px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.55); font-size:14px; font-weight:800; line-height:1;
  cursor:pointer; user-select:none; transition:all .15s;
}
.cs-close:hover { background:rgba(255,91,110,.4); border-color:rgba(255,91,110,.5); color:#fff; }
.cs-close:active { transform:scale(.92); }

/* 美化滚动条 */
.cs-dropdown::-webkit-scrollbar { width:8px; }
.cs-dropdown::-webkit-scrollbar-thumb { background:rgba(177,75,255,.25); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.cs-dropdown::-webkit-scrollbar-thumb:hover { background:rgba(177,75,255,.45); background-clip:padding-box; }
.cs-dropdown::-webkit-scrollbar-track { background:transparent; }

.btn.glow { box-shadow:0 0 0 0 rgba(255,93,177,.55); animation: glowpulse 2.2s infinite; }
@keyframes glowpulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,93,177,.5)} 50%{box-shadow:0 0 22px 4px rgba(255,93,177,.45)} }
.lb-vol { display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; }
.lb-vol-item { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
.lb-vol-item input[type=range] { width:120px; accent-color:var(--primary); height:6px; }
.lb-vol-item b { color:var(--text); min-width:42px; text-align:right; font-weight:700; }

.console-row { display:grid; grid-template-columns:1fr; gap:18px; }
.console-row.cr-full { grid-template-columns:1fr; }
.audio-panel { margin-bottom:0; }
.audio-panel .audio-panel-head { cursor:pointer; user-select:none; transition: background .15s; padding:6px 10px; margin:-6px -10px 0 -10px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:17px; font-weight:800; }
.audio-panel .audio-panel-head:hover { background: rgba(255,255,255,.05); }
.audio-panel .audio-panel-title { display:flex; align-items:center; gap:10px; }
.audio-panel .audio-panel-toggle { font-size:13px; color:var(--muted2); transition: transform .2s; flex:0 0 auto; }
.audio-panel h3 svg, .audio-panel .audio-panel-head svg { width:20px; height:20px; }
/* 整块「语音包与自动解说」面板默认收起：折叠 body */
.audio-panel .audio-panel-body { max-height:4000px; opacity:1; overflow:hidden; transition: max-height .28s ease, opacity .2s ease, margin-top .2s ease; }
.audio-panel.audio-panel-collapsed .audio-panel-body { max-height:0; opacity:0; margin-top:0; }
.audio-panel.audio-panel-collapsed .audio-panel-head { margin-bottom:0; }

/* ===== v0.1.86 傻瓜式 3 大卡片 ===== */
.vp-bigcard { border-radius:16px; margin-bottom:14px; overflow:hidden; border:1px solid var(--border-strong); }
.vp-bigcard[data-step="1"] { background:linear-gradient(135deg, rgba(43,217,138,.10), rgba(255,159,67,.06)); border-color:rgba(43,217,138,.30); }
.vp-bigcard[data-step="2"] { background:linear-gradient(135deg, rgba(177,75,255,.10), rgba(255,93,177,.06)); border-color:rgba(177,75,255,.30); }
.vp-bigcard[data-step="3"] { background:linear-gradient(135deg, rgba(255,91,110,.10), rgba(255,159,67,.06)); border-color:rgba(255,91,110,.30); }
.vp-bc-head { display:flex; align-items:center; gap:12px; padding:14px 18px; font-size:16px; font-weight:800; cursor:pointer; user-select:none; transition: background .15s; }
.vp-bc-head:hover { background:rgba(255,255,255,.05); }
.vp-bc-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:15px; font-weight:900; color:#fff; flex:0 0 28px; }
.vp-bigcard[data-step="1"] .vp-bc-num { background:var(--green); box-shadow:0 0 12px rgba(43,217,138,.5); }
.vp-bigcard[data-step="2"] .vp-bc-num { background:var(--primary); box-shadow:0 0 12px rgba(177,75,255,.5); }
.vp-bigcard[data-step="3"] .vp-bc-num { background:var(--red); box-shadow:0 0 12px rgba(255,91,110,.5); }
.vp-bc-title { flex:1; }
.vp-bc-badge { font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:20px; background:rgba(255,255,255,.10); color:var(--text); white-space:nowrap; }
.vp-bc-badge.ok { background:rgba(43,217,138,.18); color:var(--green); }
.vp-bc-badge.warn { background:rgba(255,159,43,.18); color:var(--orange); }
.vp-bc-badge.off { background:rgba(125,113,158,.18); color:var(--muted2); }
.vp-bc-toggle { font-size:13px; color:var(--muted2); flex:0 0 auto; margin-left:6px; transition: transform .2s; }
.vp-bc-body { padding:0 18px 16px; max-height:2000px; opacity:1; overflow:hidden; transition: all .25s ease; }
.vp-bigcard.collapsed .vp-bc-body { max-height:0; opacity:0; padding:0 18px; }

/* 3 个大动作按钮 */
.vp-quick-actions { display:flex; gap:12px; margin-bottom:12px; }
.vp-qa-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:16px 8px; border-radius:13px; border:2px solid rgba(43,217,138,.35); background:rgba(43,217,138,.10); color:var(--text); font-size:24px; cursor:pointer; transition:all .15s; text-align:center; line-height:1.4; }
.vp-qa-btn:hover { transform:translateY(-2px); border-color:var(--green); background:rgba(43,217,138,.18); box-shadow:0 6px 20px rgba(43,217,138,.20); }
.vp-qa-btn:active { transform:translateY(0); }
.vp-qa-btn b { font-size:15px; font-weight:800; }
.vp-qa-btn small { font-size:11.5px; color:var(--muted); }
.vp-qa-file { cursor:pointer; }

/* 导入分类条 */
.vp-import-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:11px; background:rgba(255,255,255,.06); border:1px solid var(--border); margin-bottom:10px; font-size:13px; }

/* 自动解说行 */
.vp-auto-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; background:rgba(177,75,255,.08); border:1px solid rgba(177,75,255,.25); margin-bottom:12px; }
.vp-auto-info { flex:1; }
.vp-auto-t { font-size:16px; font-weight:800; display:flex; align-items:center; gap:12px; }
.vp-auto-d { font-size:12.5px; color:var(--muted); margin-top:4px; }
.switch-lg { transform:scale(1.25); transform-origin:center; }
.vp-try-row { display:flex; gap:10px; align-items:center; margin:10px 0; }

/* 自动报时独立视图（左侧导航「自动报时」） */
.clock-panel { padding:28px; max-width:960px; }
.clock-header { margin-bottom:8px; }
.clock-header h2 { font-size:28px; font-weight:800; margin:0 0 10px; display:flex; align-items:center; gap:12px; }
.clock-subtitle { font-size:14px; color:var(--muted); line-height:1.7; max-width:760px; margin:0; }
.clock-subtitle strong { color:var(--text); }

.clock-card { border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border:1px solid var(--border-strong); padding:22px; margin-top:18px; box-shadow:0 8px 28px rgba(0,0,0,.18); }
.clock-card h3 { margin:0 0 10px; font-size:17px; font-weight:800; display:flex; align-items:center; gap:10px; color:var(--text); }
.clock-card h3 svg { width:20px; height:20px; color:var(--primary); }
.clock-desc { font-size:13.5px; color:var(--muted); line-height:1.7; margin:0 0 18px; }
.clock-desc strong { color:var(--text); }
.clock-sections { display:grid; grid-template-columns:1fr; gap:18px; }

/* 主控制区：开关 + 间隔 + 立即报时 */
.clock-main-card { background:linear-gradient(135deg, rgba(177,75,255,.12), rgba(255,93,177,.06)); border-color:rgba(177,75,255,.30); }
.clock-main-row { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.clock-left { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:120px; padding-top:6px; }
.clock-switch-wrap { display:flex; flex-direction:row; align-items:center; gap:10px; }

/* 大号 Toggle Switch */
.clock-switch {
  position:relative; width:76px; height:40px; border-radius:999px; border:none;
  background:#3e3d52; cursor:pointer; padding:0; outline:none;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  transition:background .25s ease, box-shadow .25s ease;
}
.clock-switch:hover { background:#48465d; }
.clock-switch.on { background:linear-gradient(135deg, #2bd98a, #18c97d); box-shadow:inset 0 2px 6px rgba(0,0,0,.25), 0 0 16px rgba(43,217,138,.45); }
.clock-switch.on:hover { background:linear-gradient(135deg, #36e596, #1fd68a); }
.clock-switch-knob {
  position:absolute; left:4px; top:4px; width:32px; height:32px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.clock-switch.on .clock-switch-knob { transform:translateX(36px); }

.clock-state { text-align:left; display:flex; flex-direction:column; gap:2px; }
.clock-state-text { font-size:14px; font-weight:800; color:var(--text); }
.clock-state-hint { font-size:11.5px; color:var(--muted2); }

.clock-actions { flex:1; min-width:260px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.clock-sm-btn { font-size:13px !important; padding:7px 12px !important; border-radius:9px !important; white-space:nowrap; line-height:1.2; }
.clock-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.clock-label { font-size:14px; color:var(--text2); font-weight:700; min-width:70px; }
.clock-tip { font-size:12.5px; color:var(--muted2); }

/* 自定义下拉在报时面板的适配 */
.clock-select .cs-trigger { min-width:220px; max-width:340px; background:var(--panel-strong); }
.clock-voice-select .cs-trigger { min-width:260px; max-width:420px; }

.clock-now-btn { display:inline-flex; align-items:center; gap:8px; }
.clock-now-btn svg { width:16px; height:16px; }

/* 已导入报时文件夹路径 */
.clock-folder-path { font-size:13px; color:var(--text2); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 14px; word-break:break-all; }
/* 报时录制状态提示 */
.clock-rec-status { font-size:12.5px; color:var(--orange); min-height:16px; margin-top:2px; }
.clock-now-playing { font-size:13px; color:#7ef0a0; min-height:18px; margin-top:4px; font-weight:600; }
.clock-now-playing:empty { min-height:0; }
/* 报时时间表：可收缩头部 */
.clock-table-head { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; cursor:pointer; padding:0 0 8px; text-align:left; }
.clock-table-head-title { font-size:17px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:10px; }
.clock-count-badge { font-size:12px; font-weight:700; color:var(--primary); background:rgba(177,75,255,.14); border-radius:999px; padding:2px 9px; }
.clock-collapse-arrow { font-size:15px; color:var(--muted2); margin-left:auto; }
/* 报时时间表表格 */
.clock-table-wrap { margin-top:6px; }
.clock-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.clock-table thead th { text-align:left; font-size:12px; color:var(--muted2); font-weight:700; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.clock-table tbody tr { border-bottom:1px solid rgba(255,255,255,.05); }
.clock-table tbody tr:hover { background:rgba(255,255,255,.03); }
.clock-table td { padding:8px 10px; vertical-align:middle; }
.clock-cell-time { width:150px; }
.clock-cell-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.clock-cell-play { width:70px; text-align:center; }
.clock-cell-play .clock-play-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:6px 12px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(124,92,255,.45); background:rgba(124,92,255,.14);
  color:#cbb9ff; font-size:13px; font-weight:600; transition:all .15s; white-space:nowrap;
}
.clock-cell-play .clock-play-btn:hover { background:rgba(124,92,255,.3); color:#fff; }
.clock-cell-play .clock-play-btn.playing { background:#2bd98a; border-color:#2bd98a; color:#001; }
.clock-cell-edit { width:48px; text-align:center; }
.clock-cell-del { width:48px; text-align:center; }
/* 录制电平表（声音滚动条） */
.clock-rec-meter-wrap { display:flex; align-items:center; gap:12px; margin-top:10px; }
.clock-rec-meter-track { flex:1; height:14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.clock-rec-meter-fill { height:100%; width:2%; border-radius:999px; background:linear-gradient(90deg,#2bd98a,#7ef0a0); transition:width .08s linear; }
.clock-rec-meter-label { font-size:12px; color:var(--muted2); min-width:64px; }
.clock-row-time { width:130px; padding:6px 10px; border-radius:9px; border:1px solid rgba(177,75,255,.35); background:var(--panel-strong); color:var(--text); font-size:14px; font-weight:700; outline:none; }
.clock-row-time:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(177,75,255,.18); }
.clock-icon-btn { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:var(--text2); cursor:pointer; font-size:13px; transition:all .15s; }
.clock-icon-btn:hover { background:rgba(177,75,255,.18); color:#fff; }
.clock-icon-btn svg { width:14px; height:14px; }
.clock-icon-btn.danger { color:#ff6b6b; }
.clock-icon-btn.danger:hover { background:rgba(255,107,107,.18); }
.clock-empty { font-size:13px; color:var(--muted); padding:14px 10px; }

/* 录音指南步骤 */
.clock-steps { margin:0 0 18px; padding-left:20px; color:var(--text2); font-size:13.5px; line-height:1.9; }
.clock-steps li { margin-bottom:8px; }
.clock-steps code { background:rgba(177,75,255,.15); color:var(--primary); padding:2px 7px; border-radius:6px; font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.clock-steps b { color:var(--text); font-weight:700; }

/* TTS 提示条 */
.clock-notice { margin-top:14px; padding:12px 14px; border-radius:11px; background:rgba(255,159,67,.10); border:1px solid rgba(255,159,67,.30); color:var(--orange); font-size:13px; line-height:1.6; }
.clock-notice b { color:#ffcf86; }

/* 旧 info 条兼容 */
.clock-info { margin-top:26px; padding:18px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:12px; }
.clock-info-item { font-size:13px; color:var(--text2); line-height:1.6; }

/* 开播提示 */
.vp-go-hint { font-size:15px; padding:16px; border-radius:12px; background:rgba(255,91,110,.10); border:1px solid rgba(255,91,110,.25); text-align:center; line-height:1.6; }
.vp-go-hint b { color:var(--red); font-size:16px; }

.vp-now { margin-bottom:14px; }
.vp-sink-guide { font-size:13.5px; color:var(--blue); background:rgba(77,171,255,.12); border:1px solid rgba(77,171,255,.35); padding:10px 13px; border-radius:11px; margin-bottom:14px; line-height:1.5; }

.mini-file {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:11px; cursor:pointer;
  background:var(--panel-strong); border:1px solid var(--border-strong);
  font-size:13.5px; font-weight:600; color:var(--text);
  transition:all .14s;
}
.mini-file:hover { background:rgba(255,255,255,.12); border-color:var(--primary); }
.mini-file input { display:none; }

.vp-batch-import { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:14px 0; }
.vp-import-tip { font-size:13px; font-weight:600; color:var(--green); }
.vp-import-tip.warn { color:var(--orange); }
.vp-import-tip.err { color:var(--red); }

.vp-rec-count { font-size:13px; color:var(--muted); }
.vp-mic-test { display:flex; align-items:center; gap:12px; margin:12px 0; font-size:13px; }
.vp-mic-test-label { color:var(--muted); font-weight:600; }
.vp-rec-meter { flex:1; max-width:360px; height:10px; background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden; }
.vp-rec-meter-fill { height:100%; width:0%; background:linear-gradient(90deg,#2bd98a,#4dabff); border-radius:6px; transition:width .08s linear; }
.vp-mic-test-status { color:var(--green); font-size:12.5px; }
.vp-rec-status { font-size:13px; color:var(--muted); margin:8px 0; }
.vp-rec-bar { display:flex; align-items:center; gap:12px; padding:11px 15px; border-radius:11px; background:rgba(255,93,177,.12); border:1px solid rgba(255,93,177,.32); font-size:14px; font-weight:600; }
.rec-dot { width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 11px var(--red);animation:pulse 1.1s infinite; }
.rec-time { font-variant-numeric:tabular-nums; color:var(--muted); }
.vp-save-path { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0; }

.vp-guide { margin:14px 0; }
.vp-guide summary { cursor:pointer; color:var(--muted); font-size:14.5px; padding:8px 0; font-weight:600; }
.vp-guide-body { display:flex; flex-direction:column; gap:10px; padding:12px 14px; background:var(--panel-strong); border:1px solid var(--border); border-radius:11px; }
.vp-guide-item { font-size:13.5px; line-height:1.6; }
.vp-guide-tip { font-size:13px; color:var(--muted); line-height:1.6; }

.vp-auto-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 18px; border-radius:13px; background:linear-gradient(135deg, rgba(43,217,138,.12), rgba(77,171,255,.08)); border:1px solid rgba(43,217,138,.3); margin:16px 0 12px; }
.vpa-info { display:flex; flex-direction:column; gap:3px; }
.vpa-t { font-size:16px; font-weight:800; }
.vpa-d { font-size:12.5px; color:var(--muted); }
.vpa-ctrl { display:flex; align-items:center; gap:11px; }

.switch { position:relative; width:52px; height:29px; flex:0 0 52px; cursor:pointer; display:inline-block; }
.switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; appearance:none; -webkit-appearance:none; }
.switch-slider { position:absolute; inset:0; border-radius:20px; background:rgba(255,255,255,.16); transition:all .2s; pointer-events:none; }
.switch-slider::before { content:""; position:absolute; width:23px;height:23px;border-radius:50%; background:#fff; top:3px; left:3px; transition:all .2s; }
.switch input:checked + .switch-slider { background:linear-gradient(135deg,#2bd98a,#15b86f); }
.switch input:checked + .switch-slider::before { transform:translateX(23px); }

.vp-iv-row { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:10px; }
.mini-num { width:76px; padding:8px 11px; border-radius:10px; background:var(--panel-strong); border:1px solid var(--border); color:var(--text); font-size:14px; }

.vp-bgm { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0; }
.cm-k { font-size:14px; font-weight:700; color:var(--text); min-width:54px; }
.bgm-name { font-size:13px; color:var(--muted); }
.vp-bgm .mini-file, .vp-batch-import .mini-file { font-size:13px; padding:8px 12px; }

.vp-sink-row { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:10px 0; }
.vp-sink-label { font-size:14px; font-weight:600; color:var(--text); min-width:72px; }
.vp-sink-tip { font-size:12.5px; color:var(--muted2); line-height:1.6; margin-top:6px; }
.vp-live-status { font-size:13px; color:var(--green); }

.vp-advanced { margin:14px 0; }
.vp-advanced summary { cursor:pointer; color:var(--muted); font-size:14.5px; padding:8px 0; font-weight:600; }
.vp-perf { background:var(--panel-strong); border:1px solid var(--border); border-radius:13px; padding:16px; margin-top:10px; }
.vp-perf-head { font-size:15px; font-weight:700; margin-bottom:12px; }
.vp-perf-line { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:14px; }
.vp-upd { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.upd-ver { font-size:13.5px; font-weight:700; color:var(--text); }
.upd-status { font-size:13px; color:var(--muted); }
.upd-bar { display:block; height:8px; background:rgba(255,255,255,.08); border-radius:5px; overflow:hidden; margin-top:8px; }
.upd-bar i { display:block; height:100%; width:0%; background:var(--grad); transition:width .2s; }
.upd-notes { display:block; font-size:13px; color:var(--muted); margin-top:8px; line-height:1.6; }

/* ============ 玩法教程（内嵌 webview） ============ */
.doc-wrap { display:flex; flex-direction:column; height:calc(100vh - 158px); border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--panel); }
.doc-bar { display:flex; align-items:center; gap:9px; padding:11px 14px; background:var(--panel-strong); border-bottom:1px solid var(--border); }
.doc-btn {
  width:38px;height:34px;border-radius:9px;border:1px solid var(--border-strong);
  background:rgba(255,255,255,.06); color:var(--text); cursor:pointer;
  display:flex;align-items:center;justify-content:center; font-size:16px; transition:all .14s;
}
.doc-btn:hover { background:#fff; color:#1a1033; }
.doc-btn.wide { width:auto; padding:0 14px; font-size:13.5px; font-weight:600; gap:6px; }
.doc-addr { flex:1; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 8px; }
.doc-stage { flex:1; position:relative; background:#0c0718; }
.doc-stage webview { width:100%; height:100%; border:none; }
.doc-mask {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; background:rgba(12,7,24,.92); color:var(--muted); font-size:14px; text-align:center; padding:24px; line-height:1.7;
}
.doc-spin { width:34px;height:34px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--primary);border-radius:50%;animation:vcspin 1s linear infinite; }
@keyframes vcspin { to { transform:rotate(360deg); } }

/* ============ 使用说明（HelpView） ============ */
.help-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.help-head h1 { font-size:30px; font-weight:800; letter-spacing:.5px; }
.help-head .left p { color:var(--muted); font-size:14px; margin-top:9px; max-width:520px; line-height:1.6; }
.help-stat { display:flex; gap:26px; }
.help-stat div { display:flex; flex-direction:column; align-items:center; }
.help-stat b { font-size:26px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.help-stat span { font-size:12px; color:var(--muted2); margin-top:4px; }
.info-banner { background:rgba(77,171,255,.1); border:1px solid rgba(77,171,255,.3); color:#bcdcff; font-size:13.5px; line-height:1.7; padding:13px 16px; border-radius:12px; margin-bottom:14px; }
.usg-tip { font-size:14px; color:var(--muted); background:var(--panel-strong); border:1px solid var(--border); padding:12px 16px; border-radius:12px; margin-bottom:22px; }
.usg-tip b { color:var(--text); }
.help-sec { margin-bottom:26px; }
.sec-title { font-size:19px; font-weight:800; margin-bottom:16px; }
.steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.help-sec .step { display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:13px; background:var(--panel-strong); border:1px solid var(--border); }
.help-sec .step-no { width:32px;height:32px;flex:0 0 32px;border-radius:10px; background:var(--grad); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:800; font-size:15px; }
.help-sec .step-body { flex:1; }
.step-shot { width:100%; height:120px; border-radius:10px; overflow:hidden; background:#0c0718; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.step-shot svg { width:48px; height:48px; opacity:.8; }
.step-t { font-size:15px; font-weight:700; }
.step-d { font-size:13px; color:var(--muted); margin-top:5px; line-height:1.6; }
.faq { display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--panel-strong); border:1px solid var(--border); border-radius:12px; padding:15px 18px; }
.faq-q { font-size:15px; font-weight:700; display:flex; gap:9px; align-items:baseline; }
.faq-q::before { content:"Q"; color:var(--primary); font-weight:800; }
.faq-a { font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.7; padding-left:24px; }

@media (max-width: 920px) {
  .sidebar { width:68px; flex-basis:68px; padding:18px 9px; }
  .brand-title, .brand-sub, .nav-item span:not(.nav-ic), .sf-row span:not(.dot), .sf-sub { display:none; }
  .nav-item { justify-content:center; }
  .grid2, .grid3 { grid-template-columns:1fr; }
}

/* ===== v1.1.80 控制台精简版：顶栏 + 全局声卡 + 日志 ===== */
.vg-topbar { padding:16px 20px; border-radius:16px; border:1px solid var(--border-strong); background:linear-gradient(135deg, rgba(64,156,255,.12), rgba(43,217,138,.07)); margin-bottom:16px; }
.vg-top-title { font-size:19px; font-weight:900; }
.vg-top-sub { font-size:13px; color:var(--muted); margin-top:6px; line-height:1.7; }
.vg-log { max-height:180px; overflow:auto; font-size:12px; line-height:1.7; color:var(--muted); white-space:pre-wrap; word-break:break-all; background:rgba(0,0,0,.25); border-radius:10px; padding:10px 12px; margin-top:10px; }

/* ===== v1.1.92 自定义语音组循环播报 — 表格卡片式 UI ===== */
.vg-panel {
  position: relative;
  padding: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.vg-panel::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(177,75,255,.45), rgba(255,93,177,.25), rgba(77,171,255,.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 面板头部 */
.vg-panel-header {
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1;
  padding: 12px 14px;
  background: rgba(10,5,24,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.vg-panel-header:hover { background: rgba(255,255,255,0.04); }
.vg-panel-title { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; color: var(--text); }
.vg-title-icon { font-size:18px; filter: drop-shadow(0 0 6px rgba(177,75,255,.5)); }
.vg-title-badge {
  font-size:11px; font-weight:600; color:var(--muted);
  background: rgba(255,255,255,0.08); border:1px solid var(--border);
  padding: 2px 8px; border-radius: 20px;
}
.vg-panel-actions { display:flex; align-items:center; gap:8px; }
.vg-panel-actions .btn.xs { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.vg-panel-toggle { font-size:12px; color:var(--muted2); transition: transform .2s; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.vg-panel-header:hover .vg-panel-toggle { background: rgba(255,255,255,0.08); color:#fff; }

/* 折叠 */
.vg-panel .vg-body { max-height:4000px; opacity:1; overflow:hidden; transition:max-height .28s ease, opacity .2s ease, padding .2s ease; padding: 14px; }
.vg-panel.vg-panel-collapsed .vg-body { max-height:0; opacity:0; padding-top:0; padding-bottom:0; }

/* 表格容器 */
.vg-table-wrap { border:1px solid var(--border); border-radius:12px; overflow:hidden; background: rgba(0,0,0,0.18); }
.vg-table { display:flex; flex-direction:column; }

/* 表格行 */
.vg-row { display:flex; align-items:center; min-height: 42px; border-bottom: 1px solid rgba(255,255,255,0.06); transition: background .15s, border-color .2s; }
.vg-row:last-child { border-bottom:none; }
.vg-row:not(.vg-header):hover { background: rgba(255,255,255,0.05); }
.vg-row.playing { background: rgba(43,217,138,.10) !important; box-shadow: inset 2px 0 0 var(--green); }
.vg-row.drag { background: rgba(43,217,138,.15) !important; border-color: var(--green); box-shadow: inset 2px 0 0 var(--green); }

/* 表头 */
.vg-row.vg-header {
  min-height: 34px;
  background: rgba(10,5,24,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;
}

/* 列定义 */
.vg-col { display:flex; align-items:center; padding: 0 10px; }
.vg-col-order { flex: 0 0 42px; justify-content:center; }
.vg-col-name { flex: 1 1 auto; min-width: 0; gap: 8px; }
.vg-col-count { flex: 0 0 96px; justify-content:flex-end; gap: 4px; }
.vg-cnt-refresh { padding: 2px 5px !important; font-size: 11px !important; line-height: 1; opacity: .55; }
.vg-cnt-refresh:hover { opacity: 1; }
.vg-cnt-refresh:disabled { opacity: .4; cursor: default; }
.vg-col-actions { flex: 0 0 auto; justify-content:flex-end; gap: 5px; padding-right: 12px; }

.vg-order {
  width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(177,75,255,.9), rgba(255,93,177,.9));
  color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 8px rgba(177,75,255,.35);
}
.vg-row.vg-header .vg-order { display:none; }

.vg-row .vg-name {
  flex: 1 1 auto; min-width: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 13px; font-weight: 600; color: var(--text);
  height: 30px;
  transition: border-color .15s, background .15s;
}
.vg-row .vg-name:hover { background: rgba(255,255,255,0.08); }
.vg-row .vg-name:focus { outline:none; background: rgba(255,255,255,0.10); border-color: var(--primary); }

.vg-num {
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(43,217,138,.12); color: var(--green);
  border: 1px solid rgba(43,217,138,.25);
}
.vg-num.empty { background: rgba(255,91,110,.10); color: #ff8f8f; border-color: rgba(255,91,110,.25); }

/* 图标按钮 */
.btn.icon {
  width: 26px; height: 26px;
  padding: 0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 12px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.btn.icon:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); color:#fff; border-color: rgba(255,255,255,0.2); }
.btn.icon.danger:hover { background: rgba(255,91,110,.2); color:#ffaeb8; border-color: rgba(255,91,110,.4); }
.btn.icon.vg-addfiles-btn { background: rgba(43,217,138,.12); color: var(--green); border-color: rgba(43,217,138,.3); }
.btn.icon.vg-addfiles-btn:hover { background: rgba(43,217,138,.22); color:#5af0a5; }
.vg-rec-btn.recording { background:linear-gradient(135deg,#ff5b6e,#e63950) !important; color:#fff !important; border-color:transparent !important; animation:vgPulse 1.1s infinite; }
@keyframes vgPulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,91,110,.5);} 50% { box-shadow:0 0 0 6px rgba(255,91,110,0);} }

/* 空状态 */
.vg-empty {
  padding: 36px 20px;
  text-align: center; color: var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.vg-empty-icon { font-size: 36px; opacity: .7; }
.vg-empty-sub { font-size: 12px; color: var(--muted2); }

/* 提示条 */
.vg-tip { font-size:11px; color:var(--muted); margin-top:10px; line-height:1.5; }

/* 配置行 */
.vg-cfg-row, .vg-play-row { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.vg-cfg-k { font-size:12px; font-weight:700; color:var(--text); flex:0 0 auto; }
.vg-cfg-tip { font-size:11px; color:var(--muted); }
.vg-sink-tip { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.4; }
.vg-monitor-toggle {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  transition: all .15s ease;
}
.vg-monitor-toggle:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); }
.vg-monitor-toggle input { position:absolute; opacity:0; pointer-events:none; }
.vg-monitor-track {
  position:relative; width:36px; height:20px; border-radius:20px;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25);
  transition: background .2s ease;
}
.vg-monitor-toggle input:checked + .vg-monitor-track {
  background: linear-gradient(135deg, #34d399, #38bdf8);
  box-shadow:0 0 10px rgba(56,189,248,.45), inset 0 2px 4px rgba(0,0,0,.1);
}
.vg-monitor-thumb {
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.vg-monitor-toggle input:checked + .vg-monitor-track .vg-monitor-thumb { transform: translateX(16px); }
.vg-monitor-label { font-size:13px; font-weight:700; color:var(--muted); transition: color .2s ease; }
.vg-monitor-toggle input:checked ~ .vg-monitor-label { color:#fff; }
.vg-monitor-toggle input:checked ~ .vg-monitor-label::after { content:' ON'; color:#38bdf8; }
.vg-go-row { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.vg-now { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--text); flex:1; min-width:180px; }
.vg-now .vp-dot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.vg-now .vp-dot.on { background:var(--green); box-shadow:0 0 8px rgba(43,217,138,.7); animation:vgBlink 1s infinite; }
.vg-now .vp-dot.idle { background:var(--muted2); }
@keyframes vgBlink { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* ★ v1.2.4 音量滑块 */
.vg-vol-row { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.vg-vol-slider {
  -webkit-appearance:none; appearance:none;
  width:120px; height:6px; border-radius:6px; cursor:pointer;
  background:linear-gradient(90deg, rgba(177,75,255,.4), rgba(255,93,177,.3));
  outline:none; transition:all .15s;
}
.vg-vol-slider:hover { background:linear-gradient(90deg, rgba(177,75,255,.6), rgba(255,93,177,.5)); }
.vg-vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  border:2px solid #fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(177,75,255,.5); transition:all .15s;
}
.vg-vol-slider::-webkit-slider-thumb:hover { transform:scale(1.2); box-shadow:0 2px 12px rgba(177,75,255,.7); }
.vg-vol-slider::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  border:2px solid #fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(177,75,255,.5);
}
.vg-vol-val { font-size:12px; font-weight:700; color:var(--text); min-width:38px; text-align:right; }

/* ★ v1.2.9 GPU 加速开关 */
.vg-gpu-toggle { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.vg-gpu-toggle input { opacity:0; width:0; height:0; }
.vg-gpu-slider {
  position:absolute; inset:0; border-radius:12px; cursor:pointer; transition:all .25s;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12);
}
.vg-gpu-slider::before {
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#888; transition:all .25s;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.vg-gpu-toggle input:checked + .vg-gpu-slider {
  background:linear-gradient(135deg, rgba(177,75,255,.5), rgba(100,200,255,.4));
  border-color:rgba(177,75,255,.4);
}
.vg-gpu-toggle input:checked + .vg-gpu-slider::before {
  transform:translateX(20px); background:linear-gradient(135deg, #b14bff, #64c8ff);
}

/* ★ v1.2.4 录音波形 canvas */
.vg-rec-wave {
  flex:1 1 auto; min-width:60px; max-width:240px; height:28px;
  border-radius:6px; background:rgba(0,0,0,.25);
  border:1px solid rgba(177,75,255,.15);
}

/* ★ v1.2.5 报时音量行（自动报时页面） */
.clock-vol-row { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.clock-vol-label { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; }