/* ============================================================================
   凌霄视频 · 浅色主题（覆盖层）
   ----------------------------------------------------------------------------
   由 app.css 末尾 @import 引入，必须排在 app.css 之后才会覆盖生效。

   为什么要这个文件：原来的深色主题把 -—lx-dim 定成 #64748b，压在 #05070e 的
   近黑底上，对比度只有 3.6:1 —— 低于 WCAG AA 的 4.5:1。搜索框的 placeholder、
   输入的文字、空态提示全都喂的这个颜色，所以「看不见字」。

   这里改的是设计令牌而不是逐个打补丁：令牌一改，全站（含后台、播放器）跟着变，
   不会漏掉某个组件。
   ========================================================================== */

:root {
  /* 文字：深底 → 浅底，色阶整体反相并压深，保证都在 7:1 以上 */
  --lx-text: #0f172a;
  --lx-sub: #334155;
  --lx-dim: #52617a;          /* 对比度 5.6:1（原 #64748b 只有 3.6:1） */

  /* 底色 */
  --lx-ink: #f5f7fb;
  --lx-ink-2: #eef2f9;
  --lx-surface: #ffffff;
  --lx-surface-hover: #f1f5fb;
  --lx-glass: rgba(255, 255, 255, .86);

  /* 描边：浅底上必须用深色半透，否则边界完全消失 */
  --lx-line: rgba(15, 23, 42, .12);
  --lx-line-strong: rgba(15, 23, 42, .22);

  /* 强调色压深一档，浅底上才够对比 */
  --lx-cyan: #0284c7;
  --lx-violet: #6d28d9;
  --lx-magenta: #db2777;
  --lx-success: #15803d;
  --lx-warning: #b45309;
  --lx-danger: #dc2626;
  --lx-grad: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  --lx-grad-soft: linear-gradient(135deg, #ffffff 0%, #eef4fb 100%);
  --lx-shadow: 0 10px 30px rgba(15, 23, 42, .10);

  color-scheme: light;
}

/* 极光背景在浅色下会糊成灰雾，换成两团很淡的色晕 */
body::before {
  background:
    radial-gradient(42rem 30rem at 8% -10%, rgba(2, 132, 199, .10), transparent 62%),
    radial-gradient(38rem 28rem at 92% 0%, rgba(109, 40, 217, .09), transparent 60%),
    radial-gradient(36rem 26rem at 62% 106%, rgba(6, 182, 212, .08), transparent 62%);
}
body::after {
  background-image:
    linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
  opacity: .5;
}

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

/* 搜索框：原来 rgba(255,255,255,.04) 的白底在浅色下等于没底 → 改成实心白 + 深描边 */
.search {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .18);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.search:focus-within {
  border-color: var(--lx-cyan);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .16);
}
.search input {
  background: transparent;
  color: var(--lx-text);
  /* 光标颜色：浅底上默认的白色光标实际是不可见的块，用它才会跳 */
  caret-color: var(--lx-cyan);
}
.search input::placeholder {
  color: #7c8aa3;             /* 4.5:1，比 --lx-dim 再淡一点但仍可读 */
  opacity: 1;                 /* Firefox 默认会把 placeholder 再打个折 */
}

/* 后台/音乐页用的通用输入框 */
.input,
textarea.input {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .18);
  color: var(--lx-text);
  caret-color: var(--lx-cyan);
}
.input::placeholder,
textarea.input::placeholder { color: #7c8aa3; opacity: 1; }
.input:focus {
  border-color: var(--lx-cyan);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .13);
}

/* 浏览器自带 type=search 的清除按钮在浅色下才看得见 */
.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 #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: var(--lx-cyan);
}

/* 选中文本 */
::selection { background: rgba(2, 132, 199, .22); color: #06121f; }

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

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

.skeleton {
  background: linear-gradient(100deg, #eef2f9 20%, #e2e8f3 40%, #eef2f9 60%);
  background-size: 200% 100%;
}

.empty {
  color: var(--lx-dim);
  border-color: rgba(15, 23, 42, .18);
  background: rgba(255, 255, 255, .6);
}

/* 主按钮上的文字：深色主题用 #04121c on 渐变，浅色下渐变变深了要反过来 */
.btn-primary,
.search button {
  background: var(--lx-grad);
  color: #ffffff;
}

/* 底部播放条、页眉的玻璃底 */
.site-header {
  background: var(--lx-glass);
  border-bottom-color: var(--lx-line);
}
.mx-bar {
  background: rgba(255, 255, 255, .94);
  border-top-color: var(--lx-line);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
}

/* 表格 */
.table th { color: #475569; }
.table tbody tr:hover { background: rgba(2, 132, 199, .05); }

/* 音频控件的轨道 */
.mx-progress { background: rgba(15, 23, 42, .12); }

@media (prefers-color-scheme: dark) {
  /* 系统是深色也照样用浅色 —— 这个站现在只有一个主题，
     不然会出现「浏览器深色 + 站点浅色」的半吊子状态。 */
}

/* ------------------------------------------------- 深色半透底遗留项 */

/* 这几个容器在深色主题里写的是 rgba(11,18,32,.6)（近黑半透）。
   浅色底上它不会变白，而是叠成一块脏灰 —— 这就是筛选条整块发灰的原因。
   统一改成白底 + 深描边。 */
.filters,
.ms-tabs button,
.feed-sentinel,
.ms-row {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .14);
}

.filters { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* 未选中的 chip / tab：白底 + 深字，别再继承深色主题的浅灰字 */
.chip,
.ms-tabs button {
  color: var(--lx-sub);
  background: #ffffff;
}
.chip:hover,
.ms-tabs button:hover {
  color: var(--lx-text);
  border-color: var(--lx-line-strong);
  background: #f8fafd;
}

/* 选中态：渐变底，文字必须反过来用白色（深色主题里写死了 #04121c） */
.chip.active,
.ms-tabs button.active {
  color: #ffffff;
  background: var(--lx-grad);
  border-color: transparent;
}
.ms-tabs button.active { box-shadow: 0 6px 18px rgba(2, 132, 199, .28); }

/* 主按钮同理 */
.btn-primary,
.ms-playall,
.search button {
  color: #ffffff;
}

/* 降级音源：浅色下用降低饱和度而不是降透明，否则白底上直接消失 */
.chip.degraded {
  opacity: 1;
  color: #94a3b8;
  border-style: dashed;
  border-color: rgba(15, 23, 42, .18);
  background: #f8fafc;
}
.chip.degraded:hover { color: var(--lx-sub); background: #f1f5fb; }

/* 下拉框 */
.select {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .18);
  color: var(--lx-text);
}
.select:focus { outline: 2px solid rgba(2, 132, 199, .35); outline-offset: 1px; }

/* 播放行 hover */
.ms-row:hover { background: #f8fafd; border-color: rgba(15, 23, 42, .22); }
.ms-row.is-playing { background: rgba(2, 132, 199, .07); border-color: rgba(2, 132, 199, .3); }

/* 音频波形/进度条 */
.mx-progress,
.mx-vol { background: rgba(15, 23, 42, .14); }

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

.ms-empty-search { padding: 44px 20px; }
.ms-empty-t { margin: 0 0 6px; font-size: 16px; color: var(--lx-text); font-weight: 600; }
.ms-empty-m { margin: 0 0 18px; font-size: 13.5px; color: var(--lx-dim); }
.ms-sugg { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ms-sugg .chip { cursor: pointer; }
.ms-sugg .chip:hover { border-color: var(--lx-cyan); color: var(--lx-cyan); }