/* ============================================================
   RobotERP 主题改造 v2 —— 4 套主题 + 全局半透明卡片

   纯「覆盖层」：不改 style.css 一个字节，不改任何 HTML 结构 / id / JS。
   只做四件事：
     A. 变量层 —— 4 套主题的取值
     B. 组件层 —— 修正原样式硬伤 + 统一控件外观
     C. 载体层 —— 让「所有」卡片都能透出背景
     D. 降级保护

   【4 套主题】
     默认极简   近纯色的干净默认主题（没有彩色背景）
     淡雅青绿   中性冷灰底 + 墨青强调，背景不染绿
     万紫千红   蓝紫厚玻璃，背景最多彩
     温雅砂棕   米白纸感 + 赤陶

   【关键设计：两个"面"变量，各管一类】
   --bg-card     半透明卡片面。项目里有 40+ 处元素用它做底色
                 （.card / .stat-card / .oz-panel / .ac-card / .help-tree …），
                 把它设成半透明，这些卡片就**自动全部**能透出背景。
   --bg-popover  不透明浮层面。下拉菜单 / 提示气泡 / 弹窗 / toast 用这一类 ——
                 它们压在内容之上，必须看不清背景才不会串字。
   本节 B13 会把浮层逐个改指到 --bg-popover。

   【一个必须让出来的坑（踩过）】
   .workspace-area（主内容区，style.css:238）自己画了一层不透明的 --bg-primary，
   会把 html 上的底纹和 body::before 的光斑**全部压在下面**。
   表现是：侧边栏/顶栏（在它外面）能透出背景，但里面所有卡片后面永远是纯色。
   所以 B2b 必须把它（以及其它几处页面级底色）让出来。

   【另一个坑】
   --inset-hi 在浅色主题里不能写 none —— .card / .btn-primary 是
   box-shadow: <外投影>, var(--inset-hi) 这种混合列表，掺进 none 整条会失效。

   【主题内部 id】
   仍沿用原来的 silver / dark / rose / ocean（只换外观和显示名）。
   因为 core/theme.js 会把 localStorage 里的值直接 setAttribute，
   改 id 会让老用户读到不存在的主题名 → 变量全取不到 → 页面没样式。

   【回滚】删掉 index.html 里引用本文件的那一行 <link> 即可。
   ============================================================ */

/* ============================================================
   A. 变量层
   ============================================================ */

/* ---------- 兜底：data-theme 不是这 4 个值时 ---------- */
:root{
  --menu-fg:#111827;
  --menu-accent:#3B82F6;
  --menu-accent-soft:rgba(59,130,246,.11);
  --border-strong:#CFD7E6;
  --ring:rgba(59,130,246,.30);
  --inset-hi:inset 0 0 0 0 transparent;
  --card-bg:rgba(255,255,255,.80);
  --card-blur:10px;
  --card-sat:1.4;
  --bg-card:rgba(255,255,255,.80);
  --bg-popover:#FFFFFF;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 8px 20px -8px rgba(16,24,40,.10);
  --shadow-hover:0 16px 34px -14px rgba(16,24,40,.22);
  --app-bg-image:none;
  --blob-opacity:0;
  --blob-blur:70px;
  --blob-1:rgba(59,108,246,.40);
  --blob-2:rgba(56,189,248,.34);
  --blob-3:rgba(124,92,255,.32);
  --log-bg:rgba(255,255,255,.72);
  --log-fg:#5A6478;
  --nav-solid:#FFFFFF;
  --notice-bg:#EDF3FF;
  --notice-bg2:#E1EBFF;
  --notice-fg:#2B4A96;
  --notice-border:#D2E0FB;
}

/* ============================================================
   主题 1 · 凝霜  极简精密  （干净默认主题 —— 没有彩色背景）
   设计语言：近纯色冷灰底 + 纯白面 + 1px 冷灰描边 + 双层微投影
   ============================================================ */
