/* ==========================================================================
   Hiddle Tools Skin — 把现有 AI 工具页的 .bgr-* / .opt-* / .cmp-* / .adj-* 等老类名
   re-skin 到 hiddle.css 设计系统的色调上。
   引用顺序: 必须在 hiddle.css 之后, 在工具页自己的 inline <style> 之后 (才能用 !important 覆盖)
   ========================================================================== */

/* 全局基线 (覆盖各工具页 inline body bg) */
body, html { background: var(--h-bg-base) !important; }
body { color: var(--h-text) !important; font-family: var(--h-font) !important; }

/* === 顶部面包屑栏 (.bgr-bar) → 改成 nav 风格 === */
.bgr-bar {
  height: 56px !important;
  background: rgba(10,10,10,0.85) !important;
  border-bottom: 1px solid var(--h-border-subtle) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  position: sticky !important; top: 0 !important; z-index: 50 !important;
  padding: 0 24px !important;
  font-size: 13px !important;
}
.bgr-bar a { color: var(--h-text-muted) !important; transition: color 120ms !important; text-decoration: none !important; }
.bgr-bar a:hover { color: var(--h-accent) !important; }
.bgr-bar .cur { color: var(--h-text-bright) !important; font-weight: 500 !important; }
.bgr-bar .sep { color: var(--h-text-faint) !important; }

/* === 主面板 === */
.bgr-panel {
  background: var(--h-bg-card) !important;
  border: 1px solid var(--h-border-subtle) !important;
  border-radius: var(--h-r-lg) !important;
  box-shadow: var(--h-shadow-sm);
}

/* === 标题 === */
.bgr-head h1 { color: var(--h-text-bright) !important; letter-spacing: -0.01em; }
.bgr-head p { color: var(--h-text-muted) !important; }

/* === 按钮统一 (.bgr-btn 系列) === */
.bgr-btn {
  background: var(--h-bg-overlay) !important;
  color: var(--h-text) !important;
  border: 1px solid var(--h-border-default) !important;
  border-radius: var(--h-r-md) !important;
  font-family: var(--h-font) !important;
  font-weight: 500 !important;
  transition: all 120ms !important;
}
.bgr-btn:hover { background: rgba(255,255,255,0.07) !important; border-color: var(--h-border-strong) !important; color: var(--h-text-bright) !important; }
.bgr-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
.bgr-btn-primary, .bgr-btn-accent {
  background: var(--h-accent) !important;
  color: var(--h-accent-text) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  background-image: none !important;
}
.bgr-btn-primary:hover, .bgr-btn-accent:hover {
  background: var(--h-accent-hover) !important;
  filter: none !important;
  box-shadow: 0 8px 24px rgba(167,139,250,.20) !important;
}
.bgr-btn-ghost {
  background: transparent !important;
  border: 1px solid var(--h-border-subtle) !important;
  color: var(--h-text-muted) !important;
}
.bgr-btn-ghost:hover { background: var(--h-bg-overlay) !important; border-color: var(--h-border-default) !important; color: var(--h-text) !important; }

/* === 上传/工作区 (.bgr-stage / .wm-stage / .cr-stage) === */
.bgr-stage, .wm-stage, .cr-stage {
  background: var(--h-bg-elevated) !important;
  border: 1.5px dashed var(--h-border-default) !important;
}

/* === 提示框 (.bgr-tips) === */
.bgr-tips {
  background: var(--h-bg-elevated) !important;
  border: 1px dashed var(--h-border-subtle) !important;
  color: var(--h-text-muted) !important;
}
.bgr-tips b { color: var(--h-accent) !important; }

/* === 状态指示 (.bgr-status) === */
.bgr-status {
  background: var(--h-bg-elevated) !important;
  border: 1px solid var(--h-border-subtle) !important;
  color: var(--h-text-muted) !important;
}
.bgr-status .dot { background: var(--h-text-dim) !important; }
.bgr-status.is-loading .dot { background: var(--h-warn) !important; }
.bgr-status.is-ready .dot { background: var(--h-success) !important; }
.bgr-status.is-err .dot { background: var(--h-error) !important; }

/* === 算力标签 (.bgr-cost) === */
.bgr-cost { color: var(--h-text-dim) !important; }
.bgr-cost b { color: var(--h-accent) !important; }

