/* ═══════════════════════════════════════════════════════════════════════════
 * pricing-rebrand.css —— 「模型广场」(/pricing) 前端 UI 重设计
 *
 * 作用域：html[data-zy-pricing]
 *   该属性由 index.html <head> 内的引导脚本（首屏无闪烁）与
 *   /pricing-rebrand.js（SPA 路由切换）共同维护。
 *
 * 设计目标（对齐用户需求）：
 *   · 简洁   —— 收掉超大标题、双段长说明、冗余说明文案，压缩留白
 *   · 科技感 —— 网格底纹 + 冷色光晕 + 玻璃拟态 + 渐变强调色 + 悬停辉光
 *   · 去官方观感 —— 不复用 shadcn 默认外观，建立自研品牌视觉语言
 *
 * 铁律（本项目）：
 *   1. 只改「视觉」：颜色 / 间距 / 圆角 / 阴影 / 字阶 / 伪元素装饰
 *   2. 不删节点、不改 innerHTML、不动 React 管理的结构
 *   3. 功能零改动：搜索、排序、筛选、视图切换、详情抽屉、
 *      model-square-experience.js 注入的「体验」按钮全部保留
 *   4. 不依赖 Tailwind 内部变量实现（用 outline 代替 ring，避免版本差异）
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 0. 设计令牌 ───────────────────────────── */
html[data-zy-pricing] {
  --zy-ink: #0b1220;
  --zy-ink-2: #5b6b84;
  --zy-ink-3: #8593a8;
  --zy-line: rgba(15, 23, 42, 0.09);
  --zy-line-2: rgba(15, 23, 42, 0.055);
  --zy-surface: rgba(255, 255, 255, 0.74);
  --zy-surface-2: rgba(255, 255, 255, 0.92);
  --zy-a1: #2563eb;   /* 主蓝 */
  --zy-a2: #0ea5e9;   /* 天蓝 */
  --zy-a3: #06b6d4;   /* 青 */
  --zy-a4: #7c3aed;   /* 紫（点缀） */
  --zy-grad: linear-gradient(120deg, #2563eb 0%, #0ea5e9 55%, #06b6d4 100%);
  --zy-grad-text: linear-gradient(96deg, #1d4ed8 0%, #0ea5e9 48%, #06b6d4 100%);
  --zy-glow: 0 26px 52px -28px rgba(37, 99, 235, 0.55);
  --zy-card-shadow: 0 16px 40px -28px rgba(15, 23, 42, 0.5);
}

html.dark[data-zy-pricing] {
  --zy-ink: #e8eefb;
  --zy-ink-2: #94a3b8;
  --zy-ink-3: #6b7c93;
  --zy-line: rgba(148, 163, 184, 0.16);
  --zy-line-2: rgba(148, 163, 184, 0.10);
  --zy-surface: rgba(15, 22, 38, 0.66);
  --zy-surface-2: rgba(13, 19, 33, 0.9);
  --zy-grad-text: linear-gradient(96deg, #60a5fa 0%, #22d3ee 55%, #a78bfa 100%);
  --zy-glow: 0 26px 56px -26px rgba(56, 189, 248, 0.45);
  --zy-card-shadow: 0 20px 46px -30px rgba(0, 0, 0, 0.85);
}

/* ───────────────────── 1. 页面基底：网格 + 光晕 ───────────────────── */
/* 应用外壳（bg-background，min-h-svh）原本是纯色不透明层，覆盖整屏。
   把底纹画在它上面，即可在「不改变层级 / 不新增 fixed 元素」的前提下换肤。 */
html[data-zy-pricing] #root > div[class*='min-h-svh'] {
  background-color: #f3f6fc;
  background-image:
    radial-gradient(1100px 460px at 8% -12%, rgba(37, 99, 235, 0.16), transparent 62%),
    radial-gradient(900px 430px at 94% -8%, rgba(6, 182, 212, 0.16), transparent 62%),
    radial-gradient(760px 360px at 50% 112%, rgba(124, 58, 237, 0.10), transparent 66%),
    linear-gradient(to right, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: auto, auto, auto, 46px 46px, 46px 46px;
  background-attachment: fixed;
}

html.dark[data-zy-pricing] #root > div[class*='min-h-svh'] {
  background-color: #070b14;
  background-image:
    radial-gradient(1100px 460px at 8% -12%, rgba(56, 189, 248, 0.20), transparent 62%),
    radial-gradient(900px 430px at 94% -8%, rgba(59, 130, 246, 0.20), transparent 62%),
    radial-gradient(760px 360px at 50% 112%, rgba(124, 58, 237, 0.16), transparent 66%),
    linear-gradient(to right, rgba(148, 163, 184, 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.075) 1px, transparent 1px);
  background-size: auto, auto, auto, 46px 46px, 46px 46px;
  background-attachment: fixed;
}

/* 顶部导航：玻璃磨砂条（仅本页；导航本身是 fixed 透明条，不加会与网格打架） */
html[data-zy-pricing] #root > div[class*='min-h-svh'] > header[class*='fixed'] {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.07);
}
html.dark[data-zy-pricing] #root > div[class*='min-h-svh'] > header[class*='fixed'] {
  background: rgba(7, 11, 20, 0.7);
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.14);
}

/* 隐藏官方自带的三团光晕（已由页面基底统一接管，避免叠加浑浊） */
html[data-zy-pricing] [class*='max-w-[1800px]'] > div[aria-hidden='true'],
html[data-zy-pricing] div:has(> [class*='max-w-[1800px]']) > div[aria-hidden='true'] {
  display: none !important;
}

/* ─────────────────── 2. 主容器 / 首屏标题区（压缩 + 渐变） ─────────────────── */
html[data-zy-pricing] [class*='max-w-[1800px]'] {
  max-width: 1640px !important;
  padding-top: 88px !important;
  padding-bottom: 44px !important;
}

html[data-zy-pricing] [class*='max-w-[1800px]'] > header {
  max-width: 820px !important;
  margin-bottom: 26px !important;
  padding-top: 0 !important;
}

html[data-zy-pricing] [class*='max-w-[1800px]'] > header > h1 {
  margin: 0 !important;
  font-size: clamp(1.9rem, 3.5vw, 2.85rem) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.028em !important;
  background: var(--zy-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 第一段（模型计数）→ 状态胶囊 */
html[data-zy-pricing] [class*='max-w-[1800px]'] > header > p:nth-of-type(1) {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0 !important;
  padding: 5px 14px;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
}
html.dark[data-zy-pricing] [class*='max-w-[1800px]'] > header > p:nth-of-type(1) {
  color: #93c5fd !important;
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.24);
}
html[data-zy-pricing] [class*='max-w-[1800px]'] > header > p:nth-of-type(1)::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  animation: zy-pulse 2.4s ease-in-out infinite;
}
@keyframes zy-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

/* 第二段（长说明）→ 收窄、降级为副标题 */
html[data-zy-pricing] [class*='max-w-[1800px]'] > header > p:nth-of-type(2) {
  max-width: 560px !important;
  margin: 10px auto 0 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--zy-ink-2) !important;
}

/* 搜索框 → 玻璃胶囊 */
html[data-zy-pricing] [class*='max-w-[1800px]'] > header > div {
  max-width: 560px !important;
  margin-top: 22px !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] > header input {
  height: 44px !important;
  border-radius: 999px !important;
  padding-left: 44px !important;
  font-size: 13.5px !important;
  border-color: var(--zy-line) !important;
  background: var(--zy-surface) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: var(--zy-card-shadow);
}
html[data-zy-pricing] [class*='max-w-[1800px]'] > header input:focus {
  border-color: rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.13), var(--zy-card-shadow) !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] > header svg[class*='lucide-search'] {
  left: 18px !important;
  color: rgba(37, 99, 235, 0.62) !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] > header kbd {
  border-radius: 999px !important;
  border-color: var(--zy-line) !important;
  background: rgba(15, 23, 42, 0.05) !important;
}

/* ───────────────────────────── 3. 栅格 ───────────────────────────── */
@media (min-width: 1280px) {
  html[data-zy-pricing] [class*='max-w-[1800px]'] > div[class*='xl:grid-cols-'] {
    grid-template-columns: 264px minmax(0, 1fr) !important;
    gap: 18px !important;
  }
}

/* 卡片网格：更紧凑；超宽屏 4 列，提升「广场」密度 */
html[data-zy-pricing] [class*='xl:grid-cols-3'] {
  gap: 18px !important;
}
@media (min-width: 1536px) {
  html[data-zy-pricing] [class*='xl:grid-cols-3'] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ───────────────────── 4. 左侧筛选栏（玻璃卡 + 胶囊 chip） ───────────────────── */
html[data-zy-pricing] [class*='max-w-[1800px]'] aside:not([class*='border-0']) {
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid var(--zy-line) !important;
  background: var(--zy-surface) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: var(--zy-card-shadow);
}
html[data-zy-pricing] [class*='max-w-[1800px]'] aside h2 {
  font-size: 13.5px !important;
  letter-spacing: 0.02em;
  color: var(--zy-ink) !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] aside h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0ea5e9, #2563eb);
}
/* 冗余说明文案「按供应商、分组、类型和标签细化模型。」→ 收起（简洁） */
html[data-zy-pricing] [class*='max-w-[1800px]'] aside h2 + p {
  display: none !important;
}

html[data-zy-pricing] [class*='max-w-[1800px]'] aside [data-slot='collapsible-trigger'] {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] aside [data-slot='collapsible-trigger'] > span {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em;
  color: var(--zy-ink-2) !important;
}

/* 筛选 chip：胶囊 + 悬停辉光 + 选中渐变 */
html[data-zy-pricing] [class*='max-w-[1800px]'] aside [data-slot='collapsible-content'] [data-slot='button'] {
  padding: 3px 10px !important;
  border-radius: 999px !important;
  border-color: var(--zy-line) !important;
  background: transparent !important;
  font-size: 11.5px !important;
  color: var(--zy-ink-2) !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] aside [data-slot='collapsible-content'] [data-slot='button']:hover {
  border-color: rgba(37, 99, 235, 0.42) !important;
  background: rgba(37, 99, 235, 0.07) !important;
  color: #1d4ed8 !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] aside [data-slot='collapsible-content'] [data-slot='button'][aria-pressed='true'] {
  border-color: transparent !important;
  background: var(--zy-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.9);
}
html.dark[data-zy-pricing] [class*='max-w-[1800px]'] aside [data-slot='collapsible-content'] [data-slot='button'][aria-pressed='true'] {
  color: #04121f !important;
}
/* chip 内的计数徽标 */
html[data-zy-pricing] [class*='max-w-[1800px]'] aside [data-slot='collapsible-content'] [data-slot='button'] > span[class*='rounded-md'] {
  padding: 1px 6px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--zy-ink-3) !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] aside [data-slot='collapsible-content'] [data-slot='button'][aria-pressed='true'] > span[class*='rounded-md'] {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1d4ed8 !important;
}

/* ───────────────────── 5. 工具栏（玻璃条 + 胶囊控件） ───────────────────── */
html[data-zy-pricing] [class*='max-w-[1800px]'] main > div.rounded-xl {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--zy-line) !important;
  background: var(--zy-surface) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: var(--zy-card-shadow);
}
html[data-zy-pricing] [class*='max-w-[1800px]'] main > div.rounded-xl [data-slot='toggle-group'] {
  padding: 2px !important;
  border-radius: 999px !important;
  border-color: var(--zy-line) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] main > div.rounded-xl [data-slot='toggle-group-item'] {
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  color: var(--zy-ink-2) !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] main > div.rounded-xl [data-slot='dropdown-menu-trigger'] {
  border-radius: 999px !important;
  border-color: var(--zy-line) !important;
  background: transparent !important;
  color: var(--zy-ink-2) !important;
}

/* ───────────────────── 6. 模型卡片（核心视觉） ───────────────────── */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card'] {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  background: var(--zy-surface) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  /* 用 outline 代替 Tailwind ring：不影响布局，且不依赖其内部变量实现 */
  outline: 1px solid var(--zy-line);
  outline-offset: -1px;
  box-shadow: var(--zy-card-shadow) !important;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.24s ease, outline-color 0.24s ease;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card']:hover {
  transform: translateY(-3px);
  outline-color: rgba(37, 99, 235, 0.42);
  box-shadow: var(--zy-glow) !important;
}
/* 顶部渐变高光条（悬停出现） */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card']::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, #0ea5e9, #06b6d4, #7c3aed);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card']:hover::after {
  opacity: 1;
}

/* 模型图标底座 */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-header'] > div[aria-hidden='true'] {
  border-radius: 12px !important;
  background: linear-gradient(140deg, rgba(37, 99, 235, 0.14), rgba(6, 182, 212, 0.10)) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16);
}
/* 模型名 */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card'] h3 {
  font-size: 14.5px !important;
  letter-spacing: -0.01em;
  color: var(--zy-ink) !important;
}
/* 模型描述 → 降级为辅助信息（官方默认色太重，抢视觉焦点） */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-content'] p[class*='line-clamp-2'] {
  font-size: 12.5px !important;
  color: var(--zy-ink-3) !important;
}
/* 计费模式徽章 → 由官方高饱和紫改为品牌冷色描边标签，降低视觉噪声 */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card'] [data-slot='status-badge'] {
  padding: 1px 9px !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.07) !important;
  color: #1d4ed8 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
html.dark[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card'] [data-slot='status-badge'] {
  border-color: rgba(56, 189, 248, 0.26) !important;
  background: rgba(56, 189, 248, 0.10) !important;
  color: #7dd3fc !important;
}
/* 价格数字 → 强调色 */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-content'] span[class*='tabular-nums'] {
  color: #1d4ed8 !important;
}
html.dark[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-content'] span[class*='tabular-nums'] {
  color: #7dd3fc !important;
}
/* 「体验」按钮（由 model-square-experience.js 注入，data-wb-exp）→ 主 CTA 渐变胶囊 */
html[data-zy-pricing] [data-wb-exp] {
  padding: 5px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--zy-grad) !important;
  color: #fff !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.95);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
html[data-zy-pricing] [data-wb-exp]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 26px -12px rgba(37, 99, 235, 1);
}
/* 「详情」按钮 */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-footer'] [data-slot='button'] {
  border-radius: 999px !important;
  color: var(--zy-ink-2) !important;
  transition: background 0.18s ease, color 0.18s ease;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-footer'] [data-slot='button']:hover {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #1d4ed8 !important;
}

/* ── 卡片底栏排版修复（2026-10-16）──
   官方底栏是 `flex items-center justify-between gap-3` 单行：
   [状态/延迟/吞吐 指标] .......... [体验] [详情]
   卡片变窄时（约 <380px）指标块被压缩，其内容会**溢出到操作按钮下面**，
   表现为「体验」按钮压住了「延迟/吞吐」文字。
   修复：允许换行 —— 放不下时按钮整组落到第二行，永不复压。 */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-footer'] > div {
  flex-wrap: wrap;
  row-gap: 10px;
}
/* 操作按钮组始终靠右（换行后也靠右，不会散开） */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-footer'] [data-wb-exp] {
  margin-left: auto;
}
/* 指标块略收紧，降低换行频率 */
html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card-footer'] dl {
  gap: 14px !important;
}

/* ───────────────────── 7. 表格视图（次要模式，轻量统一） ───────────────────── */
html[data-zy-pricing] [class*='max-w-[1800px]'] main thead th {
  font-size: 11.5px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--zy-ink-3) !important;
  background: rgba(37, 99, 235, 0.05) !important;
}
html.dark[data-zy-pricing] [class*='max-w-[1800px]'] main thead th {
  background: rgba(56, 189, 248, 0.07) !important;
}
html[data-zy-pricing] [class*='max-w-[1800px]'] main tbody tr:hover {
  background: rgba(37, 99, 235, 0.05) !important;
}

/* ───────────────────── 8. 空状态 / 加载骨架（轻量适配） ───────────────────── */
html[data-zy-pricing] [class*='max-w-[1800px]'] main .rounded-xl[class*='border-dashed'] {
  border-radius: 16px !important;
  border-color: var(--zy-line) !important;
}

/* 尊重「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  html[data-zy-pricing] [class*='max-w-[1800px]'] [data-slot='card'],
  html[data-zy-pricing] [data-wb-exp],
  html[data-zy-pricing] [class*='max-w-[1800px]'] > header > p:nth-of-type(1)::before {
    transition: none !important;
    animation: none !important;
  }
}