/* 需求 23：前台主题跟随系统（白天白色 / 夜间黑色）
 *
 * 原站前台（assets-v11）是「仅浅色」的打包产物：没有任何 prefers-color-scheme /
 * .dark 规则，配色全部硬编码在各组件 CSS 里，逐个改写成本高且易漏。
 * 这里采用「整站反相 + 位图/图标二次反相还原」的方案：
 *   - html.tbc-dark 上加 invert(1) hue-rotate(180deg)：白底→黑底、黑字→白字，
 *     同时色相被 hue-rotate 转回来，因此蓝/绿/红等强调色基本保持原样；
 *   - 对 img/svg/video/canvas/iframe/picture 再反相一次，让照片、头像、国旗、
 *     证件照等位图/图形保持真实颜色。
 * 该 class 由 index.html <head> 里的内联脚本按 prefers-color-scheme 实时增删
 * （系统深浅色切换时无需刷新页面）。
 *
 * color-scheme: only light —— 明确声明本页自管配色，阻止 Chrome/Android 的
 * 「自动深色（Auto Dark）」再叠一层，避免与本方案叠加导致双重反相。
 */

html { color-scheme: only light; }

html.tbc-dark {
  filter: invert(1) hue-rotate(180deg);
}

/* 二次反相还原：真实图像/矢量图保持本色 */
html.tbc-dark img,
html.tbc-dark picture,
html.tbc-dark video,
html.tbc-dark canvas,
html.tbc-dark iframe,
html.tbc-dark svg {
  filter: invert(1) hue-rotate(180deg);
}

/* 兜底：保证 body 至少铺满视口，反相后不露出白色画布 */
html.tbc-dark body {
  background: #fff;
  min-height: 100vh;
}

/* 滚动条不在 filter 的子树内（属于 viewport 装饰），不会被反相，
 * 因此深色下必须显式改成深色，否则右侧会挂一条白色滚动条。 */
html.tbc-dark {
  scrollbar-color: #3d4457 #0b0b0f;
  scrollbar-width: thin;
}
html.tbc-dark::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.tbc-dark::-webkit-scrollbar-track {
  background: #0b0b0f;
}
html.tbc-dark::-webkit-scrollbar-thumb {
  background: #3d4457;
  border-radius: 6px;
}
html.tbc-dark::-webkit-scrollbar-thumb:hover {
  background: #4d5670;
}

/* 遮罩层（登入/註冊弹窗、VIP 弹窗、vant 弹层）原本是「半透明深色」，
 * 整站反相后会变成「半透明浅色」，把页面洗成灰蒙蒙一片。
 * 这里把遮罩本身的颜色改成浅灰半透明，反相后即为深灰半透明，
 * 与浅色主题下的观感一致。rgba 的 alpha 不受 filter 影响，只需翻颜色。 */
html.tbc-dark .auth-overlay,
html.tbc-dark .vip-rewards-overlay,
html.tbc-dark .van-overlay,
html.tbc-dark [class*="modal-overlay"],
html.tbc-dark [class*="dialog-overlay"] {
  background-color: rgba(232, 232, 232, 0.55) !important;
}

/* 深色主题下 box-shadow / border 同样会被反相：原本「向下压的暗影」变成「向外发光的白晕」，
 * 弹窗四周会出现一圈脏白光；原本的浅灰边框则变成深灰，落在黑底上等于消失。
 * 这里把阴影设成浅色（反相后为暗影），把边框设成深色（反相后为浅边）。 */
html.tbc-dark .auth-dialog,
html.tbc-dark .vip-rewards-dialog,
html.tbc-dark .van-dialog,
html.tbc-dark [class*="modal-content"],
html.tbc-dark [class*="dialog-panel"] {
  box-shadow: 0 18px 40px rgba(226, 232, 240, 0.35) !important;
  border: 1px solid rgba(30, 41, 59, 0.55) !important;
}