/* === Prompt 输入框 (.bgr-promptbox) === */
.bgr-promptbox {
  background: var(--h-bg-input) !important;
  border: 1px solid var(--h-border-default) !important;
  border-radius: var(--h-r-md) !important;
}
.bgr-promptbox:focus-within {
  border-color: var(--h-border-accent) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.12);
}
.bgr-promptbox label { color: var(--h-text-dim) !important; }
.bgr-promptbox textarea { color: var(--h-text) !important; background: transparent !important; font-family: var(--h-font) !important; }
.bgr-promptbox textarea::placeholder { color: var(--h-text-dim) !important; }

/* === 预设/chip 类: .bgr-preset / .bgr-style / .opt-chip / .opt-color / .wm-tool === */
.bgr-preset, .bgr-style, .opt-chip, .cr-ratio, .cr-flip, .wm-tool, .cr-tool {
  background: var(--h-bg-overlay) !important;
  border: 1px solid var(--h-border-subtle) !important;
  color: var(--h-text-muted) !important;
  border-radius: var(--h-r-md) !important;
  transition: all 120ms !important;
}
.bgr-preset:hover, .bgr-style:hover, .opt-chip:hover,
.cr-ratio:hover, .cr-flip:hover, .wm-tool:hover, .cr-tool:hover {
  border-color: var(--h-border-strong) !important;
  color: var(--h-text-bright) !important;
  background: rgba(255,255,255,0.05) !important;
}
.bgr-preset.is-on, .bgr-style.is-on, .opt-chip.is-on, .cr-ratio.is-on {
  background: var(--h-accent-dim) !important;
  border-color: var(--h-border-accent) !important;
  color: var(--h-accent) !important;
}
.opt-chip .opt-sub { color: var(--h-text-dim) !important; }
.opt-chip.is-on .opt-sub { color: var(--h-accent) !important; opacity: 0.8; }

/* 颜色 swatch */
.opt-color .lbl { color: var(--h-text-muted) !important; }
.opt-color.is-on .lbl { color: var(--h-accent) !important; }
.opt-color.is-on .swatch { box-shadow: 0 0 0 3px var(--h-accent-dim) !important; border-color: var(--h-accent) !important; }

/* === Spinner / loading === */
.bgr-spinner {
  border-color: rgba(167,139,250,.18) !important;
  border-top-color: var(--h-accent) !important;
}
.bgr-load-text { color: var(--h-text) !important; }
.bgr-load-sub { color: var(--h-text-muted) !important; }
.bgr-load-ov { background: rgba(10,10,10,0.88) !important; }