html[data-theme="silver"]{
  --menu-fg:#111827;
  --menu-accent:#3B82F6;
  --menu-accent-soft:rgba(59,130,246,.11);
  /* 面 */
  --bg-primary:#F8FAFF;
  --bg-secondary:rgba(255,255,255,.80);
  --bg-tertiary:rgba(255,255,255,.52);
  --bg-input:rgba(255,255,255,.72);
  --card-bg:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.76));
  --bg-card:rgba(255,255,255,.82);
  --bg-popover:#FFFFFF;
  --card-blur:8px;--card-sat:1.3;
  /* 线 */
  --border-color:#E5EAF3;
  --border-strong:#CFD7E6;
  --border-focus:#3B82F6;
  /* 字 */
  --text-primary:#111827;
  --text-secondary:#5A6478;
  --text-muted:#777F8E;
  /* 主色：亮正蓝（渐变不再压深；浅蓝底用低不透明度保持"亮"而非"深"） */
  --primary-color:#3B82F6;
  --primary-hover:#2E74EE;
  --primary-light:rgba(59,130,246,.07);
  --primary-soft:rgba(59,130,246,.07);
  --primary-gradient:linear-gradient(135deg,#5C9CFF,#3B82F6);
  --ring:rgba(59,130,246,.30);
  /* 语义色 */
  --success-color:#15A46E;--success-ink:#0D7A51;
  --warning-color:#D97706;--warning-ink:#A85A05;
  --danger-color:#E23D4B; --danger-ink:#B92733;
  --info-color:#0E8FD1;   --info-ink:#0A6E9F;
  --pink-color:#7C4DF0;   --pink-ink:#5E33C8;
  /* 阴影 */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 1px 2px rgba(16,24,40,.04),0 8px 20px -8px rgba(16,24,40,.10);
  --shadow-lg:0 16px 40px -12px rgba(16,24,40,.20);
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 8px 20px -8px rgba(16,24,40,.10);
  --shadow-hover:0 16px 34px -14px rgba(16,24,40,.22);
  --inset-hi:inset 0 0 0 0 transparent;
  /* 底纹：只有一层极淡的冷色，保持"不花" */
  --app-bg-image:radial-gradient(1000px 520px at 20% -12%,rgba(59,130,246,.07),transparent 60%);
  --blob-opacity:0;
  --log-bg:rgba(255,255,255,.72);--log-fg:#5A6478;
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;
  --nav-solid:#FFFFFF;
  --notice-bg:#F2F7FF;--notice-bg2:#E8F1FF;
  --notice-fg:#2B4A96;--notice-border:#D2E0FB;
}

/* ============================================================
   主题 2 · 静谧  冷灰青绿  （中性冷灰底 + 墨青强调）
   设计语言：背景是中性冷灰、**不染绿**，青绿只做点缀；
             几乎不用投影，靠描边分层，呼吸感强。
   ============================================================ */
html[data-theme="dark"]{
  --menu-fg:#0F1F1C;
  --menu-accent:#0F8C82;
  --menu-accent-soft:rgba(15,140,130,.09);
  --bg-primary:#F1F4F3;
  --bg-secondary:rgba(255,255,255,.80);
  --bg-tertiary:rgba(255,255,255,.52);
  --bg-input:rgba(255,255,255,.70);
  --card-bg:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.72));
  --bg-card:rgba(255,255,255,.80);
  --bg-popover:#FFFFFF;
  --card-blur:10px;--card-sat:1.3;
  --border-color:#E1E9E7;
  --border-strong:#C8D8D5;
  --border-focus:#0F8C82;
  --text-primary:#0F1F1C;
  --text-secondary:#4E6360;
  --text-muted:#72827F;
  --primary-color:#0F8C82;
  --primary-hover:#0B756D;
  --primary-light:rgba(15,140,130,.09);
  --primary-soft:rgba(15,140,130,.09);
  --primary-gradient:linear-gradient(135deg,#0E8378,#0A6157);
  --ring:rgba(15,140,130,.28);
  /* 成功色刻意用翠绿，与主色的墨青区分开（原绿主题两者同色，分不出主操作） */
  --success-color:#22A45D;--success-ink:#178048;
  --warning-color:#CE8508;--warning-ink:#A2680A;
  --danger-color:#DC4A47; --danger-ink:#B33532;
  --info-color:#2F7FC4;   --info-ink:#22639C;
  --pink-color:#7A5EC4;   --pink-ink:#5D45A0;
  --shadow-sm:0 1px 2px rgba(14,32,30,.05);
  --shadow-md:0 1px 3px rgba(14,32,30,.04),0 10px 24px -10px rgba(14,32,30,.12);
  --shadow-lg:0 18px 44px -14px rgba(14,32,30,.20);
  --shadow-card:0 1px 3px rgba(14,32,30,.05),0 10px 24px -12px rgba(14,32,30,.14);
  --shadow-hover:0 18px 40px -16px rgba(14,32,30,.22);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.9);
  /* 底纹：中性冷灰底上极淡的青绿/冷蓝，克制不染整页 */
  --app-bg-image:
    radial-gradient(900px 520px at 14% -12%,rgba(15,140,130,.10),transparent 62%),
    radial-gradient(760px 480px at 102% 0,rgba(80,140,190,.08),transparent 58%);
  --blob-opacity:.30;
  --blob-blur:70px;
  --blob-1:rgba(15,140,130,.34);
  --blob-2:rgba(80,140,190,.30);
  --blob-3:rgba(120,160,150,.26);
  --log-bg:rgba(255,255,255,.68);--log-fg:#4E6360;
  --radius-sm:5px;--radius-md:10px;--radius-lg:14px;
  --nav-solid:#FFFFFF;
  --notice-bg:#E9F6F4;--notice-bg2:#DCF0ED;
  --notice-fg:#0A5952;--notice-border:#C7E6E1;
}

