/* =====================================================================
   全站主题引擎（4 套主题 · 背景可在后台替换）
   主题切换只改 CSS 变量，不重编译前端；上传的背景图由 --zq-bg-img 覆盖
   ===================================================================== */

html[data-theme] { --zq-bg-color: #05080f; --zq-bg-img: none; }

html, body {
  background-color: var(--zq-bg-color, #05080f) !important;
  background-image: var(--zq-bg-img, none) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
}
#root, #app { background: transparent !important; }

html[data-theme="starry"], html[data-theme="smoke"], html[data-theme="graphite"] { color-scheme: dark; }
html[data-theme="white"] { color-scheme: light; }

/* ---------------- 1. 深空星空（默认） ---------------- */
html[data-theme="starry"] {
  --zq-bg-color: #05080f;
  --zq-bg-img: linear-gradient(rgba(3,6,12,.52), rgba(3,6,12,.76)), url('/ui-assets/starry.jpg');
  --background: #05080f;
  --foreground: #e8eefc;
  --card: rgba(12, 19, 32, 0.88);
  --card-foreground: #e8eefc;
  --popover: rgba(9, 15, 26, 0.97);
  --popover-foreground: #e8eefc;
  --primary: #dc3545;
  --primary-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, 0.07);
  --secondary-foreground: #dbe6f7;
  --muted: rgba(255, 255, 255, 0.055);
  --muted-foreground: #93a4c2;
  --accent: rgba(240, 136, 62, 0.16);
  --accent-foreground: #ffd9b8;
  --border: rgba(255, 255, 255, 0.11);
  --input: rgba(255, 255, 255, 0.14);
  --ring: #f0883e;
  --sidebar: rgba(7, 12, 21, 0.93);
  --sidebar-foreground: #cbd8ec;
  --sidebar-primary: #dc3545;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(255, 255, 255, 0.07);
  --sidebar-accent-foreground: #e8eefc;
  --sidebar-border: rgba(255, 255, 255, 0.10);
  --destructive: #e5534b;
}

/* ---------------- 2. 烟雾暗夜 ---------------- */
html[data-theme="smoke"] {
  --zq-bg-color: #0b100f;
  --zq-bg-img: url('/ui-assets/smoke.jpg');
  --background: #0b100f;
  --foreground: #e9f1ee;
  --card: rgba(14, 20, 21, 0.87);
  --card-foreground: #e9f1ee;
  --popover: rgba(11, 16, 17, 0.97);
  --popover-foreground: #e9f1ee;
  --primary: #dc3545;
  --primary-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, 0.07);
  --secondary-foreground: #d8e6e1;
  --muted: rgba(255, 255, 255, 0.055);
  --muted-foreground: #9db0a9;
  --accent: rgba(120, 200, 170, 0.16);
  --accent-foreground: #cdf3e4;
  --border: rgba(255, 255, 255, 0.10);
  --input: rgba(255, 255, 255, 0.14);
  --ring: #6fc7a8;
  --sidebar: rgba(9, 13, 14, 0.93);
  --sidebar-foreground: #cfe0da;
  --sidebar-primary: #dc3545;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(255, 255, 255, 0.07);
  --sidebar-accent-foreground: #e9f1ee;
  --sidebar-border: rgba(255, 255, 255, 0.09);
  --destructive: #e5534b;
}

/* ---------------- 3. 石墨灰 ---------------- */
html[data-theme="graphite"] {
  --zq-bg-color: #24272c;
  --zq-bg-img: linear-gradient(150deg, #34383f 0%, #23262b 46%, #17191d 100%);
  --background: #24272c;
  --foreground: #eceff3;
  --card: rgba(52, 57, 64, 0.93);
  --card-foreground: #eceff3;
  --popover: rgba(40, 44, 50, 0.98);
  --popover-foreground: #eceff3;
  --primary: #dc3545;
  --primary-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, 0.08);
  --secondary-foreground: #e3e8ee;
  --muted: rgba(255, 255, 255, 0.06);
  --muted-foreground: #a9b4c1;
  --accent: rgba(255, 255, 255, 0.10);
  --accent-foreground: #f2f5f8;
  --border: rgba(255, 255, 255, 0.13);
  --input: rgba(255, 255, 255, 0.16);
  --ring: #9aa6b5;
  --sidebar: rgba(30, 33, 38, 0.95);
  --sidebar-foreground: #dfe5ec;
  --sidebar-primary: #dc3545;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(255, 255, 255, 0.08);
  --sidebar-accent-foreground: #eceff3;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --destructive: #e5534b;
}