/* === 对比组件 (cmp-* 用于 before/after slider) === */
.cmp-wrap { background: var(--h-bg-elevated) !important; }
.cmp-tag.tag-before { background: rgba(0,0,0,0.65) !important; }
.cmp-tag.tag-after { background: var(--h-accent) !important; color: var(--h-accent-text) !important; }
.cmp-knob { background: var(--h-text-bright) !important; color: #000 !important; }

/* === 高级调节面板 (.adj-card) === */
.adj-card {
  background: var(--h-bg-elevated) !important;
  border-color: var(--h-border-subtle) !important;
  border-radius: var(--h-r-lg) !important;
}
.adj-head { color: var(--h-text-bright) !important; }
.adj-head:hover { background: var(--h-bg-overlay) !important; }
.adj-body { border-top-color: var(--h-border-subtle) !important; }
.adj-tag {
  background: var(--h-accent-dim) !important;
  color: var(--h-accent) !important;
  border-color: var(--h-border-accent) !important;
}
.adj-row label { color: var(--h-text-muted) !important; }
.adj-row .adj-val { color: var(--h-text-dim) !important; }
.adj-row .adj-val.is-active { color: var(--h-accent) !important; }
.adj-row .adj-range::-webkit-slider-thumb {
  background: var(--h-accent) !important;
  box-shadow: 0 2px 6px rgba(167,139,250,.4) !important;
}
.adj-row .adj-range[data-on="1"] {
  background: linear-gradient(to right, var(--h-accent) var(--v), rgba(255,255,255,.08) var(--v)) !important;
}

/* === 裁剪旋转 (.cr-*) === */
.cr-toolbar, .cr-main, .cr-side, .cr-info {
  background: var(--h-bg-card) !important;
  border: 1px solid var(--h-border-subtle) !important;
  border-radius: var(--h-r-lg) !important;
}
.cr-side h3 { color: var(--h-text-bright) !important; }
.cr-section-title { color: var(--h-text-dim) !important; }
.cr-box { border-color: var(--h-accent) !important; }
.cr-h { background: var(--h-text-bright) !important; border: 1px solid var(--h-accent) !important; }
.cr-canvas { background: repeating-conic-gradient(#1f1f1f 0% 25%, #161616 0% 50%) 50%/16px 16px !important; }

/* === 水印工具 (wm-*) === */
.wm-box { border-color: var(--h-accent) !important; background: rgba(167,139,250,0.20) !important; }
.wm-box.is-new { background: rgba(167,139,250,0.28) !important; }
.wm-box .wm-idx { background: rgba(167,139,250,0.85) !important; color: var(--h-accent-text) !important; }

/* === 表格预览 (.tbl-preview) === */
.tbl-preview { background: var(--h-bg-elevated) !important; border-color: var(--h-border-subtle) !important; }
.tbl-preview h4 { color: var(--h-text-bright) !important; }
.tbl-preview h4 .pill { background: var(--h-accent-dim) !important; color: var(--h-accent) !important; }
.tbl-preview th { background: var(--h-bg-overlay) !important; color: var(--h-accent) !important; }
.tbl-preview td { color: var(--h-text) !important; border-color: var(--h-border-subtle) !important; }
.tbl-preview tr:nth-child(even) td { background: rgba(255,255,255,0.02) !important; }

/* === Field 字段卡片 (workflow 详情页) === */
.field {
  background: var(--h-bg-card) !important;
  border-color: var(--h-border-subtle) !important;
  border-radius: var(--h-r-md) !important;
}
.field label { color: var(--h-text-muted) !important; }
.field .hint { color: var(--h-text-dim) !important; }
.field input[type=text], .field input[type=number], .field textarea, .field select {
  background: var(--h-bg-input) !important;
  border-color: var(--h-border-default) !important;
  color: var(--h-text) !important;
  border-radius: var(--h-r-md) !important;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--h-border-accent) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.12) !important;
}
.btn { background: var(--h-bg-overlay) !important; color: var(--h-text) !important; border-color: var(--h-border-default) !important; }
.btn-primary { background: var(--h-accent) !important; color: var(--h-accent-text) !important; border-color: transparent !important; background-image: none !important; }
.btn-primary:hover { background: var(--h-accent-hover) !important; filter: none !important; }
.btn-ghost { background: transparent !important; border-color: var(--h-border-subtle) !important; color: var(--h-text-muted) !important; }

/* === imgbox === */
.imgbox { background: var(--h-bg-elevated) !important; border-color: var(--h-border-default) !important; }
.imgbox.has { border-color: var(--h-border-accent) !important; }

/* ==========================================================================
   daisyUI 暗色覆盖 (营销页 index/pricing/download 等 用了 Tailwind+daisyUI)
   覆盖 HSL CSS 变量, 让 bg-base-100 / text-base-content / btn-primary 等
   全部走 hiddle 暗色调色板.
   ========================================================================== */
[data-theme="yundslight"], [data-theme="yundsdark"], html {
  --b1: 0 0% 4% !important;       /* bg-base-100 -> #0a0a0a */
  --b2: 0 0% 7% !important;       /* bg-base-200 -> #111 */
  --b3: 0 0% 10% !important;      /* bg-base-300 -> #1a1a1a */
  --bc: 0 0% 90% !important;      /* base-content -> #e5e5e5 */
  --p:  259 88% 75% !important;   /* primary -> #a78bfa */
  --pc: 0 0% 6% !important;
  --s:  213 95% 68% !important;
  --sc: 0 0% 6% !important;
  --a:  259 88% 75% !important;
  --ac: 0 0% 6% !important;
  --n:  0 0% 12% !important;
  --nc: 0 0% 90% !important;
  --in: 213 95% 68% !important;
  --inc: 0 0% 6% !important;
  --su: 142 71% 50% !important;
  --suc: 0 0% 6% !important;
  --wa: 38 92% 50% !important;
  --wac: 0 0% 6% !important;
  --er: 0 90% 70% !important;
  --erc: 0 0% 6% !important;
  --rounded-box: 14px;
  --rounded-btn: 8px;
}

/* === 营销页 顶部 navbar 改成 hiddle nav 风格 === */
body.font-sans header.sticky {
  background: rgba(10,10,10,0.85) !important;
  border-bottom-color: var(--h-border-subtle) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
}
body.font-sans header.sticky nav a {
  color: var(--h-text-muted) !important;
  font-weight: 500;
}
body.font-sans header.sticky nav a:hover {
  background: var(--h-bg-overlay) !important;
  color: var(--h-text-bright) !important;
}
body.font-sans header.sticky .btn-primary {
  background: var(--h-text-bright) !important;
  color: #000 !important;
  border: 1px solid var(--h-text-bright) !important;
}
body.font-sans header.sticky .btn-primary:hover {
  background: #fff !important;
}
body.font-sans header.sticky .btn-ghost { color: var(--h-text-muted) !important; }
body.font-sans header.sticky .btn-ghost:hover { background: var(--h-bg-overlay) !important; color: var(--h-text-bright) !important; }
body.font-sans header.sticky .bg-primary {
  background: linear-gradient(135deg, var(--h-accent), var(--h-blue)) !important;
  color: #000 !important;
  box-shadow: 0 0 16px rgba(167,139,250,.4);
}

/* === 营销页 hero 按钮 + 卡片调色 === */
body.font-sans .btn-primary {
  background: var(--h-accent) !important;
  color: var(--h-accent-text) !important;
  border-color: transparent !important;
}
body.font-sans .btn-primary:hover {
  background: var(--h-accent-hover) !important;
}
body.font-sans .card { background: var(--h-bg-card) !important; border-color: var(--h-border-subtle) !important; }
body.font-sans .card-body { color: var(--h-text); }
body.font-sans .badge-primary { background: var(--h-accent-dim) !important; color: var(--h-accent) !important; border-color: var(--h-border-accent) !important; }

/* === 修分界线: daisyUI 的 .divider 用 --bc/0.1 是半透明白, 营销页深底上显得白 === */
body.font-sans .divider,
body.font-sans .divider:before,
body.font-sans .divider:after {
  background-color: var(--h-border-subtle) !important;
  color: var(--h-text-dim) !important;
}
body.font-sans .divider:before, body.font-sans .divider:after { height: 1px !important; }

/* === 修 section 上下分界 border === */
body.font-sans .border-base-300,
body.font-sans [class*="border-y"],
body.font-sans [class*="border-t"],
body.font-sans [class*="border-b"] {
  border-color: var(--h-border-subtle) !important;
}
body.font-sans .border {
  border-color: var(--h-border-subtle) !important;
}

/* === <hr> === */
body.font-sans hr { border-color: var(--h-border-subtle) !important; background-color: var(--h-border-subtle) !important; }

/* === 卡片描边 === */
body.font-sans .card.border, body.font-sans .card.border-base-300 {
  border-color: var(--h-border-subtle) !important;
}
body.font-sans .card.border:hover, body.font-sans .card.border-base-300:hover {
  border-color: var(--h-border-default) !important;
}

/* === 营销页 world-map.svg 在深色底上不可见: 反色 + 弱光晕 === */
body.font-sans img[src*="world-map.svg"] {
  /* 黑色路径 -> 白色, 再降饱和染一点冷蓝紫色, 整体压低不喧宾夺主 */
  filter: invert(1) brightness(0.85) hue-rotate(210deg) saturate(0.45) !important;
  opacity: 0.35 !important;
}

/* === 地图标记点: 强制亮色 + 发光晕, 区分主要枢纽 / 次要城市 === */
/* 主要枢纽 (w-3 h-3) - 紫 */
body.font-sans .absolute.w-3.h-3.bg-primary,
body.font-sans .absolute.w-3.h-3[class*="bg-primary"] {
  background: #a78bfa !important;
  box-shadow: 0 0 0 2px rgba(167,139,250,.25), 0 0 12px 2px rgba(167,139,250,.6) !important;
}
/* 主要枢纽 - 蓝 (东亚) */
body.font-sans .absolute.w-3.h-3.bg-secondary,
body.font-sans .absolute.w-3.h-3[class*="bg-secondary"] {
  background: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96,165,250,.25), 0 0 12px 2px rgba(96,165,250,.6) !important;
}
/* 主要枢纽 - 粉 (中东大洋洲南美) */
body.font-sans .absolute.w-3.h-3.bg-accent,
body.font-sans .absolute.w-3.h-3[class*="bg-accent"] {
  background: #f472b6 !important;
  box-shadow: 0 0 0 2px rgba(244,114,182,.25), 0 0 12px 2px rgba(244,114,182,.6) !important;
}