/* ============================================================
   主题 3 · 万紫千红  （蓝紫厚玻璃，背景最多彩、卡片最透）
   ============================================================ */
html[data-theme="rose"]{
  --menu-fg:#111830;
  --menu-accent:#3B63F6;
  --menu-accent-soft:rgba(59,99,246,.12);
  --bg-primary:#E8EDFB;
  --bg-secondary:rgba(255,255,255,.54);
  --bg-tertiary:rgba(255,255,255,.22);
  --bg-input:rgba(255,255,255,.34);
  --card-bg:linear-gradient(152deg,rgba(255,255,255,.40),rgba(255,255,255,.12));
  --bg-card:rgba(255,255,255,.42);
  --bg-popover:#F5F8FF;
  --card-blur:32px;--card-sat:2;
  --border-color:rgba(255,255,255,.62);
  --border-strong:rgba(255,255,255,.94);
  --border-focus:#3B63F6;
  --text-primary:#111830;
  --text-secondary:#414D73;
  --text-muted:#6C7391;
  --primary-color:#3B63F6;
  --primary-hover:#2A50E8;
  --primary-light:rgba(59,99,246,.12);
  --primary-soft:rgba(59,99,246,.12);
  --primary-gradient:linear-gradient(135deg,#4365D9,#6038C8 55%,#3763B8);
  --ring:rgba(78,123,255,.34);
  --glow:rgba(78,123,255,.48);
  --success-color:#0C8B66;--success-ink:#08654B;
  --warning-color:#B06A05;--warning-ink:#8A5003;
  --danger-color:#CB3B57; --danger-ink:#A32440;
  --info-color:#1F79D6;   --info-ink:#165BA8;
  --pink-color:#7547E8;   --pink-ink:#5A2FC4;
  --shadow-sm:0 1px 2px rgba(38,48,110,.06);
  --shadow-md:0 2px 6px rgba(38,48,110,.06),0 20px 48px -20px rgba(38,48,110,.46);
  --shadow-lg:0 32px 74px -26px rgba(38,48,110,.58);
  --shadow-card:0 3px 8px rgba(38,48,110,.07),0 24px 54px -24px rgba(38,48,110,.50);
  --shadow-hover:0 34px 72px -28px rgba(38,48,110,.60);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.98);
  --app-bg-image:
    radial-gradient(1050px 760px at 6% -16%,rgba(80,138,255,.55),transparent 58%),
    radial-gradient(900px 680px at 102% -4%,rgba(255,112,186,.50),transparent 56%),
    radial-gradient(1000px 800px at 46% 122%,rgba(118,94,255,.52),transparent 60%),
    radial-gradient(760px 580px at 82% 66%,rgba(56,222,198,.38),transparent 58%),
    linear-gradient(180deg,#F1F5FE,#E4EAF9);
  --blob-opacity:1;
  --blob-blur:60px;
  --blob-1:rgba(80,138,255,.70);
  --blob-2:rgba(255,112,186,.62);
  --blob-3:rgba(118,94,255,.66);
  --log-bg:rgba(255,255,255,.50);--log-fg:#33406B;
  --radius-sm:10px;--radius-md:16px;--radius-lg:22px;
  --nav-solid:#F3F6FE;
  --notice-bg:#EDF1FE;--notice-bg2:#E4EBFD;
  --notice-fg:#373E7E;--notice-border:#D6DEF9;
}

/* ============================================================
   主题 4 · 温雅砂棕  （米白纸感 + 赤陶）
   ============================================================ */
html[data-theme="ocean"]{
  --menu-fg:#2C251B;
  --menu-accent:#C2703C;
  --menu-accent-soft:rgba(194,112,60,.10);
  --bg-primary:#F1E9DB;
  --bg-secondary:rgba(255,252,246,.80);
  --bg-tertiary:rgba(255,251,243,.48);
  --bg-input:rgba(255,252,245,.66);
  --card-bg:linear-gradient(160deg,rgba(255,253,249,.78),rgba(255,250,242,.60));
  --bg-card:rgba(255,253,249,.74);
  --bg-popover:#FFFCF7;
  --card-blur:14px;--card-sat:1.35;
  --border-color:#E9DFCE;
  --border-strong:#D6C7AE;
  --border-focus:#C2703C;
  --text-primary:#2C251B;
  --text-secondary:#635747;
  --text-muted:#7E7361;
  --primary-color:#C2703C;
  --primary-hover:#AC6031;
  --primary-light:rgba(194,112,60,.10);
  --primary-soft:rgba(194,112,60,.10);
  --primary-gradient:linear-gradient(135deg,#A85A2B,#8A4718);
  --ring:rgba(194,112,60,.28);
  --success-color:#517D40;--success-ink:#3E6130;
  --warning-color:#B37A12;--warning-ink:#8A5E0B;
  --danger-color:#AE3F27; --danger-ink:#8A2F1B;
  --info-color:#356E85;   --info-ink:#275668;
  --pink-color:#7C5DA2;   --pink-ink:#5F4580;
  --shadow-sm:0 1px 2px rgba(120,92,60,.07);
  --shadow-md:0 2px 6px rgba(120,92,60,.06),0 14px 30px -16px rgba(120,92,60,.32);
  --shadow-lg:0 20px 48px -18px rgba(120,92,60,.42);
  --shadow-card:0 2px 7px rgba(120,92,60,.07),0 16px 34px -18px rgba(120,92,60,.36);
  --shadow-hover:0 22px 46px -20px rgba(120,92,60,.46);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --app-bg-image:
    radial-gradient(900px 540px at 100% -8%,rgba(214,166,110,.34),transparent 60%),
    radial-gradient(780px 500px at -6% 10%,rgba(194,112,60,.22),transparent 58%),
    radial-gradient(860px 560px at 60% 112%,rgba(154,164,104,.18),transparent 60%),
    linear-gradient(180deg,#F7F2E8,#EEE5D5);
  --blob-opacity:.55;
  --blob-blur:70px;
  --blob-1:rgba(214,166,110,.50);
  --blob-2:rgba(194,112,60,.38);
  --blob-3:rgba(154,164,104,.32);
  --log-bg:rgba(255,250,242,.70);--log-fg:#635747;
  --radius-sm:6px;--radius-md:12px;--radius-lg:18px;
  --nav-solid:#FDFAF4;
  --notice-bg:#FBF2E5;--notice-bg2:#F7E9D6;
  --notice-fg:#7A4520;--notice-border:#EFDCC3;
}

/* ============================================================
   B. 组件层（只改颜色 / 描边 / 阴影 / 圆角，不动尺寸）
   ============================================================ */

/* ---------- B1. 页面底 ----------
   底纹画在 html（画布层），body 保持透明，光斑放在 body::before 并给负 z-index。
   给正 z-index 会盖住侧边栏 —— 侧边栏没有 position，属普通流，
   绘制层级天生低于 z-index:0 的定位元素。 */
html[data-theme="silver"],
html[data-theme="dark"],
html[data-theme="rose"],
html[data-theme="ocean"]{
  background-color:var(--bg-primary);
  background-image:var(--app-bg-image);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
html[data-theme="silver"] body,
html[data-theme="dark"] body,
html[data-theme="rose"] body,
html[data-theme="ocean"] body{
  background-color:transparent;
  background-image:none;
}

/* 浮动光斑（纯 CSS，不动 HTML）。凝霜主题 --blob-opacity:0，完全不要彩色背景。 */
body::before{
  content:'';
  position:fixed;inset:-12%;
  z-index:-1;
  pointer-events:none;
  opacity:var(--blob-opacity);
  background:
    radial-gradient(circle 400px at 12% 8%,   var(--blob-1) 0%, transparent 100%),
    radial-gradient(circle 340px at 45% -4%,  var(--blob-3) 0%, transparent 100%),
    radial-gradient(circle 440px at 90% 12%,  var(--blob-2) 0%, transparent 100%),
    radial-gradient(circle 360px at 2% 60%,   var(--blob-2) 0%, transparent 100%),
    radial-gradient(circle 420px at 52% 102%, var(--blob-3) 0%, transparent 100%),
    radial-gradient(circle 380px at 96% 76%,  var(--blob-1) 0%, transparent 100%);
  filter:blur(var(--blob-blur));
  animation:twBlobDrift 28s ease-in-out infinite alternate;
}
@keyframes twBlobDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(3%,-2%,0) scale(1.08)}
}

/* ---------- B2b.【关键】页面级"底色"必须让出来 ---------- */
/* .workspace-area（主内容区，style.css:238）自己画了一层不透明的 --bg-primary，
   把 html 的底纹和 body::before 的光斑全挡在下面 ——
   表现就是"侧边栏/顶栏能透出背景，但里面所有卡片后面永远是纯色"。
   B2c 再把主内容区里"自带底色的卡片容器"也一并让出来。 */
.workspace-area,
.workspace-panel,
.help-content{background:transparent}

/* #workspace-recharge 在 style.css:681 用 id 选择器写了自己的渐变底，优先级更高 */
#workspace-recharge{background:transparent}

/* ---------- B2c. 页面里"自带底色"的卡片容器 ----------
   这些类在 style.css / agent-commission.css 里写着 background:var(--bg-card)。
   现在 --bg-card 已经是半透明的，所以它们会自动跟着变透 —— 这里只挑出
   「以固定色写死」或「优先级更高」的几处单独处理。 */
.stat-card,
.stat-card-mini,
.stat-mini-card,
.sourcing-auth-card,
.sourcing-product-card,
.pp-card,
.hf-item,
.announce-item,
.announce-latest,
.help-tree,
.recharge-hero,
.recharge-order-table,
.ac-card,
.preview-container,
.oz-panel,
.oz-ribbon,
.oz-hcard,
.oz-nav-i,
.oz-quick-i{background:var(--card-bg)}

/* 遨虾页在 style.css:243 把卡片写死成 rgba(255,255,255,.45)（纯白、不跟主题），
   暖砂这类暖色主题下会发灰，这里改回主题变量 */
#workspace-aoixia .card,
#workspace-aoixia .sourcing-auth-card,
#workspace-aoixia .sourcing-product-card{background:var(--card-bg)}

/* .dash-chart-card 定义在 panel_dashboard.html 的内联 <style> 里（排在本文件之后），
   加 html 前缀提高优先级 */
html .dash-chart-card{background:var(--card-bg)}

/* #smartSelectTopCard / #smartSelectEditCard 的底色是内联 style 属性，
   内联样式优先级最高，只能用 !important */
#smartSelectTopCard,
#smartSelectEditCard{background:var(--card-bg)!important}

/* 大盘页的 4 张彩色数据卡（.ov-card.ov-blue/green/purple/orange，白字压纯色）。
   定义在 panel_dashboard.html 的内联 <style> 里，加 html 前缀才能覆盖。
   这里做成"彩色玻璃"：保留 ~86% 不透明度 + 内高光 ——
   既能看到一点背景，白字对比度也不掉（全透明会让白字糊掉）。 */
html .ov-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(14px) saturate(150%);
}
html .ov-card.ov-blue  {background:linear-gradient(160deg,rgba(29,78,216,.92),rgba(29,78,216,.80))}
html .ov-card.ov-green {background:linear-gradient(160deg,rgba(21,128,61,.92),rgba(21,128,61,.80))}
html .ov-card.ov-purple{background:linear-gradient(160deg,rgba(124,58,237,.92),rgba(124,58,237,.80))}
html .ov-card.ov-orange{background:linear-gradient(160deg,rgba(194,65,12,.92),rgba(194,65,12,.80))}

/* ---------- B2. 侧边栏 / 顶栏：半透明 + 背景模糊，0 布局位移 ---------- */
/* 注意（踩过）：给 .sidebar 加 backdrop-filter 会让它**创建新的层叠上下文**。
   而侧边栏原来没有 position，z-index 不生效 → 它排在普通流里，
   于是里面的悬浮提示（.nav-item::after，z-index:200）被一起"关"进这一层，
   被内容区（.main-content z-index:101）盖住。
   解决：把侧边栏变成正经的定位层，层级放到内容区之上，提示就能正常压在最上层。 */
.sidebar{
  position:relative;
  z-index:110;
  background:var(--bg-secondary);
  box-shadow:inset -1px 0 0 var(--border-color);
  backdrop-filter:blur(18px) saturate(160%);
}
.top-bar{
  background:var(--bg-secondary);
  box-shadow:inset 0 -1px 0 var(--border-color);
  backdrop-filter:blur(18px) saturate(160%);
}

/* ---------- B3. 卡片：半透明 + 背景模糊（4 套主题统一） ---------- */
/* 原来 border 是 transparent、阴影是一层 0 4px 20px rgba(0,0,0,.12) 重阴影
   → 卡片"浮在雾里"。改成 1px 实体描边 + 两层淡投影 + 半透明玻璃面。 */
.card{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  box-shadow:var(--inset-hi),var(--shadow-card);
  backdrop-filter:blur(var(--card-blur)) saturate(var(--card-sat));
}
/* 玻璃栅格：45° 双向细网格（取自测试版 aurora 的 .pv 做法），只给最透的液态玻璃加 */
html[data-theme="rose"] .card{
  box-shadow:var(--inset-hi),inset 0 -1px 0 rgba(255,255,255,.30),var(--shadow-card);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.13) 0 1px, transparent 1px 11px),
    var(--card-bg);
}
html[data-theme="rose"] .aigc-preview-area,
html[data-theme="rose"] .preview-container{
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 10px);
}

