/* ===========================================================================
   深色模式补充样式（第八轮）
   ---------------------------------------------------------------------------
   背景：产品里有大量写死的浅色工具类（bg-white、bg-[#F6F5F0] 等），
   深色模式只切换了 CSS 变量，这些写死颜色的卡片/页头仍然是白的，
   导致「页面变暗、卡片刺眼」的割裂感。

   本文件在最后加载，只做覆盖，不新增布局规则，
   作用域全部限定在深色主题下，浅色模式完全不受影响。

   回滚：删掉 index.html 里对本文件的 <link> 即可。
   =========================================================================== */

:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) body {
  background-color: var(--bg-app);
  color: var(--text-main);
}

/* ---- 1. 写死白色的卡片、页头、弹层 -------------------------------------- */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .bg-white {
  background-color: var(--bg-panel) !important;
}

/* 半透明白色（浮层、吸顶页头） */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .bg-white\/95 {
  background-color: color-mix(in srgb, var(--bg-panel) 95%, transparent) !important;
}
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .bg-white\/80 {
  background-color: color-mix(in srgb, var(--bg-panel) 80%, transparent) !important;
}
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .bg-white\/20 {
  background-color: color-mix(in srgb, var(--bg-panel) 20%, transparent) !important;
}
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .bg-white\/10 {
  background-color: color-mix(in srgb, var(--bg-panel) 10%, transparent) !important;
}

/* ---- 2. 写死十六进制的页面底色 ------------------------------------------ */
/* 这些是各页面的整页背景色，深色下应回到 --bg-app */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) [class*='bg-[#F6F5F0]'],
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) [class*='bg-[#F2F4F0]'],
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) [class*='bg-[#fafaf9]'],
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) [class*='bg-[#FDFCF8]'],
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) [class*='bg-[#fffdf8]'],
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) [class*='bg-[#FAF9F6]'] {
  background-color: var(--bg-app) !important;
}

/* ---- 3. 写死的浅色文字 --------------------------------------------------- */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-black,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-slate-400 {
  color: var(--text-main) !important;
}

/* 白底上的深色字：卡片变暗后，原来 text-gray-900 之类的仍然偏黑，统一提亮 */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-gray-900,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-gray-800,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-gray-700,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-zinc-900,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-slate-900,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-slate-800 {
  color: var(--text-main) !important;
}

:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-gray-600,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-gray-500,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-zinc-600,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-slate-600,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .text-slate-500 {
  color: var(--text-sub) !important;
}

/* ---- 4. 写死的浅色边框 --------------------------------------------------- */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .border-white,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .border-gray-100,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .border-gray-200,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .border-slate-100,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .border-slate-200 {
  border-color: var(--border-subtle) !important;
}

/* ---- 5. 表格与分隔线（学习记录、排行榜、后台列表） ---------------------- */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-subtle) !important;
}

/* ---- 6. 表单控件在深色下的可读性 ---------------------------------------- */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) input::placeholder,
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) textarea::placeholder {
  color: var(--text-muted);
}

/* ---- 7. 主题切换按钮本身在深色下更明显 ---------------------------------- */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .theme-icon-button {
  background-color: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-main);
}

/* ---- 8. 二维码保留白底，保证手机能扫出来 -------------------------------- */
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .bg-white:has(> img[alt*='二维码']),
:is([data-theme='dark'], [data-mode='dark'], body.dark, .dark) .bg-white:has(> .miniapp-purchase__code) {
  background-color: #ffffff !important;
}