/* =============================================================
   FanCloud 模型广场（/pricing）主题对齐
   —— 把该页 shadcn 的中性灰换成站点「墨青」配色
   作用域：<html data-fs-pricing="1">（由 pricing-card.js 打标）
   与 pricing-card.css 分工：那个管布局，这个只管颜色与质感
   可调参数集中在下方的变量区
   ============================================================= */

html[data-fs-pricing="1"] {
  /* ---- 墨青调色板 ---- */
  --fc-ink-0: #060b12;
  --fc-ink-1: #0a1220;
  --fc-ink-2: #0d1725;
  --fc-cyan: #22d3ee;
  --fc-cyan-deep: #1fb6c9;
  --fc-line: rgba(120, 180, 220, 0.16);
  --fc-line-strong: rgba(34, 211, 238, 0.34);
  --fc-surface: rgba(12, 21, 34, 0.86);
  --fc-surface-2: rgba(15, 26, 42, 0.92);

  /* ---- 覆盖 shadcn 变量：卡片 / 侧栏 / 输入框 / 弹层一起生效 ---- */
  --card: #0c1522;
  --card-foreground: #e6edf6;
  --popover: #0d1725;
  --popover-foreground: #e6edf6;
  --muted: #0f1a2a;
  --muted-foreground: #91a5ba;
  --secondary: #101c2c;
  --secondary-foreground: #cbd5e1;
  --accent: rgba(34, 211, 238, 0.13);
  --accent-foreground: #7fe3f0;
  --primary: #1fb6c9;
  --primary-foreground: #04121a;
  --border: rgba(120, 180, 220, 0.16);
  --input: rgba(120, 180, 220, 0.2);
  --ring: rgba(34, 211, 238, 0.5);
}

/* 浅色主题：宣纸底 + 茶青 */
html:not(.dark)[data-fs-pricing="1"] {
  --fc-line: rgba(15, 23, 42, 0.12);
  --fc-line-strong: rgba(13, 148, 136, 0.42);
  --fc-surface: #ffffff;
  --fc-surface-2: #ffffff;

  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #fffdf7;
  --popover-foreground: #0f172a;
  --muted: #f4efe2;
  --muted-foreground: #5b6b7c;
  --secondary: #f1ece0;
  --secondary-foreground: #1f2937;
  --accent: rgba(13, 148, 136, 0.1);
  --accent-foreground: #0f766e;
  --primary: #0f766e;
  --primary-foreground: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --input: rgba(15, 23, 42, 0.14);
  --ring: rgba(13, 148, 136, 0.4);
}

/* =============================================================
   卡片：默认 bg-card 是纯色中性灰，这里改成墨色玻璃 + 青色描边
   ============================================================= */
html[data-fs-pricing="1"] [data-slot="card"] {
  position: relative;
  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-line) !important;
  box-shadow:
    0 18px 40px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

html[data-fs-pricing="1"] [data-slot="card"]:hover {
  border-color: var(--fc-line-strong) !important;
  box-shadow:
    0 22px 48px -28px rgba(0, 0, 0, 0.92),
    0 0 26px -14px rgba(34, 211, 238, 0.5) !important;
}

/* 卡片顶部一条青色高光，跟首页卡片呼应 */
html[data-fs-pricing="1"] [data-slot="card"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.5) 30%,
    rgba(167, 139, 250, 0.42) 70%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

html[data-fs-pricing="1"] [data-slot="card"]:hover::before { opacity: 1; }

html:not(.dark)[data-fs-pricing="1"] [data-slot="card"] {
  background: #ffffff !important;
  box-shadow:
    0 10px 24px -20px rgba(15, 23, 42, 0.42),
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(15, 23, 42, 0.04) inset !important;
}

html:not(.dark)[data-fs-pricing="1"] [data-slot="card"]:hover {
  box-shadow:
    0 16px 32px -22px rgba(15, 23, 42, 0.38),
    0 0 22px -16px rgba(13, 148, 136, 0.4) !important;
}

/* =============================================================
   搜索框：原先是透明底，只靠一层 ring，和背景糊在一起
   ============================================================= */
html[data-fs-pricing="1"] input[placeholder*="搜索"],
html[data-fs-pricing="1"] input[type="search"] {
  background: var(--fc-surface-2) !important;
  border: 1px solid var(--fc-line) !important;
  color: var(--card-foreground) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-fs-pricing="1"] input[placeholder*="搜索"]:focus,
html[data-fs-pricing="1"] input[type="search"]:focus {
  border-color: var(--fc-line-strong) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12) !important;
  outline: none !important;
}

/* 搜索框外层容器（图标 + 输入 + 快捷键提示） */
html[data-fs-pricing="1"] header .relative:has(> input) {
  background: var(--fc-surface-2);
  border: 1px solid var(--fc-line);
  border-radius: 10px;
}

/* =============================================================
   分段控件（标准 / 充值 / 1元 / VIP）与「名称」下拉
   ============================================================= */
html[data-fs-pricing="1"] [data-slot="toggle-group"] {
  background: var(--fc-surface-2) !important;
  border: 1px solid var(--fc-line) !important;
  border-radius: 9px !important;
  padding: 2px !important;
}

html[data-fs-pricing="1"] [data-slot="toggle-group-item"] {
  border-radius: 7px !important;
  color: var(--muted-foreground) !important;
  transition: background 0.18s ease, color 0.18s ease;
}

html[data-fs-pricing="1"] [data-slot="toggle-group-item"][data-state="on"],
html[data-fs-pricing="1"] [data-slot="toggle-group-item"][aria-pressed="true"] {
  background: rgba(34, 211, 238, 0.16) !important;
  color: #9ceaf6 !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3) inset !important;
}

/* =============================================================
   徽章、按钮、状态点：统一到青色系
   ============================================================= */
html[data-fs-pricing="1"] [data-slot="status-badge"] {
  background: rgba(34, 211, 238, 0.1) !important;
  color: #8fe6f2 !important;
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
}

html[data-fs-pricing="1"] [data-slot="button"]:hover {
  border-color: var(--fc-line-strong) !important;
}

/* 价格块：数字用青色，单位与标签用次级灰 */
html[data-fs-pricing="1"] [data-slot="card-content"] [role="group"] span {
  color: #a8e9f4;
}

html:not(.dark)[data-fs-pricing="1"] [data-slot="card-content"] [role="group"] span {
  color: #0e7490;
}

/* =============================================================
   「6 个模型」这类小标题与页头说明
   ============================================================= */
html[data-fs-pricing="1"] .text-muted-foreground {
  color: var(--muted-foreground) !important;
}

/* 滚动条 */
html[data-fs-pricing="1"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-fs-pricing="1"] ::-webkit-scrollbar-track { background: transparent; }
html[data-fs-pricing="1"] ::-webkit-scrollbar-thumb {
  background: rgba(120, 180, 220, 0.22);
  border-radius: 999px;
}
html[data-fs-pricing="1"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 211, 238, 0.42);
}