/* ---------- B4. 卡片头：分隔线从 transparent 改成真实颜色 ---------- */
.card-header{
  border-bottom:1px solid var(--border-color);
  letter-spacing:-.01em;
}

/* ---------- B5. 表单控件 ---------- */
.form-input,.form-select,.form-textarea{
  background:var(--bg-input);
  border:1px solid var(--border-color);
  box-shadow:var(--inset-hi);
  color:var(--text-primary);
}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--border-strong)}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px var(--ring);
}
.form-input:disabled,.form-textarea:disabled{opacity:.6}

/* ---------- B6. 上传拖放区 ---------- */
.drop-zone{
  border-color:var(--border-strong);
  background:var(--bg-tertiary);
  color:var(--text-muted);
}
.drop-zone:hover,.drop-zone.drag-over{
  border-color:var(--primary-color);
  background:var(--primary-light);
  color:var(--primary-color);
}

/* ---------- B7. 日志台：跟随主题的面板色（不做成纯黑） ---------- */
/* 原来 background 用 --bg-primary，和卡片同色 → 糊在卡片里看不出是输出区。
   全项目只有 3 个日志台：#aigcLog / #aigcTextPreview / #ozonLog，
   内容都是纯文本（logSystem.js 用 textContent 写入，没有自带颜色）。 */
