/* ============================================================================
   凌霄视频 · 纯黑主题（覆盖层）
   ----------------------------------------------------------------------------
   加载顺序：app.css 之后引入，覆盖同名变量与组件底色。

   目标：背景彻底纯黑（#000），但所有文字/控件都在 WCAG AA 之上：
     --lx-text  #f7f9fc  on #000 = 19.6:1
     --lx-sub   #c8d4e2  on #000 = 13.2:1
     --lx-dim   #9aa9bd  on #000 =  8.5:1   ← 旧值 #64748b 只有 4.6:1，纯黑上更糟
   亮色渐变上的文字一律用 #04121c（白字在 #22e0ff 上只有 1.6:1，等于看不见）。
   ========================================================================== */

:root {
  /* 文字 */
  --lx-text: #f7f9fc;
  --lx-sub: #c8d4e2;
  --lx-dim: #9aa9bd;

  /* 底色：纯黑打底，卡片/面板抬一档，避免全站一个死黑平面 */
  --lx-ink: #000000;
  --lx-ink-2: #05070c;
  --lx-surface: #0a0e15;
  --lx-surface-hover: #141b26;
  --lx-glass: rgba(4, 6, 10, .88);

  /* 描边：黑底必须用亮半透，否则边界消失 */
  --lx-line: rgba(255, 255, 255, .12);
  --lx-line-strong: rgba(255, 255, 255, .26);

  /* 强调色（黑底上提亮一档） */
  --lx-cyan: #22e0ff;
  --lx-violet: #a78bfa;
  --lx-magenta: #f472b6;
  --lx-success: #34d399;
  --lx-warning: #fbbf24;
  --lx-danger: #f87171;
  --lx-grad: linear-gradient(135deg, #0ea5e9 0%, #22e0ff 100%);
  --lx-grad-soft: linear-gradient(135deg, #0a0e15 0%, #121a26 100%);
  --lx-shadow: 0 18px 46px rgba(0, 0, 0, .72);

  /* 亮渐变上的深字 */
  --lx-on-grad: #04121c;

  color-scheme: dark;
}

/* ------------------------------------------------------------------ 背景光晕 */

body::before {
  background:
    radial-gradient(42rem 30rem at 8% -10%, rgba(34, 224, 255, .10), transparent 62%),
    radial-gradient(38rem 28rem at 92% 0%, rgba(139, 92, 246, .10), transparent 60%),
    radial-gradient(36rem 26rem at 62% 106%, rgba(244, 114, 182, .06), transparent 62%);
}
body::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px);
  opacity: 1;
}

/* ------------------------------------------------------------------ 输入控件 */