/* ---------------- 4. 纯白 ---------------- */
html[data-theme="white"] {
  --zq-bg-color: #f6f8fa;
  --zq-bg-img: radial-gradient(circle at 18% 0%, #ffffff 0%, #f6f9fc 45%, #eef2f7 100%);
  --background: #f7f9fc;
  --foreground: #1f2328;
  --card: #ffffff;
  --card-foreground: #1f2328;
  --popover: #ffffff;
  --popover-foreground: #1f2328;
  --primary: #dc3545;
  --primary-foreground: #ffffff;
  --secondary: #f1f4f9;
  --secondary-foreground: #1f2328;
  --muted: #f3f6fa;
  --muted-foreground: #5b6672;
  --accent: #eef2f7;
  --accent-foreground: #1f2328;
  --border: #e3e9f0;
  --input: #dfe6ee;
  --ring: #dc3545;
  --sidebar: #ffffff;
  --sidebar-foreground: #1f2328;
  --sidebar-primary: #dc3545;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f2f5f9;
  --sidebar-accent-foreground: #1f2328;
  --sidebar-border: #e6ecf3;
  --destructive: #d92d20;
}

/* ---------------- 暗色主题细节修正 ---------------- */
html[data-theme="starry"] ::-webkit-scrollbar-thumb,
html[data-theme="smoke"] ::-webkit-scrollbar-thumb,
html[data-theme="graphite"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 6px; }
html[data-theme="starry"] ::-webkit-scrollbar,
html[data-theme="smoke"] ::-webkit-scrollbar,
html[data-theme="graphite"] ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }

/* =====================================================================
   暗色系通用配色覆盖
   前端大量使用写死的浅色 class（bg-[#f6f8fa] / text-[#1f2328] / border-[#d0d7de] …），
   只改 CSS 变量不够，这里把这一族浅色统一映射成深色，四套主题各自取色。
   ===================================================================== */
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) {
  --zq-panel: rgba(255, 255, 255, 0.05);
  --zq-panel-2: rgba(255, 255, 255, 0.035);
  --zq-inset: rgba(255, 255, 255, 0.075);
  --zq-strong: rgba(255, 255, 255, 0.16);
  --zq-hover: rgba(255, 255, 255, 0.12);
  --zq-line: rgba(255, 255, 255, 0.12);
  --zq-line-soft: rgba(255, 255, 255, 0.08);
  --zq-t1: #eef3fb;
  --zq-t2: rgba(233, 240, 251, 0.74);
  --zq-t3: rgba(233, 240, 251, 0.52);
}

/* —— 背景：卡片 / 面板 / 浅灰块 —— */
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="bg-[#f6f8fa]"],[class*="bg-[#fafbfc]"],[class*="bg-[#f8fafc]"]) { background-color: var(--zq-panel) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="bg-[#ffffff]"],[class*="bg-[#fff]"],[class*="bg-[#f7f9fc]"],[class*="bg-[#fcfdff]"]) { background-color: var(--zq-panel-2) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="bg-[#eef1f4]"],[class*="bg-[#eaeef2]"],[class*="bg-[#e3e9f0]"],[class*="bg-[#eff2f5]"],[class*="bg-[#f1f4f9]"],[class*="bg-[#f3f6fa]"]):not([class*="hover:"]) { background-color: var(--zq-inset) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="bg-[#d0d7de]"], [class*="bg-[#dfe6ee]"]) { background-color: var(--zq-strong) !important; }

/* —— 文字：三级灰阶全部翻成亮色 —— */
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="text-[#1f2328]"],[class*="text-[#24292f]"],[class*="text-[#0d1117]"], [class*="text-black"]) { color: var(--zq-t1) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="text-[#57606a]"],[class*="text-[#424a53]"],[class*="text-[#5b6672]"],[class*="text-[#656d76]"]) { color: var(--zq-t2) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="text-[#6e7781]"],[class*="text-[#8c959f]"],[class*="text-[#909aa6]"]) { color: var(--zq-t3) !important; }

/* —— 边框 / 分割线 —— */
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="border-[#d0d7de]"],[class*="border-[#dfe6ee]"],[class*="divide-[#d0d7de]"],[class*="ring-[#d0d7de]"]) { border-color: var(--zq-line) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) :is([class*="border-[#eef1f4]"],[class*="border-[#e6ecf3]"],[class*="border-[#eaeef2]"],[class*="border-[#eff2f5]"]) { border-color: var(--zq-line-soft) !important; }

/* —— 悬停态（放在基础规则之后，保持反馈） —— */
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) [class*="hover:bg-"]:hover { background-color: var(--zq-hover) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) [class*="hover:border-"]:hover { border-color: rgba(255, 255, 255, 0.28) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) [class*="hover:text-"]:hover { color: var(--zq-t1) !important; }

/* —— 表单控件 —— */
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) input::placeholder,
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) textarea::placeholder { color: rgba(233, 240, 251, 0.42) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) input,
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) select,
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) textarea { color: var(--zq-t1) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) table tr:hover td { background-color: rgba(255, 255, 255, 0.04) !important; }
html:is([data-theme="starry"],[data-theme="smoke"],[data-theme="graphite"]) ::selection { background: rgba(220, 53, 69, 0.38); }

/* 纯白主题：底板去灰，走真正的白 */
html[data-theme="white"] { --zq-bg-color: #ffffff; --zq-bg-img: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); }