.log-console{
  background:var(--log-bg);
  color:var(--log-fg);
  border:1px solid var(--border-color);
}
/* 这 3 个日志台在模板里内联写了 border:none，内联优先，只能用 !important 补描边 */
#aigcLog,#aigcTextPreview,#ozonLog{border:1px solid var(--border-strong)!important}

/* ---------- B8. 预览区：比卡片再透一档 ---------- */
.aigc-preview-area,
.preview-container{
  background:var(--bg-tertiary);
  box-shadow:inset 0 0 0 1px var(--border-color);
}
.preview-placeholder{color:var(--text-muted)}

/* ---------- B9. 按钮体系 ---------- */
/* 注意：本文件是后加载覆盖层，在 .btn 上重设某个属性会把 style.css 里排在它之后、
   优先级相同的变体规则一起盖掉。.btn-icon（圆角 50%）在 .btn 之后，必须再声明一次。 */
.btn{
  border-radius:var(--radius-sm);
  font-weight:600;
  letter-spacing:-.005em;
}
.btn-icon{border-radius:50%}

.btn-primary{
  background:var(--primary-gradient);
  color:#fff;
  box-shadow:0 3px 12px -4px var(--ring),var(--inset-hi);
}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 8px 20px -6px var(--ring)}

/* 次按钮壓在内容上，必须看得清 —— 用不透明浮层色 */
.btn-secondary{
  background:var(--bg-popover);
  color:var(--text-primary);
  border:1px solid var(--border-strong);
}
.btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--primary-color);color:var(--primary-color)}