.search {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.search:focus-within {
  border-color: var(--lx-cyan);
  box-shadow: 0 0 0 3px rgba(34, 224, 255, .18);
}
.search input {
  background: transparent;
  color: var(--lx-text);
  caret-color: var(--lx-cyan);
}
.search input::placeholder {
  color: #9aa9bd;   /* 8.5:1 on 近黑 */
  opacity: 1;
}

.input,
textarea.input,
.select {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: var(--lx-text);
  caret-color: var(--lx-cyan);
}
.input::placeholder,
textarea.input::placeholder { color: #9aa9bd; opacity: 1; }
.input:focus,
.select:focus {
  border-color: var(--lx-cyan);
  box-shadow: 0 0 0 3px rgba(34, 224, 255, .16);
}

/* 原生下拉展开后的列表：不指定就会是白底 + 白字 */
select,
.select { color-scheme: dark; }
option,
select option {
  background: #0a0e15;
  color: #f7f9fc;
}

.search input::-webkit-search-cancel-button,
.input::-webkit-search-cancel-button { cursor: pointer; }

/* Chrome 自动填充：浅黄底 + 深字，强制回到深底 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lx-text);
  -webkit-box-shadow: 0 0 0 1000px #10151f inset;
  box-shadow: 0 0 0 1000px #10151f inset;
  caret-color: var(--lx-cyan);
}

::selection { background: rgba(34, 224, 255, .30); color: #001018; }

/* ------------------------------------------------------------------ 容器/卡片 */

.card,
.panel,
.sect,
.hero,
.ms-row,
.stat,
.auth-wrap,
.filters {
  background: var(--lx-surface);
}

.skeleton {
  background: linear-gradient(100deg, #0e141d 20%, #18212e 40%, #0e141d 60%);
  background-size: 200% 100%;
}

.empty {
  color: var(--lx-dim);
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .03);
}

/* 亮渐变上的按钮/标签：深字才看得见 */
.btn-primary,
.search button,
.chip.active,
.ms-tabs button.active,
.ms-playall,
.badge-hot,
.ep.active,
.tv-ply-btn.cur,
.tv-res.hi {
  color: var(--lx-on-grad);
}

.btn-danger,
.toast.err { color: #fff; }

/* 页眉 / 底部播放条 */
.site-header { background: var(--lx-glass); border-bottom-color: var(--lx-line); }
.mx-bar {
  background: rgba(4, 6, 10, .95);
  border-top-color: var(--lx-line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .6);
}

/* 表格 */
.table th { color: #9aa9bd; }
.table tbody tr:hover { background: rgba(34, 224, 255, .07); }

/* 音频进度轨道 */
.mx-progress,
.mx-vol { background: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------------ 筛选条 / chip */

.filters,
.ms-tabs button,
.feed-sentinel,
.ms-row {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.filters { box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

.chip,
.ms-tabs button {
  color: var(--lx-sub);
  background: rgba(255, 255, 255, .05);
}
.chip:hover,
.ms-tabs button:hover {
  color: var(--lx-text);
  border-color: var(--lx-line-strong);
  background: rgba(255, 255, 255, .10);
}

.chip.active,
.ms-tabs button.active {
  background: var(--lx-grad);
  border-color: transparent;
}
.ms-tabs button.active { box-shadow: 0 6px 18px rgba(34, 224, 255, .26); }

/* 降级音源：降低饱和度而不是降透明，否则黑底上直接消失 */
.chip.degraded {
  opacity: 1;
  color: #8b9bb0;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .20);
  background: rgba(255, 255, 255, .03);
}
.chip.degraded:hover { color: var(--lx-sub); background: rgba(255, 255, 255, .08); }

.ms-row:hover { background: rgba(255, 255, 255, .08); border-color: var(--lx-line-strong); }
.ms-row.is-playing { background: rgba(34, 224, 255, .10); border-color: rgba(34, 224, 255, .34); }

/* ------------------------------------------------------------------ 音乐页空态 */

.ms-empty-t { color: var(--lx-text); }
.ms-empty-m { color: var(--lx-dim); }
.ms-sugg .chip:hover { border-color: var(--lx-cyan); color: var(--lx-cyan); }

/* ------------------------------------------------------------------ 在线电视 */

.tv-card {
  background: var(--lx-surface);
  border-color: rgba(255, 255, 255, .12);
}
.tv-card:hover {
  border-color: var(--lx-line-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
}
.tv-card-logo {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: var(--lx-sub);
}

.tv-adult-toggle {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
}
.tv-adult-toggle:hover { background: rgba(255, 255, 255, .09); border-color: var(--lx-line-strong); }

.ghost-link.active {
  color: var(--lx-cyan);
  background: rgba(34, 224, 255, .12);
  border-color: rgba(34, 224, 255, .40);
}

/* 浮层：遮罩加深，盒子比纯黑亮一档 */
.tv-modal { background: rgba(0, 0, 0, .74); }
.tv-modal-box {
  background: #0b0f17;
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .8);
}
.tv-x { background: rgba(255, 255, 255, .07); color: var(--lx-sub); }
.tv-x:hover { color: var(--lx-text); }

.tv-mirror {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.tv-mirror:hover { background: rgba(255, 255, 255, .09); border-color: var(--lx-line-strong); }
.tv-mirror.active {
  background: rgba(34, 224, 255, .12);
  border-color: var(--lx-cyan);
}
.tv-mirror.off .tv-mirror-s { color: #fb923c; }

.tv-open,
#tv-nextline {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .18);
}
.tv-open:hover,
#tv-nextline:hover { background: rgba(255, 255, 255, .09); color: var(--lx-text); }

.tv-msg.warn { color: #fbbf24; }

/* 电视页站内搜索 */
.tv-search input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: var(--lx-text);
}
.tv-search input::placeholder { color: #9aa9bd; }
.tv-search .tv-find-clear { background: rgba(255, 255, 255, .08); color: var(--lx-sub); }

/* 「交给本地播放器」面板 */
.tv-vlcbox { background: #0a0e15; border-top-color: rgba(255, 255, 255, .12); }
.tv-vlc-t { color: var(--lx-text); }
.tv-vlc-hint { color: var(--lx-sub); }
.tv-vlc-hint.warn { color: #fbbf24; }
.tv-vlc-hint a { color: var(--lx-cyan); }

.tv-ply-btn {
  border-color: rgba(255, 255, 255, .20);
  color: var(--lx-text);
  background: rgba(255, 255, 255, .05);
}
.tv-ply-btn:hover { border-color: var(--lx-cyan); color: var(--lx-cyan); }
.tv-ply-btn.cur { border-color: transparent; background: var(--lx-grad); font-weight: 700; }
.tv-ply-t { color: var(--lx-dim); }

.tv-manual { border-top-color: rgba(255, 255, 255, .12); }
.tv-manual summary { color: var(--lx-sub); }
.tv-url { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: var(--lx-text); }
.tv-manual-steps { color: var(--lx-sub); }
.tv-manual-steps code { background: rgba(255, 255, 255, .08); color: var(--lx-text); }
.tv-manual-tip { color: var(--lx-dim); }
.tv-manual-l { color: var(--lx-dim); }

.tv-res { border-color: rgba(255, 255, 255, .26); color: var(--lx-sub); background: transparent; }
.tv-res.hi { background: var(--lx-cyan); border-color: transparent; }

.nav .nav-adult { color: var(--lx-dim); border-color: rgba(255, 255, 255, .22); }
.nav .nav-adult:hover { color: var(--lx-cyan); border-color: var(--lx-cyan); }
.footer-inner .footer-adult { color: var(--lx-dim); border-bottom-color: rgba(255, 255, 255, .22); }

/* 禁用态：app.css 用的是 opacity:.5（#9aa9bd 折半后只剩 2.6:1，等于看不见）。
   黑底上改成「降低亮度但保持不透明」，仍然可读。 */
.pager button:disabled,
.btn:disabled,
.chip:disabled {
  opacity: 1;
  color: #7b8ea4;                 /* 5.4:1 on #000 */
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .10);
  cursor: not-allowed;
}

/* 播放器/视频底板 */
.player-shell,
.watch-stage,
video { background: #000; }

/* 迷你播放条：封面缺图时不要留一个空方块，画个音符占位 */
#mx-bar .mx-cover {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><text x='12' y='17.5' font-size='13' text-anchor='middle' fill='%239aa9bd' font-family='system-ui'>♪</text></svg>") center / 18px no-repeat,
    rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
#mx-bar .mx-time { color: var(--lx-dim); }