/* =========================================================================
   LUSION THEME OVERRIDE  —  applied on top of Lovart pricing page
   只改 UI（token / 字体 / 组件视觉），不改任何框架结构
   依据 Lusion-kit-inline.html 的真站设计系统
   ========================================================================= */

@import url("lusion-fonts.css");           /* Space Grotesk (display) */

/* ---------------------------------------------------------------------------
   1) 重写 Lovart 语义 token —— 让所有 Tailwind 工具类自动换肤
   --------------------------------------------------------------------------- */
:root,
:root[data-mantine-color-scheme="light"],
:root[data-mantine-color-scheme="dark"],
html.light, html.dark,
html[data-mantine-color-scheme="light"],
html[data-mantine-color-scheme="dark"]{
  /* Lusion 调色板 */
  --lu-blue:#1a2ffb;
  --lu-dark-blue:#071bdf;
  --lu-green:#c1ff00;
  --lu-purple:#8832f7;
  --lu-off-white:#f0f1fa;
  --lu-dark-white:#e4e6ef;
  --lu-ink:#0a0c14;
  --lu-ink-soft:#4a4e5e;
  --lu-red:#ff4c41;

  /* —— 背景：Lusion 冷调 off-white —— */
  --bg-base-default:#f0f1fa;
  --bg-base-secondary:#e8eaf4;
  --bg-base-tertiary:#e0e2ef;
  --bg-input:#ffffff;

  /* —— 文本 —— */
  --text-default:#0a0c14;
  --text-secondary:#4a4e5e;
  --text-tertiary:#74788a;
  --text-invert:#ffffff;

  /* —— 反色 / 主 CTA：Lusion 电光蓝 —— */
  --bg-invert:#1a2ffb;
  --bg-invert-hover:#071bdf;
  --bg-invert-disabled:#c7cbe8;

  /* —— overlay —— */
  --bg-overlay-l1:rgba(10,12,20,.05);
  --bg-overlay-l2:rgba(10,12,20,.10);
  --bg-overlay-l3:rgba(10,12,20,.16);

  /* —— 描边 —— */
  --border-neutral-l1:rgba(10,12,20,.08);
  --border-neutral-l2:rgba(10,12,20,.14);
  --border-neutral-l3:rgba(10,12,20,.22);
  --border-contrast:#0a0c14;
  --border-hair-color:rgba(10,12,20,.10);

  /* —— 品牌色阶 —— */
  --brand:#1a2ffb;
  --color-brand-300:#9aa6ff;
  --color-brand-400:#6776ff;
  --color-brand-500:#3a4dff;
  --color-brand-600:#1a2ffb;
  --color-brand-700:#071bdf;

  /* —— 显示字体 → Space Grotesk —— */
  --font-Feature-Display:"Space Grotesk";
  --font-Feature-Deck:"Space Grotesk";

  /* —— 阴影：更克制的 Lusion 风 —— */
  --shadow-normal:0px 6px 22px -10px rgba(10,12,20,.14);
  --shadow-hover:0 18px 44px -20px rgba(10,12,20,.32);
}

/* ---------------------------------------------------------------------------
   2) embed 场景：背景透明，只保留卡片白底
   --------------------------------------------------------------------------- */
html, body{
  background-color:transparent !important;
  background-image:none !important;
}
body > div{
  background:transparent !important;
}