/* 次要城市 (w-2 h-2) - 紫 */
body.font-sans .absolute.w-2.h-2[class*="bg-primary"] {
  background: rgba(167,139,250,.95) !important;
  box-shadow: 0 0 6px rgba(167,139,250,.55) !important;
}
/* 次要城市 - 蓝 */
body.font-sans .absolute.w-2.h-2[class*="bg-secondary"] {
  background: rgba(96,165,250,.95) !important;
  box-shadow: 0 0 6px rgba(96,165,250,.55) !important;
}
/* 次要城市 - 粉 */
body.font-sans .absolute.w-2.h-2[class*="bg-accent"] {
  background: rgba(244,114,182,.95) !important;
  box-shadow: 0 0 6px rgba(244,114,182,.55) !important;
}
/* 次要城市 - 金 (南亚) */
body.font-sans .absolute.w-2.h-2[class*="bg-warning"] {
  background: rgba(251,191,36,.95) !important;
  box-shadow: 0 0 6px rgba(251,191,36,.55) !important;
}

/* === 修对比表格分割线 (daisyUI .table 用半透明 HSL, 深底上发白) === */
body.font-sans .table,
body.font-sans .table tr,
body.font-sans .table tbody tr,
body.font-sans .table thead tr,
body.font-sans .table th,
body.font-sans .table td {
  border-color: var(--h-border-subtle) !important;
  border-bottom-color: var(--h-border-subtle) !important;
}
body.font-sans .table thead, body.font-sans .table thead th {
  background: var(--h-bg-elevated) !important;
  color: var(--h-text-muted) !important;
  border-bottom-color: var(--h-border-default) !important;
}
body.font-sans .table thead th.bg-primary\/10 {
  background: var(--h-accent-dim) !important;
  color: var(--h-accent) !important;
}
body.font-sans .table tbody td { color: var(--h-text); }
body.font-sans .table tbody tr:hover { background: var(--h-bg-overlay) !important; }
/* 主推列高亮 (bg-primary/5) 改成淡紫光晕 */
body.font-sans .table td.bg-primary\/5,
body.font-sans .table td[class*="bg-primary"] {
  background: rgba(167,139,250,0.06) !important;
}