/* 【改动最大的一处】幽灵按钮 221 处 → 从"裸文字"改成"浅底描边的小按钮" */
.btn-ghost{
  background:var(--bg-tertiary);
  color:var(--text-secondary);
  border:1px solid var(--border-color);
}
.btn-ghost:hover{
  background:var(--primary-light);
  border-color:var(--primary-color);
  color:var(--primary-color);
}

.btn-outline{background:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}
.btn-outline:hover{background:var(--primary-light)}

.btn-success,.btn-danger,.btn-info{color:#fff;box-shadow:0 3px 10px -4px rgba(0,0,0,.30)}
.btn-warning{color:#3A2A00;box-shadow:0 3px 10px -4px rgba(0,0,0,.24)}

.btn-lg{font-weight:700;letter-spacing:.01em}

/* ---------- B10. 顶部标签（AIGC / OZON 共用 .ozon-tab） ---------- */
.ozon-tab,.aoixia-tab{
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
  font-weight:600;
}
.ozon-tab:hover,.aoixia-tab:hover{
  background:var(--bg-popover);
  border-color:var(--primary-color);
  color:var(--primary-color);
}
.ozon-tab.active,.aoixia-tab.active{
  background:var(--primary-gradient);
  border-color:transparent;
  color:#fff;
  box-shadow:0 3px 10px -3px var(--ring);
}

/* ---------- B11. 侧边栏导航（对应 style.css:38 写死的 rgba(245,59,93,.08)） ---------- */
.nav-item:hover{background:var(--primary-light);color:var(--primary-color)}
.nav-item .badge{background:var(--danger-color);color:#fff}
.nav-item.active{box-shadow:0 2px 6px var(--ring)}

/* OZON 磁贴 → 亮正蓝（与主按钮同一色）。
   覆盖 style.css:63-64 由 --h/--h2 算出的 hsl 取值；选择器多一层
   [data-workspace] 保证优先级更高。--c1 同时驱动 style.css:71/77/80 的投影，
   所以只改这两个变量，渐变和投影一起统一。其余 8 块磁贴保持各自彩色不动。 */
.nav-tiles .nav-item[data-workspace="ozon"] .nav-txt{--c1:#5C9CFF;--c2:#3B82F6}

/* ---------- B12. 开关 ---------- */
.toggle-slider{background:var(--border-strong)}
.toggle-slider::before{background:#fff}

/* ---------- B13.【浮层 → 走不透明变量】 ----------
   --bg-card 现在是半透明的（为了让所有卡片透出背景），但下面这些元素
   是"压在内容之上"的：下拉菜单、提示气泡、弹窗、toast。
   它们保持半透明会串字，所以统一改指 --bg-popover（不透明）。 */
.nav-item::after,
.user-menu,
.theme-menu,
.kefu-popup,
.kefu-popup-arrow,
.task-name-dropdown,
.toast,
.modal,
.modal-header,
.modal-footer,
.text-fullscreen-modal,
.text-fullscreen-header,
.expired-overlay-content,
.assistant-guide-step{
  background:var(--bg-popover);
}
.nav-item::after{color:var(--text-primary);border:1px solid var(--border-color);box-shadow:var(--shadow-hover)}
.theme-menu,.user-menu{border:1px solid var(--border-color);box-shadow:var(--shadow-lg)}

/* ---------- B19.【浮层一律不透明】（2026-09-27 第三轮） ----------
   --bg-card 是半透明的（页面卡片要透出背景），但「浮在内容之上」的东西不能透：
   一透就会看到底下的文字串上来。这里做两件事：
     ① 把浮层容器内部的 --bg-card / --card-bg 整体替换成实心的 --bg-popover
        → 容器里任何用 --bg-card 画的子元素（小箭头、分区、内面板）都自动变实；
     ② 个别把颜色写死在行内 style 上的，单独用 !important 兜正。
   ★ 这里只改「弹窗本体」。全屏变暗的遮罩层（.modal-overlay / .expired-overlay 等）
     不在此列 —— 遮罩必须保持半透明，否则会把整个页面盖住看不见。 */
.modal,
.modal-header,
.modal-footer,
.user-menu,
.theme-menu,
.merchant-menu,
.kefu-popup,
.kefu-popup-arrow,
.toast,
.task-name-dropdown,
.text-fullscreen-modal,
.text-fullscreen-header,
.expired-overlay-content,
.assistant-guide-step,
.ops-save-panel,
.ops-modal-box,
#navCbTooltip,
#merchantMenu,
#aoixiaSlideNotify,
#llmSlideNotice,
#aoixiaCardMore,
#atUsageModal > div{
  --bg-card:var(--bg-popover);
  --card-bg:var(--bg-popover);
  backdrop-filter:none;
}
/* 底栏控制条的颜色写死在行内 style 上，只能 !important 兜正 */
#mangpuControlBar{background:#0B0B0B !important}

/* ---------- B20.【弹窗一律不透明：通配兜底】（2026-09-27） ----------
   凡是 class/id 里带 modal / overlay / popup / popover / dropdown / toast 的容器，
   把内部的 --bg-card / --card-bg 换成实心的 --bg-popover。
   这样容器内部任何子元素（内容框、箭头、分区、小面板）都自动变实 ——
   包含 JS 动态创建的弹窗（如「图片二创选择」）和新页面「询盘列表」的弹层，
   不用再逐个列名单，避免漏掉。
   ★ 只改弹窗本体；全屏压暗的遮罩层自身背景是直接写 rgba 的，不受影响。 */
[class*="modal"], [class*="Modal"], [id*="modal"], [id*="Modal"],
[class*="overlay"], [class*="Overlay"], [id*="overlay"], [id*="Overlay"],
[class*="popup"], [class*="Popup"], [id*="popup"], [id*="Popup"],
[class*="popover"], [class*="Popover"], [id*="popover"], [id*="Popover"],
[class*="dropdown"], [class*="Dropdown"], [id*="dropdown"], [id*="Dropdown"],
[class*="toast"], [class*="Toast"],
[class*="Modal"], [class*="Dialog"], [id*="Dialog"],
[class*="dialog"], [class*="Drawer"], [class*="drawer"],
[id*="Drawer"], [id*="drawer"]{
  --bg-card:var(--bg-popover);
  --card-bg:var(--bg-popover);
}
/* 已存在的下拉/气泡类名（不含上面那些词，单独列一次） */
.user-menu,.theme-menu,.merchant-menu,.kefu-popup,.kefu-popup-arrow,
.task-name-dropdown,.assistant-guide-step,#navCbTooltip,#merchantMenu,
#aoixiaCardMore,#mangpuControlBar{
  --bg-card:var(--bg-popover);
  --card-bg:var(--bg-popover);
}
/* ★ 2026-09-27 第四轮：类名/ID 里不含 modal/popup/drawer 等关键词的浮层，
   变量替换命中不了 → 逐个点名兜底（都是"压在页面内容之上"的，必须不透明）。 */
#srcOfferMask .src-offer-box,
#srcConfirmMask .src-confirm-box,
#srcDemandMask .src-confirm-box{
  --bg-card:var(--bg-popover);
  --card-bg:var(--bg-popover);
  background:var(--bg-popover);
}
/* 底栏控制条颜色写死在行内，只能 !important */
#mangpuControlBar{background:#0B0B0B !important}

/* ---------- B23.【OZON 上架页按钮调整】（2026-09-27） ---------- */
/* 「图片二创 / 视频二创」原来是绿/橙色药丸，改成和「上传图片」同款的幽灵按钮。
   行内样式优先级最高，只能用 !important 覆盖。 */
button[onclick="ozonMediaRecreate()"],
button[onclick="_ozonMediaVideoRecreateConfirm()"]{
  background:transparent !important;
  color:var(--text-secondary) !important;
  border:1px solid var(--border-color) !important;
  border-radius:var(--radius-sm) !important;
  padding:4px 12px !important;
  height:28px !important;
  font-size:12px !important;
  /* 字重与「上传图片」(.btn) 一致 —— 原来 500 显得比它细 */
  font-weight:600 !important;
}
button[onclick="ozonMediaRecreate()"]:hover,
button[onclick="_ozonMediaVideoRecreateConfirm()"]:hover{
  border-color:var(--primary-color) !important;
  color:var(--primary-color) !important;
}
/* 「生成长图详情页」= 纯文字按钮：不要边框、不要底色，只保留字号/字重（竖排由 .ozon-rich-longbtn 给） */
#ozonRichLongBtn.ozon-rich-longbtn{
  font-size:13px !important;
  font-weight:600 !important;
  padding:0 !important;
  height:auto !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
}

/* ---------- B14. 主题菜单项 ---------- */
.theme-option{color:var(--menu-fg)}
/* 菜单项自身带 data-theme 属性 → 会被 style.css 的"裸属性选择器"
   [data-theme="x"] 直接命中，从而取到"那个主题"的变量。所以这里一律用
   --menu-fg / --menu-accent（本项目原样式没定义过的新变量），只会从根元素继承。 */
.theme-option[data-theme="silver"],
.theme-option[data-theme="dark"],
.theme-option[data-theme="rose"],
.theme-option[data-theme="ocean"]{color:var(--menu-fg)}
.theme-option.active{background:var(--menu-accent-soft);color:var(--menu-accent)}
.theme-option:hover{background:var(--bg-tertiary)}

/* ---------- B15. 主题色块 ---------- */
.theme-swatch.silver{background:linear-gradient(135deg,#E8F2FF,#A9C9FF)} /* 默认极简 · 淡蓝，很浅 */
.theme-swatch.dark  {background:linear-gradient(135deg,#63E2D6,#0E9A96)} /* 淡雅青绿 · 偏青 */
.theme-swatch.rose  {background:linear-gradient(135deg,#B45CFF,#E23B7E)} /* 万紫千红 */
.theme-swatch.ocean {background:linear-gradient(135deg,#F5C74B,#B2702F)} /* 温雅砂棕 */

/* ---------- B16. 工作区面板 ---------- */
.workspace-panel{background:transparent}

/* ---------- B17. 顶部快捷导航条（ESC / 点左上角 logo 唤出）：必须不透明 ---------- */
/* quickNav.css 里它是 background:var(--bg-secondary)，而本文件 B2 段把
   --bg-secondary 改成了半透明（给侧边栏 / 顶栏做玻璃感）→ 这条"覆盖在顶栏上的
   第二条工具条"也跟着变透，底下的文字会透上来。这里换成各主题的实色底
   --nav-solid（纯色、无 alpha），彻底不透明。 */
.quick-nav{
  background:var(--nav-solid);
  border-bottom-color:var(--border-strong);
}
/* 液态玻璃主题的 --border-strong 是半透明白，压在实色底上等于看不见分隔线，
   单独给它一条能看清的线 */
html[data-theme="rose"] .quick-nav{border-bottom-color:rgba(38,48,110,.16)}

/* ---------- B18. 货源发布提示横幅：底色跟随主题 ---------- */
/* .hyfb-banner 的底色原本写死在 panel_hyfb.html 的内联 <style> 里
   （暖黄 → 浅红渐变），不跟主题，在冷色主题下很跳。
   那段内联 <style> 在 body 里、排在本文件之后，同优先级它会赢，
   所以这里加 html 前缀提高优先级。
   改成各主题的浅色调底 + 同色系深色字，正文对比度仍在 8:1 以上。 */
html .hyfb-banner{
  background:linear-gradient(135deg,var(--notice-bg) 0%,var(--notice-bg2) 100%);
  color:var(--notice-fg);
  border-color:var(--notice-border);
  box-shadow:var(--shadow-sm);
}
html .hyfb-banner-close{color:var(--notice-fg)}
html .hyfb-banner-close:hover{background:var(--notice-border);color:var(--notice-fg)}

/* ============================================================
   C. 降级保护
   ============================================================ */

/* 不支持 backdrop-filter 的浏览器：半透明面改成近乎不透明，保证可读性 */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .card,.stat-card,.stat-card-mini,.stat-mini-card{background:var(--bg-popover)}
  .sidebar,.top-bar{background:var(--bg-popover)}
  html[data-theme="rose"] .card{background-image:none}
}

/* 系统里关了动效 → 停掉光斑漂移 */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
}