::selection{ background:var(--lu-blue); color:#fff; }

/* ---------------------------------------------------------------------------
   3) 排版：标题使用 Space Grotesk，收紧字距
   --------------------------------------------------------------------------- */
h1, h2, .font-serif-display{
  font-family:"Space Grotesk","Inter",sans-serif !important;
  letter-spacing:-.02em !important;
  font-weight:500 !important;
}
h3{
  font-family:"Space Grotesk","Inter",sans-serif !important;
  letter-spacing:-.01em !important;
}

/* ---------------------------------------------------------------------------
   4) 圆角语言：Lusion 偏大圆角(20px) + pill 按钮
   --------------------------------------------------------------------------- */
/* 定价卡片等大容器 → 20px */
[class*="rounded-[20px]"],
[class*="rounded-[24px]"],
[class*="rounded-2xl"],
[class*="rounded-3xl"]{
  border-radius:20px !important;
}

/* ---------------------------------------------------------------------------
   5) 主 CTA 按钮（bg-invert 系）→ 电光蓝实心 pill
   --------------------------------------------------------------------------- */
.bg-bg-invert{
  background-color:var(--lu-blue) !important;
  color:#fff !important;
  border-radius:999px !important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s ease !important;
}
.bg-bg-invert:hover,
.hover\:bg-bg-invert-hover:hover{
  background-color:var(--lu-dark-blue) !important;
}
.bg-bg-invert:active{ transform:scale(.97); }
.text-text-invert{ color:#fff !important; }

/* ---------------------------------------------------------------------------
   6) 月付/年付分段切换器 —— 选中态用 Lusion 蓝
   --------------------------------------------------------------------------- */
/* 选中胶囊（通常是绝对定位的滑块）*/
[class*="bg-bg-base-default"][class*="rounded-full"],
[class*="bg-white"][class*="rounded-full"][class*="absolute"]{
  box-shadow:0 4px 14px -6px rgba(26,47,251,.45) !important;
}

/* ---------------------------------------------------------------------------
   7) 定价卡片：白底 + 细描边 + hover 微浮起
   --------------------------------------------------------------------------- */
[class*="bg-bg-input"],
[class*="bg-white"]{
  /* 卡片背景保持白，描边换 Lusion 冷调 */
}

/* 卡片通用 hover 抬升（命中带 transition 的卡容器）*/
.transition-all.duration-200,
.transition-colors{
  transition-timing-function:cubic-bezier(.2,.8,.2,1) !important;
}

/* ---------------------------------------------------------------------------
   8) 强调描边（Pro/推荐卡）→ 电光蓝
   --------------------------------------------------------------------------- */
[class*="border-border-contrast"],
[class*="ring-border-contrast"]{
  border-color:var(--lu-blue) !important;
}

/* ---------------------------------------------------------------------------
   9) 团队版 / 次级按钮：描边 pill，hover 反白
   --------------------------------------------------------------------------- */
.border-border-neutral-l2.bg-transparent{
  border-color:var(--border-neutral-l2) !important;
  border-radius:999px !important;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
.border-border-neutral-l2.bg-transparent:hover{
  background:var(--lu-ink) !important;
  color:#fff !important;
  border-color:var(--lu-ink) !important;
}

/* ---------------------------------------------------------------------------
   10) 链接 / 文字高亮色统一到 Lusion 蓝
   --------------------------------------------------------------------------- */
.text-brand,
[class*="text-color-brand"],
a.text-text-default:hover{
  color:var(--lu-blue) !important;
}

/* ---------------------------------------------------------------------------
   11) 输入框聚焦：Lusion 蓝光圈
   --------------------------------------------------------------------------- */
input:focus, textarea:focus, select:focus,
.bg-bg-input:focus-within{
  outline:none !important;
  border-color:var(--lu-blue) !important;
  box-shadow:0 0 0 4px rgba(26,47,251,.14) !important;
}

/* ---------------------------------------------------------------------------
   12) 焦点环 token → 蓝
   --------------------------------------------------------------------------- */
.focus-visible\:ring-2:focus-visible{
  --tw-ring-color:rgba(26,47,251,.55) !important;
}

/* ---------------------------------------------------------------------------
   13) 隐藏第 4 张定价卡（Ultimate），只保留三张并改为 3 列布局
   --------------------------------------------------------------------------- */
[class*="grid-cols-4"]{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  align-items:stretch !important;
}
[class*="grid-cols-4"] > :nth-child(4){
  display:none !important;
}
[class*="grid-cols-4"] > *{
  display:flex !important;
  min-width:0 !important;
}
[class*="grid-cols-4"] > * > [class*="flex-col"][class*="rounded-[16px]"],
[class*="grid-cols-4"] > * > [class*="flex-col"][class*="border"]{
  flex:1 1 auto !important;
  width:100% !important;
}

/* ---------------------------------------------------------------------------
   14) 所有定价卡 → 纯白底
   --------------------------------------------------------------------------- */
[class*="grid-cols-4"] > :nth-child(-n+3) .bg-bg-base-default,
[class*="grid-cols-4"] [class*="bg-special-white"]{
  background-color:#ffffff !important;
}

/* ---------------------------------------------------------------------------
   15) 定价卡内「立即升级」CTA → 纯黑实心 pill
   --------------------------------------------------------------------------- */
[class*="grid-cols-4"] .bg-bg-invert{
  background-color:#0a0c14 !important;
  color:#ffffff !important;
}
[class*="grid-cols-4"] .bg-bg-invert:hover{
  background-color:#000000 !important;
}

/* ---------------------------------------------------------------------------
   16) Pro 卡紫色 #8b5cf6 → 品牌蓝 #1a2ffb
   --------------------------------------------------------------------------- */
[class*="grid-cols-4"] [class*="bg-[#8b5cf6]"]{
  background-color:#1a2ffb !important;
}
[class*="grid-cols-4"] [class*="border-[#8b5cf6]"]{
  border-color:#1a2ffb !important;
}
[class*="grid-cols-4"] [class*="bg-[rgba(139,92,246"]{
  background-color:rgba(26,47,251,.10) !important;
}

/* ---------------------------------------------------------------------------
   17) 去掉每张卡的「热门模型」价格模块
   --------------------------------------------------------------------------- */
[class*="grid-cols-4"] [class*="rounded-[12px]"]{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   18) 去掉 CTA 按钮下方「相比月付省下 $XX」小字
   --------------------------------------------------------------------------- */
[class*="grid-cols-4"] .bg-bg-invert + span{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   19) 去掉功能项下的 11px 灰色补充说明小字
   --------------------------------------------------------------------------- */
[class*="grid-cols-4"] p[class*="text-[11px]"]{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   20) 去掉切换器旁的「团队版」按钮
   --------------------------------------------------------------------------- */
.border-border-neutral-l2.bg-transparent{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   21) 去掉「模型积分消耗 & 每月生成数量」整段对比表模块
   （该 section wrapper 的 class 恰为单独的 mt-[120px]，FAQ 区另有附加类不受影响）
   --------------------------------------------------------------------------- */
div[class="mt-[120px]"]{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   22) 去掉整个「常见问题」FAQ 模块
   （FAQ section 带 mt-[120px]，底部「用 Lovart 设计」CTA section 无此类，不受影响）
   --------------------------------------------------------------------------- */
section[class*="mt-[120px]"]{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   23) Header：去掉移动端抽屉菜单（nav 已在 HTML 中移除）
   --------------------------------------------------------------------------- */
header .bg-bg-base-secondary{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   25) 去掉卡片底部通用功能项（访问模型 / 可商用 / 充值等）
   --------------------------------------------------------------------------- */
[data-testid="paywall-sku-list"]{
  padding-bottom:1.5rem !important;
}