/* === FAQ 折叠条 (collapse) 描边 === */
body.font-sans .collapse.border, body.font-sans .collapse.border-base-300 {
  background: var(--h-bg-card) !important;
  border-color: var(--h-border-subtle) !important;
}
body.font-sans .collapse-title { color: var(--h-text-bright) !important; }
body.font-sans .collapse-content { color: var(--h-text-muted) !important; }

/* badge 配色 (对比表用) */
body.font-sans .badge { font-weight: 500; }
body.font-sans .badge-success { background: rgba(74,222,128,0.12) !important; color: var(--h-success) !important; border-color: rgba(74,222,128,0.30) !important; }
body.font-sans .badge-warning { background: rgba(251,191,36,0.12) !important; color: var(--h-warn) !important; border-color: rgba(251,191,36,0.30) !important; }
body.font-sans .badge-error { background: rgba(248,113,113,0.12) !important; color: var(--h-error) !important; border-color: rgba(248,113,113,0.30) !important; }

/* === 营销页 hero 渐变文字 (保留, 但用我们的紫蓝色) === */
body.font-sans .bg-gradient-to-r.from-sky-300.to-violet-300 {
  background: linear-gradient(90deg, var(--h-blue), var(--h-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* === scrollbar 全局美化 (深色环境) === */
* { scrollbar-color: var(--h-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }